feat: do not show disabled fields in table (#2319)

Closes #2309

front/src/modules/metadata/hooks/useFindOneObjectMetadataItem.ts

@@ -18,6 +18,18 @@ import { generateUpdateOneObjectMutation } from '../utils/generateUpdateOneObjec
 
 import { useFindManyObjectMetadataItems } from './useFindManyObjectMetadataItems';
 
+const EMPTY_QUERY = gql`
+  query EmptyQuery {
+    empty
+  }
+`;
+
+const EMPTY_MUTATION = gql`
+  mutation EmptyMutation {
+    empty
+  }
+`;
+
 export const useFindOneObjectMetadataItem = ({
   objectNamePlural,
   objectNameSingular,
@@ -39,81 +51,64 @@ export const useFindOneObjectMetadataItem = ({
     objectMetadataItems.length === 0 ||
     (objectMetadataItems.length > 0 && !foundObjectMetadataItem);
 
+  const activeFields =
+    foundObjectMetadataItem?.fields.filter(({ isActive }) => isActive) ?? [];
+
   const columnDefinitions: ColumnDefinition<FieldMetadata>[] =
-    foundObjectMetadataItem?.fields.map((field, index) =>
+    foundObjectMetadataItem
-      formatMetadataFieldAsColumnDefinition({
+      ? activeFields.map((field, index) =>
-        position: index,
+          formatMetadataFieldAsColumnDefinition({
-        field,
+            position: index,
-        objectMetadataItem: foundObjectMetadataItem,
+            field,
-        icons,
+            objectMetadataItem: foundObjectMetadataItem,
-      }),
+            icons,
-    ) ?? [];
+          }),
+        )
+      : [];
 
-  const filterDefinitions: FilterDefinition[] =
+  const filterDefinitions: FilterDefinition[] = activeFields.map((field) =>
-    foundObjectMetadataItem?.fields.map((field) =>
+    formatMetadataFieldAsFilterDefinition({
-      formatMetadataFieldAsFilterDefinition({
+      field,
-        field,
+      icons,
-        icons,
+    }),
-      }),
+  );
-    ) ?? [];
 
-  const sortDefinitions: SortDefinition[] =
+  const sortDefinitions: SortDefinition[] = activeFields.map((field) =>
-    foundObjectMetadataItem?.fields.map((field) =>
+    formatMetadataFieldAsSortDefinition({
-      formatMetadataFieldAsSortDefinition({
+      field,
-        field,
+      icons,
-        icons,
+    }),
-      }),
+  );
-    ) ?? [];
 
   const findManyQuery = foundObjectMetadataItem
     ? generateFindManyCustomObjectsQuery({
         objectMetadataItem: foundObjectMetadataItem,
       })
-    : gql`
+    : EMPTY_QUERY;
-        query EmptyQuery {
-          empty
-        }
-      `;
 
   const findOneQuery = foundObjectMetadataItem
     ? generateFindOneCustomObjectQuery({
         objectMetadataItem: foundObjectMetadataItem,
       })
-    : gql`
+    : EMPTY_QUERY;
-        query EmptyQuery {
-          empty
-        }
-      `;
 
   const createOneMutation = foundObjectMetadataItem
     ? generateCreateOneObjectMutation({
         objectMetadataItem: foundObjectMetadataItem,
       })
-    : gql`
+    : EMPTY_MUTATION;
-        mutation EmptyMutation {
-          empty
-        }
-      `;
 
   const updateOneMutation = foundObjectMetadataItem
     ? generateUpdateOneObjectMutation({
         objectMetadataItem: foundObjectMetadataItem,
       })
-    : gql`
+    : EMPTY_MUTATION;
-        mutation EmptyMutation {
-          empty
-        }
-      `;
 
   const deleteOneMutation = foundObjectMetadataItem
     ? generateDeleteOneObjectMutation({
         objectMetadataItem: foundObjectMetadataItem,
       })
-    : gql`
+    : EMPTY_MUTATION;
-        mutation EmptyMutation {
-          empty
-        }
-      `;
 
   return {
     foundObjectMetadataItem,

front/src/modules/metadata/utils/formatMetadataFieldAsColumnDefinition.ts

@@ -1,5 +1,7 @@
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
 import { ColumnDefinition } from '@/ui/object/record-table/types/ColumnDefinition';
+import { Field } from '~/generated-metadata/graphql';
 
 import { ObjectMetadataItem } from '../types/ObjectMetadataItem';
 
@@ -12,9 +14,9 @@ export const formatMetadataFieldAsColumnDefinition = ({
   icons,
 }: {
   position: number;
-  field: ObjectMetadataItem['fields'][0];
+  field: Field;
   objectMetadataItem: Omit<ObjectMetadataItem, 'fields'>;
-  icons: Record<string, any>;
+  icons: Record<string, IconComponent>;
 }): ColumnDefinition<FieldMetadata> => ({
   position,
   fieldId: field.id,

front/src/modules/ui/object/record-table/states/selectors/visibleTableColumnsScopedSelector.ts

@@ -1,15 +1,23 @@
 import { selectorFamily } from 'recoil';
 
+import { availableTableColumnsScopedState } from '../availableTableColumnsScopedState';
 import { tableColumnsScopedState } from '../tableColumnsScopedState';
 
 export const visibleTableColumnsScopedSelector = selectorFamily({
   key: 'visibleTableColumnsScopedSelector',
   get:
     (scopeId: string) =>
-    ({ get }) =>
+    ({ get }) => {
-      [
+      const columns = get(tableColumnsScopedState(scopeId));
-        ...get(tableColumnsScopedState(scopeId)).filter(
+      const availableColumnKeys = get(
-          (column) => column.isVisible,
+        availableTableColumnsScopedState(scopeId),
-        ),
+      ).map(({ fieldId }) => fieldId);
-      ].sort((a, b) => a.position - b.position),
+
+      return columns
+        .filter(
+          (column) =>
+            column.isVisible && availableColumnKeys.includes(column.fieldId),
+        )
+        .toSorted((a, b) => a.position - b.position);
+    },
 });