feat: activate standard objects in New Object page (#2232)

* feat: activate standard objects in New Object page Closes #2010, Closes #2173 * Pagination limit = 1000 * Various fixes --------- Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2023-10-27 15:46:29 +02:00
parent ec3327ca81
commit 3c6ce75606
29 changed files with 470 additions and 343 deletions
--- a/front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx
+++ b/front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx
@ -3,12 +3,12 @@ import { Select } from '@/ui/input/components/Select';
 import { Section } from '@/ui/layout/section/components/Section';

 import { dataTypes } from '../constants/dataTypes';
-import { ObjectFieldDataType } from '../types/ObjectFieldDataType';
+import { MetadataFieldDataType } from '../types/ObjectFieldDataType';

 type SettingsObjectFieldTypeSelectSectionProps = {
  disabled?: boolean;
-  onChange?: (value: ObjectFieldDataType) => void;
-  type: ObjectFieldDataType;
+  onChange?: (value: MetadataFieldDataType) => void;
+  type: MetadataFieldDataType;
 };

 // TODO: remove "relation" type for now, add it back when the backend is ready.
@ -31,7 +31,7 @@ export const SettingsObjectFieldTypeSelectSection = ({
      onChange={onChange}
      options={Object.entries(dataTypesWithoutRelation).map(
        ([key, dataType]) => ({
-          value: key as ObjectFieldDataType,
+          value: key as MetadataFieldDataType,
          ...dataType,
        }),
      )}
--- a/front/src/modules/settings/data-model/constants/dataTypes.ts
+++ b/front/src/modules/settings/data-model/constants/dataTypes.ts
@ -7,10 +7,10 @@ import {
 } from '@/ui/display/icon';
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';

-import { ObjectFieldDataType } from '../types/ObjectFieldDataType';
+import { MetadataFieldDataType } from '../types/ObjectFieldDataType';

 export const dataTypes: Record<
-  ObjectFieldDataType,
+  MetadataFieldDataType,
  { label: string; Icon: IconComponent }
 > = {
  number: { label: 'Number', Icon: IconNumbers },
--- a/front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectItemTableRow.tsx
+++ b/front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectItemTableRow.tsx
@ -0,0 +1,65 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { MetadataObject } from '@/metadata/types/MetadataObject';
+import { Checkbox } from '@/ui/input/components/Checkbox';
+import { useLazyLoadIcon } from '@/ui/input/hooks/useLazyLoadIcon';
+import { TableCell } from '@/ui/layout/table/components/TableCell';
+import { TableRow } from '@/ui/layout/table/components/TableRow';
+
+type SettingsAvailableStandardObjectItemTableRowProps = {
+  isSelected?: boolean;
+  objectItem: MetadataObject;
+  onClick?: () => void;
+};
+
+export const StyledAvailableStandardObjectTableRow = styled(TableRow)`
+  grid-template-columns: 28px 148px 256px 80px;
+`;
+
+const StyledCheckboxTableCell = styled(TableCell)`
+  justify-content: center;
+  padding: 0;
+  padding-left: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledNameTableCell = styled(TableCell)`
+  color: ${({ theme }) => theme.font.color.primary};
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledDescription = styled.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+export const SettingsAvailableStandardObjectItemTableRow = ({
+  isSelected,
+  objectItem,
+  onClick,
+}: SettingsAvailableStandardObjectItemTableRowProps) => {
+  const theme = useTheme();
+
+  const { Icon } = useLazyLoadIcon(objectItem.icon ?? '');
+
+  return (
+    <StyledAvailableStandardObjectTableRow
+      key={objectItem.namePlural}
+      isSelected={isSelected}
+      onClick={onClick}
+    >
+      <StyledCheckboxTableCell>
+        <Checkbox checked={!!isSelected} />
+      </StyledCheckboxTableCell>
+      <StyledNameTableCell>
+        {!!Icon && <Icon size={theme.icon.size.md} />}
+        {objectItem.labelPlural}
+      </StyledNameTableCell>
+      <TableCell>
+        <StyledDescription>{objectItem.description}</StyledDescription>
+      </TableCell>
+      <TableCell align="right">{objectItem.fields.length}</TableCell>
+    </StyledAvailableStandardObjectTableRow>
+  );
+};
--- a/front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectsSection.tsx
+++ b/front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectsSection.tsx
@ -0,0 +1,53 @@
+import { MetadataObject } from '@/metadata/types/MetadataObject';
+import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { Section } from '@/ui/layout/section/components/Section';
+import { Table } from '@/ui/layout/table/components/Table';
+import { TableBody } from '@/ui/layout/table/components/TableBody';
+import { TableHeader } from '@/ui/layout/table/components/TableHeader';
+
+import {
+  SettingsAvailableStandardObjectItemTableRow,
+  StyledAvailableStandardObjectTableRow,
+} from './SettingsAvailableStandardObjectItemTableRow';
+
+type SettingsAvailableStandardObjectsSectionProps = {
+  objectItems: MetadataObject[];
+  onChange: (selectedIds: Record<string, boolean>) => void;
+  selectedIds: Record<string, boolean>;
+};
+
+export const SettingsAvailableStandardObjectsSection = ({
+  objectItems,
+  onChange,
+  selectedIds,
+}: SettingsAvailableStandardObjectsSectionProps) => (
+  <Section>
+    <H2Title
+      title="Available"
+      description="Select one or several standard objects to activate below"
+    />
+    <Table>
+      <StyledAvailableStandardObjectTableRow>
+        <TableHeader></TableHeader>
+        <TableHeader>Name</TableHeader>
+        <TableHeader>Description</TableHeader>
+        <TableHeader align="right">Fields</TableHeader>
+      </StyledAvailableStandardObjectTableRow>
+      <TableBody>
+        {objectItems.map((objectItem) => (
+          <SettingsAvailableStandardObjectItemTableRow
+            key={objectItem.id}
+            isSelected={selectedIds[objectItem.id]}
+            objectItem={objectItem}
+            onClick={() =>
+              onChange({
+                ...selectedIds,
+                [objectItem.id]: !selectedIds[objectItem.id],
+              })
+            }
+          />
+        ))}
+      </TableBody>
+    </Table>
+  </Section>
+);
--- a/front/src/modules/settings/data-model/new-object/components/SettingsNewObjectType.tsx
+++ b/front/src/modules/settings/data-model/new-object/components/SettingsNewObjectType.tsx
@ -4,7 +4,6 @@ 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';

@ -17,8 +16,6 @@ const StyledContainer = styled.div`
  display: flex;
  flex-direction: row;
  gap: ${({ theme }) => theme.spacing(2)};
-  margin-bottom: ${({ theme }) => theme.spacing(8)};
-  width: 100%;
 `;

 export const SettingsNewObjectType = ({
@ -27,50 +24,47 @@ export const SettingsNewObjectType = ({
 }: SettingsNewObjectTypeProps) => {
  const theme = useTheme();
  return (
-    <>
-      <StyledContainer>
-        <SettingsObjectTypeCard
-          title={'Standard'}
-          color="blue"
-          selected={selectedType === 'Standard'}
-          prefixIcon={
-            <IconFileCheck
-              size={theme.icon.size.lg}
-              stroke={theme.icon.stroke.sm}
-              color={theme.font.color.tertiary}
-            />
-          }
-          onClick={() => onTypeSelect?.('Standard')}
-        />
-        <SettingsObjectTypeCard
-          title="Custom"
-          color="orange"
-          selected={selectedType === 'Custom'}
-          prefixIcon={
-            <IconBox
-              size={theme.icon.size.lg}
-              stroke={theme.icon.stroke.sm}
-              color={theme.font.color.tertiary}
-            />
-          }
-          onClick={() => onTypeSelect?.('Custom')}
-        />
-        <SettingsObjectTypeCard
-          title="Remote"
-          soon
-          disabled
-          color="green"
-          selected={selectedType === 'Remote'}
-          prefixIcon={
-            <IconDatabase
-              size={theme.icon.size.lg}
-              stroke={theme.icon.stroke.sm}
-              color={theme.font.color.tertiary}
-            />
-          }
-        />
-      </StyledContainer>
-      {selectedType === 'Standard' && <SettingsStandardObjects />}
-    </>
+    <StyledContainer>
+      <SettingsObjectTypeCard
+        title={'Standard'}
+        color="blue"
+        selected={selectedType === 'Standard'}
+        prefixIcon={
+          <IconFileCheck
+            size={theme.icon.size.lg}
+            stroke={theme.icon.stroke.sm}
+            color={theme.font.color.tertiary}
+          />
+        }
+        onClick={() => onTypeSelect?.('Standard')}
+      />
+      <SettingsObjectTypeCard
+        title="Custom"
+        color="orange"
+        selected={selectedType === 'Custom'}
+        prefixIcon={
+          <IconBox
+            size={theme.icon.size.lg}
+            stroke={theme.icon.stroke.sm}
+            color={theme.font.color.tertiary}
+          />
+        }
+        onClick={() => onTypeSelect?.('Custom')}
+      />
+      <SettingsObjectTypeCard
+        title="Remote"
+        soon
+        disabled
+        color="green"
+        selected={selectedType === 'Remote'}
+        prefixIcon={
+          <IconDatabase
+            size={theme.icon.size.lg}
+            stroke={theme.icon.stroke.sm}
+            color={theme.font.color.tertiary}
+          />
+        }
+      />
+    </StyledContainer>
  );
 };
--- a/front/src/modules/settings/data-model/new-object/components/SettingsStandardObjects.tsx
+++ b/front/src/modules/settings/data-model/new-object/components/SettingsStandardObjects.tsx
@ -1,107 +0,0 @@
-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>
-    </>
-  );
-};
--- a/front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx
+++ b/front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx
@ -2,9 +2,9 @@ import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';

 import { dataTypes } from '../../constants/dataTypes';
-import { ObjectFieldDataType } from '../../types/ObjectFieldDataType';
+import { MetadataFieldDataType } from '../../types/ObjectFieldDataType';

-const StyledDataType = styled.div<{ value: ObjectFieldDataType }>`
+const StyledDataType = styled.div<{ value: MetadataFieldDataType }>`
  align-items: center;
  border: 1px solid transparent;
  border-radius: ${({ theme }) => theme.border.radius.sm};
@ -24,7 +24,7 @@ const StyledDataType = styled.div<{ value: ObjectFieldDataType }>`
 `;

 type SettingsObjectFieldDataTypeProps = {
-  value: ObjectFieldDataType;
+  value: MetadataFieldDataType;
 };

 export const SettingsObjectFieldDataType = ({
--- a/front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
+++ b/front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
@ -7,7 +7,7 @@ import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { Field } from '~/generated-metadata/graphql';

-import { ObjectFieldDataType } from '../../types/ObjectFieldDataType';
+import { MetadataFieldDataType } from '../../types/ObjectFieldDataType';

 import { SettingsObjectFieldDataType } from './SettingsObjectFieldDataType';

@ -58,7 +58,7 @@ export const SettingsObjectFieldItemTableRow = ({
      <TableCell>{fieldItem.isCustom ? 'Custom' : 'Standard'}</TableCell>
      <TableCell>
        <SettingsObjectFieldDataType
-          value={fieldItem.type as ObjectFieldDataType}
+          value={fieldItem.type as MetadataFieldDataType}
        />
      </TableCell>
      <StyledIconTableCell>{ActionIcon}</StyledIconTableCell>
--- a/front/src/modules/settings/data-model/types/ObjectFieldDataType.ts
+++ b/front/src/modules/settings/data-model/types/ObjectFieldDataType.ts
@ -1,4 +1,4 @@
-export type ObjectFieldDataType =
+export type MetadataFieldDataType =
  | 'boolean'
  | 'number'
  | 'relation'