From 3c3aed7ca67559005f0ac6b6684e89b04c04f9d1 Mon Sep 17 00:00:00 2001 From: Ashit Rath Date: Wed, 18 Dec 2024 14:40:09 +0530 Subject: [PATCH] chore: Changes for introducing disabled states for package pull in application --- .../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 7cba3e4b788c..b30fe8f80e61 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;