From 4fb437046ccdb0af7f1ec3c426b93f2af04a0767 Mon Sep 17 00:00:00 2001
From: Sharon Yankovich <49753115+yankovs@users.noreply.github.com>
Date: Mon, 15 Jan 2024 14:37:56 +0200
Subject: [PATCH] Make object tabs extendable via plugins (#896)

---
 .../Blob/Views/ShowTextBlobView.tsx           | 57 +++++++++--------
 .../Config/Views/ShowConfigView.tsx           | 53 ++++++++--------
 .../ShowObject/common/ShowObject.tsx          |  2 +-
 .../src/components/Views/ShowSampleView.tsx   | 61 ++++++++++---------
 4 files changed, 91 insertions(+), 82 deletions(-)

diff --git a/mwdb/web/src/components/Blob/Views/ShowTextBlobView.tsx b/mwdb/web/src/components/Blob/Views/ShowTextBlobView.tsx
index 53dc32df9..223eb7686 100644
--- a/mwdb/web/src/components/Blob/Views/ShowTextBlobView.tsx
+++ b/mwdb/web/src/components/Blob/Views/ShowTextBlobView.tsx
@@ -24,6 +24,7 @@ import { TextBlobDetails } from "../common/TextBlobDetails";
 import { TextBlobPreview } from "../common/TextBlobPreview";
 import { BlobDiffAction } from "../common/BlobDiffAction";
 import { ObjectOrConfigOrBlobData } from "@mwdb-web/types/types";
+import { Extendable } from "@mwdb-web/commons/plugins";
 
 export function ShowTextBlobView() {
     const params = useParams();
@@ -46,33 +47,35 @@ export function ShowTextBlobView() {
             headerCaption="Blob details"
             defaultTab="preview"
         >
-            <ObjectTab
-                tab="details"
-                icon={faFingerprint}
-                component={TextBlobDetails}
-                actions={[
-                    <RemoveAction />,
-                    <PushAction />,
-                    <PullAction />,
-                    <BlobDiffAction />,
-                    <FavoriteAction />,
-                    <DownloadAction download={downloadTextBlob} />,
-                ]}
-            />
-            <RelationsTab />
-            <ObjectTab
-                tab="preview"
-                icon={faSearch}
-                component={TextBlobPreview}
-                actions={[
-                    <RemoveAction />,
-                    <PushAction />,
-                    <PullAction />,
-                    <BlobDiffAction />,
-                    <FavoriteAction />,
-                    <DownloadAction download={downloadTextBlob} />,
-                ]}
-            />
+            <Extendable ident="blobTabs">
+                <ObjectTab
+                    tab="details"
+                    icon={faFingerprint}
+                    component={TextBlobDetails}
+                    actions={[
+                        <RemoveAction />,
+                        <PushAction />,
+                        <PullAction />,
+                        <BlobDiffAction />,
+                        <FavoriteAction />,
+                        <DownloadAction download={downloadTextBlob} />,
+                    ]}
+                />
+                <RelationsTab />
+                <ObjectTab
+                    tab="preview"
+                    icon={faSearch}
+                    component={TextBlobPreview}
+                    actions={[
+                        <RemoveAction />,
+                        <PushAction />,
+                        <PullAction />,
+                        <BlobDiffAction />,
+                        <FavoriteAction />,
+                        <DownloadAction download={downloadTextBlob} />,
+                    ]}
+                />
+            </Extendable>
             <LatestConfigTab label="Parsed blob" />
         </ShowObject>
     );
diff --git a/mwdb/web/src/components/Config/Views/ShowConfigView.tsx b/mwdb/web/src/components/Config/Views/ShowConfigView.tsx
index b0a2fe872..174bb741a 100644
--- a/mwdb/web/src/components/Config/Views/ShowConfigView.tsx
+++ b/mwdb/web/src/components/Config/Views/ShowConfigView.tsx
@@ -22,6 +22,7 @@ import { useRemotePath } from "@mwdb-web/commons/remotes";
 import { ConfigDetails } from "../common/ConfigDetails";
 import { ConfigPreview } from "../common/ConfigPreview";
 import { ObjectOrConfigOrBlobData } from "@mwdb-web/types/types";
+import { Extendable } from "@mwdb-web/commons/plugins";
 
 export function ShowConfigView() {
     const params = useParams();
@@ -47,31 +48,33 @@ export function ShowConfigView() {
             headerIcon={faTable}
             headerCaption="Config details"
         >
-            <ObjectTab
-                tab="details"
-                icon={faFingerprint}
-                component={ConfigDetails}
-                actions={[
-                    <RemoveAction />,
-                    <PushAction />,
-                    <PullAction />,
-                    <FavoriteAction />,
-                    <DownloadAction download={downloadTextBlob} />,
-                ]}
-            />
-            <RelationsTab />
-            <ObjectTab
-                tab="preview"
-                icon={faSearch}
-                component={ConfigPreview}
-                actions={[
-                    <RemoveAction />,
-                    <PushAction />,
-                    <PullAction />,
-                    <FavoriteAction />,
-                    <DownloadAction download={downloadTextBlob} />,
-                ]}
-            />
+            <Extendable ident="configTabs">
+                <ObjectTab
+                    tab="details"
+                    icon={faFingerprint}
+                    component={ConfigDetails}
+                    actions={[
+                        <RemoveAction />,
+                        <PushAction />,
+                        <PullAction />,
+                        <FavoriteAction />,
+                        <DownloadAction download={downloadTextBlob} />,
+                    ]}
+                />
+                <RelationsTab />
+                <ObjectTab
+                    tab="preview"
+                    icon={faSearch}
+                    component={ConfigPreview}
+                    actions={[
+                        <RemoveAction />,
+                        <PushAction />,
+                        <PullAction />,
+                        <FavoriteAction />,
+                        <DownloadAction download={downloadTextBlob} />,
+                    ]}
+                />
+            </Extendable>
         </ShowObject>
     );
 }
diff --git a/mwdb/web/src/components/ShowObject/common/ShowObject.tsx b/mwdb/web/src/components/ShowObject/common/ShowObject.tsx
index 0e4f72961..8162bb1c4 100644
--- a/mwdb/web/src/components/ShowObject/common/ShowObject.tsx
+++ b/mwdb/web/src/components/ShowObject/common/ShowObject.tsx
@@ -69,7 +69,7 @@ function objectReducer(state: ObjectStateReducer, action: ObjectActionReducer) {
 
 type Props = {
     ident: string;
-    children: JSX.Element[];
+    children: JSX.Element | JSX.Element[];
     objectType: ObjectType;
     headerIcon: IconDefinition;
     objectId: string;
diff --git a/mwdb/web/src/components/Views/ShowSampleView.tsx b/mwdb/web/src/components/Views/ShowSampleView.tsx
index aee8da2b2..dc21d0fb7 100644
--- a/mwdb/web/src/components/Views/ShowSampleView.tsx
+++ b/mwdb/web/src/components/Views/ShowSampleView.tsx
@@ -27,6 +27,7 @@ import { SampleDetails } from "../SampleDetails";
 import { SamplePreview } from "../SamplePreview";
 import { PreviewSwitchAction } from "../PreviewSwitchAction";
 import { ObjectOrConfigOrBlobData } from "@mwdb-web/types/types";
+import { Extendable } from "@mwdb-web/commons/plugins";
 
 export function ShowSampleView() {
     const api = useContext(APIContext);
@@ -56,35 +57,37 @@ export function ShowSampleView() {
             headerIcon={faFile}
             headerCaption="File details"
         >
-            <ObjectTab
-                tab="details"
-                icon={faFingerprint}
-                component={SampleDetails}
-                actions={[
-                    <RemoveAction />,
-                    <PushAction />,
-                    <PullAction />,
-                    <UploadChildAction />,
-                    <FavoriteAction />,
-                    <ZipAction zip={zipSample} />,
-                    <DownloadAction download={downloadSample} />,
-                ]}
-            />
-            <RelationsTab />
-            <ObjectTab
-                tab="preview"
-                icon={faSearch}
-                component={SamplePreview}
-                actions={[
-                    <PreviewSwitchAction />,
-                    <RemoveAction />,
-                    <PushAction />,
-                    <PullAction />,
-                    <UploadChildAction />,
-                    <FavoriteAction />,
-                    <DownloadAction download={downloadSample} />,
-                ]}
-            />
+            <Extendable ident="sampleTabs">
+                <ObjectTab
+                    tab="details"
+                    icon={faFingerprint}
+                    component={SampleDetails}
+                    actions={[
+                        <RemoveAction />,
+                        <PushAction />,
+                        <PullAction />,
+                        <UploadChildAction />,
+                        <FavoriteAction />,
+                        <ZipAction zip={zipSample} />,
+                        <DownloadAction download={downloadSample} />,
+                    ]}
+                />
+                <RelationsTab />
+                <ObjectTab
+                    tab="preview"
+                    icon={faSearch}
+                    component={SamplePreview}
+                    actions={[
+                        <PreviewSwitchAction />,
+                        <RemoveAction />,
+                        <PushAction />,
+                        <PullAction />,
+                        <UploadChildAction />,
+                        <FavoriteAction />,
+                        <DownloadAction download={downloadSample} />,
+                    ]}
+                />
+            </Extendable>
             <LatestConfigTab label="Static config" />
         </ShowObject>
     );