feat(bulk-import): update preview form to use separate formik context

redhat-developer · Nov 5, 2024 · 72d17c8 · 72d17c8
1 parent 9eeb889
commit 72d17c8
Show file tree

Hide file tree

Showing 11 changed files with 191 additions and 232 deletions.
diff --git a/workspaces/bulk-import/.changeset/nervous-waves-lie.md b/workspaces/bulk-import/.changeset/nervous-waves-lie.md
@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-bulk-import': minor
+---
+
+update preview form to use separate formik context
diff --git a/workspaces/bulk-import/plugins/bulk-import/package.json b/workspaces/bulk-import/plugins/bulk-import/package.json
@@ -54,7 +54,8 @@
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
     "react-use": "^17.2.4",
-    "yaml": "^2.0.0"
+    "yaml": "^2.0.0",
+    "yup": "^1.4.0"
   },
   "peerDependencies": {
     "react": "16.13.1 || ^17.0.0 || ^18.0.0",

diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewFileSidebar.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewFileSidebar.tsx
@@ -130,7 +130,7 @@ export const PreviewFileSidebar = ({
             [id]: {
               error: {
                 message: [
-                  `The entity YAML in your pull request is invalid (empty file or missing apiVersion, kind, or metadata.name). A new YAML has been generated below.`,
+                  'The entity YAML in your pull request is invalid (empty file or missing apiVersion, kind, or metadata.name). A new YAML has been generated below.',
                 ],
               },
             },

diff --git a/...import/plugins/bulk-import/src/components/PreviewFile/PreviewFileSidebarDrawerContent.tsx b/...import/plugins/bulk-import/src/components/PreviewFile/PreviewFileSidebarDrawerContent.tsx
@@ -199,7 +199,7 @@ export const PreviewFileSidebarDrawerContent = ({
             isSubmitting ||
             (!!formErrors &&
               Object.values(formErrors).length > 0 &&
-              Object.values(formErrors).every(
+              Object.values(formErrors).some(
                 fe => !!fe && Object.values(fe).length > 0,
               ))
           }

diff --git a/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequest.tsx b/workspaces/bulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequest.tsx
@@ -51,8 +51,6 @@ export const PreviewPullRequest = ({
 }) => {
   const { status } = useFormikContext<AddRepositoriesFormValues>();
 
-  const [entityOwner, setEntityOwner] = React.useState<string>('');
-
   const error = status?.errors?.[repoId];
   const info = status?.infos?.[repoId];
   if (
@@ -114,8 +112,6 @@ export const PreviewPullRequest = ({
         </Box>
       )}
       <PreviewPullRequestForm
-        entityOwner={entityOwner}
-        setEntityOwner={setEntityOwner}
         repoId={repoId}
         repoUrl={repoUrl}
         pullRequest={pullRequest}

diff --git a/...ulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequestForm.test.tsx b/...ulk-import/plugins/bulk-import/src/components/PreviewFile/PreviewPullRequestForm.test.tsx
@@ -12,13 +12,13 @@
  * 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 React, { useState } from 'react';
+ */ import React from 'react';
 
 import { configApiRef } from '@backstage/core-plugin-api';
 import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
 import { MockConfigApi, TestApiProvider } from '@backstage/test-utils';
 
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { useFormikContext } from 'formik';
 
 import { bulkImportApiRef } from '../../api/BulkImportBackendClient';
@@ -28,11 +28,6 @@ import { ApprovalTool, ImportJobStatus } from '../../types';
 import { getPRTemplate } from '../../utils/repository-utils';
 import { PreviewPullRequestForm } from './PreviewPullRequestForm';
 
-jest.mock('react', () => ({
-  ...jest.requireActual('react'),
-  useState: jest.fn(),
-}));
-
 jest.mock('@material-ui/core', () => ({
   ...jest.requireActual('@material-ui/core'),
   makeStyles: () => () => {
@@ -64,12 +59,6 @@ class MockBulkImportApi {
   }
 }
 
-const setState = jest.fn();
-
-beforeEach(() => {
-  (useState as jest.Mock).mockImplementation(initial => [initial, setState]);
-});
-
 const mockBulkImportApi = new MockBulkImportApi();
 
 const mockCatalogApi: Partial<CatalogApi> = {
@@ -110,8 +99,6 @@ describe('Preview Pull Request Form', () => {
         <PreviewPullRequestForm
           repoId="org/dessert/cupcake"
           repoUrl="https://github.com/org/dessert/cupcake"
-          entityOwner="user:default/guest"
-          setEntityOwner={jest.fn()}
           pullRequest={{
             cupcake: getPRTemplate(
               'org/dessert/cupcake',
@@ -165,8 +152,6 @@ describe('Preview Pull Request Form', () => {
         <PreviewPullRequestForm
           repoId="org/dessert/cupcake"
           repoUrl="https://github.com/org/dessert/cupcake"
-          entityOwner="user:default/guest"
-          setEntityOwner={jest.fn()}
           pullRequest={{
             'org/dessert/cupcake': getPRTemplate(
               'org/dessert/cupcake',
@@ -222,8 +207,6 @@ describe('Preview Pull Request Form', () => {
         <PreviewPullRequestForm
           repoId="org/dessert/cupcake"
           repoUrl="https://github.com/org/dessert/cupcake"
-          entityOwner="user:default/guest"
-          setEntityOwner={jest.fn()}
           pullRequest={{
             'org/dessert/cupcake': getPRTemplate(
               'org/dessert/cupcake',
@@ -244,18 +227,18 @@ describe('Preview Pull Request Form', () => {
       /Add Backstage catalog entity descriptor files/,
     );
     fireEvent.change(prTitle, { target: { value: '' } });
-    expect(setFormErrors).toHaveBeenCalledWith({
-      'org/dessert/cupcake': {
-        prTitle: 'Pull request title is missing',
-      },
+    await waitFor(() => {
+      expect(
+        screen.queryByText('Pull request title is required'),
+      ).toBeInTheDocument();
     });
 
     const componentName = getByPlaceholderText(/Component Name/);
     fireEvent.change(componentName, { target: { value: '' } });
-    expect(setFormErrors).toHaveBeenCalledWith({
-      'org/dessert/cupcake': {
-        componentName: 'Component name is missing',
-      },
+    await waitFor(() => {
+      expect(
+        screen.queryByText('Component name is required'),
+      ).toBeInTheDocument();
     });
   });
 });