From 398f63112a50d1fce55592a3dfa38557b3793007 Mon Sep 17 00:00:00 2001 From: Ashit Rath Date: Mon, 23 Dec 2024 14:13:19 +0530 Subject: [PATCH] chore: Changes for introducing disabled states for package pull in application (#38222) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description This PR introduces certain changes to facilitate disabled states when package pull is in progress. EE PR -> https://github.com/appsmithorg/appsmith/issues/37841 ## Automation /ok-to-test tags="@tag.Git" ### :mag: Cypress test results > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: 3c3aed7ca67559005f0ac6b6684e89b04c04f9d1 > Cypress dashboard. > Tags: `@tag.Git` > Spec: >
Fri, 20 Dec 2024 04:56:17 UTC ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No ## Summary by CodeRabbit - **New Features** - Introduced a `GitActionsWrapper` component for wrapping child elements. - Added a new function for improved error messaging during package upgrades. - Implemented a selector to check package upgrading status. - Enhanced the `Header` component to manage deployment state based on package upgrades. - Updated the `Disabler` component to visually indicate a disabled state. - **Bug Fixes** - Improved tooltip functionality for the deploy button when disabled. --- .../BottomBar/GitActionsWrapper.tsx | 7 +++ app/client/src/ce/constants/messages.ts | 2 + .../src/ce/selectors/packageSelectors.ts | 3 ++ .../BottomBar/GitActionsWrapper.tsx | 3 ++ .../src/pages/Editor/IDE/Header/index.tsx | 47 ++++++++++++------- app/client/src/pages/common/Disabler.tsx | 1 + 6 files changed, 45 insertions(+), 18 deletions(-) create mode 100644 app/client/src/ce/components/BottomBar/GitActionsWrapper.tsx create mode 100644 app/client/src/ee/components/BottomBar/GitActionsWrapper.tsx diff --git a/app/client/src/ce/components/BottomBar/GitActionsWrapper.tsx b/app/client/src/ce/components/BottomBar/GitActionsWrapper.tsx new file mode 100644 index 000000000000..6a917ffe6454 --- /dev/null +++ b/app/client/src/ce/components/BottomBar/GitActionsWrapper.tsx @@ -0,0 +1,7 @@ +// This function is used to wrap the children in a disabled container if the package is upgrading +// It's implemented in EE, but not in CE +function GitActionsWrapper({ children }: { children: React.ReactElement }) { + return children; +} + +export default GitActionsWrapper; diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts index d284e9e393df..9b7a7647538b 100644 --- a/app/client/src/ce/constants/messages.ts +++ b/app/client/src/ce/constants/messages.ts @@ -477,6 +477,8 @@ export const PAGE_SERVER_UNAVAILABLE_ERROR_CODE = () => "503"; // Modules export const CONVERT_MODULE_CTA_TEXT = () => "Create module"; export const CONVERT_MODULE_TO_NEW_PKG_OPTION = () => "Add to a new package"; +export const PACKAGE_UPGRADING_ACTION_STATUS = (action: string) => + `You're not able to ${action} while package references are updating. Please wait until the update is complete.`; // cloudHosting used in EE // eslint-disable-next-line @typescript-eslint/no-unused-vars diff --git a/app/client/src/ce/selectors/packageSelectors.ts b/app/client/src/ce/selectors/packageSelectors.ts index 56b5a10e485e..994228866acb 100644 --- a/app/client/src/ce/selectors/packageSelectors.ts +++ b/app/client/src/ce/selectors/packageSelectors.ts @@ -16,3 +16,6 @@ export const getPackagesList = (state: AppState): PackageMetadata[] => // eslint-disable-next-line @typescript-eslint/no-unused-vars export const getPackagesOfWorkspace = (state: AppState) => []; + +// eslint-disable-next-line @typescript-eslint/no-unused-vars +export const getIsPackageUpgrading = (state: AppState): boolean => false; diff --git a/app/client/src/ee/components/BottomBar/GitActionsWrapper.tsx b/app/client/src/ee/components/BottomBar/GitActionsWrapper.tsx new file mode 100644 index 000000000000..8f45572b54e2 --- /dev/null +++ b/app/client/src/ee/components/BottomBar/GitActionsWrapper.tsx @@ -0,0 +1,3 @@ +export * from "ce/components/BottomBar/GitActionsWrapper"; +import { default as CE_GitActionsWrapper } from "ce/components/BottomBar/GitActionsWrapper"; +export default CE_GitActionsWrapper; diff --git a/app/client/src/pages/Editor/IDE/Header/index.tsx b/app/client/src/pages/Editor/IDE/Header/index.tsx index 8a8016939705..f8e75cda9db7 100644 --- a/app/client/src/pages/Editor/IDE/Header/index.tsx +++ b/app/client/src/pages/Editor/IDE/Header/index.tsx @@ -29,6 +29,7 @@ import { IN_APP_EMBED_SETTING, INVITE_TAB, HEADER_TITLES, + PACKAGE_UPGRADING_ACTION_STATUS, } from "ee/constants/messages"; import EditorName from "pages/Editor/EditorName"; import { @@ -79,6 +80,7 @@ import { APPLICATIONS_URL } from "constants/routes"; import { useNavigationMenuData } from "../../EditorName/useNavigationMenuData"; import useLibraryHeaderTitle from "ee/pages/Editor/IDE/Header/useLibraryHeaderTitle"; import { AppsmithLink } from "pages/Editor/AppsmithLink"; +import { getIsPackageUpgrading } from "ee/selectors/packageSelectors"; const StyledDivider = styled(Divider)` height: 50%; @@ -86,6 +88,12 @@ const StyledDivider = styled(Divider)` margin-right: 8px; `; +// This wrapper maintains pointer events for tooltips when the child button is disabled. +// Without this, disabled buttons won't trigger tooltips because they have pointer-events: none +const StyledTooltipTarget = styled.span` + display: inline-block; +`; + const { cloudHosting } = getAppsmithConfigs(); interface HeaderTitleProps { @@ -130,6 +138,7 @@ const Header = () => { const isErroredSavingName = useSelector(getIsErroredSavingAppName); const applicationList = useSelector(getApplicationList); const isProtectedMode = useSelector(protectedModeSelector); + const isPackageUpgrading = useSelector(getIsPackageUpgrading); const isPublishing = useSelector(getIsPublishingApplication); const isGitConnected = useSelector(getIsGitConnected); const pageId = useSelector(getCurrentPageId) as string; @@ -137,7 +146,10 @@ const Header = () => { const appState = useCurrentAppState(); const isSaving = useSelector(getIsPageSaving); const pageSaveError = useSelector(getPageSavingError); - + const isDeployDisabled = isPackageUpgrading || isProtectedMode; + const deployTooltipText = isPackageUpgrading + ? createMessage(PACKAGE_UPGRADING_ACTION_STATUS, "deploy this app") + : createMessage(DEPLOY_BUTTON_TOOLTIP); // states const [isPopoverOpen, setIsPopoverOpen] = useState(false); const [showModal, setShowModal] = useState(false); @@ -326,23 +338,22 @@ const Header = () => { showModal={showPublishCommunityTemplateModal} />
- - + + + + diff --git a/app/client/src/pages/common/Disabler.tsx b/app/client/src/pages/common/Disabler.tsx index 8bbbfb978de6..3fc3ebf221bb 100644 --- a/app/client/src/pages/common/Disabler.tsx +++ b/app/client/src/pages/common/Disabler.tsx @@ -12,6 +12,7 @@ const DisabledContainer = styled.div` width: 100%; display: flex; flex-direction: column; + cursor: not-allowed; & * { pointer-events: none;