CNV-18014: Update text in Add volume modal

Update the strings in the "Add volume to boot from" modal, same ones in the "Edit" modal in the Bootable volumes list, according to the design changes. Also add missing helper texts to some of the fields, make the HelpIcon smaller to be displayed as expected. Fixes https://issues.redhat.com/browse/CNV-18014 The changes are related also to https://issues.redhat.com/browse/CNV-15501
kubevirt-ui · Feb 15, 2023 · c736283 · c736283
1 parent e903e43
commit c736283
Show file tree

Hide file tree

Showing 14 changed files with 63 additions and 41 deletions.
diff --git a/locales/en/plugin__kubevirt-plugin.json b/locales/en/plugin__kubevirt-plugin.json
@@ -3,9 +3,9 @@
   "--- Select {{ dsLabel }} name ---": "--- Select {{ dsLabel }} name ---",
   "--- Select {{dsLabel}} project ---": "--- Select {{dsLabel}} project ---",
   "--- Select network interface ---": "--- Select network interface ---",
-  "--- Select PersistentVolumeClaim name ---": "--- Select PersistentVolumeClaim name ---",
-  "--- Select PersistentVolumeClaim project ---": "--- Select PersistentVolumeClaim project ---",
   "--- Select project ---": "--- Select project ---",
+  "--- Select PVC name ---": "--- Select PVC name ---",
+  "--- Select PVC project ---": "--- Select PVC project ---",
   "--- Select secret ---": "--- Select secret ---",
   "--- Select sysprep ---": "--- Select sysprep ---",
   ", {{prefferedQualifiedNodesSize}} matching preferred Nodes found": ", {{prefferedQualifiedNodesSize}} matching preferred Nodes found",
@@ -310,7 +310,6 @@
   "Dedicated resources": "Dedicated resources",
   "Default": "Default",
   "Default Instancetype": "Default Instancetype",
-  "Default preference": "Default preference",
   "Default Templates": "Default Templates",
   "Default value for this parameter": "Default value for this parameter",
   "Default value type": "Default value type",
@@ -395,6 +394,7 @@
   "Edit secret": "Edit secret",
   "Edit the disk or contact your cluster admin for further details.": "Edit the disk or contact your cluster admin for further details.",
   "Edit the disk or contact your cluster admin for further details._plural": "Edit the disk or contact your cluster admin for further details.",
+  "Edit volume parameters": "Edit volume parameters",
   "Edit workload profile": "Edit workload profile",
   "Edit YAML": "Edit YAML",
   "Editing the DataSource will affect <2>all templates</2> that are currently using this DataSource.": "Editing the DataSource will affect <2>all templates</2> that are currently using this DataSource.",
@@ -500,7 +500,6 @@
   "Label selectors let you select Nodes based on the value of one or more labels.": "Label selectors let you select Nodes based on the value of one or more labels.",
   "Labels": "Labels",
   "Labels cannot be edited for Red Hat templates": "Labels cannot be edited for Red Hat templates",
-  "Labels for the bootable volume": "Labels for the bootable volume",
   "Labels help you organize and select resources. Adding labels below will let you query for objects that have similar, overlapping or dissimilar labels.": "Labels help you organize and select resources. Adding labels below will let you query for objects that have similar, overlapping or dissimilar labels.",
   "large": "large",
   "Last {{count}} days' trend": "Last {{count}} days' trend",
@@ -537,6 +536,7 @@
   "Loading ...": "Loading ...",
   "Loading Templates with available boot source": "Loading Templates with available boot source",
   "Local storage (LSO)": "Local storage (LSO)",
+  "Location of the existing PVC": "Location of the existing PVC",
   "M Series": "M Series",
   "m1": "m1",
   "MAC address": "MAC address",
@@ -603,6 +603,7 @@
   "N/A": "N/A",
   "n1": "n1",
   "Name": "Name",
+  "Name given to the cloned PVC": "Name given to the cloned PVC",
   "Name must be unique within a namespace. Is required when creating resources, although some resources may allow a client to request the generation of an appropriate name automatically. Name is primarily intended for creation idempotence and configuration definition. ": "Name must be unique within a namespace. Is required when creating resources, although some resources may allow a client to request the generation of an appropriate name automatically. Name is primarily intended for creation idempotence and configuration definition. ",
   "Name must be unique within a namespace. Is required when creating resources, although some resources may allow a client to request the generation of an appropriate name automatically. Name is primarily intended for creation idempotence and configuration definition. Cannot be updated. ": "Name must be unique within a namespace. Is required when creating resources, although some resources may allow a client to request the generation of an appropriate name automatically. Name is primarily intended for creation idempotence and configuration definition. Cannot be updated. ",
   "Name must be unique within a namespace. Is required when creating resources, although some resources may allow a client to request the generation of an appropriate name automatically. Name is primarily intended for creation idempotence and configuration definition. Cannot be updated. More info: <2>http://kubernetes.io/docs/user-guide/identifiers#names</2><3><0>Template</0><1>metadata</1><2>name</2></3>": "Name must be unique within a namespace. Is required when creating resources, although some resources may allow a client to request the generation of an appropriate name automatically. Name is primarily intended for creation idempotence and configuration definition. Cannot be updated. More info: <2>http://kubernetes.io/docs/user-guide/identifiers#names</2><3><0>Template</0><1>metadata</1><2>name</2></3>",
@@ -722,9 +723,7 @@
   "Persistent Hotplug": "Persistent Hotplug",
   "Persistent Volume Claim creation": "Persistent Volume Claim creation",
   "Persistent Volume Claim has been created and your data source is now being uploaded to it. Once the uploading is completed the Persistent Volume Claim will become available": "Persistent Volume Claim has been created and your data source is now being uploaded to it. Once the uploading is completed the Persistent Volume Claim will become available",
-  "Persistent Volume Claim name": "Persistent Volume Claim name",
   "Persistent Volume Claim Name": "Persistent Volume Claim Name",
-  "Persistent Volume Claim project": "Persistent Volume Claim project",
   "Persistent Volume Claim size": "Persistent Volume Claim size",
   "pick an operating system": "pick an operating system",
   "Please <2>try again</2>.": "Please <2>try again</2>.",
@@ -755,6 +754,8 @@
   "PVC (clone PVC)": "PVC (clone PVC)",
   "PVC (creates PVC)": "PVC (creates PVC)",
   "PVC auto import (use DataSource)": "PVC auto import (use DataSource)",
+  "PVC name": "PVC name",
+  "PVC project": "PVC project",
   "Quick create error": "Quick create error",
   "Quick create VirtualMachine": "Quick create VirtualMachine",
   "Quick Starts": "Quick Starts",
@@ -834,8 +835,8 @@
   "Select a resource": "Select a resource",
   "Select an available secret": "Select an available secret",
   "Select an existing persistent volume claim already available on the cluster and clone it.": "Select an existing persistent volume claim already available on the cluster and clone it.",
-  "Select an option from which to create a VirtualMachine.": "Select an option from which to create a VirtualMachine.",
   "Select an option to create a VirtualMachine": "Select an option to create a VirtualMachine",
+  "Select an option to create a VirtualMachine from.": "Select an option to create a VirtualMachine from.",
   "Select boot source": "Select boot source",
   "Select console type": "Select console type",
   "Select DataSource to use for automatic image upload.": "Select DataSource to use for automatic image upload.",
@@ -944,7 +945,7 @@
   "Terms": "Terms",
   "The changes you have made require this VirtualMachine to be restarted.": "The changes you have made require this VirtualMachine to be restarted.",
   "The channel to track and receive the updates from.": "The channel to track and receive the updates from.",
-  "The cloned copy of this PersistentVolumeClaim will be moved to the destination project": "The cloned copy of this PersistentVolumeClaim will be moved to the destination project",
+  "The cloned copy of this PVC will be moved to the destination project": "The cloned copy of this PVC will be moved to the destination project",
   "The cloud-init service is enabled by default in Fedora and RHEL images.": "The cloud-init service is enabled by default in Fedora and RHEL images.",
   "The DataImportCron polls disk images and imports them as PersistentVolumeClaims. You can configure the image source and other settings on the DataImportCron details page.": "The DataImportCron polls disk images and imports them as PersistentVolumeClaims. You can configure the image source and other settings on the DataImportCron details page.",
   "The Descheduler can be used to evict a running VirtualMachine so that the VirtualMachine can be rescheduled onto a more suitable Node via a live migration.": "The Descheduler can be used to evict a running VirtualMachine so that the VirtualMachine can be rescheduled onto a more suitable Node via a live migration.",
@@ -1018,7 +1019,8 @@
   "Upload error": "Upload error",
   "Upload finished": "Upload finished",
   "Upload new file using the \"Upload data to Persistent Volume Claim\" page": "Upload new file using the \"Upload data to Persistent Volume Claim\" page",
-  "Upload new image": "Upload new image",
+  "Upload new volume": "Upload new volume",
+  "Upload PVC image": "Upload PVC image",
   "Uploading": "Uploading",
   "Uploading data to Persistent Volume Claim": "Uploading data to Persistent Volume Claim",
   "URL": "URL",
@@ -1028,7 +1030,7 @@
   "Use an existing PVC": "Use an existing PVC",
   "Use BIOS when bootloading the guest OS (Default)": "Use BIOS when bootloading the guest OS (Default)",
   "Use commas to separate between IP addresses": "Use commas to separate between IP addresses",
-  "Use existing PVC": "Use existing PVC",
+  "Use existing PersistentVolumeClaim (PVC)": "Use existing PersistentVolumeClaim (PVC)",
   "Use optimized access mode & volume mode settings from StorageProfile resource.": "Use optimized access mode & volume mode settings from StorageProfile resource.",
   "Use our collection of resources to help you get started with virtualization.": "Use our collection of resources to help you get started with virtualization.",
   "Use template size PVC": "Use template size PVC",
@@ -1102,6 +1104,7 @@
   "Volume mode": "Volume mode",
   "Volume Mode": "Volume Mode",
   "Volume name": "Volume name",
+  "Volume parameters": "Volume parameters",
   "Volumes project": "Volumes project",
   "Volumes to boot from": "Volumes to boot from",
   "Warning": "Warning",

diff --git a/...ents/DiskModal/DiskFormFields/DiskSourceFormSelect/components/DiskSourcePVCSelectName.tsx b/...ents/DiskModal/DiskFormFields/DiskSourceFormSelect/components/DiskSourcePVCSelectName.tsx
@@ -40,7 +40,7 @@ const DiskSourcePVCSelectName: React.FC<DiskSourcePVCSelectNameProps> = ({
   const fieldId = 'pvc-name-select';
 
   return (
-    <FormGroup label={t('Persistent Volume Claim name')} fieldId={fieldId} id={fieldId} isRequired>
+    <FormGroup label={t('PVC name')} fieldId={fieldId} id={fieldId} isRequired>
       {pvcsLoaded ? (
         <Select
           menuAppendTo="parent"
@@ -52,7 +52,7 @@ const DiskSourcePVCSelectName: React.FC<DiskSourcePVCSelectNameProps> = ({
           hasInlineFilter
           selections={pvcNameSelected}
           onFilter={FilterPVCSelect(pvcNames)}
-          placeholderText={t('--- Select PersistentVolumeClaim name ---')}
+          placeholderText={t('--- Select PVC name ---')}
           isDisabled={isDisabled}
           maxHeight={400}
         >

diff --git a/...DiskModal/DiskFormFields/DiskSourceFormSelect/components/DiskSourcePVCSelectNamespace.tsx b/...DiskModal/DiskFormFields/DiskSourceFormSelect/components/DiskSourcePVCSelectNamespace.tsx
@@ -38,11 +38,12 @@ const DiskSourcePVCSelectNamespace: React.FC<DiskSourcePVCSelectNamespaceProps>
 
   return (
     <FormGroup
-      label={t('Persistent Volume Claim project')}
+      label={t('PVC project')}
       fieldId={fieldId}
       id={fieldId}
       isRequired
       className="pvc-selection-formgroup"
+      helperText={t('Location of the existing PVC')}
     >
       {projectsLoaded ? (
         <Select
@@ -55,7 +56,7 @@ const DiskSourcePVCSelectNamespace: React.FC<DiskSourcePVCSelectNamespaceProps>
           onFilter={FilterPVCSelect(projectsName)}
           hasInlineFilter
           selections={selectedProject}
-          placeholderText={t('--- Select PersistentVolumeClaim project ---')}
+          placeholderText={t('--- Select PVC project ---')}
           isDisabled={isDisabled}
           maxHeight={400}
         >

diff --git a/...mponents/DiskModal/DiskFormFields/DiskSourceFormSelect/components/DiskSourceUploadPVC.tsx b/...mponents/DiskModal/DiskFormFields/DiskSourceFormSelect/components/DiskSourceUploadPVC.tsx
@@ -12,6 +12,7 @@ type DiskSourceUploadPVCProps = {
   uploadFile: File | string;
   setUploadFileName: (name: string) => void;
   setUploadFile: (file: File | string) => void;
+  label?: string;
 };
 
 const DiskSourceUploadPVC: React.FC<DiskSourceUploadPVCProps> = ({
@@ -20,12 +21,13 @@ const DiskSourceUploadPVC: React.FC<DiskSourceUploadPVCProps> = ({
   uploadFileName,
   setUploadFile,
   setUploadFileName,
+  label,
 }) => {
   const { t } = useKubevirtTranslation();
 
   return (
     <>
-      <FormGroup label={t('Upload data')} fieldId="disk-source-upload" isRequired>
+      <FormGroup label={label || t('Upload data')} fieldId="disk-source-upload" isRequired>
         <FileUpload
           id="simple-file"
           data-test-id="disk-source-upload-pvc-file"

diff --git a/src/views/bootablevolumes/actions/components/EditBootableVolumesModal.tsx b/src/views/bootablevolumes/actions/components/EditBootableVolumesModal.tsx
@@ -60,11 +60,11 @@ const EditBootableVolumesModal: FC<EditBootableVolumesModalProps> = ({
       obj={dataSource}
       isOpen={isOpen}
       onClose={onClose}
-      headerText={t('Edit')}
+      headerText={t('Edit volume parameters')}
       onSubmit={changeBootableVolumeMetadata(dataSource, initialMetadata, metadata)}
     >
       <Form>
-        <FormGroup label={t('Default preference')} isRequired>
+        <FormGroup label={t('Preference')} isRequired>
           <FilterSelect
             selected={metadata?.labels?.[DEFAULT_PREFERENCE_LABEL]}
             setSelected={setBootableVolumeMetadata('labels', DEFAULT_PREFERENCE_LABEL)}

diff --git a/...alog/CreateFromInstanceTypes/components/AddBootableVolumeModal/AddBootableVolumeModal.tsx b/...alog/CreateFromInstanceTypes/components/AddBootableVolumeModal/AddBootableVolumeModal.tsx
@@ -136,7 +136,7 @@ const AddBootableVolumeModal: FC<AddBootableVolumeModalProps> = ({
         }
         onClose();
       }}
-      submitBtnText={t('Add')}
+      submitBtnText={t('Upload')}
       isDisabled={!labels?.[DEFAULT_PREFERENCE_LABEL]}
     >
       <Form>
@@ -164,7 +164,11 @@ const AddBootableVolumeModal: FC<AddBootableVolumeModalProps> = ({
             />
           </>
         )}
-        <FormGroup label={t('Name')} isRequired>
+        <FormGroup
+          label={t('Volume name')}
+          isRequired
+          helperText={t('Name given to the cloned PVC')}
+        >
           <TextInput
             id="name"
             type="text"
@@ -180,8 +184,11 @@ const AddBootableVolumeModal: FC<AddBootableVolumeModalProps> = ({
             value={OPENSHIFT_OS_IMAGES_NS}
           />
         </FormGroup>
-        <Title headingLevel="h4">{t('Labels for the bootable volume')}</Title>
-        <FormGroup label={t('Default preference')} isRequired>
+
+        <FormGroup>{/* Spacer */}</FormGroup>
+
+        <Title headingLevel="h4">{t('Volume parameters')}</Title>
+        <FormGroup label={t('Preference')} isRequired>
           <FilterSelect
             selected={labels?.[DEFAULT_PREFERENCE_LABEL]}
             setSelected={setBootableVolumeField('labels', DEFAULT_PREFERENCE_LABEL)}

diff --git a/...es/components/AddBootableVolumeModal/components/FormSelectionRadio/FormSelectionRadio.tsx b/...es/components/AddBootableVolumeModal/components/FormSelectionRadio/FormSelectionRadio.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 
 import { t } from '@kubevirt-utils/hooks/useKubevirtTranslation';
-import { Radio, Split, SplitItem } from '@patternfly/react-core';
+import { Grid, GridItem, Radio } from '@patternfly/react-core';
 
 import { RADIO_FORM_SELECTION } from '../../utils/constants';
 
@@ -12,26 +12,26 @@ type FormSelectionRadioProps = {
 
 const FormSelectionRadio: FC<FormSelectionRadioProps> = ({ formSelection, setFormSelection }) => {
   return (
-    <Split hasGutter>
-      <SplitItem>
+    <Grid hasGutter>
+      <GridItem span={4}>
         <Radio
           isChecked={formSelection === RADIO_FORM_SELECTION.UPLOAD_IMAGE}
           id={RADIO_FORM_SELECTION.UPLOAD_IMAGE}
           name="form-selection"
-          label={t('Upload new image')}
+          label={t('Upload new volume')}
           onClick={() => setFormSelection(RADIO_FORM_SELECTION.UPLOAD_IMAGE)}
         />
-      </SplitItem>
-      <SplitItem>
+      </GridItem>
+      <GridItem span={8}>
         <Radio
           isChecked={formSelection === RADIO_FORM_SELECTION.USE_EXISTING_PVC}
           id={RADIO_FORM_SELECTION.USE_EXISTING_PVC}
           name="form-selection"
-          label={t('Use existing PVC')}
+          label={t('Use existing PersistentVolumeClaim (PVC)')}
           onClick={() => setFormSelection(RADIO_FORM_SELECTION.USE_EXISTING_PVC)}
         />
-      </SplitItem>
-    </Split>
+      </GridItem>
+    </Grid>
   );
 };
 

diff --git a/...InstanceTypes/components/AddBootableVolumeModal/components/VolumeSource/VolumeSource.scss b/...InstanceTypes/components/AddBootableVolumeModal/components/VolumeSource/VolumeSource.scss
@@ -0,0 +1,3 @@
+.icon-size-small {
+    font-size: var(--pf-global--FontSize--sm);
+  }
diff --git a/...mInstanceTypes/components/AddBootableVolumeModal/components/VolumeSource/VolumeSource.tsx b/...mInstanceTypes/components/AddBootableVolumeModal/components/VolumeSource/VolumeSource.tsx
@@ -11,6 +11,8 @@ import { HelpIcon } from '@patternfly/react-icons';
 
 import { AddBootableVolumeState } from '../../utils/constants';
 
+import './VolumeSource.scss';
+
 type VolumeSourceProps = {
   bootableVolume: AddBootableVolumeState;
   setBootableVolumeField: (key: string, fieldKey?: string) => (value: string) => void;
@@ -30,13 +32,15 @@ const VolumeSource: FC<VolumeSourceProps> = ({
 }) => {
   const { t } = useKubevirtTranslation();
   const { uploadFile, uploadFilename, pvcName, pvcNamespace } = bootableVolume || {};
+
   return isUploadForm ? (
     <DiskSourceUploadPVC
       relevantUpload={upload}
       uploadFile={uploadFile}
       uploadFileName={uploadFilename}
       setUploadFile={setBootableVolumeField('uploadFile')}
       setUploadFileName={setBootableVolumeField('uploadFilename')}
+      label={t('Upload PVC image')}
     />
   ) : (
     <>
@@ -61,10 +65,10 @@ const VolumeSource: FC<VolumeSourceProps> = ({
             <SplitItem onClick={(e) => e.preventDefault()}>
               <Popover
                 bodyContent={t(
-                  'The cloned copy of this PersistentVolumeClaim will be moved to the destination project',
+                  'The cloned copy of this PVC will be moved to the destination project',
                 )}
               >
-                <HelpIcon />
+                <HelpIcon className="icon-size-small" />
               </Popover>
             </SplitItem>
           </Split>

diff --git a/src/views/catalog/CreateVMHorizontalNav/CreateVMHorizontalNav.tsx b/src/views/catalog/CreateVMHorizontalNav/CreateVMHorizontalNav.tsx
@@ -44,7 +44,7 @@ const CreateVMHorizontalNav: FC<RouteComponentProps<{ ns: string }>> = ({
           <StackItem>
             <Title headingLevel="h1">{t('Create new VirtualMachine')}</Title>
           </StackItem>
-          <StackItem>{t('Select an option from which to create a VirtualMachine.')}</StackItem>
+          <StackItem>{t('Select an option to create a VirtualMachine from.')}</StackItem>
         </Stack>
       </div>
       <Tabs usePageInsets activeKey={currentTab} onSelect={handleTabClick}>

diff --git a/...s/catalog/customize/components/PersistentVolumeClaimSelect/PersistentVolumeSelectName.tsx b/...s/catalog/customize/components/PersistentVolumeClaimSelect/PersistentVolumeSelectName.tsx
@@ -48,7 +48,7 @@ export const PersistentVolumeSelectName: React.FC<PersistentVolumeSelectNameProp
 
   return (
     <FormGroup
-      label={t('Persistent Volume Claim name')}
+      label={t('PVC name')}
       fieldId={testId}
       id={testId}
       isRequired
@@ -75,7 +75,7 @@ export const PersistentVolumeSelectName: React.FC<PersistentVolumeSelectNameProp
                 variant={SelectVariant.typeahead}
                 selections={pvcNameSelected}
                 onFilter={filter(pvcNames)}
-                placeholderText={t('--- Select PersistentVolumeClaim name ---')}
+                placeholderText={t('--- Select PVC name ---')}
                 isDisabled={isDisabled}
                 validated={error ? ValidatedOptions.error : ValidatedOptions.default}
                 aria-invalid={error ? true : false}

diff --git a/...atalog/customize/components/PersistentVolumeClaimSelect/PersistentVolumeSelectProject.tsx b/...atalog/customize/components/PersistentVolumeClaimSelect/PersistentVolumeSelectProject.tsx
@@ -46,14 +46,15 @@ export const PersistentVolumeSelectProject: React.FC<PersistentVolumeSelectProje
 
   return (
     <FormGroup
-      label={t('Persistent Volume Claim project')}
+      label={t('PVC project')}
       fieldId={testId}
       id={testId}
       isRequired
       className="pvc-selection-formgroup"
       validated={errors?.['pvcNamespace'] ? ValidatedOptions.error : ValidatedOptions.default}
       helperTextInvalid={t('This field is required')}
       helperTextInvalidIcon={<RedExclamationCircleIcon title="Error" />}
+      helperText={t('Location of the existing PVC')}
     >
       {loaded ? (
         <Controller
@@ -74,7 +75,7 @@ export const PersistentVolumeSelectProject: React.FC<PersistentVolumeSelectProje
                 onFilter={filter(projectsName)}
                 hasInlineFilter
                 selections={selectedProject}
-                placeholderText={t('--- Select PersistentVolumeClaim project ---')}
+                placeholderText={t('--- Select PVC project ---')}
                 validated={error ? ValidatedOptions.error : ValidatedOptions.default}
                 aria-invalid={error ? true : false}
                 maxHeight={400}