From be22eb941bc85f0e69f8b0cd2b9450fc2324570d Mon Sep 17 00:00:00 2001 From: Nitin Koche Date: Thu, 29 Aug 2024 15:58:41 +0530 Subject: [PATCH] added dropdown in breadcrumb --- ...ngsDataModelNewFieldBreadcrumbDropDown.tsx | 59 +++++++++++++++++++ .../SettingsFieldTypeCategoryDescriptions.ts | 5 +- .../bread-crumb/components/Breadcrumb.tsx | 4 +- .../data-model/SettingsObjectFieldEdit.tsx | 8 --- .../SettingsObjectNewFieldStep2.tsx | 9 ++- 5 files changed, 71 insertions(+), 14 deletions(-) create mode 100644 packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx diff --git a/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx b/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx new file mode 100644 index 000000000000..6994de4f0b2d --- /dev/null +++ b/packages/twenty-front/src/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 ( + New Field - 2. Configure + ) : ( + New Field - 1. Type + ) + } + dropdownComponents={ + + + handleClick(false)} /> + + handleClick(true)} + /> + + + } + dropdownHotkeyScope={{ + scope: dropdownId, + }} + /> + ); +}; diff --git a/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldTypeCategoryDescriptions.ts b/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldTypeCategoryDescriptions.ts index 86ced1f751a0..c4ced90b348f 100644 --- a/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldTypeCategoryDescriptions.ts +++ b/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldTypeCategoryDescriptions.ts @@ -1,4 +1,5 @@ -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, @@ -6,5 +7,5 @@ export const SETTINGS_FIELD_TYPE_CATEGORY_DESCRIPTIONS: Record< > = { 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 index 485486cd1653..7cb7ffed6515 100644 --- 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 index 3390b6f39d13..f0f0e53b8887 100644 --- 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 >; -const StyledSettingsObjectFieldTypeSelect = styled( - SettingsDataModelFieldTypeSelect, -)` - margin-bottom: ${({ theme }) => theme.spacing(4)}; -`; - const canPersistFieldMetadataItemUpdate = ( fieldMetadataItem: FieldMetadataItem, ) => { diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx index 64c850fc27aa..cffaed0edb42 100644 --- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx +++ b/packages/twenty-front/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: ( + + ), }, ]} />