comment out versions on code editor

remove configuration from install modal

src/components/Form/CodeEditor/CodeEditor.tsx

@@ -4,7 +4,7 @@ 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) => {
+export const CodeEditor = ({ control, name, required, disabled = false }: CodeEditorProps) => {
   const {
     field,
     // fieldState: { invalid, isTouched, isDirty },
@@ -25,6 +25,7 @@ export const CodeEditor = ({ control, name, required }: CodeEditorProps) => {
         preClassName="font-mono whitespace-normal font-light"
         textareaClassName="font-mono overflow-auto font-light"
         className="font-mono text-sm font-light"
+        disabled={disabled}
       />
     </>
   );
@@ -34,4 +35,5 @@ type CodeEditorProps = {
   control: any;
   name: string;
   required?: boolean;
+  disabled?: boolean;
 };

src/components/Tabs/Tabs.tsx

@@ -2,11 +2,14 @@ import React, { useState } from 'react';
 import { TabPanel } from './TabPanel';
 import { TabsProps } from './types';
 
-export const Tabs = ({ tabs }: TabsProps) => {
+export const Tabs = ({ tabs, onTabClick }: TabsProps) => {
   const [activeTabIndex, setActiveTabIndex] = useState<number>(0);
 
   const handleTabPress = (index: number) => () => {
     setActiveTabIndex(index);
+    if (onTabClick) {
+      onTabClick(index);
+    }
   };
 
   function classNames(...classes: any) {

src/components/Tabs/types.ts

@@ -6,6 +6,7 @@ type Tab = {
 
 export interface TabsProps {
   tabs: Tab[];
+  onTabClick?: (index: number) => void;
 }
 
 export interface TabPanelProps {

src/modules/apps/components/AdvancedTab/AdvancedTab.tsx

@@ -1,20 +1,33 @@
-import React, { Fragment } from 'react';
+import React from 'react';
+import _ from 'lodash';
 import Editor from 'react-simple-code-editor';
-import { Menu, Transition } from '@headlessui/react';
+// import { Menu, Transition } from '@headlessui/react';
-import { ChevronDownIcon } from '@heroicons/react/solid';
+// import { ChevronDownIcon } from '@heroicons/react/solid';
 import { highlight, languages } from 'prismjs';
 import 'prismjs/components/prism-clike';
 import 'prismjs/components/prism-yaml';
 import 'prismjs/themes/prism.css';
+import { showToast } from 'src/common/util/show-toast';
+import { useApps } from 'src/services/apps';
 import { initialEditorYaml } from '../../consts';
-// import { Secrets } from './components';
-
-function classNames(...classes: any) {
-  return classes.filter(Boolean).join(' ');
-}
 
 export const AdvancedTab = () => {
   const [code, setCode] = React.useState(initialEditorYaml);
+  const { app, editApp } = useApps();
+
+  const resetCode = () => {
+    setCode(initialEditorYaml);
+    showToast('Code was reset.');
+  };
+
+  const vertifyCode = () => {
+    // call yaml verification (only format)
+    // const result = validateSchema(code, {});
+  };
+
+  const saveChanges = () => {
+    editApp({ ...app, configuration: code });
+  };
 
   return (
     <>
@@ -22,41 +35,24 @@ export const AdvancedTab = () => {
         <h1 className="text-2xl leading-6 font-medium text-gray-900">Configuration</h1>
       </div>
       <div className="grid grid-flow-col grid-cols-2 gap-8">
-        <div>
+        <div className="bg-gray-100 overflow-hidden rounded-lg">
-          <div className="bg-gray-100 overflow-hidden rounded-lg">
+          <div className="px-4 h-16 sm:px-6 bg-gray-200 flex items-center">
-            <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">Current Configuration</span>
+          </div>
-            </div>
+          <div className="px-4 py-5 sm:p-6 overflow-x-auto">
-            <div className="px-4 py-5 sm:p-6 overflow-x-auto">
+            <Editor
-              <pre className="font-mono text-sm font-light">
+              value={initialEditorYaml}
-                {`luck: except
+              onValueChange={_.noop}
-natural: still
+              highlight={(value) => highlight(value, languages.js, 'yaml')}
-near: though
+              preClassName="font-mono text-sm font-light"
-search:
+              textareaClassName="font-mono overflow-auto font-light"
-  - feature
+              className="font-mono text-sm font-light"
-  - - 1980732354.689713
+              disabled
-    - 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>
-            </div>
           </div>
         </div>
-        <div>
+        <div className="overflow-hidden rounded-lg">
-          <div>
+          {/* <div className="px-4 h-16 sm:px-6 bg-gray-200 flex justify-between items-center rounded-t-lg">
-            <div className="px-4 h-16 sm:px-6 bg-gray-200 flex justify-between items-center rounded-t-lg">
               <span className="text-gray-600 text-lg leading-6 font-medium">Edit Configuration</span>
 
               <Menu as="div" className="relative inline-block text-left">
@@ -121,30 +117,34 @@ search:
                   </Menu.Items>
                 </Transition>
               </Menu>
-            </div>
+            </div> */}
-            <div className="px-4 py-5 sm:p-6 border border-t-0 border-gray-200">
+          <div className="px-4 h-16 sm:px-6 bg-gray-200 flex items-center">
-              <Editor
+            <span className="text-gray-600 text-lg leading-6 font-medium">Edit Configuration</span>
-                value={code}
+          </div>
-                onValueChange={(value) => setCode(value)}
+          <div className="px-4 py-5 sm:p-6 border border-t-0 border-gray-200">
-                highlight={(value) => highlight(value, languages.js, 'yaml')}
+            <Editor
-                preClassName="font-mono whitespace-normal font-light"
+              value={code}
-                textareaClassName="font-mono overflow-auto font-light"
+              onValueChange={(value) => setCode(value)}
-                className="font-mono text-sm font-light"
+              highlight={(value) => highlight(value, languages.js, 'yaml')}
-              />
+              preClassName="font-mono whitespace-normal font-light"
-            </div>
+              textareaClassName="font-mono overflow-auto font-light"
+              className="font-mono text-sm font-light"
+            />
           </div>
         </div>
       </div>
       <div className="flex justify-end mt-10">
         <button
           type="button"
+          onClick={resetCode}
           className="mr-3 inline-flex items-center px-4 py-2 border border-gray-200 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
         >
-          Cancel
+          Reset
         </button>
 
         <button
           type="button"
+          onClick={vertifyCode}
           className="mr-3 inline-flex items-center px-4 py-2 shadow-sm text-sm font-medium rounded-md text-primary-700 bg-primary-100 hover:bg-primary-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
         >
           Verify
@@ -152,6 +152,7 @@ search:
 
         <button
           type="button"
+          onClick={saveChanges}
           className="inline-flex items-center px-4 py-2 shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
         >
           Save changes

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

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import _ from 'lodash';
-import { AppForm, useApps } from 'src/services/apps';
+import { App, useApps } from 'src/services/apps';
-import { Modal, Tabs } from 'src/components';
+import { Modal } from 'src/components';
-import { CodeEditor, Input } from 'src/components/Form';
+import { Input } from 'src/components/Form';
 import { appAccessList } from 'src/components/UserModal/consts';
 import { AppInstallModalProps } from './types';
 import { initialAppForm, initialCode } from './consts';
@@ -12,7 +12,7 @@ export const AppInstallModal = ({ open, onClose, appSlug }: AppInstallModalProps
   const [appName, setAppName] = useState('');
   const { app, appLoading, installApp, loadApp, clearSelectedApp } = useApps();
 
-  const { control, reset, handleSubmit } = useForm<AppForm>({
+  const { control, reset, handleSubmit } = useForm<App>({
     defaultValues: initialAppForm,
   });
 
@@ -62,36 +62,6 @@ export const AppInstallModal = ({ open, onClose, appSlug }: AppInstallModalProps
     }
   };
 
-  const renderSubdomain = () => {
-    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 control={control} name="subdomain" label="Subdomain" onKeyPress={handleKeyPress} required={false} />
-        </div>
-      </div>
-    );
-  };
-
-  const renderConfiguration = () => {
-    return (
-      <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">App Configuration</span>
-          </div>
-          <div className="px-4 py-5 sm:p-6 overflow-x-auto">
-            <CodeEditor control={control} name="configuration" />
-          </div>
-        </div>
-      </div>
-    );
-  };
-
-  const tabs = [
-    { name: 'Subdomain', component: renderSubdomain() },
-    { name: 'Advanced Configuration', component: renderConfiguration() },
-  ];
-
   return (
     <>
       <Modal onClose={handleClose} open={open} onSave={handleSave} isLoading={appLoading} useCancelButton>
@@ -102,8 +72,16 @@ export const AppInstallModal = ({ open, onClose, appSlug }: AppInstallModalProps
                 <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">
+              <div className="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
-                <Tabs tabs={tabs} />
+                <div className="sm:col-span-3">
+                  <Input
+                    control={control}
+                    name="subdomain"
+                    label="Subdomain"
+                    onKeyPress={handleKeyPress}
+                    required={false}
+                  />
+                </div>
               </div>
             </div>
           </div>

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

@@ -1,4 +1,4 @@
-import { AppForm } from 'src/services/apps';
+import { App } from 'src/services/apps';
 
 export const initialCode = `luck: except
 natural: still
@@ -24,5 +24,4 @@ search:
 
 export const initialAppForm = {
   subdomain: '',
-  configuration: initialCode,
+} as App;
-} as AppForm;

src/modules/apps/consts.tsx

@@ -3,8 +3,7 @@ import { CogIcon, PlusCircleIcon } from '@heroicons/react/outline';
 import _ from 'lodash';
 import { AppStatus } from 'src/services/apps';
 
-export const initialEditorYaml = () => {
+export const initialEditorYaml = `luck: except
-  return `luck: except
 natural: still
 near: though
 search:
@@ -25,7 +24,6 @@ search:
                   hospital: -1544066384.1973226
                   law: congress
                   great: stomach`;
-};
 
 const tableConsts = [
   {

src/services/apps/transformations.ts

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

src/services/apps/types.ts

@@ -5,10 +5,7 @@ export interface App {
   status?: AppStatus;
   subdomain?: string;
   automaticUpdates: boolean;
-}
+  configuration?: string;
-
-export interface AppForm extends App {
-  configuration: string;
 }
 
 export interface DisableAppForm {