feat(*): allow to select auth providers + add multiworkspace with subdomain management (#8656)

## Summary Add support for multi-workspace feature and adjust configurations and states accordingly. - Introduced new state isMultiWorkspaceEnabledState. - Updated ClientConfigProviderEffect component to handle multi-workspace. - Modified GraphQL schema and queries to include multi-workspace related configurations. - Adjusted server environment variables and their respective documentation to support multi-workspace toggle. - Updated server-side logic to handle new multi-workspace configurations and conditions.
2024-12-03 19:06:28 +01:00
parent 9a65e80566
commit 7943141d03
167 changed files with 5180 additions and 1901 deletions
--- a/packages/twenty-front/src/pages/settings/SettingsWorkspace.tsx
+++ b/packages/twenty-front/src/pages/settings/SettingsWorkspace.tsx
@ -1,4 +1,8 @@
-import { GithubVersionLink, H2Title, Section } from 'twenty-ui';
+import { GithubVersionLink, H2Title, Section, IconWorld } from 'twenty-ui';
+import { Link } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
+
+import styled from '@emotion/styled';

 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { DeleteWorkspace } from '@/settings/profile/components/DeleteWorkspace';
@ -9,39 +13,61 @@ import { WorkspaceLogoUploader } from '@/settings/workspace/components/Workspace
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
 import packageJson from '../../../package.json';
-export const SettingsWorkspace = () => (
-  <SubMenuTopBarContainer
-    title="General"
-    links={[
-      {
-        children: 'Workspace',
-        href: getSettingsPagePath(SettingsPath.Workspace),
-      },
-      { children: 'General' },
-    ]}
-  >
-    <SettingsPageContainer>
-      <Section>
-        <H2Title title="Picture" />
-        <WorkspaceLogoUploader />
-      </Section>
-      <Section>
-        <H2Title title="Name" description="Name of your workspace" />
-        <NameField />
-      </Section>
-      <Section>
-        <H2Title
-          title="Support"
-          adornment={<ToggleImpersonate />}
-          description="Grant Twenty support temporary access to your workspace so we can troubleshoot problems or recover content on your behalf. You can revoke access at any time."
-        />
-      </Section>
-      <Section>
-        <DeleteWorkspace />
-      </Section>
-      <Section>
-        <GithubVersionLink version={packageJson.version} />
-      </Section>
-    </SettingsPageContainer>
-  </SubMenuTopBarContainer>
-);
+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 (
+    <SubMenuTopBarContainer
+      title="General"
+      links={[
+        {
+          children: 'Workspace',
+          href: getSettingsPagePath(SettingsPath.Workspace),
+        },
+        { children: 'General' },
+      ]}
+    >
+      <SettingsPageContainer>
+        <Section>
+          <H2Title title="Picture" />
+          <WorkspaceLogoUploader />
+        </Section>
+        <Section>
+          <H2Title title="Name" description="Name of your workspace" />
+          <NameField />
+        </Section>
+        {isMultiWorkspaceEnabled && (
+          <Section>
+            <H2Title
+              title="Domain"
+              description="Edit your subdomain name or set a custom domain."
+            />
+            <StyledLink to={getSettingsPagePath(SettingsPath.Domain)}>
+              <SettingsCard title="Customize Domain" Icon={<IconWorld />} />
+            </StyledLink>
+          </Section>
+        )}
+
+        <Section>
+          <H2Title
+            title="Support"
+            adornment={<ToggleImpersonate />}
+            description="Grant Twenty support temporary access to your workspace so we can troubleshoot problems or recover content on your behalf. You can revoke access at any time."
+          />
+        </Section>
+        <Section>
+          <DeleteWorkspace />
+        </Section>
+        <Section>
+          <GithubVersionLink version={packageJson.version} />
+        </Section>
+      </SettingsPageContainer>
+    </SubMenuTopBarContainer>
+  );
+};
--- a/packages/twenty-front/src/pages/settings/security/SettingsSecurity.tsx
+++ b/packages/twenty-front/src/pages/settings/security/SettingsSecurity.tsx
@ -9,6 +9,9 @@ import { SettingsSecurityOptionsList } from '@/settings/security/components/Sett
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { isSSOEnabledState } from '@/client-config/states/isSSOEnabledState';
+import { useRecoilValue } from 'recoil';

 const StyledContainer = styled.div`
  width: 100%;
@ -26,6 +29,10 @@ const StyledSSOSection = styled(Section)`
 `;

 export const SettingsSecurity = () => {
+  const isSSOEnabled = useRecoilValue(isSSOEnabledState);
+  const isSSOSectionDisplay =
+    useIsFeatureEnabled('IS_SSO_ENABLED') && isSSOEnabled;
+
  return (
    <SubMenuTopBarContainer
      title="Security"
@ -40,26 +47,28 @@ export const SettingsSecurity = () => {
    >
      <SettingsPageContainer>
        <StyledMainContent>
-          <StyledSSOSection>
-            <H2Title
-              title="SSO"
-              description="Configure an SSO connection"
-              adornment={
-                <Tag
-                  text={'Enterprise'}
-                  color={'transparent'}
-                  Icon={IconLock}
-                  variant={'border'}
-                />
-              }
-            />
-            <SettingsSSOIdentitiesProvidersListCard />
-          </StyledSSOSection>
+          {isSSOSectionDisplay && (
+            <StyledSSOSection>
+              <H2Title
+                title="SSO"
+                description="Configure an SSO connection"
+                adornment={
+                  <Tag
+                    text={'Enterprise'}
+                    color={'transparent'}
+                    Icon={IconLock}
+                    variant={'border'}
+                  />
+                }
+              />
+              <SettingsSSOIdentitiesProvidersListCard />
+            </StyledSSOSection>
+          )}
          <Section>
            <AdvancedSettingsWrapper>
              <StyledContainer>
                <H2Title
-                  title="Other"
+                  title="Authentication"
                  description="Customize your workspace security"
                />
                <SettingsSecurityOptionsList />
--- a/packages/twenty-front/src/pages/settings/workspace/SettingsDomain.tsx
+++ b/packages/twenty-front/src/pages/settings/workspace/SettingsDomain.tsx
@ -0,0 +1,154 @@
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { SettingsPath } from '@/types/SettingsPath';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { H2Title, Section } from 'twenty-ui';
+import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
+import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { TextInputV2 } from '@/ui/input/components/TextInputV2';
+import { Controller, useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import styled from '@emotion/styled';
+import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
+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 { isDefined } from '~/utils/isDefined';
+
+const validationSchema = z
+  .object({
+    subdomain: z
+      .string()
+      .min(1, { message: 'Subdomain can not be empty' })
+      .max(63, { message: 'Subdomain can not be longer than 63 characters' }),
+  })
+  .required();
+
+type Form = z.infer<typeof validationSchema>;
+
+const StyledDomainFromWrapper = styled.div`
+  align-items: center;
+  display: flex;
+`;
+
+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;
+`;
+
+export const SettingsDomain = () => {
+  const navigate = useNavigate();
+
+  const urlManager = useRecoilValue(urlManagerState);
+
+  const { enqueueSnackBar } = useSnackBar();
+  const [updateWorkspace] = useUpdateWorkspaceMutation();
+  const { buildWorkspaceUrl } = useUrlManager();
+
+  const [currentWorkspace, setCurrentWorkspace] = useRecoilState(
+    currentWorkspaceState,
+  );
+
+  const handleSave = async () => {
+    try {
+      const values = getValues();
+
+      if (!values || !isValid || !currentWorkspace) {
+        throw new Error('Invalid form values');
+      }
+
+      await updateWorkspace({
+        variables: {
+          input: {
+            subdomain: values.subdomain,
+          },
+        },
+      });
+
+      setCurrentWorkspace({
+        ...currentWorkspace,
+        subdomain: values.subdomain,
+      });
+
+      window.location.href = buildWorkspaceUrl(values.subdomain);
+    } catch (error) {
+      enqueueSnackBar((error as Error).message, {
+        variant: SnackBarVariant.Error,
+      });
+    }
+  };
+
+  const {
+    control,
+    getValues,
+    formState: { isValid },
+  } = useForm<Form>({
+    mode: 'onChange',
+    defaultValues: {
+      subdomain: currentWorkspace?.subdomain ?? '',
+    },
+    resolver: zodResolver(validationSchema),
+  });
+
+  return (
+    <SubMenuTopBarContainer
+      title="General"
+      links={[
+        {
+          children: 'Workspace',
+          href: getSettingsPagePath(SettingsPath.Workspace),
+        },
+        {
+          children: 'General',
+          href: getSettingsPagePath(SettingsPath.Workspace),
+        },
+        { children: 'Domain' },
+      ]}
+      actionButton={
+        <SaveAndCancelButtons
+          isSaveDisabled={!isValid}
+          onCancel={() => navigate(getSettingsPagePath(SettingsPath.Workspace))}
+          onSave={handleSave}
+        />
+      }
+    >
+      <SettingsPageContainer>
+        <Section>
+          <H2Title
+            title="Domain"
+            description="Set the name of your subdomain"
+          />
+          {currentWorkspace?.subdomain && (
+            <StyledDomainFromWrapper>
+              <Controller
+                name="subdomain"
+                control={control}
+                render={({
+                  field: { onChange, value },
+                  fieldState: { error },
+                }) => (
+                  <TextInputV2
+                    value={value}
+                    type="text"
+                    onChange={onChange}
+                    error={error?.message}
+                    fullWidth
+                  />
+                )}
+              />
+              {isDefined(urlManager) && isDefined(urlManager.frontDomain) && (
+                <StyledDomain>.{urlManager.frontDomain}</StyledDomain>
+              )}
+            </StyledDomainFromWrapper>
+          )}
+        </Section>
+      </SettingsPageContainer>
+    </SubMenuTopBarContainer>
+  );
+};