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