Refactor the add application form (#911)

**What this PR does / why we need it**:

**Which issue(s) this PR fixes**:

Fixes #

**Does this PR introduce a user-facing change?**:
<!--
If no, just write "NONE" in the release-note block below.
-->
```release-note
NONE
```

This PR was merged by Kapetanios.

pkg/app/web/src/__fixtures__/dummy-piped.ts

@@ -2,14 +2,25 @@ import { Piped, PipedModel } from "../modules/pipeds";
 import { dummyEnv } from "./dummy-environment";
 
 export const dummyPiped: Piped = {
-  cloudProvidersList: [],
+  cloudProvidersList: [
+    {
+      name: "kubernetes-default",
+      type: "KUBERNETES",
+    },
+  ],
   createdAt: 0,
   desc: "",
   disabled: false,
   id: "piped-1",
-  name: "demo piped",
+  name: "dummy piped",
   projectId: "project-1",
-  repositoriesList: [],
+  repositoriesList: [
+    {
+      id: "debug-repo",
+      remote: "git@github.com:pipe-cd/debug.git",
+      branch: "master",
+    },
+  ],
   startedAt: 0,
   updatedAt: 0,
   version: "v0.1",

pkg/app/web/src/api/applications.ts

@@ -78,12 +78,13 @@ export const addApplication = async ({
   req.setKind(kind);
   const appGitPath = new ApplicationGitPath();
   const repository = new ApplicationGitRepository();
-  repository.setId(gitPath.repo !== undefined ? gitPath.repo.id : "");
-  appGitPath.setRepo(repository);
-  appGitPath.setPath(gitPath.path);
-  if (gitPath.configPath && gitPath.configPath !== "") {
-    appGitPath.setConfigPath(gitPath.configPath);
+  if (gitPath.repo) {
+    repository.setId(gitPath.repo.id);
+    repository.setBranch(gitPath.repo.branch);
+    repository.setRemote(gitPath.repo.remote);
+    appGitPath.setRepo(repository);
   }
+  appGitPath.setPath(gitPath.path);
   if (gitPath.configFilename && gitPath.configFilename !== "") {
     appGitPath.setConfigFilename(gitPath.configFilename);
   }

pkg/app/web/src/components/add-application-form.test.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import { AddApplicationForm } from "./add-application-form";
+import { render, fireEvent } from "../../test-utils";
+import { UI_TEXT_CANCEL, UI_TEXT_SAVE } from "../constants/ui-text";
+import { dummyEnv } from "../__fixtures__/dummy-environment";
+import { APPLICATION_KIND_TEXT } from "../constants/application-kind";
+import { ApplicationKind } from "../modules/applications";
+import { dummyPiped } from "../__fixtures__/dummy-piped";
+
+describe("AddApplicationForm", () => {
+  it("calls onSubmit if clicked SAVE button", async () => {
+    const onSubmit = jest.fn();
+    const { getByRole } = render(
+      <AddApplicationForm
+        projectName="pipecd"
+        onSubmit={onSubmit}
+        onClose={jest.fn()}
+        isAdding={false}
+      />,
+      {
+        initialState: {
+          pipeds: {
+            entities: { [dummyPiped.id]: dummyPiped },
+            ids: [dummyPiped.id],
+          },
+          environments: {
+            entities: { [dummyEnv.id]: dummyEnv },
+            ids: [dummyEnv.id],
+          },
+        },
+      }
+    );
+
+    fireEvent.change(getByRole("textbox", { name: "Name" }), {
+      target: {
+        value: "App",
+      },
+    });
+    fireEvent.mouseDown(getByRole("button", { name: /Kind/ }));
+    fireEvent.click(
+      getByRole("option", {
+        name: APPLICATION_KIND_TEXT[ApplicationKind.KUBERNETES],
+      })
+    );
+    fireEvent.mouseDown(getByRole("button", { name: /Environment/ }));
+    fireEvent.click(getByRole("option", { name: dummyEnv.name }));
+
+    fireEvent.mouseDown(getByRole("button", { name: /Piped/ }));
+    fireEvent.click(getByRole("option", { name: /dummy piped/ }));
+
+    fireEvent.mouseDown(getByRole("button", { name: /Repository/ }));
+    fireEvent.click(getByRole("option", { name: /debug-repo/ }));
+
+    fireEvent.change(getByRole("textbox", { name: "Path" }), {
+      target: {
+        value: "path",
+      },
+    });
+
+    fireEvent.mouseDown(getByRole("button", { name: /Cloud Provider/ }));
+    fireEvent.click(getByRole("option", { name: /kubernetes-default/ }));
+
+    fireEvent.click(getByRole("button", { name: UI_TEXT_SAVE }));
+
+    expect(onSubmit).toHaveBeenCalledWith({
+      cloudProvider: "kubernetes-default",
+      configFilename: "",
+      env: "env-1",
+      kind: 0,
+      name: "App",
+      pipedId: "piped-1",
+      repo: {
+        branch: "master",
+        id: "debug-repo",
+        remote: "git@github.com:pipe-cd/debug.git",
+      },
+      repoPath: "path",
+    });
+  });
+
+  it("calls onClose handler if clicked CANCEL button", () => {
+    const onClose = jest.fn();
+    const { getByRole } = render(
+      <AddApplicationForm
+        projectName="pipecd"
+        onSubmit={jest.fn()}
+        onClose={onClose}
+        isAdding={false}
+      />,
+      {}
+    );
+
+    fireEvent.click(getByRole("button", { name: UI_TEXT_CANCEL }));
+
+    expect(onClose).toHaveBeenCalled();
+  });
+});