feat: add active/disabled fields table to New Field - Step 1 page (#2069)

Closes #1785

front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx

@@ -1,7 +1,8 @@
 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 { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 
@@ -9,6 +10,11 @@ import { ObjectFieldItem } from '../../types/ObjectFieldItem';
 
 import { SettingsObjectFieldDataType } from './SettingsObjectFieldDataType';
 
+type SettingsObjectFieldItemTableRowProps = {
+  ActionIcon: IconComponent;
+  fieldItem: ObjectFieldItem;
+};
+
 export const StyledObjectFieldTableRow = styled(TableRow)`
   grid-template-columns: 180px 148px 148px 36px;
 `;
@@ -23,15 +29,10 @@ const StyledIconTableCell = styled(TableCell)`
   padding-right: ${({ theme }) => theme.spacing(1)};
 `;
 
-const StyledIconDotsVertical = styled(IconDotsVertical)`
-  color: ${({ theme }) => theme.font.color.tertiary};
-`;
-
 export const SettingsObjectFieldItemTableRow = ({
+  ActionIcon,
   fieldItem,
-}: {
-  fieldItem: ObjectFieldItem;
-}) => {
+}: SettingsObjectFieldItemTableRowProps) => {
   const theme = useTheme();
 
   return (
@@ -47,10 +48,7 @@ export const SettingsObjectFieldItemTableRow = ({
         <SettingsObjectFieldDataType value={fieldItem.dataType} />
       </TableCell>
       <StyledIconTableCell>
-        <StyledIconDotsVertical
-          size={theme.icon.size.md}
-          stroke={theme.icon.stroke.sm}
-        />
+        <LightIconButton Icon={ActionIcon} accent="tertiary" />
       </StyledIconTableCell>
     </StyledObjectFieldTableRow>
   );

front/src/modules/ui/input/button/components/LightIconButton.tsx

@@ -104,7 +104,7 @@ export const LightIconButton = ({
       size={size}
       active={active}
     >
-      {Icon && <Icon size={theme.icon.size.md} />}
+      {Icon && <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />}
     </StyledButton>
   );
 };

front/src/modules/ui/layout/section/components/Section.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 
 type SectionProps = {
   children: ReactNode;
+  className?: string;
   alignment?: SectionAlignment;
   fullWidth?: boolean;
   fontColor?: SectionFontColor;
@@ -31,11 +32,13 @@ const StyledSection = styled.div<{
 
 export const Section = ({
   children,
+  className,
   alignment = SectionAlignment.Left,
   fullWidth = true,
   fontColor = SectionFontColor.Primary,
 }: SectionProps) => (
   <StyledSection
+    className={className}
     alignment={alignment}
     fullWidth={fullWidth}
     fontColor={fontColor}

front/src/pages/settings/data-model/SettingsObjectDetail.tsx

@@ -14,7 +14,7 @@ import {
   StyledObjectFieldTableRow,
 } from '@/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow';
 import { AppPath } from '@/types/AppPath';
-import { IconPlus, IconSettings } from '@/ui/display/icon';
+import { IconDotsVertical, 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';
@@ -74,6 +74,7 @@ export const SettingsObjectDetail = () => {
               {activeFieldItems.map((fieldItem) => (
                 <SettingsObjectFieldItemTableRow
                   key={fieldItem.name}
+                  ActionIcon={IconDotsVertical}
                   fieldItem={fieldItem}
                 />
               ))}
@@ -83,6 +84,7 @@ export const SettingsObjectDetail = () => {
                 {disabledFieldItems.map((fieldItem) => (
                   <SettingsObjectFieldItemTableRow
                     key={fieldItem.name}
+                    ActionIcon={IconDotsVertical}
                     fieldItem={fieldItem}
                   />
                 ))}

front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx

@@ -1,13 +1,38 @@
 import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
+import styled from '@emotion/styled';
 
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
-import { activeObjectItems } from '@/settings/data-model/constants/mockObjects';
+import {
+  activeFieldItems,
+  activeObjectItems,
+  disabledFieldItems,
+} from '@/settings/data-model/constants/mockObjects';
+import {
+  SettingsObjectFieldItemTableRow,
+  StyledObjectFieldTableRow,
+} from '@/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow';
 import { AppPath } from '@/types/AppPath';
-import { IconSettings } from '@/ui/display/icon';
+import { IconMinus, 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 { Section } from '@/ui/layout/section/components/Section';
+import { Table } from '@/ui/layout/table/components/Table';
+import { TableHeader } from '@/ui/layout/table/components/TableHeader';
+import { TableSection } from '@/ui/layout/table/components/TableSection';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 
+const StyledSection = styled(Section)`
+  display: flex;
+  flex-direction: column;
+`;
+
+const StyledAddCustomFieldButton = styled(Button)`
+  align-self: flex-end;
+  margin-top: ${({ theme }) => theme.spacing(2)};
+`;
+
 export const SettingsObjectNewFieldStep1 = () => {
   const navigate = useNavigate();
   const { pluralObjectName = '' } = useParams();
@@ -32,6 +57,49 @@ export const SettingsObjectNewFieldStep1 = () => {
             { children: 'New Field' },
           ]}
         />
+        <StyledSection>
+          <H2Title
+            title="Check disabled fields"
+            description="Before creating a custom field, check if it already exists in the disabled section."
+          />
+          <Table>
+            <StyledObjectFieldTableRow>
+              <TableHeader>Name</TableHeader>
+              <TableHeader>Field type</TableHeader>
+              <TableHeader>Data type</TableHeader>
+              <TableHeader></TableHeader>
+            </StyledObjectFieldTableRow>
+            <TableSection isInitiallyExpanded={false} title="Active">
+              {activeFieldItems.map((fieldItem) => (
+                <SettingsObjectFieldItemTableRow
+                  key={fieldItem.name}
+                  ActionIcon={IconMinus}
+                  fieldItem={fieldItem}
+                />
+              ))}
+            </TableSection>
+            {!!disabledFieldItems.length && (
+              <TableSection title="Disabled">
+                {disabledFieldItems.map((fieldItem) => (
+                  <SettingsObjectFieldItemTableRow
+                    key={fieldItem.name}
+                    ActionIcon={IconPlus}
+                    fieldItem={fieldItem}
+                  />
+                ))}
+              </TableSection>
+            )}
+          </Table>
+          <StyledAddCustomFieldButton
+            Icon={IconPlus}
+            title="Add Custom Field"
+            size="small"
+            variant="secondary"
+            onClick={() =>
+              navigate(`/settings/objects/${pluralObjectName}/new-field/step-2`)
+            }
+          />
+        </StyledSection>
       </SettingsPageContainer>
     </SubMenuTopBarContainer>
   );