remove unecessary watch & formState

2021-02-20 14:49:25 -05:00
parent 968b588f79
commit 436b76fbdd
5 changed files with 101 additions and 148 deletions
@@ -15,14 +15,21 @@
 */

 import { ConfigApi } from '@backstage/core';
-import { Box, StepLabel, TextField, Typography } from '@material-ui/core';
+import {
+  Box,
+  Checkbox,
+  FormControlLabel,
+  FormHelperText,
+  StepLabel,
+  TextField,
+  Typography,
+} from '@material-ui/core';
 import React from 'react';
 import { BackButton } from '../Buttons';
 import { StepFinishImportLocation } from '../StepFinishImportLocation';
 import { StepInitAnalyzeUrl } from '../StepInitAnalyzeUrl';
 import {
  AutocompleteTextField,
-  CheckboxField,
  StepPrepareCreatePullRequest,
 } from '../StepPrepareCreatePullRequest';
 import { StepPrepareSelectLocations } from '../StepPrepareSelectLocations';
@@ -168,99 +175,102 @@ export function defaultGenerateStepper(
                defaultTitle={title}
                defaultBody={body}
                renderFormFields={({
+                  values,
                  control,
                  errors,
-                  watch,
                  groupsLoading,
                  groups,
                  register,
-                }) => {
-                  const watchUseCodeowners = watch('useCodeowners', false);
+                }) => (
+                  <>
+                    <Box marginTop={2}>
+                      <Typography variant="h6">Pull Request Details</Typography>
+                    </Box>

-                  return (
-                    <>
-                      <Box marginTop={2}>
-                        <Typography variant="h6">
-                          Pull Request Details
-                        </Typography>
-                      </Box>
+                    <TextField
+                      name="title"
+                      label="Pull Request Title"
+                      placeholder="Add Backstage catalog entity descriptor files"
+                      margin="normal"
+                      variant="outlined"
+                      fullWidth
+                      inputRef={register({ required: true })}
+                      error={Boolean(errors.title)}
+                      required
+                    />

-                      <TextField
-                        name="title"
-                        label="Pull Request Title"
-                        placeholder="Add Backstage catalog entity descriptor files"
-                        margin="normal"
-                        variant="outlined"
-                        fullWidth
-                        inputRef={register({ required: true })}
-                        error={Boolean(errors.title)}
-                        required
-                      />
+                    <TextField
+                      name="body"
+                      label="Pull Request Body"
+                      placeholder="A describing text with Markdown support"
+                      margin="normal"
+                      variant="outlined"
+                      fullWidth
+                      inputRef={register({ required: true })}
+                      error={Boolean(errors.body)}
+                      multiline
+                      required
+                    />

-                      <TextField
-                        name="body"
-                        label="Pull Request Body"
-                        placeholder="A describing text with Markdown support"
-                        margin="normal"
-                        variant="outlined"
-                        fullWidth
-                        inputRef={register({ required: true })}
-                        error={Boolean(errors.body)}
-                        multiline
-                        required
-                      />
+                    <Box marginTop={2}>
+                      <Typography variant="h6">Entity Configuration</Typography>
+                    </Box>

-                      <Box marginTop={2}>
-                        <Typography variant="h6">
-                          Entity Configuration
-                        </Typography>
-                      </Box>
+                    <TextField
+                      name="componentName"
+                      label="Name of the created component"
+                      placeholder="my-component"
+                      margin="normal"
+                      variant="outlined"
+                      fullWidth
+                      inputRef={register({ required: true })}
+                      error={Boolean(errors.componentName)}
+                      required
+                    />

-                      <TextField
-                        name="componentName"
-                        label="Name of the created component"
-                        placeholder="my-component"
-                        margin="normal"
-                        variant="outlined"
-                        fullWidth
-                        inputRef={register({ required: true })}
-                        error={Boolean(errors.componentName)}
-                        required
-                      />
-
-                      {!watchUseCodeowners && (
-                        <AutocompleteTextField
-                          name="owner"
-                          control={control}
-                          errors={errors}
-                          options={groups || []}
-                          loading={groupsLoading}
-                          loadingText="Loading groups…"
-                          helperText="Select an owner from the list or enter a reference to a Group or a User"
-                          errorHelperText="required value"
-                          textFieldProps={{
-                            label: 'Entity Owner',
-                            placeholder: 'my-group',
-                          }}
-                          rules={{ required: true }}
-                          required
-                        />
-                      )}
-
-                      <CheckboxField
-                        name="useCodeowners"
-                        inputRef={register}
-                        label="Use CODEOWNERS File"
-                        helperText="WARNING: This may fail is no CODEOWNERS file is found at the target location."
-                        onChange={(_, value) => {
-                          if (value) {
-                            control.setValue('owner', '');
-                          }
+                    {!values.useCodeowners && (
+                      <AutocompleteTextField
+                        name="owner"
+                        control={control}
+                        errors={errors}
+                        options={groups || []}
+                        loading={groupsLoading}
+                        loadingText="Loading groups…"
+                        helperText="Select an owner from the list or enter a reference to a Group or a User"
+                        errorHelperText="required value"
+                        textFieldProps={{
+                          label: 'Entity Owner',
+                          placeholder: 'my-group',
                        }}
+                        rules={{ required: true }}
+                        required
                      />
-                    </>
-                  );
-                }}
+                    )}
+
+                    <FormControlLabel
+                      control={
+                        <Checkbox
+                          name="useCodeowners"
+                          inputRef={register}
+                          onChange={(_, value) => {
+                            if (value) {
+                              control.setValue('owner', '');
+                            }
+                          }}
+                        />
+                      }
+                      label={
+                        <>
+                          Use <em>CODEOWNERS</em> file as Entity Owner
+                        </>
+                      }
+                    />
+                    <FormHelperText>
+                      WARNING: This may fail is no CODEOWNERS file is found at
+                      the target location.
+                    </FormHelperText>
+                  </>
+                )}
              />
            ),
          };
@@ -1,53 +0,0 @@
-/*
- * Copyright 2021 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { Checkbox, FormControlLabel, FormHelperText } from '@material-ui/core';
-import React from 'react';
-
-type Props<TFieldValue extends string> = {
-  name: TFieldValue;
-  label: React.ReactNode;
-  inputRef:
-    | ((instance: HTMLInputElement | null) => void)
-    | React.RefObject<HTMLInputElement>
-    | null
-    | undefined;
-  onChange?: (
-    event: React.ChangeEvent<HTMLInputElement>,
-    checked: boolean,
-  ) => void;
-  helperText?: React.ReactNode | string;
-};
-
-export const CheckboxField = <TFieldValue extends string>({
-  name,
-  label,
-  inputRef,
-  onChange,
-  helperText,
-}: Props<TFieldValue>) => {
-  return (
-    <>
-      <FormControlLabel
-        control={
-          <Checkbox name={name} inputRef={inputRef} onChange={onChange} />
-        }
-        label={label}
-      />
-      {helperText && <FormHelperText>{helperText}</FormHelperText>}
-    </>
-  );
-};
@@ -32,7 +32,7 @@ type Props<TFieldValues extends Record<string, any>> = Pick<
  render: (
    props: Pick<
      UseFormMethods<TFieldValues>,
-      'errors' | 'register' | 'control' | 'formState' | 'watch'
+      'errors' | 'register' | 'control'
    > & {
      values: UnpackNestedValue<TFieldValues>;
    },
@@ -55,13 +55,13 @@ export const PreparePullRequestForm = <
  onSubmit,
  render,
 }: Props<TFieldValues>) => {
-  const { handleSubmit, control, register, errors, formState, watch } = useForm<
+  const { handleSubmit, watch, control, register, errors } = useForm<
    TFieldValues
  >({ mode: 'onTouched', defaultValues });

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
-      {render({ values: watch(), errors, register, control, formState, watch })}
+      {render({ values: watch(), errors, register, control })}
    </form>
  );
 };
@@ -23,7 +23,7 @@ import {
 import { Box, FormHelperText, Grid, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import React, { useCallback, useState } from 'react';
-import { UseFormMethods } from 'react-hook-form';
+import { UnpackNestedValue, UseFormMethods } from 'react-hook-form';
 import { useAsync } from 'react-use';
 import YAML from 'yaml';
 import { AnalyzeResult, catalogImportApiRef } from '../../api';
@@ -63,10 +63,8 @@ type Props = {
  defaultBody: string;

  renderFormFields: (
-    props: Pick<
-      UseFormMethods<FormData>,
-      'errors' | 'register' | 'control' | 'formState' | 'watch'
-    > & {
+    props: Pick<UseFormMethods<FormData>, 'errors' | 'register' | 'control'> & {
+      values: UnpackNestedValue<FormData>;
      groups: string[];
      groupsLoading: boolean;
    },
@@ -195,14 +193,13 @@ export const StepPrepareCreatePullRequest = ({
            analyzeResult.generatedEntities[0]?.metadata?.name || '',
          useCodeowners: false,
        }}
-        render={({ values, errors, control, register, formState, watch }) => (
+        render={({ values, errors, control, register }) => (
          <>
            {renderFormFields({
+              values,
              errors,
              register,
              control,
-              formState,
-              watch,
              groups: groups ?? [],
              groupsLoading,
            })}
@@ -15,7 +15,6 @@
 */

 export { AutocompleteTextField } from './AutocompleteTextField';
-export { CheckboxField } from './CheckboxField';
 export { PreparePullRequestForm } from './PreparePullRequestForm';
 export { PreviewCatalogInfoComponent } from './PreviewCatalogInfoComponent';
 export { PreviewPullRequestComponent } from './PreviewPullRequestComponent';