ui: enable remove datadoc from sidebar

querybook/webapp/components/DataDocNavigator/DataDocNavigator.tsx

@@ -5,6 +5,7 @@ import { useRouteMatch } from 'react-router-dom';
 
 import { CreateDataDocButton } from 'components/CreateDataDocButton/CreateDataDocButton';
 import { IDataDoc } from 'const/datadoc';
+import { useDeleteDataDoc } from 'hooks/dataDoc/useDeleteDataDoc';
 import * as dataDocActions from 'redux/dataDoc/action';
 import {
     dataDocsMineSelector,
@@ -258,6 +259,8 @@ const MyDataDocsSection: React.FC<ICommonSectionProps> = (props) => {
     );
     const dataDocs = useSelector(dataDocsMineSelector);
 
+    const handleDeleteDataDoc = useDeleteDataDoc();
+
     return (
         <DataDocNavigatorSection
             sectionHeader="my docs"
@@ -270,6 +273,7 @@ const MyDataDocsSection: React.FC<ICommonSectionProps> = (props) => {
             collapsed={collapsed}
             setCollapsed={setCollapsed}
             allowReorder
+            onRemove={(dataDoc: IDataDoc) => handleDeleteDataDoc(dataDoc.id)}
         />
     );
 };

querybook/webapp/components/DataDocRightSidebar/DeleteDataDocButton.tsx

@@ -1,14 +1,7 @@
 import React from 'react';
-import toast from 'react-hot-toast';
-import { useDispatch } from 'react-redux';
 
-import { ComponentType, ElementType } from 'const/analytics';
 import { TooltipDirection } from 'const/tooltip';
-import { trackClick } from 'lib/analytics';
-import { sendConfirm } from 'lib/querybookUI';
-import { navigateWithinEnv } from 'lib/utils/query-string';
-import * as dataDocActions from 'redux/dataDoc/action';
-import { Dispatch } from 'redux/store/types';
+import { useDeleteDataDoc } from 'hooks/dataDoc/useDeleteDataDoc';
 import { IconButton } from 'ui/Button/IconButton';
 
 export interface IDeleteDataDocButtonProps {
@@ -21,43 +14,14 @@ export interface IDeleteDataDocButtonProps {
 export const DeleteDataDocButton: React.FunctionComponent<
     IDeleteDataDocButtonProps
 > = ({ docId, tooltip = 'Delete', tooltipPos = 'left' }) => {
-    const dispatch: Dispatch = useDispatch();
-
-    const handleDeleteDataDoc = React.useCallback(
-        () =>
-            sendConfirm({
-                header: 'Delete DataDoc?',
-                message: 'This action is irreversible.',
-                onConfirm: () => {
-                    trackClick({
-                        component: ComponentType.DATADOC_PAGE,
-                        element: ElementType.DELETE_DATADOC_BUTTON,
-                    });
-                    toast.promise(
-                        dispatch(dataDocActions.deleteDataDoc(docId)).then(() =>
-                            navigateWithinEnv('/')
-                        ),
-                        {
-                            loading: 'Deleting DataDoc...',
-                            success: 'DataDoc Deleted!',
-                            error: 'Deletion failed',
-                        }
-                    );
-                },
-                confirmColor: 'cancel',
-                cancelColor: 'default',
-                confirmText: 'Confirm Deletion',
-                confirmIcon: 'AlertOctagon',
-            }),
-        [docId]
-    );
+    const handleDeleteDataDoc = useDeleteDataDoc();
 
     return (
         <IconButton
             icon="Trash"
             tooltip={tooltip}
             tooltipPos={tooltipPos}
-            onClick={handleDeleteDataDoc}
+            onClick={() => handleDeleteDataDoc(docId)}
             title="Delete"
         />
     );

querybook/webapp/hooks/dataDoc/useDeleteDataDoc.ts

@@ -0,0 +1,43 @@
+import { useCallback } from 'react';
+import toast from 'react-hot-toast';
+import { useDispatch } from 'react-redux';
+
+import { ComponentType, ElementType } from 'const/analytics';
+import { trackClick } from 'lib/analytics';
+import { sendConfirm } from 'lib/querybookUI';
+import { navigateWithinEnv } from 'lib/utils/query-string';
+import * as dataDocActions from 'redux/dataDoc/action';
+import { Dispatch } from 'redux/store/types';
+
+export function useDeleteDataDoc() {
+    const dispatch: Dispatch = useDispatch();
+
+    return useCallback(
+        (docId) =>
+            sendConfirm({
+                header: 'Delete DataDoc?',
+                message: 'This action is irreversible.',
+                onConfirm: () => {
+                    trackClick({
+                        component: ComponentType.DATADOC_PAGE,
+                        element: ElementType.DELETE_DATADOC_BUTTON,
+                    });
+                    toast.promise(
+                        dispatch(dataDocActions.deleteDataDoc(docId)).then(() =>
+                            navigateWithinEnv('/')
+                        ),
+                        {
+                            loading: 'Deleting DataDoc...',
+                            success: 'DataDoc Deleted!',
+                            error: 'Deletion failed',
+                        }
+                    );
+                },
+                confirmColor: 'cancel',
+                cancelColor: 'default',
+                confirmText: 'Confirm Deletion',
+                confirmIcon: 'AlertOctagon',
+            }),
+        []
+    );
+}