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)}
/>