fix(stacks): add app form stacks input [EE-6693] (#11104)

app/kubernetes/react/components/index.ts

@@ -141,7 +141,7 @@ export const ngModule = angular
         ),
         { stackName: 'setStackName' }
       ),
-      ['setStackName', 'stackName', 'stacks', 'inputClassName']
+      ['setStackName', 'stackName', 'stacks', 'inputClassName', 'textTip']
     )
   )
   .component(

app/kubernetes/views/applications/create/createApplication.html

@@ -169,6 +169,7 @@
                 ng-if="!ctrl.deploymentOptions.hideStacksFunctionality && ctrl.state.appType !== ctrl.KubernetesDeploymentTypes.APPLICATION_FORM"
                 stack-name="ctrl.formValues.StackName"
                 set-stack-name="(ctrl.onChangeStackName)"
+                text-tip="'Portainer can automatically bundle multiple applications inside a stack. Enter a name of a new stack or select an existing stack in the list. Leave empty to use the application name.'"
                 stacks="ctrl.stacks"
                 input-class-name="'col-lg-10 col-sm-9'"
               ></kube-stack-name>
@@ -226,9 +227,10 @@
                 <div ng-if="ctrl.formValues.ResourcePool">
                   <!-- #region STACK -->
                   <kube-stack-name
-                    ng-if="ctrl.state.appType !== ctrl.KubernetesDeploymentTypes.APPLICATION_FORM"
+                    ng-if="!ctrl.deploymentOptions.hideStacksFunctionality"
                     stack-name="ctrl.formValues.StackName"
                     set-stack-name="(ctrl.onChangeStackName)"
+                    text-tip="'Portainer can automatically bundle multiple applications inside a stack. Enter a name of a new stack or select an existing stack in the list. Leave empty to use the application name.'"
                     stacks="ctrl.stacks"
                     input-class-name="'col-lg-10 col-sm-9'"
                   ></kube-stack-name>

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

@@ -13,6 +13,7 @@ type Props = {
   setStackName: (name: string) => void;
   stacks?: string[];
   inputClassName?: string;
+  textTip?: string;
 };
 
 export function StackName({
@@ -20,6 +21,7 @@ export function StackName({
   setStackName,
   stacks = [],
   inputClassName,
+  textTip = "Enter or select a 'stack' name to group multiple deployments together, or else leave empty to ignore.",
 }: Props) {
   const { isAdmin } = useCurrentUser();
   const stackResults = useMemo(
@@ -73,8 +75,7 @@ export function StackName({
       </div>
 
       <TextTip className="mb-4" color="blue">
-        Enter or select a &apos;stack&apos; name to group multiple deployments
+        {textTip}
-        together, or else leave empty to ignore.
       </TextTip>
       <div className="form-group">
         <label