admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Remove step 1 of new object field (#7397)

Browse Source 
fixes #7356 
fixes #6967 
fixes #7102
fixes #7121 
fixes #7505
This commit is contained in:
nitin
2024-10-09 14:54:49 +05:30
committed by GitHub
parent 9b9e03fbf6
commit 58cbcbfe70
46 changed files with 374 additions and 574 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/pages/settings/Releases.tsx
View File

@ -3,7 +3,6 @@ import React, { useEffect, useState } from 'react';
import rehypeStringify from 'rehype-stringify';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import { IconRocket } from 'twenty-ui';
import { unified } from 'unified';
import { visit } from 'unist-util-visit';
@ -107,7 +106,6 @@ export const Releases = () => {
return (
<SubMenuTopBarContainer
Icon={IconRocket}
title="Releases"
links={[
{

2
packages/twenty-front/src/pages/settings/SettingsBilling.tsx
View File

@ -5,7 +5,6 @@ import {
IconCalendarEvent,
IconCircleX,
IconCreditCard,
IconCurrencyDollar,
} from 'twenty-ui';
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
@ -137,7 +136,6 @@ export const SettingsBilling = () => {
return (
<SubMenuTopBarContainer
Icon={IconCurrencyDollar}
title="Billing"
links={[
{

3
packages/twenty-front/src/pages/settings/SettingsProfile.tsx
View File

@ -1,4 +1,4 @@
import { H2Title, IconUserCircle } from 'twenty-ui';
import { H2Title } from 'twenty-ui';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { ChangePassword } from '@/settings/profile/components/ChangePassword';
@ -13,7 +13,6 @@ import { Section } from '@/ui/layout/section/components/Section';
export const SettingsProfile = () => (
<SubMenuTopBarContainer
Icon={IconUserCircle}
title="Profile"
links={[
{

3
packages/twenty-front/src/pages/settings/SettingsWorkspace.tsx
View File

@ -1,4 +1,4 @@
import { H2Title, IconSettings } from 'twenty-ui';
import { H2Title } from 'twenty-ui';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { DeleteWorkspace } from '@/settings/profile/components/DeleteWorkspace';
@ -13,7 +13,6 @@ import { GithubVersionLink } from '@/ui/navigation/link/components/GithubVersion
export const SettingsWorkspace = () => (
<SubMenuTopBarContainer
Icon={IconSettings}
title="General"
links={[
{

34
packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx
View File

@ -1,17 +1,16 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { isNonEmptyArray } from '@sniptt/guards';
import { useState } from 'react';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import {
H2Title,
IconTrash,
IconUsers,
IconReload,
IconMail,
Avatar,
H2Title,
IconMail,
IconReload,
IconTrash,
MOBILE_VIEWPORT,
} from 'twenty-ui';
import { isNonEmptyArray } from '@sniptt/guards';
import { useTheme } from '@emotion/react';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
@ -21,26 +20,26 @@ import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { IconButton } from '@/ui/input/button/components/IconButton';
import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { Section } from '@/ui/layout/section/components/Section';
import { Table } from '@/ui/layout/table/components/Table';
import { TableHeader } from '@/ui/layout/table/components/TableHeader';
import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
import { WorkspaceInviteLink } from '@/workspace/components/WorkspaceInviteLink';
import { WorkspaceInviteTeam } from '@/workspace/components/WorkspaceInviteTeam';
import { useGetWorkspaceInvitationsQuery } from '~/generated/graphql';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { Table } from '@/ui/layout/table/components/Table';
import { TableHeader } from '@/ui/layout/table/components/TableHeader';
import { workspaceInvitationsState } from '../../modules/workspace-invitation/states/workspaceInvitationsStates';
import { TableRow } from '../../modules/ui/layout/table/components/TableRow';
import { TableCell } from '../../modules/ui/layout/table/components/TableCell';
import { Status } from '../../modules/ui/display/status/components/Status';
import { formatDistanceToNow } from 'date-fns';
import { useResendWorkspaceInvitation } from '../../modules/workspace-invitation/hooks/useResendWorkspaceInvitation';
import { useGetWorkspaceInvitationsQuery } from '~/generated/graphql';
import { isDefined } from '~/utils/isDefined';
import { Status } from '../../modules/ui/display/status/components/Status';
import { TableCell } from '../../modules/ui/layout/table/components/TableCell';
import { TableRow } from '../../modules/ui/layout/table/components/TableRow';
import { useDeleteWorkspaceInvitation } from '../../modules/workspace-invitation/hooks/useDeleteWorkspaceInvitation';
import { useResendWorkspaceInvitation } from '../../modules/workspace-invitation/hooks/useResendWorkspaceInvitation';
import { workspaceInvitationsState } from '../../modules/workspace-invitation/states/workspaceInvitationsStates';
const StyledButtonContainer = styled.div`
align-items: center;
@ -167,7 +166,6 @@ export const SettingsWorkspaceMembers = () => {
return (
<SubMenuTopBarContainer
Icon={IconUsers}
title="Members"
links={[
{

3
packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx
View File

@ -1,5 +1,5 @@
import { useRecoilValue } from 'recoil';
import { H2Title, IconAt } from 'twenty-ui';
import { H2Title } from 'twenty-ui';
import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
@ -36,7 +36,6 @@ export const SettingsAccounts = () => {
return (
<SubMenuTopBarContainer
Icon={IconAt}
title="Account"
links={[
{

2
packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendars.tsx
View File

@ -4,12 +4,10 @@ import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { Section } from '@/ui/layout/section/components/Section';
import { IconCalendarEvent } from 'twenty-ui';
export const SettingsAccountsCalendars = () => {
return (
<SubMenuTopBarContainer
Icon={IconCalendarEvent}
title="Calendars"
links={[
{

2
packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmails.tsx
View File

@ -4,11 +4,9 @@ import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { Section } from '@/ui/layout/section/components/Section';
import { IconMail } from 'twenty-ui';
export const SettingsAccountsEmails = () => (
<SubMenuTopBarContainer
Icon={IconMail}
title="Emails"
links={[
{

2
packages/twenty-front/src/pages/settings/accounts/SettingsNewAccount.tsx
View File

@ -3,12 +3,10 @@ import { SettingsPageContainer } from '@/settings/components/SettingsPageContain
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { IconAt } from 'twenty-ui';
export const SettingsNewAccount = () => {
return (
<SubMenuTopBarContainer
Icon={IconAt}
title="New Account"
links={[
{

2
packages/twenty-front/src/pages/settings/crm-migration/SettingsCRMMigration.tsx
View File

@ -1,6 +1,5 @@
// @ts-expect-error external library has a typing issue
import { RevertConnect } from '@revertdotdev/revert-react';
import { IconSettings } from 'twenty-ui';
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
@ -18,7 +17,6 @@ export const SettingsCRMMigration = () => {
const currentWorkspace = useRecoilValue(currentWorkspaceState);
return (
<SubMenuTopBarContainer
Icon={IconSettings}
title="Migrate"
links={[
{

3
packages/twenty-front/src/pages/settings/data-model/SettingsNewObject.tsx
View File

@ -1,7 +1,7 @@
import { zodResolver } from '@hookform/resolvers/zod';
import { FormProvider, useForm } from 'react-hook-form';
import { useNavigate } from 'react-router-dom';
import { H2Title, IconHierarchy2 } from 'twenty-ui';
import { H2Title } from 'twenty-ui';
import { z } from 'zod';
import { useCreateOneObjectMetadataItem } from '@/object-metadata/hooks/useCreateOneObjectMetadataItem';
@ -69,7 +69,6 @@ export const SettingsNewObject = () => {
// eslint-disable-next-line react/jsx-props-no-spreading
<FormProvider {...formConfig}>
<SubMenuTopBarContainer
Icon={IconHierarchy2}
title="New Object"
links={[
{

16
packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPageContent.tsx
View File

@ -1,6 +1,5 @@
import { useUpdateOneObjectMetadataItem } from '@/object-metadata/hooks/useUpdateOneObjectMetadataItem';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { getDisabledFieldMetadataItems } from '@/object-metadata/utils/getDisabledFieldMetadataItems';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SettingsObjectSummaryCard } from '@/settings/data-model/object-details/components/SettingsObjectSummaryCard';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
@ -10,9 +9,8 @@ import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'
import { Section } from '@/ui/layout/section/components/Section';
import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
import styled from '@emotion/styled';
import { isNonEmptyArray } from '@sniptt/guards';
import { useNavigate } from 'react-router-dom';
import { H2Title, IconHierarchy2, IconPlus } from 'twenty-ui';
import { H2Title, IconPlus } from 'twenty-ui';
import { SettingsObjectFieldTable } from '~/pages/settings/data-model/SettingsObjectFieldTable';
const StyledDiv = styled.div`
@ -40,14 +38,10 @@ export const SettingsObjectDetailPageContent = ({
navigate(getSettingsPagePath(SettingsPath.Objects));
};
const disabledFieldMetadataItems =
getDisabledFieldMetadataItems(objectMetadataItem);
const shouldDisplayAddFieldButton = !objectMetadataItem.isRemote;
return (
<SubMenuTopBarContainer
Icon={IconHierarchy2}
title={objectMetadataItem.labelPlural}
links={[
{
@ -80,13 +74,7 @@ export const SettingsObjectDetailPageContent = ({
/>
{shouldDisplayAddFieldButton && (
<StyledDiv>
<UndecoratedLink
to={
isNonEmptyArray(disabledFieldMetadataItems)
? './new-field/step-1'
: './new-field/step-2'
}
>
<UndecoratedLink to={'./new-field/select'}>
<Button
Icon={IconPlus}
title="Add Field"

3
packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx
View File

@ -5,7 +5,7 @@ import pick from 'lodash.pick';
import { useEffect } from 'react';
import { FormProvider, useForm } from 'react-hook-form';
import { useNavigate, useParams } from 'react-router-dom';
import { H2Title, IconArchive, IconHierarchy2 } from 'twenty-ui';
import { H2Title, IconArchive } from 'twenty-ui';
import { z } from 'zod';
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
@ -107,7 +107,6 @@ export const SettingsObjectEdit = () => {
<RecordFieldValueSelectorContextProvider>
<FormProvider {...formConfig}>
<SubMenuTopBarContainer
Icon={IconHierarchy2}
title="Edit"
links={[
{

8
packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx
View File

@ -5,12 +5,7 @@ import pick from 'lodash.pick';
import { useEffect } from 'react';
import { FormProvider, useForm } from 'react-hook-form';
import { useNavigate, useParams } from 'react-router-dom';
import {
H2Title,
IconArchive,
IconArchiveOff,
IconHierarchy2,
} from 'twenty-ui';
import { H2Title, IconArchive, IconArchiveOff } from 'twenty-ui';
import { z } from 'zod';
import { useFieldMetadataItem } from '@/object-metadata/hooks/useFieldMetadataItem';
@ -186,7 +181,6 @@ export const SettingsObjectFieldEdit = () => {
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
<FormProvider {...formConfig}>
<SubMenuTopBarContainer
Icon={IconHierarchy2}
title={fieldMetadataItem?.label}
links={[
{

165
packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx → packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldConfigure.tsx
View File

@ -11,7 +11,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 { SettingsFieldType } from '@/settings/data-model/types/SettingsFieldType';
import { AppPath } from '@/types/AppPath';
@ -22,42 +21,36 @@ import { Section } from '@/ui/layout/section/components/Section';
import { View } from '@/views/types/View';
import { ViewType } from '@/views/types/ViewType';
import { useApolloClient } from '@apollo/client';
import styled from '@emotion/styled';
import { zodResolver } from '@hookform/resolvers/zod';
import pick from 'lodash.pick';
import { useEffect, useState } from 'react';
import { FormProvider, useForm } from 'react-hook-form';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
import { H1Title, H1TitleFontColor, H2Title, IconHierarchy2 } from 'twenty-ui';
import { H2Title } from 'twenty-ui';
import { z } from 'zod';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { isDefined } from '~/utils/isDefined';
import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
// TODO: fix this type
type SettingsDataModelNewFieldFormValues = z.infer<
ReturnType<typeof settingsFieldFormSchema>
> &
any;
const StyledH1Title = styled(H1Title)`
margin-bottom: 0;
padding-top: ${({ theme }) => theme.spacing(3)};
`;
export const SettingsObjectNewFieldStep2 = () => {
export const SettingsObjectNewFieldConfigure = () => {
const navigate = useNavigate();
const { objectSlug = '' } = useParams();
const [searchParams] = useSearchParams();
const fieldType = searchParams.get('fieldType') as SettingsFieldType;
const fieldType =
(searchParams.get('fieldType') as SettingsFieldType) ||
FieldMetadataType.Text;
const { enqueueSnackBar } = useSnackBar();
const [isConfigureStep, setIsConfigureStep] = useState(false);
const { findActiveObjectMetadataItemBySlug } =
useFilteredObjectMetadataItems();
const activeObjectMetadataItem =
findActiveObjectMetadataItemBySlug(objectSlug);
const { createMetadataField } = useFieldMetadataItem();
const apolloClient = useApolloClient();
const formConfig = useForm<SettingsDataModelNewFieldFormValues>({
mode: 'onTouched',
@ -66,14 +59,14 @@ export const SettingsObjectNewFieldStep2 = () => {
activeObjectMetadataItem?.fields.map((value) => value.name),
),
),
defaultValues: {
type: fieldType,
icon: 'IconUsers',
label: '',
description: '',
},
});
useEffect(() => {
if (!activeObjectMetadataItem) {
navigate(AppPath.NotFound);
}
}, [activeObjectMetadataItem, navigate]);
const [, setObjectViews] = useState<View[]>([]);
const [, setRelationObjectViews] = useState<View[]>([]);
@ -85,7 +78,6 @@ export const SettingsObjectNewFieldStep2 = () => {
},
onCompleted: async (views) => {
if (isUndefinedOrNull(views)) return;
setObjectViews(views);
},
});
@ -103,15 +95,17 @@ export const SettingsObjectNewFieldStep2 = () => {
},
onCompleted: async (views) => {
if (isUndefinedOrNull(views)) return;
setRelationObjectViews(views);
},
});
const { createOneRelationMetadataItem: createOneRelationMetadata } =
useCreateOneRelationMetadataItem();
const apolloClient = useApolloClient();
useEffect(() => {
if (!activeObjectMetadataItem) {
navigate(AppPath.NotFound);
}
}, [activeObjectMetadataItem, navigate]);
if (!activeObjectMetadataItem) return null;
@ -160,17 +154,7 @@ export const SettingsObjectNewFieldStep2 = () => {
});
}
};
const excludedFieldTypes: SettingsFieldType[] = (
[
FieldMetadataType.Link,
FieldMetadataType.Numeric,
FieldMetadataType.RichText,
FieldMetadataType.Actor,
FieldMetadataType.Email,
FieldMetadataType.Phone,
] as const
).filter(isDefined);
if (!activeObjectMetadataItem) return null;
return (
<RecordFieldValueSelectorContextProvider>
@ -178,96 +162,57 @@ export const SettingsObjectNewFieldStep2 = () => {
{...formConfig}
>
<SubMenuTopBarContainer
Icon={IconHierarchy2}
title="2. Configure field"
links={[
{
children: 'Objects',
href: '/settings/objects',
},
{ children: 'Workspace', href: '/settings/workspace' },
{ children: 'Objects', href: '/settings/objects' },
{
children: activeObjectMetadataItem.labelPlural,
href: `/settings/objects/${objectSlug}`,
},
{
children: (
<SettingsDataModelNewFieldBreadcrumbDropDown
isConfigureStep={isConfigureStep}
onBreadcrumbClick={setIsConfigureStep}
/>
),
},
{ children: <SettingsDataModelNewFieldBreadcrumbDropDown /> },
]}
actionButton={
!activeObjectMetadataItem.isRemote && (
<SaveAndCancelButtons
isSaveDisabled={!canSave}
isCancelDisabled={isSubmitting}
onCancel={() => {
if (!isConfigureStep) {
navigate(`/settings/objects/${objectSlug}`);
} else {
setIsConfigureStep(false);
}
}}
onSave={formConfig.handleSubmit(handleSave)}
/>
)
<SaveAndCancelButtons
isSaveDisabled={!canSave}
isCancelDisabled={isSubmitting}
onCancel={() =>
navigate(`/settings/objects/${objectSlug}/new-field/select`)
}
onSave={formConfig.handleSubmit(handleSave)}
/>
}
>
<SettingsPageContainer>
<StyledH1Title
title={
!isConfigureStep
? '1. Select a field type'
: '2. Configure field'
}
fontColor={H1TitleFontColor.Primary}
/>
{!isConfigureStep ? (
<SettingsDataModelFieldTypeSelect
excludedFieldTypes={excludedFieldTypes}
<Section>
<H2Title
title="Icon and Name"
description="The name and icon of this field"
/>
<SettingsDataModelFieldIconLabelForm
maxLength={FIELD_NAME_MAXIMUM_LENGTH}
/>
</Section>
<Section>
<H2Title title="Values" description="The values of this field" />
<SettingsDataModelFieldSettingsFormCard
isCreatingField
fieldMetadataItem={{
icon: formConfig.watch('icon'),
label: formConfig.watch('label') || 'New Field',
type: fieldType as FieldMetadataType,
}}
onFieldTypeSelect={() => setIsConfigureStep(true)}
objectMetadataItem={activeObjectMetadataItem}
/>
) : (
<>
<Section>
<H2Title
title="Icon and Name"
description="The name and icon of this field"
/>
<SettingsDataModelFieldIconLabelForm
maxLength={FIELD_NAME_MAXIMUM_LENGTH}
/>
</Section>
<Section>
<H2Title
title="Values"
description="The values of this field"
/>
<SettingsDataModelFieldSettingsFormCard
isCreatingField
fieldMetadataItem={{
icon: formConfig.watch('icon'),
label: formConfig.watch('label') || 'Employees',
type: formConfig.watch('type'),
}}
objectMetadataItem={activeObjectMetadataItem}
/>
</Section>
<Section>
<H2Title
title="Description"
description="The description of this field"
/>
<SettingsDataModelFieldDescriptionForm />
</Section>
</>
)}
</Section>
<Section>
<H2Title
title="Description"
description="The description of this field"
/>
<SettingsDataModelFieldDescriptionForm />
</Section>
</SettingsPageContainer>
</SubMenuTopBarContainer>
</FormProvider>

90
packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldSelect.tsx Normal file
View File

@ -0,0 +1,90 @@
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SettingsDataModelNewFieldBreadcrumbDropDown } from '@/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown';
import { SETTINGS_FIELD_TYPE_CONFIGS } from '@/settings/data-model/constants/SettingsFieldTypeConfigs';
import { SettingsObjectNewFieldSelector } from '@/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector';
import { SettingsFieldType } from '@/settings/data-model/types/SettingsFieldType';
import { AppPath } from '@/types/AppPath';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { zodResolver } from '@hookform/resolvers/zod';
import { useEffect } from 'react';
import { FormProvider, useForm } from 'react-hook-form';
import { useNavigate, useParams } from 'react-router-dom';
import { isDefined } from 'twenty-ui';
import { z } from 'zod';
import { FieldMetadataType } from '~/generated-metadata/graphql';
export const settingsDataModelFieldTypeFormSchema = z.object({
type: z.enum(
Object.keys(SETTINGS_FIELD_TYPE_CONFIGS) as [
SettingsFieldType,
...SettingsFieldType[],
],
),
});
export type SettingsDataModelFieldTypeFormValues = z.infer<
typeof settingsDataModelFieldTypeFormSchema
>;
export const SettingsObjectNewFieldSelect = () => {
const navigate = useNavigate();
const { objectSlug = '' } = useParams();
const { findActiveObjectMetadataItemBySlug } =
useFilteredObjectMetadataItems();
const activeObjectMetadataItem =
findActiveObjectMetadataItemBySlug(objectSlug);
const formMethods = useForm({
resolver: zodResolver(settingsDataModelFieldTypeFormSchema),
defaultValues: {
type: FieldMetadataType.Text,
},
});
const excludedFieldTypes: SettingsFieldType[] = (
[
FieldMetadataType.Link,
FieldMetadataType.Numeric,
FieldMetadataType.RichText,
FieldMetadataType.Actor,
FieldMetadataType.Email,
FieldMetadataType.Phone,
] as const
).filter(isDefined);
useEffect(() => {
if (!activeObjectMetadataItem) {
navigate(AppPath.NotFound);
}
}, [activeObjectMetadataItem, navigate]);
if (!activeObjectMetadataItem) return null;
return (
<RecordFieldValueSelectorContextProvider>
<FormProvider // eslint-disable-next-line react/jsx-props-no-spreading
{...formMethods}
>
<SubMenuTopBarContainer
title="1. Select a field type"
links={[
{ children: 'Workspace', href: '/settings/workspace' },
{ children: 'Objects', href: '/settings/objects' },
{
children: activeObjectMetadataItem.labelPlural,
href: `/settings/objects/${objectSlug}`,
},
{ children: <SettingsDataModelNewFieldBreadcrumbDropDown /> },
]}
>
<SettingsPageContainer>
<SettingsObjectNewFieldSelector
objectSlug={objectSlug}
excludedFieldTypes={excludedFieldTypes}
/>
</SettingsPageContainer>
</SubMenuTopBarContainer>
</FormProvider>
</RecordFieldValueSelectorContextProvider>
);
};

133
packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx
View File

@ -1,133 +0,0 @@
import styled from '@emotion/styled';
import { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { H2Title, IconHierarchy2, IconPlus } from 'twenty-ui';
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { useFieldMetadataItem } from '@/object-metadata/hooks/useFieldMetadataItem';
import { settingsObjectFieldsFamilyState } from '@/settings/data-model/object-details/states/settingsObjectFieldsFamilyState';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { AppPath } from '@/types/AppPath';
import { SettingsPath } from '@/types/SettingsPath';
import { Button } from '@/ui/input/button/components/Button';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { Section } from '@/ui/layout/section/components/Section';
import { useRecoilState } from 'recoil';
import { SettingsObjectFieldTable } from '~/pages/settings/data-model/SettingsObjectFieldTable';
const StyledSection = styled(Section)`
display: flex;
flex-direction: column;
`;
const StyledAddCustomFieldButton = styled(Button)`
align-self: flex-end;
margin-top: ${({ theme }) => theme.spacing(2)};
`;
export const SettingsObjectNewFieldStep1 = () => {
const navigate = useNavigate();
const { objectSlug = '' } = useParams();
const { findActiveObjectMetadataItemBySlug } =
useFilteredObjectMetadataItems();
const activeObjectMetadataItem =
findActiveObjectMetadataItemBySlug(objectSlug);
const [settingsObjectFields] = useRecoilState(
settingsObjectFieldsFamilyState({
objectMetadataItemId: activeObjectMetadataItem?.id,
}),
);
const { activateMetadataField, deactivateMetadataField } =
useFieldMetadataItem();
const canSave = settingsObjectFields?.some(
(field, index) =>
field.isActive !== activeObjectMetadataItem?.fields[index].isActive,
);
const handleSave = async () => {
if (!activeObjectMetadataItem || !settingsObjectFields) {
return;
}
await Promise.all(
settingsObjectFields.map((fieldMetadataItem, index) => {
if (
fieldMetadataItem.isActive ===
activeObjectMetadataItem.fields[index].isActive
) {
return undefined;
}
return fieldMetadataItem.isActive
? activateMetadataField(fieldMetadataItem)
: deactivateMetadataField(fieldMetadataItem);
}),
);
navigate(`/settings/objects/${objectSlug}`);
};
useEffect(() => {
if (!activeObjectMetadataItem) {
navigate(AppPath.NotFound);
return;
}
}, [activeObjectMetadataItem, navigate]);
if (!activeObjectMetadataItem) return null;
return (
<SubMenuTopBarContainer
Icon={IconHierarchy2}
links={[
{
children: 'Workspace',
href: getSettingsPagePath(SettingsPath.Workspace),
},
{ children: 'Objects', href: '/settings/objects' },
{
children: activeObjectMetadataItem.labelPlural,
href: `/settings/objects/${objectSlug}`,
},
{ children: 'New Field' },
]}
actionButton={
!activeObjectMetadataItem.isRemote && (
<SaveAndCancelButtons
isSaveDisabled={!canSave}
onCancel={() => navigate(`/settings/objects/${objectSlug}`)}
onSave={handleSave}
/>
)
}
>
<SettingsPageContainer>
<StyledSection>
<H2Title
title="Check deactivated fields"
description="Before creating a custom field, check if it already exists in the deactivated section."
/>
<SettingsObjectFieldTable
objectMetadataItem={activeObjectMetadataItem}
mode="new-field"
/>
<StyledAddCustomFieldButton
Icon={IconPlus}
title="Add Custom Field"
size="small"
variant="secondary"
to={`/settings/objects/${objectSlug}/new-field/step-2`}
/>
</StyledSection>
</SettingsPageContainer>
</SubMenuTopBarContainer>
);
};

2
packages/twenty-front/src/pages/settings/data-model/SettingsObjectOverview.tsx
View File

@ -4,12 +4,10 @@ import { SettingsDataModelOverview } from '@/settings/data-model/graph-overview/
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { IconHierarchy2 } from 'twenty-ui';
export const SettingsObjectOverview = () => {
return (
<SubMenuTopBarContainer
Icon={IconHierarchy2}
links={[
{
children: 'Workspace',

9
packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx
View File

@ -1,12 +1,6 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import {
H2Title,
IconChevronRight,
IconHierarchy2,
IconPlus,
IconSearch,
} from 'twenty-ui';
import { H2Title, IconChevronRight, IconPlus, IconSearch } from 'twenty-ui';
import { useDeleteOneObjectMetadataItem } from '@/object-metadata/hooks/useDeleteOneObjectMetadataItem';
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
@ -133,7 +127,6 @@ export const SettingsObjects = () => {
);
return (
<SubMenuTopBarContainer
Icon={IconHierarchy2}
title="Data model"
actionButton={
<UndecoratedLink to={getSettingsPagePath(SettingsPath.NewObject)}>

24
packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsObjectNewField/SettingsObjectNewFieldStep2.stories.tsx → packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsObjectNewField/SettingsObjectNewFieldConfigure.stories.tsx
View File

@ -1,5 +1,6 @@
import { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/test';
import { SettingsObjectNewFieldConfigure } from '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldConfigure';
import {
PageDecorator,
@ -7,15 +8,13 @@ import {
} from '~/testing/decorators/PageDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { SettingsObjectNewFieldStep2 } from '../../SettingsObjectNewField/SettingsObjectNewFieldStep2';
const meta: Meta<PageDecoratorArgs> = {
title:
'Pages/Settings/DataModel/SettingsObjectNewField/SettingsObjectNewFieldStep2',
component: SettingsObjectNewFieldStep2,
'Pages/Settings/DataModel/SettingsObjectNewField/SettingsObjectNewFieldConfigure',
component: SettingsObjectNewFieldConfigure,
decorators: [PageDecorator],
args: {
routePath: '/settings/objects/:objectSlug/new-field/step-2',
routePath: '/settings/objects/:objectSlug/new-field/configure',
routeParams: { ':objectSlug': 'companies' },
},
parameters: {
@ -25,21 +24,11 @@ const meta: Meta<PageDecoratorArgs> = {
export default meta;
export type Story = StoryObj<typeof SettingsObjectNewFieldStep2>;
export type Story = StoryObj<typeof SettingsObjectNewFieldConfigure>;
export const Default: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await canvas.findByText('Objects');
await canvas.findByText('1. Select a field type');
const searchInput = await canvas.findByPlaceholderText('Search a type');
await userEvent.type(searchInput, 'Num');
const numberTypeButton = await canvas.findByText('Number');
await userEvent.click(numberTypeButton);
await canvas.findByText('2. Configure field');
@ -49,11 +38,10 @@ export const Default: Story = {
const descriptionInput = await canvas.findByPlaceholderText(
'Write a description',
);
await userEvent.type(descriptionInput, 'Test description');
const saveButton = await canvas.findByText('Save');
await new Promise((resolve) => setTimeout(resolve, 5000));
await userEvent.click(saveButton);
},
};

41
packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsObjectNewField/SettingsObjectNewFieldSelect.stories.tsx Normal file
View File

@ -0,0 +1,41 @@
import { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/test';
import { SettingsObjectNewFieldSelect } from '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldSelect';
import {
PageDecorator,
PageDecoratorArgs,
} from '~/testing/decorators/PageDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
const meta: Meta<PageDecoratorArgs> = {
title:
'Pages/Settings/DataModel/SettingsObjectNewField/SettingsObjectNewFieldSelect',
component: SettingsObjectNewFieldSelect,
decorators: [PageDecorator],
args: {
routePath: '/settings/objects/:objectSlug/new-field/select',
routeParams: { ':objectSlug': 'companies' },
},
parameters: {
msw: graphqlMocks,
},
};
export default meta;
export type Story = StoryObj<typeof SettingsObjectNewFieldSelect>;
export const Default: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await canvas.findByText('Objects');
await canvas.findByText('1. Select a field type');
const searchInput = await canvas.findByPlaceholderText('Search a type');
await userEvent.type(searchInput, 'Rela');
await new Promise((resolve) => setTimeout(resolve, 1500));
await userEvent.clear(searchInput);
await userEvent.type(searchInput, 'Num');
await new Promise((resolve) => setTimeout(resolve, 1500));
},
};

38
packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsObjectNewField/SettingsObjectNewFieldStep1.stories.tsx
View File

@ -1,38 +0,0 @@
import { Meta, StoryObj } from '@storybook/react';
import { within } from '@storybook/test';
import {
PageDecorator,
PageDecoratorArgs,
} from '~/testing/decorators/PageDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { SettingsObjectNewFieldStep1 } from '../../SettingsObjectNewField/SettingsObjectNewFieldStep1';
const meta: Meta<PageDecoratorArgs> = {
title:
'Pages/Settings/DataModel/SettingsObjectNewField/SettingsObjectNewFieldStep1',
component: SettingsObjectNewFieldStep1,
decorators: [PageDecorator],
args: {
routePath: '/settings/objects/:objectSlug/new-field/step-1',
routeParams: { ':objectSlug': 'companies' },
},
parameters: {
msw: graphqlMocks,
},
};
export default meta;
export type Story = StoryObj<typeof SettingsObjectNewFieldStep1>;
export const Default: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await canvas.findByText('Objects');
await canvas.findByText('Companies');
await canvas.findByText('Check deactivated fields');
await canvas.findByText('Add Custom Field');
},
};

3
packages/twenty-front/src/pages/settings/developers/SettingsDevelopers.tsx
View File

@ -1,5 +1,5 @@
import styled from '@emotion/styled';
import { H2Title, IconCode, IconPlus } from 'twenty-ui';
import { H2Title, IconPlus } from 'twenty-ui';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SettingsApiKeysTable } from '@/settings/developers/components/SettingsApiKeysTable';
@ -20,7 +20,6 @@ const StyledButtonContainer = styled.div`
export const SettingsDevelopers = () => {
return (
<SubMenuTopBarContainer
Icon={IconCode}
title="Developers"
actionButton={<SettingsReadDocumentationButton />}
links={[

3
packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx
View File

@ -4,7 +4,7 @@ import { DateTime } from 'luxon';
import { useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useRecoilState } from 'recoil';
import { H2Title, IconCode, IconRepeat, IconTrash } from 'twenty-ui';
import { H2Title, IconRepeat, IconTrash } from 'twenty-ui';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
@ -145,7 +145,6 @@ export const SettingsDevelopersApiKeyDetail = () => {
<>
{apiKeyData?.name && (
<SubMenuTopBarContainer
Icon={IconCode}
title={apiKeyData?.name}
links={[
{

3
packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew.tsx
View File

@ -1,7 +1,7 @@
import { DateTime } from 'luxon';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { H2Title, IconCode } from 'twenty-ui';
import { H2Title } from 'twenty-ui';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
@ -65,7 +65,6 @@ export const SettingsDevelopersApiKeysNew = () => {
const canSave = !!formValues.name && createOneApiKey;
return (
<SubMenuTopBarContainer
Icon={IconCode}
title="New key"
links={[
{

3
packages/twenty-front/src/pages/settings/developers/webhooks/SettingsDevelopersWebhookDetail.tsx
View File

@ -1,7 +1,7 @@
import styled from '@emotion/styled';
import { useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { H2Title, IconCode, IconTrash } from 'twenty-ui';
import { H2Title, IconTrash } from 'twenty-ui';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
@ -93,7 +93,6 @@ export const SettingsDevelopersWebhooksDetail = () => {
return (
<SubMenuTopBarContainer
Icon={IconCode}
title={webhookData.targetUrl}
links={[
{

3
packages/twenty-front/src/pages/settings/developers/webhooks/SettingsDevelopersWebhooksNew.tsx
View File

@ -1,6 +1,6 @@
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { H2Title, IconCode, isDefined } from 'twenty-ui';
import { H2Title, isDefined } from 'twenty-ui';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
@ -64,7 +64,6 @@ export const SettingsDevelopersWebhooksNew = () => {
return (
<SubMenuTopBarContainer
Icon={IconCode}
title="New Webhook"
links={[
{

3
packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDatabase.tsx
View File

@ -1,6 +1,6 @@
import { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { H2Title, IconSettings } from 'twenty-ui';
import { H2Title } from 'twenty-ui';
import { useGetDatabaseConnections } from '@/databases/hooks/useGetDatabaseConnections';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
@ -42,7 +42,6 @@ export const SettingsIntegrationDatabase = () => {
return (
<SubMenuTopBarContainer
Icon={IconSettings}
title={integration.text}
links={[
{

3
packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationEditDatabaseConnection.tsx
View File

@ -1,5 +1,3 @@
import { IconSettings } from 'twenty-ui';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SettingsIntegrationEditDatabaseConnectionContainer } from '@/settings/integrations/database-connection/components/SettingsIntegrationEditDatabaseConnectionContainer';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
@ -9,7 +7,6 @@ import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'
export const SettingsIntegrationEditDatabaseConnection = () => {
return (
<SubMenuTopBarContainer
Icon={IconSettings}
title="Edit connection"
links={[
{

3
packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationNewDatabaseConnection.tsx
View File

@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
import { useEffect } from 'react';
import { FormProvider, useForm } from 'react-hook-form';
import { useNavigate, useParams } from 'react-router-dom';
import { H2Title, IconSettings } from 'twenty-ui';
import { H2Title } from 'twenty-ui';
import { z } from 'zod';
import { useCreateOneDatabaseConnection } from '@/databases/hooks/useCreateOneDatabaseConnection';
@ -131,7 +131,6 @@ export const SettingsIntegrationNewDatabaseConnection = () => {
return (
<SubMenuTopBarContainer
Icon={IconSettings}
title="New"
links={[
{

3
packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationShowDatabaseConnection.tsx
View File

@ -1,5 +1,3 @@
import { IconSettings } from 'twenty-ui';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SettingsIntegrationDatabaseConnectionShowContainer } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionShowContainer';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
@ -9,7 +7,6 @@ import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'
export const SettingsIntegrationShowDatabaseConnection = () => {
return (
<SubMenuTopBarContainer
Icon={IconSettings}
title="Database Connection"
links={[
{

2
packages/twenty-front/src/pages/settings/integrations/SettingsIntegrations.tsx
View File

@ -4,14 +4,12 @@ import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { IconApps } from 'twenty-ui';
export const SettingsIntegrations = () => {
const integrationCategories = useSettingsIntegrationCategories();
return (
<SubMenuTopBarContainer
Icon={IconApps}
title="Integrations"
links={[
{

3
packages/twenty-front/src/pages/settings/profile/appearance/components/SettingsAppearance.tsx
View File

@ -1,4 +1,4 @@
import { H2Title, IconColorSwatch } from 'twenty-ui';
import { H2Title } from 'twenty-ui';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
@ -14,7 +14,6 @@ export const SettingsAppearance = () => {
return (
<SubMenuTopBarContainer
Icon={IconColorSwatch}
title="Experience"
links={[
{

3
packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctionDetail.tsx
View File

@ -21,7 +21,7 @@ import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
import { useState } from 'react';
import { useParams } from 'react-router-dom';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { IconCode, IconFunction, IconSettings, IconTestPipe } from 'twenty-ui';
import { IconCode, IconSettings, IconTestPipe } from 'twenty-ui';
import { usePreventOverlapCallback } from '~/hooks/usePreventOverlapCallback';
import { isDefined } from '~/utils/isDefined';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
@ -227,7 +227,6 @@ export const SettingsServerlessFunctionDetail = () => {
return (
!loading && (
<SubMenuTopBarContainer
Icon={IconFunction}
title={formValues.name}
links={[
{

3
packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctions.tsx
View File

@ -5,12 +5,11 @@ import { Button } from '@/ui/input/button/components/Button';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { Section } from '@/ui/layout/section/components/Section';
import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
import { IconFunction, IconPlus } from 'twenty-ui';
import { IconPlus } from 'twenty-ui';
export const SettingsServerlessFunctions = () => {
return (
<SubMenuTopBarContainer
Icon={IconFunction}
title="Functions"
actionButton={
<UndecoratedLink

2
packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctionsNew.tsx
View File

@ -12,7 +12,6 @@ import { SettingsPath } from '@/types/SettingsPath';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useState } from 'react';
import { Key } from 'ts-key-enum';
import { IconFunction } from 'twenty-ui';
import { useHotkeyScopeOnMount } from '~/hooks/useHotkeyScopeOnMount';
import { isDefined } from '~/utils/isDefined';
@ -77,7 +76,6 @@ export const SettingsServerlessFunctionsNew = () => {
return (
<SubMenuTopBarContainer
Icon={IconFunction}
title="New Function"
links={[
{