Breadcrumb DropDown improvement (#7546)

context - #7397 (review) P.S. Apologies for the background music in the screen recording—I didn’t realize my mic was on while capturing it. 😅 https://github.com/user-attachments/assets/0cd31aa7-9ce2-4577-a79a-73c9890f2905 --------- Co-authored-by: Félix Malfait <[email protected]>
twentyhq · Oct 9, 2024 · c57d8f1 · c57d8f1
1 parent 855060a
commit c57d8f1
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 26 deletions.
diff --git a/...rc/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx b/...rc/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx
@@ -1,3 +1,4 @@
+import { SettingsFieldType } from '@/settings/data-model/types/SettingsFieldType';
 import { Button } from '@/ui/input/button/components/Button';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
@@ -6,13 +7,18 @@ 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';
+import {
+  useLocation,
+  useNavigate,
+  useParams,
+  useSearchParams,
+} from 'react-router-dom';
+import { IconChevronDown, isDefined } from 'twenty-ui';
 
 const StyledContainer = styled.div`
   align-items: center;
   color: ${({ theme }) => theme.font.color.tertiary};
-  cursor: pointer;
+  cursor: default;
   display: flex;
   font-size: ${({ theme }) => theme.font.size.md};
 `;
@@ -30,10 +36,24 @@ const StyledDownChevron = styled(IconChevronDown)`
   transform: translateY(-50%);
 `;
 
-const StyledMenuItem = styled(MenuItem)<{ selected?: boolean }>`
+const StyledMenuItemWrapper = styled.div<{ disabled?: boolean }>`
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  width: 100%;
+`;
+
+const StyledMenuItem = styled(MenuItem)<{
+  selected?: boolean;
+  disabled?: boolean;
+}>`
   background: ${({ theme, selected }) =>
     selected ? theme.background.quaternary : 'transparent'};
-  cursor: pointer;
+  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
+  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
+
+  &:hover {
+    background: ${({ theme, disabled }) =>
+      disabled ? 'transparent' : theme.background.tertiary};
+  }
 `;
 
 const StyledSpan = styled.span`
@@ -51,16 +71,23 @@ export const SettingsDataModelNewFieldBreadcrumbDropDown = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const { objectSlug = '' } = useParams();
+  const [searchParams] = useSearchParams();
   const theme = useTheme();
 
+  const fieldType = searchParams.get('fieldType') as SettingsFieldType;
   const isConfigureStep = location.pathname.includes('/configure');
 
-  const handleClick = (isConfigureStep: boolean) => {
-    if (isConfigureStep) {
-      navigate(`/settings/objects/${objectSlug}/new-field/configure`);
-    } else {
-      navigate(`/settings/objects/${objectSlug}/new-field/select`);
+  const handleClick = (step: 'select' | 'configure') => {
+    if (step === 'configure' && isDefined(fieldType)) {
+      navigate(
+        `/settings/objects/${objectSlug}/new-field/configure?fieldType=${fieldType}`,
+      );
+      return;
     }
+
+    navigate(
+      `/settings/objects/${objectSlug}/new-field/select${fieldType ? `?fieldType=${fieldType}` : ''}`,
+    );
     closeDropdown();
   };
 
@@ -83,16 +110,21 @@ export const SettingsDataModelNewFieldBreadcrumbDropDown = () => {
         dropdownComponents={
           <DropdownMenu>
             <DropdownMenuItemsContainer>
-              <StyledMenuItem
-                text="1. Type"
-                onClick={() => handleClick(false)}
-                selected={!isConfigureStep}
-              />
-              <StyledMenuItem
-                text="2. Configure"
-                onClick={() => handleClick(true)}
-                selected={isConfigureStep}
-              />
+              <StyledMenuItemWrapper>
+                <StyledMenuItem
+                  text="1. Type"
+                  onClick={() => handleClick('select')}
+                  selected={!isConfigureStep}
+                />
+              </StyledMenuItemWrapper>
+              <StyledMenuItemWrapper disabled={!isDefined(fieldType)}>
+                <StyledMenuItem
+                  text="2. Configure"
+                  onClick={() => handleClick('configure')}
+                  selected={isConfigureStep}
+                  disabled={!isDefined(fieldType)}
+                />
+              </StyledMenuItemWrapper>
             </DropdownMenuItemsContainer>
           </DropdownMenu>
         }

diff --git a/...rc/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx b/...rc/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx
@@ -4,7 +4,6 @@ import { SETTINGS_FIELD_TYPE_CATEGORIES } from '@/settings/data-model/constants/
 import { SETTINGS_FIELD_TYPE_CATEGORY_DESCRIPTIONS } from '@/settings/data-model/constants/SettingsFieldTypeCategoryDescriptions';
 import { SETTINGS_FIELD_TYPE_CONFIGS } from '@/settings/data-model/constants/SettingsFieldTypeConfigs';
 import { SettingsFieldTypeConfig } from '@/settings/data-model/constants/SettingsNonCompositeFieldTypeConfigs';
-
 import { useBooleanSettingsFormInitialValues } from '@/settings/data-model/fields/forms/boolean/hooks/useBooleanSettingsFormInitialValues';
 import { useCurrencySettingsFormInitialValues } from '@/settings/data-model/fields/forms/currency/hooks/useCurrencySettingsFormInitialValues';
 import { useSelectSettingsFormInitialValues } from '@/settings/data-model/fields/forms/select/hooks/useSelectSettingsFormInitialValues';
@@ -63,7 +62,8 @@ export const SettingsObjectNewFieldSelector = ({
   objectSlug,
 }: SettingsObjectNewFieldSelectorProps) => {
   const theme = useTheme();
-  const { control } = useFormContext<SettingsDataModelFieldTypeFormValues>();
+  const { control, setValue } =
+    useFormContext<SettingsDataModelFieldTypeFormValues>();
   const [searchQuery, setSearchQuery] = useState('');
   const fieldTypeConfigs = Object.entries<SettingsFieldTypeConfig<any>>(
     SETTINGS_FIELD_TYPE_CONFIGS,
@@ -131,9 +131,10 @@ export const SettingsObjectNewFieldSelector = ({
                         <UndecoratedLink
                           to={`/settings/objects/${objectSlug}/new-field/configure?fieldType=${key}`}
                           fullWidth
-                          onClick={() =>
-                            resetDefaultValueField(key as SettingsFieldType)
-                          }
+                          onClick={() => {
+                            setValue('type', key as SettingsFieldType);
+                            resetDefaultValueField(key as SettingsFieldType);
+                          }}
                         >
                           <SettingsCard
                             key={key}

diff --git a/.../src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldConfigure.tsx b/.../src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldConfigure.tsx
@@ -178,7 +178,9 @@ export const SettingsObjectNewFieldConfigure = () => {
               isSaveDisabled={!canSave}
               isCancelDisabled={isSubmitting}
               onCancel={() =>
-                navigate(`/settings/objects/${objectSlug}/new-field/select`)
+                navigate(
+                  `/settings/objects/${objectSlug}/new-field/select?fieldType=${fieldType}`,
+                )
               }
               onSave={formConfig.handleSubmit(handleSave)}
             />