modify disable app modal

src/modules/apps/AppSingle.tsx

@@ -1,29 +1,53 @@
 import React, { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useForm, useWatch } from 'react-hook-form';
 import _ from 'lodash';
 import { XCircleIcon } from '@heroicons/react/outline';
-import { useApps } from 'src/services/apps';
+import { DisableAppForm, useApps } from 'src/services/apps';
 import { Modal, Tabs } from 'src/components';
+import { Checkbox } from 'src/components/Form';
 import { appAccessList } from 'src/components/UserModal/consts';
 import { AdvancedTab, GeneralTab } from './components';
 
 export const AppSingle: React.FC = () => {
-  const [disableApp, setDisableApp] = useState(false);
+  const [disableAppModal, setDisableAppModal] = useState(false);
   const [removeAppData, setRemoveAppData] = useState(false);
   const params = useParams();
   const appSlug = params.slug;
-  const { app, loadApp } = useApps();
+  const { app, loadApp, disableApp, clearSelectedApp } = useApps();
+  const navigate = useNavigate();
+
+  const initialDisableData = { slug: appSlug, removeAppData: false };
+
+  const { control, reset, handleSubmit } = useForm<DisableAppForm>({
+    defaultValues: initialDisableData,
+  });
+
+  const removeAppDataWatch = useWatch({
+    control,
+    name: 'removeAppData',
+  });
+
+  useEffect(() => {
+    setRemoveAppData(removeAppDataWatch);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [removeAppDataWatch]);
 
   useEffect(() => {
     if (appSlug) {
       loadApp(appSlug);
     }
+
+    return () => {
+      clearSelectedApp();
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [appSlug]);
 
   if (!app) {
     return null;
   }
+
   const appImageSrc = _.find(appAccessList, { name: appSlug })?.image;
   const appDocumentationUrl = _.find(appAccessList, { name: appSlug })?.documentationUrl;
 
@@ -31,20 +55,28 @@ export const AppSingle: React.FC = () => {
     window.open(appDocumentationUrl, '_blank', 'noopener,noreferrer');
   };
 
-  const handleAutomaticUpdatesChange = () => {
-    app.automaticUpdates = !app.automaticUpdates;
-  };
-
   const tabs = [
     {
       name: 'General',
-      component: <GeneralTab automaticUpdates={app.automaticUpdates} onChange={handleAutomaticUpdatesChange} />,
+      component: <GeneralTab automaticUpdates={app.automaticUpdates} onChange={_.noop} />,
     },
     { name: 'Advanced Configuration', component: <AdvancedTab /> },
   ];
 
-  const onDisableApp = () => {
-    // TODO: implement
+  const onDisableApp = async () => {
+    try {
+      await handleSubmit((data) => disableApp(data))();
+    } catch (e: any) {
+      // Continue
+    }
+    setDisableAppModal(false);
+    clearSelectedApp();
+    navigate('/apps');
+  };
+
+  const handleCloseDisableModal = () => {
+    reset(initialDisableData);
+    setDisableAppModal(false);
   };
 
   return (
@@ -62,7 +94,7 @@ export const AppSingle: React.FC = () => {
           <button
             type="button"
             className="mb-3 inline-flex items-center px-4 py-2 shadow-sm text-sm font-medium rounded-md text-yellow-900 bg-yellow-300 hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 justify-center"
-            onClick={() => setDisableApp(true)}
+            onClick={() => setDisableAppModal(true)}
           >
             <XCircleIcon className="-ml-0.5 mr-2 h-4 w-4 text-yellow-900" aria-hidden="true" />
             Disable App
@@ -85,8 +117,15 @@ export const AppSingle: React.FC = () => {
         </div>
       </div>
 
-      {disableApp && (
-        <Modal onClose={() => setDisableApp(false)} open={disableApp} onSave={onDisableApp} useCancelButton>
+      {disableAppModal && (
+        <Modal
+          onClose={handleCloseDisableModal}
+          open={disableAppModal}
+          onSave={onDisableApp}
+          saveButtonTitle={removeAppData ? `Yes, delete  and it's data` : 'Yes, delete'}
+          cancelButtonTitle="No, cancel"
+          useCancelButton
+        >
           <div className="bg-white px-4">
             <div className="space-y-10 divide-y divide-gray-200">
               <div>
@@ -97,25 +136,16 @@ export const AppSingle: React.FC = () => {
                   Are you sure you want to disable {app.name}? The app will get uninstalled and none of your users will
                   be able to access the app.
                 </div>
-                <fieldset className="space-y-5 -mt-4">
-                  <legend className="sr-only">Remove app data</legend>
+                <fieldset className="px-4 py-5 sm:p-6">
                   <div className="relative flex items-start">
                     <div className="flex items-center h-5">
-                      <input
-                        id="comments"
-                        aria-describedby="comments-description"
-                        name="disableAppData"
-                        type="checkbox"
-                        checked={removeAppData}
-                        onChange={() => setRemoveAppData(!removeAppData)}
-                        className="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded"
-                      />
+                      <Checkbox control={control} name="removeAppData" id="removeAppData" />
                     </div>
                     <div className="ml-3 text-sm">
-                      <label htmlFor="comments" className="font-medium text-gray-700">
+                      <label htmlFor="removeAppData" className="font-medium text-gray-700">
                         Remove app data
                       </label>
-                      <p id="comments-description" className="text-gray-500">
+                      <p id="removeAppData-description" className="text-gray-500">
                         {removeAppData
                           ? `The app's data will be removed. After this operation is done you will not be able to access the app, nor the app data. If you re-install the app, it will have none of the data it had before.`
                           : `The app's data does not get removed. If you install the app again, you will be able to access the data again.`}

src/modules/apps/components/AppInstallModal/AppInstallModal.tsx

@@ -22,6 +22,10 @@ export const AppInstallModal = ({ open, onClose, appSlug }: AppInstallModalProps
     if (appSlug) {
       loadApp(appSlug);
     }
+
+    return () => {
+      reset(initialAppForm);
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [appSlug, open]);