Add ability to edit piped configuration

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

@@ -12,6 +12,8 @@ import {
   RecreatePipedKeyResponse,
   GenerateApplicationSealedSecretRequest,
   GenerateApplicationSealedSecretResponse,
+  UpdatePipedRequest,
+  UpdatePipedResponse,
 } from "pipe/pkg/app/web/api_client/service_pb";
 
 export const getPipeds = ({
@@ -71,3 +73,17 @@ export const generateApplicationSealedSecret = ({
   req.setData(data);
   return apiRequest(req, apiClient.generateApplicationSealedSecret);
 };
+
+export const updatePiped = ({
+  pipedId,
+  name,
+  desc,
+  envIdsList,
+}: UpdatePipedRequest.AsObject): Promise<UpdatePipedResponse.AsObject> => {
+  const req = new UpdatePipedRequest();
+  req.setPipedId(pipedId);
+  req.setName(name);
+  req.setDesc(desc);
+  req.setEnvIdsList(envIdsList);
+  return apiRequest(req, apiClient.updatePiped);
+};

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

@@ -1,14 +1,14 @@
-import React from "react";
-import { AddPipedForm } from "./add-piped-form";
 import { action } from "@storybook/addon-actions";
+import React from "react";
 import { createDecoratorRedux } from "../../.storybook/redux-decorator";
 import { dummyEnv } from "../__fixtures__/dummy-environment";
+import { AddPipedDrawer } from "./add-piped-drawer";
 
 const env2 = { ...dummyEnv, id: "env-2", name: "development" };
 
 export default {
-  title: "SETTINGS/AddPipedForm",
-  component: AddPipedForm,
+  title: "SETTINGS/Piped/AddPipedDrawer",
+  component: AddPipedDrawer,
   decorators: [
     createDecoratorRedux({
       environments: {
@@ -23,9 +23,5 @@ export default {
 };
 
 export const overview: React.FC = () => (
-  <AddPipedForm
-    onClose={action("onClose")}
-    onSubmit={action("onSubmit")}
-    projectName="project-name"
-  />
+  <AddPipedDrawer open onClose={action("onClose")} />
 );

pkg/app/web/src/components/add-piped-drawer.tsx

@@ -0,0 +1,53 @@
+import React, { FC, memo, useCallback } from "react";
+import { Drawer } from "@material-ui/core";
+import { PipedForm, PipedFormValues, validationSchema } from "./piped-form";
+import { useFormik } from "formik";
+import { useDispatch, useSelector } from "react-redux";
+import { AppState } from "../modules";
+import { selectProjectName } from "../modules/me";
+import { addPiped } from "../modules/pipeds";
+import { AppDispatch } from "../store";
+import { addToast } from "../modules/toasts";
+import { ADD_PIPED_SUCCESS } from "../constants/toast-text";
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+}
+
+export const AddPipedDrawer: FC<Props> = memo(function AddPipedDrawer({
+  open,
+  onClose,
+}) {
+  const dispatch = useDispatch<AppDispatch>();
+  const projectName = useSelector<AppState, string>((state) =>
+    selectProjectName(state.me)
+  );
+
+  const formik = useFormik<PipedFormValues>({
+    initialValues: { name: "", desc: "", envIds: [] },
+    validationSchema,
+    validateOnMount: true,
+    async onSubmit(values) {
+      await dispatch(addPiped(values)).then(() => {
+        dispatch(addToast({ message: ADD_PIPED_SUCCESS, severity: "success" }));
+        onClose();
+      });
+    },
+  });
+
+  const handleClose = useCallback(() => {
+    onClose();
+    formik.resetForm();
+  }, [formik, onClose]);
+
+  return (
+    <Drawer anchor="right" open={open} onClose={handleClose}>
+      <PipedForm
+        title={`Add a new piped to "${projectName}" project`}
+        {...formik}
+        onClose={handleClose}
+      />
+    </Drawer>
+  );
+});

pkg/app/web/src/components/application-detail.stories.tsx

@@ -35,6 +35,7 @@ const dummyStore: Partial<AppState> = {
     hasError: {},
   },
   pipeds: {
+    updating: false,
     entities: {
       [dummyPiped.id]: dummyPiped,
     },

pkg/app/web/src/components/edit-piped-drawer.stories.tsx

@@ -0,0 +1,34 @@
+import { action } from "@storybook/addon-actions";
+import React from "react";
+import { createDecoratorRedux } from "../../.storybook/redux-decorator";
+import { dummyEnv } from "../__fixtures__/dummy-environment";
+import { dummyPiped } from "../__fixtures__/dummy-piped";
+import { EditPipedDrawer } from "./edit-piped-drawer";
+
+const env2 = { ...dummyEnv, id: "env-2", name: "development" };
+
+export default {
+  title: "SETTINGS/Piped/EditPipedDrawer",
+  component: EditPipedDrawer,
+  decorators: [
+    createDecoratorRedux({
+      pipeds: {
+        entities: {
+          [dummyPiped.id]: dummyPiped,
+        },
+        ids: [dummyPiped.id],
+      },
+      environments: {
+        entities: {
+          [dummyEnv.id]: dummyEnv,
+          [env2.id]: env2,
+        },
+        ids: [dummyEnv.id, env2.id],
+      },
+    }),
+  ],
+};
+
+export const overview: React.FC = () => (
+  <EditPipedDrawer pipedId={dummyPiped.id} onClose={action("onClose")} />
+);

pkg/app/web/src/components/edit-piped-drawer.tsx

@@ -0,0 +1,63 @@
+import React, { FC, memo, useCallback } from "react";
+import { Drawer } from "@material-ui/core";
+import { PipedForm, PipedFormValues, validationSchema } from "./piped-form";
+import { useFormik } from "formik";
+import { useDispatch, useSelector } from "react-redux";
+import { AppState } from "../modules";
+import { editPiped, fetchPipeds, Piped, selectById } from "../modules/pipeds";
+import { AppDispatch } from "../store";
+import { addToast } from "../modules/toasts";
+import { UPDATE_PIPED_SUCCESS } from "../constants/toast-text";
+
+interface Props {
+  pipedId: string | null;
+  onClose: () => void;
+}
+
+export const EditPipedDrawer: FC<Props> = memo(function EditPipedDrawer({
+  pipedId,
+  onClose,
+}) {
+  const dispatch = useDispatch<AppDispatch>();
+  const piped = useSelector<AppState, Piped | undefined>((state) =>
+    pipedId ? selectById(state.pipeds, pipedId) : undefined
+  );
+
+  const formik = useFormik<PipedFormValues>({
+    initialValues: {
+      name: piped?.name || "",
+      desc: piped?.desc || "",
+      envIds: piped?.envIdsList || [],
+    },
+    enableReinitialize: true,
+    validationSchema,
+    async onSubmit({ desc, envIds, name }) {
+      if (!pipedId) {
+        return;
+      }
+
+      await dispatch(editPiped({ pipedId, name, desc, envIds })).then(() => {
+        dispatch(fetchPipeds(true));
+        dispatch(
+          addToast({ message: UPDATE_PIPED_SUCCESS, severity: "success" })
+        );
+        onClose();
+      });
+    },
+  });
+
+  const handleClose = useCallback(() => {
+    onClose();
+    formik.resetForm();
+  }, [formik, onClose]);
+
+  return (
+    <Drawer anchor="right" open={Boolean(piped)} onClose={handleClose}>
+      <PipedForm
+        title={`Edit piped "${piped?.name}"`}
+        {...formik}
+        onClose={handleClose}
+      />
+    </Drawer>
+  );
+});