chore: Changes for introducing disabled states for package pull in ap…

…plication (#38222)

## Description
This PR introduces certain changes to facilitate disabled states when
package pull is in progress.

EE PR -> #37841


## Automation

/ok-to-test tags="@tag.Git"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/12425304652>
> Commit: 3c3aed7
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=12425304652&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Git`
> Spec:
> <hr>Fri, 20 Dec 2024 04:56:17 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## 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.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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;