fix(wizard): update nodeport placeholder [r8s-62] (#12255)

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

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) {

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 />
 

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>