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

Closes #1785

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