From 59c8b47189a0e057358b435ec6edfa72bef6f973 Mon Sep 17 00:00:00 2001
From: R-Lawton <rlawton@redhat.com>
Date: Thu, 24 Oct 2024 19:11:22 +0100
Subject: [PATCH 1/2] Fixed forms to be less squashed and fixed dns policy to
 not have lb be a requiremnet

Signed-off-by: R-Lawton <rlawton@redhat.com>
---
 .../KuadrantDNSPolicyCreatePage.tsx           | 155 +++++++++++-------
 src/components/KuadrantTLSCreatePage.tsx      |  76 ++++-----
 src/components/dnspolicy/HealthCheckField.tsx |  25 ++-
 .../dnspolicy/LoadBalancingField.tsx          |  90 ++++++----
 src/components/dnspolicy/types.ts             |   4 +-
 src/components/kuadrant.css                   |   1 +
 6 files changed, 217 insertions(+), 134 deletions(-)

diff --git a/src/components/KuadrantDNSPolicyCreatePage.tsx b/src/components/KuadrantDNSPolicyCreatePage.tsx
index 8df526d..c063469 100644
--- a/src/components/KuadrantDNSPolicyCreatePage.tsx
+++ b/src/components/KuadrantDNSPolicyCreatePage.tsx
@@ -47,13 +47,13 @@ const KuadrantDNSPolicyCreatePage: React.FC = () => {
   const [loadBalancing, setLoadBalancing] = React.useState<LoadBalancing>({
     geo: '',
     weight: null,
-    defaultGeo: true,
+    defaultGeo: '',
   });
   const [healthCheck, setHealthCheck] = React.useState<HealthCheck>({
     endpoint: '',
     failureThreshold: null,
     port: null,
-    protocol: null,
+    protocol: '',
   });
   const [providerRefs, setProviderRefs] = React.useState([]);
   const [creationTimestamp, setCreationTimestamp] = React.useState('');
@@ -64,6 +64,9 @@ const KuadrantDNSPolicyCreatePage: React.FC = () => {
   const namespaceEdit = pathSplit[3];
   const [formDisabled, setFormDisabled] = React.useState(false);
   const [create, setCreate] = React.useState(true);
+  const [loadBalancingExpanded, setLoadBalancingExpanded] = React.useState(false);
+  const [healthExpanded, setHealthExpanded] = React.useState(false);
+
   let isFormValid = false;
 
   const createDNSPolicy = () => {
@@ -71,7 +74,11 @@ const KuadrantDNSPolicyCreatePage: React.FC = () => {
       healthCheck.endpoint ||
       healthCheck.failureThreshold ||
       healthCheck.port ||
-      healthCheck.protocol;
+      healthCheck.protocol != '';
+
+    const hasLoadBalancing =
+      loadBalancing.geo || loadBalancing.defaultGeo != '' || loadBalancing.weight;
+
     return {
       apiVersion:
         resourceGVKMapping['DNSPolicy'].group + '/' + resourceGVKMapping['DNSPolicy'].version,
@@ -88,13 +95,18 @@ const KuadrantDNSPolicyCreatePage: React.FC = () => {
           kind: 'Gateway',
           name: selectedGateway.name,
         },
-        loadBalancing: {
-          weight: loadBalancing.weight,
-          geo: loadBalancing.geo,
-          defaultGeo: loadBalancing.defaultGeo,
-        },
         providerRefs: providerRefs.length > 0 ? [providerRefs[0]] : [],
-
+        ...(hasLoadBalancing
+          ? {
+              loadBalancing: {
+                ...(loadBalancing?.weight ? { weight: loadBalancing.weight } : {}),
+                ...(loadBalancing?.geo ? { geo: loadBalancing.geo } : {}),
+                ...(loadBalancing.defaultGeo !== ''
+                  ? { defaultGeo: loadBalancing.defaultGeo }
+                  : {}),
+              },
+            }
+          : {}),
         ...(hasHealthCheck
           ? {
               healthCheck: {
@@ -256,17 +268,23 @@ const KuadrantDNSPolicyCreatePage: React.FC = () => {
   const handleCancelResource = () => {
     handleCancel(selectedNamespace, dnsPolicy, history);
   };
-
-  if (
-    policyName &&
-    selectedNamespace &&
-    selectedGateway.name &&
-    setProviderRefs &&
-    loadBalancing.geo &&
-    loadBalancing.weight
-  ) {
-    isFormValid = true;
-  }
+  const formValidation = () => {
+    if (
+      policyName &&
+      selectedGateway.name &&
+      providerRefs.length > 0 &&
+      (!loadBalancingExpanded ||
+        (loadBalancing.geo && loadBalancing.weight && loadBalancing.defaultGeo !== '')) &&
+      (!healthExpanded ||
+        (healthCheck.endpoint &&
+          healthCheck.failureThreshold > 0 &&
+          healthCheck.port > 0 &&
+          healthCheck.protocol !== ''))
+    ) {
+      isFormValid = true;
+    }
+    return isFormValid;
+  };
 
   return (
     <>
@@ -313,48 +331,71 @@ const KuadrantDNSPolicyCreatePage: React.FC = () => {
       {createView === 'form' ? (
         <PageSection variant="light">
           <Form className="co-m-pane__form">
-            <div>
-              <FormGroup label={t('Policy Name')} isRequired fieldId="policy-name">
-                <TextInput
-                  isRequired
-                  type="text"
-                  id="policy-name"
-                  name="policy-name"
-                  value={policyName}
-                  onChange={handlePolicyChange}
-                  isDisabled={formDisabled}
-                  placeholder={t('Policy name')}
-                />
-                <FormHelperText>
-                  <HelperText>
-                    <HelperTextItem>{t('Unique name of the DNS Policy')}</HelperTextItem>
-                  </HelperText>
-                </FormHelperText>
-              </FormGroup>
-              <GatewaySelect selectedGateway={selectedGateway} onChange={setSelectedGateway} />
-              <FormGroup label={t('Provider Ref')} isRequired fieldId="Provider-ref">
-                <TextInput
-                  isRequired
-                  type="text"
-                  id="provider-ref"
-                  name="provider-ref"
-                  value={providerRefs.length > 0 ? providerRefs[0].name : ''}
-                  onChange={handleProviderRefs}
-                  placeholder={t('Provider Ref')}
-                />
-              </FormGroup>
-              <LoadBalancingField loadBalancing={loadBalancing} onChange={setLoadBalancing} />
-              <ExpandableSection toggleText={t('Health Check')}>
-                <HealthCheckField healthCheck={healthCheck} onChange={setHealthCheck} />
-              </ExpandableSection>
-            </div>
-            <ActionGroup>
+            <FormGroup label={t('Policy Name')} isRequired fieldId="policy-name">
+              <TextInput
+                isRequired
+                type="text"
+                id="policy-name"
+                name="policy-name"
+                value={policyName}
+                onChange={handlePolicyChange}
+                isDisabled={formDisabled}
+                placeholder={t('Policy name')}
+              />
+              <FormHelperText>
+                <HelperText>
+                  <HelperTextItem>{t('Unique name of the DNS Policy')}</HelperTextItem>
+                </HelperText>
+              </FormHelperText>
+            </FormGroup>
+            <GatewaySelect selectedGateway={selectedGateway} onChange={setSelectedGateway} />
+            <FormGroup label={t('Provider Ref')} isRequired fieldId="Provider-ref">
+              <TextInput
+                isRequired
+                type="text"
+                id="provider-ref"
+                name="provider-ref"
+                value={providerRefs.length > 0 ? providerRefs[0].name : ''}
+                onChange={handleProviderRefs}
+                placeholder={t('Provider Ref')}
+              />
+              <FormHelperText>
+                <HelperText>
+                  <HelperTextItem>
+                    {t(
+                      'Reference to an existing secret resource containing DNS provider credentials and configuration',
+                    )}
+                  </HelperTextItem>
+                </HelperText>
+              </FormHelperText>
+            </FormGroup>
+            <ExpandableSection
+              toggleText={t('LoadBalancing')}
+              className="pf-u-mb-0"
+              isExpanded={loadBalancingExpanded}
+              onToggle={() => setLoadBalancingExpanded(!loadBalancingExpanded)}
+            >
+              <LoadBalancingField
+                loadBalancing={loadBalancing}
+                onChange={setLoadBalancing}
+                formDisabled={formDisabled}
+              />
+            </ExpandableSection>
+            <ExpandableSection
+              toggleText={t('Health Check')}
+              className="pf-u-mt-0"
+              isExpanded={healthExpanded}
+              onToggle={() => setHealthExpanded(!healthExpanded)}
+            >
+              <HealthCheckField healthCheck={healthCheck} onChange={setHealthCheck} />
+            </ExpandableSection>
+            <ActionGroup className="pf-u-mt-0">
               <KuadrantCreateUpdate
                 model={dnsPolicyModel}
                 resource={dnsPolicy}
                 policyType="dns"
                 history={history}
-                validation={isFormValid}
+                validation={formValidation()}
               />
               <Button variant="link" onClick={handleCancelResource}>
                 {t('Cancel')}
diff --git a/src/components/KuadrantTLSCreatePage.tsx b/src/components/KuadrantTLSCreatePage.tsx
index b8e8dc1..a720c42 100644
--- a/src/components/KuadrantTLSCreatePage.tsx
+++ b/src/components/KuadrantTLSCreatePage.tsx
@@ -295,47 +295,43 @@ const KuadrantTLSCreatePage: React.FC = () => {
                   </HelperText>
                 </FormHelperText>
               </FormGroup>
-              <FormGroup fieldId="gateway-select" isRequired>
-                <GatewaySelect selectedGateway={selectedGateway} onChange={setSelectedGateway} />
-              </FormGroup>
-              <FormGroup fieldId="certmanger-select" isRequired>
-                <FormGroup
-                  role="radiogroup"
-                  isInline
-                  fieldId="cert-manager-issuer"
-                  label={t('Cert manager issuer type')}
-                  isRequired
-                  aria-labelledby="issuer-label"
-                >
-                  <Radio
-                    label={t('Cluster issuer')}
-                    isChecked={certIssuerType === 'clusterissuer'}
-                    onChange={() => {
-                      setCertIssuerType('clusterissuer');
-                    }}
-                    id="cluster-issuer"
-                    name="issuer"
-                  />
-                  <Radio
-                    label={t('Issuer')}
-                    isChecked={certIssuerType === 'issuer'}
-                    onChange={() => {
-                      setCertIssuerType('issuer');
-                    }}
-                    id="issuer"
-                    name="issuer"
-                  />
-                </FormGroup>
-                {certIssuerType === 'clusterissuer' ? (
-                  <ClusterIssuerSelect
-                    selectedClusterIssuer={selectedClusterIssuers}
-                    onChange={setSelectedClusterIssuers}
-                  />
-                ) : (
-                  <IssuerSelect selectedIssuer={selectedIssuer} onChange={setSelectedIssuers} />
-                )}
+              <GatewaySelect selectedGateway={selectedGateway} onChange={setSelectedGateway} />
+              <FormGroup
+                role="radiogroup"
+                isInline
+                fieldId="cert-manager-issuer"
+                label={t('Cert manager issuer type')}
+                isRequired
+                aria-labelledby="issuer-label"
+              >
+                <Radio
+                  label={t('Cluster issuer')}
+                  isChecked={certIssuerType === 'clusterissuer'}
+                  onChange={() => {
+                    setCertIssuerType('clusterissuer');
+                  }}
+                  id="cluster-issuer"
+                  name="issuer"
+                />
+                <Radio
+                  label={t('Issuer')}
+                  isChecked={certIssuerType === 'issuer'}
+                  onChange={() => {
+                    setCertIssuerType('issuer');
+                  }}
+                  id="issuer"
+                  name="issuer"
+                />
               </FormGroup>
-              <ActionGroup>
+              {certIssuerType === 'clusterissuer' ? (
+                <ClusterIssuerSelect
+                  selectedClusterIssuer={selectedClusterIssuers}
+                  onChange={setSelectedClusterIssuers}
+                />
+              ) : (
+                <IssuerSelect selectedIssuer={selectedIssuer} onChange={setSelectedIssuers} />
+              )}
+              <ActionGroup className="pf-u-mt-0">
                 <KuadrantCreateUpdate
                   model={tlsPolicyModel}
                   resource={tlsPolicy}
diff --git a/src/components/dnspolicy/HealthCheckField.tsx b/src/components/dnspolicy/HealthCheckField.tsx
index 7319481..760da42 100644
--- a/src/components/dnspolicy/HealthCheckField.tsx
+++ b/src/components/dnspolicy/HealthCheckField.tsx
@@ -14,7 +14,12 @@ const HealthCheckField: React.FC<HealthCheckProps> = ({ healthCheck, onChange })
 
   return (
     <>
-      <FormGroup label={t('Endpoint')} isRequired fieldId="health-check-endpoint">
+      <FormGroup
+        label={t('Endpoint')}
+        isRequired
+        fieldId="health-check-endpoint"
+        className="pf-u-mb-md"
+      >
         <TextInput
           id="health-check-endpoint"
           value={healthCheck.endpoint}
@@ -23,7 +28,12 @@ const HealthCheckField: React.FC<HealthCheckProps> = ({ healthCheck, onChange })
           placeholder="/"
         />
       </FormGroup>
-      <FormGroup label={t('Failure Threshold')} isRequired fieldId="health-check-failure-threshold">
+      <FormGroup
+        label={t('Failure Threshold')}
+        isRequired
+        fieldId="health-check-failure-threshold"
+        className="pf-u-mb-md"
+      >
         <TextInput
           id="health-check-failure-threshold"
           type="number"
@@ -36,7 +46,7 @@ const HealthCheckField: React.FC<HealthCheckProps> = ({ healthCheck, onChange })
           placeholder="0"
         />
       </FormGroup>
-      <FormGroup label={t('Port')} isRequired fieldId="health-check-port">
+      <FormGroup label={t('Port')} isRequired fieldId="health-check-port" className="pf-u-mb-md">
         <TextInput
           id="health-check-port"
           type="number"
@@ -49,7 +59,12 @@ const HealthCheckField: React.FC<HealthCheckProps> = ({ healthCheck, onChange })
           placeholder="0"
         />
       </FormGroup>
-      <FormGroup label={t('Protocol')} isRequired fieldId="health-check-protocol">
+      <FormGroup
+        label={t('Protocol')}
+        isRequired
+        fieldId="health-check-protocol"
+        className="pf-u-mb-md"
+      >
         <FormSelect
           id="health-check-protocol"
           value={healthCheck.protocol}
@@ -59,7 +74,7 @@ const HealthCheckField: React.FC<HealthCheckProps> = ({ healthCheck, onChange })
           isRequired
           aria-label={t('Select a Protocol')}
         >
-          <FormSelectOption key="placeholder" value="" label={t('Select a Protocol')} isDisabled />
+          <FormSelectOption key="placeholder" value="" label={t('Select a Protocol')} />
           <FormSelectOption key="HTTP" value="HTTP" label="HTTP" />
           <FormSelectOption key="HTTPS" value="HTTPS" label="HTTPS" />
         </FormSelect>
diff --git a/src/components/dnspolicy/LoadBalancingField.tsx b/src/components/dnspolicy/LoadBalancingField.tsx
index c9c211f..b6f376c 100644
--- a/src/components/dnspolicy/LoadBalancingField.tsx
+++ b/src/components/dnspolicy/LoadBalancingField.tsx
@@ -3,10 +3,10 @@ import * as React from 'react';
 import {
   FormGroup,
   TextInput,
+  Radio,
   FormHelperText,
   HelperText,
   HelperTextItem,
-  Radio,
 } from '@patternfly/react-core';
 import { LoadBalancing } from './types';
 import { useTranslation } from 'react-i18next';
@@ -14,19 +14,24 @@ import { useTranslation } from 'react-i18next';
 interface LoadBalancingProps {
   loadBalancing: LoadBalancing;
   onChange: (updated: LoadBalancing) => void;
+  formDisabled: boolean;
 }
 
-const LoadBalancingField: React.FC<LoadBalancingProps> = ({ loadBalancing, onChange }) => {
+const LoadBalancingField: React.FC<LoadBalancingProps> = ({
+  loadBalancing,
+  onChange,
+  formDisabled,
+}) => {
   const { t } = useTranslation('plugin__kuadrant-console-plugin');
 
   return (
     <>
-      <FormHelperText>
-        <HelperText>
-          <HelperTextItem>{t('Load balancing options:.')}</HelperTextItem>
-        </HelperText>
-      </FormHelperText>
-      <FormGroup label={t('Weight')} isRequired fieldId="weight">
+      <FormGroup
+        label={t('Load balancing Weight')}
+        isRequired
+        fieldId="weight"
+        className="pf-u-mb-md"
+      >
         <TextInput
           id="weight"
           value={loadBalancing.weight}
@@ -39,29 +44,46 @@ const LoadBalancingField: React.FC<LoadBalancingProps> = ({ loadBalancing, onCha
           isRequired
           type="number"
           placeholder="0"
+          isDisabled={formDisabled}
         />
-        <FormGroup label={t('Geo')} isRequired fieldId="geo">
-          <TextInput
-            id="geo"
-            value={loadBalancing.geo}
-            onChange={(event) =>
-              onChange({
-                ...loadBalancing,
-                geo: String(event.currentTarget.value),
-              })
-            }
-            isRequired
-            placeholder={t("Geography Label (e.g. 'eu')")}
-          />
-        </FormGroup>
-        <FormGroup
-          role="radiogroup"
-          isInline
-          fieldId="default-geo"
-          label={t('Default Geo')}
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>
+              {t('Weight value to apply to weighted endpoints default: 120')}
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      </FormGroup>
+      <FormGroup label={t('Load balancing Geo')} isRequired fieldId="geo" className="pf-u-mb-md">
+        <TextInput
+          id="geo"
+          value={loadBalancing.geo}
+          onChange={(event) =>
+            onChange({
+              ...loadBalancing,
+              geo: String(event.currentTarget.value),
+            })
+          }
           isRequired
-          aria-labelledby="issuer-label"
-        >
+          placeholder={t("Geography Label (e.g. 'EU')")}
+          isDisabled={formDisabled}
+        />
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>{t('Geo value to apply to geo endpoints')}</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      </FormGroup>
+      <FormGroup
+        role="radiogroup"
+        hasNoPaddingTop
+        fieldId="default-geo"
+        label={t('Default Geo')}
+        isRequired
+        className="pf-u-mb-md"
+        aria-labelledby="issuer-label"
+      >
+        <div className="pf-u-display-flex pf-u-align-items-center">
           <Radio
             label={t('Enabled')}
             isChecked={loadBalancing.defaultGeo === true}
@@ -73,6 +95,8 @@ const LoadBalancingField: React.FC<LoadBalancingProps> = ({ loadBalancing, onCha
             }
             id="default-geo-enabled"
             name="default-geo"
+            className="pf-u-mr-md"
+            isDisabled={formDisabled}
           />
           <Radio
             label={t('Disabled')}
@@ -85,8 +109,14 @@ const LoadBalancingField: React.FC<LoadBalancingProps> = ({ loadBalancing, onCha
             }
             id="default-geo-disabled"
             name="default-geo"
+            isDisabled={formDisabled}
           />
-        </FormGroup>
+        </div>
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>{t('Geo value to apply to geo endpoints')}</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
       </FormGroup>
     </>
   );
diff --git a/src/components/dnspolicy/types.ts b/src/components/dnspolicy/types.ts
index 60fd3f2..53e37a0 100644
--- a/src/components/dnspolicy/types.ts
+++ b/src/components/dnspolicy/types.ts
@@ -1,12 +1,12 @@
 export interface LoadBalancing {
   geo: string;
   weight: number;
-  defaultGeo: boolean;
+  defaultGeo: boolean | '';
 }
 
 export interface HealthCheck {
   endpoint: string;
   failureThreshold: number;
   port: number;
-  protocol: 'HTTP' | 'HTTPS';
+  protocol: 'HTTP' | 'HTTPS' | '';
 }
diff --git a/src/components/kuadrant.css b/src/components/kuadrant.css
index d8dfd77..d2c7022 100644
--- a/src/components/kuadrant.css
+++ b/src/components/kuadrant.css
@@ -150,3 +150,4 @@
 .kuadrant-overview-create-list, .kuadrant-overview-create-button {
   font-family: RedHatText, helvetica, arial, sans-serif;
    }
+

From c18193973ca8e7fd1cb2cb0d99f4f997517ef85c Mon Sep 17 00:00:00 2001
From: R-Lawton <rlawton@redhat.com>
Date: Thu, 24 Oct 2024 19:17:02 +0100
Subject: [PATCH 2/2] i18n

Signed-off-by: R-Lawton <rlawton@redhat.com>
---
 locales/en/plugin__kuadrant-console-plugin.json | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/locales/en/plugin__kuadrant-console-plugin.json b/locales/en/plugin__kuadrant-console-plugin.json
index e66a35e..dfb915e 100644
--- a/locales/en/plugin__kuadrant-console-plugin.json
+++ b/locales/en/plugin__kuadrant-console-plugin.json
@@ -50,8 +50,8 @@
   "Gateway API Target Reference": "Gateway API Target Reference",
   "Gateway: Reference to a Kubernetes resource that the policy attaches to. To create an additional gateway go to": "Gateway: Reference to a Kubernetes resource that the policy attaches to. To create an additional gateway go to",
   "Gateways": "Gateways",
-  "Geo": "Geo",
-  "Geography Label (e.g. 'eu')": "Geography Label (e.g. 'eu')",
+  "Geo value to apply to geo endpoints": "Geo value to apply to geo endpoints",
+  "Geography Label (e.g. 'EU')": "Geography Label (e.g. 'EU')",
   "Getting started resources": "Getting started resources",
   "Health Check": "Health Check",
   "Hide for session": "Hide for session",
@@ -67,7 +67,9 @@
   "Limit": "Limit",
   "Limit Name": "Limit Name",
   "Limit Name is required!": "Limit Name is required!",
-  "Load balancing options:.": "Load balancing options:.",
+  "Load balancing Geo": "Load balancing Geo",
+  "Load balancing Weight": "Load balancing Weight",
+  "LoadBalancing": "LoadBalancing",
   "Loading..": "Loading..",
   "Name": "Name",
   "Namespace": "Namespace",
@@ -85,6 +87,7 @@
   "RateLimit": "RateLimit",
   "RateLimitPolicy": "RateLimitPolicy",
   "Read about the latest information and key features in the Kuadrant highlights.": "Read about the latest information and key features in the Kuadrant highlights.",
+  "Reference to an existing secret resource containing DNS provider credentials and configuration": "Reference to an existing secret resource containing DNS provider credentials and configuration",
   "Release Notes": "Release Notes",
   "Save": "Save",
   "Select a gateway": "Select a gateway",
@@ -109,7 +112,7 @@
   "View all quick starts": "View all quick starts",
   "View Documentation": "View Documentation",
   "Visit the blog": "Visit the blog",
-  "Weight": "Weight",
+  "Weight value to apply to weighted endpoints default: 120": "Weight value to apply to weighted endpoints default: 120",
   "YAML View": "YAML View",
   "You can view and create HTTPRoutes": "You can view and create HTTPRoutes"
 }
\ No newline at end of file