From b128d53b584783d6bc4ae9d3197ebc5d2669a060 Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Sun, 15 Oct 2023 19:00:07 +0200 Subject: [PATCH] Refactor settings > data model section (#2031) --- front/src/App.tsx | 8 +- .../{ => data-model}/assets/ArrowRight.svg | 0 .../constants/mockObjects.ts | 3 +- .../constants/objectSettings.ts | 0 .../components/SettingsNewObjectType.tsx} | 19 ++-- .../components/SettingsObjectTypeCard.tsx} | 8 +- .../components/SettingsObjectAboutSection.tsx | 79 +++++++++++++++++ .../SettingsObjectFieldDataType.tsx} | 14 +-- .../SettingsObjectFieldItemTableRow.tsx} | 8 +- .../SettingsObjectIconSection.tsx} | 14 +-- .../SettingsObjectIconWithLabel.tsx} | 15 ++-- .../types/ObjectFieldItem.ts | 0 .../pages/settings/constants/mockObjects.ts | 40 --------- .../{ => data-model}/SettingsNewObject.tsx | 6 +- .../{ => data-model}/SettingsObjectDetail.tsx | 88 ++++--------------- .../{ => data-model}/SettingsObjectEdit.tsx | 11 ++- .../{ => data-model}/SettingsObjects.tsx | 11 ++- .../__stories__/SettingsNewObject.stories.tsx | 0 .../SettingsObjectDetail.stories.tsx | 0 .../SettingsObjectEdit.stories.tsx | 0 .../__stories__/SettingsObjects.stories.tsx | 0 21 files changed, 160 insertions(+), 164 deletions(-) rename front/src/modules/settings/{ => data-model}/assets/ArrowRight.svg (100%) rename front/src/modules/settings/{objects => data-model}/constants/mockObjects.ts (96%) rename front/src/modules/settings/{objects => data-model}/constants/objectSettings.ts (100%) rename front/src/modules/settings/{objects/components/NewObjectType.tsx => data-model/new-object/components/SettingsNewObjectType.tsx} (81%) rename front/src/modules/settings/{objects/components/ObjectTypeCard.tsx => data-model/new-object/components/SettingsObjectTypeCard.tsx} (90%) create mode 100644 front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx rename front/src/modules/settings/{objects/components/ObjectFieldDataType.tsx => data-model/object-details/components/SettingsObjectFieldDataType.tsx} (88%) rename front/src/modules/settings/{objects/components/ObjectFieldItemTableRow.tsx => data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx} (84%) rename front/src/modules/settings/{components/SettingsIconSection.tsx => data-model/object-edit/SettingsObjectIconSection.tsx} (72%) rename front/src/modules/settings/{components/IconWithLabel.tsx => data-model/object-edit/SettingsObjectIconWithLabel.tsx} (87%) rename front/src/modules/settings/{objects => data-model}/types/ObjectFieldItem.ts (100%) delete mode 100644 front/src/pages/settings/constants/mockObjects.ts rename front/src/pages/settings/{ => data-model}/SettingsNewObject.tsx (83%) rename front/src/pages/settings/{ => data-model}/SettingsObjectDetail.tsx (56%) rename front/src/pages/settings/{ => data-model}/SettingsObjectEdit.tsx (75%) rename front/src/pages/settings/{ => data-model}/SettingsObjects.tsx (97%) rename front/src/pages/settings/{ => data-model}/__stories__/SettingsNewObject.stories.tsx (100%) rename front/src/pages/settings/{ => data-model}/__stories__/SettingsObjectDetail.stories.tsx (100%) rename front/src/pages/settings/{ => data-model}/__stories__/SettingsObjectEdit.stories.tsx (100%) rename front/src/pages/settings/{ => data-model}/__stories__/SettingsObjects.stories.tsx (100%) diff --git a/front/src/App.tsx b/front/src/App.tsx index aa0d9d951..4648715d2 100644 --- a/front/src/App.tsx +++ b/front/src/App.tsx @@ -17,11 +17,11 @@ import { NotFound } from '~/pages/not-found/NotFound'; import { Opportunities } from '~/pages/opportunities/Opportunities'; import { People } from '~/pages/people/People'; import { PersonShow } from '~/pages/people/PersonShow'; +import { SettingsNewObject } from '~/pages/settings/data-model/SettingsNewObject'; +import { SettingsObjectDetail } from '~/pages/settings/data-model/SettingsObjectDetail'; +import { SettingsObjectEdit } from '~/pages/settings/data-model/SettingsObjectEdit'; +import { SettingsObjects } from '~/pages/settings/data-model/SettingsObjects'; import { SettingsExperience } from '~/pages/settings/SettingsExperience'; -import { SettingsNewObject } from '~/pages/settings/SettingsNewObject'; -import { SettingsObjectDetail } from '~/pages/settings/SettingsObjectDetail'; -import { SettingsObjectEdit } from '~/pages/settings/SettingsObjectEdit'; -import { SettingsObjects } from '~/pages/settings/SettingsObjects'; import { SettingsProfile } from '~/pages/settings/SettingsProfile'; import { SettingsWorkspace } from '~/pages/settings/SettingsWorkspace'; import { SettingsWorkspaceMembers } from '~/pages/settings/SettingsWorkspaceMembers'; diff --git a/front/src/modules/settings/assets/ArrowRight.svg b/front/src/modules/settings/data-model/assets/ArrowRight.svg similarity index 100% rename from front/src/modules/settings/assets/ArrowRight.svg rename to front/src/modules/settings/data-model/assets/ArrowRight.svg diff --git a/front/src/modules/settings/objects/constants/mockObjects.ts b/front/src/modules/settings/data-model/constants/mockObjects.ts similarity index 96% rename from front/src/modules/settings/objects/constants/mockObjects.ts rename to front/src/modules/settings/data-model/constants/mockObjects.ts index a242c3328..ee97577f6 100644 --- a/front/src/modules/settings/objects/constants/mockObjects.ts +++ b/front/src/modules/settings/data-model/constants/mockObjects.ts @@ -1,4 +1,3 @@ -import { ObjectFieldItem } from '@/settings/objects/types/ObjectFieldItem'; import { IconBrandLinkedin, IconBrandTwitter, @@ -16,6 +15,8 @@ import { IconUsers, } from '@/ui/display/icon'; +import { ObjectFieldItem } from '../types/ObjectFieldItem'; + export const activeObjectItems = [ { name: 'Companies', diff --git a/front/src/modules/settings/objects/constants/objectSettings.ts b/front/src/modules/settings/data-model/constants/objectSettings.ts similarity index 100% rename from front/src/modules/settings/objects/constants/objectSettings.ts rename to front/src/modules/settings/data-model/constants/objectSettings.ts diff --git a/front/src/modules/settings/objects/components/NewObjectType.tsx b/front/src/modules/settings/data-model/new-object/components/SettingsNewObjectType.tsx similarity index 81% rename from front/src/modules/settings/objects/components/NewObjectType.tsx rename to front/src/modules/settings/data-model/new-object/components/SettingsNewObjectType.tsx index d6ffbc596..2399c1181 100644 --- a/front/src/modules/settings/objects/components/NewObjectType.tsx +++ b/front/src/modules/settings/data-model/new-object/components/SettingsNewObjectType.tsx @@ -4,17 +4,16 @@ import styled from '@emotion/styled'; import { IconBox, IconDatabase, IconFileCheck } from '@/ui/display/icon'; -import { ObjectTypeCard } from './ObjectTypeCard'; +import { SettingsObjectTypeCard } from './SettingsObjectTypeCard'; const StyledContainer = styled.div` display: flex; flex-direction: row; - gap: ${({ theme }) => theme.spacing(5)}; - margin-bottom: ${({ theme }) => theme.spacing(8)}; + gap: ${({ theme }) => theme.spacing(2)}; width: 100%; `; -export const NewObjectType = () => { +export const SettingsNewObjectType = () => { const theme = useTheme(); const [selectedType, setSelectedType] = useState(null); const handleCardClick = (selectedType: string) => { @@ -22,7 +21,7 @@ export const NewObjectType = () => { }; return ( - { /> } onClick={() => handleCardClick('Standard')} - > - + { /> } onClick={() => handleCardClick('Custom')} - > - + { color={theme.font.color.tertiary} /> } - > + > ); }; diff --git a/front/src/modules/settings/objects/components/ObjectTypeCard.tsx b/front/src/modules/settings/data-model/new-object/components/SettingsObjectTypeCard.tsx similarity index 90% rename from front/src/modules/settings/objects/components/ObjectTypeCard.tsx rename to front/src/modules/settings/data-model/new-object/components/SettingsObjectTypeCard.tsx index 82925645b..9703215ae 100644 --- a/front/src/modules/settings/objects/components/ObjectTypeCard.tsx +++ b/front/src/modules/settings/data-model/new-object/components/SettingsObjectTypeCard.tsx @@ -6,7 +6,7 @@ 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` +const StyledObjectTypeCard = styled.div` ${({ theme, disabled, selected }) => ` background: ${theme.background.transparent.primary}; cursor: ${disabled ? 'not-allowed' : 'pointer'}; @@ -37,7 +37,7 @@ const StyledIconCheck = styled(IconCheck)` margin-left: auto; `; -type ObjectTypeCardProps = { +type SettingsObjectTypeCardProps = { prefixIcon?: React.ReactNode; title: string; soon?: boolean; @@ -47,7 +47,7 @@ type ObjectTypeCardProps = { onClick?: () => void; }; -export const ObjectTypeCard = ({ +export const SettingsObjectTypeCard = ({ prefixIcon, title, soon = false, @@ -55,7 +55,7 @@ export const ObjectTypeCard = ({ disabled = false, color, onClick, -}: ObjectTypeCardProps) => { +}: SettingsObjectTypeCardProps) => { const theme = useTheme(); return (
onclick}> diff --git a/front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx b/front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx new file mode 100644 index 000000000..89336cacb --- /dev/null +++ b/front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx @@ -0,0 +1,79 @@ +import { useTheme } from '@emotion/react'; +import styled from '@emotion/styled'; + +import { IconDotsVertical } from '@/ui/display/icon'; +import { IconComponent } from '@/ui/display/icon/types/IconComponent'; +import { Tag } from '@/ui/display/tag/components/Tag'; +import { H2Title } from '@/ui/display/typography/components/H2Title'; +import { Section } from '@/ui/layout/section/components/Section'; +import { TableCell } from '@/ui/layout/table/components/TableCell'; +import { TableRow } from '@/ui/layout/table/components/TableRow'; + +type SettingsAboutSectionProps = { + Icon: IconComponent; + name: string; + type: string; +}; + +const StyledIconTableCell = styled(TableCell)` + justify-content: center; + padding-right: ${({ theme }) => theme.spacing(1)}; +`; + +const StyledTableRow = styled(TableRow)` + background-color: ${({ theme }) => theme.background.secondary}; + border: ${({ theme }) => `1px solid ${theme.border.color.medium}`}; +`; + +const StyledNameTableCell = styled(TableCell)` + color: ${({ theme }) => theme.font.color.primary}; + gap: ${({ theme }) => theme.spacing(2)}; +`; + +const StyledTag = styled(Tag)` + box-sizing: border-box; + height: ${({ theme }) => theme.spacing(4)}; +`; + +const StyledIconDotsVertical = styled(IconDotsVertical)` + color: ${({ theme }) => theme.font.color.tertiary}; +`; + +const StyledFlexContainer = styled.div` + display: flex; + justify-content: flex-end; +`; + +export const SettingsAboutSection = ({ + Icon, + name, + type, +}: SettingsAboutSectionProps) => { + const theme = useTheme(); + return ( +
+ + + + + {name} + + + + {type === 'standard' ? ( + + ) : ( + + )} + + + + + + +
+ ); +}; diff --git a/front/src/modules/settings/objects/components/ObjectFieldDataType.tsx b/front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx similarity index 88% rename from front/src/modules/settings/objects/components/ObjectFieldDataType.tsx rename to front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx index d07f7c5e0..618e03e62 100644 --- a/front/src/modules/settings/objects/components/ObjectFieldDataType.tsx +++ b/front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx @@ -11,11 +11,7 @@ import { } from '@/ui/display/icon'; import { IconComponent } from '@/ui/display/icon/types/IconComponent'; -import { ObjectFieldItem } from '../types/ObjectFieldItem'; - -type ObjectFieldDataTypeProps = { - value: ObjectFieldItem['dataType']; -}; +import { ObjectFieldItem } from '../../types/ObjectFieldItem'; const StyledDataType = styled.div<{ value: ObjectFieldItem['dataType'] }>` align-items: center; @@ -48,7 +44,13 @@ const dataTypes: Record< text: { label: 'Text', Icon: IconLink }, }; -export const ObjectFieldDataType = ({ value }: ObjectFieldDataTypeProps) => { +type SettingsObjectFieldDataTypeProps = { + value: ObjectFieldItem['dataType']; +}; + +export const SettingsObjectFieldDataType = ({ + value, +}: SettingsObjectFieldDataTypeProps) => { const theme = useTheme(); const { label, Icon } = dataTypes[value]; diff --git a/front/src/modules/settings/objects/components/ObjectFieldItemTableRow.tsx b/front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx similarity index 84% rename from front/src/modules/settings/objects/components/ObjectFieldItemTableRow.tsx rename to front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx index b7c23a526..112c33ebf 100644 --- a/front/src/modules/settings/objects/components/ObjectFieldItemTableRow.tsx +++ b/front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx @@ -5,9 +5,9 @@ import { IconDotsVertical } from '@/ui/display/icon'; import { TableCell } from '@/ui/layout/table/components/TableCell'; import { TableRow } from '@/ui/layout/table/components/TableRow'; -import { ObjectFieldItem } from '../types/ObjectFieldItem'; +import { ObjectFieldItem } from '../../types/ObjectFieldItem'; -import { ObjectFieldDataType } from './ObjectFieldDataType'; +import { SettingsObjectFieldDataType } from './SettingsObjectFieldDataType'; export const StyledObjectFieldTableRow = styled(TableRow)` grid-template-columns: 180px 148px 148px 36px; @@ -27,7 +27,7 @@ const StyledIconDotsVertical = styled(IconDotsVertical)` color: ${({ theme }) => theme.font.color.tertiary}; `; -export const ObjectFieldItemTableRow = ({ +export const SettingsObjectFieldItemTableRow = ({ fieldItem, }: { fieldItem: ObjectFieldItem; @@ -44,7 +44,7 @@ export const ObjectFieldItemTableRow = ({ {fieldItem.type === 'standard' ? 'Standard' : 'Custom'} - + void; + setIconPicker?: (icon: { Icon: IconComponent; iconKey: string }) => void; }; -export const SettingsIconSection = ({ +export const SettingsObjectIconSection = ({ Icon, iconKey, setIconPicker, -}: SettingsIconSectionProps) => { +}: SettingsObjectIconSectionProps) => { return (
{ - setIconPicker({ Icon: icon.Icon, iconKey: icon.iconKey }); + setIconPicker?.({ Icon: icon.Icon, iconKey: icon.iconKey }); }} /> Arrow right - +
); diff --git a/front/src/modules/settings/components/IconWithLabel.tsx b/front/src/modules/settings/data-model/object-edit/SettingsObjectIconWithLabel.tsx similarity index 87% rename from front/src/modules/settings/components/IconWithLabel.tsx rename to front/src/modules/settings/data-model/object-edit/SettingsObjectIconWithLabel.tsx index 92791e1d1..5c08df708 100644 --- a/front/src/modules/settings/components/IconWithLabel.tsx +++ b/front/src/modules/settings/data-model/object-edit/SettingsObjectIconWithLabel.tsx @@ -3,11 +3,6 @@ import styled from '@emotion/styled'; import { IconComponent } from '@/ui/display/icon/types/IconComponent'; -type IconWithLabelProps = { - Icon: IconComponent; - label: string; -}; - const StyledContainer = styled.div` align-items: center; display: flex; @@ -28,7 +23,15 @@ const StyledItemLabel = styled.div` line-height: ${({ theme }) => theme.text.lineHeight.md}; `; -export const IconWithLabel = ({ Icon, label }: IconWithLabelProps) => { +type SettingsObjectIconWithLabelProps = { + Icon: IconComponent; + label: string; +}; + +export const SettingsObjectIconWithLabel = ({ + Icon, + label, +}: SettingsObjectIconWithLabelProps) => { const theme = useTheme(); return ( diff --git a/front/src/modules/settings/objects/types/ObjectFieldItem.ts b/front/src/modules/settings/data-model/types/ObjectFieldItem.ts similarity index 100% rename from front/src/modules/settings/objects/types/ObjectFieldItem.ts rename to front/src/modules/settings/data-model/types/ObjectFieldItem.ts diff --git a/front/src/pages/settings/constants/mockObjects.ts b/front/src/pages/settings/constants/mockObjects.ts deleted file mode 100644 index 4552e8297..000000000 --- a/front/src/pages/settings/constants/mockObjects.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { - IconBuildingSkyscraper, - IconLuggage, - IconPlane, - IconUser, -} from '@/ui/display/icon'; - -export const activeObjectItems = [ - { - name: 'Companies', - Icon: IconBuildingSkyscraper, - type: 'standard', - fields: 23, - instances: 165, - }, - { - name: 'People', - Icon: IconUser, - type: 'standard', - fields: 16, - instances: 462, - }, -]; - -export const disabledObjectItems = [ - { - name: 'Travels', - Icon: IconLuggage, - type: 'custom', - fields: 23, - instances: 165, - }, - { - name: 'Flights', - Icon: IconPlane, - type: 'custom', - fields: 23, - instances: 165, - }, -]; diff --git a/front/src/pages/settings/SettingsNewObject.tsx b/front/src/pages/settings/data-model/SettingsNewObject.tsx similarity index 83% rename from front/src/pages/settings/SettingsNewObject.tsx rename to front/src/pages/settings/data-model/SettingsNewObject.tsx index 43142f036..1ff10b417 100644 --- a/front/src/pages/settings/SettingsNewObject.tsx +++ b/front/src/pages/settings/data-model/SettingsNewObject.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; -import { NewObjectType } from '@/settings/objects/components/NewObjectType'; -import { objectSettingsWidth } from '@/settings/objects/constants/objectSettings'; +import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings'; +import { SettingsNewObjectType } from '@/settings/data-model/new-object/components/SettingsNewObjectType'; import { IconSettings } from '@/ui/display/icon'; import { H2Title } from '@/ui/display/typography/components/H2Title'; import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'; @@ -33,8 +33,8 @@ export const SettingsNewObject = () => { title="Object Type" description="The type of object you want to add" /> + - ); diff --git a/front/src/pages/settings/SettingsObjectDetail.tsx b/front/src/pages/settings/data-model/SettingsObjectDetail.tsx similarity index 56% rename from front/src/pages/settings/SettingsObjectDetail.tsx rename to front/src/pages/settings/data-model/SettingsObjectDetail.tsx index 427b9dfc9..7f2a077ca 100644 --- a/front/src/pages/settings/SettingsObjectDetail.tsx +++ b/front/src/pages/settings/data-model/SettingsObjectDetail.tsx @@ -1,28 +1,25 @@ import { useEffect } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; -import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { - ObjectFieldItemTableRow, - StyledObjectFieldTableRow, -} from '@/settings/objects/components/ObjectFieldItemTableRow'; import { activeFieldItems, activeObjectItems, disabledFieldItems, -} from '@/settings/objects/constants/mockObjects'; -import { objectSettingsWidth } from '@/settings/objects/constants/objectSettings'; +} from '@/settings/data-model/constants/mockObjects'; +import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings'; +import { SettingsAboutSection } from '@/settings/data-model/object-details/components/SettingsObjectAboutSection'; +import { + SettingsObjectFieldItemTableRow, + StyledObjectFieldTableRow, +} from '@/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow'; import { AppPath } from '@/types/AppPath'; -import { IconDotsVertical, IconPlus, IconSettings } from '@/ui/display/icon'; -import { Tag } from '@/ui/display/tag/components/Tag'; +import { IconPlus, IconSettings } from '@/ui/display/icon'; import { H2Title } from '@/ui/display/typography/components/H2Title'; import { Button } from '@/ui/input/button/components/Button'; import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'; import { Table } from '@/ui/layout/table/components/Table'; -import { TableCell } from '@/ui/layout/table/components/TableCell'; import { TableHeader } from '@/ui/layout/table/components/TableHeader'; -import { TableRow } from '@/ui/layout/table/components/TableRow'; import { TableSection } from '@/ui/layout/table/components/TableSection'; import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb'; @@ -34,11 +31,6 @@ const StyledContainer = styled.div` width: ${objectSettingsWidth}; `; -const StyledFlexContainer = styled.div` - display: flex; - justify-content: flex-end; -`; - const StyledBreadcrumb = styled(Breadcrumb)` margin-bottom: ${({ theme }) => theme.spacing(8)}; `; @@ -47,33 +39,9 @@ const StyledAddFieldButton = styled(Button)` align-self: flex-end; margin-top: ${({ theme }) => theme.spacing(2)}; `; -const StyledIconTableCell = styled(TableCell)` - justify-content: center; - padding-right: ${({ theme }) => theme.spacing(1)}; -`; - -const StyledTableRow = styled(TableRow)` - background-color: ${({ theme }) => theme.background.secondary}; - border: ${({ theme }) => theme.border.color.medium}; -`; - -const StyledNameTableCell = styled(TableCell)` - color: ${({ theme }) => theme.font.color.primary}; - gap: ${({ theme }) => theme.spacing(2)}; -`; - -const StyledTag = styled(Tag)` - box-sizing: border-box; - height: ${({ theme }) => theme.spacing(4)}; -`; - -const StyledIconDotsVertical = styled(IconDotsVertical)` - color: ${({ theme }) => theme.font.color.tertiary}; -`; export const SettingsObjectDetail = () => { const navigate = useNavigate(); - const theme = useTheme(); const { pluralObjectName = '' } = useParams(); const activeObject = activeObjectItems.find( @@ -93,35 +61,13 @@ export const SettingsObjectDetail = () => { { children: activeObject?.name ?? '' }, ]} /> - - - - {activeObject ? ( - - ) : ( - '' - )} - {activeObject?.name} - - - - {activeObject?.type === 'standard' ? ( - - ) : ( - - )} - - - - navigate(`/settings/objects/${pluralObjectName}/edit`) - } - /> - - - + {activeObject && ( + + )} { {activeFieldItems.map((fieldItem) => ( - @@ -144,7 +90,7 @@ export const SettingsObjectDetail = () => { {!!disabledFieldItems.length && ( {disabledFieldItems.map((fieldItem) => ( - diff --git a/front/src/pages/settings/SettingsObjectEdit.tsx b/front/src/pages/settings/data-model/SettingsObjectEdit.tsx similarity index 75% rename from front/src/pages/settings/SettingsObjectEdit.tsx rename to front/src/pages/settings/data-model/SettingsObjectEdit.tsx index f9730290c..5acc8767b 100644 --- a/front/src/pages/settings/SettingsObjectEdit.tsx +++ b/front/src/pages/settings/data-model/SettingsObjectEdit.tsx @@ -2,8 +2,9 @@ import { useEffect } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import styled from '@emotion/styled'; -import { activeObjectItems } from '@/settings/objects/constants/mockObjects'; -import { objectSettingsWidth } from '@/settings/objects/constants/objectSettings'; +import { activeObjectItems } from '@/settings/data-model/constants/mockObjects'; +import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings'; +import { SettingsObjectIconSection } from '@/settings/data-model/object-edit/SettingsObjectIconSection'; import { AppPath } from '@/types/AppPath'; import { IconSettings } from '@/ui/display/icon'; import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'; @@ -39,6 +40,12 @@ export const SettingsObjectEdit = () => { { children: 'Edit' }, ]} /> + {activeObject && ( + + )} ); diff --git a/front/src/pages/settings/SettingsObjects.tsx b/front/src/pages/settings/data-model/SettingsObjects.tsx similarity index 97% rename from front/src/pages/settings/SettingsObjects.tsx rename to front/src/pages/settings/data-model/SettingsObjects.tsx index c87ded100..df4c60cf4 100644 --- a/front/src/pages/settings/SettingsObjects.tsx +++ b/front/src/pages/settings/data-model/SettingsObjects.tsx @@ -2,7 +2,11 @@ import { useNavigate } from 'react-router-dom'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { objectSettingsWidth } from '@/settings/objects/constants/objectSettings'; +import { + activeObjectItems, + disabledObjectItems, +} from '@/settings/data-model/constants/mockObjects'; +import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings'; import { IconChevronRight, IconDotsVertical, @@ -20,11 +24,6 @@ import { TableHeader } from '@/ui/layout/table/components/TableHeader'; import { TableRow } from '@/ui/layout/table/components/TableRow'; import { TableSection } from '@/ui/layout/table/components/TableSection'; -import { - activeObjectItems, - disabledObjectItems, -} from './constants/mockObjects'; - const StyledContainer = styled.div` height: fit-content; padding: ${({ theme }) => theme.spacing(8)}; diff --git a/front/src/pages/settings/__stories__/SettingsNewObject.stories.tsx b/front/src/pages/settings/data-model/__stories__/SettingsNewObject.stories.tsx similarity index 100% rename from front/src/pages/settings/__stories__/SettingsNewObject.stories.tsx rename to front/src/pages/settings/data-model/__stories__/SettingsNewObject.stories.tsx diff --git a/front/src/pages/settings/__stories__/SettingsObjectDetail.stories.tsx b/front/src/pages/settings/data-model/__stories__/SettingsObjectDetail.stories.tsx similarity index 100% rename from front/src/pages/settings/__stories__/SettingsObjectDetail.stories.tsx rename to front/src/pages/settings/data-model/__stories__/SettingsObjectDetail.stories.tsx diff --git a/front/src/pages/settings/__stories__/SettingsObjectEdit.stories.tsx b/front/src/pages/settings/data-model/__stories__/SettingsObjectEdit.stories.tsx similarity index 100% rename from front/src/pages/settings/__stories__/SettingsObjectEdit.stories.tsx rename to front/src/pages/settings/data-model/__stories__/SettingsObjectEdit.stories.tsx diff --git a/front/src/pages/settings/__stories__/SettingsObjects.stories.tsx b/front/src/pages/settings/data-model/__stories__/SettingsObjects.stories.tsx similarity index 100% rename from front/src/pages/settings/__stories__/SettingsObjects.stories.tsx rename to front/src/pages/settings/data-model/__stories__/SettingsObjects.stories.tsx