added dropdown in breadcrumb

twentyhq · Aug 29, 2024 · be22eb9 · be22eb9
1 parent b69f449
commit be22eb9
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 14 deletions.
diff --git a/...rc/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx b/...rc/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx
@@ -0,0 +1,59 @@
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
+import styled from '@emotion/styled';
+
+type SettingsDataModelNewFieldBreadcrumbDropDownProps = {
+  isConfigureStep: boolean;
+  onBreadcrumbClick: (isConfigureStep: boolean) => void;
+};
+
+const StyledSpan = styled.span`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-size: ${({ theme }) => theme.font.size.md};
+  cursor: pointer;
+`;
+
+const StyledMenuItem = styled(MenuItem)`
+  cursor: pointer;
+`;
+
+export const SettingsDataModelNewFieldBreadcrumbDropDown = ({
+  isConfigureStep,
+  onBreadcrumbClick,
+}: SettingsDataModelNewFieldBreadcrumbDropDownProps) => {
+  const dropdownId = `settings-object-new-field-breadcrumb-dropdown`;
+
+  const handleClick = (step: boolean) => {
+    onBreadcrumbClick(step);
+  };
+  return (
+    <Dropdown
+      dropdownPlacement="bottom"
+      dropdownId={dropdownId}
+      clickableComponent={
+        isConfigureStep ? (
+          <StyledSpan>New Field - 2. Configure</StyledSpan>
+        ) : (
+          <StyledSpan>New Field - 1. Type</StyledSpan>
+        )
+      }
+      dropdownComponents={
+        <DropdownMenu>
+          <DropdownMenuItemsContainer>
+            <StyledMenuItem text="1. Type" onClick={() => handleClick(false)} />
+
+            <StyledMenuItem
+              text="2. Configure"
+              onClick={() => handleClick(true)}
+            />
+          </DropdownMenuItemsContainer>
+        </DropdownMenu>
+      }
+      dropdownHotkeyScope={{
+        scope: dropdownId,
+      }}
+    />
+  );
+};
diff --git a/...-front/src/modules/settings/data-model/constants/SettingsFieldTypeCategoryDescriptions.ts b/...-front/src/modules/settings/data-model/constants/SettingsFieldTypeCategoryDescriptions.ts
@@ -1,10 +1,11 @@
-import { SettingsFieldTypeCategoryType } from '@/settings/data-model/types/SettingsFieldTypeCategoryType';
+import { SettingsFieldTypeCategoryType } from "@/settings/data-model/types/SettingsFieldTypeCategoryType";
+
 
 export const SETTINGS_FIELD_TYPE_CATEGORY_DESCRIPTIONS: Record<
   SettingsFieldTypeCategoryType,
   string
 > = {
   Basic: 'All the basic field types you need to start',
   Advanced: 'More advanced fields for advanced projects',
-  Relation: 'Custom relationships and predefined relationships',
+  Relation: 'Create a relation with another object',
 };
diff --git a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx
@@ -1,10 +1,10 @@
 import styled from '@emotion/styled';
-import { Fragment } from 'react';
+import { Fragment, ReactNode } from 'react';
 import { Link } from 'react-router-dom';
 
 type BreadcrumbProps = {
   className?: string;
-  links: { children: string; href?: string }[];
+  links: { children: ReactNode; href?: string }[];
 };
 
 const StyledWrapper = styled.nav`

diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx
@@ -1,5 +1,4 @@
 import { useApolloClient } from '@apollo/client';
-import styled from '@emotion/styled';
 import { zodResolver } from '@hookform/resolvers/zod';
 import omit from 'lodash.omit';
 import pick from 'lodash.pick';
@@ -25,7 +24,6 @@ import { FIELD_NAME_MAXIMUM_LENGTH } from '@/settings/data-model/constants/Field
 import { SettingsDataModelFieldDescriptionForm } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldDescriptionForm';
 import { SettingsDataModelFieldIconLabelForm } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm';
 import { SettingsDataModelFieldSettingsFormCard } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldSettingsFormCard';
-import { SettingsDataModelFieldTypeSelect } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldTypeSelect';
 import { settingsFieldFormSchema } from '@/settings/data-model/fields/forms/validation-schemas/settingsFieldFormSchema';
 import { AppPath } from '@/types/AppPath';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
@@ -41,12 +39,6 @@ type SettingsDataModelFieldEditFormValues = z.infer<
   ReturnType<typeof settingsFieldFormSchema>
 >;
 
-const StyledSettingsObjectFieldTypeSelect = styled(
-  SettingsDataModelFieldTypeSelect,
-)`
-  margin-bottom: ${({ theme }) => theme.spacing(4)};
-`;
-
 const canPersistFieldMetadataItemUpdate = (
   fieldMetadataItem: FieldMetadataItem,
 ) => {

diff --git a/...ront/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx b/...ront/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx
@@ -6,6 +6,7 @@ import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
 import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { SettingsDataModelNewFieldBreadcrumbDropDown } from '@/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown';
 import { FIELD_NAME_MAXIMUM_LENGTH } from '@/settings/data-model/constants/FieldNameMaximumLength';
 import { SettingsDataModelFieldDescriptionForm } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldDescriptionForm';
 import { SettingsDataModelFieldIconLabelForm } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm';
@@ -182,9 +183,13 @@ export const SettingsObjectNewFieldStep2 = () => {
                   children: activeObjectMetadataItem.labelPlural,
                   href: `/settings/objects/${objectSlug}`,
                 },
-                { children: 'New Field' },
                 {
-                  children: !isConfigureStep ? '1. Type' : '2. Configure',
+                  children: (
+                    <SettingsDataModelNewFieldBreadcrumbDropDown
+                      isConfigureStep={isConfigureStep}
+                      onBreadcrumbClick={setIsConfigureStep}
+                    />
+                  ),
                 },
               ]}
             />