review(front): refacto url-manager (#8861)

Replace https://github.com/twentyhq/twenty/pull/8855

packages/twenty-front/src/pages/auth/SignInUp.tsx

@@ -14,27 +14,33 @@ import { SignInUpWorkspaceScopeForm } from '@/auth/sign-in-up/components/SignInU
 import { DEFAULT_WORKSPACE_NAME } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceName';
 import { SignInUpSSOIdentityProviderSelection } from '@/auth/sign-in-up/components/SignInUpSSOIdentityProviderSelection';
 import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState';
-import { useUrlManager } from '@/url-manager/hooks/useUrlManager';
 import { useMemo } from 'react';
 import { isDefined } from '~/utils/isDefined';
 import { SignInUpWorkspaceScopeFormEffect } from '@/auth/sign-in-up/components/SignInUpWorkspaceScopeFormEffect';
+import { useGetPublicWorkspaceDataBySubdomain } from '@/domain-manager/hooks/useGetPublicWorkspaceDataBySubdomain';
+import { useIsCurrentLocationOnAWorkspaceSubdomain } from '@/domain-manager/hooks/useIsCurrentLocationOnAWorkspaceSubdomain';
+import { useIsCurrentLocationOnDefaultDomain } from '@/domain-manager/hooks/useIsCurrentLocationOnDefaultDomain';
 
 export const SignInUp = () => {
   const { form } = useSignInUpForm();
   const { signInUpStep } = useSignInUp(form);
-  const { isTwentyHomePage, isTwentyWorkspaceSubdomain } = useUrlManager();
-
+  const { isDefaultDomain } = useIsCurrentLocationOnDefaultDomain();
+  const { isOnAWorkspaceSubdomain } =
+    useIsCurrentLocationOnAWorkspaceSubdomain();
   const workspacePublicData = useRecoilValue(workspacePublicDataState);
+  const { loading } = useGetPublicWorkspaceDataBySubdomain();
   const isMultiWorkspaceEnabled = useRecoilValue(isMultiWorkspaceEnabledState);
 
   const signInUpForm = useMemo(() => {
-    if (isTwentyHomePage && isMultiWorkspaceEnabled) {
+    if (loading) return null;
+
+    if (isDefaultDomain && isMultiWorkspaceEnabled) {
       return <SignInUpGlobalScopeForm />;
     }
 
     if (
       (!isMultiWorkspaceEnabled ||
-        (isMultiWorkspaceEnabled && isTwentyWorkspaceSubdomain)) &&
+        (isMultiWorkspaceEnabled && isOnAWorkspaceSubdomain)) &&
       signInUpStep === SignInUpStep.SSOIdentityProviderSelection
     ) {
       return <SignInUpSSOIdentityProviderSelection />;
@@ -42,7 +48,7 @@ export const SignInUp = () => {
 
     if (
       isDefined(workspacePublicData) &&
-      (!isMultiWorkspaceEnabled || isTwentyWorkspaceSubdomain)
+      (!isMultiWorkspaceEnabled || isOnAWorkspaceSubdomain)
     ) {
       return (
         <>
@@ -54,9 +60,10 @@ export const SignInUp = () => {
 
     return <SignInUpGlobalScopeForm />;
   }, [
-    isTwentyHomePage,
+    isDefaultDomain,
     isMultiWorkspaceEnabled,
-    isTwentyWorkspaceSubdomain,
+    isOnAWorkspaceSubdomain,
+    loading,
     signInUpStep,
     workspacePublicData,
   ]);

packages/twenty-front/src/pages/onboarding/CreateWorkspace.tsx

@@ -24,7 +24,7 @@ import {
 import { isDefined } from '~/utils/isDefined';
 import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState';
 import { AppPath } from '@/types/AppPath';
-import { useUrlManager } from '@/url-manager/hooks/useUrlManager';
+import { useRedirectToWorkspaceDomain } from '@/domain-manager/hooks/useRedirectToWorkspaceDomain';
 
 const StyledContentContainer = styled.div`
   width: 100%;
@@ -51,7 +51,7 @@ export const CreateWorkspace = () => {
   const { enqueueSnackBar } = useSnackBar();
   const onboardingStatus = useOnboardingStatus();
   const isMultiWorkspaceEnabled = useRecoilValue(isMultiWorkspaceEnabledState);
-  const { redirectToWorkspace } = useUrlManager();
+  const { redirectToWorkspaceDomain } = useRedirectToWorkspaceDomain();
 
   const [activateWorkspace] = useActivateWorkspaceMutation();
   const apolloMetadataClient = useApolloMetadataClient();
@@ -84,7 +84,7 @@ export const CreateWorkspace = () => {
         setIsCurrentUserLoaded(false);
 
         if (isDefined(result.data) && isMultiWorkspaceEnabled) {
-          return redirectToWorkspace(
+          return redirectToWorkspaceDomain(
             result.data.activateWorkspace.workspace.subdomain,
             AppPath.Verify,
             {
@@ -111,7 +111,7 @@ export const CreateWorkspace = () => {
       setIsCurrentUserLoaded,
       isMultiWorkspaceEnabled,
       apolloMetadataClient,
-      redirectToWorkspace,
+      redirectToWorkspaceDomain,
       enqueueSnackBar,
     ],
   );

packages/twenty-front/src/pages/settings/SettingsWorkspace.tsx

@@ -1,9 +1,12 @@
-import { GithubVersionLink, H2Title, Section, IconWorld } from 'twenty-ui';
-import { Link } from 'react-router-dom';
+import {
+  GithubVersionLink,
+  H2Title,
+  Section,
+  IconWorld,
+  UndecoratedLink,
+} from 'twenty-ui';
 import { useRecoilValue } from 'recoil';
 
-import styled from '@emotion/styled';
-
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { DeleteWorkspace } from '@/settings/profile/components/DeleteWorkspace';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
@@ -16,10 +19,6 @@ import packageJson from '../../../package.json';
 import { SettingsCard } from '@/settings/components/SettingsCard';
 import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState';
 
-const StyledLink = styled(Link)`
-  text-decoration: none;
-`;
-
 export const SettingsWorkspace = () => {
   const isMultiWorkspaceEnabled = useRecoilValue(isMultiWorkspaceEnabledState);
   return (
@@ -48,9 +47,9 @@ export const SettingsWorkspace = () => {
               title="Domain"
               description="Edit your subdomain name or set a custom domain."
             />
-            <StyledLink to={getSettingsPagePath(SettingsPath.Domain)}>
+            <UndecoratedLink to={getSettingsPagePath(SettingsPath.Domain)}>
               <SettingsCard title="Customize Domain" Icon={<IconWorld />} />
-            </StyledLink>
+            </UndecoratedLink>
           </Section>
         )}
 

packages/twenty-front/src/pages/settings/workspace/SettingsDomain.tsx

@@ -15,9 +15,9 @@ import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/Snac
 import { useNavigate } from 'react-router-dom';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { useUpdateWorkspaceMutation } from '~/generated/graphql';
-import { useUrlManager } from '@/url-manager/hooks/useUrlManager';
-import { urlManagerState } from '@/url-manager/states/url-manager.state';
+import { domainConfigurationState } from '@/domain-manager/states/domainConfigurationState';
 import { isDefined } from '~/utils/isDefined';
+import { useBuildWorkspaceUrl } from '@/domain-manager/hooks/useBuildWorkspaceUrl';
 
 const validationSchema = z
   .object({
@@ -39,17 +39,17 @@ const StyledDomain = styled.h2`
   color: ${({ theme }) => theme.font.color.secondary};
   font-size: ${({ theme }) => theme.font.size.md};
   font-weight: ${({ theme }) => theme.font.weight.medium};
-  margin-left: 8px;
+  margin-left: ${({ theme }) => theme.spacing(2)};
 `;
 
 export const SettingsDomain = () => {
   const navigate = useNavigate();
 
-  const urlManager = useRecoilValue(urlManagerState);
+  const domainConfiguration = useRecoilValue(domainConfigurationState);
 
   const { enqueueSnackBar } = useSnackBar();
   const [updateWorkspace] = useUpdateWorkspaceMutation();
-  const { buildWorkspaceUrl } = useUrlManager();
+  const { buildWorkspaceUrl } = useBuildWorkspaceUrl();
 
   const [currentWorkspace, setCurrentWorkspace] = useRecoilState(
     currentWorkspaceState,
@@ -142,8 +142,8 @@ export const SettingsDomain = () => {
                   />
                 )}
               />
-              {isDefined(urlManager) && isDefined(urlManager.frontDomain) && (
-                <StyledDomain>.{urlManager.frontDomain}</StyledDomain>
+              {isDefined(domainConfiguration.frontDomain) && (
+                <StyledDomain>.{domainConfiguration.frontDomain}</StyledDomain>
               )}
             </StyledDomainFromWrapper>
           )}