feat(new-nav): add Helm networking settings view

apps/console-v5/public/changelog/latest.json

@@ -1,8 +1,8 @@
 [
   {
     "name": "Qovery Changelogs",
-    "summary": "We're super excited to announce new features and improvements: NGINX Ingress migration update, MCP updates, AI Copilot Deployment troubleshoot, Build dashboard",
-    "url": "https://www.qovery.com/changelog/2026-03-25",
-    "firstPublishedAt": "2026-03-25T00:00:00.000Z"
+    "summary": "We're super excited to announce new features and improvements: Kube 1.34 and 1.35 upgrades, Terraform provider improvements, Standard Kube labels, Topology spread across zones",
+    "url": "https://www.qovery.com/changelog/2026-04-08",
+    "firstPublishedAt": "2026-04-08T00:00:00.000Z"
   }
 ]

apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/settings/networking.tsx

@@ -1,4 +1,5 @@
 import { createFileRoute } from '@tanstack/react-router'
+import { HelmNetworkingSettings } from '@qovery/domains/service-settings/feature'
 
 export const Route = createFileRoute(
   '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/settings/networking'
@@ -7,5 +8,5 @@ export const Route = createFileRoute(
 })
 
 function RouteComponent() {
-  return <div className="px-10 py-7">Networking</div>
+  return <HelmNetworkingSettings />
 }

libs/domains/service-helm/feature/src/index.ts

@@ -1,5 +1,4 @@
 export * from './lib/deployment-setting/deployment-setting'
-export * from './lib/networking-setting/networking-setting'
 export * from './lib/source-setting/source-setting'
 export * from './lib/values-override-yaml-setting/values-override-yaml-setting'
 export * from './lib/values-override-arguments-setting/values-override-arguments-setting'
@@ -15,3 +14,4 @@ export * from './lib/helm-creation-flow/step-values-override-arguments/step-valu
 export * from './lib/helm-creation-flow/step-values-override-files/step-values-override-files'
 export * from './lib/helm-creation-flow/step-summary/step-summary'
 export * from './lib/helm-creation-flow/helm-summary-utils/helm-summary-utils'
+export * from './lib/networking-port-setting-modal/networking-port-setting-modal'

libs/domains/service-helm/feature/src/lib/networking-port-setting-modal/__snapshots__/networking-port-setting-modal.spec.tsx.snap

@@ -262,7 +262,7 @@ exports[`NetworkingPortSettingModal should match snapshot in create state 1`] =
               </div>
             </div>
             <p
-              class="mb-5 ml-3 text-xs text-neutral-350"
+              class="mb-5 ml-3 text-xs text-neutral-subtle"
             >
               Port Name allows to customize the subdomain assigned to reach the application
 port from the internet. Default value is p&lt;port_number&gt;-&lt;service_name&gt;
@@ -589,7 +589,7 @@ exports[`NetworkingPortSettingModal should match snapshot in edit state 1`] = `
               </div>
             </div>
             <p
-              class="mb-5 ml-3 text-xs text-neutral-350"
+              class="mb-5 ml-3 text-xs text-neutral-subtle"
             >
               Port Name allows to customize the subdomain assigned to reach the application
 port from the internet. Default value is p&lt;port_number&gt;-&lt;service_name&gt;

libs/domains/service-helm/feature/src/lib/networking-port-setting-modal/networking-port-setting-modal.spec.tsx

@@ -63,4 +63,19 @@ describe('NetworkingPortSettingModal', () => {
       name: 'p1234-foo',
     })
   })
+
+  it('should not close while submit is pending', async () => {
+    const onClose = jest.fn()
+    const onSubmit = jest.fn(() => new Promise<void>(() => {}))
+    const { userEvent } = renderWithProviders(<NetworkingPortSettingModal onSubmit={onSubmit} onClose={onClose} />)
+
+    await userEvent.type(screen.getByLabelText(/service name/i), 'foo')
+    await userEvent.type(screen.getByLabelText(/namespace/i), 'bar')
+    await userEvent.type(screen.getByLabelText(/service port/i), '1234')
+    await userEvent.click(screen.getByText(/create/i))
+    await userEvent.click(screen.getByText(/cancel/i))
+
+    expect(onSubmit).toHaveBeenCalled()
+    expect(onClose).not.toHaveBeenCalled()
+  })
 })

libs/domains/service-helm/feature/src/lib/networking-port-setting-modal/networking-port-setting-modal.tsx

@@ -1,5 +1,5 @@
 import { type HelmPortRequestPortsInner, PortProtocolEnum } from 'qovery-typescript-axios'
-import { type FormEvent } from 'react'
+import { type FormEvent, useState } from 'react'
 import { Controller, FormProvider, useForm } from 'react-hook-form'
 import { InputSelect, InputText, LoaderSpinner, ModalCrud } from '@qovery/shared/ui'
 import { useKubernetesServices } from '../hooks/use-kubernetes-services/use-kubernetes-services'
@@ -8,11 +8,12 @@ export interface NetworkingPortSettingModalProps {
   helmId: string
   port?: HelmPortRequestPortsInner
   onClose: () => void
-  onSubmit: (port: HelmPortRequestPortsInner) => void
+  onSubmit: (port: HelmPortRequestPortsInner) => Promise<void> | void
 }
 
 export function NetworkingPortSettingModal({ helmId, port, onClose, onSubmit }: NetworkingPortSettingModalProps) {
   const isEdit = !!port
+  const [isSubmitting, setIsSubmitting] = useState(false)
   const methods = useForm({
     defaultValues: {
       internal_port: `${port?.internal_port ?? ''}`,
@@ -64,15 +65,25 @@ export function NetworkingPortSettingModal({ helmId, port, onClose, onSubmit }:
     <FormProvider {...methods}>
       <ModalCrud
         title={isEdit ? 'Edit port' : 'Set port'}
-        onSubmit={methods.handleSubmit((data) =>
-          onSubmit({
-            ...data,
-            internal_port: Number(data['internal_port']), // need to cast to Number
-            external_port: Number(data['external_port']),
-          })
-        )}
-        onClose={onClose}
+        onSubmit={methods.handleSubmit(async (data) => {
+          setIsSubmitting(true)
+          try {
+            await onSubmit({
+              ...data,
+              internal_port: Number(data['internal_port']), // need to cast to Number
+              external_port: Number(data['external_port']),
+            })
+          } finally {
+            setIsSubmitting(false)
+          }
+        })}
+        onClose={() => {
+          if (!isSubmitting) {
+            onClose()
+          }
+        }}
         isEdit={isEdit}
+        loading={isSubmitting}
         howItWorks={
           <>
             <p>Specify:</p>
@@ -261,7 +272,7 @@ export function NetworkingPortSettingModal({ helmId, port, onClose, onSubmit }:
                     />
                   )}
                 />
-                <p className="mb-5 ml-3 text-xs text-neutral-350">{`Port Name allows to customize the subdomain assigned to reach the application
+                <p className="mb-5 ml-3 text-xs text-neutral-subtle">{`Port Name allows to customize the subdomain assigned to reach the application
 port from the internet. Default value is p<port_number>-<service_name>`}</p>
               </div>
             </>