fix(ingress): loading and ui fixes [EE-5132] (#9959)

app/react/components/InlineLoader/InlineLoader.stories.tsx

@@ -0,0 +1,19 @@
+import { Story, Meta } from '@storybook/react';
+import { PropsWithChildren } from 'react';
+
+import { InlineLoader, Props } from './InlineLoader';
+
+export default {
+  title: 'Components/InlineLoader',
+  component: InlineLoader,
+} as Meta;
+
+function Template({ className, children }: PropsWithChildren<Props>) {
+  return <InlineLoader className={className}>{children}</InlineLoader>;
+}
+
+export const Primary: Story<PropsWithChildren<Props>> = Template.bind({});
+Primary.args = {
+  className: 'test-class',
+  children: 'Loading...',
+};

app/react/components/InlineLoader/InlineLoader.tsx

@@ -0,0 +1,23 @@
+import { Loader2 } from 'lucide-react';
+import { PropsWithChildren } from 'react';
+import clsx from 'clsx';
+
+import { Icon } from '@@/Icon';
+
+export type Props = {
+  className: string;
+};
+
+export function InlineLoader({
+  children,
+  className,
+}: PropsWithChildren<Props>) {
+  return (
+    <div
+      className={clsx('text-muted flex items-center gap-2 text-sm', className)}
+    >
+      <Icon icon={Loader2} className="animate-spin-slow" />
+      {children}
+    </div>
+  );
+}

app/react/components/InlineLoader/index.ts

@@ -0,0 +1 @@
+export { InlineLoader } from './InlineLoader';

app/react/components/Widget/Widget.stories.tsx

@@ -17,7 +17,7 @@ interface WidgetProps {
 }
 
 const meta: Meta<WidgetProps> = {
-  title: 'Widget',
+  title: 'Components/Widget',
   component: Widget,
   args: {
     loading: false,

app/react/components/form-components/ReactSelect.css

@@ -31,6 +31,22 @@
   display: none;
 }
 
+.portainer-selector-root .portainer-selector__group-heading {
+  text-transform: none !important;
+  font-size: 85% !important;
+}
+
+.input-group .portainer-selector-root:last-child .portainer-selector__control {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+.input-group .portainer-selector-root:not(:first-child):not(:last-child) .portainer-selector__control {
+  border-radius: 0;
+}
+
 /* input style */
 .portainer-selector-root .portainer-selector__control {
   border-color: var(--border-form-control-color);

app/react/kubernetes/applications/CreateView/application-services/ingress/AppIngressPathForm.tsx

@@ -111,10 +111,6 @@ export function AppIngressPathForm({
             value={selectedIngress}
             defaultValue={ingressHostOptions[0]}
             placeholder="Select a hostname..."
-            theme={(theme) => ({
-              ...theme,
-              borderRadius: 0,
-            })}
             size="sm"
             onChange={(ingressOption) => {
               setSelectedIngress(ingressOption);

app/react/kubernetes/ingresses/CreateIngressView/CreateIngressView.tsx

@@ -7,7 +7,7 @@ import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 import { useConfigurations } from '@/react/kubernetes/configs/queries';
 import { useNamespaces } from '@/react/kubernetes/namespaces/queries';
 import { useServices } from '@/react/kubernetes/networks/services/queries';
-import { notifySuccess, notifyError } from '@/portainer/services/notifications';
+import { notifyError, notifySuccess } from '@/portainer/services/notifications';
 import { useAuthorizations } from '@/react/hooks/useUser';
 
 import { Link } from '@@/Link';
@@ -23,8 +23,7 @@ import {
   useIngressControllers,
 } from '../queries';
 
-import { Annotation } from './Annotations/types';
+import { Rule, Path, Host, GroupedServiceOptions } from './types';
-import { Rule, Path, Host } from './types';
 import { IngressForm } from './IngressForm';
 import {
   prepareTLS,
@@ -33,6 +32,7 @@ import {
   prepareRuleFromIngress,
   checkIfPathExistsWithHost,
 } from './utils';
+import { Annotation } from './Annotations/types';
 
 export function CreateIngressView() {
   const environmentId = useEnvironmentId();
@@ -58,31 +58,22 @@ export function CreateIngressView() {
     {} as Record<string, string>
   );
 
-  const namespacesResults = useNamespaces(environmentId);
+  const { data: namespaces, ...namespacesQuery } = useNamespaces(environmentId);
 
-  const servicesResults = useServices(environmentId, namespace);
+  const { data: allServices } = useServices(environmentId, namespace);
   const configResults = useConfigurations(environmentId, namespace);
   const ingressesResults = useIngresses(
     environmentId,
-    namespacesResults.data ? Object.keys(namespacesResults?.data || {}) : []
+    namespaces ? Object.keys(namespaces || {}) : []
   );
-  const ingressControllersResults = useIngressControllers(
+  const ingressControllersQuery = useIngressControllers(
     environmentId,
-    namespace,
+    namespace
-    0
   );
 
   const createIngressMutation = useCreateIngress();
   const updateIngressMutation = useUpdateIngress();
 
-  const isLoading =
-    (servicesResults.isLoading &&
-      configResults.isLoading &&
-      namespacesResults.isLoading &&
-      ingressesResults.isLoading &&
-      ingressControllersResults.isLoading) ||
-    (isEdit && !ingressRule.IngressName);
-
   const [ingressNames, ingresses, ruleCounterByNamespace, hostWithTLS] =
     useMemo((): [
       string[],
@@ -122,40 +113,51 @@ export function CreateIngressView() {
       ];
     }, [ingressesResults.data, namespace]);
 
-  const namespacesOptions: Option<string>[] = [
+  const namespaceOptions = useMemo(
-    { label: 'Select a namespace', value: '' },
-  ];
-  Object.entries(namespacesResults?.data || {}).forEach(([ns, val]) => {
-    if (!val.IsSystem) {
-      namespacesOptions.push({
-        label: ns,
-        value: ns,
-      });
-    }
-  });
-
-  const clusterIpServices = useMemo(
-    () => servicesResults.data?.filter((s) => s.Type === 'ClusterIP'),
-    [servicesResults.data]
-  );
-  const servicesOptions = useMemo(
     () =>
-      clusterIpServices?.map((service) => ({
+      Object.entries(namespaces || {})
-        label: service.Name,
+        .filter(([, nsValue]) => !nsValue.IsSystem)
-        value: service.Name,
+        .map(([nsKey]) => ({
+          label: nsKey,
+          value: nsKey,
         })),
-    [clusterIpServices]
+    [namespaces]
   );
 
-  const serviceOptions = [
+  const serviceOptions: GroupedServiceOptions = useMemo(() => {
-    { label: 'Select a service', value: '' },
+    const groupedOptions: GroupedServiceOptions = (
-    ...(servicesOptions || []),
+      allServices?.reduce<GroupedServiceOptions>(
-  ];
+        (groupedOptions, service) => {
+          // add a new option to the group that matches the service type
+          const newGroupedOptions = groupedOptions.map((group) => {
+            if (group.label === service.Type) {
+              return {
+                ...group,
+                options: [
+                  ...group.options,
+                  { label: service.Name, value: service.Name },
+                ],
+              };
+            }
+            return group;
+          });
+          return newGroupedOptions;
+        },
+        [
+          { label: 'ClusterIP', options: [] },
+          { label: 'NodePort', options: [] },
+          { label: 'LoadBalancer', options: [] },
+        ] as GroupedServiceOptions
+      ) || []
+    ).filter((group) => group.options.length > 0);
+    return groupedOptions;
+  }, [allServices]);
+
   const servicePorts = useMemo(
     () =>
-      clusterIpServices
+      allServices
         ? Object.fromEntries(
-            clusterIpServices?.map((service) => [
+            allServices?.map((service) => [
               service.Name,
               service.Ports.map((port) => ({
                 label: String(port.Port),
@@ -164,33 +166,35 @@ export function CreateIngressView() {
             ])
           )
         : {},
-    [clusterIpServices]
+    [allServices]
   );
 
   const existingIngressClass = useMemo(
     () =>
-      ingressControllersResults.data?.find(
+      ingressControllersQuery.data?.find(
         (i) =>
           i.ClassName === ingressRule.IngressClassName ||
           (i.Type === 'custom' && ingressRule.IngressClassName === '')
       ),
-    [ingressControllersResults.data, ingressRule.IngressClassName]
+    [ingressControllersQuery.data, ingressRule.IngressClassName]
   );
-  const ingressClassOptions: Option<string>[] = [
+
-    { label: 'Select an ingress class', value: '' },
+  const ingressClassOptions: Option<string>[] = useMemo(
-    ...(ingressControllersResults.data
+    () =>
+      ingressControllersQuery.data
         ?.filter((cls) => cls.Availability)
         .map((cls) => ({
           label: cls.ClassName,
           value: cls.ClassName,
-      })) || []),
+        })) || [],
-  ];
+    [ingressControllersQuery.data]
+  );
 
   if (
     (!existingIngressClass ||
       (existingIngressClass && !existingIngressClass.Availability)) &&
     ingressRule.IngressClassName &&
-    !ingressControllersResults.isLoading
+    !ingressControllersQuery.isLoading
   ) {
     const optionLabel = !ingressRule.IngressType
       ? `${ingressRule.IngressClassName} - NOT FOUND`
@@ -222,15 +226,15 @@ export function CreateIngressView() {
       !!params.name &&
       ingressesResults.data &&
       !ingressRule.IngressName &&
-      !ingressControllersResults.isLoading &&
+      !ingressControllersQuery.isLoading &&
-      !ingressControllersResults.isLoading
+      !ingressControllersQuery.isLoading
     ) {
       // if it is an edit screen, prepare the rule from the ingress
       const ing = ingressesResults.data?.find(
         (ing) => ing.Name === params.name && ing.Namespace === params.namespace
       );
       if (ing) {
-        const type = ingressControllersResults.data?.find(
+        const type = ingressControllersQuery.data?.find(
           (c) =>
             c.ClassName === ing.ClassName ||
             (c.Type === 'custom' && !ing.ClassName)
@@ -244,7 +248,7 @@ export function CreateIngressView() {
   }, [
     params.name,
     ingressesResults.data,
-    ingressControllersResults.data,
+    ingressControllersQuery.data,
     ingressRule.IngressName,
     params.namespace,
   ]);
@@ -292,7 +296,7 @@ export function CreateIngressView() {
     (
       ingressRule: Rule,
       ingressNames: string[],
-      serviceOptions: Option<string>[],
+      groupedServiceOptions: GroupedServiceOptions,
       existingIngressClass?: IngressController
     ) => {
       const errors: Record<string, ReactNode> = {};
@@ -314,7 +318,7 @@ export function CreateIngressView() {
           errors.ingressName = 'Ingress name already exists';
         }
 
-        if (!rule.IngressClassName) {
+        if (!ingressClassOptions.length && ingressControllersQuery.isSuccess) {
           errors.className = 'Ingress class is required';
         }
       }
@@ -398,10 +402,14 @@ export function CreateIngressView() {
               'Service name is required';
           }
 
+          const availableServiceNames = groupedServiceOptions.flatMap(
+            (optionGroup) => optionGroup.options.map((option) => option.value)
+          );
+
           if (
             isEdit &&
             path.ServiceName &&
-            !serviceOptions.find((s) => s.value === path.ServiceName)
+            !availableServiceNames.find((sn) => sn === path.ServiceName)
           ) {
             errors[`hosts[${hi}].paths[${pi}].servicename`] = (
               <span>
@@ -456,26 +464,32 @@ export function CreateIngressView() {
       }
       return true;
     },
-    [ingresses, environmentId, isEdit, params.name]
+    [
+      isEdit,
+      ingressClassOptions,
+      ingressControllersQuery.isSuccess,
+      environmentId,
+      ingresses,
+      params.name,
+    ]
   );
 
-  const debouncedValidate = useMemo(() => debounce(validate, 300), [validate]);
+  const debouncedValidate = useMemo(() => debounce(validate, 500), [validate]);
 
   useEffect(() => {
     if (namespace.length > 0) {
       debouncedValidate(
         ingressRule,
         ingressNames || [],
-        servicesOptions || [],
+        serviceOptions || [],
         existingIngressClass
       );
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     ingressRule,
     namespace,
     ingressNames,
-    servicesOptions,
+    serviceOptions,
     existingIngressClass,
     debouncedValidate,
   ]);
@@ -498,10 +512,10 @@ export function CreateIngressView() {
         <div className="col-sm-12">
           <IngressForm
             environmentID={environmentId}
-            isLoading={isLoading}
             isEdit={isEdit}
             rule={ingressRule}
             ingressClassOptions={ingressClassOptions}
+            isIngressClassOptionsLoading={ingressControllersQuery.isLoading}
             errors={errors}
             servicePorts={servicePorts}
             tlsOptions={tlsOptions}
@@ -520,10 +534,11 @@ export function CreateIngressView() {
             handleAnnotationChange={handleAnnotationChange}
             namespace={namespace}
             handleNamespaceChange={handleNamespaceChange}
-            namespacesOptions={namespacesOptions}
+            namespacesOptions={namespaceOptions}
+            isNamespaceOptionsLoading={namespacesQuery.isLoading}
           />
         </div>
-        {namespace && !isLoading && (
+        {namespace && (
           <div className="col-sm-12">
             <Button
               onClick={() => handleCreateIngressRules()}
@@ -548,7 +563,7 @@ export function CreateIngressView() {
     setIngressRule((prevRules) => {
       const rule = { ...prevRules, [key]: val };
       if (key === 'IngressClassName') {
-        rule.IngressType = ingressControllersResults.data?.find(
+        rule.IngressType = ingressControllersQuery.data?.find(
           (c) => c.ClassName === val
         )?.Type;
       }
@@ -637,7 +652,7 @@ export function CreateIngressView() {
       Key: uuidv4(),
       Namespace: namespace,
       IngressName: newKey,
-      IngressClassName: '',
+      IngressClassName: ingressRule.IngressClassName || '',
       Hosts: [host],
     };
 

app/react/kubernetes/ingresses/CreateIngressView/IngressForm.tsx

@@ -1,19 +1,23 @@
-import { ChangeEvent, ReactNode } from 'react';
+import { ChangeEvent, ReactNode, useEffect } from 'react';
 import { Plus, RefreshCw, Trash2 } from 'lucide-react';
 
 import Route from '@/assets/ico/route.svg?c';
 
 import { Link } from '@@/Link';
-import { Select, Option } from '@@/form-components/Input/Select';
+import { Option } from '@@/form-components/Input/Select';
 import { FormError } from '@@/form-components/FormError';
 import { Widget, WidgetBody, WidgetTitle } from '@@/Widget';
 import { Tooltip } from '@@/Tip/Tooltip';
 import { Button } from '@@/buttons';
 import { TooltipWithChildren } from '@@/Tip/TooltipWithChildren';
 import { TextTip } from '@@/Tip/TextTip';
+import { Card } from '@@/Card';
+import { InputGroup } from '@@/form-components/InputGroup';
+import { InlineLoader } from '@@/InlineLoader';
+import { Select } from '@@/form-components/ReactSelect';
 
 import { Annotations } from './Annotations';
-import { Rule, ServicePorts } from './types';
+import { GroupedServiceOptions, Rule, ServicePorts } from './types';
 
 import '../style.css';
 
@@ -33,15 +37,16 @@ interface Props {
   rule: Rule;
 
   errors: Record<string, ReactNode>;
-  isLoading: boolean;
   isEdit: boolean;
   namespace: string;
 
   servicePorts: ServicePorts;
   ingressClassOptions: Option<string>[];
-  serviceOptions: Option<string>[];
+  isIngressClassOptionsLoading: boolean;
+  serviceOptions: GroupedServiceOptions;
   tlsOptions: Option<string>[];
   namespacesOptions: Option<string>[];
+  isNamespaceOptionsLoading: boolean;
 
   removeIngressRoute: (hostIndex: number, pathIndex: number) => void;
   removeIngressHost: (hostIndex: number) => void;
@@ -76,7 +81,6 @@ interface Props {
 export function IngressForm({
   environmentID,
   rule,
-  isLoading,
   isEdit,
   servicePorts,
   tlsOptions,
@@ -94,20 +98,38 @@ export function IngressForm({
   reloadTLSCerts,
   handleAnnotationChange,
   ingressClassOptions,
+  isIngressClassOptionsLoading,
   errors,
   namespacesOptions,
+  isNamespaceOptionsLoading,
   handleNamespaceChange,
   namespace,
 }: Props) {
-  if (isLoading) {
-    return <div>Loading...</div>;
-  }
   const hasNoHostRule = rule.Hosts?.some((host) => host.NoHost);
   const placeholderAnnotation =
     PlaceholderAnnotations[rule.IngressType || 'other'] ||
     PlaceholderAnnotations.other;
   const pathTypes = PathTypes[rule.IngressType || 'other'] || PathTypes.other;
 
+  // when the namespace options update the value to an available one
+  useEffect(() => {
+    const namespaces = namespacesOptions.map((option) => option.value);
+    if (!namespaces.includes(namespace) && namespaces.length > 0) {
+      handleNamespaceChange(namespaces[0]);
+    }
+  }, [namespacesOptions, namespace, handleNamespaceChange]);
+
+  // when the ingress class options update update the value to an available one
+  useEffect(() => {
+    const ingressClasses = ingressClassOptions.map((option) => option.value);
+    if (
+      !ingressClasses.includes(rule.IngressClassName) &&
+      ingressClasses.length > 0
+    ) {
+      handleIngressChange('IngressClassName', ingressClasses[0]);
+    }
+  }, [ingressClassOptions, rule.IngressClassName, handleIngressChange]);
+
   return (
     <Widget>
       <WidgetTitle icon={Route} title="Ingress" />
@@ -121,19 +143,30 @@ export function IngressForm({
               >
                 Namespace
               </label>
+              {isNamespaceOptionsLoading && (
                 <div className="col-sm-4">
+                  <InlineLoader className="pt-2">
+                    Loading namespaces...
+                  </InlineLoader>
+                </div>
+              )}
+              {!isNamespaceOptionsLoading && (
+                <div className={`col-sm-4 ${isEdit && 'control-label'}`}>
                   {isEdit ? (
                     namespace
                   ) : (
                     <Select
                       name="namespaces"
                       options={namespacesOptions || []}
-                    onChange={(e) => handleNamespaceChange(e.target.value)}
+                      value={{ value: namespace, label: namespace }}
-                    defaultValue={namespace}
+                      isDisabled={isEdit}
-                    disabled={isEdit}
+                      onChange={(val) =>
+                        handleNamespaceChange(val?.value || '')
+                      }
                     />
                   )}
                 </div>
+              )}
             </div>
           </div>
         </div>
@@ -180,21 +213,40 @@ export function IngressForm({
                   Ingress class
                 </label>
                 <div className="col-sm-4">
+                  {isIngressClassOptionsLoading && (
+                    <InlineLoader className="pt-2">
+                      Loading ingress classes...
+                    </InlineLoader>
+                  )}
+                  {!isIngressClassOptionsLoading && (
+                    <>
                       <Select
                         name="ingress_class"
-                    className="form-control"
                         placeholder="Ingress name"
-                    defaultValue={rule.IngressClassName}
-                    onChange={(e: ChangeEvent<HTMLSelectElement>) =>
-                      handleIngressChange('IngressClassName', e.target.value)
-                    }
                         options={ingressClassOptions}
+                        value={{
+                          label: rule.IngressClassName,
+                          value: rule.IngressClassName,
+                        }}
+                        onChange={(ingressClassOption) =>
+                          handleIngressChange(
+                            'IngressClassName',
+                            ingressClassOption?.value || ''
+                          )
+                        }
                       />
                       {errors.className && (
                         <FormError className="error-inline mt-1">
                           {errors.className}
                         </FormError>
                       )}
+                    </>
+                  )}
+                  {errors.className && (
+                    <FormError className="error-inline mt-1">
+                      {errors.className}
+                    </FormError>
+                  )}
                 </div>
               </div>
             </div>
@@ -300,9 +352,9 @@ export function IngressForm({
 
         {namespace &&
           rule?.Hosts?.map((host, hostIndex) => (
-            <div className="row rule bordered mb-5" key={host.Key}>
+            <Card key={host.Key} className="mb-5">
-              <div className="col-sm-12">
+              <div className="flex flex-col">
-                <div className="row rule-actions mt-5">
+                <div className="row rule-actions">
                   <div className="col-sm-3 p-0">
                     {!host.NoHost ? 'Rule' : 'Fallback rule'}
                   </div>
@@ -323,11 +375,9 @@ export function IngressForm({
                 {!host.NoHost && (
                   <div className="row">
                     <div className="form-group col-sm-6 col-lg-4 !pl-0 !pr-2">
-                      <div className="input-group input-group-sm">
+                      <InputGroup size="small">
-                        <span className="input-group-addon required">
+                        <InputGroup.Addon required>Hostname</InputGroup.Addon>
-                          Hostname
+                        <InputGroup.Input
-                        </span>
-                        <input
                           name={`ingress_host_${hostIndex}`}
                           type="text"
                           className="form-control form-control-sm"
@@ -337,7 +387,7 @@ export function IngressForm({
                             handleHostChange(hostIndex, e.target.value)
                           }
                         />
-                      </div>
+                      </InputGroup>
                       {errors[`hosts[${hostIndex}].host`] && (
                         <FormError className="mt-1 !mb-0">
                           {errors[`hosts[${hostIndex}].host`]}
@@ -346,17 +396,19 @@ export function IngressForm({
                     </div>
 
                     <div className="form-group col-sm-6 col-lg-4 !pr-0 !pl-2">
-                      <div className="input-group input-group-sm">
+                      <InputGroup size="small">
-                        <span className="input-group-addon">TLS secret</span>
+                        <InputGroup.Addon>TLS secret</InputGroup.Addon>
                         <Select
                           key={tlsOptions.toString() + host.Secret}
                           name={`ingress_tls_${hostIndex}`}
-                          options={tlsOptions}
+                          value={{
-                          onChange={(e: ChangeEvent<HTMLSelectElement>) =>
+                            value: rule.Hosts[hostIndex].Secret,
-                            handleTLSChange(hostIndex, e.target.value)
+                            label: rule.Hosts[hostIndex].Secret || 'No TLS',
+                          }}
+                          onChange={(TLSOption) =>
+                            handleTLSChange(hostIndex, TLSOption?.value || '')
                           }
-                          defaultValue={host.Secret}
+                          size="sm"
-                          className="!rounded-r-none"
                         />
                         {!host.NoHost && (
                           <div className="input-group-btn">
@@ -367,7 +419,7 @@ export function IngressForm({
                             />
                           </div>
                         )}
-                      </div>
+                      </InputGroup>
                     </div>
 
                     <div className="col-sm-12 col-lg-4 flex h-[30px] items-center pl-2">
@@ -414,25 +466,27 @@ export function IngressForm({
                     key={`path_${path.Key}}`}
                   >
                     <div className="form-group col-sm-3 col-xl-2 !m-0 !pl-0">
-                      <div className="input-group input-group-sm">
+                      <InputGroup size="small">
-                        <span className="input-group-addon required">
+                        <InputGroup.Addon required>Service</InputGroup.Addon>
-                          Service
-                        </span>
                         <Select
                           key={serviceOptions.toString() + path.ServiceName}
                           name={`ingress_service_${hostIndex}_${pathIndex}`}
                           options={serviceOptions}
-                          onChange={(e: ChangeEvent<HTMLSelectElement>) =>
+                          value={{
+                            value: path.ServiceName,
+                            label: path.ServiceName || 'Select a service',
+                          }}
+                          onChange={(serviceOption) =>
                             handlePathChange(
                               hostIndex,
                               pathIndex,
                               'ServiceName',
-                              e.target.value
+                              serviceOption?.value || ''
                             )
                           }
-                          defaultValue={path.ServiceName}
+                          size="sm"
                         />
-                      </div>
+                      </InputGroup>
                       {errors[
                         `hosts[${hostIndex}].paths[${pathIndex}].servicename`
                       ] && (
@@ -449,35 +503,41 @@ export function IngressForm({
                     <div className="form-group col-sm-2 col-xl-2 !m-0 !pl-0">
                       {servicePorts && (
                         <>
-                          <div className="input-group input-group-sm">
+                          <InputGroup size="small">
-                            <span className="input-group-addon required">
+                            <InputGroup.Addon required>
                               Service port
-                            </span>
+                            </InputGroup.Addon>
                             <Select
                               key={servicePorts.toString() + path.ServicePort}
                               name={`ingress_servicePort_${hostIndex}_${pathIndex}`}
                               options={
-                                path.ServiceName &&
+                                servicePorts[path.ServiceName]?.map(
-                                servicePorts[path.ServiceName]
+                                  (portOption) => ({
-                                  ? servicePorts[path.ServiceName]
+                                    ...portOption,
-                                  : [
+                                    value: portOption.value.toString(),
-                                      {
+                                  })
-                                        label: 'Select port',
+                                ) || []
-                                        value: '',
-                                      },
-                                    ]
                               }
-                              onChange={(e: ChangeEvent<HTMLSelectElement>) =>
+                              onChange={(option) =>
                                 handlePathChange(
                                   hostIndex,
                                   pathIndex,
                                   'ServicePort',
-                                  e.target.value
+                                  option?.value || ''
                                 )
                               }
-                              defaultValue={path.ServicePort}
+                              value={{
+                                label: (
+                                  path.ServicePort || 'Select a port'
+                                ).toString(),
+                                value:
+                                  rule.Hosts[hostIndex].Paths[
+                                    pathIndex
+                                  ].ServicePort.toString(),
+                              }}
+                              size="sm"
                             />
-                          </div>
+                          </InputGroup>
                           {errors[
                             `hosts[${hostIndex}].paths[${pathIndex}].serviceport`
                           ] && (
@@ -494,30 +554,32 @@ export function IngressForm({
                     </div>
 
                     <div className="form-group col-sm-3 col-xl-2 !m-0 !pl-0">
-                      <div className="input-group input-group-sm">
+                      <InputGroup size="small">
-                        <span className="input-group-addon">Path type</span>
+                        <InputGroup.Addon>Path type</InputGroup.Addon>
-                        <Select
+                        <Select<Option<string>>
                           key={servicePorts.toString() + path.PathType}
                           name={`ingress_pathType_${hostIndex}_${pathIndex}`}
                           options={
-                            pathTypes
+                            pathTypes?.map((type) => ({
-                              ? pathTypes.map((type) => ({
                               label: type,
                               value: type,
-                                }))
+                            })) || []
-                              : []
                           }
-                          onChange={(e: ChangeEvent<HTMLSelectElement>) =>
+                          onChange={(option) =>
                             handlePathChange(
                               hostIndex,
                               pathIndex,
                               'PathType',
-                              e.target.value
+                              option?.value || ''
                             )
                           }
-                          defaultValue={path.PathType}
+                          value={{
+                            label: path.PathType || 'Select a path type',
+                            value: path.PathType || '',
+                          }}
+                          size="sm"
                         />
-                      </div>
+                      </InputGroup>
                       {errors[
                         `hosts[${hostIndex}].paths[${pathIndex}].pathType`
                       ] && (
@@ -532,9 +594,9 @@ export function IngressForm({
                     </div>
 
                     <div className="form-group col-sm-3 col-xl-3 !m-0 !pl-0">
-                      <div className="input-group input-group-sm">
+                      <InputGroup size="small">
-                        <span className="input-group-addon required">Path</span>
+                        <InputGroup.Addon required>Path</InputGroup.Addon>
-                        <input
+                        <InputGroup.Input
                           className="form-control"
                           name={`ingress_route_${hostIndex}-${pathIndex}`}
                           placeholder="/example"
@@ -550,7 +612,7 @@ export function IngressForm({
                             )
                           }
                         />
-                      </div>
+                      </InputGroup>
                       {errors[
                         `hosts[${hostIndex}].paths[${pathIndex}].path`
                       ] && (
@@ -592,7 +654,7 @@ export function IngressForm({
                   </Button>
                 </div>
               </div>
-            </div>
+            </Card>
           ))}
 
         {namespace && (

app/react/kubernetes/ingresses/CreateIngressView/types.ts

@@ -31,3 +31,8 @@ export interface Rule {
 export interface ServicePorts {
   [serviceName: string]: Option<string>[];
 }
+
+export type GroupedServiceOptions = {
+  label: string;
+  options: Option<string>[];
+}[];

app/react/kubernetes/ingresses/queries.ts

@@ -177,8 +177,7 @@ export function useDeleteIngresses() {
  */
 export function useIngressControllers(
   environmentId: EnvironmentId,
-  namespace?: string,
+  namespace?: string
-  cacheTime?: number
 ) {
   return useQuery(
     [
@@ -193,7 +192,6 @@ export function useIngressControllers(
       namespace ? getIngressControllers(environmentId, namespace) : [],
     {
       enabled: !!namespace,
-      cacheTime,
       ...withError('Unable to get ingress controllers'),
     }
   );