Add gallery file info (#919)

ui/v2.5/src/components/Galleries/GalleryDetails/Gallery.tsx

@@ -10,6 +10,7 @@ import { GalleryDetailPanel } from "./GalleryDetailPanel";
 import { DeleteGalleriesDialog } from "../DeleteGalleriesDialog";
 import { GalleryImagesPanel } from "./GalleryImagesPanel";
 import { GalleryAddPanel } from "./GalleryAddPanel";
+import { GalleryFileInfoPanel } from "./GalleryFileInfoPanel";
 
 interface IGalleryParams {
   id?: string;
@@ -92,13 +93,13 @@ export const Gallery: React.FC = () => {
             <Nav.Item>
               <Nav.Link eventKey="gallery-details-panel">Details</Nav.Link>
             </Nav.Item>
-            {/* {gallery.gallery ? (
+            {gallery.path ? (
               <Nav.Item>
-                <Nav.Link eventKey="gallery-gallery-panel">Gallery</Nav.Link>
+                <Nav.Link eventKey="gallery-file-info-panel">
+                  File Info
+                </Nav.Link>
               </Nav.Item>
-            ) : (
+            ) : undefined}
-              ""
-            )} */}
             <Nav.Item>
               <Nav.Link eventKey="gallery-edit-panel">Edit</Nav.Link>
             </Nav.Item>
@@ -110,13 +111,13 @@ export const Gallery: React.FC = () => {
           <Tab.Pane eventKey="gallery-details-panel" title="Details">
             <GalleryDetailPanel gallery={gallery} />
           </Tab.Pane>
-          {/* {gallery.gallery ? (
+          <Tab.Pane
-            <Tab.Pane eventKey="gallery-gallery-panel" title="Gallery">
+            className="file-info-panel"
-              <GalleryViewer gallery={gallery.gallery} />
+            eventKey="gallery-file-info-panel"
-            </Tab.Pane>
+            title="File Info"
-          ) : (
+          >
-            ""
+            <GalleryFileInfoPanel gallery={gallery} />
-          )} */}
+          </Tab.Pane>
           <Tab.Pane eventKey="gallery-edit-panel" title="Edit">
             <GalleryEditPanel
               isVisible={activeTabKey === "gallery-edit-panel"}

ui/v2.5/src/components/Galleries/GalleryDetails/GalleryFileInfoPanel.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import * as GQL from "src/core/generated-graphql";
+
+interface IGalleryFileInfoPanelProps {
+  gallery: GQL.GalleryDataFragment;
+}
+
+export const GalleryFileInfoPanel: React.FC<IGalleryFileInfoPanelProps> = (
+  props: IGalleryFileInfoPanelProps
+) => {
+  function renderChecksum() {
+    return (
+      <div className="row">
+        <span className="col-4">Checksum</span>
+        <span className="col-8 text-truncate">{props.gallery.checksum}</span>
+      </div>
+    );
+  }
+
+  function renderPath() {
+    const {
+      gallery: { path },
+    } = props;
+    return (
+      <div className="row">
+        <span className="col-4">Path</span>
+        <span className="col-8 text-truncate">
+          <a href={`file://${path}`}>{`file://${props.gallery.path}`}</a>{" "}
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container gallery-file-info">
+      {renderChecksum()}
+      {renderPath()}
+    </div>
+  );
+};