From 7a6c87294883178950f0f79602dacadec633507f Mon Sep 17 00:00:00 2001
From: Ali <83188384+testA113@users.noreply.github.com>
Date: Thu, 15 Feb 2024 10:45:59 +1300
Subject: [PATCH] fix(insight): split insight from input [EE-6693] (#11176)

Co-authored-by: testa113 <testa113>
---
 app/kubernetes/react/components/index.ts      |  5 +++
 app/kubernetes/views/deploy/deploy.html       |  3 ++
 .../DeployView/StackName/StackName.tsx        | 27 ---------------
 .../StackName/StackNameLabelInsight.tsx       | 33 +++++++++++++++++++
 4 files changed, 41 insertions(+), 27 deletions(-)
 create mode 100644 app/react/kubernetes/DeployView/StackName/StackNameLabelInsight.tsx

diff --git a/app/kubernetes/react/components/index.ts b/app/kubernetes/react/components/index.ts
index 61c6b9720..94e8f9394 100644
--- a/app/kubernetes/react/components/index.ts
+++ b/app/kubernetes/react/components/index.ts
@@ -26,6 +26,7 @@ import { YAMLInspector } from '@/react/kubernetes/components/YAMLInspector';
 import { ApplicationsStacksDatatable } from '@/react/kubernetes/applications/ListView/ApplicationsStacksDatatable';
 import { NodesDatatable } from '@/react/kubernetes/cluster/HomeView/NodesDatatable';
 import { StackName } from '@/react/kubernetes/DeployView/StackName/StackName';
+import { StackNameLabelInsight } from '@/react/kubernetes/DeployView/StackName/StackNameLabelInsight';
 import { SecretsFormSection } from '@/react/kubernetes/applications/components/ConfigurationsFormSection/SecretsFormSection';
 import { configurationsValidationSchema } from '@/react/kubernetes/applications/components/ConfigurationsFormSection/configurationValidationSchema';
 import { ConfigMapsFormSection } from '@/react/kubernetes/applications/components/ConfigurationsFormSection/ConfigMapsFormSection';
@@ -144,6 +145,10 @@ export const ngModule = angular
       ['setStackName', 'stackName', 'stacks', 'inputClassName', 'textTip']
     )
   )
+  .component(
+    'stackNameLabelInsight',
+    r2a(withUIRouter(withCurrentUser(StackNameLabelInsight)), [])
+  )
   .component(
     'editYamlFormSection',
     r2a(withUIRouter(withReactQuery(withCurrentUser(EditYamlFormSection))), [
diff --git a/app/kubernetes/views/deploy/deploy.html b/app/kubernetes/views/deploy/deploy.html
index 7a9a6ec7d..01b37d32e 100644
--- a/app/kubernetes/views/deploy/deploy.html
+++ b/app/kubernetes/views/deploy/deploy.html
@@ -86,6 +86,9 @@
                   </div>
                 </div>
 
+                <div class="w-fit mb-4">
+                  <stack-name-label-insight></stack-name-label-insight>
+                </div>
                 <kube-stack-name
                   ng-if="!ctrl.deploymentOptions.hideStacksFunctionality && ctrl.state.BuildMethod !== ctrl.BuildMethods.HELM"
                   stack-name="ctrl.formValues.StackName"
diff --git a/app/react/kubernetes/DeployView/StackName/StackName.tsx b/app/react/kubernetes/DeployView/StackName/StackName.tsx
index d25d1b7a7..8890153b3 100644
--- a/app/react/kubernetes/DeployView/StackName/StackName.tsx
+++ b/app/react/kubernetes/DeployView/StackName/StackName.tsx
@@ -2,7 +2,6 @@ import { useMemo } from 'react';
 
 import { useCurrentUser } from '@/react/hooks/useUser';
 
-import { InsightsBox } from '@@/InsightsBox';
 import { Link } from '@@/Link';
 import { TextTip } from '@@/Tip/TextTip';
 import { Tooltip } from '@@/Tip/Tooltip';
@@ -46,34 +45,8 @@ export function StackName({
     </>
   );
 
-  const insightsBoxContent = (
-    <>
-      The stack field below was previously labelled &apos;Name&apos; but, in
-      fact, it&apos;s always been the stack name (hence the relabelling).
-      {isAdmin && (
-        <>
-          <br />
-          Kubernetes Stacks functionality can be turned off entirely via{' '}
-          <Link to="portainer.settings" target="_blank">
-            Kubernetes Settings
-          </Link>
-          .
-        </>
-      )}
-    </>
-  );
-
   return (
     <>
-      <div className="w-fit mb-4">
-        <InsightsBox
-          type="slim"
-          header="Stack"
-          content={insightsBoxContent}
-          insightCloseId="k8s-stacks-name"
-        />
-      </div>
-
       <TextTip className="mb-4" color="blue">
         {textTip}
       </TextTip>
diff --git a/app/react/kubernetes/DeployView/StackName/StackNameLabelInsight.tsx b/app/react/kubernetes/DeployView/StackName/StackNameLabelInsight.tsx
new file mode 100644
index 000000000..28cafc9b4
--- /dev/null
+++ b/app/react/kubernetes/DeployView/StackName/StackNameLabelInsight.tsx
@@ -0,0 +1,33 @@
+import { useCurrentUser } from '@/react/hooks/useUser';
+
+import { InsightsBox } from '@@/InsightsBox';
+import { Link } from '@@/Link';
+
+export function StackNameLabelInsight() {
+  const { isAdmin } = useCurrentUser();
+  const insightsBoxContent = (
+    <>
+      The stack field below was previously labelled &apos;Name&apos; but, in
+      fact, it&apos;s always been the stack name (hence the relabelling).
+      {isAdmin && (
+        <>
+          <br />
+          Kubernetes Stacks functionality can be turned off entirely via{' '}
+          <Link to="portainer.settings" target="_blank">
+            Kubernetes Settings
+          </Link>
+          .
+        </>
+      )}
+    </>
+  );
+
+  return (
+    <InsightsBox
+      type="slim"
+      header="Stack"
+      content={insightsBoxContent}
+      insightCloseId="k8s-stacks-name"
+    />
+  );
+}