feat: Update tooltips on some widget fields (#113)

Jira: EPMDPEDP-12672
Related: #113
Change-Id: I7d287329ee6958106182f523816d9a7bbda7cc37

src/providers/Form/components/FormControlLabelWithTooltip/index.tsx

@@ -14,7 +14,7 @@ export const FormControlLabelWithTooltip = ({ label, title }: FormControlLabelWi
                 {label}
             </Typography>
             {title ? (
-                <Tooltip title={title}>
+                <Tooltip title={title} interactive>
                     <Icon icon={ICONS.INFO_CIRCLE} width={18} />
                 </Tooltip>
             ) : (

src/widgets/CreateCodebaseFromTemplate/__snapshots__/index.test.tsx.snap

@@ -432,12 +432,9 @@ exports[`renders CreateCodebaseFromTemplate component 1`] = `
                           <span
                             class="MuiTypography-root makeStyles-label-6 MuiTypography-body1"
                           >
-                            Git repo relative path
+                            Repository name
                           </span>
-                          <div
-                            class="MuiBox-root MuiBox-root-8"
-                            style="height: 1.25rem;"
-                          />
+                          <span />
                         </span>
                       </div>
                       <div
@@ -627,6 +624,20 @@ exports[`renders CreateCodebaseFromTemplate component 1`] = `
                     <div
                       class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1"
                     >
+                      <div
+                        class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
+                      >
+                        <span
+                          class="makeStyles-labelWrap-5"
+                        >
+                          <span
+                            class="MuiTypography-root makeStyles-label-6 MuiTypography-body1"
+                          >
+                            Suffix
+                          </span>
+                          <span />
+                        </span>
+                      </div>
                       <div
                         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
                         style="display: flex; align-items: flex-end;"

src/widgets/CreateCodebaseFromTemplate/components/FormActions/index.tsx

@@ -55,7 +55,7 @@ export const FormActions = () => {
 
     return (
         <>
-            <Button onClick={reset} size="small" component={'button'} disabled={!isDirty}>
+            <Button onClick={() => reset()} size="small" component={'button'} disabled={!isDirty}>
                 undo changes
             </Button>
             <Button

src/widgets/CreateCodebaseFromTemplate/components/fields/CodebaseVersioning/index.tsx

@@ -21,6 +21,7 @@ export const CodebaseVersioning = () => {
     const codebaseVersioningTypeFieldValue = watch(
         CODEBASE_FROM_TEMPLATE_FORM_NAMES.versioningType.name
     );
+
     const versioningStartFromVersionFieldValue = watch(
         CODEBASE_FROM_TEMPLATE_FORM_NAMES.versioningStartFromVersion.name
     );
@@ -50,7 +51,7 @@ export const CodebaseVersioning = () => {
                     })}
                     label={'Codebase versioning type'}
                     placeholder={'Select codebase versioning type'}
-                    title={'Define the versioning strategy for source code and artifacts'}
+                    title={'Define the versioning strategy for source code and artifacts.'}
                     control={control}
                     errors={errors}
                     options={codebaseVersioningTypeSelectOptions}
@@ -63,7 +64,7 @@ export const CodebaseVersioning = () => {
                             {...register(
                                 CODEBASE_FROM_TEMPLATE_FORM_NAMES.versioningStartFromVersion.name,
                                 {
-                                    required: 'Enter start version from',
+                                    required: 'Specify the initial version.',
                                     onBlur: onStartVersionFromVersionChange,
                                     pattern: {
                                         value: /^([0-9]+)\.([0-9]+)\.([0-9]+)(?:-([0-9A-Za-z-]+(?:\.[0-9A-Za-z-]+)*))?(?:\+[0-9A-Za-z-]+)?$/,
@@ -72,7 +73,9 @@ export const CodebaseVersioning = () => {
                                 }
                             )}
                             label={'Start version from'}
-                            title={'Valid identifiers are in the set [A-Za-z0-9]'}
+                            title={
+                                'Define the initial version number or identifier for your codebase to mark the starting point for version control.'
+                            }
                             placeholder={'0.0.0'}
                             control={control}
                             errors={errors}
@@ -91,11 +94,15 @@ export const CodebaseVersioning = () => {
                             {...register(
                                 CODEBASE_FROM_TEMPLATE_FORM_NAMES.versioningStartFromPostfix.name,
                                 {
-                                    required: 'Enter start version from',
+                                    required: 'Add a suffix.',
                                     onBlur: onStartVersionFromSnapshotStaticFieldChange,
                                 }
                             )}
                             placeholder={'SNAPSHOT'}
+                            label={'Suffix'}
+                            title={
+                                'Add a suffix to your version name to provide categorization. E.g. SNAPSHOT, unstable, test.'
+                            }
                             control={control}
                             errors={errors}
                         />

src/widgets/CreateCodebaseFromTemplate/components/fields/Description/index.tsx

@@ -20,7 +20,7 @@ export const Description = () => {
                 required: `Enter ${typeFieldValue} description`,
             })}
             label={'Description'}
-            title={'Description'}
+            title={'Add a brief description highlighting key features or functionality.'}
             placeholder={`Enter ${typeFieldValue} description`}
             control={control}
             errors={errors}

src/widgets/CreateCodebaseFromTemplate/components/fields/GitServer/index.tsx

@@ -21,10 +21,10 @@ export const GitServer = () => {
     return (
         <FormSelect
             {...register(CODEBASE_FROM_TEMPLATE_FORM_NAMES.gitServer.name, {
-                required: 'Select an existing Git server',
+                required: 'Select an existing Git server.',
             })}
             label={'Git server'}
-            title={'Select an existing Git server'}
+            title={'Choose the Git server for hosting your repository.'}
             control={control}
             errors={errors}
             options={gitServersOptions}

src/widgets/CreateCodebaseFromTemplate/components/fields/GitUrlPath/index.tsx

@@ -1,6 +1,7 @@
 import { InputAdornment } from '@material-ui/core';
 import React from 'react';
 import { useFormContext } from 'react-hook-form';
+import { GIT_SERVERS } from '../../../../../constants/gitServers';
 import { FormTextField } from '../../../../../providers/Form/components/FormTextField';
 import { CODEBASE_FROM_TEMPLATE_FORM_NAMES } from '../../../names';
 import { CreateCodebaseFromTemplateFormValues } from '../../../types';
@@ -12,8 +13,16 @@ export const GitUrlPath = () => {
         register,
         control,
         formState: { errors },
+        watch,
     } = useFormContext<CreateCodebaseFromTemplateFormValues>();
 
+    const gitServerFieldValue = watch(CODEBASE_FROM_TEMPLATE_FORM_NAMES.gitServer.name);
+
+    const title =
+        gitServerFieldValue === GIT_SERVERS.GITLAB
+            ? 'Specify the codebase repository name in the following format: username/repository_name.'
+            : 'Specify the codebase repository name.';
+
     return (
         <FormTextField
             {...register(CODEBASE_FROM_TEMPLATE_FORM_NAMES.gitUrlPath.name, {
@@ -23,7 +32,8 @@ export const GitUrlPath = () => {
                     message: 'Enter valid relative path to repository',
                 },
             })}
-            label={'Git repo relative path'}
+            label={'Repository name'}
+            title={title}
             placeholder={
                 'Indicate the repository relative path in the following format project/repository'
             }

src/widgets/CreateCodebaseFromTemplate/components/fields/Name/index.tsx

@@ -36,7 +36,7 @@ export const Name = () => {
     return (
         <FormTextField
             {...register(CODEBASE_FROM_TEMPLATE_FORM_NAMES.name.name, {
-                required: `Enter the Component name`,
+                required: `Enter the Component name.`,
                 pattern: {
                     value: /^[a-z](?!.*--[^-])[a-z0-9-]*[a-z0-9]$/,
                     message: nameRequirementLabel,
@@ -45,7 +45,7 @@ export const Name = () => {
                 onChange: onChange,
             })}
             label={`Component name`}
-            title={nameRequirementLabel}
+            title={'Provide a clear and concise name for your component.'}
             placeholder={`Enter the Component name`}
             control={control}
             errors={errors}

src/widgets/CreateEditCDPipeline/components/fields/Stages/index.tsx

@@ -17,7 +17,7 @@ export const Stages = ({ stages, handleDeleteStage, handleClickAddStage }: Stage
                     <Grid item>
                         <Tooltip
                             title={
-                                'Stages serve as namespaces for application deployments. While this namespace can be manually configured, the default naming convention follows the format: <environment-name>-<stage-name>-<application-name>.'
+                                'Stages serve as namespaces for application deployments. While this namespace can be manually configured, the default naming convention follows the format: <edp-namespace-name>-<environment-name>-<stage-name>.'
                             }
                         >
                             <Icon icon={ICONS.INFO_CIRCLE} width={18} />

src/widgets/CreateEditStage/components/fields/Cluster/index.tsx

@@ -1,6 +1,8 @@
+import { Link } from '@material-ui/core';
 import React from 'react';
 import { useFormContext } from 'react-hook-form';
 import { DEFAULT_CLUSTER } from '../../../../../constants/clusters';
+import { EDP_USER_GUIDE } from '../../../../../constants/urls';
 import { useClusterSecretListQuery } from '../../../../../k8s/Secret/hooks/useClusterSecretListQuery';
 import { FormSelect } from '../../../../../providers/Form/components/FormSelect';
 import { safeDecode } from '../../../../../utils/decodeEncode';
@@ -43,7 +45,15 @@ export const Cluster = () => {
             })}
             label={'Cluster'}
             title={
-                'Select the Kubernetes cluster for the stage deployment. Make sure it matches the deployment needs.'
+                <>
+                    Select the Kubernetes cluster for the stage deployment. Make sure it matches the
+                    deployment needs. If you need to add a new cluster or connect an external one,
+                    refer to our{' '}
+                    <Link href={EDP_USER_GUIDE.CLUSTER_CREATE.url} target={'_blank'}>
+                        documentation
+                    </Link>{' '}
+                    for step-by-step instructions.
+                </>
             }
             placeholder={'Select cluster'}
             control={control}

src/widgets/DeeptrackVulnerabilities/index.tsx

@@ -32,14 +32,13 @@ export const DependencyTrackMetrics = ({
                         No metrics available.
                     </Typography>
                     <Typography variant={'body2'} component={'div'}>
-                        Please, ensure that{' '}
                         <Link
                             onClick={() => history.push(dependencyTrackConfigurationPage)}
                             component={'button'}
                         >
-                            <Typography>DependencyTrack is configured</Typography>
+                            <Typography>Set up DependencyTrack configuration</Typography>
                         </Link>{' '}
-                        and PipelineRun has DependencyTrack reporting.
+                        and enable reporting in your pipeline.
                     </Typography>
                 </>
             }

src/widgets/ManageGitOps/__snapshots__/index.create.test.tsx.snap

@@ -108,10 +108,7 @@ exports[`renders ManageGitOps Create component 1`] = `
                   >
                     Git repo relative path
                   </span>
-                  <div
-                    class="MuiBox-root MuiBox-root-4"
-                    style="height: 1.25rem;"
-                  />
+                  <span />
                 </span>
               </div>
               <div
@@ -176,10 +173,7 @@ exports[`renders ManageGitOps Create component 1`] = `
                   >
                     Repository Name
                   </span>
-                  <div
-                    class="MuiBox-root MuiBox-root-5"
-                    style="height: 1.25rem;"
-                  />
+                  <span />
                 </span>
               </div>
               <div

src/widgets/ManageGitOps/__snapshots__/index.edit.test.tsx.snap

@@ -108,10 +108,7 @@ exports[`renders ManageGitOps Edit component 1`] = `
                   >
                     Repository Name
                   </span>
-                  <div
-                    class="MuiBox-root MuiBox-root-4"
-                    style="height: 1.25rem;"
-                  />
+                  <span />
                 </span>
               </div>
               <div

src/widgets/ManageGitOps/components/fields/GitRepoPath/index.tsx

@@ -45,6 +45,7 @@ export const GitRepoPath = () => {
                 },
             })}
             label={'Git repo relative path'}
+            title={'Enter your account name where the repository will be stored.'}
             placeholder={
                 'Indicate the repository relative path in the following format project/repository'
             }

src/widgets/ManageGitOps/components/fields/Name/index.tsx

@@ -39,6 +39,7 @@ export const Name = () => {
                 },
             })}
             label={'Repository Name'}
+            title={'Specify a unique repository name.'}
             control={control}
             errors={errors}
             InputProps={{

src/widgets/ManageGitServer/components/fields/HTTPSPort/index.tsx

@@ -23,7 +23,7 @@ export const HTTPSPort = () => {
             })}
             label={'HTTPS port'}
             title={
-                'Specify the HTTPS port used for Git server communication (the default value is 443 ).'
+                'Specify the HTTPS port used for Git server communication (the default value is 443).'
             }
             placeholder={'Enter HTTPS port'}
             control={control}

src/widgets/ManageRegistry/components/fields/PullAccountPassword/index.tsx

@@ -25,7 +25,7 @@ export const PullAccountPassword = () => {
             })}
             label={`Password / Token`}
             title={
-                'Enter the confidential combination used for authenticating your access to the Container registry.'
+                'Enter the confidential combination used for authenticating your access to the container registry.'
             }
             placeholder={'Enter password or token'}
             control={control}

src/widgets/ManageRegistry/components/fields/PullAccountUser/index.tsx

@@ -25,7 +25,7 @@ export const PullAccountUser = () => {
             })}
             label={`User`}
             title={
-                'Provide the unique identifier linked to your user account on the Container registry.'
+                'Provide the unique identifier linked to your user account on the container registry.'
             }
             placeholder={'Enter user name'}
             control={control}

src/widgets/ManageRegistry/components/fields/PushAccountPassword/index.tsx

@@ -37,7 +37,7 @@ export const PushAccountPassword = () => {
             })}
             label={`Password / Token`}
             title={
-                'Enter the confidential combination used for authenticating your access to the Container registry.'
+                'Enter the confidential combination used for authenticating your access to the container registry.'
             }
             placeholder={'Enter password or token'}
             control={control}

src/widgets/ManageRegistry/components/fields/PushAccountUser/index.tsx

@@ -37,7 +37,7 @@ export const PushAccountUser = () => {
             })}
             label={`User`}
             title={
-                'Provide the unique identifier linked to your user account on the Container registry.'
+                'Provide the unique identifier linked to your user account on the container registry.'
             }
             placeholder={'Enter user name'}
             control={control}

src/widgets/SonarQubeMetrics/index.tsx

@@ -69,14 +69,13 @@ export const SonarQubeMetrics = ({
                         No metrics available.
                     </Typography>
                     <Typography variant={'body2'} component={'div'}>
-                        Please, ensure that{' '}
                         <Link
                             onClick={() => history.push(sonarConfigurationPage)}
                             component={'button'}
                         >
-                            <Typography>SonarQube is configured</Typography>
+                            <Typography>Set up SonarQube configuration</Typography>
                         </Link>{' '}
-                        and PipelineRun has SonarQube reporting.
+                        and enable reporting in your pipeline.
                     </Typography>
                 </>
             }