fix: Labels in Connect Cluster dialog (kyma-project#4076)

* fix: better labeling

* fix: fix id

Author: OliwiaGowor

src/components/BusolaExtensions/BusolaExtensionCreate.js

@@ -106,6 +106,7 @@ export default function BusolaExtensionCreate({
             key: crd.metadata.name,
             text: crd.metadata.name,
           }))}
+          id="combobox-input"
         />
         {crd && (
           <>

src/components/Clusters/components/AuthForm.js

@@ -38,27 +38,27 @@ const OIDCform = ({ resource, setResource, ...props }) => {
         propertyPath="$.issuerUrl"
         label={t('clusters.wizard.auth.issuer-url')}
         input={Inputs.Text}
-        accessible-name="issuer-url"
+        accessible-name={t('clusters.wizard.auth.issuer-url')}
       />
       <ResourceForm.FormField
         required
         propertyPath="$.clientId"
         label={t('clusters.wizard.auth.client-id')}
         input={Inputs.Text}
-        accessible-name="client-id"
+        accessible-name={t('clusters.wizard.auth.client-id')}
       />
       <ResourceForm.FormField
         propertyPath="$.clientSecret"
         label={t('clusters.wizard.auth.client-secret')}
         input={Inputs.Text}
-        accessible-name="client-secret"
+        accessible-name={t('clusters.wizard.auth.client-secret')}
       />
       <TextArrayInput
         required
         defaultOpen
         propertyPath="$.scopes"
         title={t('clusters.wizard.auth.scopes')}
-        accessible-name="scopes"
+        accessible-name={t('clusters.wizard.auth.scopes')}
       />
     </ResourceForm.Wrapper>
   );
@@ -142,8 +142,9 @@ export function AuthForm({
         )}
         <ResourceForm.FormField
           label={t('clusters.wizard.auth.using-oidc')}
-          input={() => (
+          input={props => (
             <Switch
+              {...props}
               className="sap-margin-top-tiny"
               checked={useOidc}
               onChange={switchAuthVariant}

src/shared/ResourceForm/components/FormField.js

@@ -37,7 +37,12 @@ export function FormField({
     >
       {!isListItem && label && (
         <FlexBox wrap="Wrap" alignItems="Center" className="bsl-col-md--12">
-          <Label required={required && !disabled}>{label}</Label>
+          <Label
+            forElement={label.replace(' ', '-').toLowerCase()}
+            required={required && !disabled}
+          >
+            {label}
+          </Label>
           {tooltipContent && (
             <HintButton
               setShowTitleDescription={setOpenPopover}
@@ -58,6 +63,7 @@ export function FormField({
               disabled,
               className: 'full-width',
               accessibleName: label,
+              id: label.replace(' ', '-').toLowerCase(),
               ...inputProps,
             })}
         {inputInfo && (