Use PatternFly for TextFormField (#896)

chart/infra-server/static/flavors.yaml

@@ -142,9 +142,10 @@
  e.g. 1.19.12-gke.2100. Use 'gcloud container get-server-config --zone=us-central1 --project srox-temp-dev-test' to see all versions.
 
  - name: pod-security-policy
- description: Enables the pod security policy admission controller for the cluster
+ description: Enable pod security policy
  value: false
  kind: optional
+ help: Enables The Pod Security Policy Admission Controller For The Cluster
 
  - name: gcp-image-type
  description: The GCP image type to use for the cluster

ui/package.json

@@ -23,6 +23,7 @@
  },
  "dependencies": {
  "@patternfly/react-core": "^4.276.8",
+ "@patternfly/react-icons": "^4.93.6",
  "axios": "^0.21.4",
  "formik": "^2.4.2",
  "history": "^5.0.1",

ui/src/app.tw.css

@@ -5,6 +5,9 @@
 @tailwind components;
 @tailwind utilities;
 
+@import '~@patternfly/react-core/dist/styles/base.css';
+@import './infra.css';
+
 /* reset the unthinking hardcoded resets of Tailwind Forms in v2 plugin,
  https://github.com/tailwindlabs/tailwindcss-forms/blob/master/src/index.js */
 

ui/src/components/forms/TextFormField.tsx

@@ -1,8 +1,7 @@
 import React, { ReactElement } from 'react';
 import { useField } from 'formik';
-
-import FormFieldLabel from './FormFieldLabel';
-import FormFieldError from './FormFieldError';
+import { FormGroup, Popover, TextInput, ValidatedOptions } from '@patternfly/react-core';
+import { HelpIcon } from '@patternfly/react-icons';
 
 type Props = {
  name: string;
@@ -25,25 +24,50 @@ export default function TextFormField({
 }: Props): ReactElement {
  const [field, meta] = useField(name);
 
- return (
- <div className="flex flex-col mb-4">
- <FormFieldLabel text={label} labelFor={id} required={required} />
-
- {helperText.length > 0 && <span className="font-400 text-base-600 my-1">{helperText}</span>}
+ const onChange = (_value: string, event: React.FormEvent<HTMLElement>) => {
+ field.onChange(event);
+ };
 
- <input
- {...field} // eslint-disable-line react/jsx-props-no-spreading
+ return (
+ <FormGroup
+ label={label}
+ fieldId={id}
+ isRequired={required}
+ labelIcon={
+ helperText ? (
+ <Popover bodyContent={<div>{helperText}</div>}>
+ <button
+ type="button"
+ aria-label={`Help for ${name}`}
+ onClick={(e) => e.preventDefault()}
+ aria-describedby={id}
+ className="pf-c-form__group-label-help"
+ >
+ <HelpIcon noVerticalAlign />
+ </button>
+ </Popover>
+ ) : undefined
+ }
+ validated={meta.error ? ValidatedOptions.error : ValidatedOptions.default}
+ helperTextInvalid={meta.error}
+ >
+ <TextInput
  id={id}
- type="text"
  name={name}
+ onChange={onChange}
+ type="text"
+ value={field.value} // eslint-disable-line @typescript-eslint/no-unsafe-assignment
  placeholder={placeholder}
- disabled={disabled}
+ isRequired={required}
+ isDisabled={disabled}
+ aria-describedby={`${id}-helper`}
+ validated={meta.error ? ValidatedOptions.error : ValidatedOptions.default}
+ // Tailwind removal - These classes are to make the form field work with
+ // dark mode and can be removed with pattern fly light mode.
  className={`bg-base-100 border-2 rounded p-2 my-2 border-base-300 font-600 text-base-600 leading-normal min-h-8 ${
  disabled ? 'bg-base-200' : 'hover:border-base-400'
  }`}
  />
-
- <FormFieldError error={meta.error} touched={meta.touched} />
- </div>
+ </FormGroup>
  );
 }

ui/src/containers/LaunchClusterPage/ClusterForm.tsx

@@ -44,7 +44,7 @@ const schemasByParameterName: { [key: string]: yup.BaseSchema } = {
  .max(28, 'Too long')
  .matches(
  /^(?:[a-z](?:[-a-z0-9]{0,38}[a-z0-9])?)$/, // this is what GKE expects
- 'The input value does not match the criteria above. Please correct this form field.'
+ 'The input value does not match its requirements. See the (?) section for details.'
  ),
  nodes: yup
  .number()

ui/src/infra.css

@@ -0,0 +1,30 @@
+/* Begin changes required for PF components to work with TW dark mode */
+/* Tailwind removal */
+
+.pf-c-popover__body {
+ color: #292d38 !important;
+}
+
+.pf-c-form__helper-text {
+ color: #c9190b !important;
+}
+
+.pf-c-form__label-required {
+ color: #c9190b !important;
+}
+
+/* End changes required for PF components to work with TW dark mode */
+
+.pf-c-form__group-label {
+ /* Some more padding for the form field label help icon */
+ --pf-c-form__group-label-help--MarginLeft: var(--pf-global--spacer--sm);
+}
+
+.pf-c-form__group {
+ /* Some separation for form fields */
+ margin-bottom: var(--pf-global--spacer--md);
+}
+
+.pf-c-form__label-text {
+ text-transform: capitalize;
+}