feat: add new object standard available section (#2111)

* feat: add new object standard available section

* Fix feedback comments received on PR

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/settings/data-model/constants/mockObjects.ts

@@ -8,6 +8,7 @@ import {
   IconHeadphones,
   IconLink,
   IconLuggage,
+  IconMouse2,
   IconPlane,
   IconTarget,
   IconUser,
@@ -37,6 +38,21 @@ export const activeObjectItems = [
   },
 ];
 
+export const standardObjects = [
+  {
+    name: 'Users',
+    Icon: IconMouse2,
+    fields: 6,
+    description: 'Individuals who interact with your website',
+  },
+  {
+    name: 'Users',
+    Icon: IconMouse2,
+    fields: 8,
+    description: 'Individuals who interact with your website',
+  },
+];
+
 export const disabledObjectItems = [
   {
     name: 'Travels',

front/src/modules/settings/data-model/new-object/components/SettingsNewObjectType.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import { IconBox, IconDatabase, IconFileCheck } from '@/ui/display/icon';
 
 import { SettingsObjectTypeCard } from './SettingsObjectTypeCard';
+import { SettingsStandardObjects } from './SettingsStandardObjects';
 
 export type NewObjectType = 'Standard' | 'Custom' | 'Remote';
 
@@ -16,6 +17,7 @@ const StyledContainer = styled.div`
   display: flex;
   flex-direction: row;
   gap: ${({ theme }) => theme.spacing(2)};
+  margin-bottom: ${({ theme }) => theme.spacing(8)};
   width: 100%;
 `;
 
@@ -25,47 +27,50 @@ export const SettingsNewObjectType = ({
 }: SettingsNewObjectTypeProps) => {
   const theme = useTheme();
   return (
-    <StyledContainer>
+    <>
-      <SettingsObjectTypeCard
+      <StyledContainer>
-        title="Standard"
+        <SettingsObjectTypeCard
-        color="blue"
+          title={'Standard'}
-        selected={selectedType === 'Standard'}
+          color="blue"
-        prefixIcon={
+          selected={selectedType === 'Standard'}
-          <IconFileCheck
+          prefixIcon={
-            size={theme.icon.size.lg}
+            <IconFileCheck
-            stroke={theme.icon.stroke.sm}
+              size={theme.icon.size.lg}
-            color={theme.font.color.tertiary}
+              stroke={theme.icon.stroke.sm}
-          />
+              color={theme.font.color.tertiary}
-        }
+            />
-        onClick={() => onTypeSelect?.('Standard')}
+          }
-      />
+          onClick={() => onTypeSelect?.('Standard')}
-      <SettingsObjectTypeCard
+        />
-        title="Custom"
+        <SettingsObjectTypeCard
-        color="orange"
+          title="Custom"
-        selected={selectedType === 'Custom'}
+          color="orange"
-        prefixIcon={
+          selected={selectedType === 'Custom'}
-          <IconBox
+          prefixIcon={
-            size={theme.icon.size.lg}
+            <IconBox
-            stroke={theme.icon.stroke.sm}
+              size={theme.icon.size.lg}
-            color={theme.font.color.tertiary}
+              stroke={theme.icon.stroke.sm}
-          />
+              color={theme.font.color.tertiary}
-        }
+            />
-        onClick={() => onTypeSelect?.('Custom')}
+          }
-      />
+          onClick={() => onTypeSelect?.('Custom')}
-      <SettingsObjectTypeCard
+        />
-        title="Remote"
+        <SettingsObjectTypeCard
-        soon
+          title="Remote"
-        disabled
+          soon
-        color="green"
+          disabled
-        selected={selectedType === 'Remote'}
+          color="green"
-        prefixIcon={
+          selected={selectedType === 'Remote'}
-          <IconDatabase
+          prefixIcon={
-            size={theme.icon.size.lg}
+            <IconDatabase
-            stroke={theme.icon.stroke.sm}
+              size={theme.icon.size.lg}
-            color={theme.font.color.tertiary}
+              stroke={theme.icon.stroke.sm}
-          />
+              color={theme.font.color.tertiary}
-        }
+            />
-      />
+          }
-    </StyledContainer>
+        />
+      </StyledContainer>
+      {selectedType === 'Standard' && <SettingsStandardObjects />}
+    </>
   );
 };

front/src/modules/settings/data-model/new-object/components/SettingsStandardObjects.tsx

@@ -0,0 +1,107 @@
+import { useState } from 'react';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { H2Title } from '@/ui/display/typography/components/H2Title';
+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 { standardObjects } from '../../constants/mockObjects';
+
+const StyledTableRow = styled(TableRow)<{
+  selectedRows?: number[];
+  rowNumber?: number;
+}>`
+  align-items: center;
+  background: ${({ selectedRows, rowNumber, theme }) =>
+    selectedRows?.includes(rowNumber!)
+      ? theme.accent.quaternary
+      : theme.background.primary};
+  grid-template-columns: 36px 132px 240px 98.7px;
+`;
+
+const StyledCheckboxCell = styled(TableCell)`
+  padding: 0 ${({ theme }) => theme.spacing(2)} 0
+    ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledNameTableCell = styled(TableCell)`
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledDescriptionCell = styled.div<{
+  align?: 'left' | 'center' | 'right';
+}>`
+  color: ${({ theme }) => theme.font.color.secondary};
+  justify-content: ${({ align }) =>
+    align === 'right'
+      ? 'flex-end'
+      : align === 'center'
+      ? 'center'
+      : 'flex-start'};
+  overflow: hidden;
+  padding: 0 ${({ theme }) => theme.spacing(2)};
+  padding: 0 ${({ theme }) => theme.spacing(2)};
+  text-align: ${({ align }) => align ?? 'left'};
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const StyledTable = styled(Table)`
+  display: grid;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+export const SettingsStandardObjects = () => {
+  const theme = useTheme();
+  const [selectedRows, setSelectedRows] = useState<number[]>([]);
+
+  return (
+    <>
+      <H2Title
+        title="Available"
+        description="Select one or several standard objects to activate below"
+      />
+      <StyledTable>
+        <StyledTableRow>
+          <TableHeader></TableHeader>
+          <TableHeader>Name</TableHeader>
+          <TableHeader>Description</TableHeader>
+          <TableHeader align="right">Fields</TableHeader>
+        </StyledTableRow>
+        {standardObjects.map((object, rowNumber) => (
+          <StyledTableRow
+            selectedRows={selectedRows}
+            rowNumber={rowNumber}
+            onClick={() => {
+              const indexOfRowClicked = selectedRows.indexOf(rowNumber);
+              if (indexOfRowClicked === -1) {
+                setSelectedRows([...selectedRows, rowNumber]);
+              } else {
+                const newSelectedRows = [...selectedRows];
+                newSelectedRows.splice(indexOfRowClicked, 1);
+                setSelectedRows(newSelectedRows);
+              }
+            }}
+            key={object.name}
+          >
+            <StyledCheckboxCell>
+              <input
+                type="checkbox"
+                checked={selectedRows.includes(rowNumber)}
+              />
+            </StyledCheckboxCell>
+            <StyledNameTableCell>
+              <object.Icon size={theme.icon.size.md} />
+              {object.name}
+            </StyledNameTableCell>
+            <StyledDescriptionCell>{object.description}</StyledDescriptionCell>
+            <TableCell align="right">{object.fields}</TableCell>
+          </StyledTableRow>
+        ))}
+      </StyledTable>
+    </>
+  );
+};

front/src/modules/ui/display/icon/index.ts

@@ -65,6 +65,7 @@ export {
   IconMap,
   IconMinus,
   IconMoneybag,
+  IconMouse2,
   IconNotes,
   IconNumbers,
   IconPencil,