Extract breadcrumbs view component

Feature #14102

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/components/breadcrumbs/breadcrumbs.tsx b/src/components/breadcrumbs/breadcrumbs.tsx
index da549dba46757a9932d7655f43c25e56431d4380..444ac75ef51b97c0f1df5ba8cf55b828bbf571c1 100644 (file)
--- a/src/components/breadcrumbs/breadcrumbs.tsx
+++ b/src/components/breadcrumbs/breadcrumbs.tsx
@@ -25,7 +25,7 @@ const styles: StyleRulesCallback<CssRules> = theme => ({
     }
 });
 
-interface BreadcrumbsProps {
+export interface BreadcrumbsProps {
     items: Breadcrumb[];
     onClick: (breadcrumb: Breadcrumb) => void;
     onContextMenu: (event: React.MouseEvent<HTMLElement>, breadcrumb: Breadcrumb) => void;

diff --git a/src/views-components/breadcrumbs/breadcrumbs.ts b/src/views-components/breadcrumbs/breadcrumbs.ts
new file mode 100644 (file)
index 0000000..306b29e
--- /dev/null
+++ b/src/views-components/breadcrumbs/breadcrumbs.ts
@@ -0,0 +1,54 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { connect } from "react-redux";
+import { Breadcrumbs as BreadcrumbsComponent, BreadcrumbsProps } from '~/components/breadcrumbs/breadcrumbs';
+import { RootState } from '~/store/store';
+import { Breadcrumb } from '~/components/breadcrumbs/breadcrumbs';
+import { matchProjectRoute } from '~/routes/routes';
+import { getTreePicker } from '~/store/tree-picker/tree-picker';
+import { SIDE_PANEL_TREE } from '~/store/side-panel-tree/side-panel-tree-actions';
+import { getNodeAncestors, getNode } from '~/models/tree';
+import { Dispatch } from 'redux';
+import { navigateToResource } from '~/store/navigation/navigation-action';
+
+interface ResourceBreadcrumb extends Breadcrumb {
+    uuid: string;
+}
+
+type BreadcrumbsDataProps = Pick<BreadcrumbsProps, 'items'>;
+type BreadcrumbsActionProps = Pick<BreadcrumbsProps, 'onClick' | 'onContextMenu'>;
+
+const memoizedMapStateToProps = () => {
+    let items: ResourceBreadcrumb[] = [];
+    return ({ router, treePicker }: RootState): BreadcrumbsDataProps => {
+        if (router.location) {
+            const projectMatch = matchProjectRoute(location.pathname);
+            const collectionMatch = matchProjectRoute(location.pathname);
+            const uuid = projectMatch && projectMatch.params.id
+                || collectionMatch && collectionMatch.params.id
+                || '';
+            const tree = getTreePicker(SIDE_PANEL_TREE)(treePicker);
+            if (tree) {
+                const ancestors = getNodeAncestors(uuid)(tree);
+                const node = getNode(uuid)(tree);
+                const nodes = node ? [...ancestors, node] : ancestors;
+                items = nodes.map(({ value }) =>
+                    typeof value.value === 'string'
+                        ? { label: value.value, uuid: value.nodeId }
+                        : { label: value.value.name, uuid: value.value.uuid });
+            }
+        }
+        return { items };
+    };
+};
+
+const mapDispatchToProps = (dispatch: Dispatch): BreadcrumbsActionProps => ({
+    onClick: ({ uuid }: ResourceBreadcrumb) => {
+        dispatch<any>(navigateToResource(uuid));
+    },
+    onContextMenu: () => { return; }
+});
+
+export const Breadcrumbs = connect(memoizedMapStateToProps(), mapDispatchToProps)(BreadcrumbsComponent);
\ No newline at end of file

diff --git a/src/views/project-panel/project-panel.tsx b/src/views/project-panel/project-panel.tsx
index 37712c7dcb47f3184bf9a72c8669cd964aa85167..e1c9d83f9bbb53352a6218531a1118879734134c 100644 (file)
--- a/src/views/project-panel/project-panel.tsx
+++ b/src/views/project-panel/project-panel.tsx
@@ -31,6 +31,7 @@ import { collectionCreateActions } from '~/store/collections/creator/collection-
 import { navigateToResource } from '~/store/navigation/navigation-action';
 import { getProperty } from '~/store/properties/properties';
 import { PROJECT_PANEL_CURRENT_UUID } from '~/store/project-panel/project-panel-action';
+import { Breadcrumbs } from '~/views-components/breadcrumbs/breadcrumbs';
 
 type CssRules = 'root' | "toolbar" | "button";
 
@@ -181,6 +182,7 @@ export const ProjectPanel = withStyles(styles)(
                             New project
                         </Button>
                     </div>
+                    <Breadcrumbs />
                     <DataExplorer
                         id={PROJECT_PANEL_ID}
                         onRowClick={this.handleRowClick}

diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 1c11e06aa9e5c6e45d0823bee8cd0cd65f446deb..8d8d937f5c52b4c61205be873bfdf5cfa9f3fb47 100644 (file)
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -41,7 +41,7 @@ import { MoveProjectDialog } from '~/views-components/move-project-dialog/move-p
 import { MoveCollectionDialog } from '~/views-components/move-collection-dialog/move-collection-dialog';
 import { SidePanel } from '~/views-components/side-panel/side-panel';
 import { Routes } from '~/routes/routes';
-import { navigateToResource } from '../../store/navigation/navigation-action';
+import { navigateToResource } from '~/store/navigation/navigation-action';
 
 const APP_BAR_HEIGHT = 100;