implement code editor as a component

add notif on status 'Installing' click
modify AppInstallModal

src/components/Form/CodeEditor/CodeEditor.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { highlight, languages } from 'prismjs';
+import { useController } from 'react-hook-form';
+import Editor from 'react-simple-code-editor';
+
+/* eslint-disable react/react-in-jsx-scope */
+export const CodeEditor = ({ control, name, required }: CodeEditorProps) => {
+  const {
+    field,
+    // fieldState: { invalid, isTouched, isDirty },
+    // formState: { touchedFields, dirtyFields },
+  } = useController({
+    name,
+    control,
+    rules: { required },
+    defaultValue: '',
+  });
+
+  return (
+    <>
+      <Editor
+        value={field.value}
+        onValueChange={field.onChange}
+        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"
+      />
+    </>
+  );
+};
+
+type CodeEditorProps = {
+  control: any;
+  name: string;
+  required?: boolean;
+};

src/components/Form/CodeEditor/index.ts

@@ -0,0 +1 @@
+export { CodeEditor } from './CodeEditor';

src/components/Form/index.ts

@@ -1,3 +1,4 @@
 export { Input } from './Input';
 export { Select } from './Select';
 export { Switch } from './Switch';
+export { CodeEditor } from './CodeEditor';

src/components/Table/Table.tsx

@@ -166,7 +166,7 @@ export const Table = <T extends Record<string, unknown>>({
                       />
                     </svg>
                   </div>
-                  <p className="text-sm text-primary-600 mt-2">Loading users</p>
+                  <p className="text-sm text-primary-600 mt-2">Loading...</p>
                 </div>
               </td>
             </tr>

src/components/UserModal/consts.ts

@@ -5,21 +5,25 @@ export const appAccessList = [
     name: 'wekan',
     image: '/assets/wekan.svg',
     label: 'Wekan',
+    defaultSubdomain: 'wekan.{domain}',
   },
   {
     name: 'wordpress',
     image: '/assets/wordpress.svg',
     label: 'Wordpress',
+    defaultSubdomain: 'www.{domain}',
   },
   {
     name: 'nextcloud',
     image: '/assets/nextcloud.svg',
     label: 'Nextcloud',
+    defaultSubdomain: 'files.{domain}',
   },
   {
     name: 'zulip',
     image: '/assets/zulip.svg',
     label: 'Zulip',
+    defaultSubdomain: 'zulip.{domain}',
   },
 ];
 

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')}`} />
+            {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>
 
+      {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;

src/services/apps/hooks/use-apps.ts

@@ -1,5 +1,5 @@
 import { useDispatch, useSelector } from 'react-redux';
-import { fetchApps, fetchAppBySlug, updateAppBySlug, installAppBySlug } from '../redux';
+import { fetchApps, fetchAppBySlug, updateAppBySlug, installAppBySlug, clearCurrentApp } from '../redux';
 import { getCurrentApp, getAppLoading, getAppsLoading, getApps } from '../redux/selectors';
 
 export function useApps() {
@@ -25,6 +25,10 @@ export function useApps() {
     return dispatch(installAppBySlug(data));
   }
 
+  function clearSelectedApp() {
+    return dispatch(clearCurrentApp());
+  }
+
   return {
     apps,
     app,
@@ -34,5 +38,6 @@ export function useApps() {
     appLoading,
     appTableLoading,
     installApp,
+    clearSelectedApp,
   };
 }

src/services/apps/redux/actions.ts

@@ -8,6 +8,7 @@ export enum AppActionTypes {
   FETCH_APP = 'apps/fetch_app',
   UPDATE_APP = 'apps/update_app',
   INSTALL_APP = 'apps/install_app',
+  CLEAR_APP = 'apps/clear_app',
   SET_APP_LOADING = 'apps/app_loading',
   SET_APPS_LOADING = 'apps/apps_loading',
 }
@@ -97,7 +98,7 @@ export const installAppBySlug = (app: any) => async (dispatch: Dispatch<any>) =>
   try {
     const { data } = await performApiCall({
       path: `/apps/${app.slug}/install`,
-      method: 'POST',
+      method: 'PATCH',
       body: transformInstallAppRequest(app),
     });
 
@@ -117,3 +118,10 @@ export const installAppBySlug = (app: any) => async (dispatch: Dispatch<any>) =>
 
   dispatch(setAppLoading(false));
 };
+
+export const clearCurrentApp = () => (dispatch: Dispatch<any>) => {
+  dispatch({
+    type: AppActionTypes.CLEAR_APP,
+    payload: {},
+  });
+};

src/services/apps/redux/reducers.ts

@@ -31,6 +31,11 @@ const appsReducer = (state: any = initialUsersState, action: any) => {
         ...state,
         currentApp: action.payload,
       };
+    case AppActionTypes.CLEAR_APP:
+      return {
+        ...state,
+        currentApp: {},
+      };
     default:
       return state;
   }

src/services/apps/transformations.ts

@@ -1,4 +1,4 @@
-import { App, AppStatus, FormApp } from './types';
+import { App, AppStatus, AppForm } from './types';
 
 const transformAppStatus = (status: string) => {
   switch (status) {
@@ -24,14 +24,15 @@ export const transformApp = (response: any): App => {
   };
 };
 
-export const transformAppRequest = (data: FormApp) => {
+export const transformAppRequest = (data: AppForm) => {
   return {
     automatic_updates: data.automaticUpdates,
   };
 };
 
-export const transformInstallAppRequest = (data: FormApp) => {
+export const transformInstallAppRequest = (data: AppForm) => {
   return {
     subdomain: data.subdomain,
+    configuration: data.configuration,
   };
 };

src/services/apps/types.ts

@@ -7,7 +7,7 @@ export interface App {
   automaticUpdates: boolean;
 }
 
-export interface FormApp extends App {
+export interface AppForm extends App {
   configuration: string;
 }