feat: add button to sort columns in view table UI (pinterest#1187)

* feat: add button to sort columns in view table UI * chore: refactor orderBoardByAsc, filter logic
arrowtail-precision · Jan 3, 2024 · 84504fa · 84504fa
1 parent 987ed1d
commit 84504fa
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 12 deletions.
diff --git a/querybook/webapp/components/DataTableViewColumn/DataTableViewColumn.scss b/querybook/webapp/components/DataTableViewColumn/DataTableViewColumn.scss
@@ -0,0 +1,15 @@
+.DataTableViewColumn {
+    .DataTableViewSearchBar {
+        display: flex;
+        background-color: var(--bg-light);
+        border-radius: var(--border-radius-sm);
+
+        > .SearchBar {
+            flex: 1
+        }
+
+        > .OrderByButton {
+            margin-right: 8px;
+        }
+    }
+}
diff --git a/querybook/webapp/components/DataTableViewColumn/DataTableViewColumn.tsx b/querybook/webapp/components/DataTableViewColumn/DataTableViewColumn.tsx
@@ -5,8 +5,10 @@ import { IDataColumn, IDataTable } from 'const/metastore';
 import { Nullable } from 'lib/typescript';
 import { Loading } from 'ui/Loading/Loading';
 import { SearchBar } from 'ui/SearchBar/SearchBar';
+import { OrderByButton } from 'ui/OrderByButton/OrderByButton';
 
 import { DataTableColumnCard } from './DataTableColumnCard';
+import './DataTableViewColumn.scss';
 
 export interface IDataTableViewColumnProps {
     table: IDataTable;
@@ -29,6 +31,8 @@ export const DataTableViewColumn: React.FunctionComponent<
     onEditColumnDescriptionRedirect,
 }) => {
     const [filterString, setFilterString] = React.useState('');
+    const [orderColumnsBy, setOrdeColumnsBy] = React.useState(true);
+    const [orderBoardBy, setOrderBoardBy] = React.useState(false);
 
     const filteredColumns = React.useMemo(() => {
         const filteredCols = tableColumns.filter((column) =>
@@ -39,25 +43,51 @@ export const DataTableViewColumn: React.FunctionComponent<
         if (numberOfRows != null) {
             filteredCols.splice(numberOfRows);
         }
+        if (orderBoardBy) {
+            filteredCols.sort(
+                (a, b) =>
+                    (a.name.toLowerCase() > b.name.toLowerCase() ? 1 : -1) *
+                    (orderColumnsBy ? 1 : -1)
+            );
+        }
         return filteredCols;
-    }, [tableColumns, filterString, numberOfRows]);
+    }, [
+        tableColumns,
+        filterString,
+        numberOfRows,
+        orderColumnsBy,
+        orderBoardBy,
+    ]);
 
     if (!table || !tableColumns) {
         return <Loading />;
     }
 
-    const filterDOM = (
-        <SearchBar
-            value={filterString}
-            onSearch={(s) => setFilterString(s)}
-            isSearching={false}
-            placeholder={`Find Columns`}
-            hasIcon
-            autoFocus
-            className="mb8"
+    const sortButton = (
+        <OrderByButton
+            asc={orderColumnsBy}
+            hideAscToggle={!orderBoardBy}
+            onAscToggle={() => setOrdeColumnsBy((v) => !v)}
+            orderByField="name"
+            orderByFieldSymbol={orderBoardBy ? 'Aa' : 'Default'}
+            onOrderByFieldToggle={() => setOrderBoardBy((v) => !v)}
         />
     );
 
+    const filterDOM = (
+        <div className="DataTableViewSearchBar">
+            <SearchBar
+                value={filterString}
+                onSearch={(s) => setFilterString(s)}
+                isSearching={false}
+                placeholder={`Find Columns`}
+                autoFocus
+                transparent
+            />
+            {sortButton}
+        </div>
+    );
+
     const columnDOM = filteredColumns.map((col) => (
         <DataTableColumnCard
             column={col}

diff --git a/querybook/webapp/ui/OrderByButton/OrderByButton.tsx b/querybook/webapp/ui/OrderByButton/OrderByButton.tsx
@@ -4,6 +4,7 @@ import React, { useMemo } from 'react';
 
 import NOOP from 'lib/utils/noop';
 import { TextToggleButton } from 'ui/Button/TextToggleButton';
+import { TooltipDirection } from 'const/tooltip';
 
 import './OrderByButton.scss';
 
@@ -23,6 +24,7 @@ export interface ISortButtonProps {
     orderByFieldSymbol?: string;
     className?: string;
     hideAscToggle?: boolean;
+    toolTipPos?: TooltipDirection;
 
     onOrderByFieldToggle?: () => void;
     onAscToggle?: () => void;
@@ -34,6 +36,7 @@ export const OrderByButton: React.FC<ISortButtonProps> = ({
     orderByFieldSymbol,
     className,
     hideAscToggle,
+    toolTipPos = 'left',
 
     onOrderByFieldToggle = NOOP,
     onAscToggle = NOOP,
@@ -50,15 +53,15 @@ export const OrderByButton: React.FC<ISortButtonProps> = ({
                     value={false}
                     onChange={onAscToggle}
                     tooltip={asc ? 'Ascending' : 'Descending'}
-                    tooltipPos="left"
+                    tooltipPos={toolTipPos}
                     text={asc ? '↑' : '↓'}
                 />
             )}
             <TextToggleButton
                 value={false}
                 onChange={onOrderByFieldToggle}
                 tooltip={`Order by ${orderByField}`}
-                tooltipPos="left"
+                tooltipPos={toolTipPos}
                 text={buttonSymbol}
             />
         </span>