From db616bc8a561577f87f0921696cf9132937f65ca Mon Sep 17 00:00:00 2001
From: Ali <83188384+testA113@users.noreply.github.com>
Date: Wed, 25 Sep 2024 11:36:50 +1200
Subject: [PATCH] fix(wizard): update nodeport placeholder [r8s-62] (#12255)

---
 .../WizardKubernetes/AgentPanel.tsx                | 14 +++++++++++---
 .../WizardKubernetes/DeploymentScripts.tsx         | 13 ++++++++-----
 .../shared/AgentForm/AgentForm.tsx                 |  5 +++--
 .../shared/AgentForm/EnvironmentUrlField.tsx       |  8 ++++++--
 4 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/AgentPanel.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/AgentPanel.tsx
index 24d9b6717..e80f51557 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/AgentPanel.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/AgentPanel.tsx
@@ -1,20 +1,28 @@
+import { useState } from 'react';
+
 import { Environment } from '@/react/portainer/environments/types';
 
 import { AgentForm } from '../shared/AgentForm';
 
-import { DeploymentScripts } from './DeploymentScripts';
+import { deployments, DeploymentScripts } from './DeploymentScripts';
 
 interface Props {
   onCreate(environment: Environment): void;
 }
 
 export function AgentPanel({ onCreate }: Props) {
+  const [deployType, setDeployType] = useState(deployments[0].id);
+  const defaultPort = deployType === 'k8sNodePort' ? '30778' : '9001';
   return (
     <>
-      <DeploymentScripts />
+      <DeploymentScripts
+        deployType={deployType}
+        setDeployType={setDeployType}
+      />
 
       <div className="mt-5">
-        <AgentForm onCreate={onCreate} />
+        {' '}
+        <AgentForm onCreate={onCreate} envDefaultPort={defaultPort} />
       </div>
     </>
   );
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/DeploymentScripts.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/DeploymentScripts.tsx
index 44b622ff5..870a2a633 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/DeploymentScripts.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/DeploymentScripts.tsx
@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { Info } from 'lucide-react';
 
 import { getAgentShortVersion } from '@/portainer/views/endpoints/helpers';
@@ -11,7 +10,7 @@ import { NavTabs } from '@@/NavTabs';
 import { Icon } from '@@/Icon';
 import { NavContainer } from '@@/NavTabs/NavContainer';
 
-const deployments = [
+export const deployments = [
   {
     id: 'k8sLoadBalancer',
     label: 'Kubernetes via load balancer',
@@ -26,9 +25,13 @@ const deployments = [
   },
 ];
 
-export function DeploymentScripts() {
-  const [deployType, setDeployType] = useState(deployments[0].id);
-
+export function DeploymentScripts({
+  deployType,
+  setDeployType,
+}: {
+  deployType: string;
+  setDeployType: (id: string) => void;
+}) {
   const agentDetailsQuery = useAgentDetails();
 
   if (!agentDetailsQuery) {
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/AgentForm/AgentForm.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/AgentForm/AgentForm.tsx
index 91c9cf630..53e2885d1 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/AgentForm/AgentForm.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/AgentForm/AgentForm.tsx
@@ -17,6 +17,7 @@ import { useValidation } from './AgentForm.validation';
 
 interface Props {
   onCreate(environment: Environment): void;
+  envDefaultPort?: string;
 }
 
 const initialValues: CreateAgentEnvironmentValues = {
@@ -28,7 +29,7 @@ const initialValues: CreateAgentEnvironmentValues = {
   },
 };
 
-export function AgentForm({ onCreate }: Props) {
+export function AgentForm({ onCreate, envDefaultPort }: Props) {
   const [formKey, clearForm] = useReducer((state) => state + 1, 0);
 
   const mutation = useCreateAgentEnvironmentMutation();
@@ -45,7 +46,7 @@ export function AgentForm({ onCreate }: Props) {
       {({ isValid, dirty }) => (
         <Form>
           <NameField />
-          <EnvironmentUrlField />
+          <EnvironmentUrlField placeholderPort={envDefaultPort} />
 
           <MoreSettingsSection />
 
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/AgentForm/EnvironmentUrlField.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/AgentForm/EnvironmentUrlField.tsx
index d6e009ccb..1b5bd7a17 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/AgentForm/EnvironmentUrlField.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/AgentForm/EnvironmentUrlField.tsx
@@ -3,7 +3,11 @@ import { Field, useField } from 'formik';
 import { FormControl } from '@@/form-components/FormControl';
 import { Input } from '@@/form-components/Input';
 
-export function EnvironmentUrlField() {
+export function EnvironmentUrlField({
+  placeholderPort = '9001',
+}: {
+  placeholderPort?: string;
+}) {
   const [, meta] = useField('environmentUrl');
 
   return (
@@ -18,7 +22,7 @@ export function EnvironmentUrlField() {
         id="environment-url-field"
         name="environmentUrl"
         as={Input}
-        placeholder="e.g. 10.0.0.10:9001 or tasks.portainer_agent:9001"
+        placeholder={`e.g. 10.0.0.10:${placeholderPort} or tasks.portainer_agent:${placeholderPort}`}
         data-cy="endpointCreate-endpointUrlAgentInput"
       />
     </FormControl>