From 781fe274a19a267a743a7bdc368c8cc2e526f008 Mon Sep 17 00:00:00 2001
From: Rudraprasad Das <rudra@appsmith.com>
Date: Mon, 24 Mar 2025 09:42:05 +0100
Subject: [PATCH] chore: git tag - add chevron menu to package editor (#39870)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description
- Adds chevron menu to package editor

## Automation

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

### :mag: 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/14023181461>
> Commit: f427da94d24bbcbf8a69c92159e98651676f09b2
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=14023181461&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Git`
> Spec:
> <hr>Sun, 23 Mar 2025 22:27:03 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 new Price Tag icon to expand the design system’s visual
assets.
- Enhanced deployment menu behavior by conditionally showing or hiding
options based on Git connection status and permissions.
- Updated the header deployment interface to provide streamlined access,
where clicking a deployment option now opens the link in a new tab.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../ads/src/Icon/Icon.provider.tsx            |  4 +++
 .../DeployMenuItems/DeployMenuItemsView.tsx   |  9 +++++
 .../components/Header/ChevronMenu.tsx}        | 34 +++++++------------
 .../layouts/components/Header/index.tsx       |  4 +--
 4 files changed, 28 insertions(+), 23 deletions(-)
 rename app/client/src/{components/designSystems/appsmith/header/DeployLinkButton.tsx => pages/AppIDE/layouts/components/Header/ChevronMenu.tsx} (74%)

diff --git a/app/client/packages/design-system/ads/src/Icon/Icon.provider.tsx b/app/client/packages/design-system/ads/src/Icon/Icon.provider.tsx
index 1f6abfef5d..92b42c61ba 100644
--- a/app/client/packages/design-system/ads/src/Icon/Icon.provider.tsx
+++ b/app/client/packages/design-system/ads/src/Icon/Icon.provider.tsx
@@ -581,6 +581,9 @@ const AppsLineIcon = importRemixIcon(
 const ProtectedIcon = importRemixIcon(
   async () => import("remixicon-react/ShieldKeyholeLineIcon"),
 );
+const PriceTagIcon = importRemixIcon(
+  async () => import("remixicon-react/PriceTag3LineIcon"),
+);
 
 const CornerDownLeftLineIcon = importSvg(
   async () => import("../__assets__/icons/ads/corner-down-left-line.svg"),
@@ -1492,6 +1495,7 @@ const ICON_LOOKUP = {
   "widgets-v3": WidgetsV3Icon,
   "workflows-mono": WorkflowsMonochromeIcon,
   "protected-icon": ProtectedIcon,
+  pricetag: PriceTagIcon,
   billing: BillingIcon,
   binding: Binding,
   book: BookIcon,
diff --git a/app/client/src/git/components/DeployMenuItems/DeployMenuItemsView.tsx b/app/client/src/git/components/DeployMenuItems/DeployMenuItemsView.tsx
index 1d088eb2e4..91ab9a2933 100644
--- a/app/client/src/git/components/DeployMenuItems/DeployMenuItemsView.tsx
+++ b/app/client/src/git/components/DeployMenuItems/DeployMenuItemsView.tsx
@@ -3,6 +3,8 @@ import { MenuItem } from "@appsmith/ads";
 import { CONNECT_TO_GIT_OPTION, createMessage } from "ee/constants/messages";
 import AnalyticsUtil from "ee/utils/AnalyticsUtil";
 import noop from "lodash/noop";
+import useConnected from "git/hooks/useConnected";
+import { useGitContext } from "../GitContextProvider";
 
 interface DeployMenuItemsViewProps {
   toggleConnectModal: (open: boolean) => void;
@@ -11,6 +13,9 @@ interface DeployMenuItemsViewProps {
 function DeployMenuItemsView({
   toggleConnectModal = noop,
 }: DeployMenuItemsViewProps) {
+  const isConnected = useConnected();
+  const { isConnectPermitted } = useGitContext();
+
   const handleClickOnConnect = useCallback(() => {
     AnalyticsUtil.logEvent("GS_CONNECT_GIT_CLICK", {
       source: "Deploy button",
@@ -18,6 +23,10 @@ function DeployMenuItemsView({
     toggleConnectModal(true);
   }, [toggleConnectModal]);
 
+  if (isConnected || !isConnectPermitted) {
+    return null;
+  }
+
   return (
     <MenuItem
       data-testid="t--git-deploy-menu-connect"
diff --git a/app/client/src/components/designSystems/appsmith/header/DeployLinkButton.tsx b/app/client/src/pages/AppIDE/layouts/components/Header/ChevronMenu.tsx
similarity index 74%
rename from app/client/src/components/designSystems/appsmith/header/DeployLinkButton.tsx
rename to app/client/src/pages/AppIDE/layouts/components/Header/ChevronMenu.tsx
index 91eea09ab4..f0237abb47 100644
--- a/app/client/src/components/designSystems/appsmith/header/DeployLinkButton.tsx
+++ b/app/client/src/pages/AppIDE/layouts/components/Header/ChevronMenu.tsx
@@ -1,4 +1,3 @@
-import type { ReactNode } from "react";
 import React, { useCallback } from "react";
 import { Menu, MenuItem, MenuContent, MenuTrigger } from "@appsmith/ads";
 import { useSelector, useDispatch } from "react-redux";
@@ -11,12 +10,8 @@ import {
 } from "ee/constants/messages";
 import { Button } from "@appsmith/ads";
 import { KBEditorMenuItem } from "ee/pages/Editor/KnowledgeBase/KBEditorMenuItem";
-import { useHasConnectToGitPermission } from "pages/Editor/gitSync/hooks/gitPermissionHooks";
 import { getIsAnvilEnabledInCurrentApplication } from "layoutSystems/anvil/integrations/selectors";
-import {
-  useGitConnected,
-  useGitModEnabled,
-} from "pages/Editor/gitSync/hooks/modHooks";
+import { useGitModEnabled } from "pages/Editor/gitSync/hooks/modHooks";
 import { GitDeployMenuItems as GitDeployMenuItemsNew } from "git";
 
 function GitDeployMenuItems() {
@@ -49,19 +44,22 @@ function GitDeployMenuItems() {
   );
 }
 
-interface Props {
-  trigger: ReactNode;
-  link: string;
+interface ChevronMenuProps {
+  deployLink: string;
 }
 
-export const DeployLinkButton = (props: Props) => {
-  const isGitConnected = useGitConnected();
-  const isConnectToGitPermitted = useHasConnectToGitPermission();
+export const ChevronMenu = ({ deployLink }: ChevronMenuProps) => {
   // We check if the current application is an Anvil application.
   // If it is an Anvil application, we remove the Git features from the deploy button
   // as they donot yet work correctly with Anvil.
   const isAnvilEnabled = useSelector(getIsAnvilEnabledInCurrentApplication);
 
+  const handleClickOnLatestDeployed = useCallback(() => {
+    if (window) {
+      window.open(deployLink, "_blank")?.focus();
+    }
+  }, [deployLink]);
+
   return (
     <Menu>
       <MenuTrigger>
@@ -74,16 +72,10 @@ export const DeployLinkButton = (props: Props) => {
         />
       </MenuTrigger>
       <MenuContent>
-        {!isGitConnected && isConnectToGitPermitted && !isAnvilEnabled && (
-          <GitDeployMenuItems />
-        )}
+        {!isAnvilEnabled && <GitDeployMenuItems />}
         <MenuItem
           className="t--current-deployed-preview-btn"
-          onClick={() => {
-            if (window) {
-              window.open(props.link, "_blank")?.focus();
-            }
-          }}
+          onClick={handleClickOnLatestDeployed}
           startIcon="share-box-line"
         >
           {CURRENT_DEPLOY_PREVIEW_OPTION()}
@@ -94,4 +86,4 @@ export const DeployLinkButton = (props: Props) => {
   );
 };
 
-export default DeployLinkButton;
+export default ChevronMenu;
diff --git a/app/client/src/pages/AppIDE/layouts/components/Header/index.tsx b/app/client/src/pages/AppIDE/layouts/components/Header/index.tsx
index 68875cb989..e461215015 100644
--- a/app/client/src/pages/AppIDE/layouts/components/Header/index.tsx
+++ b/app/client/src/pages/AppIDE/layouts/components/Header/index.tsx
@@ -48,7 +48,6 @@ import AppInviteUsersForm from "pages/workspace/AppInviteUsersForm";
 import { getEmbedSnippetForm } from "ee/utils/BusinessFeatures/privateEmbedHelpers";
 import CommunityTemplatesPublishInfo from "pages/Editor/CommunityTemplates/Modals/CommunityTemplatesPublishInfo";
 import PublishCommunityTemplateModal from "pages/Editor/CommunityTemplates/Modals/PublishCommunityTemplate";
-import DeployLinkButtonDialog from "components/designSystems/appsmith/header/DeployLinkButton";
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
 import { getAppsmithConfigs } from "ee/configs";
@@ -65,6 +64,7 @@ import useLibraryHeaderTitle from "ee/pages/AppIDE/layouts/components/Header/use
 import { AppsmithLink } from "pages/Editor/AppsmithLink";
 import DeployButton from "./DeployButton";
 import { GitApplicationContextProvider } from "git-artifact-helpers/application/components";
+import ChevronMenu from "./ChevronMenu";
 
 const StyledDivider = styled(Divider)`
   height: 50%;
@@ -259,7 +259,7 @@ const Header = () => {
           />
           <div className="flex items-center">
             <DeployButton />
-            <DeployLinkButtonDialog link={deployLink} trigger="" />
+            <ChevronMenu deployLink={deployLink} />
           </div>
         </IDEHeader.Right>
       </IDEHeader>