Fix/user apps refactor

src/components/Modal/Modal/Modal.tsx

@@ -3,7 +3,14 @@ import { Dialog, Transition } from '@headlessui/react';
 import { XIcon } from '@heroicons/react/solid';
 import { ModalProps } from './types';
 
-export const Modal: React.FC<ModalProps> = ({ open, onClose, onSave, children, title = '' }) => {
+export const Modal: React.FC<ModalProps> = ({
+  open,
+  onClose,
+  onSave,
+  children,
+  title = '',
+  useCancelButton = false,
+}) => {
   const cancelButtonRef = useRef(null);
 
   return (
@@ -36,18 +43,22 @@ export const Modal: React.FC<ModalProps> = ({ open, onClose, onSave, children, t
             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-2xl sm:w-full">
-              <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:items-center sm:justify-between">
-                <div>{title}</div>
-                <button
-                  type="button"
-                  className="w-full inline-flex justify-center rounded-md border border-gray-200 p-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}
-                >
-                  <XIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
-                </button>
-              </div>
+              {!useCancelButton && (
+                <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:items-center sm:justify-between">
+                  <div>{title}</div>
+                  <button
+                    type="button"
+                    className="w-full inline-flex justify-center rounded-md border border-gray-200 p-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}
+                  >
+                    <XIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                  </button>
+                </div>
+              )}
+
               <div className="bg-white px-4 p-6">{children}</div>
+
               {onSave && (
                 <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                   <button
@@ -57,6 +68,16 @@ export const Modal: React.FC<ModalProps> = ({ open, onClose, onSave, children, t
                   >
                     Save Changes
                   </button>
+                  {useCancelButton && (
+                    <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>

src/components/Modal/Modal/types.ts

@@ -3,4 +3,5 @@ export type ModalProps = {
   onClose: () => void;
   title?: string;
   onSave?: () => void;
+  useCancelButton?: boolean;
 };

src/modules/apps/AppSingle.tsx

@@ -3,9 +3,7 @@ import { Link, RouteComponentProps, RouterProps } from '@reach/router';
 import { ChevronRightIcon } from '@heroicons/react/solid';
 import { XCircleIcon } from '@heroicons/react/outline';
 import { Tabs } from 'src/components';
-import { GeneralTab } from './GeneralTab';
-import { Secrets } from './Secrets';
-import { Advanced } from './Advanced';
+import { AdvancedTab, GeneralTab } from './components';
 
 type AppSingleProps = RouteComponentProps & RouterProps;
 
@@ -16,8 +14,7 @@ const pages = [
 
 const tabs = [
   { name: 'General', component: <GeneralTab /> },
-  { name: 'Secrets & Passwords', component: <Secrets /> },
-  { name: 'Advanced Configuration', component: <Advanced /> },
+  { name: 'Advanced Configuration', component: <AdvancedTab /> },
 ];
 
 export const AppSingle: React.FC<AppSingleProps> = () => {

src/modules/apps/Apps.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useCallback } from 'react';
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useState, useCallback, useMemo } from 'react';
 import { RouteComponentProps, navigate, Link } from '@reach/router';
 import { ChevronRightIcon, SearchIcon, PlusIcon } from '@heroicons/react/solid';
 import { CogIcon, TrashIcon } from '@heroicons/react/outline';
@@ -12,11 +13,50 @@ const pages = [{ name: 'Apps', href: '#', current: true }];
 export const Apps: React.FC<AppsProps> = () => {
   const [selectedRowsIds, setSelectedRowsIds] = useState({});
   const [deleteModal, setDeleteModal] = useState(false);
+  const [search, setSearch] = useState('');
 
   const deleteModalOpen = () => setDeleteModal(true);
   const deleteModalClose = () => setDeleteModal(false);
 
-  const columns: any = React.useMemo(
+  const handleSearch = useCallback((event: any) => {
+    setSearch(event.target.value);
+  }, []);
+
+  const data: any[] = useMemo(
+    () => [
+      {
+        id: 1,
+        name: 'Nextcloud',
+        status: 'Active for everyone',
+        assetSrc: './assets/nextcloud.svg',
+      },
+      {
+        id: 2,
+        name: 'Wekan',
+        status: 'Active for everyone',
+        assetSrc: './assets/wekan.svg',
+      },
+      {
+        id: 3,
+        name: 'Rocketchat',
+        status: 'Active for everyone',
+        assetSrc: './assets/rocketchat.svg',
+      },
+      {
+        id: 4,
+        name: 'Wordpress',
+        status: 'Active for everyone',
+        assetSrc: './assets/wordpress.svg',
+      },
+    ],
+    [],
+  );
+
+  const filterSearch = useMemo(() => {
+    return data.filter((item: any) => item.name?.toLowerCase().includes(search.toLowerCase()));
+  }, [search]);
+
+  const columns: any = useMemo(
     () => [
       {
         Header: 'Name',
@@ -70,36 +110,6 @@ export const Apps: React.FC<AppsProps> = () => {
     [],
   );
 
-  const data: any[] = React.useMemo(
-    () => [
-      {
-        id: 1,
-        name: 'Nextcloud',
-        status: 'Active for everyone',
-        assetSrc: './assets/nextcloud.svg',
-      },
-      {
-        id: 2,
-        name: 'Wekan',
-        status: 'Active for everyone',
-        assetSrc: './assets/wekan.svg',
-      },
-      {
-        id: 3,
-        name: 'Rocketchat',
-        status: 'Active for everyone',
-        assetSrc: './assets/rocketchat.svg',
-      },
-      {
-        id: 4,
-        name: 'Wordpress',
-        status: 'Active for everyone',
-        assetSrc: './assets/wordpress.svg',
-      },
-    ],
-    [],
-  );
-
   const selectedRows = useCallback((rows: Record<string, boolean>) => {
     setSelectedRowsIds(rows);
   }, []);
@@ -146,8 +156,8 @@ export const Apps: React.FC<AppsProps> = () => {
       </div>
 
       <div className="flex justify-between w-100 my-3 items-center">
-        <div>
-          <div className="mr-3 inline-block">
+        <div className="flex items-center">
+          {/* <div className="mr-3 inline-block">
             <label htmlFor="location" className="block text-sm font-medium text-gray-700 sr-only">
               Location
             </label>
@@ -162,9 +172,9 @@ export const Apps: React.FC<AppsProps> = () => {
               <option>Admins</option>
               <option>Members</option>
             </select>
-          </div>
+          </div> */}
 
-          <div className="mb-5 inline-block">
+          <div className="inline-block">
             <label htmlFor="email" className="block text-sm font-medium text-gray-700 sr-only">
               Search candidates
             </label>
@@ -179,6 +189,7 @@ export const Apps: React.FC<AppsProps> = () => {
                   id="email"
                   className="focus:ring-primary-dark focus:border-primary-dark block w-full rounded-md pl-10 sm:text-sm border-gray-200"
                   placeholder="Search Apps"
+                  onChange={handleSearch}
                 />
               </div>
             </div>
@@ -201,7 +212,7 @@ export const Apps: React.FC<AppsProps> = () => {
         <div className="-my-2 sm:-mx-6 lg:-mx-8">
           <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
             <div className="shadow border-b border-gray-200 sm:rounded-lg">
-              <Table data={data} columns={columns} getSelectedRowIds={selectedRows} selectable />
+              <Table data={filterSearch} columns={columns} getSelectedRowIds={selectedRows} selectable />
             </div>
           </div>
         </div>

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

@@ -6,17 +6,21 @@ 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 { initialEditorYaml } from '../../consts';
+import { Secrets } from './components';
 
 function classNames(...classes: any) {
   return classes.filter(Boolean).join(' ');
 }
 
-export const Advanced = () => {
+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>
@@ -153,6 +157,8 @@ search:
           Save changes
         </button>
       </div>
+
+      <Secrets />
     </>
   );
 };

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

@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
-import { ClipboardIcon, KeyIcon } from '@heroicons/react/outline';
+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);
@@ -15,6 +16,8 @@ export const Secrets = () => {
     setSecretModal(false);
   };
 
+  const toggleDangerZone = () => setOpenDangerZone((prevState) => !prevState);
+
   const columns: any = React.useMemo(
     () => [
       {
@@ -65,7 +68,7 @@ export const Secrets = () => {
               <button
                 onClick={secretModalOpen}
                 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"
+                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
@@ -116,17 +119,31 @@ export const Secrets = () => {
 
   return (
     <>
-      <div className="py-4">
-        <div className="flex flex-col">
-          <div className="-my-2 sm:-mx-6 lg:-mx-8">
-            <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
-              <div className="border border-gray-200">
-                <Table data={data} columns={columns} />
-              </div>
-            </div>
+      <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>
-      </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/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';

src/modules/users/Users.tsx

@@ -1,7 +1,8 @@
-import React, { useState, useCallback, useEffect } from 'react';
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import { RouteComponentProps, Link } from '@reach/router';
 import { ChevronRightIcon, SearchIcon, PlusIcon } from '@heroicons/react/solid';
-import { CogIcon, KeyIcon, TrashIcon } from '@heroicons/react/outline';
+import { CogIcon, TrashIcon } from '@heroicons/react/outline';
 import { useUsers } from 'src/services/users';
 import { Table } from 'src/components';
 import { ConfirmationModal } from 'src/components/Modal';
@@ -13,8 +14,13 @@ export const Users: React.FC<RouteComponentProps> = () => {
   const [selectedRowsIds, setSelectedRowsIds] = useState({});
   const [deleteModal, setDeleteModal] = useState(false);
   const [configureModal, setConfigureModal] = useState(false);
+  const [search, setSearch] = useState('');
   const { loadUsers, users } = useUsers();
 
+  const handleSearch = useCallback((event: any) => {
+    setSearch(event.target.value);
+  }, []);
+
   // TODO: Check why it needs any
   const allUsers: any = users.items;
 
@@ -31,6 +37,10 @@ export const Users: React.FC<RouteComponentProps> = () => {
     /* eslint-disable-next-line react-hooks/exhaustive-deps */
   }, []);
 
+  const filterSearch = useMemo(() => {
+    return allUsers.filter((item: any) => item.name?.toLowerCase().includes(search.toLowerCase()));
+  }, [search, allUsers]);
+
   const deleteModalOpen = () => setDeleteModal(true);
   const deleteModalClose = () => setDeleteModal(false);
 
@@ -117,6 +127,7 @@ export const Users: React.FC<RouteComponentProps> = () => {
         <h1 className="text-3xl leading-6 font-bold text-gray-900">Users</h1>
         <div className="mt-3 sm:mt-0 sm:ml-4">
           <button
+            onClick={configureModalOpen}
             type="button"
             className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-700 hover:bg-primary-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-800"
           >
@@ -126,9 +137,9 @@ export const Users: React.FC<RouteComponentProps> = () => {
         </div>
       </div>
 
-      <div className="flex justify-between w-100 my-3 items-center">
-        <div>
-          <div className="mr-3 inline-block shadow-sm">
+      <div className="flex justify-between w-100 my-3 items-center mb-5 ">
+        <div className="flex items-center">
+          {/* <div className="mr-3 inline-block shadow-sm">
             <label htmlFor="location" className="block text-sm font-medium text-gray-700 sr-only">
               Location
             </label>
@@ -143,9 +154,9 @@ export const Users: React.FC<RouteComponentProps> = () => {
               <option>Admins</option>
               <option>Members</option>
             </select>
-          </div>
+          </div> */}
 
-          <div className="mb-5 inline-block">
+          <div className="inline-block">
             <label htmlFor="email" className="block text-sm font-medium text-gray-700 sr-only">
               Search candidates
             </label>
@@ -160,6 +171,7 @@ export const Users: React.FC<RouteComponentProps> = () => {
                   id="email"
                   className="focus:ring-primary-500 focus:border-primary-500 block w-full rounded-md pl-10 sm:text-sm border-gray-200"
                   placeholder="Search Users"
+                  onChange={handleSearch}
                 />
               </div>
             </div>
@@ -168,14 +180,6 @@ export const Users: React.FC<RouteComponentProps> = () => {
 
         {selectedRowsIds && Object.keys(selectedRowsIds).length !== 0 && (
           <div className="flex items-center">
-            <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"
-            >
-              <KeyIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
-              Edit app access
-            </button>
-
             <button
               onClick={deleteModalOpen}
               type="button"
@@ -192,7 +196,7 @@ export const Users: React.FC<RouteComponentProps> = () => {
         <div className="-my-2 sm:-mx-6 lg:-mx-8">
           <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
             <div className="shadow border-b border-gray-200 sm:rounded-lg">
-              <Table data={allUsers} columns={columns} getSelectedRowIds={selectedRows} selectable />
+              <Table data={filterSearch} columns={columns} getSelectedRowIds={selectedRows} selectable />
             </div>
           </div>
         </div>

src/modules/users/components/UserModal/UserModal.tsx

@@ -1,85 +1,122 @@
-import React, { Fragment, useRef } from 'react';
-import { Dialog, Transition } from '@headlessui/react';
-import { Tabs } from 'src/components';
-import { UserDetailsTab } from './components/UserDetailsTab';
-import { AdvancedTab } from './components/AdvancedTab';
-import { AppAccessTab } from './components/AppAccess';
-
-type UserModalProps = {
-  open: boolean;
-  onClose: () => void;
-  onSave?: () => void;
-};
-
-const tabs = [
-  { name: 'User Details', component: <UserDetailsTab /> },
-  { name: 'Advanced', component: <AdvancedTab /> },
-  { name: 'App Access', component: <AppAccessTab /> },
-];
+import React from 'react';
+import { Modal } from 'src/components';
+import { appAccessList } from './consts';
+import { UserModalProps } from './types';
 
 export const UserModal = ({ open, onClose, onSave = () => {} }: UserModalProps) => {
-  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>
+    <Modal onClose={onClose} open={open} onSave={onSave} useCancelButton>
+      <div className="bg-white px-4">
+        <div className="space-y-4 divide-y divide-gray-200">
+          <div>
+            <div>
+              <h3 className="text-lg leading-6 font-medium text-gray-900">Personal Information</h3>
+            </div>
 
-          {/* 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-2xl sm:w-full">
-              <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-                <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">
+                <label htmlFor="name" className="block text-sm font-medium text-gray-700">
+                  Name
+                </label>
+                <div className="mt-1">
+                  <input
+                    type="text"
+                    name="name"
+                    id="name"
+                    autoComplete="given-name"
+                    className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                  />
+                </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 className="sm:col-span-3">
+                <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+                  Email
+                </label>
+                <div className="mt-1">
+                  <input
+                    type="email"
+                    name="email"
+                    id="email"
+                    autoComplete="family-name"
+                    className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                  />
+                </div>
+              </div>
+
+              <div className="sm:col-span-3">
+                <label htmlFor="status" className="block text-sm font-medium text-gray-700">
+                  Status
+                </label>
+                <div className="mt-1">
+                  <select
+                    id="status"
+                    name="status"
+                    className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                  >
+                    <option>Active</option>
+                    <option>Inactive</option>
+                    <option>Banned</option>
+                  </select>
+                </div>
+              </div>
+
+              <div className="sm:col-span-3">
+                <label htmlFor="status" className="block text-sm font-medium text-gray-700">
+                  Role
+                </label>
+                <div className="mt-1">
+                  <select
+                    id="status"
+                    name="status"
+                    className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                  >
+                    <option>User</option>
+                    <option>Admin</option>
+                    <option>Super Admin</option>
+                  </select>
+                </div>
               </div>
             </div>
-          </Transition.Child>
+          </div>
+
+          <div>
+            <div className="mt-4">
+              <h3 className="text-lg leading-6 font-medium text-gray-900">App Access</h3>
+            </div>
+
+            <div>
+              <div className="flow-root mt-6">
+                <ul className="-my-5 divide-y divide-gray-200 ">
+                  {appAccessList.map((app: any) => {
+                    return (
+                      <li className="py-4" key={app.name}>
+                        <div className="flex items-center space-x-4">
+                          <div className="flex-shrink-0 flex-1 flex items-center">
+                            <img className="h-10 w-10 rounded-md overflow-hidden" src={app.image} alt={app.name} />
+                            <h3 className="ml-4 text-md leading-6 font-medium text-gray-900">{app.name}</h3>
+                          </div>
+                          <div>
+                            <select
+                              id={app.name}
+                              name={app.name}
+                              className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                            >
+                              <option>User</option>
+                              <option>Admin</option>
+                              <option>Super Admin</option>
+                            </select>
+                          </div>
+                        </div>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>
+            </div>
+          </div>
         </div>
-      </Dialog>
-    </Transition.Root>
+      </div>
+    </Modal>
   );
 };

src/modules/users/components/UserModal/components/AdvancedTab.tsx

@@ -1,113 +0,0 @@
-import React, { useState } from 'react';
-import { InformationCircleIcon } from '@heroicons/react/solid';
-import { Switch } from '@headlessui/react';
-
-function classNames(...classes: any) {
-  return classes.filter(Boolean).join(' ');
-}
-
-export const AdvancedTab = () => {
-  const [enabled, setEnabled] = useState(false);
-
-  return (
-    <div>
-      <div className="rounded-md py-2 mb-6">
-        <div className="flex">
-          <div className="flex-shrink-0">
-            <InformationCircleIcon className="h-5 w-5 text-blue-500" aria-hidden="true" />
-          </div>
-          <div className="ml-3 flex-1 md:flex md:justify-between">
-            <p className="text-sm text-gray-900">You can give or revoke app access for this user</p>
-          </div>
-        </div>
-      </div>
-
-      <div className="mb-6">
-        <Switch.Group as="div" className="flex items-center justify-between">
-          <span className="flex-grow flex flex-col">
-            <Switch.Label as="span" className="text-lg font-medium text-gray-900" passive>
-              User
-            </Switch.Label>
-            <Switch.Description as="span" className="text-sm text-gray-500">
-              Gives this user access only to assigned apps.
-            </Switch.Description>
-          </span>
-          <Switch
-            checked={enabled}
-            onChange={setEnabled}
-            className={classNames(
-              enabled ? 'bg-primary-600' : 'bg-gray-200',
-              'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500',
-            )}
-          >
-            <span
-              aria-hidden="true"
-              className={classNames(
-                enabled ? 'translate-x-5' : 'translate-x-0',
-                'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
-              )}
-            />
-          </Switch>
-        </Switch.Group>
-      </div>
-
-      <div className="mb-6">
-        <Switch.Group as="div" className="flex items-center justify-between">
-          <span className="flex-grow flex flex-col">
-            <Switch.Label as="span" className="text-lg font-medium text-gray-900" passive>
-              Admin
-            </Switch.Label>
-            <Switch.Description as="span" className="text-sm text-gray-500">
-              Gives this user access to all apps and permission to change other users roles
-            </Switch.Description>
-          </span>
-          <Switch
-            checked={enabled}
-            onChange={setEnabled}
-            className={classNames(
-              enabled ? 'bg-primary-600' : 'bg-gray-200',
-              'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500',
-            )}
-          >
-            <span
-              aria-hidden="true"
-              className={classNames(
-                enabled ? 'translate-x-5' : 'translate-x-0',
-                'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
-              )}
-            />
-          </Switch>
-        </Switch.Group>
-      </div>
-
-      <div className="mb-6">
-        <Switch.Group as="div" className="flex items-center justify-between">
-          <span className="flex-grow flex flex-col">
-            <Switch.Label as="span" className="text-lg font-medium text-gray-900" passive>
-              Super Admin
-            </Switch.Label>
-            <Switch.Description as="span" className="text-sm text-gray-500">
-              Will transfer all Super Admin rights to this user
-            </Switch.Description>
-          </span>
-          <Switch
-            checked={enabled}
-            onChange={setEnabled}
-            className={classNames(
-              enabled ? 'bg-primary-600' : 'bg-gray-200',
-              'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500',
-            )}
-          >
-            <span
-              aria-hidden="true"
-              className={classNames(
-                enabled ? 'translate-x-5' : 'translate-x-0',
-                'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
-              )}
-            />
-          </Switch>
-        </Switch.Group>
-      </div>
-    </div>
-  );
-};

src/modules/users/components/UserModal/components/AppAccess.tsx

@@ -1,138 +0,0 @@
-import React, { useState } from 'react';
-import { Switch } from '@headlessui/react';
-
-function classNames(...classes: any) {
-  return classes.filter(Boolean).join(' ');
-}
-
-export const AppAccessTab = () => {
-  const [enabled, setEnabled] = useState(false);
-
-  return (
-    <div>
-      <div className="mb-6">
-        <Switch.Group as="div" className="flex items-center justify-between">
-          <div className="flex-grow flex items-center">
-            <div className="flex-shrink-0 h-10 w-10 mr-4">
-              <img className="h-10 w-10 rounded-md overflow-hidden" src="/assets/wekan.svg" alt="" />
-            </div>
-            <div className="flex flex-col">
-              <Switch.Label as="span" className="text-lg font-medium text-gray-900" passive>
-                Wekan
-              </Switch.Label>
-            </div>
-          </div>
-          <Switch
-            checked={enabled}
-            onChange={setEnabled}
-            className={classNames(
-              enabled ? 'bg-primary-600' : 'bg-gray-200',
-              'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500',
-            )}
-          >
-            <span
-              aria-hidden="true"
-              className={classNames(
-                enabled ? 'translate-x-5' : 'translate-x-0',
-                'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
-              )}
-            />
-          </Switch>
-        </Switch.Group>
-      </div>
-
-      <div className="mb-6">
-        <Switch.Group as="div" className="flex items-center justify-between">
-          <div className="flex-grow flex items-center">
-            <div className="flex-shrink-0 h-10 w-10 mr-4">
-              <img className="h-10 w-10 rounded-md overflow-hidden" src="/assets/wordpress.svg" alt="" />
-            </div>
-            <div className="flex flex-col">
-              <Switch.Label as="span" className="text-lg font-medium text-gray-900" passive>
-                Wordpress
-              </Switch.Label>
-            </div>
-          </div>
-          <Switch
-            checked={enabled}
-            onChange={setEnabled}
-            className={classNames(
-              enabled ? 'bg-primary-600' : 'bg-gray-200',
-              'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500',
-            )}
-          >
-            <span
-              aria-hidden="true"
-              className={classNames(
-                enabled ? 'translate-x-5' : 'translate-x-0',
-                'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
-              )}
-            />
-          </Switch>
-        </Switch.Group>
-      </div>
-
-      <div className="mb-6">
-        <Switch.Group as="div" className="flex items-center justify-between">
-          <div className="flex-grow flex items-center">
-            <div className="flex-shrink-0 h-10 w-10 mr-4">
-              <img className="h-10 w-10 rounded-md overflow-hidden" src="/assets/nextcloud.svg" alt="" />
-            </div>
-            <div className="flex flex-col">
-              <Switch.Label as="span" className="text-lg font-medium text-gray-900" passive>
-                Nextcloud
-              </Switch.Label>
-            </div>
-          </div>
-          <Switch
-            checked={enabled}
-            onChange={setEnabled}
-            className={classNames(
-              enabled ? 'bg-primary-600' : 'bg-gray-200',
-              'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500',
-            )}
-          >
-            <span
-              aria-hidden="true"
-              className={classNames(
-                enabled ? 'translate-x-5' : 'translate-x-0',
-                'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
-              )}
-            />
-          </Switch>
-        </Switch.Group>
-      </div>
-
-      <div className="mb-6">
-        <Switch.Group as="div" className="flex items-center justify-between">
-          <div className="flex-grow flex items-center">
-            <div className="flex-shrink-0 h-10 w-10 mr-4">
-              <img className="h-10 w-10 rounded-md overflow-hidden" src="/assets/rocketchat.svg" alt="" />
-            </div>
-            <div className="flex flex-col">
-              <Switch.Label as="span" className="text-lg font-medium text-gray-900" passive>
-                Rocketchat
-              </Switch.Label>
-            </div>
-          </div>
-          <Switch
-            checked={enabled}
-            onChange={setEnabled}
-            className={classNames(
-              enabled ? 'bg-primary-600' : 'bg-gray-200',
-              'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500',
-            )}
-          >
-            <span
-              aria-hidden="true"
-              className={classNames(
-                enabled ? 'translate-x-5' : 'translate-x-0',
-                'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
-              )}
-            />
-          </Switch>
-        </Switch.Group>
-      </div>
-    </div>
-  );
-};

src/modules/users/components/UserModal/components/UserDetailsTab.tsx

@@ -1,90 +0,0 @@
-import React from 'react';
-
-export const UserDetailsTab = () => {
-  return (
-    <div className="space-y-8 divide-y divide-gray-200">
-      <div>
-        <div>
-          <h3 className="text-lg leading-6 font-medium text-gray-900">Personal Information</h3>
-        </div>
-
-        <div className="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
-          <div className="sm:col-span-3">
-            <label htmlFor="name" className="block text-sm font-medium text-gray-700">
-              Name
-            </label>
-            <div className="mt-1">
-              <input
-                type="text"
-                name="name"
-                id="name"
-                autoComplete="given-name"
-                className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
-              />
-            </div>
-          </div>
-
-          <div className="sm:col-span-3">
-            <label htmlFor="email" className="block text-sm font-medium text-gray-700">
-              Email
-            </label>
-            <div className="mt-1">
-              <input
-                type="email"
-                name="email"
-                id="email"
-                autoComplete="family-name"
-                className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
-              />
-            </div>
-          </div>
-
-          <div className="sm:col-span-3">
-            <label htmlFor="currentPassword" className="block text-sm font-medium text-gray-700">
-              Current Password
-            </label>
-            <div className="mt-1">
-              <input
-                type="password"
-                name="currentPassword"
-                id="currentPassword"
-                className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
-              />
-            </div>
-          </div>
-
-          <div className="sm:col-span-3">
-            <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700">
-              Confirm Password
-            </label>
-            <div className="mt-1">
-              <input
-                type="password"
-                name="confirmPassword"
-                id="confirmPassword"
-                className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
-              />
-            </div>
-          </div>
-
-          <div className="sm:col-span-3">
-            <label htmlFor="status" className="block text-sm font-medium text-gray-700">
-              Status
-            </label>
-            <div className="mt-1">
-              <select
-                id="status"
-                name="status"
-                className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
-              >
-                <option>Active</option>
-                <option>Inactive</option>
-                <option>Banned</option>
-              </select>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

src/modules/users/components/UserModal/consts.ts

@@ -0,0 +1,18 @@
+export const appAccessList = [
+  {
+    image: '/assets/wekan.svg',
+    name: 'Wekan',
+  },
+  {
+    image: '/assets/wordpress.svg',
+    name: 'Wordpress',
+  },
+  {
+    image: '/assets/nextcloud.svg',
+    name: 'NextCloud',
+  },
+  {
+    image: '/assets/rocketchat.svg',
+    name: 'RocketChat',
+  },
+];

src/modules/users/components/UserModal/types.ts

@@ -0,0 +1,5 @@
+export type UserModalProps = {
+  open: boolean;
+  onClose: () => void;
+  onSave?: () => void;
+};