From 438390d3e238b91d84af9c8abeeab4546e6bbaf7 Mon Sep 17 00:00:00 2001
From: Janne Savolainen <janne.savolainen@live.fi>
Date: Thu, 7 Jul 2022 15:11:59 +0300
Subject: [PATCH] Expose reactive way to hide workload overview detail items in
 Extension API

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>
---
 ...e-workloads-overview-details-item.test.tsx | 75 +++++++++++++++++++
 ...-overview-detail-registrator.injectable.ts | 10 ++-
 .../workloads-overview-detail-registration.ts |  7 ++
 3 files changed, 89 insertions(+), 3 deletions(-)
 create mode 100644 src/behaviours/cluster/workloads/overview/extension-api/reactively-hide-workloads-overview-details-item.test.tsx

diff --git a/src/behaviours/cluster/workloads/overview/extension-api/reactively-hide-workloads-overview-details-item.test.tsx b/src/behaviours/cluster/workloads/overview/extension-api/reactively-hide-workloads-overview-details-item.test.tsx
new file mode 100644
index 0000000000..3b02d3dad9
--- /dev/null
+++ b/src/behaviours/cluster/workloads/overview/extension-api/reactively-hide-workloads-overview-details-item.test.tsx
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import type { RenderResult } from "@testing-library/react";
+import type { IObservableValue } from "mobx";
+import { computed, observable, runInAction } from "mobx";
+import React from "react";
+import navigateToWorkloadsOverviewInjectable from "../../../../../common/front-end-routing/routes/cluster/workloads/overview/navigate-to-workloads-overview.injectable";
+import type { ApplicationBuilder } from "../../../../../renderer/components/test-utils/get-application-builder";
+import { getApplicationBuilder } from "../../../../../renderer/components/test-utils/get-application-builder";
+import { getExtensionFakeFor } from "../../../../../renderer/components/test-utils/get-extension-fake";
+
+describe("reactively hide workloads overview details item", () => {
+  let builder: ApplicationBuilder;
+  let rendered: RenderResult;
+  let someObservable: IObservableValue<boolean>;
+
+  beforeEach(async () => {
+    builder = getApplicationBuilder();
+
+    const rendererDi = builder.dis.rendererDi;
+
+    builder.setEnvironmentToClusterFrame();
+
+    const getExtensionFake = getExtensionFakeFor(builder);
+
+    someObservable = observable.box(false);
+
+    const testExtension = getExtensionFake({
+      id: "test-extension-id",
+      name: "test-extension",
+
+      rendererOptions: {
+        kubeWorkloadsOverviewItems: [
+          {
+            components: {
+              Details: () => (
+                <div data-testid="some-workload-overview-detail-item">Some detail component</div>
+              ),
+            },
+
+            visible: computed(() => someObservable.get()),
+          },
+        ],
+      },
+    });
+
+    rendered = await builder.render();
+
+    const navigateToWorkloadsOverview = rendererDi.inject(
+      navigateToWorkloadsOverviewInjectable,
+    );
+
+    navigateToWorkloadsOverview();
+
+    builder.extensions.enable(testExtension);
+  });
+
+  it("does not show the workload overview detail item", () => {
+    const actual = rendered.queryByTestId("some-workload-overview-detail-item");
+
+    expect(actual).not.toBeInTheDocument();
+  });
+
+  it("given item should be shown, shows the workload overview detail item", () => {
+    runInAction(() => {
+      someObservable.set(true);
+    });
+
+    const actual = rendered.queryByTestId("some-workload-overview-detail-item");
+
+    expect(actual).toBeInTheDocument();
+  });
+});
diff --git a/src/renderer/components/+workloads-overview/workload-overview-details/workload-overview-detail-registrator.injectable.ts b/src/renderer/components/+workloads-overview/workload-overview-details/workload-overview-detail-registrator.injectable.ts
index f591c5a200..e82b1f43e5 100644
--- a/src/renderer/components/+workloads-overview/workload-overview-details/workload-overview-detail-registrator.injectable.ts
+++ b/src/renderer/components/+workloads-overview/workload-overview-details/workload-overview-detail-registrator.injectable.ts
@@ -38,9 +38,13 @@ const workloadOverviewDetailRegistratorInjectable = getInjectable({
           instantiate: () => ({
             Component: registration.components.Details,
 
-            enabled: computed(() =>
-              extensionShouldBeEnabledForClusterFrame.value.get(),
-            ),
+            enabled: computed(() => {
+              if (!extensionShouldBeEnabledForClusterFrame.value.get()) {
+                return false;
+              }
+
+              return registration.visible ? registration.visible.get() : true;
+            }),
 
             orderNumber:
               0.5 + (registration.priority ? 100 - registration.priority : 50),
diff --git a/src/renderer/components/+workloads-overview/workloads-overview-detail-registration.ts b/src/renderer/components/+workloads-overview/workloads-overview-detail-registration.ts
index 19e59494da..ab23619b95 100644
--- a/src/renderer/components/+workloads-overview/workloads-overview-detail-registration.ts
+++ b/src/renderer/components/+workloads-overview/workloads-overview-detail-registration.ts
@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import type { IComputedValue } from "mobx";
+
 /**
  * Copyright (c) OpenLens Authors. All rights reserved.
  * Licensed under MIT License. See LICENSE in root directory for more information.
@@ -9,4 +15,5 @@ interface WorkloadsOverviewDetailComponents {
 export interface WorkloadsOverviewDetailRegistration {
   components: WorkloadsOverviewDetailComponents;
   priority?: number;
+  visible?: IComputedValue<boolean>;
 }