Add the ability to order board in doc nav

pinterest · Dec 18, 2020 · 611d926 · 611d926
1 parent 12e2297
commit 611d926
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 6 deletions.
diff --git a/datahub/webapp/components/DataDocNavigator/DataDocNavigatorBoardSection.tsx b/datahub/webapp/components/DataDocNavigator/DataDocNavigatorBoardSection.tsx
@@ -4,7 +4,12 @@ import classNames from 'classnames';
 import { useDrop } from 'react-dnd';
 
 import { IDataDoc, emptyDataDocTitleMessage } from 'const/datadoc';
-import { BoardItemType } from 'const/board';
+import {
+    BoardItemType,
+    BoardOrderBy,
+    BoardOrderToDescription,
+    BoardOrderToTitle,
+} from 'const/board';
 
 import { BoardCreateUpdateModal } from 'components/BoardCreateUpdateModal/BoardCreateUpdateModal';
 import { getWithinEnvUrl } from 'lib/utils/query-string';
@@ -21,6 +26,7 @@ import {
 import { setDataDocNavBoard } from 'redux/dataHubUI/action';
 import { dataDocNavBoardOpenSelector } from 'redux/dataHubUI/selector';
 import { Dispatch, IStoreState } from 'redux/store/types';
+import { getEnumEntries } from 'lib/typescript';
 
 import { IconButton } from 'ui/Button/IconButton';
 import { LoadingIcon } from 'ui/Loading/Loading';
@@ -34,13 +40,17 @@ import { IDragItem } from 'ui/DraggableList/types';
 
 import { BoardDraggableType, DataDocDraggableType } from './navigatorConst';
 import './DataDocNavigatorBoardSection.scss';
+import { TextToggleButton } from 'ui/Button/TextToggleButton';
 
 interface INavigatorBoardSectionProps {
     selectedDocId: number;
     collapsed: boolean;
     setCollapsed: (v: boolean) => any;
     filterString: string;
 }
+
+const BoardOrderByOptions = getEnumEntries(BoardOrderBy);
+
 export const DataDocNavigatorBoardSection: React.FC<INavigatorBoardSectionProps> = ({
     selectedDocId,
     collapsed,
@@ -53,11 +63,27 @@ export const DataDocNavigatorBoardSection: React.FC<INavigatorBoardSectionProps>
     ]);
 
     const [showCreateModal, setShowCreateModal] = useState(false);
-    const boards = useSelector(myBoardsSelector);
     const boardItemById = useSelector(
         (state: IStoreState) => state.board.boardItemById
     );
 
+    const [orderBoardBy, setOrderBoardBy] = useState(BoardOrderBy.updatedAt);
+    const unorderedboards = useSelector(myBoardsSelector);
+    const boards = useMemo(
+        () =>
+            orderBoardBy === BoardOrderBy.alphabetical
+                ? [...unorderedboards].sort((a, b) =>
+                      a.name.localeCompare(b.name)
+                  )
+                : orderBoardBy === BoardOrderBy.createdAt
+                ? [...unorderedboards].sort(
+                      (a, b) => b.created_at - a.created_at
+                  )
+                : unorderedboards, // order by updated at by default,
+        [unorderedboards, orderBoardBy]
+    );
+    const showBoardOrderBy = boards.length > 1;
+
     const dispatch: Dispatch = useDispatch();
     useEffect(() => {
         if (!collapsed && boards.length === 0) {
@@ -123,6 +149,24 @@ export const DataDocNavigatorBoardSection: React.FC<INavigatorBoardSectionProps>
             </div>
 
             <LevelItem>
+                {showBoardOrderBy ? (
+                    <TextToggleButton
+                        value={false}
+                        onChange={() =>
+                            setOrderBoardBy(
+                                (oldValue) =>
+                                    BoardOrderByOptions[
+                                        (Number(oldValue) + 1) %
+                                            BoardOrderByOptions.length
+                                    ][1] as BoardOrderBy
+                            )
+                        }
+                        tooltip={`Order By ${BoardOrderToDescription[orderBoardBy]}`}
+                        tooltipPos="left"
+                        text={BoardOrderToTitle[orderBoardBy]}
+                    />
+                ) : null}
+
                 <IconButton
                     icon="plus"
                     onClick={() => setShowCreateModal(true)}

diff --git a/datahub/webapp/const/board.ts b/datahub/webapp/const/board.ts
@@ -37,3 +37,19 @@ export interface IBoardItem {
 }
 
 export type BoardItemType = 'table' | 'data_doc';
+
+export enum BoardOrderBy {
+    alphabetical = 0,
+    createdAt,
+    updatedAt,
+}
+export const BoardOrderToDescription = {
+    [BoardOrderBy.alphabetical]: 'Alphabetical',
+    [BoardOrderBy.createdAt]: 'Created At',
+    [BoardOrderBy.updatedAt]: 'Last Updated',
+};
+export const BoardOrderToTitle = {
+    [BoardOrderBy.alphabetical]: '↓Aa',
+    [BoardOrderBy.createdAt]: '↑C',
+    [BoardOrderBy.updatedAt]: '↑U',
+};
diff --git a/datahub/webapp/lib/typescript.ts b/datahub/webapp/lib/typescript.ts
@@ -6,11 +6,11 @@ export type HTMLElementEvent<T extends HTMLElement> = Event & {
     // currentTarget: T;
 };
 
-export function getEnumEntries(
-    enumDefObjectType: Record<string, unknown>
-): Array<[string, string | number]> {
+export function getEnumEntries<T>(
+    enumDefObjectType: Record<string, T>
+): Array<[string, T]> {
     // Somehow Enum is not the same as Record<string, string | number>
-    const enumDef = enumDefObjectType as Record<string, string | number>;
+    const enumDef = enumDefObjectType as Record<string, T>;
     return Object.entries(enumDef).filter(([name]) => isNaN(name as any));
 }