From b416b0f98fda67a9f4362bbaadc782db344ae854 Mon Sep 17 00:00:00 2001 From: brendanlaschke Date: Thu, 21 Dec 2023 11:33:52 +0100 Subject: [PATCH] Update new/edit object according to figma (#3093) * made changes according to figma * remove click custom in test --- .../components/SettingsObjectFormSection.tsx | 29 +++- .../components/SettingsNewObjectType.tsx | 70 --------- .../components/SettingsObjectTypeCard.tsx | 81 ---------- .../settings/data-model/SettingsNewObject.tsx | 140 +++++------------- .../data-model/SettingsObjectEdit.tsx | 13 +- .../settings/data-model/SettingsObjects.tsx | 2 +- .../__stories__/SettingsNewObject.stories.tsx | 13 -- 7 files changed, 63 insertions(+), 285 deletions(-) delete mode 100644 packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsNewObjectType.tsx delete mode 100644 packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsObjectTypeCard.tsx diff --git a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFormSection.tsx b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFormSection.tsx index 362cbef9e2..5294b7baa0 100644 --- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFormSection.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFormSection.tsx @@ -2,17 +2,20 @@ import styled from '@emotion/styled'; import { validateMetadataLabel } from '@/object-metadata/utils/validateMetadataLabel'; import { H2Title } from '@/ui/display/typography/components/H2Title'; +import { IconPicker } from '@/ui/input/components/IconPicker'; import { TextArea } from '@/ui/input/components/TextArea'; import { TextInput } from '@/ui/input/components/TextInput'; import { Section } from '@/ui/layout/section/components/Section'; type SettingsObjectFormSectionProps = { disabled?: boolean; + icon?: string; singularName?: string; pluralName?: string; description?: string; onChange?: ( formValues: Partial<{ + icon: string; labelSingular: string; labelPlural: string; description: string; @@ -27,8 +30,22 @@ const StyledInputsContainer = styled.div` width: 100%; `; +const StyledLabel = styled.span` + color: ${({ theme }) => theme.font.color.light}; + font-size: ${({ theme }) => theme.font.size.xs}; + font-weight: ${({ theme }) => theme.font.weight.semiBold}; + margin-bottom: ${({ theme }) => theme.spacing(1)}; + text-transform: uppercase; +`; + +const StyledInputContainer = styled.div` + display: flex; + flex-direction: column; +`; + export const SettingsObjectFormSection = ({ disabled, + icon = 'IconPigMoney', singularName = '', pluralName = '', description = '', @@ -36,10 +53,20 @@ export const SettingsObjectFormSection = ({ }: SettingsObjectFormSectionProps) => (
+ + Icon + { + onChange?.({ icon: icon.iconKey }); + }} + /> + void; -}; - -const StyledContainer = styled.div` - display: flex; - flex-direction: row; - gap: ${({ theme }) => theme.spacing(2)}; -`; - -export const SettingsNewObjectType = ({ - selectedType, - onTypeSelect, -}: SettingsNewObjectTypeProps) => { - const theme = useTheme(); - return ( - - - } - onClick={() => onTypeSelect?.('Standard')} - /> - - } - onClick={() => onTypeSelect?.('Custom')} - /> - - } - /> - - ); -}; diff --git a/packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsObjectTypeCard.tsx b/packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsObjectTypeCard.tsx deleted file mode 100644 index e31e8b48ff..0000000000 --- a/packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsObjectTypeCard.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import { useTheme } from '@emotion/react'; -import styled from '@emotion/styled'; - -import { IconCheck } from '@/ui/display/icon'; -import { SoonPill } from '@/ui/display/pill/components/SoonPill'; -import { Tag } from '@/ui/display/tag/components/Tag'; -import { ThemeColor } from '@/ui/theme/constants/colors'; - -const StyledObjectTypeCard = styled.div` - ${({ theme, disabled, selected }) => ` - background: ${theme.background.transparent.primary}; - cursor: ${disabled ? 'not-allowed' : 'pointer'}; - display: flex; - flex-direction: row; - font-family: ${theme.font.family}; - font-weight: 500; - border-style: solid; - border-width: '1px'; - padding: ${theme.spacing(3)}; - border-radius: ${theme.border.radius.sm}; - gap: ${theme.spacing(2)}; - border-color: ${ - selected ? theme.border.color.inverted : theme.border.color.medium - }; - color: ${theme.font.color.primary}; - align-items: center; - width: 140px; - `} -`; - -const StyledTag = styled(Tag)` - box-sizing: border-box; - height: ${({ theme }) => theme.spacing(5)}; -`; - -const StyledIconCheck = styled(IconCheck)` - margin-left: auto; -`; - -const StyledSoonPill = styled(SoonPill)` - margin-left: auto; -`; - -type SettingsObjectTypeCardProps = { - prefixIcon?: React.ReactNode; - title: string; - soon?: boolean; - disabled?: boolean; - color: ThemeColor; - selected: boolean; - onClick?: () => void; -}; - -export const SettingsObjectTypeCard = ({ - prefixIcon, - title, - soon = false, - selected, - disabled = false, - color, - onClick, -}: SettingsObjectTypeCardProps) => { - const theme = useTheme(); - return ( - - {prefixIcon} - - {soon && } - {!disabled && selected && } - - ); -}; - -export {}; diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsNewObject.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsNewObject.tsx index b355f74ee4..f7e8ebcff0 100644 --- a/packages/twenty-front/src/pages/settings/data-model/SettingsNewObject.tsx +++ b/packages/twenty-front/src/pages/settings/data-model/SettingsNewObject.tsx @@ -7,35 +7,17 @@ import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer'; import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer'; import { SettingsObjectFormSection } from '@/settings/data-model/components/SettingsObjectFormSection'; -import { SettingsAvailableStandardObjectsSection } from '@/settings/data-model/new-object/components/SettingsAvailableStandardObjectsSection'; -import { - NewObjectType, - SettingsNewObjectType, -} from '@/settings/data-model/new-object/components/SettingsNewObjectType'; -import { SettingsObjectIconSection } from '@/settings/data-model/object-edit/SettingsObjectIconSection'; import { IconSettings } from '@/ui/display/icon'; -import { H2Title } from '@/ui/display/typography/components/H2Title'; import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'; -import { Section } from '@/ui/layout/section/components/Section'; import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb'; export const SettingsNewObject = () => { const navigate = useNavigate(); - const [selectedObjectType, setSelectedObjectType] = - useState('Standard'); const { enqueueSnackBar } = useSnackBar(); - const { - activateObjectMetadataItem: activateObject, - createObjectMetadataItem: createObject, - disabledObjectMetadataItems: disabledObjects, - } = useObjectMetadataItemForSettings(); - - const [ - selectedStandardObjectMetadataIds, - setSelectedStandardObjectMetadataIds, - ] = useState>({}); + const { createObjectMetadataItem: createObject } = + useObjectMetadataItemForSettings(); const [customFormValues, setCustomFormValues] = useState<{ description?: string; @@ -45,49 +27,28 @@ export const SettingsNewObject = () => { }>({ icon: 'IconPigMoney', labelPlural: '', labelSingular: '' }); const canSave = - (selectedObjectType === 'Standard' && - Object.values(selectedStandardObjectMetadataIds).some( - (isSelected) => isSelected, - )) || - (selectedObjectType === 'Custom' && - !!customFormValues.labelPlural && - !!customFormValues.labelSingular); + !!customFormValues.labelPlural && !!customFormValues.labelSingular; const handleSave = async () => { - if (selectedObjectType === 'Standard') { - await Promise.all( - Object.entries(selectedStandardObjectMetadataIds).map( - ([standardObjectMetadataId, isSelected]) => - isSelected - ? activateObject({ id: standardObjectMetadataId }) - : undefined, - ), + try { + const createdObject = await createObject({ + labelPlural: customFormValues.labelPlural, + labelSingular: customFormValues.labelSingular, + description: customFormValues.description, + icon: customFormValues.icon, + }); + + navigate( + createdObject.data?.createOneObject.isActive + ? `/settings/objects/${getObjectSlug( + createdObject.data.createOneObject, + )}` + : '/settings/objects', ); - - navigate('/settings/objects'); - } - - if (selectedObjectType === 'Custom') { - try { - const createdObject = await createObject({ - labelPlural: customFormValues.labelPlural, - labelSingular: customFormValues.labelSingular, - description: customFormValues.description, - icon: customFormValues.icon, - }); - - navigate( - createdObject.data?.createOneObject.isActive - ? `/settings/objects/${getObjectSlug( - createdObject.data.createOneObject, - )}` - : '/settings/objects', - ); - } catch (error) { - enqueueSnackBar((error as Error).message, { - variant: 'error', - }); - } + } catch (error) { + enqueueSnackBar((error as Error).message, { + variant: 'error', + }); } }; @@ -109,53 +70,18 @@ export const SettingsNewObject = () => { onSave={handleSave} /> -
- - -
- {selectedObjectType === 'Standard' && ( - !isCustom)} - onChange={(selectedIds) => - setSelectedStandardObjectMetadataIds((previousSelectedIds) => ({ - ...previousSelectedIds, - ...selectedIds, - })) - } - selectedIds={selectedStandardObjectMetadataIds} - /> - )} - {selectedObjectType === 'Custom' && ( - <> - { - setCustomFormValues((previousValues) => ({ - ...previousValues, - icon: iconKey, - })); - }} - /> - { - setCustomFormValues((previousValues) => ({ - ...previousValues, - ...formValues, - })); - }} - /> - - )} + { + setCustomFormValues((previousValues) => ({ + ...previousValues, + ...formValues, + })); + }} + /> ); diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx index 9e9bf0d30d..77e920d133 100644 --- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx +++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx @@ -7,7 +7,6 @@ import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer'; import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer'; import { SettingsObjectFormSection } from '@/settings/data-model/components/SettingsObjectFormSection'; -import { SettingsObjectIconSection } from '@/settings/data-model/object-edit/SettingsObjectIconSection'; import { AppPath } from '@/types/AppPath'; import { IconArchive, IconSettings } from '@/ui/display/icon'; import { H2Title } from '@/ui/display/typography/components/H2Title'; @@ -113,19 +112,9 @@ export const SettingsObjectEdit = () => { /> )} - - setFormValues((previousFormValues) => ({ - ...previousFormValues, - icon: iconKey, - })) - } - /> {