From 56ae19c5ab15b37f7a5916bb7c65d596aa4e8c7a Mon Sep 17 00:00:00 2001
From: Ali <83188384+testA113@users.noreply.github.com>
Date: Wed, 14 Feb 2024 09:00:51 +1300
Subject: [PATCH] fix(stacks): add app form stacks input [EE-6693] (#11104)

---
 app/kubernetes/react/components/index.ts                     | 2 +-
 .../views/applications/create/createApplication.html         | 4 +++-
 app/react/kubernetes/DeployView/StackName/StackName.tsx      | 5 +++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/kubernetes/react/components/index.ts b/app/kubernetes/react/components/index.ts
index e04ec5000..61c6b9720 100644
--- a/app/kubernetes/react/components/index.ts
+++ b/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(
diff --git a/app/kubernetes/views/applications/create/createApplication.html b/app/kubernetes/views/applications/create/createApplication.html
index 0efd94e0f..d045f654a 100644
--- a/app/kubernetes/views/applications/create/createApplication.html
+++ b/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>
diff --git a/app/react/kubernetes/DeployView/StackName/StackName.tsx b/app/react/kubernetes/DeployView/StackName/StackName.tsx
index 3d4e88c40..d25d1b7a7 100644
--- a/app/react/kubernetes/DeployView/StackName/StackName.tsx
+++ b/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
-        together, or else leave empty to ignore.
+        {textTip}
       </TextTip>
       <div className="form-group">
         <label