Refactor settings > data model section (#2031)

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)};
-  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<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>
-      <ObjectTypeCard
+      ></SettingsObjectTypeCard>
+      <SettingsObjectTypeCard
         title="Custom"
         color="orange"
         selected={selectedType === 'Custom'}
@@ -47,8 +46,8 @@ export const NewObjectType = () => {
           />
         }
         onClick={() => handleCardClick('Custom')}
-      ></ObjectTypeCard>
-      <ObjectTypeCard
+      ></SettingsObjectTypeCard>
+      <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';
-
-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];
 

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 (