Added ability to search objects and fields (#6775)

Closes #6770 https://github.com/user-attachments/assets/e3134389-30d2-48c8-bbca-34209d5ae66d
twentyhq · Aug 29, 2024 · ebfdc6c · ebfdc6c
1 parent 9fafb2c
commit ebfdc6c
Show file tree

Hide file tree

Showing 2 changed files with 126 additions and 56 deletions.
diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldTable.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldTable.tsx
@@ -4,16 +4,18 @@ import {
   StyledObjectFieldTableRow,
 } from '@/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow';
 import { settingsObjectFieldsFamilyState } from '@/settings/data-model/object-details/states/settingsObjectFieldsFamilyState';
+import { TextInput } from '@/ui/input/components/TextInput';
 import { SortableTableHeader } from '@/ui/layout/table/components/SortableTableHeader';
 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 { useSortedArray } from '@/ui/layout/table/hooks/useSortedArray';
 import { TableMetadata } from '@/ui/layout/table/types/TableMetadata';
+import styled from '@emotion/styled';
 import { isNonEmptyArray } from '@sniptt/guards';
-
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useRecoilState } from 'recoil';
+import { IconSearch } from 'twenty-ui';
 import { useMapFieldMetadataItemToSettingsObjectDetailTableItem } from '~/pages/settings/data-model/hooks/useMapFieldMetadataItemToSettingsObjectDetailTableItem';
 import { SettingsObjectDetailTableItem } from '~/pages/settings/data-model/types/SettingsObjectDetailTableItem';
 
@@ -75,6 +77,9 @@ const SETTINGS_OBJECT_DETAIL_TABLE_METADATA_CUSTOM: TableMetadata<SettingsObject
     },
   };
 
+const StyledSearchInput = styled(TextInput)`
+  width: 100%;
+`;
 export type SettingsObjectFieldTableProps = {
   objectMetadataItem: ObjectMetadataItem;
   mode: 'view' | 'new-field';
@@ -85,6 +90,8 @@ export const SettingsObjectFieldTable = ({
   objectMetadataItem,
   mode,
 }: SettingsObjectFieldTableProps) => {
+  const [searchTerm, setSearchTerm] = useState('');
+
   const tableMetadata = objectMetadataItem.isCustom
     ? SETTINGS_OBJECT_DETAIL_TABLE_METADATA_CUSTOM
     : SETTINGS_OBJECT_DETAIL_TABLE_METADATA_STANDARD;
@@ -144,51 +151,75 @@ export const SettingsObjectFieldTable = ({
     tableMetadata,
   );
 
+  const filteredActiveItems = useMemo(
+    () =>
+      sortedActiveObjectSettingsDetailItems.filter(
+        (item) =>
+          item.label.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          item.dataType.toLowerCase().includes(searchTerm.toLowerCase()),
+      ),
+    [sortedActiveObjectSettingsDetailItems, searchTerm],
+  );
+
+  const filteredDisabledItems = useMemo(
+    () =>
+      sortedDisabledObjectSettingsDetailItems.filter(
+        (item) =>
+          item.label.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          item.dataType.toLowerCase().includes(searchTerm.toLowerCase()),
+      ),
+    [sortedDisabledObjectSettingsDetailItems, searchTerm],
+  );
+
   return (
-    <Table>
-      <StyledObjectFieldTableRow>
-        {tableMetadata.fields.map((item) => (
-          <SortableTableHeader
-            key={item.fieldName}
-            fieldName={item.fieldName}
-            label={item.fieldLabel}
-            tableId={tableMetadata.tableId}
-            initialSort={tableMetadata.initialSort}
-          />
-        ))}
-        <TableHeader></TableHeader>
-      </StyledObjectFieldTableRow>
-      {isNonEmptyArray(sortedActiveObjectSettingsDetailItems) && (
-        <TableSection title="Active">
-          {sortedActiveObjectSettingsDetailItems.map(
-            (objectSettingsDetailItem) => (
+    <>
+      <StyledSearchInput
+        LeftIcon={IconSearch}
+        placeholder="Search a field..."
+        value={searchTerm}
+        onChange={setSearchTerm}
+      />
+      <Table>
+        <StyledObjectFieldTableRow>
+          {tableMetadata.fields.map((item) => (
+            <SortableTableHeader
+              key={item.fieldName}
+              fieldName={item.fieldName}
+              label={item.fieldLabel}
+              tableId={tableMetadata.tableId}
+              initialSort={tableMetadata.initialSort}
+            />
+          ))}
+          <TableHeader></TableHeader>
+        </StyledObjectFieldTableRow>
+        {isNonEmptyArray(filteredActiveItems) && (
+          <TableSection title="Active">
+            {filteredActiveItems.map((objectSettingsDetailItem) => (
               <SettingsObjectFieldItemTableRow
                 key={objectSettingsDetailItem.fieldMetadataItem.id}
                 settingsObjectDetailTableItem={objectSettingsDetailItem}
                 status="active"
                 mode={mode}
               />
-            ),
-          )}
-        </TableSection>
-      )}
-      {isNonEmptyArray(sortedDisabledObjectSettingsDetailItems) && (
-        <TableSection
-          isInitiallyExpanded={mode === 'new-field' ? true : false}
-          title="Inactive"
-        >
-          {sortedDisabledObjectSettingsDetailItems.map(
-            (objectSettingsDetailItem) => (
+            ))}
+          </TableSection>
+        )}
+        {isNonEmptyArray(filteredDisabledItems) && (
+          <TableSection
+            isInitiallyExpanded={mode === 'new-field' ? true : false}
+            title="Inactive"
+          >
+            {filteredDisabledItems.map((objectSettingsDetailItem) => (
               <SettingsObjectFieldItemTableRow
                 key={objectSettingsDetailItem.fieldMetadataItem.id}
                 settingsObjectDetailTableItem={objectSettingsDetailItem}
                 status="disabled"
                 mode={mode}
               />
-            ),
-          )}
-        </TableSection>
-      )}
-    </Table>
+            ))}
+          </TableSection>
+        )}
+      </Table>
+    </>
   );
 };
diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx
@@ -1,6 +1,12 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { H2Title, IconChevronRight, IconHierarchy2, IconPlus } from 'twenty-ui';
+import {
+  H2Title,
+  IconChevronRight,
+  IconHierarchy2,
+  IconPlus,
+  IconSearch,
+} from 'twenty-ui';
 
 import { useDeleteOneObjectMetadataItem } from '@/object-metadata/hooks/useDeleteOneObjectMetadataItem';
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
@@ -18,6 +24,7 @@ import { getObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLab
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { Button } from '@/ui/input/button/components/Button';
+import { TextInput } from '@/ui/input/components/TextInput';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
 import { SortableTableHeader } from '@/ui/layout/table/components/SortableTableHeader';
@@ -27,17 +34,19 @@ import { TableSection } from '@/ui/layout/table/components/TableSection';
 import { useSortedArray } from '@/ui/layout/table/hooks/useSortedArray';
 import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
 import { isNonEmptyArray } from '@sniptt/guards';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { SETTINGS_OBJECT_TABLE_METADATA } from '~/pages/settings/data-model/constants/SettingsObjectTableMetadata';
 import { SettingsObjectTableItem } from '~/pages/settings/data-model/types/SettingsObjectTableItem';
 
 const StyledIconChevronRight = styled(IconChevronRight)`
   color: ${({ theme }) => theme.font.color.tertiary};
 `;
-
+const StyledSearchInput = styled(TextInput)`
+  width: 100%;
+`;
 export const SettingsObjects = () => {
   const theme = useTheme();
-
+  const [searchTerm, setSearchTerm] = useState('');
   const { deleteOneObjectMetadataItem } = useDeleteOneObjectMetadataItem();
   const { updateOneObjectMetadataItem } = useUpdateOneObjectMetadataItem();
 
@@ -102,7 +111,25 @@ export const SettingsObjects = () => {
     inactiveObjectSettingsArray,
     SETTINGS_OBJECT_TABLE_METADATA,
   );
+  const filteredActiveObjectSettingsItems = useMemo(
+    () =>
+      sortedActiveObjectSettingsItems.filter(
+        (item) =>
+          item.labelPlural.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          item.objectTypeLabel.toLowerCase().includes(searchTerm.toLowerCase()),
+      ),
+    [sortedActiveObjectSettingsItems, searchTerm],
+  );
 
+  const filteredInactiveObjectSettingsItems = useMemo(
+    () =>
+      sortedInactiveObjectSettingsItems.filter(
+        (item) =>
+          item.labelPlural.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          item.objectTypeLabel.toLowerCase().includes(searchTerm.toLowerCase()),
+      ),
+    [sortedInactiveObjectSettingsItems, searchTerm],
+  );
   return (
     <SubMenuTopBarContainer
       Icon={IconHierarchy2}
@@ -123,6 +150,14 @@ export const SettingsObjects = () => {
           <SettingsObjectCoverImage />
           <Section>
             <H2Title title="Existing objects" />
+
+            <StyledSearchInput
+              LeftIcon={IconSearch}
+              placeholder="Search an object..."
+              value={searchTerm}
+              onChange={setSearchTerm}
+            />
+
             <Table>
               <StyledObjectTableRow>
                 {SETTINGS_OBJECT_TABLE_METADATA.fields.map(
@@ -141,27 +176,31 @@ export const SettingsObjects = () => {
               </StyledObjectTableRow>
               {isNonEmptyArray(sortedActiveObjectSettingsItems) && (
                 <TableSection title="Active">
-                  {sortedActiveObjectSettingsItems.map((objectSettingsItem) => (
-                    <SettingsObjectMetadataItemTableRow
-                      key={objectSettingsItem.objectMetadataItem.namePlural}
-                      objectMetadataItem={objectSettingsItem.objectMetadataItem}
-                      totalObjectCount={objectSettingsItem.totalObjectCount}
-                      action={
-                        <StyledIconChevronRight
-                          size={theme.icon.size.md}
-                          stroke={theme.icon.stroke.sm}
-                        />
-                      }
-                      link={`/settings/objects/${getObjectSlug(
-                        objectSettingsItem.objectMetadataItem,
-                      )}`}
-                    />
-                  ))}
+                  {filteredActiveObjectSettingsItems.map(
+                    (objectSettingsItem) => (
+                      <SettingsObjectMetadataItemTableRow
+                        key={objectSettingsItem.objectMetadataItem.namePlural}
+                        objectMetadataItem={
+                          objectSettingsItem.objectMetadataItem
+                        }
+                        totalObjectCount={objectSettingsItem.totalObjectCount}
+                        action={
+                          <StyledIconChevronRight
+                            size={theme.icon.size.md}
+                            stroke={theme.icon.stroke.sm}
+                          />
+                        }
+                        link={`/settings/objects/${getObjectSlug(
+                          objectSettingsItem.objectMetadataItem,
+                        )}`}
+                      />
+                    ),
+                  )}
                 </TableSection>
               )}
               {isNonEmptyArray(inactiveObjectMetadataItems) && (
                 <TableSection title="Inactive">
-                  {sortedInactiveObjectSettingsItems.map(
+                  {filteredInactiveObjectSettingsItems.map(
                     (objectSettingsItem) => (
                       <SettingsObjectMetadataItemTableRow
                         key={objectSettingsItem.objectMetadataItem.namePlural}