From 362dbb3a6d043841f7a7bf27436de54a9aae82e3 Mon Sep 17 00:00:00 2001
From: David Edler <david.edler@canonical.com>
Date: Wed, 18 Dec 2024 17:27:03 +0100
Subject: [PATCH] feat(network) key search will hide empty sections. add no
 results found message

Signed-off-by: David Edler <david.edler@canonical.com>
---
 src/pages/networks/forms/NetworkForm.tsx      |  18 +-
 .../networks/forms/NetworkFormBridge.tsx      | 100 +++----
 src/pages/networks/forms/NetworkFormDns.tsx   | 142 +++++-----
 src/pages/networks/forms/NetworkFormIpv4.tsx  | 218 ++++++++--------
 src/pages/networks/forms/NetworkFormIpv6.tsx  | 244 +++++++++---------
 src/pages/networks/forms/NetworkFormOvn.tsx   |  62 ++---
 6 files changed, 407 insertions(+), 377 deletions(-)

diff --git a/src/pages/networks/forms/NetworkForm.tsx b/src/pages/networks/forms/NetworkForm.tsx
index dc2e9bc67c..f5d43919e8 100644
--- a/src/pages/networks/forms/NetworkForm.tsx
+++ b/src/pages/networks/forms/NetworkForm.tsx
@@ -173,15 +173,19 @@ const NetworkForm: FC<Props> = ({
   const { data: settings } = useSettings();
   const isClustered = isClusteredServer(settings);
   const [query, setQuery] = useState("");
+  const [hasEmptySearchResult, setEmptySearchResult] = useState(false);
 
   const filterRows = (rows: MainTableRow[]) => {
     if (!query) {
       return rows;
     }
-
-    return rows.filter((row) => {
+    const filteredRows = rows.filter((row) => {
       return row.name?.toString()?.toLowerCase().includes(query);
     });
+    if (filteredRows.length > 0) {
+      setEmptySearchResult(false);
+    }
+    return filteredRows;
   };
 
   const availableSections = [GENERAL];
@@ -226,7 +230,7 @@ const NetworkForm: FC<Props> = ({
         dependencies={[notify.notification]}
         belowIds={["form-footer", "status-bar"]}
       >
-        {!formik.values.isCreating && (
+        {!formik.values.isCreating && query.length < 1 && (
           <NetworkTopology formik={formik} project={project} />
         )}
         <Form className="sections" onSubmit={formik.handleSubmit}>
@@ -292,12 +296,18 @@ const NetworkForm: FC<Props> = ({
               />
             </YamlForm>
           )}
+          {hasEmptySearchResult && (
+            <div>No configuration found matching this search.</div>
+          )}
         </Form>
       </ScrollableContainer>
       {section !== slugify(YAML_CONFIGURATION) && (
         <div className="aside">
           <SearchBox
-            onChange={setQuery}
+            onChange={(inputValue) => {
+              setQuery(inputValue);
+              setEmptySearchResult(true);
+            }}
             value={query}
             name="search-setting"
             type="text"
diff --git a/src/pages/networks/forms/NetworkFormBridge.tsx b/src/pages/networks/forms/NetworkFormBridge.tsx
index 3052ec4a00..d65b106640 100644
--- a/src/pages/networks/forms/NetworkFormBridge.tsx
+++ b/src/pages/networks/forms/NetworkFormBridge.tsx
@@ -14,60 +14,64 @@ interface Props {
 }
 
 const NetworkFormBridge: FC<Props> = ({ formik, filterRows }) => {
-  return (
-    <>
-      <h2 className="p-heading--4" id={slugify(BRIDGE)}>
-        Bridge
-      </h2>
-      <ConfigurationTable
-        rows={filterRows([
-          getConfigurationRow({
-            formik,
-            name: "bridge_mtu",
-            label: "MTU",
-            defaultValue: "",
-            children: <Input type="text" />,
-          }),
+  const rows = filterRows([
+    getConfigurationRow({
+      formik,
+      name: "bridge_mtu",
+      label: "MTU",
+      defaultValue: "",
+      children: <Input type="text" />,
+    }),
+
+    getConfigurationRow({
+      formik,
+      name: "bridge_hwaddr",
+      label: "Hardware address",
+      defaultValue: "",
+      children: <Input type="text" />,
+    }),
 
+    ...(formik.values.networkType === "bridge"
+      ? [
           getConfigurationRow({
             formik,
-            name: "bridge_hwaddr",
-            label: "Hardware address",
+            name: "bridge_driver",
+            label: "Bridge driver",
             defaultValue: "",
-            children: <Input type="text" />,
+            children: (
+              <Select
+                options={[
+                  {
+                    label: "Select option",
+                    value: "",
+                    disabled: true,
+                  },
+                  {
+                    label: "Native",
+                    value: "native",
+                  },
+                  {
+                    label: "Openvswitch",
+                    value: "openvswitch",
+                  },
+                ]}
+              />
+            ),
           }),
+        ]
+      : []),
+  ]);
 
-          ...(formik.values.networkType === "bridge"
-            ? [
-                getConfigurationRow({
-                  formik,
-                  name: "bridge_driver",
-                  label: "Bridge driver",
-                  defaultValue: "",
-                  children: (
-                    <Select
-                      options={[
-                        {
-                          label: "Select option",
-                          value: "",
-                          disabled: true,
-                        },
-                        {
-                          label: "Native",
-                          value: "native",
-                        },
-                        {
-                          label: "Openvswitch",
-                          value: "openvswitch",
-                        },
-                      ]}
-                    />
-                  ),
-                }),
-              ]
-            : []),
-        ])}
-      />
+  if (rows.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <h2 className="p-heading--4" id={slugify(BRIDGE)}>
+        Bridge
+      </h2>
+      <ConfigurationTable rows={rows} />
     </>
   );
 };
diff --git a/src/pages/networks/forms/NetworkFormDns.tsx b/src/pages/networks/forms/NetworkFormDns.tsx
index 695b4f3754..30e52a7fbc 100644
--- a/src/pages/networks/forms/NetworkFormDns.tsx
+++ b/src/pages/networks/forms/NetworkFormDns.tsx
@@ -14,80 +14,84 @@ interface Props {
 }
 
 const NetworkFormDns: FC<Props> = ({ formik, filterRows }) => {
+  const rows = filterRows([
+    ...(formik.values.networkType !== "physical"
+      ? [
+          getConfigurationRow({
+            formik,
+            name: "dns_domain",
+            label: "DNS domain",
+            defaultValue: "",
+            children: <Input type="text" />,
+          }),
+        ]
+      : []),
+
+    ...(formik.values.networkType === "bridge"
+      ? [
+          getConfigurationRow({
+            formik,
+            name: "dns_mode",
+            label: "DNS mode",
+            defaultValue: "",
+            children: (
+              <Select
+                options={[
+                  {
+                    label: "Select option",
+                    value: "",
+                    disabled: true,
+                  },
+                  {
+                    label: "None",
+                    value: "none",
+                  },
+                  {
+                    label: "Managed",
+                    value: "managed",
+                  },
+                  {
+                    label: "Dynamic",
+                    value: "dynamic",
+                  },
+                ]}
+              />
+            ),
+          }),
+        ]
+      : []),
+
+    ...(formik.values.networkType === "physical"
+      ? [
+          getConfigurationRow({
+            formik,
+            name: "dns_nameservers",
+            label: "DNS nameservers",
+            defaultValue: "",
+            children: <Input type="text" />,
+          }),
+        ]
+      : [
+          getConfigurationRow({
+            formik,
+            name: "dns_search",
+            label: "DNS search",
+            defaultValue: "",
+            children: <Textarea />,
+          }),
+        ]),
+  ]);
+
+  if (rows.length === 0) {
+    return null;
+  }
+
   return (
     <>
       <h2 className="p-heading--4" id={slugify(DNS)}>
         DNS
       </h2>
-      <ConfigurationTable
-        rows={filterRows([
-          ...(formik.values.networkType !== "physical"
-            ? [
-                getConfigurationRow({
-                  formik,
-                  name: "dns_domain",
-                  label: "DNS domain",
-                  defaultValue: "",
-                  children: <Input type="text" />,
-                }),
-              ]
-            : []),
-
-          ...(formik.values.networkType === "bridge"
-            ? [
-                getConfigurationRow({
-                  formik,
-                  name: "dns_mode",
-                  label: "DNS mode",
-                  defaultValue: "",
-                  children: (
-                    <Select
-                      options={[
-                        {
-                          label: "Select option",
-                          value: "",
-                          disabled: true,
-                        },
-                        {
-                          label: "None",
-                          value: "none",
-                        },
-                        {
-                          label: "Managed",
-                          value: "managed",
-                        },
-                        {
-                          label: "Dynamic",
-                          value: "dynamic",
-                        },
-                      ]}
-                    />
-                  ),
-                }),
-              ]
-            : []),
-
-          ...(formik.values.networkType === "physical"
-            ? [
-                getConfigurationRow({
-                  formik,
-                  name: "dns_nameservers",
-                  label: "DNS nameservers",
-                  defaultValue: "",
-                  children: <Input type="text" />,
-                }),
-              ]
-            : [
-                getConfigurationRow({
-                  formik,
-                  name: "dns_search",
-                  label: "DNS search",
-                  defaultValue: "",
-                  children: <Textarea />,
-                }),
-              ]),
-        ])}
-      />
+      <ConfigurationTable rows={rows} />
     </>
   );
 };
diff --git a/src/pages/networks/forms/NetworkFormIpv4.tsx b/src/pages/networks/forms/NetworkFormIpv4.tsx
index 9e14e52c65..af197853ee 100644
--- a/src/pages/networks/forms/NetworkFormIpv4.tsx
+++ b/src/pages/networks/forms/NetworkFormIpv4.tsx
@@ -17,120 +17,124 @@ interface Props {
 const NetworkFormIpv4: FC<Props> = ({ formik, filterRows }) => {
   const hasDhcp = formik.values.ipv4_dhcp !== "false";
 
-  return (
-    <>
-      <h2 className="p-heading--4" id={slugify(IPV4)}>
-        IPv4
-      </h2>
-      <ConfigurationTable
-        rows={filterRows([
-          ...(formik.values.networkType !== "physical"
-            ? [
-                getConfigurationRow({
-                  formik,
-                  name: "ipv4_nat",
-                  label: "IPv4 NAT",
-                  defaultValue: "",
-                  children: <Select options={optionTrueFalse} />,
-                  disabled: formik.values.ipv4_address === "none",
-                  disabledReason: "IPv4 address is set to none",
-                }),
-              ]
-            : []),
+  const rows = filterRows([
+    ...(formik.values.networkType !== "physical"
+      ? [
+          getConfigurationRow({
+            formik,
+            name: "ipv4_nat",
+            label: "IPv4 NAT",
+            defaultValue: "",
+            children: <Select options={optionTrueFalse} />,
+            disabled: formik.values.ipv4_address === "none",
+            disabledReason: "IPv4 address is set to none",
+          }),
+        ]
+      : []),
+
+    ...(formik.values.networkType !== "physical"
+      ? [
+          getConfigurationRow({
+            formik,
+            name: "ipv4_dhcp",
+            label: "IPv4 DHCP",
+            defaultValue: "",
+            children: <Select options={optionTrueFalse} />,
+          }),
+        ]
+      : []),
 
-          ...(formik.values.networkType !== "physical"
-            ? [
-                getConfigurationRow({
-                  formik,
-                  name: "ipv4_dhcp",
-                  label: "IPv4 DHCP",
-                  defaultValue: "",
-                  children: <Select options={optionTrueFalse} />,
-                }),
-              ]
-            : []),
+    ...(formik.values.networkType !== "ovn" &&
+    formik.values.networkType !== "physical"
+      ? [
+          getConfigurationRow({
+            formik,
+            name: "ipv4_dhcp_expiry",
+            label: "IPv4 DHCP expiry",
+            defaultValue: "",
+            disabled: !hasDhcp,
+            disabledReason: "IPv4 DHCP is disabled",
+            children: <Input type="text" />,
+          }),
 
-          ...(formik.values.networkType !== "ovn" &&
-          formik.values.networkType !== "physical"
-            ? [
-                getConfigurationRow({
-                  formik,
-                  name: "ipv4_dhcp_expiry",
-                  label: "IPv4 DHCP expiry",
-                  defaultValue: "",
-                  disabled: !hasDhcp,
-                  disabledReason: "IPv4 DHCP is disabled",
-                  children: <Input type="text" />,
-                }),
+          getConfigurationRow({
+            formik,
+            name: "ipv4_dhcp_ranges",
+            label: "IPv4 DHCP ranges",
+            defaultValue: "",
+            disabled: !hasDhcp,
+            disabledReason: "IPv4 DHCP is disabled",
+            children: <Textarea />,
+          }),
+        ]
+      : []),
 
-                getConfigurationRow({
-                  formik,
-                  name: "ipv4_dhcp_ranges",
-                  label: "IPv4 DHCP ranges",
-                  defaultValue: "",
-                  disabled: !hasDhcp,
-                  disabledReason: "IPv4 DHCP is disabled",
-                  children: <Textarea />,
-                }),
-              ]
-            : []),
+    ...(formik.values.networkType === "ovn"
+      ? [
+          getConfigurationRow({
+            formik,
+            name: "ipv4_l3only",
+            label: "IPv4 L3 only",
+            defaultValue: "",
+            children: <Select options={optionTrueFalse} />,
+          }),
+        ]
+      : []),
 
-          ...(formik.values.networkType === "ovn"
-            ? [
-                getConfigurationRow({
-                  formik,
-                  name: "ipv4_l3only",
-                  label: "IPv4 L3 only",
-                  defaultValue: "",
-                  children: <Select options={optionTrueFalse} />,
-                }),
-              ]
-            : []),
+    ...(formik.values.networkType !== "ovn"
+      ? [
+          getConfigurationRow({
+            formik,
+            name: "ipv4_ovn_ranges",
+            label: "IPv4 OVN ranges",
+            defaultValue: "",
+            children: <Textarea />,
+          }),
+        ]
+      : []),
 
-          ...(formik.values.networkType !== "ovn"
-            ? [
-                getConfigurationRow({
-                  formik,
-                  name: "ipv4_ovn_ranges",
-                  label: "IPv4 OVN ranges",
-                  defaultValue: "",
-                  children: <Textarea />,
-                }),
-              ]
-            : []),
+    ...(["bridge", "physical"].includes(formik.values.networkType)
+      ? [
+          getConfigurationRow({
+            formik,
+            name: "ipv4_routes",
+            label: "IPv4 routes",
+            defaultValue: "",
+            children: <Textarea />,
+          }),
+        ]
+      : []),
 
-          ...(["bridge", "physical"].includes(formik.values.networkType)
-            ? [
-                getConfigurationRow({
-                  formik,
-                  name: "ipv4_routes",
-                  label: "IPv4 routes",
-                  defaultValue: "",
-                  children: <Textarea />,
-                }),
-              ]
-            : []),
+    ...(formik.values.networkType === "physical"
+      ? [
+          getConfigurationRow({
+            formik,
+            name: "ipv4_gateway",
+            label: "IPv4 gateway",
+            defaultValue: "",
+            children: <Textarea />,
+          }),
+          getConfigurationRow({
+            formik,
+            name: "ipv4_routes_anycast",
+            label: "IPv4 routes anycast",
+            defaultValue: "",
+            children: <Select options={optionTrueFalse} />,
+          }),
+        ]
+      : []),
+  ]);
 
-          ...(formik.values.networkType === "physical"
-            ? [
-                getConfigurationRow({
-                  formik,
-                  name: "ipv4_gateway",
-                  label: "IPv4 gateway",
-                  defaultValue: "",
-                  children: <Textarea />,
-                }),
-                getConfigurationRow({
-                  formik,
-                  name: "ipv4_routes_anycast",
-                  label: "IPv4 routes anycast",
-                  defaultValue: "",
-                  children: <Select options={optionTrueFalse} />,
-                }),
-              ]
-            : []),
-        ])}
-      />
+  if (rows.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <h2 className="p-heading--4" id={slugify(IPV4)}>
+        IPv4
+      </h2>
+      <ConfigurationTable rows={rows} />
     </>
   );
 };
diff --git a/src/pages/networks/forms/NetworkFormIpv6.tsx b/src/pages/networks/forms/NetworkFormIpv6.tsx
index 5cbe45d741..a9af8bfa8f 100644
--- a/src/pages/networks/forms/NetworkFormIpv6.tsx
+++ b/src/pages/networks/forms/NetworkFormIpv6.tsx
@@ -17,134 +17,138 @@ interface Props {
 const NetworkFormIpv6: FC<Props> = ({ formik, filterRows }) => {
   const hasDhcp = formik.values.ipv6_dhcp !== "false";
 
-  return (
-    <>
-      <h2 className="p-heading--4" id={slugify(IPV6)}>
-        IPv6
-      </h2>
-      <ConfigurationTable
-        rows={filterRows([
-          ...(formik.values.networkType !== "physical"
-            ? [
-                getConfigurationRow({
-                  formik,
-                  name: "ipv6_nat",
-                  label: "IPv6 NAT",
-                  defaultValue: "",
-                  children: <Select options={optionTrueFalse} />,
-                  disabled: formik.values.ipv6_address === "none",
-                  disabledReason: "IPv6 address is set to none",
-                }),
-              ]
-            : []),
+  const rows = filterRows([
+    ...(formik.values.networkType !== "physical"
+      ? [
+          getConfigurationRow({
+            formik,
+            name: "ipv6_nat",
+            label: "IPv6 NAT",
+            defaultValue: "",
+            children: <Select options={optionTrueFalse} />,
+            disabled: formik.values.ipv6_address === "none",
+            disabledReason: "IPv6 address is set to none",
+          }),
+        ]
+      : []),
+
+    ...(formik.values.networkType !== "physical"
+      ? [
+          getConfigurationRow({
+            formik,
+            name: "ipv6_dhcp",
+            label: "IPv6 DHCP",
+            defaultValue: "",
+            children: <Select options={optionTrueFalse} />,
+          }),
+        ]
+      : []),
 
-          ...(formik.values.networkType !== "physical"
-            ? [
-                getConfigurationRow({
-                  formik,
-                  name: "ipv6_dhcp",
-                  label: "IPv6 DHCP",
-                  defaultValue: "",
-                  children: <Select options={optionTrueFalse} />,
-                }),
-              ]
-            : []),
+    ...(formik.values.networkType !== "ovn" &&
+    formik.values.networkType !== "physical"
+      ? [
+          getConfigurationRow({
+            formik,
+            name: "ipv6_dhcp_expiry",
+            label: "IPv6 DHCP expiry",
+            defaultValue: "",
+            disabled: !hasDhcp,
+            disabledReason: "IPv6 DHCP is disabled",
+            children: <Input type="text" />,
+          }),
 
-          ...(formik.values.networkType !== "ovn" &&
-          formik.values.networkType !== "physical"
-            ? [
-                getConfigurationRow({
-                  formik,
-                  name: "ipv6_dhcp_expiry",
-                  label: "IPv6 DHCP expiry",
-                  defaultValue: "",
-                  disabled: !hasDhcp,
-                  disabledReason: "IPv6 DHCP is disabled",
-                  children: <Input type="text" />,
-                }),
+          getConfigurationRow({
+            formik,
+            name: "ipv6_dhcp_ranges",
+            label: "IPv6 DHCP ranges",
+            defaultValue: "",
+            disabled: !hasDhcp,
+            disabledReason: "IPv6 DHCP is disabled",
+            children: <Textarea />,
+          }),
+        ]
+      : []),
 
-                getConfigurationRow({
-                  formik,
-                  name: "ipv6_dhcp_ranges",
-                  label: "IPv6 DHCP ranges",
-                  defaultValue: "",
-                  disabled: !hasDhcp,
-                  disabledReason: "IPv6 DHCP is disabled",
-                  children: <Textarea />,
-                }),
-              ]
-            : []),
+    ...(formik.values.networkType !== "physical"
+      ? [
+          getConfigurationRow({
+            formik,
+            name: "ipv6_dhcp_stateful",
+            label: "IPv6 DHCP stateful",
+            defaultValue: "",
+            disabled: !hasDhcp,
+            disabledReason: "IPv6 DHCP is disabled",
+            children: <Select options={optionTrueFalse} />,
+          }),
+        ]
+      : []),
 
-          ...(formik.values.networkType !== "physical"
-            ? [
-                getConfigurationRow({
-                  formik,
-                  name: "ipv6_dhcp_stateful",
-                  label: "IPv6 DHCP stateful",
-                  defaultValue: "",
-                  disabled: !hasDhcp,
-                  disabledReason: "IPv6 DHCP is disabled",
-                  children: <Select options={optionTrueFalse} />,
-                }),
-              ]
-            : []),
+    ...(formik.values.networkType === "ovn"
+      ? [
+          getConfigurationRow({
+            formik,
+            name: "ipv6_l3only",
+            label: "IPv6 L3 only",
+            defaultValue: "",
+            children: <Select options={optionTrueFalse} />,
+          }),
+        ]
+      : []),
 
-          ...(formik.values.networkType === "ovn"
-            ? [
-                getConfigurationRow({
-                  formik,
-                  name: "ipv6_l3only",
-                  label: "IPv6 L3 only",
-                  defaultValue: "",
-                  children: <Select options={optionTrueFalse} />,
-                }),
-              ]
-            : []),
+    ...(formik.values.networkType !== "ovn"
+      ? [
+          getConfigurationRow({
+            formik,
+            name: "ipv6_ovn_ranges",
+            label: "IPv6 OVN ranges",
+            defaultValue: "",
+            children: <Textarea />,
+          }),
+        ]
+      : []),
 
-          ...(formik.values.networkType !== "ovn"
-            ? [
-                getConfigurationRow({
-                  formik,
-                  name: "ipv6_ovn_ranges",
-                  label: "IPv6 OVN ranges",
-                  defaultValue: "",
-                  children: <Textarea />,
-                }),
-              ]
-            : []),
+    ...(["bridge", "physical"].includes(formik.values.networkType)
+      ? [
+          getConfigurationRow({
+            formik,
+            name: "ipv6_routes",
+            label: "IPv6 routes",
+            defaultValue: "",
+            children: <Textarea />,
+          }),
+        ]
+      : []),
 
-          ...(["bridge", "physical"].includes(formik.values.networkType)
-            ? [
-                getConfigurationRow({
-                  formik,
-                  name: "ipv6_routes",
-                  label: "IPv6 routes",
-                  defaultValue: "",
-                  children: <Textarea />,
-                }),
-              ]
-            : []),
+    ...(formik.values.networkType === "physical"
+      ? [
+          getConfigurationRow({
+            formik,
+            name: "ipv6_gateway",
+            label: "IPv6 gateway",
+            defaultValue: "",
+            children: <Textarea />,
+          }),
+          getConfigurationRow({
+            formik,
+            name: "ipv6_routes_anycast",
+            label: "IPv6 routes anycast",
+            defaultValue: "",
+            children: <Select options={optionTrueFalse} />,
+          }),
+        ]
+      : []),
+  ]);
 
-          ...(formik.values.networkType === "physical"
-            ? [
-                getConfigurationRow({
-                  formik,
-                  name: "ipv6_gateway",
-                  label: "IPv6 gateway",
-                  defaultValue: "",
-                  children: <Textarea />,
-                }),
-                getConfigurationRow({
-                  formik,
-                  name: "ipv6_routes_anycast",
-                  label: "IPv6 routes anycast",
-                  defaultValue: "",
-                  children: <Select options={optionTrueFalse} />,
-                }),
-              ]
-            : []),
-        ])}
-      />
+  if (rows.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <h2 className="p-heading--4" id={slugify(IPV6)}>
+        IPv6
+      </h2>
+      <ConfigurationTable rows={rows} />
     </>
   );
 };
diff --git a/src/pages/networks/forms/NetworkFormOvn.tsx b/src/pages/networks/forms/NetworkFormOvn.tsx
index a6832fe237..92927aade9 100644
--- a/src/pages/networks/forms/NetworkFormOvn.tsx
+++ b/src/pages/networks/forms/NetworkFormOvn.tsx
@@ -14,40 +14,44 @@ interface Props {
 }
 
 const NetworkFormOvn: FC<Props> = ({ formik, filterRows }) => {
+  const rows = filterRows([
+    getConfigurationRow({
+      formik,
+      name: "ovn_ingress_mode",
+      label: "OVN ingress mode",
+      defaultValue: "",
+      children: (
+        <Select
+          options={[
+            {
+              label: "Select option",
+              value: "",
+              disabled: true,
+            },
+            {
+              label: "l2proxy",
+              value: "l2proxy",
+            },
+            {
+              label: "routed",
+              value: "routed",
+            },
+          ]}
+        />
+      ),
+    }),
+  ]);
+
+  if (rows.length === 0) {
+    return null;
+  }
+
   return (
     <>
       <h2 className="p-heading--4" id={slugify(OVN)}>
         OVN
       </h2>
-      <ConfigurationTable
-        rows={filterRows([
-          getConfigurationRow({
-            formik,
-            name: "ovn_ingress_mode",
-            label: "OVN ingress mode",
-            defaultValue: "",
-            children: (
-              <Select
-                options={[
-                  {
-                    label: "Select option",
-                    value: "",
-                    disabled: true,
-                  },
-                  {
-                    label: "l2proxy",
-                    value: "l2proxy",
-                  },
-                  {
-                    label: "routed",
-                    value: "routed",
-                  },
-                ]}
-              />
-            ),
-          }),
-        ])}
-      />
+      <ConfigurationTable rows={rows} />
     </>
   );
 };