chore: Changes for introducing disabled states for package pull in application

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;

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

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;

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;

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,13 +80,20 @@ 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%;
   margin-left: 8px;
   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,14 +138,18 @@ 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;
   const currentPage = useSelector(getPageById(pageId));
   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<boolean>(false);
   const [showModal, setShowModal] = useState<boolean>(false);
@@ -326,23 +338,22 @@ const Header = () => {
             showModal={showPublishCommunityTemplateModal}
           />
           <div className="flex items-center">
-            <Tooltip
-              content={createMessage(DEPLOY_BUTTON_TOOLTIP)}
-              placement="bottomRight"
-            >
-              <Button
-                className="t--application-publish-btn"
-                data-guided-tour-iid="deploy"
-                id={"application-publish-btn"}
-                isDisabled={isProtectedMode}
-                isLoading={isPublishing}
-                kind="tertiary"
-                onClick={handleClickDeploy}
-                size="md"
-                startIcon={"rocket"}
-              >
-                {DEPLOY_MENU_OPTION()}
-              </Button>
+            <Tooltip content={deployTooltipText} placement="bottomRight">
+              <StyledTooltipTarget>
+                <Button
+                  className="t--application-publish-btn"
+                  data-guided-tour-iid="deploy"
+                  id={"application-publish-btn"}
+                  isDisabled={isDeployDisabled}
+                  isLoading={isPublishing}
+                  kind="tertiary"
+                  onClick={handleClickDeploy}
+                  size="md"
+                  startIcon={"rocket"}
+                >
+                  {DEPLOY_MENU_OPTION()}
+                </Button>
+              </StyledTooltipTarget>
             </Tooltip>
 
             <DeployLinkButtonDialog link={deployLink} trigger="" />

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;