implement code editor as a component

add notif on status 'Installing' click
modify AppInstallModal

src/modules/apps/Apps.tsx

@@ -2,6 +2,7 @@
 import React, { useState, useCallback, useMemo, useEffect } from 'react';
 import { useNavigate } from 'react-router';
 import { SearchIcon } from '@heroicons/react/solid';
+import { showToast, ToastType } from 'src/common/util/show-toast';
 import _, { debounce } from 'lodash';
 import { Table } from 'src/components';
 import { appAccessList } from 'src/components/UserModal/consts';
@@ -61,7 +62,16 @@ export const Apps: React.FC = () => {
         return (
           <div className="flex items-center">
             <div className={`flex-shrink-0 h-4 w-4 rounded-full bg-${getConstForStatus(status, 'colorClass')}`} />
-            <div className={`ml-2 text-sm text-${getConstForStatus(status, 'colorClass')}`}>{status}</div>
+            {status === AppStatus.Installing ? (
+              <div
+                className={`ml-2 cursor-pointer text-sm text-${getConstForStatus(status, 'colorClass')}`}
+                onClick={() => showToast('Installing an app can take up to 10 minutes.', ToastType.Success)}
+              >
+                {status}
+              </div>
+            ) : (
+              <div className={`ml-2 text-sm text-${getConstForStatus(status, 'colorClass')}`}>{status}</div>
+            )}
           </div>
         );
       },
@@ -147,7 +157,9 @@ export const Apps: React.FC = () => {
         </div>
       </div>
 
-      <AppInstallModal appSlug={appSlug} onClose={() => setInstallModalOpen(false)} open={installModalOpen} />
+      {installModalOpen && (
+        <AppInstallModal appSlug={appSlug} onClose={() => setInstallModalOpen(false)} open={installModalOpen} />
+      )}
     </div>
   );
 };

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

@@ -1,36 +1,22 @@
 import React, { useEffect, useState } from 'react';
-import Editor from 'react-simple-code-editor';
-import { highlight, languages } from 'prismjs';
+import { useForm } from 'react-hook-form';
 import _ from 'lodash';
-import { useApps } from 'src/services/apps';
+import { AppForm, useApps } from 'src/services/apps';
 import { Modal, Tabs } from 'src/components';
+import { CodeEditor, Input } from 'src/components/Form';
+import { appAccessList } from 'src/components/UserModal/consts';
 import { AppInstallModalProps } from './types';
-
-const initialCode = `luck: except
-natural: still
-near: though
-search:
-  - feature
-  - - 1980732354.689713
-    - hour
-    - butter:
-        ordinary: 995901949.8974948
-        teeth: true
-        whole:
-          - -952367353
-          - - talk: -1773961379
-              temperature: false
-              oxygen: true
-              laugh:
-                flag:
-                  in: 2144751662
-                  hospital: -1544066384.1973226
-                  law: congress
-                  great: stomach`;
+import { initialAppForm, initialCode } from './consts';
 
 export const AppInstallModal = ({ open, onClose, appSlug }: AppInstallModalProps) => {
-  const [code, setCode] = useState(initialCode);
-  const { app, appLoading, loadApp } = useApps();
+  const [appName, setAppName] = useState('');
+  const { app, appLoading, installApp, loadApp, clearSelectedApp } = useApps();
+
+  const { control, reset, handleSubmit } = useForm<AppForm>({
+    defaultValues: initialAppForm,
+  });
+
+  const getDefaultSubdomain = () => _.get(_.find(appAccessList, ['name', appSlug]), 'defaultSubdomain', '');
 
   useEffect(() => {
     if (appSlug) {
@@ -39,9 +25,31 @@ export const AppInstallModal = ({ open, onClose, appSlug }: AppInstallModalProps
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [appSlug, open]);
 
+  useEffect(() => {
+    if (!_.isEmpty(app)) {
+      setAppName(app.name);
+      reset({ subdomain: getDefaultSubdomain(), configuration: initialCode });
+    }
+
+    return () => {
+      reset({ subdomain: getDefaultSubdomain(), configuration: initialCode });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [app, reset, open]);
+
+  const handleClose = () => {
+    clearSelectedApp();
+    reset();
+    onClose();
+  };
+
   const handleSave = async () => {
-    _.noop();
-    // todo: implement
+    try {
+      await handleSubmit((data) => installApp(data))();
+    } catch (e: any) {
+      // Continue
+    }
+    handleClose();
   };
 
   const handleKeyPress = (e: any) => {
@@ -54,7 +62,7 @@ export const AppInstallModal = ({ open, onClose, appSlug }: AppInstallModalProps
     return (
       <div className="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
         <div className="sm:col-span-3">
-          <input name="subdomain" placeholder="Subdomain" onKeyPress={handleKeyPress} required={false} />
+          <Input control={control} name="subdomain" label="Subdomain" onKeyPress={handleKeyPress} required={false} />
         </div>
       </div>
     );
@@ -65,40 +73,10 @@ export const AppInstallModal = ({ open, onClose, appSlug }: AppInstallModalProps
       <div>
         <div className="bg-gray-100 overflow-hidden rounded-lg">
           <div className="px-4 h-16 sm:px-6 bg-gray-200 flex items-center">
-            <span className="text-gray-600 text-lg leading-6 font-medium">Current Configuration</span>
+            <span className="text-gray-600 text-lg leading-6 font-medium">App Configuration</span>
           </div>
           <div className="px-4 py-5 sm:p-6 overflow-x-auto">
-            <Editor
-              value={code}
-              onValueChange={(value) => setCode(value)}
-              highlight={(value) => highlight(value, languages.js, 'yaml')}
-              preClassName="font-mono whitespace-normal font-light"
-              textareaClassName="font-mono overflow-auto font-light"
-              className="font-mono text-sm font-light"
-            />
-            <pre className="font-mono text-sm font-light">
-              {`luck: except
-natural: still
-near: though
-search:
-  - feature
-  - - 1980732354.689713
-    - hour
-    - butter:
-        ordinary: 995901949.8974948
-        teeth: true
-        whole:
-          - -952367353
-          - - talk: -1773961379
-              temperature: false
-              oxygen: true
-              laugh:
-                flag:
-                  in: 2144751662
-                  hospital: -1544066384.1973226
-                  law: congress
-                  great: stomach`}
-            </pre>
+            <CodeEditor control={control} name="configuration" />
           </div>
         </div>
       </div>
@@ -110,10 +88,6 @@ search:
     { name: 'Advanced Configuration', component: renderConfiguration() },
   ];
 
-  const handleClose = () => {
-    onClose();
-  };
-
   return (
     <>
       <Modal onClose={handleClose} open={open} onSave={handleSave} isLoading={appLoading} useCancelButton>
@@ -121,7 +95,7 @@ search:
           <div className="space-y-10 divide-y divide-gray-200">
             <div>
               <div>
-                <h3 className="text-lg leading-6 font-medium text-gray-900">Install app {_.get(app, 'name')}</h3>
+                <h3 className="text-lg leading-6 font-medium text-gray-900">Install app {appName}</h3>
               </div>
 
               <div className="px-4 py-5 sm:p-6">

src/modules/apps/components/AppInstallModal/consts.ts

@@ -0,0 +1,28 @@
+import { AppForm } from 'src/services/apps';
+
+export const initialCode = `luck: except
+natural: still
+near: though
+search:
+  - feature
+  - - 1980732354.689713
+    - hour
+    - butter:
+        ordinary: 995901949.8974948
+        teeth: true
+        whole:
+          - -952367353
+          - - talk: -1773961379
+              temperature: false
+              oxygen: true
+              laugh:
+                flag:
+                  in: 2144751662
+                  hospital: -1544066384.1973226
+                  law: congress
+                  great: stomach`;
+
+export const initialAppForm = {
+  subdomain: '',
+  configuration: initialCode,
+} as AppForm;