Fix/user apps refactor

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

@@ -0,0 +1,164 @@
+import React, { Fragment } from 'react';
+import Editor from 'react-simple-code-editor';
+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 { 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);
+
+  return (
+    <>
+      <div className="pb-5 border-b border-gray-200 sm:flex sm:items-center sm:justify-between mb-5">
+        <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>
+            <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">
+                <div>
+                  <Menu.Button className="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-primary-500">
+                    Versions
+                    <ChevronDownIcon className="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
+                  </Menu.Button>
+                </div>
+
+                <Transition
+                  as={Fragment}
+                  enter="transition ease-out duration-100"
+                  enterFrom="transform opacity-0 scale-95"
+                  enterTo="transform opacity-100 scale-100"
+                  leave="transition ease-in duration-75"
+                  leaveFrom="transform opacity-100 scale-100"
+                  leaveTo="transform opacity-0 scale-95"
+                >
+                  <Menu.Items className="z-10 origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
+                    <div className="py-1">
+                      <Menu.Item>
+                        {({ active }) => (
+                          <a
+                            href="#"
+                            className={classNames(
+                              active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                              'block px-4 py-2 text-sm',
+                            )}
+                          >
+                            Save Version
+                          </a>
+                        )}
+                      </Menu.Item>
+                      <Menu.Item>
+                        {({ active }) => (
+                          <a
+                            href="#"
+                            className={classNames(
+                              active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                              'block px-4 py-2 text-sm',
+                            )}
+                          >
+                            View Version History
+                          </a>
+                        )}
+                      </Menu.Item>
+                      <Menu.Item>
+                        {({ active }) => (
+                          <a
+                            href="#"
+                            className={classNames(
+                              active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                              'block px-4 py-2 text-sm',
+                            )}
+                          >
+                            Restore Current Version
+                          </a>
+                        )}
+                      </Menu.Item>
+                    </div>
+                  </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>
+        <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>
+        </div>
+      </div>
+      <div className="flex justify-end mt-10">
+        <button
+          type="button"
+          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
+        </button>
+
+        <button
+          type="button"
+          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
+        </button>
+
+        <button
+          type="button"
+          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
+        </button>
+      </div>
+
+      <Secrets />
+    </>
+  );
+};

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

@@ -0,0 +1,99 @@
+import React, { Fragment, useRef } from 'react';
+import { Dialog, Transition } from '@headlessui/react';
+
+type ChangeSecretModalProps = {
+  open: boolean;
+  onClose: () => void;
+  onSave?: () => void;
+};
+
+export const ChangeSecretModal = ({ open, onClose, onSave = () => {} }: ChangeSecretModalProps) => {
+  const cancelButtonRef = useRef(null);
+
+  return (
+    <Transition.Root show={open} as={Fragment}>
+      <Dialog
+        as="div"
+        auto-reopen="true"
+        className="fixed z-10 inset-0 overflow-y-auto"
+        initialFocus={cancelButtonRef}
+        onClose={onClose}
+      >
+        <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          </Transition.Child>
+
+          {/* This element is to trick the browser into centering the modal contents. */}
+          <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
+            &#8203;
+          </span>
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enterTo="opacity-100 translate-y-0 sm:scale-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          >
+            <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
+              <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                <div className="mt-3 text-center sm:mt-0 sm:text-left">
+                  <Dialog.Title as="h3" className="text-lg leading-6 font-medium text-gray-900">
+                    Change secret
+                  </Dialog.Title>
+                  <div className="my-4">
+                    <p className="text-sm text-gray-500">
+                      <span className="font-bold text-red-500">CAUTION:</span> changing this might cause the app to
+                      break.
+                    </p>
+                  </div>
+                  <div className="mt-2">
+                    <label htmlFor="appSecret" className="block text-sm font-medium text-gray-700">
+                      App Secret
+                    </label>
+                    <div className="mt-1">
+                      <input
+                        type="text"
+                        name="appSecret"
+                        id="appSecret"
+                        className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                        placeholder="Enter New App Secret"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+                <button
+                  type="button"
+                  className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:ml-3 sm:w-auto sm:text-sm"
+                  onClick={onSave}
+                >
+                  Save Changes
+                </button>
+                <button
+                  type="button"
+                  className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-200 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+                  onClick={onClose}
+                  ref={cancelButtonRef}
+                >
+                  Cancel
+                </button>
+              </div>
+            </div>
+          </Transition.Child>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};

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

@@ -0,0 +1,151 @@
+import React, { useState } from 'react';
+import { ChevronDownIcon, ChevronRightIcon, ClipboardIcon, KeyIcon } from '@heroicons/react/outline';
+import { showToast } from 'src/common/util/show-toast';
+import { Table } from 'src/components';
+import { ChangeSecretModal } from './ChangeSecretModal';
+
+export const Secrets = () => {
+  const [secretModal, setSecretModal] = useState(false);
+  const [openDangerZone, setOpenDangerZone] = useState(false);
+
+  const secretModalOpen = () => setSecretModal(true);
+  const secretModalClose = () => setSecretModal(false);
+
+  const secretsModalSave = () => {
+    showToast('The secret has been saved successfully.');
+    setSecretModal(false);
+  };
+
+  const toggleDangerZone = () => setOpenDangerZone((prevState) => !prevState);
+
+  const columns: any = React.useMemo(
+    () => [
+      {
+        Header: 'Name',
+        accessor: 'name',
+        width: '25%',
+      },
+      {
+        Header: 'Secret',
+        accessor: 'secret',
+        Cell: (e: any) => {
+          const [reveal, setReveal] = useState(false);
+
+          return (
+            <div className="flex items-center">
+              {!reveal ? (
+                <>
+                  <div className="w-48 bg-gray-200 h-4 rounded-full mr-4" />
+                  <button
+                    onClick={() => setReveal(true)}
+                    type="button"
+                    className="inline-flex items-center px-2.5 py-1.5  text-xs font-medium rounded text-gray-700 hover:bg-gray-200 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
+                  >
+                    Reveal secret
+                  </button>
+                </>
+              ) : (
+                <div>{e.cell.row.original.secret}</div>
+              )}
+            </div>
+          );
+        },
+      },
+      {
+        Header: ' ',
+        Cell: () => {
+          return (
+            <div className="flex items-center justify-end opacity-0 group-hover:opacity-100 transition-opacity">
+              <button
+                onClick={() => showToast('The secret has been copied to your clipboard.')}
+                type="button"
+                className="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 mr-3"
+              >
+                <ClipboardIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
+                Copy Secret
+              </button>
+
+              <button
+                onClick={secretModalOpen}
+                type="button"
+                className="inline-flex items-center px-4 py-2 border border-red-400 shadow-sm text-sm font-medium rounded-md text-red-700 bg-red-50 hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
+              >
+                <KeyIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
+                Change secret
+              </button>
+            </div>
+          );
+        },
+      },
+    ],
+    [],
+  );
+
+  const data: any[] = React.useMemo(
+    () => [
+      {
+        id: 1,
+        name: 'nextcloud_mariadb_password',
+        secret: 'xEtC2dvUsBVzoTA19fOyDF4IwpPSWW62I92F59s69EO9vp56',
+      },
+      {
+        id: 2,
+        name: 'nextcloud_mariadb_root_password',
+        secret: `OB.IHD:HPY{x<)>@+B'p(LUU@k-Wv=w(!@)?7Zq%@nE7GY]!`,
+      },
+      {
+        id: 3,
+        name: 'nextcloud_password (admin login)',
+        secret: `#B&>4A;O#XEF]_dE*zxF26>8fF:akgGL8gi#yALK{ZY[P$eE`,
+      },
+      {
+        id: 4,
+        name: 'onlyoffice_jwt_secret',
+        secret: `U),xxEbt*g~t[4:Jl6RU8Tih#3ExinoV|K?.gL/R%?;gzK)R`,
+      },
+      {
+        id: 5,
+        name: 'onlyoffice_postgresql_password',
+        secret: `U),xxEbt*g~t[4:Jl6RU8Tih#3ExinoV|K?.gL/R%?;gzK)R`,
+      },
+      {
+        id: 6,
+        name: 'onlyoffice_rabbitmq_password',
+        secret: `r7sFEUL&U(a;3yR;CaC7P,bPwUEKZOT=IyjJq%AWniY!ncP[`,
+      },
+    ],
+    [],
+  );
+
+  return (
+    <>
+      <div
+        className="pb-5 border-b border-gray-200 sm:flex sm:items-center sm:justify-between mt-24 mb-5 cursor-pointer"
+        onClick={toggleDangerZone}
+      >
+        <h1 className="text-2xl leading-6 font-medium text-gray-900">Danger zone</h1>
+
+        <button
+          type="button"
+          className="inline-flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-900 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
+        >
+          {openDangerZone ? (
+            <ChevronDownIcon className="flex-shrink-0 h-5 w-5 text-gray-600" aria-hidden="true" />
+          ) : (
+            <ChevronRightIcon className="flex-shrink-0 h-5 w-5 text-gray-600" aria-hidden="true" />
+          )}
+        </button>
+      </div>
+
+      {openDangerZone && (
+        <div className="border-2 border-red-500 rounded-md overflow-hidden">
+          <div className="border border-gray-200">
+            <Table data={data} columns={columns} />
+          </div>
+        </div>
+      )}
+
+      <ChangeSecretModal open={secretModal} onClose={secretModalClose} onSave={secretsModalSave} />
+    </>
+  );
+};

src/modules/apps/components/AdvancedTab/components/index.ts

@@ -0,0 +1,2 @@
+export { Secrets } from './Secrets';
+export { ChangeSecretModal } from './ChangeSecretModal';

src/modules/apps/components/AdvancedTab/index.ts

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

src/modules/apps/components/GeneralTab/GeneralTab.tsx

@@ -0,0 +1,161 @@
+import React, { useState } from 'react';
+import { RadioGroup } from '@headlessui/react';
+
+function classNames(...classes: any) {
+  return classes.filter(Boolean).join(' ');
+}
+
+const settings = [
+  { name: 'Public access', description: 'This project would be available to anyone who has the link' },
+  { name: 'Private to Project Members', description: 'Only members of this project would be able to access' },
+  { name: 'Private to you', description: 'You are the only one able to access this project' },
+];
+
+export const GeneralTab = () => {
+  const [selected, setSelected] = useState(settings[0]);
+
+  return (
+    <div className="py-4">
+      <div>
+        <div className="md:grid md:grid-cols-3 md:gap-6">
+          <div className="md:col-span-1">
+            <h3 className="text-lg font-medium leading-6 text-gray-900">Privacy</h3>
+            <p className="mt-1 text-sm text-gray-500">Change your app privacy</p>
+          </div>
+
+          <div className="mt-5 md:mt-0 md:col-span-2">
+            <div className="mt-1">
+              <RadioGroup value={selected} onChange={setSelected}>
+                <RadioGroup.Label className="sr-only">Privacy setting</RadioGroup.Label>
+                <div className="bg-white rounded-md -space-y-px">
+                  {settings.map((setting, settingIdx) => (
+                    <RadioGroup.Option
+                      key={setting.name}
+                      value={setting}
+                      className={({ checked }) =>
+                        classNames(
+                          settingIdx === 0 ? 'rounded-tl-md rounded-tr-md' : '',
+                          settingIdx === settings.length - 1 ? 'rounded-bl-md rounded-br-md' : '',
+                          checked ? 'bg-primary-50 border-primary-400 z-10' : 'border-gray-200',
+                          'relative border p-4 flex cursor-pointer focus:outline-none',
+                        )
+                      }
+                    >
+                      {({ active, checked }) => (
+                        <>
+                          <span
+                            className={classNames(
+                              checked ? 'bg-primary-600 border-transparent' : 'bg-white border-gray-300',
+                              active ? 'ring-2 ring-offset-2 ring-primary-100' : '',
+                              'h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center',
+                            )}
+                            aria-hidden="true"
+                          >
+                            <span className="rounded-full bg-white w-1.5 h-1.5" />
+                          </span>
+                          <div className="ml-3 flex flex-col">
+                            <RadioGroup.Label
+                              as="span"
+                              className={classNames(
+                                checked ? 'text-primary-900' : 'text-gray-900',
+                                'block text-sm font-medium',
+                              )}
+                            >
+                              {setting.name}
+                            </RadioGroup.Label>
+                            <RadioGroup.Description
+                              as="span"
+                              className={classNames(checked ? 'text-primary-900' : 'text-gray-500', 'block text-sm')}
+                            >
+                              {setting.description}
+                            </RadioGroup.Description>
+                          </div>
+                        </>
+                      )}
+                    </RadioGroup.Option>
+                  ))}
+                </div>
+              </RadioGroup>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-10">
+        <div className="md:grid md:grid-cols-3 md:gap-6">
+          <div className="md:col-span-1">
+            <h3 className="text-lg font-medium leading-6 text-gray-900">Notifications</h3>
+            <p className="mt-1 text-sm text-gray-500">Change you notifications settings</p>
+          </div>
+
+          <div className="mt-5 md:mt-0 md:col-span-2">
+            <fieldset className="space-y-5 -mt-4">
+              <legend className="sr-only">Notifications</legend>
+              <div className="relative flex items-start">
+                <div className="flex items-center h-5">
+                  <input
+                    id="comments"
+                    aria-describedby="comments-description"
+                    name="comments"
+                    type="checkbox"
+                    className="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded"
+                  />
+                </div>
+                <div className="ml-3 text-sm">
+                  <label htmlFor="comments" className="font-medium text-gray-700">
+                    Comments
+                  </label>
+                  <p id="comments-description" className="text-gray-500">
+                    Get notified when someones posts a comment on a posting.
+                  </p>
+                </div>
+              </div>
+              <div>
+                <div className="relative flex items-start">
+                  <div className="flex items-center h-5">
+                    <input
+                      id="candidates"
+                      aria-describedby="candidates-description"
+                      name="candidates"
+                      type="checkbox"
+                      className="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded"
+                    />
+                  </div>
+                  <div className="ml-3 text-sm">
+                    <label htmlFor="candidates" className="font-medium text-gray-700">
+                      Candidates
+                    </label>
+                    <p id="candidates-description" className="text-gray-500">
+                      Get notified when a candidate applies for a job.
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div>
+                <div className="relative flex items-start">
+                  <div className="flex items-center h-5">
+                    <input
+                      id="offers"
+                      aria-describedby="offers-description"
+                      name="offers"
+                      type="checkbox"
+                      className="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded"
+                    />
+                  </div>
+                  <div className="ml-3 text-sm">
+                    <label htmlFor="offers" className="font-medium text-gray-700">
+                      Offers
+                    </label>
+                    <p id="offers-description" className="text-gray-500">
+                      Get notified when a candidate accepts or rejects an offer.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </fieldset>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

src/modules/apps/components/GeneralTab/index.ts

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

src/modules/apps/components/index.ts

@@ -0,0 +1,2 @@
+export { GeneralTab } from './GeneralTab';
+export { AdvancedTab } from './AdvancedTab';