use breadcrumps for history in DirectoryObject.jsx / DirectoryBreadcr…

…umbs.jsx
kopia · Jun 8, 2023 · d931998 · d931998
1 parent 1553935
commit d931998
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 16 deletions.
diff --git a/src/DirectoryBreadcrumbs.jsx b/src/DirectoryBreadcrumbs.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import Button from 'react-bootstrap/Button';
+import Breadcrumb from 'react-bootstrap/Breadcrumb';
 import { useHistory, useLocation } from 'react-router-dom';
-import { GoBackButton } from './uiutil';
+import { OverlayTrigger, Tooltip } from "react-bootstrap";
 
 export function DirectoryBreadcrumbs() {
     const location = useLocation();
@@ -12,17 +12,29 @@ export function DirectoryBreadcrumbs() {
         breadcrumbs.unshift(state)
     }
 
-    return (<>
-            {breadcrumbs.length <= 1 && <GoBackButton onClick={history.goBack}/>}
+    // TODO: get name of "snapshot"!!?? #####
+    // TODO: no tooltip if no OID #####
+    // TODO: enable copying of OID to clipboard #####
+    // TODO: disable / improve wrapping of tooltip #####
+    // TODO: there is some flickering if hovering changes #####
+    // TODO: disable clicking on current breadcrumb item #####
+    return (
+        <Breadcrumb>
+            <Breadcrumb.Item size="sm" variant="secondary" onClick={history.goBack}>Snapshots #####</Breadcrumb.Item>
             {
                 breadcrumbs.map((state, i) => {
                     const index = breadcrumbs.length - i - 1 // revert index
                     return (
-                        <Button key={index} size="sm" variant="outline-secondary" onClick={() => history.go(-index)}
-                                disabled={!index}>{state.label}</Button>
+                        <OverlayTrigger key={index} placement="top" overlay={<Tooltip>OID: {state.oid}</Tooltip>}>
+                            <Breadcrumb.Item size="sm" variant="outline-secondary"
+                                             onClick={() => history.go(-index)}
+                                             active={!index}>
+                                {state.label}
+                            </Breadcrumb.Item>
+                        </OverlayTrigger>
                     );
                 })
             }
-        </>
+        </Breadcrumb>
     )
 }
diff --git a/src/DirectoryObject.jsx b/src/DirectoryObject.jsx
@@ -119,14 +119,7 @@ export class DirectoryObject extends Component {
         }
 
         return <>
-            <Row>
-                <Col xs={12}>
-                    <DirectoryBreadcrumbs />
-                    &nbsp;
-                    <span className="version-info">OID:&nbsp;{this.state.oid}</span>
-                </Col>
-            </Row>
-            <Row><Col>&nbsp;</Col></Row>
+            <DirectoryBreadcrumbs />
             <Row>
                 <Col xs="auto">
                     {this.state.mountInfo.path ? <>

diff --git a/src/uiutil.jsx b/src/uiutil.jsx
@@ -92,7 +92,7 @@ export function rfc3339TimestampForDisplay(n) {
 
 export function objectLink(n, label, prevState) {
     if (n.startsWith("k") || n.startsWith("Ik")) {
-        return { pathname: "/snapshots/dir/" + n, state: { label, prevState } };
+        return { pathname: "/snapshots/dir/" + n, state: { label, oid: n, prevState } };
     }
     return "/api/v1/objects/" + n;
 }