feat: align static appearance

Update the appearance of the page registration and details in the registration wizard to be aligned with the mock-ups; comment the proxy to the chrome-service-backend. Signed-off-by: Alejandro Visiedo <[email protected]>
avisiedo · Sep 28, 2023 · 70aa13a · 70aa13a
1 parent 810ce9f
commit 70aa13a
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 51 deletions.
diff --git a/fec.config.js b/fec.config.js
@@ -19,6 +19,6 @@ module.exports = {
     '/api/idmsvc/': { host: 'http://localhost:8000' },
 
     /* Add routes to the chrome-service*/
-    '/api/chrome-service/v1/static/': { host: 'http://localhost:9999' },
+    /* '/api/chrome-service/v1/static/': { host: 'http://localhost:9999' }, */
   },
 };
diff --git a/src/Routes/DefaultPage/DefaultPage.tsx b/src/Routes/DefaultPage/DefaultPage.tsx
@@ -202,7 +202,7 @@ const DefaultPage = () => {
 
   const [page, setPage] = useState<number>(0);
   const [itemCount, setItemCount] = useState<number>(0);
-  const [perPage, setPerPage] = useState<number>(10);
+  const [perPage] = useState<number>(10);
   const [offset, setOffset] = useState<number>(0);
 
   useEffect(() => {

diff --git a/src/Routes/WizardPage/Components/PageServiceDetails/PageServiceDetails.tsx b/src/Routes/WizardPage/Components/PageServiceDetails/PageServiceDetails.tsx
@@ -1,12 +1,23 @@
 import React, { useState } from 'react';
-import { Form, FormGroup, TextArea } from '@patternfly/react-core';
+import { Form, FormGroup, TextArea, Title, Tooltip } from '@patternfly/react-core';
 import { TextInput } from '@patternfly/react-core';
 import { Domain } from '../../../../Api/api';
+import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 
 import './PageServiceDetails.scss';
+import { Switch } from '@patternfly/react-core';
 
 const PageServiceDetails: React.FC<{ data: Domain }> = (props) => {
   const [data, setData] = useState<Domain>(props.data);
+  const [isAutoEnrollmentEnabled, setIsAutoEnrollmentEnabled] = React.useState<boolean>(true);
+
+  const onChangeAutoEnrollment = (checked: boolean) => {
+    setIsAutoEnrollmentEnabled(checked);
+  };
+
+  const autoEnrollmentTooltipContent = isAutoEnrollmentEnabled
+    ? 'Enabling makes the serice available for the "Domain join on launch" feature within Image Builder.'
+    : 'Disabling the option leaves the service registration intact, but does not make it available for the "Domain join on launch" feature within Image Builder. It can be enabled later in the "Register Directory and Domain Service" view.';
 
   return (
     <React.Fragment>
@@ -15,10 +26,11 @@ const PageServiceDetails: React.FC<{ data: Domain }> = (props) => {
           console.debug('onSubmit WizardPage' + String(value));
         }}
       >
-        <FormGroup label="Name" isRequired fieldId="register-domain-name">
+        <Title headingLevel={'h2'}>Service Details</Title>
+        <FormGroup label="Service name" isRequired fieldId="register-domain-name">
           <TextInput id="register-domain-name" className="domain-name" value={props.data.title} />
         </FormGroup>
-        <FormGroup label="Description" fieldId="register-domain-description">
+        <FormGroup label="Service description" fieldId="register-domain-description">
           <TextArea
             contentEditable="true"
             id="register-domain-description"
@@ -29,6 +41,25 @@ const PageServiceDetails: React.FC<{ data: Domain }> = (props) => {
             onChange={(value) => setData({ ...data, description: value })}
           ></TextArea>
         </FormGroup>
+        <FormGroup
+          label={
+            <>
+              Domain join on launch <OutlinedQuestionCircleIcon></OutlinedQuestionCircleIcon>
+            </>
+          }
+        >
+          <Tooltip content={autoEnrollmentTooltipContent}>
+            <Switch
+              label="Enable upon finishing registration"
+              labelOff="Disable upon finishing registration"
+              id="checked-with-label-switch-on"
+              aria-label="Message when on"
+              isChecked={isAutoEnrollmentEnabled}
+              hasCheckIcon
+              onChange={onChangeAutoEnrollment}
+            />
+          </Tooltip>
+        </FormGroup>
       </Form>
     </React.Fragment>
   );

diff --git a/src/Routes/WizardPage/Components/PageServiceRegistration/PageServiceRegistration.scss b/src/Routes/WizardPage/Components/PageServiceRegistration/PageServiceRegistration.scss
@@ -1,5 +1 @@
 @import '~@redhat-cloud-services/frontend-components-utilities/styles/variables';
-
-.domain-page-3-list {
-  width: 50%;
-}
diff --git a/src/Routes/WizardPage/Components/PageServiceRegistration/PageServiceRegistration.tsx b/src/Routes/WizardPage/Components/PageServiceRegistration/PageServiceRegistration.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 // import { useDispatch } from 'react-redux';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
-import { Button, ClipboardCopy, Form, FormGroup, TextContent } from '@patternfly/react-core';
+import { Alert, Button, ClipboardCopy, Form, FormGroup, TextContent } from '@patternfly/react-core';
 
 import './PageServiceRegistration.scss';
 import { Domain } from '../../../../Api/api';
@@ -12,59 +12,47 @@ interface PageServiceRegistrationProp {
 }
 
 const PageServiceRegistration: React.FC<PageServiceRegistrationProp> = (props) => {
-  // TODO Update links
-  const installServerPackagesLink = 'https://freeipa.org/page/Quick_Start_Guide';
-
-  const openInNewWindow = (url: string) => {
-    window.open(url, '_blank');
-  };
-
-  const onInstallServerPackagesClick = () => {
-    openInNewWindow(installServerPackagesLink);
-  };
-
-  const ipa_hcc_register_cmd = 'ipa-hcc register ' + props.data?.domain_id + ' ' + props.token;
-  const ipa_hcc_status_cmd = 'ipa-hcc status';
+  // FIXME Delete this
+  const demoToken = 'F4ZWgmhUxcw.d2iqKLHa8281CM_1aknGLsBRFpwfoy3YkrTbLBIuEkM';
+  const ipa_hcc_register_cmd = 'ipa-hcc register ' + demoToken;
+  const alertTitle = 'Register your directory and domain service';
+  // FIXME Update the URL with the location for docs
+  const linkLearnMoreAbout = 'https://access.redhat.com/articles/1586893';
 
   return (
     <React.Fragment>
+      <Alert title={alertTitle} variant="warning" isInline>
+        Completing this step registers your directory and domain service, and cannot be undone from the wizard.{' '}
+        {/* FIXME Q What is the better way to fix the top padding between the link and the text? */}
+        <div className="--pf-global--spacer--sm">
+          <Button component="a" target="_blank" variant="link" isInline icon={<ExternalLinkAltIcon />} iconPosition="right" href={linkLearnMoreAbout}>
+            Learn more about the directory and domain services.
+          </Button>
+        </div>
+      </Alert>
       <Form
         onSubmit={(value) => {
           console.debug('onSubmit WizardPage' + String(value));
         }}
       >
         <FormGroup label="Register the domain blueprint with RHEL IdM/IPA" fieldId="register-domain-name">
-          <TextContent>
-            Intro test lorem ipsum dolor sit amet, consectetur adipisciing elit, sed do esiusmod tempor incididunt ut labore at dolore.
-          </TextContent>
-          <ol className="domain-page-3-list">
+          <ol>
             <li>
-              <TextContent>Run the registration command on one IPA server with the &quot;ipa-hcc-server&quot; package.</TextContent>
+              <TextContent>
+                To register your Red Hat IdM/IPA server with the Red Hat Hybrid Cloud Console, run the following command in your RHEL IdM (IPA)
+                server&#39;s terminal.
+              </TextContent>
               <ClipboardCopy hoverTip="copy" clickTip="Copied" isReadOnly>
                 {ipa_hcc_register_cmd}
               </ClipboardCopy>
             </li>
             <li>
-              <TextContent>The command registers the IPA domain and all IPA servers with Console.</TextContent>
-            </li>
-            <li>
-              <TextContent>Once you have completed the steps, return here to test the package installation.</TextContent>
-              <ClipboardCopy hoverTip="copy" clickTip="Copied" isReadOnly>
-                {ipa_hcc_status_cmd}
-              </ClipboardCopy>
-            </li>
-            <li>
-              <TextContent>If you receive message &quot;XYZ&quot; as a final response, the package was successfully installed.</TextContent>
-              <TextContent>
-                Didn&apos;t get the success message?
-                <Button variant="link" icon={<ExternalLinkAltIcon />} iconPosition="right" onClick={onInstallServerPackagesClick}>
-                  Troubleshoot your package installation
-                </Button>
-              </TextContent>
+              <TextContent>Once the process have been completed, run a verification test.</TextContent>
             </li>
           </ol>
         </FormGroup>
       </Form>
+      {/* TODO Add here the new VerifyRegistration component */}
     </React.Fragment>
   );
 };

diff --git a/src/Routes/WizardPage/WizardPage.tsx b/src/Routes/WizardPage/WizardPage.tsx
@@ -31,8 +31,6 @@ const initialDomain: Domain = {
   },
 };
 
-const demoToken = 'c34e10a8-32c7-11ee-bde3-482ae3863d30';
-
 /**
  * Wizard page to register a new domain into the service.
  */
@@ -65,13 +63,13 @@ const WizardPage: React.FC = () => {
       component: <PagePreparation />,
     },
     {
-      name: 'Service Registration',
+      name: 'Service registration',
       // FIXME Pass here the 'registering.domain' field from the context
       // FIXME Pass here the 'registering.token' field from the context
       component: <PageServiceRegistration data={data} />,
     },
     {
-      name: 'Service Information',
+      name: 'Service details',
       // FIXME Pass here the 'registering.domain' field from the context
       component: <PageServiceDetails data={data} />,
     },
@@ -82,15 +80,15 @@ const WizardPage: React.FC = () => {
     },
   ];
 
-  const title = 'Add domain';
+  const title = 'Register directory and domain service';
 
   return (
     <React.Fragment>
       <Page>
         <PageHeader>
           <PageHeaderTitle title={title} />
           <p>
-            Add a domain to the registry.{' '}
+            Add a service to the registry.{' '}
             <Button
               component="a"
               target="_blank"
@@ -100,7 +98,7 @@ const WizardPage: React.FC = () => {
               iconPosition="right"
               href={linkLearnMoreAbout}
             >
-              Learn more about the domain registry.
+              Learn more about the directory and domain services.
             </Button>
           </p>
         </PageHeader>