From 66c7af62f69087723a3886e7e4f290d1eb38078c Mon Sep 17 00:00:00 2001
From: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
Date: Thu, 5 Nov 2020 08:18:57 +1100
Subject: [PATCH] Add gallery file info (#919)

---
 .../Galleries/GalleryDetails/Gallery.tsx      | 25 ++++++------
 .../GalleryDetails/GalleryFileInfoPanel.tsx   | 40 +++++++++++++++++++
 2 files changed, 53 insertions(+), 12 deletions(-)
 create mode 100644 ui/v2.5/src/components/Galleries/GalleryDetails/GalleryFileInfoPanel.tsx

diff --git a/ui/v2.5/src/components/Galleries/GalleryDetails/Gallery.tsx b/ui/v2.5/src/components/Galleries/GalleryDetails/Gallery.tsx
index 88eccb37a..9b3db9a12 100644
--- a/ui/v2.5/src/components/Galleries/GalleryDetails/Gallery.tsx
+++ b/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 eventKey="gallery-gallery-panel" title="Gallery">
-              <GalleryViewer gallery={gallery.gallery} />
-            </Tab.Pane>
-          ) : (
-            ""
-          )} */}
+          <Tab.Pane
+            className="file-info-panel"
+            eventKey="gallery-file-info-panel"
+            title="File Info"
+          >
+            <GalleryFileInfoPanel gallery={gallery} />
+          </Tab.Pane>
           <Tab.Pane eventKey="gallery-edit-panel" title="Edit">
             <GalleryEditPanel
               isVisible={activeTabKey === "gallery-edit-panel"}
diff --git a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryFileInfoPanel.tsx b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryFileInfoPanel.tsx
new file mode 100644
index 000000000..9bb00df2c
--- /dev/null
+++ b/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>
+  );
+};