feat: Make exact table search result auto show up (#1106)

* feat: Make exact table search result auto show up * do not let user double select * Mix exact match and user selected table together * also incorporate filters into logic
pinterest · Dec 20, 2022 · d543644 · d543644
1 parent 03ccdb5
commit d543644
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 11 deletions.
diff --git a/querybook/webapp/components/DataDocSchemaNavigator/DataDocSchemaNavigator.scss b/querybook/webapp/components/DataDocSchemaNavigator/DataDocSchemaNavigator.scss
@@ -8,10 +8,16 @@
         max-height: 80%;
         box-shadow: var(--box-shadow-sm);
 
-        .DataTableViewMini {
+        > .DataTableViewMini-wrapper {
             border-top: var(--border);
             height: 100%;
-            margin-left: 8px;
+            margin-left: 4px;
+            display: flex;
+            flex-direction: column;
+
+            .Message {
+                margin: 0;
+            }
         }
     }
 }
diff --git a/querybook/webapp/components/DataDocSchemaNavigator/DataDocSchemaNavigator.tsx b/querybook/webapp/components/DataDocSchemaNavigator/DataDocSchemaNavigator.tsx
@@ -1,16 +1,25 @@
 import Resizable from 're-resizable';
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { DataTableNavigator } from 'components/DataTableNavigator/DataTableNavigator';
 import { DataTableViewMini } from 'components/DataTableViewMini/DataTableViewMini';
+import { useExactMatchTableId } from 'hooks/table/useExactMatchTableId';
 import { enableResizable } from 'lib/utils';
 import { getCurrentEnv } from 'lib/utils/query-string';
 import { FullHeight } from 'ui/FullHeight/FullHeight';
+import { Message } from 'ui/Message/Message';
 
 import './DataDocSchemaNavigator.scss';
 
 export const DataDocSchemaNavigator: React.FunctionComponent = () => {
     const [tableId, setTableId] = React.useState<number>(null);
+    const exactMatchId = useExactMatchTableId();
+
+    useEffect(() => {
+        if (exactMatchId) {
+            setTableId(exactMatchId);
+        }
+    }, [exactMatchId]);
 
     const schemaPanel = (
         <DataTableNavigator
@@ -24,28 +33,41 @@ export const DataDocSchemaNavigator: React.FunctionComponent = () => {
             selectedTableId={tableId}
         />
     );
-    const tableView = tableId && (
+
+    const tableViewDOM = tableId ? (
+        <div className="DataTableViewMini-wrapper">
+            {tableId === exactMatchId && (
+                <div className="p8">
+                    <Message type="success" size="small">
+                        Exact table match found.
+                    </Message>
+                </div>
+            )}
+
+            <DataTableViewMini
+                tableId={tableId}
+                onHide={() => setTableId(null)}
+            />
+        </div>
+    ) : null;
+
+    const tableViewContainer = tableViewDOM && (
         <Resizable
             className="schema-info-panel"
             defaultSize={{
                 width: '100%',
                 height: '600px',
             }}
             enable={enableResizable({ top: true, bottom: true })}
-            // minHeight={'200px'}
-            // maxHeight={'900px'}
         >
-            <DataTableViewMini
-                tableId={tableId}
-                onHide={() => setTableId(null)}
-            />
+            {tableViewDOM}
         </Resizable>
     );
 
     const contentDOM = (
         <FullHeight flex="column" className="DataDocSchemaNavigator">
             {schemaPanel}
-            {tableView}
+            {tableViewContainer}
         </FullHeight>
     );
 

diff --git a/querybook/webapp/hooks/table/useExactMatchTableId.ts b/querybook/webapp/hooks/table/useExactMatchTableId.ts
@@ -0,0 +1,42 @@
+import { useShallowSelector } from 'hooks/redux/useShallowSelector';
+import { useMemo } from 'react';
+import { IStoreState } from 'redux/store/types';
+
+export function useExactMatchTableId() {
+    const { dataTables, searchString, searchFilters } = useShallowSelector(
+        (state: IStoreState) => ({
+            dataTables: state.dataTableSearch.results,
+            searchString: state.dataTableSearch.searchString,
+            searchFilters: state.dataTableSearch.searchFilters,
+        })
+    );
+
+    const [searchStringSchema, searchStringTable] = useMemo(() => {
+        const trimmedStr = searchString.trim();
+        const separatedStrs = trimmedStr.split('.');
+
+        if (separatedStrs.length > 2) {
+            return [null, null];
+        }
+
+        if (separatedStrs.length === 1) {
+            return [searchFilters.schema, separatedStrs[0]];
+        } else if (separatedStrs.length === 2) {
+            return separatedStrs;
+        }
+    }, [searchString, searchFilters]);
+
+    const exactMatchTableId = useMemo(() => {
+        if (!searchStringSchema || !searchStringTable) {
+            return null;
+        }
+
+        return dataTables.find(
+            (table) =>
+                table.name === searchStringTable &&
+                table.schema === searchStringSchema
+        )?.id;
+    }, [searchStringSchema, searchStringTable, dataTables]);
+
+    return exactMatchTableId;
+}