import React from 'react'; import componentTypes from '@data-driven-forms/react-form-renderer/component-types'; import { Text, TextContent } from '@patternfly/react-core'; import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api'; import { releaseMapper } from '../../../constants'; const PackagesLabel = () => { const { getState } = useFormApi(); const release = getState()?.values?.release; const releaseName = release !== undefined ? releaseMapper[release] : ''; return ( <TextContent> <Text> Add packages to your <Text component="b">{releaseName}</Text> image. </Text> </TextContent> ); }; export default { title: 'Additional packages', name: 'packages', nextStep: 'review', substepOf: 'Add content', fields: [ { component: componentTypes.PLAIN_TEXT, name: 'google-cloud-text-component', label: <PackagesLabel />, }, { component: 'package-selector', name: 'selected-packages', label: 'Available options', initialValue: [], clearedValue: [], }, ], };