feat: Save partial project progress during project creation (#769)

This adds functionality to persist partial project information when creating a new project. Right now when creating a new connection inline within the create project flow and returning to the create project screen your partial project information is lost. Partial form progress is now saved into local storage and bound when returning to the form.

Resolves #758

Author: wbreza

src/react/components/pages/projectSettings/projectForm.test.tsx

@@ -15,8 +15,9 @@ describe("Project Form Component", () => {
     const appSettings = MockFactory.appSettings();
     const connections = MockFactory.createTestConnections();
     let wrapper: ReactWrapper<IProjectFormProps, IProjectFormState> = null;
-    let onSubmitHandler: jest.Mock = null;
-    let onCancelHandler: jest.Mock = null;
+    const onSubmitHandler = jest.fn();
+    const onChangeHandler = jest.fn();
+    const onCancelHandler = jest.fn();
 
     function createComponent(props: IProjectFormProps) {
         return mount(
@@ -33,13 +34,16 @@ describe("Project Form Component", () => {
 
     describe("Completed project", () => {
         beforeEach(() => {
-            onSubmitHandler = jest.fn();
-            onCancelHandler = jest.fn();
+            onChangeHandler.mockClear();
+            onSubmitHandler.mockClear();
+            onCancelHandler.mockClear();
+
             wrapper = createComponent({
                 project,
                 connections,
                 appSettings,
                 onSubmit: onSubmitHandler,
+                onChange: onChangeHandler,
                 onCancel: onCancelHandler,
             });
         });
@@ -76,10 +80,14 @@ describe("Project Form Component", () => {
 
             const form = wrapper.find("form");
             form.simulate("submit");
-            expect(onSubmitHandler).toBeCalledWith({
+
+            const expectedProject = {
                 ...project,
                 name: newName,
-            });
+            };
+
+            expect(onChangeHandler).toBeCalled();
+            expect(onSubmitHandler).toBeCalledWith(expectedProject);
         });
 
         it("starting project should update description upon submission", () => {
@@ -92,10 +100,14 @@ describe("Project Form Component", () => {
 
             const form = wrapper.find("form");
             form.simulate("submit");
-            expect(onSubmitHandler).toBeCalledWith({
+
+            const expectedProject = {
                 ...project,
                 description: newDescription,
-            });
+            };
+
+            expect(onChangeHandler).toBeCalledWith(expect.objectContaining(project));
+            expect(onSubmitHandler).toBeCalledWith(expectedProject);
         });
 
         it("starting project should update source connection ID upon submission", () => {
@@ -109,11 +121,14 @@ describe("Project Form Component", () => {
             expect(wrapper.state().formData.sourceConnection).toEqual(newConnection);
             const form = wrapper.find("form");
             form.simulate("submit");
-            expect(onSubmitHandler).toBeCalledWith({
+
+            const expectedProject = {
                 ...project,
                 sourceConnection: connections[1],
-            });
+            };
 
+            expect(onChangeHandler).toBeCalledWith(expect.objectContaining(project));
+            expect(onSubmitHandler).toBeCalledWith(expectedProject);
         });
 
         it("starting project should update target connection ID upon submission", () => {
@@ -125,13 +140,17 @@ describe("Project Form Component", () => {
             wrapper.find("select#root_targetConnection").simulate("change", { target: { value: newConnection.id } });
             expect(wrapper.state().formData.targetConnection).toEqual(newConnection);
             wrapper.find("form").simulate("submit");
-            expect(onSubmitHandler).toBeCalledWith({
+
+            const expectedProject = {
                 ...project,
                 targetConnection: connections[1],
-            });
+            };
+
+            expect(onChangeHandler).toBeCalledWith(expect.objectContaining(project));
+            expect(onSubmitHandler).toBeCalledWith(expectedProject);
         });
 
-        it("starting project should call onChangeHandler on submission", () => {
+        it("starting project should call onSubmitHandler on submission", () => {
             const form = wrapper.find("form");
             form.simulate("submit");
             expect(onSubmitHandler).toBeCalledWith({
@@ -155,6 +174,7 @@ describe("Project Form Component", () => {
 
             const form = wrapper.find("form");
             form.simulate("submit");
+            expect(onChangeHandler).toBeCalledWith(expect.objectContaining(project));
             expect(onSubmitHandler).toBeCalledWith(
                 expect.objectContaining({
                     name: newName,
@@ -187,6 +207,7 @@ describe("Project Form Component", () => {
                 appSettings,
                 connections: newConnections,
                 onSubmit: onSubmitHandler,
+                onChange: onChangeHandler,
                 onCancel: onCancelHandler,
             });
             // Source Connection should have all connections
@@ -202,13 +223,12 @@ describe("Project Form Component", () => {
 
     describe("Empty Project", () => {
         beforeEach(() => {
-            onSubmitHandler = jest.fn();
-            onCancelHandler = jest.fn();
             wrapper = createComponent({
                 project: null,
                 appSettings,
                 connections,
                 onSubmit: onSubmitHandler,
+                onChange: onChangeHandler,
                 onCancel: onCancelHandler,
             });
         });
@@ -239,6 +259,7 @@ describe("Project Form Component", () => {
                 appSettings,
                 connections,
                 onSubmit: onSubmitHandler,
+                onChange: onChangeHandler,
                 onCancel: onCancelHandler,
             });
             const newTagName = "My new tag";

src/react/components/pages/projectSettings/projectForm.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Form, { FormValidation, ISubmitEvent } from "react-jsonschema-form";
+import Form, { FormValidation, ISubmitEvent, IChangeEvent } from "react-jsonschema-form";
 import { ITagsInputProps, TagEditorModal, TagsInput } from "vott-react";
 import { addLocValues, strings } from "../../../../common/strings";
 import { IConnection, IProject, ITag, IAppSettings } from "../../../../models/applicationState";
@@ -28,6 +28,7 @@ export interface IProjectFormProps extends React.Props<ProjectForm> {
     connections: IConnection[];
     appSettings: IAppSettings;
     onSubmit: (project: IProject) => void;
+    onChange?: (project: IProject) => void;
     onCancel?: () => void;
 }
 
@@ -97,6 +98,7 @@ export default class ProjectForm extends React.Component<IProjectFormProps, IPro
                 schema={this.state.formSchema}
                 uiSchema={this.state.uiSchema}
                 formData={this.state.formData}
+                onChange={this.onFormChange}
                 onSubmit={this.onFormSubmit}>
                 <div>
                     <button className="btn btn-success mr-1" type="submit">{strings.projectSettings.save}</button>
@@ -184,6 +186,12 @@ export default class ProjectForm extends React.Component<IProjectFormProps, IPro
         return errors;
     }
 
+    private onFormChange = (changeEvent: IChangeEvent<IProject>) => {
+        if (this.props.onChange) {
+            this.props.onChange(changeEvent.formData);
+        }
+    }
+
     private onFormSubmit(args: ISubmitEvent<IProject>) {
         const project: IProject = {
             ...args.formData,

src/react/components/pages/projectSettings/projectSettingsPage.test.tsx

@@ -4,20 +4,21 @@ import { Provider } from "react-redux";
 import { BrowserRouter as Router } from "react-router-dom";
 import MockFactory from "../../../../common/mockFactory";
 import createReduxStore from "../../../../redux/store/store";
-import ProjectSettingsPage, { IProjectSettingsPageProps } from "./projectSettingsPage";
+import ProjectSettingsPage, { IProjectSettingsPageProps, IProjectSettingsPageState } from "./projectSettingsPage";
 
 jest.mock("../../../../services/projectService");
 import ProjectService from "../../../../services/projectService";
-import { IAppSettings } from "../../../../models/applicationState";
+import { IAppSettings, IProject } from "../../../../models/applicationState";
 import ProjectMetrics from "./projectMetrics";
+import ProjectForm, { IProjectFormProps } from "./projectForm";
 
 jest.mock("./projectMetrics", () => () => {
-        return (
-            <div className="project-settings-page-metrics">
-                Dummy Project Metrics
-            </div>
-        );
-    },
+    return (
+        <div className="project-settings-page-metrics">
+            Dummy Project Metrics
+        </div>
+    );
+},
 );
 
 describe("Project settings page", () => {
@@ -33,12 +34,29 @@ describe("Project settings page", () => {
         );
     }
 
+    const localStorageMock = {
+        getItem: jest.fn(),
+        setItem: jest.fn(),
+        removeItem: jest.fn(),
+    };
+
+    beforeAll(() => {
+        Object.defineProperty(global, "_localStorage", {
+            value: localStorageMock,
+            writable: false,
+        });
+    });
+
     beforeEach(() => {
+        localStorageMock.getItem.mockClear();
+        localStorageMock.setItem.mockClear();
+        localStorageMock.removeItem.mockClear();
+
         projectServiceMock = ProjectService as jest.Mocked<typeof ProjectService>;
-        projectServiceMock.prototype.load = jest.fn((project) => ({...project}));
+        projectServiceMock.prototype.load = jest.fn((project) => ({ ...project }));
     });
 
-    it("Form submission calls save project action", (done) => {
+    it("Form submission calls save project action", async () => {
         const store = createReduxStore(MockFactory.initialState());
         const props = MockFactory.projectSettingsProps();
         const saveProjectSpy = jest.spyOn(props.projectActions, "saveProject");
@@ -47,14 +65,12 @@ describe("Project settings page", () => {
 
         const wrapper = createComponent(store, props);
         wrapper.find("form").simulate("submit");
+        await MockFactory.flushUi();
 
-        setImmediate(() => {
-            expect(saveProjectSpy).toBeCalled();
-            done();
-        });
+        expect(saveProjectSpy).toBeCalled();
     });
 
-    it("Throws an error when a user tries to create a duplicate project", async (done) => {
+    it("Throws an error when a user tries to create a duplicate project", async () => {
         const project = MockFactory.createTestProject("1");
         project.id = "25";
         const initialStateOverride = {
@@ -78,18 +94,16 @@ describe("Project settings page", () => {
             },
         });
         wrapper.find("form").simulate("submit");
-        setImmediate(async () => {
-            // expect(saveProjectSpy).toBeCalled();
-            expect(saveProjectSpy.mockRejectedValue).not.toBeNull();
-            done();
-        });
+        await MockFactory.flushUi();
+
+        expect(saveProjectSpy.mockRejectedValue).not.toBeNull();
     });
 
-    it("calls save project when user creates a unique project", (done) => {
+    it("calls save project when user creates a unique project", async () => {
         const initialState = MockFactory.initialState();
 
         // New Project should not have id or security token set by default
-        const project = {...initialState.recentProjects[0]};
+        const project = { ...initialState.recentProjects[0] };
         project.id = null;
         project.name = "Brand New Project";
         project.securityToken = "";
@@ -106,20 +120,20 @@ describe("Project settings page", () => {
         const wrapper = createComponent(store, props);
         wrapper.find("form").simulate("submit");
 
-        setImmediate(() => {
-            // New security token was created for new project
-            expect(saveAppSettingsSpy).toBeCalled();
-            const appSettings = saveAppSettingsSpy.mock.calls[0][0] as IAppSettings;
-            expect(appSettings.securityTokens.length).toEqual(initialState.appSettings.securityTokens.length + 1);
+        await MockFactory.flushUi();
 
-            // New project was saved with new security token
-            expect(saveProjectSpy).toBeCalledWith({
-                ...project,
-                securityToken: `${project.name} Token`,
-            });
+        // New security token was created for new project
+        expect(saveAppSettingsSpy).toBeCalled();
+        const appSettings = saveAppSettingsSpy.mock.calls[0][0] as IAppSettings;
+        expect(appSettings.securityTokens.length).toEqual(initialState.appSettings.securityTokens.length + 1);
 
-            done();
+        // New project was saved with new security token
+        expect(saveProjectSpy).toBeCalledWith({
+            ...project,
+            securityToken: `${project.name} Token`,
         });
+
+        expect(localStorage.removeItem).toBeCalledWith("projectForm");
     });
 
     it("render ProjectMetrics", () => {
@@ -146,4 +160,64 @@ describe("Project settings page", () => {
             expect(projectMetrics).toHaveLength(0);
         });
     });
+
+    describe("Persisting project form", () => {
+        let wrapper: ReactWrapper = null;
+
+        function initPersistProjectFormTest() {
+            const store = createReduxStore(MockFactory.initialState());
+            const props = MockFactory.projectSettingsProps();
+            props.match.url = "/projects/create";
+            wrapper = createComponent(store, props);
+        }
+
+        it("Loads partial project from local storage", () => {
+            const partialProject: IProject = {
+                ...{} as any,
+                name: "partial project",
+                description: "partial project description",
+                tags: [
+                    { name: "tag-1", color: "#ff0000" },
+                    { name: "tag-3", color: "#ffff00" },
+                ],
+            };
+
+            localStorageMock.getItem.mockImplementationOnce(() => JSON.stringify(partialProject));
+
+            initPersistProjectFormTest();
+            const projectSettingsPage = wrapper
+                .find(ProjectSettingsPage)
+                .childAt(0) as ReactWrapper<IProjectSettingsPageProps, IProjectSettingsPageState>;
+
+            expect(localStorage.getItem).toBeCalledWith("projectForm");
+            expect(projectSettingsPage.state().project).toEqual(partialProject);
+        });
+
+        it("Stores partial project in local storage", () => {
+            initPersistProjectFormTest();
+            const partialProject: IProject = {
+                ...{} as any,
+                name: "partial project",
+            };
+
+            const projectForm = wrapper.find(ProjectForm) as ReactWrapper<IProjectFormProps>;
+            projectForm.props().onChange(partialProject);
+
+            expect(localStorage.setItem).toBeCalledWith("projectForm", JSON.stringify(partialProject));
+        });
+
+        it("Does NOT store empty project in local storage", () => {
+            initPersistProjectFormTest();
+            const emptyProject: IProject = {
+                ...{} as any,
+                sourceConnection: {},
+                targetConnection: {},
+                exportFormat: {},
+            };
+            const projectForm = wrapper.find(ProjectForm) as ReactWrapper<IProjectFormProps>;
+            projectForm.props().onChange(emptyProject);
+
+            expect(localStorage.setItem).not.toBeCalled();
+        });
+    });
 });