From 2e6ede241998b9877d75a2a0af1d8c7dbcaf7b67 Mon Sep 17 00:00:00 2001 From: Jacques Ikot Date: Tue, 24 Jun 2025 18:04:57 +0100 Subject: [PATCH] refactor: extract RecentDomainsSection into reusable component (#41020) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### Description Refactored the recent domains section from being an inline constant in `SignUp.tsx` into a dedicated, reusable React component. This improves code organization, maintainability, and testability. ### Changes Made - **Created new component**: `RecentDomainsSection.tsx` - Encapsulates all logic for rendering recent organization domains - Handles conditional rendering internally (returns null when no domains) - Includes proper TypeScript types and imports - **Updated SignUp component**: - Removed inline `recentDomainsSection` constant definition - Added import for new `RecentDomainsSection` component - Replaced usage with JSX component - **Improved avatar logic**: - Changed from alphabetical cycling (`String.fromCharCode(65 + (index % 26))`) to using the actual organization name's first letter (`orgName.charAt(0).toUpperCase()`) - This provides more meaningful and recognizable avatars for users ## Automation /ok-to-test tags="@tag.Sanity, @tag.Authentication" ### :mag: Cypress test results > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: f4c799f7fd76851b404ddddd441728d9bd6445ca > Cypress dashboard. > Tags: `@tag.Sanity, @tag.Authentication` > Spec: >
Tue, 24 Jun 2025 01:35:51 UTC ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No ## Summary by CodeRabbit - **New Features** - Introduced a dedicated section to display recently accessed domains during user sign-up, allowing quick access to previously used domains. - **Refactor** - Modularized the recent domains display by moving its logic and UI into a separate component for improved maintainability and clarity. --- .../pages/UserAuth/RecentDomainsSection.tsx | 74 +++++++++++++++++++ app/client/src/pages/UserAuth/SignUp.tsx | 65 +--------------- 2 files changed, 78 insertions(+), 61 deletions(-) create mode 100644 app/client/src/pages/UserAuth/RecentDomainsSection.tsx diff --git a/app/client/src/pages/UserAuth/RecentDomainsSection.tsx b/app/client/src/pages/UserAuth/RecentDomainsSection.tsx new file mode 100644 index 0000000000..45e315d602 --- /dev/null +++ b/app/client/src/pages/UserAuth/RecentDomainsSection.tsx @@ -0,0 +1,74 @@ +import { Button, Text } from "@appsmith/ads"; +import { + createMessage, + YOU_VE_ALREADY_SIGNED_INTO, +} from "ee/constants/messages"; +import React from "react"; +import { getRecentDomains, isValidAppsmithDomain } from "utils/multiOrgDomains"; + +const RecentDomainsSection: React.FC = () => { + const recentDomains = getRecentDomains(); + + if (recentDomains.length === 0) { + return null; + } + + return ( +
+
+ {createMessage(YOU_VE_ALREADY_SIGNED_INTO)} +
+ +
+ {recentDomains.map((domain, index) => { + const orgName = domain + .split(".")[0] + .split("-") + .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) + .join(" "); + + const avatarLetter = orgName.charAt(0).toUpperCase(); + + const isLastItem = index === recentDomains.length - 1; + + return ( +
+
+
+ {avatarLetter} +
+
+ + {orgName} + + + {domain} + +
+
+ +
+ ); + })} +
+
+ ); +}; + +export default RecentDomainsSection; diff --git a/app/client/src/pages/UserAuth/SignUp.tsx b/app/client/src/pages/UserAuth/SignUp.tsx index 14b4e75aba..75851ed1b0 100644 --- a/app/client/src/pages/UserAuth/SignUp.tsx +++ b/app/client/src/pages/UserAuth/SignUp.tsx @@ -28,7 +28,6 @@ import { VISIT_OUR_DOCS, SIGN_IN_TO_AN_EXISTING_ORGANISATION, USING_APPSMITH, - YOU_VE_ALREADY_SIGNED_INTO, } from "ee/constants/messages"; import FormTextField from "components/utils/ReduxFormTextField"; import ThirdPartyAuth from "pages/UserAuth/ThirdPartyAuth"; @@ -66,7 +65,7 @@ import { isLoginHostname } from "utils/cloudBillingUtils"; import { appsmithTelemetry } from "instrumentation"; import { getIsAiAgentInstanceEnabled } from "ee/selectors/aiAgentSelectors"; import { getSafeErrorMessage } from "ee/constants/approvedErrorMessages"; -import { getRecentDomains, isValidAppsmithDomain } from "utils/multiOrgDomains"; +import RecentDomainsSection from "./RecentDomainsSection"; declare global { interface Window { @@ -76,7 +75,6 @@ declare global { } } const { cloudHosting, googleRecaptchaSiteKey } = getAppsmithConfigs(); -const recentDomains = getRecentDomains(); const validate = (values: SignupFormValues) => { const errors: SignupFormValues = {}; @@ -96,63 +94,6 @@ const validate = (values: SignupFormValues) => { return errors; }; -const recentDomainsSection = recentDomains.length > 0 && ( -
-
- {createMessage(YOU_VE_ALREADY_SIGNED_INTO)} -
- -
- {recentDomains.map((domain, index) => { - const orgName = domain - .split(".")[0] - .split("-") - .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) - .join(" "); - - const avatarLetter = String.fromCharCode(65 + (index % 26)); - - const isLastItem = index === recentDomains.length - 1; - - return ( -
-
-
- {avatarLetter} -
-
- - {orgName} - - - {domain} - -
-
- -
- ); - })} -
-
-); - type SignUpFormProps = InjectedFormProps< SignupFormValues, { emailValue: string } @@ -372,7 +313,9 @@ export function SignUp(props: SignUpFormProps) { )} {isCloudBillingEnabled && isHostnameEqualtoLogin && cloudBillingSignIn} - {isCloudBillingEnabled && isHostnameEqualtoLogin && recentDomainsSection} + {isCloudBillingEnabled && isHostnameEqualtoLogin && ( + + )} ); }