Remove step 1 of new object field (#7397)

fixes #7356 fixes #6967 fixes #7102 fixes #7121 fixes #7505
twentyhq · Oct 9, 2024 · 58cbcbf · 58cbcbf
1 parent 9b9e03f
commit 58cbcbf
Show file tree

Hide file tree

Showing 46 changed files with 373 additions and 573 deletions.
diff --git a/packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx b/packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx
@@ -1,6 +1,7 @@
 import { lazy, Suspense } from 'react';
 import { Route, Routes } from 'react-router-dom';
 
+import { SettingsSkeletonLoader } from '@/settings/components/SettingsSkeletonLoader';
 import { AppPath } from '@/types/AppPath';
 import { SettingsPath } from '@/types/SettingsPath';
 
@@ -202,22 +203,21 @@ const SettingsIntegrationShowDatabaseConnection = lazy(() =>
   })),
 );
 
-const SettingsObjectNewFieldStep1 = lazy(() =>
+const SettingsObjectNewFieldSelect = lazy(() =>
   import(
-    '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1'
+    '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldSelect'
   ).then((module) => ({
-    default: module.SettingsObjectNewFieldStep1,
+    default: module.SettingsObjectNewFieldSelect,
   })),
 );
 
-const SettingsObjectNewFieldStep2 = lazy(() =>
+const SettingsObjectNewFieldConfigure = lazy(() =>
   import(
-    '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2'
+    '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldConfigure'
   ).then((module) => ({
-    default: module.SettingsObjectNewFieldStep2,
+    default: module.SettingsObjectNewFieldConfigure,
   })),
 );
-
 const SettingsObjectFieldEdit = lazy(() =>
   import('~/pages/settings/data-model/SettingsObjectFieldEdit').then(
     (module) => ({
@@ -245,7 +245,7 @@ export const SettingsRoutes = ({
   isCRMMigrationEnabled,
   isServerlessFunctionSettingsEnabled,
 }: SettingsRoutesProps) => (
-  <Suspense fallback={null}>
+  <Suspense fallback={<SettingsSkeletonLoader />}>
     <Routes>
       <Route path={SettingsPath.ProfilePage} element={<SettingsProfile />} />
       <Route path={SettingsPath.Appearance} element={<SettingsAppearance />} />
@@ -345,12 +345,12 @@ export const SettingsRoutes = ({
         element={<SettingsIntegrationShowDatabaseConnection />}
       />
       <Route
-        path={SettingsPath.ObjectNewFieldStep1}
-        element={<SettingsObjectNewFieldStep1 />}
+        path={SettingsPath.ObjectNewFieldSelect}
+        element={<SettingsObjectNewFieldSelect />}
       />
       <Route
-        path={SettingsPath.ObjectNewFieldStep2}
-        element={<SettingsObjectNewFieldStep2 />}
+        path={SettingsPath.ObjectNewFieldConfigure}
+        element={<SettingsObjectNewFieldConfigure />}
       />
       <Route
         path={SettingsPath.ObjectFieldEdit}

diff --git a/packages/twenty-front/src/modules/object-metadata/utils/getDisabledFieldMetadataItems.ts b/packages/twenty-front/src/modules/object-metadata/utils/getDisabledFieldMetadataItems.ts
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsSkeletonLoader.tsx b/packages/twenty-front/src/modules/settings/components/SettingsSkeletonLoader.tsx
@@ -0,0 +1,52 @@
+import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
+import { PageBody } from '@/ui/layout/page/PageBody';
+import { PageHeader } from '@/ui/layout/page/PageHeader';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
+const StyledTitleLoaderContainer = styled.div`
+  margin: ${({ theme }) => theme.spacing(8, 8, 2)};
+`;
+
+export const SettingsSkeletonLoader = () => {
+  const theme = useTheme();
+  return (
+    <StyledContainer>
+      <PageHeader
+        title={
+          <SkeletonTheme
+            baseColor={theme.background.tertiary}
+            highlightColor={theme.background.transparent.lighter}
+            borderRadius={4}
+          >
+            <Skeleton
+              height={SKELETON_LOADER_HEIGHT_SIZES.standard.m}
+              width={120}
+            />{' '}
+          </SkeletonTheme>
+        }
+      />
+      <PageBody>
+        <StyledTitleLoaderContainer>
+          <SkeletonTheme
+            baseColor={theme.background.tertiary}
+            highlightColor={theme.background.transparent.lighter}
+            borderRadius={4}
+          >
+            <Skeleton
+              height={SKELETON_LOADER_HEIGHT_SIZES.standard.m}
+              width={200}
+            />
+          </SkeletonTheme>
+        </StyledTitleLoaderContainer>
+      </PageBody>
+    </StyledContainer>
+  );
+};
diff --git a/...rc/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx b/...rc/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx
@@ -6,20 +6,17 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { IconChevronDown } from 'twenty-ui';
 
-type SettingsDataModelNewFieldBreadcrumbDropDownProps = {
-  isConfigureStep: boolean;
-  onBreadcrumbClick: (isConfigureStep: boolean) => void;
-};
-
 const StyledContainer = styled.div`
   align-items: center;
-  color: ${({ theme }) => theme.font.color.secondary};
+  color: ${({ theme }) => theme.font.color.tertiary};
   cursor: pointer;
   display: flex;
   font-size: ${({ theme }) => theme.font.size.md};
 `;
+
 const StyledButtonContainer = styled.div`
   position: relative;
   width: 100%;
@@ -48,19 +45,24 @@ const StyledButton = styled(Button)`
   padding-right: ${({ theme }) => theme.spacing(6)};
 `;
 
-export const SettingsDataModelNewFieldBreadcrumbDropDown = ({
-  isConfigureStep,
-  onBreadcrumbClick,
-}: SettingsDataModelNewFieldBreadcrumbDropDownProps) => {
+export const SettingsDataModelNewFieldBreadcrumbDropDown = () => {
   const dropdownId = `settings-object-new-field-breadcrumb-dropdown`;
-
   const { closeDropdown } = useDropdown(dropdownId);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { objectSlug = '' } = useParams();
+  const theme = useTheme();
+
+  const isConfigureStep = location.pathname.includes('/configure');
 
-  const handleClick = (step: boolean) => {
-    onBreadcrumbClick(step);
+  const handleClick = (isConfigureStep: boolean) => {
+    if (isConfigureStep) {
+      navigate(`/settings/objects/${objectSlug}/new-field/configure`);
+    } else {
+      navigate(`/settings/objects/${objectSlug}/new-field/select`);
+    }
     closeDropdown();
   };
-  const theme = useTheme();
 
   return (
     <StyledContainer>

diff --git a/...ents/SettingsDataModelFieldTypeSelect.tsx → ...onents/SettingsObjectNewFieldSelector.tsx b/...ents/SettingsDataModelFieldTypeSelect.tsx → ...onents/SettingsObjectNewFieldSelector.tsx
@@ -10,36 +10,25 @@ import { useCurrencySettingsFormInitialValues } from '@/settings/data-model/fiel
 import { useSelectSettingsFormInitialValues } from '@/settings/data-model/fields/forms/select/hooks/useSelectSettingsFormInitialValues';
 import { SettingsFieldType } from '@/settings/data-model/types/SettingsFieldType';
 import { TextInput } from '@/ui/input/components/TextInput';
+import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Section } from '@react-email/components';
 import { useState } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { H2Title, IconSearch } from 'twenty-ui';
-import { z } from 'zod';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
+import { SettingsDataModelFieldTypeFormValues } from '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldSelect';
 
-export const settingsDataModelFieldTypeFormSchema = z.object({
-  type: z.enum(
-    Object.keys(SETTINGS_FIELD_TYPE_CONFIGS) as [
-      SettingsFieldType,
-      ...SettingsFieldType[],
-    ],
-  ),
-});
-
-export type SettingsDataModelFieldTypeFormValues = z.infer<
-  typeof settingsDataModelFieldTypeFormSchema
->;
-
-type SettingsDataModelFieldTypeSelectProps = {
+type SettingsObjectNewFieldSelectorProps = {
   className?: string;
   excludedFieldTypes?: SettingsFieldType[];
   fieldMetadataItem?: Pick<
     FieldMetadataItem,
     'defaultValue' | 'options' | 'type'
   >;
-  onFieldTypeSelect: () => void;
+
+  objectSlug: string;
 };
 
 const StyledTypeSelectContainer = styled.div`
@@ -68,12 +57,11 @@ const StyledSearchInput = styled(TextInput)`
   width: 100%;
 `;
 
-export const SettingsDataModelFieldTypeSelect = ({
-  className,
+export const SettingsObjectNewFieldSelector = ({
   excludedFieldTypes = [],
   fieldMetadataItem,
-  onFieldTypeSelect,
-}: SettingsDataModelFieldTypeSelectProps) => {
+  objectSlug,
+}: SettingsObjectNewFieldSelectorProps) => {
   const theme = useTheme();
   const { control } = useFormContext<SettingsDataModelFieldTypeFormValues>();
   const [searchQuery, setSearchQuery] = useState('');
@@ -112,59 +100,60 @@ export const SettingsDataModelFieldTypeSelect = ({
   };
 
   return (
-    <Controller
-      name="type"
-      control={control}
-      defaultValue={
-        fieldMetadataItem && fieldMetadataItem.type in fieldTypeConfigs
-          ? (fieldMetadataItem.type as SettingsFieldType)
-          : FieldMetadataType.Text
-      }
-      render={({ field: { onChange } }) => (
-        <StyledTypeSelectContainer className={className}>
-          <Section>
-            <StyledSearchInput
-              LeftIcon={IconSearch}
-              placeholder="Search a type"
-              value={searchQuery}
-              onChange={setSearchQuery}
-            />
-          </Section>
-          {SETTINGS_FIELD_TYPE_CATEGORIES.map((category) => (
-            <Section key={category}>
-              <H2Title
-                title={category}
-                description={
-                  SETTINGS_FIELD_TYPE_CATEGORY_DESCRIPTIONS[category]
-                }
-              />
-              <StyledContainer>
-                {fieldTypeConfigs
-                  .filter(([, config]) => config.category === category)
-                  .map(([key, config]) => (
-                    <StyledCardContainer>
-                      <SettingsCard
-                        key={key}
-                        onClick={() => {
-                          onChange(key as SettingsFieldType);
-                          resetDefaultValueField(key as SettingsFieldType);
-                          onFieldTypeSelect();
-                        }}
-                        Icon={
-                          <config.Icon
-                            size={theme.icon.size.xl}
-                            stroke={theme.icon.stroke.sm}
+    <>
+      {' '}
+      <Section>
+        <StyledSearchInput
+          LeftIcon={IconSearch}
+          placeholder="Search a type"
+          value={searchQuery}
+          onChange={setSearchQuery}
+        />
+      </Section>
+      <Controller
+        name="type"
+        control={control}
+        render={() => (
+          <StyledTypeSelectContainer>
+            {SETTINGS_FIELD_TYPE_CATEGORIES.map((category) => (
+              <Section key={category}>
+                <H2Title
+                  title={category}
+                  description={
+                    SETTINGS_FIELD_TYPE_CATEGORY_DESCRIPTIONS[category]
+                  }
+                />
+                <StyledContainer>
+                  {fieldTypeConfigs
+                    .filter(([, config]) => config.category === category)
+                    .map(([key, config]) => (
+                      <StyledCardContainer key={key}>
+                        <UndecoratedLink
+                          to={`/settings/objects/${objectSlug}/new-field/configure?fieldType=${key}`}
+                          fullWidth
+                          onClick={() =>
+                            resetDefaultValueField(key as SettingsFieldType)
+                          }
+                        >
+                          <SettingsCard
+                            key={key}
+                            Icon={
+                              <config.Icon
+                                size={theme.icon.size.xl}
+                                stroke={theme.icon.stroke.sm}
+                              />
+                            }
+                            title={config.label}
                           />
-                        }
-                        title={config.label}
-                      />
-                    </StyledCardContainer>
-                  ))}
-              </StyledContainer>
-            </Section>
-          ))}
-        </StyledTypeSelectContainer>
-      )}
-    />
+                        </UndecoratedLink>
+                      </StyledCardContainer>
+                    ))}
+                </StyledContainer>
+              </Section>
+            ))}
+          </StyledTypeSelectContainer>
+        )}
+      />
+    </>
   );
 };