HMS-2593 feat: add VerifyRegistry component

src/AppContext.tsx

@@ -1,20 +1,62 @@
 import { createContext } from 'react';
 import { Domain } from './Api';
+import { VerifyState } from './Routes/WizardPage/Components/VerifyRegistry/VerifyRegistry';
 
+/**
+ * It represents the application context so common events and properties
+ * are shared for many components, making their values accessible.
+ * @public
+ */
 export interface IAppContext {
+  /** Represent the current list of domains to be displayed in the listDomains view. */
   domains: Domain[];
+  /** Callback to set the value of `domains`. */
   setDomains: (domains: Domain[]) => void;
-  // wizardDomain?: Domain;
-  // setWizardDomain: (domain?: Domain) => void;
+  /** Encapsulates the context related with the wizard. */
+  wizard: {
+    /** Retrieve the current token, required to register a domain. */
+    getToken: () => string;
+    /** Set the value of the token. */
+    setToken: (value: string) => void;
+    /** Retrieve the value of the registered status which is updated once
+     * the user has registered the domain by using ipa-hcc tool. */
+    getRegisteredStatus: () => VerifyState;
+    /** Setter for the registered status. */
+    setRegisteredStatus: (value: VerifyState) => void;
+    /** Get the ephemeral domain state that manage the wizard. */
+    getDomain: () => Domain;
+    /** Set the ephemeral domain information. */
+    setDomain: (value: Domain) => void;
+  };
 }
 
+/**
+ * Represent the application context.
+ * @public
+ */
 export const AppContext = createContext<IAppContext>({
   domains: [],
   setDomains: (domains: Domain[]) => {
     throw new Error('Function "setDomains" not implemented: domains=' + domains);
   },
-  // wizardDomain: undefined,
-  // setWizardDomain: (domain?: Domain) => {
-  //   throw new Error('Function "setWizardDomain" not implemented: domain=' + domain);
-  // },
+  wizard: {
+    getToken: (): string => {
+      return '';
+    },
+    setToken: (value: string) => {
+      throw new Error('Function "setToken" not implemented: value=' + value);
+    },
+    getRegisteredStatus: (): VerifyState => {
+      return 'initial';
+    },
+    setRegisteredStatus: (value: VerifyState) => {
+      throw new Error('Function "setRegisteredStatus" not implemented: value=' + value);
+    },
+    getDomain: (): Domain => {
+      return {} as Domain;
+    },
+    setDomain: (value: Domain) => {
+      throw new Error('Function "setDomain" not implemented: value=' + value);
+    },
+  },
 });

src/AppEntry.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import { init } from './store';
@@ -7,16 +7,53 @@ import { getBaseName } from '@redhat-cloud-services/frontend-components-utilitie
 import logger from 'redux-logger';
 import { AppContext } from './AppContext';
 import { Domain } from './Api';
+import { VerifyState } from './Routes/WizardPage/Components/VerifyRegistry/VerifyRegistry';
 
 const AppEntry = () => {
+  const appContext = useContext(AppContext);
   const [domains, setDomains] = useState<Domain[]>([]);
+  const [wizardToken, setWizardToken] = useState<string>('');
+  const [wizardDomain, setWizardDomain] = useState<Domain>({} as Domain);
+  const [wizardRegisterStatus, setWizardRegisterStatus] = useState<VerifyState>('initial');
   const cbSetDomains = (domains: Domain[]) => {
+    appContext.domains = domains;
     setDomains(domains);
   };
+  const cbGetWizardToken = (): string => {
+    return wizardToken;
+  };
+  const cbSetWizardToken = (value: string) => {
+    setWizardToken(value);
+  };
+  const cbGetWizardDomain = (): Domain => {
+    return wizardDomain;
+  };
+  const cbSetWizardDomain = (value: Domain) => {
+    setWizardDomain(value);
+  };
+  const cbGetRegisterStatus = (): VerifyState => {
+    return wizardRegisterStatus;
+  };
+  const cbSetRegisterStatus = (value: VerifyState) => {
+    setWizardRegisterStatus(value);
+  };
   return (
     <Provider store={init(...(process.env.NODE_ENV !== 'production' ? [logger] : [])).getStore()}>
       <Router basename={getBaseName(window.location.pathname)}>
-        <AppContext.Provider value={{ domains: domains, setDomains: cbSetDomains }}>
+        <AppContext.Provider
+          value={{
+            domains: domains,
+            setDomains: cbSetDomains,
+            wizard: {
+              getToken: cbGetWizardToken,
+              setToken: cbSetWizardToken,
+              getRegisteredStatus: cbGetRegisterStatus,
+              setRegisteredStatus: cbSetRegisterStatus,
+              getDomain: cbGetWizardDomain,
+              setDomain: cbSetWizardDomain,
+            },
+          }}
+        >
           <App />
         </AppContext.Provider>
       </Router>

src/Routes/DefaultPage/DefaultPage.scss

@@ -1,5 +1 @@
 @import '~@redhat-cloud-services/frontend-components-utilities/styles/variables';
-
-.empty-state-body-content {
-  margin-bottom: $ins-margin;
-}

src/Routes/DefaultPage/DefaultPage.tsx

@@ -51,6 +51,8 @@ const Header = () => {
 };
 
 const EmptyContent = () => {
+  // FIXME Update this link in the future
+  const linkLearnMoreAbout = 'https://access.redhat.com/articles/1586893';
   const navigate = useNavigate();
 
   const handleOpenWizard = () => {
@@ -62,21 +64,34 @@ const EmptyContent = () => {
       <Section>
         <Bullseye>
           <EmptyState variant={EmptyStateVariant.full}>
-            <RegistryIcon size="xl" />
-            <Title headingLevel="h2" size="lg">
-              No domains
+            <RegistryIcon className="pf-u-color-200" size="xl" />
+            <Title headingLevel="h2" size="lg" className="pf-u-pt-sm">
+              No directory and domain services registered
             </Title>
             <EmptyStateBody>
               <Stack>
-                <StackItem className="empty-state-body-content">
-                  To specify which existing access controls can be
-                  <br /> leveraged for hosts launched through the console, you
-                  <br /> must first register your domain(s). As part of that
-                  <br /> process you will be required to SSO into your server(s)
-                  <br /> and install packages via CLI.
+                <StackItem className="pf-u-pt-sm">
+                  Use access controls from your existing IdM hosts in your cloud
+                  <br /> environment*. To get started, register a service.
+                </StackItem>
+                <StackItem className="pf-u-pt-md">
+                  <Button onClick={handleOpenWizard}>Register a service</Button>
+                </StackItem>
+                <StackItem className="pf-u-pt-md">
+                  <Button
+                    component="a"
+                    target="_blank"
+                    variant="link"
+                    isInline
+                    icon={<ExternalLinkAltIcon />}
+                    iconPosition="right"
+                    href={linkLearnMoreAbout}
+                  >
+                    Learn more about directory and domain services{' '}
+                  </Button>
                 </StackItem>
-                <StackItem>
-                  <Button onClick={handleOpenWizard}>Add domain</Button>
+                <StackItem className="pf-u-pt-lg pf-u-color-100">
+                  *Directory and domain services are currently available only for Red Hat IdM and IPA deployments.
                 </StackItem>
               </Stack>
             </EmptyStateBody>
@@ -205,10 +220,6 @@ const DefaultPage = () => {
   const [perPage] = useState<number>(10);
   const [offset, setOffset] = useState<number>(0);
 
-  useEffect(() => {
-    insights?.chrome?.appAction?.('default-page');
-  }, []);
-
   console.log('INFO:DefaultPage render');
 
   useEffect(() => {

src/Routes/WizardPage/Components/PagePreparation/PagePreparation.scss

@@ -1,9 +1 @@
 @import '~@redhat-cloud-services/frontend-components-utilities/styles/variables';
-
-.domain-type-select {
-  width: 50%;
-}
-
-.domain-item-margin-left {
-  margin-left: 16px;
-}