WIP MGMT-12274 Stateless UI

ui/.gitignore

@@ -7,6 +7,7 @@ frontend/node_modules
 frontend/coverage
 frontend/src/copy-backend-common
 
+./certs
 ./deploy.yaml
 
 node_modules

ui/backend/src/common/resources/service.ts

@@ -22,5 +22,11 @@ export interface Service extends IResource {
     selector?: Record<string, string>;
     type?: string;
   };
-  status?: unknown;
+  status?: {
+    loadBalancer?: {
+      ingress: {
+        ip?: string;
+      }[];
+    };
+  };
 }

ui/backend/src/common/types.ts

@@ -6,11 +6,13 @@ export type TlsCertificate = {
   'tls.key.filename'?: string;
 };
 
+export type CustomCertsType = {
+  [key: /* ~ domain */ string]: TlsCertificate;
+};
+
 export type ChangeDomainInputType = {
   clusterDomain?: string;
-  customCerts?: {
-    [key: /* ~ domain */ string]: TlsCertificate;
-  };
+  customCerts?: CustomCertsType;
 };
 
 export type ValidateDomainAPIResult = { result: boolean };

ui/components.old/DomainPage/DomainPage.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import { Page } from '../Page';
+import { ContentThreeRows } from '../ContentThreeRows';
+import { WizardProgress, WizardStepType } from '../WizardProgress';
+import { useWizardProgressContext } from '../WizardProgress/WizardProgressContext';
+import { WizardFooter, WizardFooterProps } from '../WizardFooter';
+import { DomainSelector } from './DomainSelector';
+import { useK8SStateContext } from '../K8SStateContext';
+import { validateDomainBackend } from './validateDomain';
+
+export const DomainPage: React.FC = () => {
+  const { setActiveStep } = useWizardProgressContext();
+  const [isValidating, setIsValidating] = React.useState(false);
+  React.useEffect(() => setActiveStep('domain'), [setActiveStep]);
+  const {
+    domainValidation: validation,
+    domain,
+    originalDomain,
+    forceDomainValidation,
+  } = useK8SStateContext();
+
+  const onBeforeNext: WizardFooterProps['onBeforeNext'] = async () => {
+    setIsValidating(true);
+
+    const result =
+      !domain ||
+      (await validateDomainBackend((message) => {
+        // Backend failed to pre-validate the domain (most probably the domain can not be resolved, the "dig" command failed)
+        forceDomainValidation(message);
+      }, domain));
+
+    setIsValidating(false);
+
+    // By returning false here, the transition to the next page as skipped
+    return result;
+  };
+
+  let next: WizardStepType = 'sshkey';
+  if (domain && domain !== originalDomain) {
+    next = 'domaincertsdecision';
+  }
+
+  return (
+    <Page>
+      <ContentThreeRows
+        top={<WizardProgress />}
+        middle={<DomainSelector />}
+        bottom={
+          <WizardFooter
+            back="ingressip"
+            next={next}
+            isNextEnabled={() => !domain || (!validation && !isValidating)}
+            onBeforeNext={onBeforeNext}
+          />
+        }
+      />
+    </Page>
+  );
+};

ui/components.old/DomainPage/index.ts

@@ -0,0 +1 @@
+export * from './DomainPage';

ui/components.old/IpTripletsSelector/IpTripletsSelector.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
+import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens';
+import { TextInput } from '@patternfly/react-core';
+
+import { IpTripletIndex, IpTripletProps, IpTripletSelectorValidationType } from '../types';
+import { IpTriplet } from '../IpTriplet';
+import { addIpDots } from '../utils';
+
+import './IpTripletsSelector.css';
+
+export const IpTripletsSelector: React.FC<{
+  id?: string;
+  address: string;
+  setAddress: IpTripletProps['setAddress'];
+  validation: IpTripletSelectorValidationType;
+  isNarrow?: boolean;
+  isDisabled?: boolean;
+}> = ({ id = 'ip-triplet', address, setAddress, validation, isNarrow, isDisabled }) => {
+  const [focus, setFocus] = React.useState<IpTripletIndex | null>(0);
+  const validated = validation.triplets || [];
+
+  if (isDisabled) {
+    return <TextInput id={id} data-testid={id} value={addIpDots(address)} isDisabled={true} />;
+  }
+
+  return (
+    <>
+      {([0, 1, 2, 3] as IpTripletIndex[]).map((position) => (
+        <React.Fragment key={position}>
+          {position > 0 ? '.' : ''}
+          <IpTriplet
+            key={position}
+            id={`${id}-${position}`}
+            position={position}
+            address={address}
+            setAddress={setAddress}
+            focus={focus}
+            setFocus={setFocus}
+            validated={validated[position]}
+            isNarrow={isNarrow}
+          />
+        </React.Fragment>
+      ))}
+      {!validation.valid && (
+        <ExclamationCircleIcon color={dangerColor.value} className="validation-icon" />
+      )}
+    </>
+  );
+};

ui/components.old/IpTripletsSelector/index.ts

@@ -0,0 +1 @@
+export * from './IpTripletsSelector';

ui/frontend/src/components/K8SStateContext.tsx → ui/components.old/K8SStateContext.tsx

@@ -1,61 +1,63 @@
-import React from 'react';
-import { isEqual } from 'lodash';
+import React from "react";
+import { isEqual } from "lodash";
 
 import {
   IpTripletSelectorValidationType,
   K8SStateContextData,
   K8SStateContextDataFields,
   CustomCertsValidationType,
-} from './types';
-import { ChangeDomainInputType, TlsCertificate } from '../copy-backend-common';
+} from "./types";
+import { ChangeDomainInputType, TlsCertificate } from "../copy-backend-common";
 import {
   customCertsValidator,
   domainValidator,
   ipTripletAddressValidator,
   ipWithoutDots,
   passwordValidator,
   usernameValidator,
-} from './utils';
+} from "./utils";
 
 const K8SStateContext = React.createContext<K8SStateContextData | null>(null);
 
 export const K8SStateContextProvider: React.FC<{
   children: React.ReactNode;
 }> = ({ children }) => {
-  const [username, setUsername] = React.useState('');
-  const [usernameValidation, setUsernameValidation] = React.useState<string>('');
+  const [username, setUsername] = React.useState("");
+  const [usernameValidation, setUsernameValidation] =
+    React.useState<string>("");
   const handleSetUsername = React.useCallback(
     (newVal: string) => {
       setUsernameValidation(usernameValidator(newVal));
       setUsername(newVal);
     },
-    [setUsername],
+    [setUsername]
   );
 
-  const [password, setPassword] = React.useState('');
+  const [password, setPassword] = React.useState("");
   const [passwordValidation, setPasswordValidation] = React.useState(true);
   const handleSetPassword = React.useCallback(
     (newVal: string) => {
       setPasswordValidation(passwordValidator(newVal));
       setPassword(newVal);
     },
-    [setPassword],
+    [setPassword]
   );
 
-  const [apiaddr, setApiaddr] = React.useState(ipWithoutDots('192.168.7.200')); // 192168  7200
-  const [ingressIp, setIngressIp] = React.useState(ipWithoutDots('192.168.7.201')); // 192168  7201
-  const [apiaddrValidation, setApiaddrValidation] = React.useState<IpTripletSelectorValidationType>(
-    {
+  const [apiaddr, setApiaddr] = React.useState(ipWithoutDots("192.168.7.200")); // 192168  7200
+  const [ingressIp, setIngressIp] = React.useState(
+    ipWithoutDots("192.168.7.201")
+  ); // 192168  7201
+  const [apiaddrValidation, setApiaddrValidation] =
+    React.useState<IpTripletSelectorValidationType>({
       valid: true,
       triplets: [],
-    },
-  );
+    });
   const handleSetApiaddr = React.useCallback(
     (newIp: string) => {
       setApiaddrValidation(ipTripletAddressValidator(newIp, ingressIp));
       setApiaddr(newIp);
     },
-    [setApiaddr, ingressIp],
+    [setApiaddr, ingressIp]
   );
 
   const [ingressIpValidation, setIngressIpValidation] =
@@ -68,14 +70,15 @@ export const K8SStateContextProvider: React.FC<{
       setIngressIpValidation(ipTripletAddressValidator(newIp, apiaddr));
       setIngressIp(newIp);
     },
-    [setIngressIp, apiaddr],
+    [setIngressIp, apiaddr]
   );
 
-  const [domain, setDomain] = React.useState<string>('');
+  const [domain, setDomain] = React.useState<string>("");
   const [originalDomain, setOriginalDomain] = React.useState<string>();
   const [domainValidation, setDomainValidation] =
-    React.useState<K8SStateContextData['domainValidation']>();
-  const forceDomainValidation = setDomainValidation; /* We probably don't need anything more here */
+    React.useState<K8SStateContextData["domainValidation"]>();
+  const forceDomainValidation =
+    setDomainValidation; /* We probably don't need anything more here */
   const handleSetDomain = React.useCallback(
     (newDomain: string) => {
       setDomainValidation(domainValidator(newDomain));
@@ -85,10 +88,12 @@ export const K8SStateContextProvider: React.FC<{
         setOriginalDomain(newDomain);
       }
     },
-    [originalDomain],
+    [originalDomain]
   );
 
-  const [customCerts, setCustomCerts] = React.useState<ChangeDomainInputType['customCerts']>({});
+  const [customCerts, setCustomCerts] = React.useState<
+    ChangeDomainInputType["customCerts"]
+  >({});
   const [customCertsValidation, setCustomCertsValidation] =
     React.useState<CustomCertsValidationType>({});
 
@@ -97,9 +102,11 @@ export const K8SStateContextProvider: React.FC<{
       const newCustomCerts = { ...customCerts };
       newCustomCerts[domain] = certificate;
       setCustomCerts(newCustomCerts);
-      setCustomCertsValidation(customCertsValidator(customCertsValidation, domain, certificate));
+      setCustomCertsValidation(
+        customCertsValidator(customCertsValidation, domain, certificate)
+      );
     },
-    [customCertsValidation, customCerts, setCustomCerts],
+    [customCertsValidation, customCerts, setCustomCerts]
   );
 
   const clearCustomCertificates = React.useCallback(() => {
@@ -116,8 +123,8 @@ export const K8SStateContextProvider: React.FC<{
       !domainValidation &&
       !Object.keys(customCertsValidation).find(
         (d) =>
-          customCertsValidation[d].certValidated === 'error' ||
-          customCertsValidation[d].keyValidated === 'error',
+          customCertsValidation[d].certValidated === "error" ||
+          customCertsValidation[d].keyValidated === "error"
       );
     return result;
   }, [
@@ -142,7 +149,8 @@ export const K8SStateContextProvider: React.FC<{
   const fieldValues = React.useRef<K8SStateContextDataFields>(_fv);
   fieldValues.current = _fv;
 
-  const [snapshot, setSnapshot] = React.useState<K8SStateContextDataFields>(_fv);
+  const [snapshot, setSnapshot] =
+    React.useState<K8SStateContextDataFields>(_fv);
   const setClean = React.useCallback(() => {
     setSnapshot(fieldValues.current);
   }, [fieldValues]);
@@ -178,13 +186,19 @@ export const K8SStateContextProvider: React.FC<{
     clearCustomCertificates,
   };
 
-  return <K8SStateContext.Provider value={value}>{children}</K8SStateContext.Provider>;
+  return (
+    <K8SStateContext.Provider value={value}>
+      {children}
+    </K8SStateContext.Provider>
+  );
 };
 
 export const useK8SStateContext = () => {
   const context = React.useContext(K8SStateContext);
   if (!context) {
-    throw new Error('useK8SStateContext must be used within K8SStateContextProvider.');
+    throw new Error(
+      "useK8SStateContext must be used within K8SStateContextProvider."
+    );
   }
   return context;
 };

ui/components.old/Page/Page.css

@@ -0,0 +1,28 @@
+.page-container {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 80%;
+  min-width: 768px;
+  max-width: 1024px; /* TODO */
+}
+
+.page-content {
+  background-color: white;
+  border-radius: 2px;
+  height: 540px;
+}
+
+.page-header {
+  margin-top: var(--pf-global--spacer--xl);
+  margin-bottom: var(--pf-global--spacer--sm);
+  margin-left: var(--pf-global--spacer--lg);
+  margin-right: var(--pf-global--spacer--lg);
+}
+
+.page-header-middle {
+  margin: auto;
+  width: 10rem;
+  padding: 10px;
+}

ui/components.old/Page/Page.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { BackgroundImage, PageHeader } from '@patternfly/react-core';
+
+import { HeaderTools } from './HeaderTools';
+
+import RedHatLogo from './RedHatLogo.svg';
+import './Page.css';
+
+const HeaderMiddlePart: React.FC = () => (
+  <div className="page-header-middle">Edge cluster setup</div>
+);
+
+export const Page: React.FC = ({ children }) => {
+  return (
+    <>
+      <BackgroundImage src={'/background.png'} />
+
+      <PageHeader
+        logo={<img src={RedHatLogo} alt="Logo" />}
+        headerTools={<HeaderTools />}
+        topNav={<HeaderMiddlePart />}
+        className="page-header"
+      />
+
+      <div className="page-container">
+        <div className="page-content">{children}</div>
+      </div>
+    </>
+  );
+};

ui/components.old/Page/index.ts

@@ -0,0 +1 @@
+export * from './Page';