fix(insight): split insight from input [EE-6693] (#11176)

Co-authored-by: testa113 <testa113>

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))), [

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"

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>

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"
+    />
+  );
+}