diff --git a/src/presentational-components/InputHelpPopover.tsx b/src/presentational-components/InputHelpPopover.tsx new file mode 100644 index 000000000..ea95e0a93 --- /dev/null +++ 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 = ({ headerContent = null, bodyContent = null, field = 'input' }) => ( + + + +); + +export default InputHelpPopover; diff --git a/src/redux/actions/workspaces-actions.ts b/src/redux/actions/workspaces-actions.ts index 21ec973ad..1f4359698 100644 --- 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 index 43b73f07c..c65d4a7a7 100644 --- 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 index 115b6cd3d..e8312d2ed 100644 --- 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 (
{intl.formatMessage(messages.reviewNewWorkspace)} + {intl.formatMessage(messages.reviewWorkspaceDescription)} {intl.formatMessage(messages.workspaceName)} @@ -28,20 +31,24 @@ const ReviewStep = () => { {intl.formatMessage(messages.workspaceDetails)} {values[WORKSPACE_DESCRIPTION] ?? '-'} - - {intl.formatMessage(messages.billingAccount)} - {values[WORKSPACE_ACCOUNT]} - - - {intl.formatMessage(messages.availableFeatures)} - - {values[WORKSPACE_FEATURES]?.length > 0 ? ( - values[WORKSPACE_FEATURES].map((item: string) => {BUNDLES.find((bundle) => bundle.value === item)?.label}) - ) : ( - - - )} - - + {enableBillingFeatures && ( + <> + + {intl.formatMessage(messages.billingAccount)} + {values[WORKSPACE_ACCOUNT]} + + + {intl.formatMessage(messages.availableFeatures)} + + {values[WORKSPACE_FEATURES]?.length > 0 ? ( + values[WORKSPACE_FEATURES].map((item: string) => {BUNDLES.find((bundle) => bundle.value === item)?.label}) + ) : ( + - + )} + + + + )} {values[WORKSPACE_FEATURES]?.length > 0 ? ( {intl.formatMessage(messages.earMarkOfFeatures)} diff --git a/src/smart-components/workspaces/create-workspace/SetDetails.tsx b/src/smart-components/workspaces/create-workspace/SetDetails.tsx index d7582f52a..16fa98e75 100644 --- 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 ( - + + {intl.formatMessage(messages.workspaceParentHelperText)} + + + } + field="parent workspace" + /> + } + > {isLoading ? ( ) : ( @@ -84,7 +103,23 @@ const SetDetails = () => { {enableBillingFeatures && ( - + + {intl.formatMessage(messages.workspaceBillingAccountHelperText)} + + + } + field="billing features" + /> + } + > formOptions.change(WORKSPACE_ACCOUNT, value)} diff --git a/src/smart-components/workspaces/create-workspace/schema.ts b/src/smart-components/workspaces/create-workspace/schema.tsx similarity index 74% rename from src/smart-components/workspaces/create-workspace/schema.ts rename to src/smart-components/workspaces/create-workspace/schema.tsx index ee8ece5a0..320b60806 100644 --- a/src/smart-components/workspaces/create-workspace/schema.ts +++ b/src/smart-components/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: ( + + + {intl.formatMessage(messages.learnMore)} + + ), + }} + /> + + } + 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: ( + {intl.formatMessage(messages.workspaceDescriptionMaxLength, { count: 255 })}} + field="workspace description" + /> + ), + }, + validate: [ + { + type: validatorTypes.MAX_LENGTH, + threshold: 255, + }, + ], }, ], },