comment out versions on code editor

remove configuration from install modal
2022-08-05 19:57:07 +02:00 · 2022-08-05 19:57:07 +02:00 · 94bd90486c
commit 94bd90486c
parent 198e926b4e
9 changed files with 84 additions and 104 deletions
--- a/src/modules/apps/components/AdvancedTab/AdvancedTab.tsx
+++ b/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 { ChevronDownIcon } from '@heroicons/react/solid';
+// import { Menu, Transition } from '@headlessui/react';
+// 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="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>
-            </div>
-            <div className="px-4 py-5 sm:p-6 overflow-x-auto">
-              <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>
-            </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>
+          </div>
+          <div className="px-4 py-5 sm:p-6 overflow-x-auto">
+            <Editor
+              value={initialEditorYaml}
+              onValueChange={_.noop}
+              highlight={(value) => highlight(value, languages.js, 'yaml')}
+              preClassName="font-mono text-sm font-light"
+              textareaClassName="font-mono overflow-auto font-light"
+              className="font-mono text-sm font-light"
+              disabled
+            />
          </div>
        </div>
-        <div>
-          <div>
-            <div className="px-4 h-16 sm:px-6 bg-gray-200 flex justify-between items-center rounded-t-lg">
+        <div className="overflow-hidden rounded-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 className="px-4 py-5 sm:p-6 border border-t-0 border-gray-200">
-              <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"
-              />
-            </div>
+            </div> */}
+          <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">Edit Configuration</span>
+          </div>
+          <div className="px-4 py-5 sm:p-6 border border-t-0 border-gray-200">
+            <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"
+            />
          </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
--- a/src/modules/apps/components/AppInstallModal/AppInstallModal.tsx
+++ b/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 { Modal, Tabs } from 'src/components';
-import { CodeEditor, Input } from 'src/components/Form';
+import { App, useApps } from 'src/services/apps';
+import { Modal } from 'src/components';
+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">
-                <Tabs tabs={tabs} />
+              <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>
            </div>
          </div>
--- a/src/modules/apps/components/AppInstallModal/consts.ts
+++ b/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 AppForm;
+} as App;
--- a/src/modules/apps/consts.tsx
+++ b/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 = () => {
-  return `luck: except
+export const initialEditorYaml = `luck: except
 natural: still
 near: though
 search:
@ -25,7 +24,6 @@ search:
                  hospital: -1544066384.1973226
                  law: congress
                  great: stomach`;
-};

 const tableConsts = [
  {