fix:Resolves issue where user is unable to create new project (#601)

Fixes a bug where when attempting to create a new project after already have opened a project it does not close the existing project before navigating the user to the new project screen.

Also resolves issue where security token picker component was not rendering in in project settings form.

Resolves AB#17172, AB#17177, AB#17179, AB#17180

src/react/components/pages/homepage/homePage.test.tsx

@@ -10,7 +10,7 @@ import createReduxStore from "../../../../redux/store/store";
 import ProjectService from "../../../../services/projectService";
 import CondensedList from "../../common/condensedList/condensedList";
 import FilePicker, { IFilePickerProps } from "../../common/filePicker/filePicker";
-import HomePage, { IHomepageProps } from "./homePage";
+import HomePage, { IHomepageProps, IHomepageState } from "./homePage";
 
 jest.mock("../../common/cloudFilePicker/cloudFilePicker");
 import { CloudFilePicker, ICloudFilePickerProps } from "../../common/cloudFilePicker/cloudFilePicker";
@@ -49,7 +49,7 @@ describe("Homepage Component", () => {
     });
 
     it("should render a New Project Link", () => {
-        expect(wrapper.find(Link).props().to).toBe("/projects/create");
+        expect(wrapper.find("a.new-project").exists()).toBe(true);
     });
 
     it("should not close projects when homepage loads", () => {
@@ -147,6 +147,13 @@ describe("Homepage Component", () => {
         expect(openProjectSpy).toBeCalledWith(testProject);
     });
 
+    it("closes any open project and navigates to the new project screen", () => {
+        const homepage = wrapper.find(HomePage).childAt(0) as ReactWrapper<IHomepageProps, IHomepageState>;
+        homepage.find("a.new-project").simulate("click");
+        expect(closeProjectSpy).toBeCalled();
+        expect(homepage.props().history.push).toBeCalledWith("/projects/create");
+    });
+
     function createProps(): IHomepageProps {
         return {
             recentProjects: [],

src/react/components/pages/homepage/homePage.tsx

@@ -55,10 +55,10 @@ export default class HomePage extends React.Component<IHomepageProps> {
                 <div className="app-homepage-main text-light">
                     <ul>
                         <li>
-                            <Link to={"/projects/create"} className="p-5">
+                            <a href="#" onClick={this.createNewProject} className="p-5 new-project">
                                 <i className="fas fa-folder-plus fa-9x"></i>
                                 <h6>{strings.homePage.newProject}</h6>
-                            </Link>
+                            </a>
                         </li>
                         <li>
                             <a href="#" onClick={() => this.filePicker.current.upload()} className="p-5 file-upload">
@@ -103,6 +103,11 @@ export default class HomePage extends React.Component<IHomepageProps> {
         );
     }
 
+    private createNewProject = () => {
+        this.props.actions.closeProject();
+        this.props.history.push("/projects/create");
+    }
+
     private handleOpenCloudProjectClick = () => {
         this.cloudFilePicker.current.open();
     }

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

@@ -6,6 +6,9 @@ import { KeyCodes } from "../../../../common/utils";
 import registerProviders from "../../../../registerProviders";
 import ProjectForm, { IProjectFormProps, IProjectFormState } from "./projectForm";
 import { IProjectVideoSettings } from "../../../../models/applicationState";
+import { SecurityTokenPicker } from "../../common/securityTokenPicker/securityTokenPicker";
+import ConnectionPicker from "../../common/connectionPicker/connectionPicker";
+import { TagsInput } from "vott-react";
 
 describe("Project Form Component", () => {
     const project = MockFactory.createTestProject("TestProject");
@@ -41,6 +44,12 @@ describe("Project Form Component", () => {
             });
         });
 
+        it("renders the form correctly", () => {
+            expect(wrapper.find(SecurityTokenPicker)).toHaveLength(1);
+            expect(wrapper.find(ConnectionPicker)).toHaveLength(2);
+            expect(wrapper.find(TagsInput)).toHaveLength(1);
+        });
+
         it("starting project has initial state loaded correctly", () => {
             const formData = wrapper.state().formData;
             expect(formData.name).toEqual(project.name);

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

@@ -7,7 +7,9 @@ import { StorageProviderFactory } from "../../../../providers/storage/storagePro
 import ConnectionPicker from "../../common/connectionPicker/connectionPicker";
 import CustomField from "../../common/customField/customField";
 import CustomFieldTemplate from "../../common/customField/customFieldTemplate";
+import { ISecurityTokenPickerProps, SecurityTokenPicker } from "../../common/securityTokenPicker/securityTokenPicker";
 import "vott-react/dist/css/tagsInput.css";
+import { IConnectionProviderPickerProps } from "../../common/connectionProviderPicker/connectionProviderPicker";
 
 // tslint:disable-next-line:no-var-requires
 const formSchema = addLocValues(require("./projectForm.json"));
@@ -48,7 +50,6 @@ export interface IProjectFormState {
  * @description - Form for editing or creating VoTT projects
  */
 export default class ProjectForm extends React.Component<IProjectFormProps, IProjectFormState> {
-
     private tagsInput: React.RefObject<TagsInput>;
     private tagEditorModal: React.RefObject<TagEditorModal>;
 
@@ -118,7 +119,14 @@ export default class ProjectForm extends React.Component<IProjectFormProps, IPro
 
     private fields() {
         return {
-            sourceConnection: CustomField(ConnectionPicker, (props) => {
+            securityToken: CustomField<ISecurityTokenPickerProps>(SecurityTokenPicker, (props) => ({
+                id: props.idSchema.$id,
+                schema: props.schema,
+                value: props.formData,
+                securityTokens: this.props.appSettings.securityTokens,
+                onChange: props.onChange,
+            })),
+            sourceConnection: CustomField<IConnectionProviderPickerProps>(ConnectionPicker, (props) => {
                 return {
                     id: props.idSchema.$id,
                     value: props.formData,
@@ -126,9 +134,10 @@ export default class ProjectForm extends React.Component<IProjectFormProps, IPro
                     onChange: props.onChange,
                 };
             }),
-            targetConnection: CustomField(ConnectionPicker, (props) => {
-                const targetConnections = this.props.connections.filter(
-                    (connection) => StorageProviderFactory.isRegistered(connection.providerType));
+            targetConnection: CustomField<IConnectionProviderPickerProps>(ConnectionPicker, (props) => {
+                const targetConnections = this.props.connections
+                    .filter((connection) => StorageProviderFactory.isRegistered(connection.providerType));
+
                 return {
                     id: props.idSchema.$id,
                     value: props.formData,
@@ -136,15 +145,14 @@ export default class ProjectForm extends React.Component<IProjectFormProps, IPro
                     onChange: props.onChange,
                 };
             }),
-            tagsInput: CustomField(TagsInput, (props) => {
-                const tagsInputProps: ITagsInputProps = {
+            tagsInput: CustomField<ITagsInputProps>(TagsInput, (props) => {
+                return {
                     tags: props.formData,
                     onChange: props.onChange,
                     placeHolder: strings.tags.placeholder,
                     onCtrlTagClick: this.onTagClick,
                     ref: this.tagsInput,
                 };
-                return tagsInputProps;
             }),
         };
     }