From 436b76fbdddd675022ff41e7a2eeffc195bcc1c1 Mon Sep 17 00:00:00 2001
From: Andrew Thauer <6507159+andrewthauer@users.noreply.github.com>
Date: Sat, 20 Feb 2021 14:49:25 -0500
Subject: [PATCH] remove unecessary watch & formState

---
 .../src/components/ImportStepper/defaults.tsx | 176 +++++++++---------
 .../CheckboxField.tsx                         |  53 ------
 .../PreparePullRequestForm.tsx                |   6 +-
 .../StepPrepareCreatePullRequest.tsx          |  13 +-
 .../StepPrepareCreatePullRequest/index.ts     |   1 -
 5 files changed, 101 insertions(+), 148 deletions(-)
 delete mode 100644 plugins/catalog-import/src/components/StepPrepareCreatePullRequest/CheckboxField.tsx

diff --git a/plugins/catalog-import/src/components/ImportStepper/defaults.tsx b/plugins/catalog-import/src/components/ImportStepper/defaults.tsx
index f55cf5e911..dff2136aaa 100644
--- a/plugins/catalog-import/src/components/ImportStepper/defaults.tsx
+++ b/plugins/catalog-import/src/components/ImportStepper/defaults.tsx
@@ -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>
+                  </>
+                )}
               />
             ),
           };
diff --git a/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/CheckboxField.tsx b/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/CheckboxField.tsx
deleted file mode 100644
index dbce1b5229..0000000000
--- a/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/CheckboxField.tsx
+++ /dev/null
@@ -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>}
-    </>
-  );
-};
diff --git a/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreparePullRequestForm.tsx b/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreparePullRequestForm.tsx
index aed87a3b34..9d59f4e10e 100644
--- a/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreparePullRequestForm.tsx
+++ b/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreparePullRequestForm.tsx
@@ -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>
   );
 };
diff --git a/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/StepPrepareCreatePullRequest.tsx b/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/StepPrepareCreatePullRequest.tsx
index 1966b8457f..c34d5f374b 100644
--- a/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/StepPrepareCreatePullRequest.tsx
+++ b/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/StepPrepareCreatePullRequest.tsx
@@ -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,
             })}
diff --git a/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/index.ts b/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/index.ts
index a0fc6cbc95..119feee4a1 100644
--- a/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/index.ts
+++ b/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/index.ts
@@ -15,7 +15,6 @@
  */
 
 export { AutocompleteTextField } from './AutocompleteTextField';
-export { CheckboxField } from './CheckboxField';
 export { PreparePullRequestForm } from './PreparePullRequestForm';
 export { PreviewCatalogInfoComponent } from './PreviewCatalogInfoComponent';
 export { PreviewPullRequestComponent } from './PreviewPullRequestComponent';