fix: Resetting the search keyword when the user un-mounts from the home page (#26060)

## Description

- Resetting the search keyword when the user un-mounts from the home
page
- Moving business and enterprise tags to components

#### PR fixes following issue(s)
Fixes [#24972](https://github.com/appsmithorg/appsmith/issues/24972)

#### Type of change
- Bug fix (non-breaking change which fixes an issue)
- Chore (housekeeping or task changes that don't impact user perception)

## Testing

#### How Has This Been Tested?
- [x] Manual
- [ ] Jest
- [ ] Cypress

## Checklist:
#### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed

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

@@ -88,7 +88,7 @@ describe("Admin settings page", function () {
       cy.wait(2000);
       cy.go(-1);
       cy.get(adminsSettings.provisioning).within(() => {
-        cy.get(adminsSettings.businessTag)
+        cy.get(adminsSettings.enterpriseTag)
           .should("exist")
           .should("contain", "Enterprise");
       });

app/client/cypress/locators/AdminsSettings.js

@@ -32,4 +32,5 @@ export default {
   provisioning: ".t--settings-category-provisioning",
   upgrageLeftPane: "[data-testid='t--enterprise-settings-category-item-be']",
   businessTag: "[data-testid='t--business-tag']",
+  enterpriseTag: "[data-testid='t--enterprise-tag']",
 };

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

@@ -9,15 +9,12 @@ import {
 import { adminSettingsCategoryUrl } from "RouteBuilder";
 import { useParams } from "react-router";
 import AnalyticsUtil from "utils/AnalyticsUtil";
-import { Icon, Tag, Text } from "design-system";
+import { Icon, Text } from "design-system";
 import { useDispatch, useSelector } from "react-redux";
 import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants";
 import { getCurrentUser } from "selectors/usersSelectors";
-import {
-  BUSINESS_TAG,
-  ENTERPRISE_TAG,
-  createMessage,
-} from "@appsmith/constants/messages";
+import BusinessTag from "components/BusinessTag";
+import EnterpriseTag from "components/EnterpriseTag";
 
 export const Wrapper = styled.div`
   flex-basis: ${(props) => props.theme.sidebarWidth};
@@ -159,13 +156,8 @@ export function Categories({
                 config?.icon && <Icon name={config?.icon} size="md" />
               )}
               <SettingName active={active}>{config.title}</SettingName>
-              {config?.needsUpgrade && (
-                <Tag data-testid="t--business-tag" isClosable={false}>
-                  {createMessage(
-                    config?.isEnterprise ? ENTERPRISE_TAG : BUSINESS_TAG,
-                  )}
-                </Tag>
-              )}
+              {config?.needsUpgrade &&
+                (config?.isEnterprise ? <EnterpriseTag /> : <BusinessTag />)}
             </StyledLink>
             {showSubCategory && (
               <Categories

app/client/src/ce/pages/AdminSettings/config/authentication/AuthPage.tsx

@@ -10,20 +10,12 @@ import {
   EDIT,
   UPGRADE,
   AUTHENTICATION_METHOD_ENABLED,
-  BUSINESS_TAG,
 } from "@appsmith/constants/messages";
-import {
-  Button,
-  Callout,
-  Divider,
-  Icon,
-  Tag,
-  Text,
-  Tooltip,
-} from "design-system";
+import { Button, Callout, Divider, Icon, Text, Tooltip } from "design-system";
 import { adminSettingsCategoryUrl } from "RouteBuilder";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 import useOnUpgrade from "utils/hooks/useOnUpgrade";
+import BusinessTag from "components/BusinessTag";
 
 export const Wrapper = styled.div`
   flex-basis: calc(100% - ${(props) => props.theme.homePage.leftPane.width}px);
@@ -191,11 +183,7 @@ export function AuthPage({ authMethods }: { authMethods: AuthMethodType[] }) {
                       renderAs="p"
                     >
                       {method.label} 
-                      {method.needsUpgrade && (
-                        <Tag isClosable={false}>
-                          {createMessage(BUSINESS_TAG)}
-                        </Tag>
-                      )}
+                      {method.needsUpgrade && <BusinessTag />}
                       {method.isConnected && (
                         <Tooltip
                           content={createMessage(

app/client/src/ce/pages/AdminSettings/config/branding/UpgradeBanner.tsx

@@ -1,10 +1,9 @@
 import React from "react";
-import { Button, Tag } from "design-system";
+import { Button } from "design-system";
 import { ContentBox } from "pages/Settings/components";
 import {
   ADMIN_BRANDING_SETTINGS_SUBTITLE,
   ADMIN_BRANDING_SETTINGS_TITLE,
-  BUSINESS_TAG,
   createMessage,
 } from "@appsmith/constants/messages";
 import useOnUpgrade from "utils/hooks/useOnUpgrade";
@@ -13,6 +12,7 @@ import {
   SettingsSubHeader,
 } from "@appsmith/pages/AdminSettings/config/authentication/AuthPage";
 import styled from "styled-components";
+import BusinessTag from "components/BusinessTag";
 
 const StyledSettingsSubHeader = styled(SettingsSubHeader)`
   margin: 0;
@@ -27,9 +27,7 @@ const UpgradeBanner = () => {
     <div className="pb-4 pr-7">
       <ContentBox className="flex items-center justify-between p-6 border upgrade-banner">
         <main>
-          <Tag className="business-tag" isClosable={false}>
-            {createMessage(BUSINESS_TAG)}
-          </Tag>
+          <BusinessTag />
           <SettingsHeader
             className="mt-1"
             color="var(--ads-v2-color-fg-emphasis-plus)"

app/client/src/ce/pages/Applications/index.tsx

@@ -1014,6 +1014,7 @@ export class Applications<
 
   componentWillUnmount() {
     this.props.setHeaderMetaData(false, false);
+    this.props.searchApplications("");
   }
 
   public render() {

app/client/src/ce/pages/workspace/WorkspaceInviteUsersForm.tsx

@@ -26,7 +26,6 @@ import {
   CUSTOM_ROLES_RAMP_TEXT,
   CUSTOM_ROLE_DISABLED_OPTION_TEXT,
   CUSTOM_ROLE_TEXT,
-  BUSINESS_TAG,
 } from "@appsmith/constants/messages";
 import { isEmail } from "utils/formhelpers";
 import {
@@ -47,7 +46,6 @@ import {
   Option,
   Tooltip,
   toast,
-  Tag,
   Link,
 } from "design-system";
 import { getInitialsFromName } from "utils/AppsmithUtils";
@@ -62,6 +60,7 @@ import { importSvg } from "design-system-old";
 import type { WorkspaceUserRoles } from "@appsmith/constants/workspaceConstants";
 import { getRampLink, showProductRamps } from "utils/ProductRamps";
 import { RAMP_NAME } from "utils/ProductRamps/RampsControlList";
+import BusinessTag from "components/BusinessTag";
 
 const NoEmailConfigImage = importSvg(
   () => import("assets/images/email-not-configured.svg"),
@@ -308,9 +307,7 @@ export function CustomRolesRamp() {
           <Text color="var(--ads-v2-color-fg-emphasis)" kind="heading-xs">
             {createMessage(CUSTOM_ROLE_TEXT)}
           </Text>
-          <Tag isClosable={false} size="md">
-            {createMessage(BUSINESS_TAG)}
-          </Tag>
+          <BusinessTag size="md" />
         </div>
         <Text kind="body-s">
           {createMessage(CUSTOM_ROLE_DISABLED_OPTION_TEXT)}

app/client/src/components/BusinessTag.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import type { TagSizes } from "design-system";
+import { Tag } from "design-system";
+import { BUSINESS_TAG, createMessage } from "@appsmith/constants/messages";
+
+const BusinessTag = ({
+  classes = "",
+  size,
+}: {
+  classes?: string;
+  size?: TagSizes;
+}) => {
+  return (
+    <Tag
+      className={`business-tag ${classes}`}
+      data-testid="t--business-tag"
+      isClosable={false}
+      // kind="premium"
+      {...(size && { size })}
+    >
+      {createMessage(BUSINESS_TAG)}
+    </Tag>
+  );
+};
+
+export default BusinessTag;

app/client/src/components/EnterpriseTag.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import type { TagSizes } from "design-system";
+import { Tag } from "design-system";
+import { ENTERPRISE_TAG, createMessage } from "@appsmith/constants/messages";
+
+const EnterpriseTag = ({
+  classes = "",
+  size,
+}: {
+  classes?: string;
+  size?: TagSizes;
+}) => {
+  return (
+    <Tag
+      className={`enterprise-tag ${classes}`}
+      data-testid="t--enterprise-tag"
+      isClosable={false}
+      // kind="special"
+      {...(size && { size })}
+    >
+      {createMessage(ENTERPRISE_TAG)}
+    </Tag>
+  );
+};
+
+export default EnterpriseTag;

app/client/src/ee/sagas/analyticsSaga.ts

@@ -1 +1 @@
-export * from "../../ce/sagas/analyticsSaga";
+export * from "ce/sagas/analyticsSaga";

app/client/src/pages/Applications/EmbedSnippet/PrivateEmbeddingContent.tsx

@@ -1,7 +1,6 @@
 import React from "react";
-import { Text, Link, Button, Icon, Tag } from "design-system";
+import { Text, Link, Button, Icon } from "design-system";
 import {
-  BUSINESS_TAG,
   createMessage,
   IN_APP_EMBED_SETTING,
 } from "@appsmith/constants/messages";
@@ -16,6 +15,7 @@ import {
 } from "utils/ProductRamps/RampsControlList";
 import { useSelector } from "react-redux";
 import { getRampLink, showProductRamps } from "selectors/rampSelectors";
+import BusinessTag from "components/BusinessTag";
 
 function PrivateEmbeddingContent(props: {
   userAppPermissions: any[];
@@ -59,9 +59,7 @@ export function PrivateEmbedRampModal() {
             <Text kind="body-m">
               {createMessage(IN_APP_EMBED_SETTING.privateAppsText)}
             </Text>
-            <Tag className="ml-1 mt-0.5" isClosable={false}>
-              {createMessage(BUSINESS_TAG)}
-            </Tag>
+            <BusinessTag classes="ml-1 mt-0.5" />
           </div>
           <Text
             className="w-7/10 block"

app/client/src/pages/Settings/FormGroup/Checkbox.tsx

@@ -4,11 +4,11 @@ import { Field, getFormValues } from "redux-form";
 import styled from "styled-components";
 import type { SettingComponentProps } from "./Common";
 import type { FormTextFieldProps } from "components/utils/ReduxFormTextField";
-import { Checkbox, Tag, Text } from "design-system";
+import { Checkbox, Text } from "design-system";
 import { useSelector } from "react-redux";
 import { SETTINGS_FORM_NAME } from "@appsmith/constants/forms";
 import { isTenantConfig } from "@appsmith/utils/adminSettingsHelpers";
-import { BUSINESS_TAG, createMessage } from "@appsmith/constants/messages";
+import BusinessTag from "components/BusinessTag";
 
 const CheckboxWrapper = styled.div`
   display: grid;
@@ -85,9 +85,7 @@ export function CheckboxComponent({ setting }: SettingComponentProps) {
         >
           {setting.label}
         </Text>
-        {setting.needsUpgrade && (
-          <Tag isClosable={false}>{createMessage(BUSINESS_TAG)}</Tag>
-        )}
+        {setting.needsUpgrade && <BusinessTag />}
       </div>
       <Field
         component={FieldCheckboxWithCheckboxText({