feat: add helper texts per latest mockups

RedHatInsights · Dec 9, 2024 · d775960 · d775960
1 parent 5e02942
commit d775960
Show file tree

Hide file tree

Showing 6 changed files with 134 additions and 23 deletions.
diff --git a/src/presentational-components/InputHelpPopover.tsx b/src/presentational-components/InputHelpPopover.tsx
@@ -0,0 +1,25 @@
+import React, { ReactNode } from 'react';
+import { HelpIcon } from '@patternfly/react-icons';
+import { Button, Popover } from '@patternfly/react-core';
+
+interface InputHelpPopoverProps {
+  headerContent?: ReactNode;
+  bodyContent?: ReactNode;
+  field?: string;
+}
+
+const InputHelpPopover: React.FC<InputHelpPopoverProps> = ({ headerContent = null, bodyContent = null, field = 'input' }) => (
+  <Popover headerContent={headerContent} bodyContent={bodyContent}>
+    <Button
+      variant="plain"
+      aria-label={`More info for ${field}`}
+      onClick={(e) => e.preventDefault()}
+      aria-describedby="form-name"
+      className="pf-v5-c-form__group-label-help"
+    >
+      <HelpIcon />
+    </Button>
+  </Popover>
+);
+
+export default InputHelpPopover;
diff --git a/src/redux/actions/workspaces-actions.ts b/src/redux/actions/workspaces-actions.ts
@@ -27,15 +27,14 @@ export const createWorkspace = (config: WorkspaceCreateBody) => {
       notifications: {
         rejected: (payload?: { detail: string }) => ({
           variant: 'danger',
-          title: intl.formatMessage(messages.createWorkspaceErrorTitle),
+          title: intl.formatMessage(messages.createWorkspaceErrorTitle, { name: config.name }),
           dismissDelay: 8000,
           description: payload?.detail || intl.formatMessage(messages.createWorkspaceErrorDescription),
         }),
         fulfilled: {
           variant: 'success',
-          title: intl.formatMessage(messages.createWorkspaceSuccessTitle),
+          title: intl.formatMessage(messages.createWorkspaceSuccessTitle, { name: config.name }),
           dismissDelay: 8000,
-          description: intl.formatMessage(messages.createWorkspaceSuccessDescription),
         },
       },
     },

diff --git a/src/smart-components/workspaces/create-workspace/CreateWorkspaceWizard.tsx b/src/smart-components/workspaces/create-workspace/CreateWorkspaceWizard.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
+import { useFlag } from '@unleash/proxy-client-react';
 import FormRenderer from '@data-driven-forms/react-form-renderer/form-renderer';
 import Pf4FormTemplate from '@data-driven-forms/pf4-component-mapper/form-template';
 import componentMapper from '@data-driven-forms/pf4-component-mapper/component-mapper';
@@ -9,7 +10,6 @@ import { createWorkspace } from '../../../redux/actions/workspaces-actions';
 import SetEarMark from './SetEarMark';
 import Review from './Review';
 import SetDetails from './SetDetails';
-import { useFlag } from '@unleash/proxy-client-react';
 
 interface CreateWorkspaceWizardProps {
   afterSubmit: () => void;

diff --git a/src/smart-components/workspaces/create-workspace/Review.tsx b/src/smart-components/workspaces/create-workspace/Review.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useFlag } from '@unleash/proxy-client-react';
 import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
 import { Title, DescriptionListGroup, DescriptionList, DescriptionListTerm, DescriptionListDescription, Text } from '@patternfly/react-core';
 import { useIntl } from 'react-intl';
@@ -9,12 +10,14 @@ const ReviewStep = () => {
   const intl = useIntl();
   const formOptions = useFormApi();
   const values = formOptions.getState().values;
+  const enableBillingFeatures = useFlag('platform.rbac.workspaces-billing-features');
 
   return (
     <div className="rbac">
       <Title headingLevel="h1" size="xl" className="pf-v5-u-mb-lg">
         {intl.formatMessage(messages.reviewNewWorkspace)}
       </Title>
+      <Text className="pf-v5-u-mb-xl">{intl.formatMessage(messages.reviewWorkspaceDescription)}</Text>
       <DescriptionList isHorizontal termWidth="25%">
         <DescriptionListGroup>
           <DescriptionListTerm>{intl.formatMessage(messages.workspaceName)}</DescriptionListTerm>
@@ -28,20 +31,24 @@ const ReviewStep = () => {
           <DescriptionListTerm>{intl.formatMessage(messages.workspaceDetails)}</DescriptionListTerm>
           <DescriptionListDescription>{values[WORKSPACE_DESCRIPTION] ?? '-'}</DescriptionListDescription>
         </DescriptionListGroup>
-        <DescriptionListGroup>
-          <DescriptionListTerm>{intl.formatMessage(messages.billingAccount)}</DescriptionListTerm>
-          <DescriptionListDescription>{values[WORKSPACE_ACCOUNT]}</DescriptionListDescription>
-        </DescriptionListGroup>
-        <DescriptionListGroup>
-          <DescriptionListTerm>{intl.formatMessage(messages.availableFeatures)}</DescriptionListTerm>
-          <DescriptionListDescription>
-            {values[WORKSPACE_FEATURES]?.length > 0 ? (
-              values[WORKSPACE_FEATURES].map((item: string) => <Text key={item}>{BUNDLES.find((bundle) => bundle.value === item)?.label}</Text>)
-            ) : (
-              <Text>-</Text>
-            )}
-          </DescriptionListDescription>
-        </DescriptionListGroup>
+        {enableBillingFeatures && (
+          <>
+            <DescriptionListGroup>
+              <DescriptionListTerm>{intl.formatMessage(messages.billingAccount)}</DescriptionListTerm>
+              <DescriptionListDescription>{values[WORKSPACE_ACCOUNT]}</DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+              <DescriptionListTerm>{intl.formatMessage(messages.availableFeatures)}</DescriptionListTerm>
+              <DescriptionListDescription>
+                {values[WORKSPACE_FEATURES]?.length > 0 ? (
+                  values[WORKSPACE_FEATURES].map((item: string) => <Text key={item}>{BUNDLES.find((bundle) => bundle.value === item)?.label}</Text>)
+                ) : (
+                  <Text>-</Text>
+                )}
+              </DescriptionListDescription>
+            </DescriptionListGroup>
+          </>
+        )}
         {values[WORKSPACE_FEATURES]?.length > 0 ? (
           <DescriptionListGroup>
             <DescriptionListTerm>{intl.formatMessage(messages.earMarkOfFeatures)}</DescriptionListTerm>

diff --git a/src/smart-components/workspaces/create-workspace/SetDetails.tsx b/src/smart-components/workspaces/create-workspace/SetDetails.tsx
@@ -3,6 +3,7 @@ import { useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
 import { useFlag } from '@unleash/proxy-client-react';
 import {
+  Button,
   FormGroup,
   FormSelect,
   FormSelectOption,
@@ -14,12 +15,14 @@ import {
   SelectList,
   SelectOption,
   Skeleton,
+  Text,
 } from '@patternfly/react-core';
 import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
 import { WORKSPACE_ACCOUNT, WORKSPACE_PARENT } from './schema';
 import { RBACStore } from '../../../redux/store';
 import { fetchWorkspaces } from '../../../redux/actions/workspaces-actions';
 import messages from '../../../Messages';
+import InputHelpPopover from '../../../presentational-components/InputHelpPopover';
 
 const SetDetails = () => {
   const intl = useIntl();
@@ -51,7 +54,23 @@ const SetDetails = () => {
   return (
     <Grid hasGutter className="pf-v5-u-my-lg">
       <GridItem span={enableBillingFeatures ? 6 : 12}>
-        <FormGroup label={intl.formatMessage(messages.parentWorkspace)} isRequired>
+        <FormGroup
+          label={intl.formatMessage(messages.parentWorkspace)}
+          isRequired
+          labelIcon={
+            <InputHelpPopover
+              bodyContent={
+                <>
+                  <Text>{intl.formatMessage(messages.workspaceParentHelperText)}</Text>
+                  <Button className="pf-v5-u-mt-xs" variant="link" href="#" isInline>
+                    {intl.formatMessage(messages.learnMore)}
+                  </Button>
+                </>
+              }
+              field="parent workspace"
+            />
+          }
+        >
           {isLoading ? (
             <Skeleton width="100%" height="36px" />
           ) : (
@@ -84,7 +103,23 @@ const SetDetails = () => {
       </GridItem>
       {enableBillingFeatures && (
         <GridItem span={6}>
-          <FormGroup label={intl.formatMessage(messages.billingAccount)} isRequired>
+          <FormGroup
+            label={intl.formatMessage(messages.billingAccount)}
+            isRequired
+            labelIcon={
+              <InputHelpPopover
+                bodyContent={
+                  <>
+                    <Text>{intl.formatMessage(messages.workspaceBillingAccountHelperText)}</Text>
+                    <Button className="pf-v5-u-mt-xs" variant="link" href="#" isInline>
+                      {intl.formatMessage(messages.learnMore)}
+                    </Button>
+                  </>
+                }
+                field="billing features"
+              />
+            }
+          >
             <FormSelect
               value={values[WORKSPACE_ACCOUNT]}
               onChange={(_e: unknown, value: string) => formOptions.change(WORKSPACE_ACCOUNT, value)}

diff --git a/...nts/workspaces/create-workspace/schema.ts → ...ts/workspaces/create-workspace/schema.tsx b/...nts/workspaces/create-workspace/schema.ts → ...ts/workspaces/create-workspace/schema.tsx
@@ -1,10 +1,13 @@
+import React from 'react';
 import validatorTypes from '@data-driven-forms/react-form-renderer/validator-types';
+import InputHelpPopover from '../../../presentational-components/InputHelpPopover';
 import { locale } from '../../../AppEntry';
-import { createIntl, createIntlCache } from 'react-intl';
+import { createIntl, createIntlCache, FormattedMessage } from 'react-intl';
 import { componentTypes } from '@data-driven-forms/react-form-renderer';
 import { Workspace } from '../../../redux/reducers/workspaces-reducer';
 import providerMessages from '../../../locales/data.json';
 import messages from '../../../Messages';
+import { Button, Text } from '@patternfly/react-core';
 
 // hardcoded for now
 export const BUNDLES = [
@@ -54,21 +57,49 @@ export const schemaBuilder = (enableBillingFeatures: boolean) => {
         fields: [
           {
             title: intl.formatMessage(messages.workspaceDetails),
+            showTitle: false,
             name: 'details',
             nextStep: () => (enableBillingFeatures ? 'select-features' : 'review'),
             fields: [
+              {
+                name: 'details-title',
+                component: componentTypes.PLAIN_TEXT,
+                className: 'pf-v5-c-title pf-m-xl',
+                label: intl.formatMessage(messages.workspaceDetailsTitle),
+              },
               {
                 name: 'details-description',
                 component: componentTypes.PLAIN_TEXT,
                 className: 'pf-v5-u-my-md',
-                label:
-                  'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+                label: intl.formatMessage(messages.workspaceDetailsDescription),
               },
               {
                 name: 'workspace-name',
                 component: componentTypes.TEXT_FIELD,
                 label: intl.formatMessage(messages.workspaceName),
                 isRequired: true,
+                FormGroupProps: {
+                  labelIcon: (
+                    <InputHelpPopover
+                      bodyContent={
+                        <Text>
+                          <FormattedMessage
+                            id={messages.workspaceNamingGuidelines.id}
+                            defaultMessage={messages.workspaceNamingGuidelines.defaultMessage}
+                            values={{
+                              link: (
+                                <Button variant="link" href="#" isInline>
+                                  {intl.formatMessage(messages.learnMore)}
+                                </Button>
+                              ),
+                            }}
+                          />
+                        </Text>
+                      }
+                      field="workspace name"
+                    />
+                  ),
+                },
                 validate: [
                   {
                     type: validatorTypes.REQUIRED,
@@ -111,6 +142,20 @@ export const schemaBuilder = (enableBillingFeatures: boolean) => {
                 name: 'workspace-description',
                 component: componentTypes.TEXTAREA,
                 label: intl.formatMessage(messages.workspaceDescription),
+                FormGroupProps: {
+                  labelIcon: (
+                    <InputHelpPopover
+                      bodyContent={<Text>{intl.formatMessage(messages.workspaceDescriptionMaxLength, { count: 255 })}</Text>}
+                      field="workspace description"
+                    />
+                  ),
+                },
+                validate: [
+                  {
+                    type: validatorTypes.MAX_LENGTH,
+                    threshold: 255,
+                  },
+                ],
               },
             ],
           },