Add update/delete actions

src/services/views/ServiceDetails/ServiceDetails.tsx

@@ -7,6 +7,13 @@ import useNotifier from "@saleor/hooks/useNotifier";
 import useShop from "@saleor/hooks/useShop";
 import { commonMessages } from "@saleor/intl";
 import { getMutationState, maybe } from "@saleor/misc";
+import ServiceDeleteDialog from "@saleor/services/components/ServiceDeleteDialog";
+import {
+  ServiceDeleteMutation,
+  ServiceUpdateMutation
+} from "@saleor/services/mutations";
+import { ServiceDelete } from "@saleor/services/types/ServiceDelete";
+import { ServiceUpdate } from "@saleor/services/types/ServiceUpdate";
 import ServiceDetailsPage, {
   ServiceDetailsPageFormData
 } from "../../components/ServiceDetailsPage";
@@ -51,22 +58,15 @@ export const ServiceDetails: React.StatelessComponent<OrderListProps> = ({
       })
     );
 
-  return (
-    <ServiceDetailsQuery
-      displayLoader
-      variables={{ id }}
-      require={["serviceAccount"]}
-    >
-      {({ data, loading }) => {
   const onServiceUpdate = (data: ServiceUpdate) => {
-          if (!maybe(() => data.serviceUpdate.errors.length !== 0)) {
+    if (!maybe(() => data.serviceAccountUpdate.errors.length !== 0)) {
       notify({
         text: intl.formatMessage(commonMessages.savedChanges)
       });
     }
   };
   const onServiceDelete = (data: ServiceDelete) => {
-          if (!maybe(() => data.serviceDelete.errors.length !== 0)) {
+    if (data.serviceAccountDelete.errors.length === 0) {
       notify({
         text: intl.formatMessage(commonMessages.savedChanges)
       });
@@ -76,11 +76,59 @@ export const ServiceDetails: React.StatelessComponent<OrderListProps> = ({
 
   const handleBack = () => navigate(serviceListUrl());
 
-        const handleSubmit = (data: ServiceDetailsPageFormData) => undefined;
+  return (
+    <ServiceDetailsQuery
+      displayLoader
+      variables={{ id }}
+      require={["serviceAccount"]}
+    >
+      {({ data, loading }) => (
+        <ServiceUpdateMutation onCompleted={onServiceUpdate}>
+          {(updateService, updateServiceOpts) => (
+            <ServiceDeleteMutation onCompleted={onServiceDelete}>
+              {(deleteService, deleteServiceOpts) => {
+                const handleSubmit = (data: ServiceDetailsPageFormData) =>
+                  updateService({
+                    variables: {
+                      id,
+                      input: {
+                        isActive: data.isActive,
+                        name: data.name,
+                        permissions: data.hasFullAccess
+                          ? shop.permissions.map(permission => permission.code)
+                          : data.permissions
+                      }
+                    }
+                  });
+
+                const handleRemoveConfirm = () =>
+                  deleteService({
+                    variables: {
+                      id
+                    }
+                  });
+
+                const formTransitionState = getMutationState(
+                  updateServiceOpts.called,
+                  updateServiceOpts.loading,
+                  maybe(
+                    () => updateServiceOpts.data.serviceAccountUpdate.errors
+                  )
+                );
+
+                const deleteTransitionState = getMutationState(
+                  deleteServiceOpts.called,
+                  deleteServiceOpts.loading,
+                  maybe(
+                    () => deleteServiceOpts.data.serviceAccountDelete.errors
+                  )
+                );
 
                 return (
                   <>
-            <WindowTitle title={maybe(() => data.serviceAccount.name)} />
+                    <WindowTitle
+                      title={maybe(() => data.serviceAccount.name)}
+                    />
                     <ServiceDetailsPage
                       disabled={loading}
                       errors={[]}
@@ -88,14 +136,25 @@ export const ServiceDetails: React.StatelessComponent<OrderListProps> = ({
                       onDelete={() => openModal("remove")}
                       onSubmit={handleSubmit}
                       onTokenCreate={() => openModal("create-token")}
-              onTokenDelete={() => openModal("delete-token")}
+                      onTokenDelete={() => openModal("remove-token")}
                       permissions={maybe(() => shop.permissions)}
                       service={maybe(() => data.serviceAccount)}
-              saveButtonBarState="default"
+                      saveButtonBarState={formTransitionState}
+                    />
+                    <ServiceDeleteDialog
+                      confirmButtonState={deleteTransitionState}
+                      name={maybe(() => data.serviceAccount.name, "...")}
+                      onClose={closeModal}
+                      onConfirm={handleRemoveConfirm}
+                      open={params.action === "remove"}
                     />
                   </>
                 );
               }}
+            </ServiceDeleteMutation>
+          )}
+        </ServiceUpdateMutation>
+      )}
     </ServiceDetailsQuery>
   );
 };