feat(config): separate configmaps and secrets [EE-5078] (#9029)

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

@@ -373,18 +373,16 @@ export function IngressForm({
 
                     <div className="col-sm-12 p-0">
                       <TextTip color="blue">
-                        Add a secret via{' '}
+                        You may also use the{' '}
                         <Link
-                          to="kubernetes.configurations"
+                          to="kubernetes.secrets.new"
                           params={{ id: environmentID }}
                           className="text-primary"
                           target="_blank"
                         >
-                          ConfigMaps &amp; Secrets
-                        </Link>
-                        {', '}
-                        then select &apos;Reload TLS secrets&apos; above to
-                        populate the dropdown with your changes.
+                          Create secret
+                        </Link>{' '}
+                        function, and reload the dropdown.
                       </TextTip>
                     </div>
                   </div>

app/react/kubernetes/ingresses/IngressDatatable/IngressDatatable.tsx

@@ -31,10 +31,10 @@ const settingsStore = createPersistedStore(storageKey);
 export function IngressDatatable() {
   const environmentId = useEnvironmentId();
 
-  const nsResult = useNamespaces(environmentId);
+  const { data: namespaces, ...namespacesQuery } = useNamespaces(environmentId);
   const ingressesQuery = useIngresses(
     environmentId,
-    Object.keys(nsResult?.data || {})
+    Object.keys(namespaces || {})
   );
 
   const deleteIngressesMutation = useDeleteIngresses();
@@ -47,7 +47,7 @@ export function IngressDatatable() {
       settingsManager={tableState}
       dataset={ingressesQuery.data || []}
       columns={columns}
-      isLoading={ingressesQuery.isLoading}
+      isLoading={ingressesQuery.isLoading || namespacesQuery.isLoading}
       emptyContentLabel="No supported ingresses found"
       title="Ingresses"
       titleIcon={Route}

app/react/kubernetes/ingresses/IngressDatatable/columns/ingressRules.tsx

@@ -31,24 +31,29 @@ function Cell({ row }: CellContext<Ingress, string>) {
     return <div />;
   }
 
-  return paths.map((path) => {
-    const isHttp = isHTTP(row.original.TLS || [], path.Host);
-    return (
-      <div key={`${path.Host}${path.Path}${path.ServiceName}:${path.Port}`}>
-        <span className="flex flex-nowrap items-center gap-1 px-2">
-          {link(path.Host, path.Path, isHttp)}
-          <Icon icon={ArrowRight} />
-          {`${path.ServiceName}:${path.Port}`}
-          {!path.HasService && (
-            <Badge type="warn" className="ml-1 gap-1">
-              <Icon icon={AlertTriangle} />
-              Service doesn&apos;t exist
-            </Badge>
-          )}
-        </span>
-      </div>
-    );
-  });
+  return (
+    <div className="flex flex-col gap-y-0.5">
+      {paths.map((path) => (
+        <div key={`${path.Host}${path.Path}${path.ServiceName}:${path.Port}`}>
+          <span className="flex flex-nowrap items-center gap-1 px-2">
+            {link(
+              path.Host,
+              path.Path,
+              isHTTP(row.original.TLS || [], path.Host)
+            )}
+            <Icon icon={ArrowRight} />
+            {`${path.ServiceName}:${path.Port}`}
+            {!path.HasService && (
+              <Badge type="warn" className="ml-1 gap-1">
+                <Icon icon={AlertTriangle} />
+                Service doesn&apos;t exist
+              </Badge>
+            )}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
 }
 
 function isHTTP(TLSs: TLS[], host: string) {

app/react/kubernetes/ingresses/IngressDatatable/index.tsx

@@ -6,7 +6,7 @@ export function IngressesDatatableView() {
   return (
     <>
       <PageHeader
-        title="Ingresses"
+        title="Ingress list"
         breadcrumbs={[
           {
             label: 'Ingresses',

app/react/kubernetes/ingresses/queries.ts

@@ -55,7 +55,7 @@ export function useIngress(
 
 export function useIngresses(
   environmentId: EnvironmentId,
-  namespaces: string[]
+  namespaces?: string[]
 ) {
   return useQuery(
     [
@@ -67,6 +67,9 @@ export function useIngresses(
       'ingress',
     ],
     async () => {
+      if (!namespaces?.length) {
+        return [];
+      }
       const settledIngressesPromise = await Promise.allSettled(
         namespaces.map((namespace) => getIngresses(environmentId, namespace))
       );
@@ -110,7 +113,7 @@ export function useIngresses(
       return filteredIngresses;
     },
     {
-      enabled: namespaces.length > 0,
+      enabled: !!namespaces?.length,
       ...withError('Unable to get ingresses'),
     }
   );