HMS-2601 fix: align wizard page 4

Align the wizard page review with the mock-ups and link some actions to finish the domain registration process. Signed-off-by: Alejandro Visiedo <[email protected]>
podengo-project · Oct 3, 2023 · f0a1312 · f0a1312
1 parent dc74299
commit f0a1312
Show file tree

Hide file tree

Showing 5 changed files with 161 additions and 159 deletions.
diff --git a/src/Routes/WizardPage/Components/DomainOverview/DomainOverview.scss b/src/Routes/WizardPage/Components/DomainOverview/DomainOverview.scss
diff --git a/src/Routes/WizardPage/Components/DomainOverview/DomainOverview.test.tsx b/src/Routes/WizardPage/Components/DomainOverview/DomainOverview.test.tsx
diff --git a/src/Routes/WizardPage/Components/DomainOverview/DomainOverview.tsx b/src/Routes/WizardPage/Components/DomainOverview/DomainOverview.tsx
diff --git a/src/Routes/WizardPage/Components/PageReview/PageReview.tsx b/src/Routes/WizardPage/Components/PageReview/PageReview.tsx
@@ -1,21 +1,101 @@
-import React, { useState } from 'react';
+/**
+ * This library encapsulate the PageReview page for the wizard
+ * component.
+ *
+ * @example
+ * Basic usage
+ * ```
+ * <PageReview domain={my_domain} />
+ * ```
+ *
+ * @packageDocumentation
+ */
+import React from 'react';
 
-import { DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, Switch } from '@patternfly/react-core';
+import { DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, Title } from '@patternfly/react-core';
 
 import './PageReview.scss';
-import { Domain } from '../../../../Api/api';
-import DomainOverview from '../../Components/DomainOverview/DomainOverview';
+import { Domain, DomainIpaServer } from '../../../../Api/api';
+import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 
-const PageReview: React.FC<{ data: Domain }> = (props) => {
-  const [isHostJoinEnabled, setIsHostJoinEnabled] = React.useState(true);
-  const [domain] = useState<Domain>(props.data);
+/**
+ * Encapsulate the table header for the list of
+ * rhel-idm ipa servers.
+ * @returns Return the table header render.
+ * @see {@link PageReviewIpaServers} about the parent component.
+ */
+const PageReviewIpaServersHead = () => {
+  return (
+    <Thead>
+      <Tr>
+        <Th>Name</Th>
+        <Th>UUID</Th>
+      </Tr>
+    </Thead>
+  );
+};
+
+/**
+ * Represents the propoerties for PageReviewIpaServersBody.
+ */
+interface PageReviewIpaServersProps {
+  /** The list of ipa servers associated to the rhel-idm. */
+  servers?: DomainIpaServer[];
+}
+
+/**
+ * Represents the body which shows the IPA server list.
+ * @param props Contains the list of servers at `servers`.
+ * @returns the body for the list of servers to use in the
+ * `TableComposable` component.
+ * @see {@link PageReviewIpaServersProps} about the properties.
+ * @see {@link PageReviewIpa} about the parent component.
+ */
+const PageReviewIpaServersBody = (props: PageReviewIpaServersProps) => {
+  return (
+    <Tbody>
+      {props.servers?.map((server) => {
+        return (
+          <Tr key={server.subscription_manager_id}>
+            <Td>{server.fqdn}</Td>
+            <Td>{server.subscription_manager_id}</Td>
+          </Tr>
+        );
+      })}
+    </Tbody>
+  );
+};
 
-  const onHostJoinEnabledChange = () => {
-    setIsHostJoinEnabled(!isHostJoinEnabled);
-  };
+/**
+ * Represent the table which list the IPA servers.
+ * @param props has the `servers` property which contains the
+ * list of servers that belongs to this rhel-idm domain.
+ * @returns the composable table with the header and body.
+ * @see {@link PageReviewIpaServersProps} about the properties.
+ * @see {@link PageReviewIpa} about the parent component.
+ */
+const PageReviewIpaServers = (props: PageReviewIpaServersProps) => {
+  return (
+    <>
+      <TableComposable variant="compact">
+        <PageReviewIpaServersHead />
+        <PageReviewIpaServersBody servers={props.servers} />
+      </TableComposable>
+    </>
+  );
+};
 
+/**
+ * This component represent the overview information to be
+ * presented for an rhel-idm domain service.
+ * @param props the `domain` property expect a 'rhel-idm' type.
+ * @returns the overview details for a rhel-idm domain service.
+ * @see {@link PageReviewProps} about the properties.
+ * @see {@link PageReview} about the parent component.
+ */
+const PageReviewIpa = (props: PageReviewProps) => {
   return (
-    <React.Fragment>
+    <>
       <DescriptionList
         isHorizontal
         horizontalTermWidthModifier={{
@@ -28,38 +108,64 @@ const PageReview: React.FC<{ data: Domain }> = (props) => {
         }}
       >
         <DescriptionListGroup>
-          <DescriptionListTerm>Identity and access management solution</DescriptionListTerm>
-          <DescriptionListDescription>{domain.domain_type === 'rhel-idm' && <div>RHEL IdM (IPA)</div>}</DescriptionListDescription>
+          <DescriptionListTerm>Service type</DescriptionListTerm>
+          <DescriptionListDescription disabled>RHEL IdM (IPA)</DescriptionListDescription>
         </DescriptionListGroup>
         <DescriptionListGroup>
-          <DescriptionListTerm>Name</DescriptionListTerm>
-          <DescriptionListDescription>{domain.title}</DescriptionListDescription>
+          <DescriptionListTerm>Kerberos realm</DescriptionListTerm>
+          <DescriptionListDescription disabled>{props.domain['rhel-idm']?.realm_name}</DescriptionListDescription>
         </DescriptionListGroup>
         <DescriptionListGroup>
-          <DescriptionListTerm>Description</DescriptionListTerm>
-          <DescriptionListDescription>{domain.description}</DescriptionListDescription>
+          <DescriptionListTerm>Red Hat IdM/IPA servers</DescriptionListTerm>
+          <DescriptionListDescription disabled>
+            <PageReviewIpaServers servers={props.domain['rhel-idm']?.servers} />
+          </DescriptionListDescription>
         </DescriptionListGroup>
         <DescriptionListGroup>
-          <DescriptionListTerm>DNS Domain/Servers</DescriptionListTerm>
-          <DescriptionListDescription>
-            {/* TODO Navigator panel */}
-            1-3 of 3 v &nbsp;&nbsp;&lt;&nbsp;&nbsp;&nbsp;&gt;
-          </DescriptionListDescription>
+          <DescriptionListTerm>Service name</DescriptionListTerm>
+          <DescriptionListDescription disabled>{props.domain.title}</DescriptionListDescription>
+        </DescriptionListGroup>
+        <DescriptionListGroup>
+          <DescriptionListTerm>Service description</DescriptionListTerm>
+          <DescriptionListDescription disabled>{props.domain.description}</DescriptionListDescription>
         </DescriptionListGroup>
-        <DomainOverview domain={domain} />
         <DescriptionListGroup>
-          <DescriptionListTerm>Allow host domain join</DescriptionListTerm>
-          <DescriptionListDescription>
-            <Switch
-              id="wizard-allow-host-join"
-              aria-label="Allow host domain join"
-              isChecked={isHostJoinEnabled}
-              onChange={onHostJoinEnabledChange}
-            />
+          <DescriptionListTerm>Domain join on launch</DescriptionListTerm>
+          <DescriptionListDescription disabled>
+            {props.domain.auto_enrollment_enabled ? 'Enable upon finishing registration' : 'Not enable upon finishing registration'}
           </DescriptionListDescription>
         </DescriptionListGroup>
       </DescriptionList>
-    </React.Fragment>
+    </>
+  );
+};
+
+/**
+ * Represent the properties for the PageReview component.
+ */
+interface PageReviewProps {
+  /** The ephemeral domain information, including the detailed
+   * information that the user have control about. */
+  domain: Domain;
+}
+
+/**
+ * It represents the Page review wizard, and it provide different view
+ * depending on the domain_type value.
+ * @param props provide the `domain` value to be rendered.
+ * @returns the render view for the domain overview.
+ * @see {@link PageReviewProps} to know about the properties.
+ * @see {@link WizardPage} about the parent component.
+ * @public
+ */
+const PageReview = (props: PageReviewProps) => {
+  return (
+    <>
+      <Title className="pt-u-mb-xl" headingLevel={'h2'}>
+        Review
+      </Title>
+      {props.domain.domain_type === 'rhel-idm' && <PageReviewIpa domain={props.domain} />}
+    </>
   );
 };
 

diff --git a/src/Routes/WizardPage/WizardPage.tsx b/src/Routes/WizardPage/WizardPage.tsx
@@ -23,22 +23,6 @@ const PageServiceRegistration = React.lazy(() => import('./Components/PageServic
 const PageServiceDetails = React.lazy(() => import('./Components/PageServiceDetails/PageServiceDetails'));
 const PageReview = React.lazy(() => import('./Components/PageReview/PageReview'));
 
-const initialDomain: Domain = {
-  domain_id: '14f3a7a4-32c5-11ee-b40f-482ae3863d30',
-  domain_name: 'mydomain.example',
-  auto_enrollment_enabled: true,
-  title: 'My Domain',
-  description: 'My Domain Description',
-  domain_type: 'rhel-idm',
-  'rhel-idm': {
-    realm_name: '',
-    realm_domains: [],
-    ca_certs: [],
-    servers: [],
-    locations: [],
-  },
-};
-
 /**
  * Wizard page to register a new domain into the service.
  * @see {@link PagePreparation} about the preparation page.
@@ -110,6 +94,23 @@ const WizardPage = () => {
       //   appContext.wizard.setUUID('');
       // }
     }
+    if (id === 4) {
+      try {
+        if (domain.domain_id) {
+          const response = await resources_api.updateDomainUser(domain.domain_id, {
+            title: domain.title,
+            description: domain.description,
+            auto_enrollment_enabled: domain.auto_enrollment_enabled,
+          });
+          if (response.status >= 400) {
+            // TODO show-up notification with error message
+          }
+        }
+      } catch (error) {
+        // TODO show-up notification with error message
+        console.log('error noNextPage: ' + error);
+      }
+    }
   };
 
   const initCanJumpPage1 = true;
@@ -168,12 +169,14 @@ const WizardPage = () => {
       name: 'Preparation',
       component: <PagePreparation onToken={onToken} />,
       canJumpTo: canJumpPage1,
+      enableNext: true,
     },
     {
       id: 2,
       name: 'Service registration',
       component: <PageServiceRegistration uuid={domain.domain_id ? domain.domain_id : ''} token={appContext.wizard.getToken()} onVerify={onVerify} />,
       canJumpTo: canJumpPage2,
+      enableNext: canJumpPage3,
     },
     {
       id: 3,
@@ -190,13 +193,15 @@ const WizardPage = () => {
         />
       ),
       canJumpTo: canJumpPage3,
+      enableNext: canJumpPage4,
     },
     {
       id: 4,
       name: 'Review',
-      // FIXME Pass here the 'registering.domain' field from the context
-      component: <PageReview data={domain} />,
+      component: <PageReview domain={domain} />,
+      nextButtonText: 'Finish',
       canJumpTo: canJumpPage4,
+      enableNext: true,
     },
   ];