fix: Updating the ramp link for Enterprise features to open the pricing page (#32698)

## Description

Updating the ramp link for Enterprise features to open the pricing page.

Fixes [#30211](https://github.com/appsmithorg/appsmith/issues/30211)  

## Automation

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

### 🔍 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/8706159532>
> Commit: b9925ae2ec5a14724586f72affa02a1d83078813
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8706159532&attempt=1"
target="_blank">Click here!</a>

<!-- end of auto-generated comment: Cypress test results  -->












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

- **New Features**
- Enhanced enterprise-level provisioning and authentication settings
across various components.
- Added a new Cypress command to improve testing by simulating customer
portal interactions.

- **Refactor**
- Streamlined UI components by adjusting styles and simplifying
rendering logic.
- Removed redundant spinner components and simplified conditions in
various editor components.

- **Style**
- Updated CSS properties and variables for better consistency and
maintainability.

- **Tests**
- Updated regression tests to reflect new functionalities and page
interactions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/cypress/e2e/Regression/Enterprise/AdminSettings/Admin_settings_spec.js

@@ -95,12 +95,12 @@ describe("Admin settings page", { tags: ["@tag.Settings"] }, function () {
       cy.get("@pricingPage").should("be.called");
       cy.wait(2000);
       cy.go(-1);
-      cy.stubPricingPage();
+      cy.stubCustomerPortalPage();
       cy.get(adminsSettings.branding).click();
       cy.url().should("contain", adminSettingsHelper.routes.BRANDING);
       cy.get(adminsSettings.brandingSubmitButton).should("be.disabled");
       cy.xpath(adminsSettings.upgrade).click();
-      cy.get("@pricingPage").should("be.called");
+      cy.get("@customerPortalPage").should("be.called");
       cy.wait(2000);
       cy.go(-1);
     }
@@ -119,11 +119,14 @@ describe("Admin settings page", { tags: ["@tag.Settings"] }, function () {
       });
       cy.get(adminsSettings.accessControl).click();
       cy.url().should("contain", adminSettingsHelper.routes.ACCESS_CONTROL);
-      cy.stubPricingPage();
+      cy.stubCustomerPortalPage();
       cy.xpath(adminsSettings.upgrade).click();
-      cy.get("@pricingPage").should("be.called");
+      cy.get("@customerPortalPage").should("be.called");
       cy.wait(2000);
-      cy.go(-1);
+      agHelper.VisitNAssert(
+        adminSettingsHelper.routes.GENERAL,
+        "getEnvVariables",
+      );
       cy.get(adminsSettings.auditLogs).within(() => {
         cy.get(adminsSettings.businessTag)
           .should("exist")
@@ -131,11 +134,14 @@ describe("Admin settings page", { tags: ["@tag.Settings"] }, function () {
       });
       cy.get(adminsSettings.auditLogs).click();
       cy.url().should("contain", adminSettingsHelper.routes.AUDIT_LOGS);
-      cy.stubPricingPage();
+      cy.stubCustomerPortalPage();
       cy.xpath(adminsSettings.upgrade).click();
-      cy.get("@pricingPage").should("be.called");
+      cy.get("@customerPortalPage").should("be.called");
       cy.wait(2000);
-      cy.go(-1);
+      agHelper.VisitNAssert(
+        adminSettingsHelper.routes.GENERAL,
+        "getEnvVariables",
+      );
       cy.get(adminsSettings.provisioning).within(() => {
         cy.get(adminsSettings.enterpriseTag)
           .should("exist")

app/client/cypress/support/commands.js

@@ -2076,6 +2076,14 @@ Cypress.Commands.add("stubPricingPage", () => {
   });
 });
 
+Cypress.Commands.add("stubCustomerPortalPage", () => {
+  cy.window().then((win) => {
+    cy.stub(win, "open", (url) => {
+      win.location.href = "https://customer.appsmith.com?";
+    }).as("customerPortalPage");
+  });
+});
+
 /**
  * @param testID
  * @returns

app/client/src/ce/pages/Upgrade/ProvisioningUpgradePage.tsx

@@ -22,6 +22,7 @@ export function ProvisioningUpgradePage() {
     logEventData: { source: "Provisioning" },
     featureName: RampFeature.Provisioning,
     sectionName: RampSection.AdminSettings,
+    isEnterprise: true,
   });
 
   const header: Header = {

app/client/src/components/editorComponents/ActionNameEditor.tsx

@@ -9,7 +9,7 @@ import { removeSpecialChars } from "utils/helpers";
 import type { AppState } from "@appsmith/reducers";
 
 import { saveActionName } from "actions/pluginActionActions";
-import { Flex, Spinner } from "design-system";
+import { Flex } from "design-system";
 import { getAction, getPlugin } from "@appsmith/selectors/entitiesSelector";
 import NameEditorComponent, {
   IconBox,
@@ -116,7 +116,6 @@ function ActionNameEditor(props: ActionNameEditorProps) {
               updating={saveStatus.isSaving}
               valueTransform={removeSpecialChars}
             />
-            {saveStatus.isSaving && <Spinner size="md" />}
           </Flex>
         </NameWrapper>
       )}

app/client/src/components/editorComponents/EditableText.tsx

@@ -6,7 +6,7 @@ import {
 } from "@blueprintjs/core";
 import styled from "styled-components";
 import _ from "lodash";
-import { Button, toast, Tooltip } from "design-system";
+import { Button, Spinner, toast, Tooltip } from "design-system";
 
 export enum EditInteractionKind {
   SINGLE,
@@ -221,13 +221,8 @@ export function EditableText(props: EditableTextProps) {
     [valueTransform, isInvalid],
   );
 
-  const showEditIcon = !(
+  const showEditIcon = !(disabled || minimal || hideEditIcon || isEditing);
-    disabled ||
+
-    minimal ||
-    hideEditIcon ||
-    updating ||
-    isEditing
-  );
   return (
     <EditableTextWrapper
       isEditing={isEditing}
@@ -265,15 +260,18 @@ export function EditableText(props: EditableTextProps) {
             selectAllOnFocus
             value={value}
           />
-          {showEditIcon && (
+          {showEditIcon &&
-            <Button
+            (updating ? (
-              className="t--action-name-edit-icon"
+              <Spinner size="md" />
-              isIconButton
+            ) : (
-              kind="tertiary"
+              <Button
-              size="md"
+                className="t--action-name-edit-icon"
-              startIcon="pencil-line"
+                isIconButton
-            />
+                kind="tertiary"
-          )}
+                size="md"
+                startIcon="pencil-line"
+              />
+            ))}
         </TextContainer>
       </Tooltip>
     </EditableTextWrapper>

app/client/src/pages/AdminSettings/Authentication/AuthPage.tsx

@@ -108,6 +108,7 @@ export function ActionButton({ method }: { method: AuthMethodType }) {
     logEventData: { method: method.label },
     featureName: RampFeature.Sso,
     sectionName: RampSection.AdminSettings,
+    isEnterprise: true,
   });
 
   const onClickHandler = (method: AuthMethodType) => {

app/client/src/pages/AdminSettings/FormGroup/Common.tsx

@@ -27,13 +27,13 @@ export const StyledLabel = styled.div`
   margin-bottom: 4px;
   display: flex;
   align-items: center;
+  gap: var(--ads-v2-spaces-3);
 
   .admin-settings-form-group-label {
     font-weight: var(--ads-v2-h5-font-weight);
   }
 
   .help-icon {
-    margin-left: 8px;
     cursor: pointer;
   }
 `;
@@ -66,11 +66,11 @@ export function FormGroup({ children, className, setting }: FieldHelperProps) {
             renderAs="label"
           >
             {setting.label || ""}
+            {setting.isRequired && (
+              <StyledAsterisk renderAs="span">*</StyledAsterisk>
+            )}
           </Text>
         )}
-        {setting.isRequired && (
-          <StyledAsterisk renderAs="span">*</StyledAsterisk>
-        )}
         {setting.helpText && (
           <Tooltip content={createMessage(() => setting.helpText || "")}>
             <Icon
@@ -82,14 +82,8 @@ export function FormGroup({ children, className, setting }: FieldHelperProps) {
             />
           </Tooltip>
         )}
-        <div className="ml-2">
+        {setting.isFeatureEnabled === false &&
-          {setting.isFeatureEnabled === false &&
+          (setting.isEnterprise === true ? <EnterpriseTag /> : <BusinessTag />)}
-            (setting.isEnterprise === true ? (
-              <EnterpriseTag />
-            ) : (
-              <BusinessTag />
-            ))}
-        </div>
       </StyledLabel>
       {children}
       {setting.subText && (

app/client/src/pages/AdminSettings/LeftPane.tsx

@@ -68,7 +68,7 @@ export const StyledLink = styled(Link)<{ $active: boolean }>`
 
   .ads-v2-text {
     display: flex;
-    gap: 12px;
+    gap: var(--ads-v2-spaces-3);
     align-items: center;
   }
 

app/client/src/pages/Editor/DataSourceEditor/FormTitle.tsx

@@ -15,7 +15,6 @@ import {
   saveDatasourceName,
   updateDatasourceName,
 } from "actions/datasourceActions";
-import { Spinner } from "@blueprintjs/core";
 import { TEMP_DATASOURCE_ID } from "constants/Datasource";
 
 const Wrapper = styled.div`
@@ -151,7 +150,6 @@ function FormTitle(props: FormTitleProps) {
         underline
         updating={saveStatus.isSaving}
       />
-      {saveStatus.isSaving && <Spinner size={16} />}
     </Wrapper>
   );
 }

app/client/src/pages/Editor/JSEditor/JSObjectNameEditor.tsx

@@ -16,7 +16,7 @@ import {
 import EditableText, {
   EditInteractionKind,
 } from "components/editorComponents/EditableText";
-import { Flex, Spinner } from "design-system";
+import { Flex } from "design-system";
 import { getAssetUrl } from "@appsmith/utils/airgapHelpers";
 import NameEditorComponent, {
   IconBox,
@@ -113,7 +113,6 @@ export function JSObjectNameEditor(props: JSObjectNameEditorProps) {
               updating={saveStatus.isSaving}
               valueTransform={removeSpecialChars}
             />
-            {saveStatus.isSaving && <Spinner size="md" />}
           </Flex>
         </NameWrapper>
       )}

app/client/src/utils/hooks/useOnUpgrade.ts

@@ -1,6 +1,9 @@
 import { useSelector } from "react-redux";
 import { getInstanceId } from "@appsmith/selectors/tenantSelectors";
-import { CUSTOMER_PORTAL_URL_WITH_PARAMS } from "constants/ThirdPartyConstants";
+import {
+  CUSTOMER_PORTAL_URL_WITH_PARAMS,
+  PRICING_PAGE_URL,
+} from "constants/ThirdPartyConstants";
 import type { EventName } from "@appsmith/utils/analyticsUtilTypes";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 import { getAppsmithConfigs } from "@appsmith/configs";
@@ -15,10 +18,12 @@ interface Props {
   logEventData?: any;
   featureName?: RampFeature;
   sectionName?: RampSection;
+  isEnterprise?: boolean;
 }
 
 const useOnUpgrade = (props: Props) => {
-  const { featureName, logEventData, logEventName, sectionName } = props;
+  const { featureName, isEnterprise, logEventData, logEventName, sectionName } =
+    props;
   const instanceId = useSelector(getInstanceId);
   const appsmithConfigs = getAppsmithConfigs();
 
@@ -27,16 +32,28 @@ const useOnUpgrade = (props: Props) => {
       logEventName || "ADMIN_SETTINGS_UPGRADE",
       logEventData,
     );
-    window.open(
+    if (isEnterprise) {
-      CUSTOMER_PORTAL_URL_WITH_PARAMS(
+      window.open(
-        appsmithConfigs.customerPortalUrl,
+        PRICING_PAGE_URL(
-        pricingPageUrlSource,
+          appsmithConfigs.pricingUrl,
-        instanceId,
+          pricingPageUrlSource,
-        featureName,
+          instanceId,
-        sectionName,
+          featureName,
-      ),
+          sectionName,
-      "_blank",
+        ),
-    );
+      );
+    } else {
+      window.open(
+        CUSTOMER_PORTAL_URL_WITH_PARAMS(
+          appsmithConfigs.customerPortalUrl,
+          pricingPageUrlSource,
+          instanceId,
+          featureName,
+          sectionName,
+        ),
+        "_blank",
+      );
+    }
   };
 
   return { onUpgrade };