From: Peter Amstutz <peter.amstutz@curii.com>
Date: Thu, 25 Feb 2021 23:04:27 +0000 (-0500)
Subject: 17426: WIP adding hooks to add or replace major UI elements
X-Git-Tag: 2.1.2.1~3^2~10
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/30557563fd5fb704554f4d6109493f673ae7f5e5

17426: WIP adding hooks to add or replace major UI elements

Arvados-DCO-1.1-Signed-off-by: Peter Amstutz <peter.amstutz@curii.com>
---

diff --git a/src/index.tsx b/src/index.tsx
index b32066a4..6f4d9dc2 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -119,7 +119,8 @@ fetchConfig()
                                 ? error.errors[0]
                                 : error.message}`,
                             kind: SnackbarKind.ERROR,
-                            hideDuration: 8000})
+                            hideDuration: 8000
+                        })
                         );
                     }
                 }
diff --git a/src/store/side-panel-tree/side-panel-tree-actions.ts b/src/store/side-panel-tree/side-panel-tree-actions.ts
index ff506103..d0043da2 100644
--- a/src/store/side-panel-tree/side-panel-tree-actions.ts
+++ b/src/store/side-panel-tree/side-panel-tree-actions.ts
@@ -44,12 +44,15 @@ export const getSidePanelTreeBranch = (uuid: string) => (treePicker: TreePicker)
     return [];
 };
 
-const SIDE_PANEL_CATEGORIES = [
+const SIDE_PANEL_CATEGORIES: string[] = [
+    SidePanelTreeCategory.PROJECTS,
+    SidePanelTreeCategory.SHARED_WITH_ME,
     SidePanelTreeCategory.PUBLIC_FAVORITES,
     SidePanelTreeCategory.FAVORITES,
     SidePanelTreeCategory.WORKFLOWS,
     SidePanelTreeCategory.ALL_PROCESSES,
     SidePanelTreeCategory.TRASH,
+    "Blibber blubber"
 ];
 
 export const isSidePanelTreeCategory = (id: string) => SIDE_PANEL_CATEGORIES.some(category => category === id);
@@ -58,20 +61,26 @@ export const initSidePanelTree = () =>
     (dispatch: Dispatch, getState: () => RootState, { authService }: ServiceRepository) => {
         const rootProjectUuid = getUserUuid(getState());
         if (!rootProjectUuid) { return; }
-        const nodes = SIDE_PANEL_CATEGORIES.map(id => initTreeNode({ id, value: id }));
-        const projectsNode = initTreeNode({ id: rootProjectUuid, value: SidePanelTreeCategory.PROJECTS });
-        const sharedNode = initTreeNode({ id: SidePanelTreeCategory.SHARED_WITH_ME, value: SidePanelTreeCategory.SHARED_WITH_ME });
+        const nodes = SIDE_PANEL_CATEGORIES.map(id => {
+            if (id === SidePanelTreeCategory.PROJECTS) {
+                return initTreeNode({ id: rootProjectUuid, value: SidePanelTreeCategory.PROJECTS });
+            } else {
+                return initTreeNode({ id, value: id });
+            }
+        });
         dispatch(treePickerActions.LOAD_TREE_PICKER_NODE_SUCCESS({
             id: '',
             pickerId: SIDE_PANEL_TREE,
-            nodes: [projectsNode, sharedNode, ...nodes]
+            nodes
         }));
         SIDE_PANEL_CATEGORIES.forEach(category => {
-            dispatch(treePickerActions.LOAD_TREE_PICKER_NODE_SUCCESS({
-                id: category,
-                pickerId: SIDE_PANEL_TREE,
-                nodes: []
-            }));
+            if (category !== SidePanelTreeCategory.PROJECTS && category !== SidePanelTreeCategory.SHARED_WITH_ME) {
+                dispatch(treePickerActions.LOAD_TREE_PICKER_NODE_SUCCESS({
+                    id: category,
+                    pickerId: SIDE_PANEL_TREE,
+                    nodes: []
+                }));
+            }
         });
     };
 
diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 9c2a7df8..b1b071f1 100644
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -101,6 +101,7 @@ import { NotFoundPanel } from '../not-found-panel/not-found-panel';
 import { AutoLogout } from '~/views-components/auto-logout/auto-logout';
 import { RestoreCollectionVersionDialog } from '~/views-components/collections-dialog/restore-version-dialog';
 import { WebDavS3InfoDialog } from '~/views-components/webdav-s3-dialog/webdav-s3-dialog';
+import { pluginCenterPanelRoutes, RouteReducer, pluginDialogs } from '~/plugins';
 
 type CssRules = 'root' | 'container' | 'splitter' | 'asidePanel' | 'contentWrapper' | 'content';
 
@@ -149,6 +150,42 @@ const getSplitterInitialSize = () => {
 
 const saveSplitterSize = (size: number) => localStorage.setItem('splitterSize', size.toString());
 
+let routes = <>
+    <Route path={Routes.PROJECTS} component={ProjectPanel} />
+    <Route path={Routes.COLLECTIONS} component={CollectionPanel} />
+    <Route path={Routes.FAVORITES} component={FavoritePanel} />
+    <Route path={Routes.ALL_PROCESSES} component={AllProcessesPanel} />
+    <Route path={Routes.PROCESSES} component={ProcessPanel} />
+    <Route path={Routes.TRASH} component={TrashPanel} />
+    <Route path={Routes.PROCESS_LOGS} component={ProcessLogPanel} />
+    <Route path={Routes.SHARED_WITH_ME} component={SharedWithMePanel} />
+    <Route path={Routes.RUN_PROCESS} component={RunProcessPanel} />
+    <Route path={Routes.WORKFLOWS} component={WorkflowPanel} />
+    <Route path={Routes.SEARCH_RESULTS} component={SearchResultsPanel} />
+    <Route path={Routes.VIRTUAL_MACHINES_USER} component={VirtualMachineUserPanel} />
+    <Route path={Routes.VIRTUAL_MACHINES_ADMIN} component={VirtualMachineAdminPanel} />
+    <Route path={Routes.REPOSITORIES} component={RepositoriesPanel} />
+    <Route path={Routes.SSH_KEYS_USER} component={SshKeyPanel} />
+    <Route path={Routes.SSH_KEYS_ADMIN} component={SshKeyPanel} />
+    <Route path={Routes.SITE_MANAGER} component={SiteManagerPanel} />
+    <Route path={Routes.KEEP_SERVICES} component={KeepServicePanel} />
+    <Route path={Routes.USERS} component={UserPanel} />
+    <Route path={Routes.COMPUTE_NODES} component={ComputeNodePanel} />
+    <Route path={Routes.API_CLIENT_AUTHORIZATIONS} component={ApiClientAuthorizationPanel} />
+    <Route path={Routes.MY_ACCOUNT} component={MyAccountPanel} />
+    <Route path={Routes.GROUPS} component={GroupsPanel} />
+    <Route path={Routes.GROUP_DETAILS} component={GroupDetailsPanel} />
+    <Route path={Routes.LINKS} component={LinkPanel} />
+    <Route path={Routes.PUBLIC_FAVORITES} component={PublicFavoritePanel} />
+    <Route path={Routes.LINK_ACCOUNT} component={LinkAccountPanel} />
+    <Route path={Routes.COLLECTIONS_CONTENT_ADDRESS} component={CollectionsContentAddressPanel} />
+</>;
+
+const reduceRoutesFn: (a: React.ReactElement[],
+    b: RouteReducer) => React.ReactElement[] = (a, b) => b(a);
+
+routes = React.createElement(React.Fragment, null, pluginCenterPanelRoutes.reduce(reduceRoutesFn, React.Children.toArray(routes.props.children)));
+
 export const WorkbenchPanel =
     withStyles(styles)((props: WorkbenchPanelProps) =>
         <Grid container item xs className={props.classes.root}>
@@ -167,34 +204,7 @@ export const WorkbenchPanel =
                         </Grid>
                         <Grid item xs className={props.classes.content}>
                             <Switch>
-                                <Route path={Routes.PROJECTS} component={ProjectPanel} />
-                                <Route path={Routes.COLLECTIONS} component={CollectionPanel} />
-                                <Route path={Routes.FAVORITES} component={FavoritePanel} />
-                                <Route path={Routes.ALL_PROCESSES} component={AllProcessesPanel} />
-                                <Route path={Routes.PROCESSES} component={ProcessPanel} />
-                                <Route path={Routes.TRASH} component={TrashPanel} />
-                                <Route path={Routes.PROCESS_LOGS} component={ProcessLogPanel} />
-                                <Route path={Routes.SHARED_WITH_ME} component={SharedWithMePanel} />
-                                <Route path={Routes.RUN_PROCESS} component={RunProcessPanel} />
-                                <Route path={Routes.WORKFLOWS} component={WorkflowPanel} />
-                                <Route path={Routes.SEARCH_RESULTS} component={SearchResultsPanel} />
-                                <Route path={Routes.VIRTUAL_MACHINES_USER} component={VirtualMachineUserPanel} />
-                                <Route path={Routes.VIRTUAL_MACHINES_ADMIN} component={VirtualMachineAdminPanel} />
-                                <Route path={Routes.REPOSITORIES} component={RepositoriesPanel} />
-                                <Route path={Routes.SSH_KEYS_USER} component={SshKeyPanel} />
-                                <Route path={Routes.SSH_KEYS_ADMIN} component={SshKeyPanel} />
-                                <Route path={Routes.SITE_MANAGER} component={SiteManagerPanel} />
-                                <Route path={Routes.KEEP_SERVICES} component={KeepServicePanel} />
-                                <Route path={Routes.USERS} component={UserPanel} />
-                                <Route path={Routes.COMPUTE_NODES} component={ComputeNodePanel} />
-                                <Route path={Routes.API_CLIENT_AUTHORIZATIONS} component={ApiClientAuthorizationPanel} />
-                                <Route path={Routes.MY_ACCOUNT} component={MyAccountPanel} />
-                                <Route path={Routes.GROUPS} component={GroupsPanel} />
-                                <Route path={Routes.GROUP_DETAILS} component={GroupDetailsPanel} />
-                                <Route path={Routes.LINKS} component={LinkPanel} />
-                                <Route path={Routes.PUBLIC_FAVORITES} component={PublicFavoritePanel} />
-                                <Route path={Routes.LINK_ACCOUNT} component={LinkAccountPanel} />
-                                <Route path={Routes.COLLECTIONS_CONTENT_ADDRESS} component={CollectionsContentAddressPanel} />
+                                {routes}
                                 <Route path={Routes.NO_MATCH} component={NotFoundPanel} />
                             </Switch>
                         </Grid>
@@ -264,5 +274,6 @@ export const WorkbenchPanel =
             <VirtualMachineAttributesDialog />
             <FedLogin />
             <WebDavS3InfoDialog />
+            {pluginDialogs}
         </Grid>
     );