Merge pull request #273 from mareklibra/OCPBUGSM-17474-pull-secret-au…

…to-expand

OCPBUGSM-17474 PullSecret is expanded to all available height on New Cluster page

src/components/clusters/NewClusterPage.css

@@ -0,0 +1,11 @@
+.form-new-cluster .form-group-pull-secret {
+  height: calc(100vh - 650px);
+}
+
+.form-new-cluster .form-group-pull-secret .pf-c-form__group-control {
+  height: 100%;
+}
+
+.form-new-cluster .form-group-pull-secret .pf-c-form__group-control textarea {
+  height: 100%;
+}

src/components/clusters/NewClusterPage.tsx

@@ -29,6 +29,8 @@ import { captureException } from '../../sentry';
 import PullSecret from './PullSecret';
 import { usePullSecretFetch } from '../fetching/pullSecret';
 
+import './NewClusterPage.css';
+
 type NewClusterFormProps = {
   pullSecret?: string;
 };
@@ -96,7 +98,7 @@ const NewClusterForm: React.FC<NewClusterFormProps> = ({ pullSecret = '' }) => {
             <PageSection variant={PageSectionVariants.light} isMain>
               <Grid hasGutter>
                 <GridItem span={12} lg={10} xl={6}>
-                  <Form>
+                  <Form className="form-new-cluster">
                     <TextContent>
                       <Text component="h1">
                         Install OpenShift on Bare Metal with the Assisted Installer

src/components/clusters/PullSecret.tsx

@@ -63,6 +63,7 @@ const PullSecret: React.FC<PullSecretProps> = ({ pullSecret }) => {
     <TextAreaField
       name="pullSecret"
       label="Pull Secret"
+      groupClassName="form-group-pull-secret"
       labelIcon={ocmClient ? undefined : <PullSecretInfo />}
       getErrorText={(error) => (
         <>

src/components/ui/formik/TextAreaField.tsx

@@ -13,6 +13,7 @@ const TextAreaField: React.FC<TextAreaFieldProps> = ({
   children,
   idPostfix,
   labelIcon,
+  groupClassName,
   ...props
 }) => {
   const [field, { touched, error }] = useField(props.name);
@@ -51,6 +52,7 @@ const TextAreaField: React.FC<TextAreaFieldProps> = ({
       validated={isValid ? 'default' : 'error'}
       isRequired={isRequired}
       labelIcon={labelIcon}
+      className={groupClassName}
     >
       {children}
       <TextArea

src/components/ui/formik/types.ts

@@ -13,6 +13,7 @@ export interface FieldProps {
   disableDeleteRow?: boolean;
   disableAddRow?: boolean;
   className?: string;
+  groupClassName?: string;
   isDisabled?: boolean;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ref?: React.Ref<any>;