From d6d3b7bd00015505626ac651590f15794df025a6 Mon Sep 17 00:00:00 2001 From: nitin <142569587+ehconitin@users.noreply.github.com> Date: Thu, 10 Oct 2024 01:34:56 +0530 Subject: [PATCH] Breadcrumb DropDown improvement (#7546) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit context - https://github.com/twentyhq/twenty/pull/7397#pullrequestreview-2356581785 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 --- ...ngsDataModelNewFieldBreadcrumbDropDown.tsx | 72 +++++++++++++------ .../SettingsObjectNewFieldSelector.tsx | 11 +-- .../SettingsObjectNewFieldConfigure.tsx | 4 +- 3 files changed, 61 insertions(+), 26 deletions(-) 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 index 268cfd2cc8ca..18624a59fb34 100644 --- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx +++ b/packages/twenty-front/src/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={ - handleClick(false)} - selected={!isConfigureStep} - /> - handleClick(true)} - selected={isConfigureStep} - /> + + handleClick('select')} + selected={!isConfigureStep} + /> + + + handleClick('configure')} + selected={isConfigureStep} + disabled={!isDefined(fieldType)} + /> + } diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx index ce83da6f7772..962fb7aaba5d 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx +++ b/packages/twenty-front/src/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(); + const { control, setValue } = + useFormContext(); const [searchQuery, setSearchQuery] = useState(''); const fieldTypeConfigs = Object.entries>( SETTINGS_FIELD_TYPE_CONFIGS, @@ -131,9 +131,10 @@ export const SettingsObjectNewFieldSelector = ({ - resetDefaultValueField(key as SettingsFieldType) - } + onClick={() => { + setValue('type', key as SettingsFieldType); + resetDefaultValueField(key as SettingsFieldType); + }} > { 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)} />