[QE testing] alignment form fields ids

[ibolton336]

Related to #443

• For each field, we should have a unique ID assigned to the field. Use "fieldId" for each TextInput (HookFormPFTextInput takes the fieldId prop and appends it to the wrapped patternfly text field.)

[kirtanchandak]

How to start working on this issue?

[ibolton336]

Hi @kirtanchandak - To start, have a look for any Text input components with a missing ID. I have found one here:

 <TextInput
          value={
            !migrationWave?.name
              ? `${dayjs(migrationWave.startDate).format(
                  "MM/DD/YYYY"
                )} - ${dayjs(migrationWave.endDate).format("MM/DD/YYYY")}`
              : migrationWave.name
          }
          type="text"
          aria-label="wave-name"
          isDisabled={true}
        />

in client/src/app/pages/migration-waves/components/manage-applications-form.tsx

Thanks!

[kirtanchandak]

Hey I am using this approach, is the correct?

 <HookFormPFTextInput
          defaultValue={
            !migrationWave?.name
              ? `${dayjs(migrationWave.startDate).format(
                  "MM/DD/YYYY"
                )} - ${dayjs(migrationWave.endDate).format("MM/DD/YYYY")}`
              : migrationWave.name
          }
            name="name"
            label="Name"
          type="text"
          fieldId="wave-name"
          isDisabled={true}
        />

[ibolton336]

@kirtanchandak That is the right idea! However, in this case I think that textInput is just for display purposes so it may not necessitate our React-hook-form text input wrapper component here.

[ibolton336]

@kirtanchandak I think for this one, just adding an ID here would be sufficient. Let me know if that makes sense or if you see any other issues I can help you get started with!

[gitdallas]

curious if this is being worked on

[ibolton336]

My take is if it is unassigned, it is fair game @gitdallas

[konveyor-ci-bot]

This issue has been marked 'good first issue'
Please, make sure it aligns with the criteria found here

[aviya-gidan]

I'm starting to work on it

[aviya-gidan]

I add the following code
<TextInput
value={
!migrationWave?.name
? ${dayjs(migrationWave.startDate).format( "MM/DD/YYYY" )} - ${dayjs(migrationWave.endDate).format("MM/DD/YYYY")}
: migrationWave.name
}
type="text"
aria-label="wave-name"
isDisabled={true}
fieldId="wave-name-input"
/>

And I have this problem:
Property 'fieldId' does not exist on type 'IntrinsicAttributes & TextInputProps & RefAttributes'

what am I supposed to do now?