Refactor settings > data model section (#2031)

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';

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',

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)};
+  gap: ${({ theme }) => theme.spacing(2)};
-  margin-bottom: ${({ theme }) => theme.spacing(8)};
   width: 100%;
 `;
 
-export const NewObjectType = () => {
+export const SettingsNewObjectType = () => {
   const theme = useTheme();
   const [selectedType, setSelectedType] = useState<string | null>(null);
   const handleCardClick = (selectedType: string) => {
@@ -22,7 +21,7 @@ export const NewObjectType = () => {
   };
   return (
     <StyledContainer>
-      <ObjectTypeCard
+      <SettingsObjectTypeCard
         title="Standard"
         color="blue"
         selected={selectedType === 'Standard'}
@@ -34,8 +33,8 @@ export const NewObjectType = () => {
           />
         }
         onClick={() => handleCardClick('Standard')}
-      ></ObjectTypeCard>
+      ></SettingsObjectTypeCard>
-      <ObjectTypeCard
+      <SettingsObjectTypeCard
         title="Custom"
         color="orange"
         selected={selectedType === 'Custom'}
@@ -47,8 +46,8 @@ export const NewObjectType = () => {
           />
         }
         onClick={() => handleCardClick('Custom')}
-      ></ObjectTypeCard>
+      ></SettingsObjectTypeCard>
-      <ObjectTypeCard
+      <SettingsObjectTypeCard
         title="Remote"
         soon
         disabled
@@ -61,7 +60,7 @@ export const NewObjectType = () => {
             color={theme.font.color.tertiary}
           />
         }
-      ></ObjectTypeCard>
+      ></SettingsObjectTypeCard>
     </StyledContainer>
   );
 };

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<ObjectTypeCardProps>`
+const StyledObjectTypeCard = styled.div<SettingsObjectTypeCardProps>`
   ${({ 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 (
     <div onClick={() => onclick}>

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 (
+    <Section>
+      <H2Title title="About" description={`Manage you object`} />
+      <StyledTableRow>
+        <StyledNameTableCell>
+          <Icon size={theme.icon.size.md} />
+          {name}
+        </StyledNameTableCell>
+        <StyledFlexContainer>
+          <TableCell>
+            {type === 'standard' ? (
+              <StyledTag color="blue" text="Standard" />
+            ) : (
+              <StyledTag color="orange" text="Custom" />
+            )}
+          </TableCell>
+          <StyledIconTableCell>
+            <StyledIconDotsVertical
+              size={theme.icon.size.md}
+              stroke={theme.icon.stroke.sm}
+            />
+          </StyledIconTableCell>
+        </StyledFlexContainer>
+      </StyledTableRow>
+    </Section>
+  );
+};

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';
+import { ObjectFieldItem } from '../../types/ObjectFieldItem';
-
-type ObjectFieldDataTypeProps = {
-  value: ObjectFieldItem['dataType'];
-};
 
 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];
 

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'}
       </TableCell>
       <TableCell>
-        <ObjectFieldDataType value={fieldItem.dataType} />
+        <SettingsObjectFieldDataType value={fieldItem.dataType} />
       </TableCell>
       <StyledIconTableCell>
         <StyledIconDotsVertical

front/src/modules/settings/data-model/object-edit/SettingsObjectIconSection.tsx

@@ -6,7 +6,7 @@ import { IconPicker } from '@/ui/input/components/IconPicker';
 
 import ArrowRight from '../assets/ArrowRight.svg';
 
-import { IconWithLabel } from './IconWithLabel';
+import { SettingsObjectIconWithLabel } from './SettingsObjectIconWithLabel';
 
 const StyledContainer = styled.div`
   align-items: center;
@@ -21,17 +21,17 @@ const StyledArrowContainer = styled.div`
   justify-content: center;
 `;
 
-type SettingsIconSectionProps = {
+type SettingsObjectIconSectionProps = {
   Icon: IconComponent;
   iconKey: string;
-  setIconPicker: (icon: { Icon: IconComponent; iconKey: string }) => void;
+  setIconPicker?: (icon: { Icon: IconComponent; iconKey: string }) => void;
 };
 
-export const SettingsIconSection = ({
+export const SettingsObjectIconSection = ({
   Icon,
   iconKey,
   setIconPicker,
-}: SettingsIconSectionProps) => {
+}: SettingsObjectIconSectionProps) => {
   return (
     <section>
       <H2Title
@@ -42,13 +42,13 @@ export const SettingsIconSection = ({
         <IconPicker
           selectedIconKey={iconKey}
           onChange={(icon) => {
-            setIconPicker({ Icon: icon.Icon, iconKey: icon.iconKey });
+            setIconPicker?.({ Icon: icon.Icon, iconKey: icon.iconKey });
           }}
         />
         <StyledArrowContainer>
           <img src={ArrowRight} alt="Arrow right" width={32} height={16} />
         </StyledArrowContainer>
-        <IconWithLabel Icon={Icon} label="Workspaces" />
+        <SettingsObjectIconWithLabel Icon={Icon} label="Workspaces" />
       </StyledContainer>
     </section>
   );

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 (

front/src/pages/settings/constants/mockObjects.ts

@@ -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,
-  },
-];

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/data-model/constants/objectSettings';
-import { objectSettingsWidth } from '@/settings/objects/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"
           />
+          <SettingsNewObjectType />
         </Section>
-        <NewObjectType></NewObjectType>
       </StyledContainer>
     </SubMenuTopBarContainer>
   );

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';
+} from '@/settings/data-model/constants/mockObjects';
-import { objectSettingsWidth } from '@/settings/objects/constants/objectSettings';
+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 { IconPlus, IconSettings } from '@/ui/display/icon';
-import { Tag } from '@/ui/display/tag/components/Tag';
 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 ?? '' },
           ]}
         />
-        <H2Title title="About" description={`Manage you object`} />
+        {activeObject && (
-        <StyledTableRow key={activeObject?.name}>
+          <SettingsAboutSection
-          <StyledNameTableCell>
+            Icon={activeObject?.Icon}
-            {activeObject ? (
+            name={activeObject.name}
-              <activeObject.Icon size={theme.icon.size.md} />
+            type={activeObject.type}
-            ) : (
+          />
-              ''
+        )}
-            )}
-            {activeObject?.name}
-          </StyledNameTableCell>
-          <StyledFlexContainer>
-            <TableCell>
-              {activeObject?.type === 'standard' ? (
-                <StyledTag color="blue" text="Standard" />
-              ) : (
-                <StyledTag color="orange" text="Custom" />
-              )}
-            </TableCell>
-            <StyledIconTableCell>
-              <StyledIconDotsVertical
-                size={theme.icon.size.md}
-                stroke={theme.icon.stroke.sm}
-                onClick={() =>
-                  navigate(`/settings/objects/${pluralObjectName}/edit`)
-                }
-              />
-            </StyledIconTableCell>
-          </StyledFlexContainer>
-        </StyledTableRow>
         <H2Title
           title="Fields"
           description={`Customise the fields available in the ${activeObject?.singularName} views and their display order in the ${activeObject?.singularName} detail view and menus.`}
@@ -135,7 +81,7 @@ export const SettingsObjectDetail = () => {
           </StyledObjectFieldTableRow>
           <TableSection title="Active">
             {activeFieldItems.map((fieldItem) => (
-              <ObjectFieldItemTableRow
+              <SettingsObjectFieldItemTableRow
                 key={fieldItem.name}
                 fieldItem={fieldItem}
               />
@@ -144,7 +90,7 @@ export const SettingsObjectDetail = () => {
           {!!disabledFieldItems.length && (
             <TableSection isInitiallyExpanded={false} title="Disabled">
               {disabledFieldItems.map((fieldItem) => (
-                <ObjectFieldItemTableRow
+                <SettingsObjectFieldItemTableRow
                   key={fieldItem.name}
                   fieldItem={fieldItem}
                 />

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 { activeObjectItems } from '@/settings/data-model/constants/mockObjects';
-import { objectSettingsWidth } from '@/settings/objects/constants/objectSettings';
+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 && (
+          <SettingsObjectIconSection
+            Icon={activeObject.Icon}
+            iconKey={activeObject.Icon.name}
+          />
+        )}
       </StyledContainer>
     </SubMenuTopBarContainer>
   );

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