Enable apps

src/App.tsx

@@ -4,7 +4,7 @@ import { Routes, Route, Navigate, Outlet } from 'react-router-dom';
 import { Toaster } from 'react-hot-toast';
 
 import { useAuth } from 'src/services/auth';
-import { Dashboard, Users, Login } from './modules';
+import { Dashboard, Users, Login, Apps } from './modules';
 import { Layout } from './components';
 import { LoginCallback } from './modules/login/LoginCallback';
 
@@ -43,7 +43,10 @@ function App() {
             <Routes>
               <Route path="/dashboard" element={<Dashboard />} />
               <Route path="/users" element={<ProtectedRoute />}>
-                <Route path="/users" element={<Users />} />
+                <Route index element={<Users />} />
+              </Route>
+              <Route path="/apps" element={<ProtectedRoute />}>
+                <Route index element={<Apps />} />
               </Route>
               <Route path="*" element={<Navigate to="/dashboard" />} />
             </Routes>

src/components/Header/Header.tsx

@@ -14,6 +14,7 @@ const HYDRA_LOGOUT_URL = `${process.env.REACT_APP_HYDRA_PUBLIC_URL}/oauth2/sessi
 const navigation = [
   { name: 'Dashboard', to: '/dashboard', requiresAdmin: false },
   { name: 'Users', to: '/users', requiresAdmin: true },
+  { name: 'Apps', to: '/apps', requiresAdmin: true },
 ];
 
 function classNames(...classes: any[]) {

src/modules/apps/Apps.tsx

@@ -1,160 +1,28 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useState, useCallback, useMemo } from 'react';
-import { ChevronRightIcon, SearchIcon, PlusIcon } from '@heroicons/react/solid';
+import { SearchIcon, PlusIcon } from '@heroicons/react/solid';
-import { CogIcon, TrashIcon } from '@heroicons/react/outline';
+import { Table } from 'src/components';
-import { ConfirmationModal } from 'src/components/Modal';
+import { columns, data } from './consts';
-import { Table, Banner } from 'src/components';
-import { Link } from 'react-router-dom';
-
-const pages = [{ name: 'Apps', href: '#', current: true }];
 
 export const Apps: React.FC = () => {
-  const [selectedRowsIds, setSelectedRowsIds] = useState({});
-  const [deleteModal, setDeleteModal] = useState(false);
   const [search, setSearch] = useState('');
 
-  const deleteModalOpen = () => setDeleteModal(true);
-  const deleteModalClose = () => setDeleteModal(false);
-
   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',
-        accessor: 'name',
-        Cell: (e: any) => {
   return (
-            <div className="flex items-center">
+    <div className="relative">
-              <div className="flex-shrink-0 h-10 w-10">
+      <div className="max-w-7xl mx-auto py-4 px-3 sm:px-6 lg:px-8 h-full flex-grow">
-                <img className="h-10 w-10 rounded-md overflow-hidden" src={e.cell.row.original.assetSrc} alt="" />
+        <div className="pb-5 mt-6 border-b border-gray-200 sm:flex sm:items-center sm:justify-between">
-              </div>
-              <div className="ml-4">
-                <div className="text-sm font-medium text-gray-900">{e.cell.row.original.name}</div>
-              </div>
-            </div>
-          );
-        },
-        width: 'auto',
-      },
-      {
-        Header: 'Status',
-        accessor: 'status',
-        Cell: (e: any) => {
-          return (
-            <div className="flex items-center">
-              <div className="flex-shrink-0 h-4 w-4 rounded-full bg-green-600" />
-              <div className="ml-2 text-sm text-green-600">{e.cell.row.original.status}</div>
-            </div>
-          );
-        },
-        width: 'auto',
-      },
-      {
-        Header: ' ',
-        Cell: () => {
-          return (
-            <div className="text-right opacity-0 group-hover:opacity-100 transition-opacity">
-              <button
-                onClick={() => {}}
-                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"
-              >
-                <CogIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
-                Configure
-              </button>
-            </div>
-          );
-        },
-        width: 'auto',
-      },
-    ],
-    [],
-  );
-
-  const selectedRows = useCallback((rows: Record<string, boolean>) => {
-    setSelectedRowsIds(rows);
-  }, []);
-
-  return (
-    <>
-      <div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 flex-grow">
-        <nav className="flex" aria-label="Breadcrumb">
-          <ol className="flex items-center space-x-4">
-            <li>
-              <div className="flex items-center">
-                <Link to="/dashboard" className="text-sm font-medium text-gray-500 hover:text-gray-700">
-                  <span>Dashboard</span>
-                </Link>
-              </div>
-            </li>
-            {pages.map((page) => (
-              <li key={page.name}>
-                <div className="flex items-center">
-                  <ChevronRightIcon className="flex-shrink-0 h-5 w-5 text-gray-400" aria-hidden="true" />
-                  <a
-                    href={page.href}
-                    className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
-                    aria-current={page.current ? 'page' : undefined}
-                  >
-                    {page.name}
-                  </a>
-                </div>
-              </li>
-            ))}
-          </ol>
-        </nav>
-      </div>
-
-      <div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 overflow-hidden">
-        <Banner
-          title="Your app instances management will be here soon, in the meantime, feel free to explore."
-          titleSm="Comming soon!"
-        />
-      </div>
-
-      <div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 flex-grow">
-        <div className="pb-5 border-b border-gray-200 sm:flex sm:items-center sm:justify-between">
           <h1 className="text-3xl leading-6 font-bold text-gray-900">Apps</h1>
+
           <div className="mt-3 sm:mt-0 sm:ml-4">
             <button
-              disabled
               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"
             >
@@ -187,36 +55,18 @@ export const Apps: React.FC = () => {
               </div>
             </div>
           </div>
-
-          {selectedRowsIds && Object.keys(selectedRowsIds).length !== 0 && (
-            <button
-              onClick={deleteModalOpen}
-              type="button"
-              className="inline-flex items-center px-4 py-2 text-sm font-medium rounded-md text-red-700 bg-red-50 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
-            >
-              <TrashIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
-              Delete
-            </button>
-          )}
         </div>
 
         <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="shadow border-b border-gray-200 sm:rounded-lg">
-                <Table data={filterSearch} columns={columns} getSelectedRowIds={selectedRows} selectable />
+                <Table data={filterSearch} columns={columns} />
+              </div>
             </div>
           </div>
         </div>
       </div>
-
-        <ConfirmationModal
-          open={deleteModal}
-          onClose={deleteModalClose}
-          title="Delete service"
-          body="Are you sure you want to delete this service? All of your data will be permanently removed. This action cannot be undone."
-        />
     </div>
-    </>
   );
 };

src/modules/apps/consts.ts

@@ -1,23 +0,0 @@
-export const initialEditorYaml = () => {
-  return `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`;
-};

src/modules/apps/consts.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { CogIcon } from '@heroicons/react/outline';
+
+export const initialEditorYaml = () => {
+  return `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 columns: any = [
+  {
+    Header: 'Name',
+    accessor: 'name',
+    Cell: (e: any) => {
+      return (
+        <div className="flex items-center">
+          <div className="flex-shrink-0 h-10 w-10">
+            <img className="h-10 w-10 rounded-md overflow-hidden" src={e.cell.row.original.assetSrc} alt="" />
+          </div>
+          <div className="ml-4">
+            <div className="text-sm font-medium text-gray-900">{e.cell.row.original.name}</div>
+          </div>
+        </div>
+      );
+    },
+    width: 'auto',
+  },
+  {
+    Header: 'Status',
+    accessor: 'status',
+    Cell: (e: any) => {
+      return (
+        <div className="flex items-center">
+          <div className="flex-shrink-0 h-4 w-4 rounded-full bg-green-600" />
+          <div className="ml-2 text-sm text-green-600">{e.cell.row.original.status}</div>
+        </div>
+      );
+    },
+    width: 'auto',
+  },
+  {
+    Header: ' ',
+    Cell: () => {
+      return (
+        <div className="text-right opacity-0 group-hover:opacity-100 transition-opacity">
+          <button
+            onClick={() => {}}
+            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"
+          >
+            <CogIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
+            Configure
+          </button>
+        </div>
+      );
+    },
+    width: 'auto',
+  },
+];
+
+export const data: any[] = [
+  {
+    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: 'Zulip',
+    status: 'Active for everyone',
+    assetSrc: './assets/zulip.svg',
+  },
+  {
+    id: 4,
+    name: 'Wordpress',
+    status: 'Active for everyone',
+    assetSrc: './assets/wordpress.svg',
+  },
+];