console: data sidebar table search

PR-URL: hasura/graphql-engine-mono#3826
Co-authored-by: Vijay Prasanna <[email protected]>
Co-authored-by: Abhijeet Khangarot <[email protected]>
GitOrigin-RevId: a7de40686c9d3f1551e84aeec376ff143935a97a

Author: 3 people

CHANGELOG.md

@@ -106,6 +106,7 @@ function:
 - server: fix regression where remote relationships would get exposed over Relay, which is unsupported
 - server: add support for customising the GraphQL schema descriptions of table columns in metadata
 - console: fixed an issue where editing both a column's name and its GraphQL field name at the same time caused an error
+- console: enable searching tables within a schema
 - cli: fix inherited roles metadata not being updated when dropping all roles (#7872)
 - cli: add support for customization field in sources metadata (#8292)
 

console/cypress/integration/actions/spec.ts

@@ -352,6 +352,7 @@ export const createActionTransform = () => {
   // give correct body
   clearRequestUrl();
   typeIntoRequestUrl('/{{$body.action.name}}');
+  cy.wait(AWAIT_SHORT);
   typeIntoRequestQueryParams([
     { key: 'id', value: '5' },
     { key: 'name', value: '{{$body.action.name}}' },

console/src/components/Services/Data/DataSubSidebar.js

@@ -304,6 +304,7 @@ const DataSubSidebar = props => {
             currentSchema={currentSchema}
             pathname={pathname}
             databaseLoading={databaseLoading}
+            schemaLoading={schemaLoading}
             preLoadState={preLoadState}
           />
         </div>

console/src/components/Services/Data/TreeView.tsx

@@ -25,6 +25,32 @@ const activeStyle = {
   color: '#fd9540',
 };
 
+const filterItemsBySearch = (searchQuery: string, itemList: SourceItem[]) => {
+  const caseSensitiveResults: SourceItem[] = [];
+  const caseAgnosticResults: SourceItem[] = [];
+  itemList.forEach(item => {
+    if (item.name.search(searchQuery) > -1) {
+      caseSensitiveResults.push(item);
+    } else if (item.name.toLowerCase().search(searchQuery.toLowerCase()) > -1) {
+      caseAgnosticResults.push(item);
+    }
+  });
+
+  return [
+    ...caseSensitiveResults.sort((item1, item2) => {
+      return item1.name.search(searchQuery) > item2.name.search(searchQuery)
+        ? 1
+        : -1;
+    }),
+    ...caseAgnosticResults.sort((item1, item2) => {
+      return item1.name.toLowerCase().search(searchQuery.toLowerCase()) >
+        item2.name.toLowerCase().search(searchQuery.toLowerCase())
+        ? 1
+        : -1;
+    }),
+  ];
+};
+
 type LeafItemsViewProps = {
   item: SourceItem;
   currentSource: string;
@@ -130,6 +156,7 @@ type SchemaItemsViewProps = {
   setActiveSchema: (value: string) => void;
   pathname: string;
   databaseLoading: boolean;
+  schemaLoading: boolean;
 };
 const SchemaItemsView: React.FC<SchemaItemsViewProps> = ({
   item,
@@ -138,14 +165,28 @@ const SchemaItemsView: React.FC<SchemaItemsViewProps> = ({
   setActiveSchema,
   pathname,
   databaseLoading,
+  schemaLoading,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
+
+  const [search, setSearch] = React.useState('');
+  const onSearchChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setSearch(e.target.value);
+    },
+    [search]
+  );
+
   const showActiveStyle =
     pathname === `/data/${currentSource}/schema/${item.name}`;
   useEffect(() => {
     setIsOpen(isActive);
   }, [isActive]);
 
+  const itemSearchResults = search
+    ? filterItemsBySearch(search, item.children || [])
+    : item.children;
+
   return (
     <>
       <div
@@ -169,32 +210,50 @@ const SchemaItemsView: React.FC<SchemaItemsViewProps> = ({
           {item.name}
         </span>
       </div>
-      <ul className={styles.reducedChildPadding}>
-        {isOpen && item.children ? (
-          !databaseLoading ? (
-            item.children.map((child, key) => (
-              <li key={key}>
-                <LeafItemsView
-                  item={child}
-                  currentSource={currentSource}
-                  currentSchema={item.name}
-                  key={key}
-                  pathname={pathname}
+      {isOpen && itemSearchResults ? (
+        !(databaseLoading || schemaLoading) ? (
+          item.children?.length ? (
+            <>
+              <div className="my-1 px-sm">
+                <input
+                  type="text"
+                  onChange={onSearchChange}
+                  className="form-control"
+                  placeholder={`Search tables in ${item.name}....`}
+                  data-test="search-tables"
                 />
-              </li>
-            ))
+              </div>
+              <ul className={styles.reducedChildPadding}>
+                {itemSearchResults.map((child, key) => (
+                  <li key={key}>
+                    <LeafItemsView
+                      item={child}
+                      currentSource={currentSource}
+                      currentSchema={item.name}
+                      key={key}
+                      pathname={pathname}
+                    />
+                  </li>
+                ))}
+              </ul>
+            </>
           ) : (
-            <li>
-              <span
-                className={`${styles.sidebarTablePadding} ${styles.padd_bottom_small}`}
-              >
-                <i className="fa fa-table" />
-                <span className={styles.loaderBar} />
-              </span>
+            <li
+              className="font-normal px-sm"
+              data-test="table-sidebar-no-tables"
+            >
+              <i>No tables or views in this schema</i>
             </li>
           )
-        ) : null}
-      </ul>
+        ) : (
+          <span
+            className={`${styles.sidebarTablePadding} ${styles.padd_bottom_small}`}
+          >
+            <i className="fa fa-table" />
+            <span className={styles.loaderBar} />
+          </span>
+        )
+      ) : null}
     </>
   );
 };
@@ -207,6 +266,7 @@ type DatabaseItemsViewProps = {
   currentSchema: string;
   pathname: string;
   databaseLoading: boolean;
+  schemaLoading: boolean;
 };
 const DatabaseItemsView: React.FC<DatabaseItemsViewProps> = ({
   item,
@@ -216,6 +276,7 @@ const DatabaseItemsView: React.FC<DatabaseItemsViewProps> = ({
   currentSchema,
   pathname,
   databaseLoading,
+  schemaLoading,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const showActiveStyle = [
@@ -265,6 +326,7 @@ const DatabaseItemsView: React.FC<DatabaseItemsViewProps> = ({
                 key={key}
                 pathname={pathname}
                 databaseLoading={databaseLoading}
+                schemaLoading={schemaLoading}
               />
             </li>
           ))
@@ -291,6 +353,7 @@ type TreeViewProps = {
   currentSchema: string;
   pathname: string;
   databaseLoading: boolean;
+  schemaLoading: boolean;
   preLoadState: boolean;
 };
 const TreeView: React.FC<TreeViewProps> = ({
@@ -301,6 +364,7 @@ const TreeView: React.FC<TreeViewProps> = ({
   currentSchema,
   pathname,
   databaseLoading,
+  schemaLoading,
   preLoadState,
 }) => {
   const handleSelectDataSource = (dataSource: string) => {
@@ -348,6 +412,7 @@ const TreeView: React.FC<TreeViewProps> = ({
           currentSchema={currentSchema}
           pathname={pathname}
           databaseLoading={databaseLoading}
+          schemaLoading={schemaLoading}
         />
       ))}
     </div>