feature(kubernetes): stack name made optional & add toggle to disable stack in kubernetes [EE-6170] (#10436)

app/react/kubernetes/DeployView/StackName/StackName.tsx

@@ -0,0 +1,84 @@
+import { InsightsBox } from '@@/InsightsBox';
+import { Link } from '@@/Link';
+import { TextTip } from '@@/Tip/TextTip';
+import { Tooltip } from '@@/Tip/Tooltip';
+
+type Props = {
+  stackName: string;
+  setStackName: (name: string) => void;
+  isAdmin?: boolean;
+};
+
+export function StackName({ stackName, setStackName, isAdmin = false }: Props) {
+  const tooltip = (
+    <>
+      You may specify a stack name to label resources that you want to group.
+      This includes Deployments, DaemonSets, StatefulSets and Pods.
+      {isAdmin && (
+        <>
+          <br />
+          You can leave the stack name empty, or even turn off Kubernetes Stacks
+          functionality entirely via{' '}
+          <Link to="portainer.settings" target="_blank">
+            Kubernetes Settings
+          </Link>
+          .
+        </>
+      )}
+    </>
+  );
+
+  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">
+        Enter or select a &apos;stack&apos; name to group multiple deployments
+        together, or else leave empty to ignore.
+      </TextTip>
+      <div className="form-group">
+        <label
+          htmlFor="stack_name"
+          className="col-lg-2 col-sm-3 control-label text-left"
+        >
+          Stack
+          <Tooltip message={tooltip} setHtmlMessage />
+        </label>
+        <div className="col-sm-8">
+          <input
+            type="text"
+            className="form-control"
+            defaultValue={stackName}
+            onChange={(e) => setStackName(e.target.value)}
+            id="stack_name"
+            placeholder="myStack"
+          />
+        </div>
+      </div>
+    </>
+  );
+}

app/react/kubernetes/applications/DetailsView/ApplicationSummaryWidget.tsx

@@ -6,6 +6,8 @@ import { useCurrentStateAndParams } from '@uirouter/react';
 
 import { Authorized } from '@/react/hooks/useUser';
 import { notifyError, notifySuccess } from '@/portainer/services/notifications';
+import { usePublicSettings } from '@/react/portainer/settings/queries';
+import { GlobalDeploymentOptions } from '@/react/portainer/settings/types';
 
 import { DetailsTable } from '@@/DetailsTable';
 import { Badge } from '@@/Badge';
@@ -69,6 +71,11 @@ export function ApplicationSummaryWidget() {
     setApplicationNoteFormValues(applicationNote || '');
   }, [applicationNote]);
 
+  const globalDeploymentOptionsQuery =
+    usePublicSettings<GlobalDeploymentOptions>({
+      select: (settings) => settings.GlobalDeploymentOptions,
+    });
+
   const failedCreateCondition = application?.status?.conditions?.find(
     (condition) => condition.reason === 'FailedCreate'
   );
@@ -117,13 +124,17 @@ export function ApplicationSummaryWidget() {
                       </div>
                     </td>
                   </tr>
-                  <tr>
-                    <td>Stack</td>
-                    <td data-cy="k8sAppDetail-stackName">
-                      {application?.metadata?.labels?.[appStackNameLabel] ||
-                        '-'}
-                    </td>
-                  </tr>
+                  {globalDeploymentOptionsQuery.data &&
+                    !globalDeploymentOptionsQuery.data
+                      .hideStacksFunctionality && (
+                      <tr>
+                        <td>Stack</td>
+                        <td data-cy="k8sAppDetail-stackName">
+                          {application?.metadata?.labels?.[appStackNameLabel] ||
+                            '-'}
+                        </td>
+                      </tr>
+                    )}
                   <tr>
                     <td>Namespace</td>
                     <td>