Implement Edit Application on the web

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

@@ -2,6 +2,7 @@ import { ApplicationKind } from "pipe/pkg/app/web/model/common_pb";
 import { ApplicationSyncStatus } from "../modules/applications";
 import { dummyEnv } from "./dummy-environment";
 import { dummyPiped } from "./dummy-piped";
+import { dummyRepo } from "./dummy-repo";
 
 export const dummyApplication = {
   id: "application-1",
@@ -14,11 +15,7 @@ export const dummyApplication = {
     configFilename: "",
     path: "dir/dir1",
     url: "",
-    repo: {
-      id: "repo-1",
-      branch: "master",
-      remote: "xxx",
-    },
+    repo: dummyRepo,
   },
   kind: ApplicationKind.KUBERNETES,
   name: "DemoApp",

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

@@ -1,5 +1,6 @@
 import { Piped, PipedModel } from "../modules/pipeds";
 import { dummyEnv } from "./dummy-environment";
+import { dummyRepo } from "./dummy-repo";
 
 export const dummyPiped: Piped = {
   cloudProvidersList: [
@@ -19,13 +20,7 @@ export const dummyPiped: Piped = {
   id: "piped-1",
   name: "dummy piped",
   projectId: "project-1",
-  repositoriesList: [
-    {
-      id: "debug-repo",
-      remote: "[email protected]:pipe-cd/debug.git",
-      branch: "master",
-    },
-  ],
+  repositoriesList: [dummyRepo],
   startedAt: 0,
   updatedAt: 0,
   version: "v0.1",

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

@@ -0,0 +1,7 @@
+import { ApplicationGitRepository } from "pipe/pkg/app/web/model/common_pb";
+
+export const dummyRepo: ApplicationGitRepository.AsObject = {
+  id: "debug-repo",
+  remote: "[email protected]:pipe-cd/debug.git",
+  branch: "master",
+};

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

@@ -14,6 +14,8 @@ import {
   DisableApplicationResponse,
   EnableApplicationRequest,
   EnableApplicationResponse,
+  UpdateApplicationRequest,
+  UpdateApplicationResponse,
 } from "pipe/pkg/app/web/api_client/service_pb";
 import { ApplicationGitPath } from "pipe/pkg/app/web/model/common_pb";
 import { ApplicationGitRepository } from "pipe/pkg/app/web/model/common_pb";
@@ -121,3 +123,39 @@ export const enableApplication = async ({
   req.setApplicationId(applicationId);
   return apiRequest(req, apiClient.enableApplication);
 };
+
+export const updateApplication = async ({
+  applicationId,
+  cloudProvider,
+  envId,
+  kind,
+  name,
+  pipedId,
+  gitPath,
+}: Required<UpdateApplicationRequest.AsObject>): Promise<
+  UpdateApplicationResponse.AsObject
+> => {
+  console.log(UpdateApplicationRequest);
+
+  const req = new UpdateApplicationRequest();
+  req.setApplicationId(applicationId);
+  req.setName(name);
+  req.setEnvId(envId);
+  req.setPipedId(pipedId);
+  req.setCloudProvider(cloudProvider);
+  req.setKind(kind);
+  const appGitPath = new ApplicationGitPath();
+  const repository = new ApplicationGitRepository();
+  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);
+  }
+  req.setGitPath(appGitPath);
+  return apiRequest(req, apiClient.updateApplication);
+};

pkg/app/web/src/components/add-application-drawer.stories.tsx → pkg/app/web/src/components/application-form-drawer.stories.tsx

@@ -1,13 +1,13 @@
 import React from "react";
-import { AddApplicationDrawer } from "./add-application-drawer";
+import { ApplicationFormDrawer } from "./application-form-drawer";
 import { action } from "@storybook/addon-actions";
 import { createDecoratorRedux } from "../../.storybook/redux-decorator";
 import { dummyEnv } from "../__fixtures__/dummy-environment";
 import { dummyPiped } from "../__fixtures__/dummy-piped";
 
 export default {
-  title: "APPLICATION/AddApplicationDrawer",
-  component: AddApplicationDrawer,
+  title: "APPLICATION/ApplicationFormDrawer",
+  component: ApplicationFormDrawer,
   decorators: [
     createDecoratorRedux({
       environments: {
@@ -27,11 +27,21 @@ export default {
 };
 
 export const overview: React.FC = () => (
-  <AddApplicationDrawer
+  <ApplicationFormDrawer
     open
-    projectName="pipe-cd"
+    title="add application"
     onSubmit={action("onSubmit")}
     onClose={action("onClose")}
-    isAdding={false}
+    isProcessing={false}
+  />
+);
+
+export const isProcessing: React.FC = () => (
+  <ApplicationFormDrawer
+    open
+    title="add application"
+    onSubmit={action("onSubmit")}
+    onClose={action("onClose")}
+    isProcessing={true}
   />
 );

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { AddApplicationDrawer } from "./add-application-drawer";
+import { ApplicationFormDrawer } from "./application-form-drawer";
 import { render, screen, waitFor } from "../../test-utils";
 import { UI_TEXT_CANCEL, UI_TEXT_SAVE } from "../constants/ui-text";
 import { dummyEnv } from "../__fixtures__/dummy-environment";
@@ -8,16 +8,16 @@ import { ApplicationKind } from "../modules/applications";
 import { dummyPiped } from "../__fixtures__/dummy-piped";
 import userEvent from "@testing-library/user-event";
 
-describe("AddApplicationDrawer", () => {
+describe("ApplicationFormDrawer", () => {
   it("should calls onSubmit if clicked SAVE button", async () => {
     const onSubmit = jest.fn();
     render(
-      <AddApplicationDrawer
+      <ApplicationFormDrawer
         open
-        projectName="pipecd"
+        title="add application"
         onSubmit={onSubmit}
         onClose={jest.fn()}
-        isAdding={false}
+        isProcessing={false}
       />,
       {
         initialState: {
@@ -79,12 +79,12 @@ describe("AddApplicationDrawer", () => {
   it("should clear depended fields if change environment", async () => {
     const altEnv = { ...dummyEnv, id: "env-2", name: "env-2" };
     render(
-      <AddApplicationDrawer
+      <ApplicationFormDrawer
         open
-        projectName="pipecd"
+        title="add application"
         onSubmit={() => null}
         onClose={() => null}
-        isAdding={false}
+        isProcessing={false}
       />,
       {
         initialState: {
@@ -151,12 +151,12 @@ describe("AddApplicationDrawer", () => {
   it("should calls onClose handler if clicked CANCEL button", () => {
     const onClose = jest.fn();
     render(
-      <AddApplicationDrawer
+      <ApplicationFormDrawer
         open
-        projectName="pipecd"
+        title="add application"
         onSubmit={jest.fn()}
         onClose={onClose}
-        isAdding={false}
+        isProcessing={false}
       />,
       {}
     );