renaming stuff, admin area

src/App.tsx

@@ -13,7 +13,6 @@ import { Login } from './modules/login';
 import { Users } from './modules/users/Users';
 import { AppSingle } from './modules/apps/AppSingle';
 import { Apps } from './modules/apps/Apps';
-import { DashboardLIT } from './modules/dashboard/DashboardLIT';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function App() {
@@ -53,7 +52,7 @@ function App() {
         ) : (
           <Layout>
             <Routes>
-              <Route path="/dashboard" element={<DashboardLIT />} />
+              <Route path="/dashboard" element={<Dashboard />} />
               {apps.map((app) => (
                 <Route key={app.name} path={app.slug} element={<AppIframe app={app} />} />
               ))}

src/components/Header/HeaderLIT.tsx

@@ -8,7 +8,7 @@ import clsx from 'clsx';
 import { useApps } from 'src/services/apps';
 
 const navigation = [
-  { name: 'Users', to: '/users', requiresAdmin: true },
+  { name: '', to: '/users', requiresAdmin: true },
   // { name: 'Apps', to: '/apps', requiresAdmin: true },
 ];
 
@@ -79,7 +79,7 @@ const HeaderLIT: React.FC<HeaderProps> = () => {
                         {app.name}
                       </Link>
                     ))}
-                    {navigationItems.map((item) => (
+                    {/* {navigationItems.map((item) => (
                       <Link
                         key={item.name}
                         to={item.to}
@@ -93,7 +93,7 @@ const HeaderLIT: React.FC<HeaderProps> = () => {
                       >
                         {item.name}
                       </Link>
-                    ))}
+                    ))} */}
                   </div>
                 </div>
                 <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">

src/components/Header/index.ts

@@ -1,2 +1 @@
-export { default as Header } from './Header';
-export { default as HeaderLIT } from './HeaderLIT';
+export { default as Header } from './HeaderLIT';

src/components/Layout/Layout.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { HeaderLIT } from '../Header';
+import { Header } from '../Header';
 
 const Layout: React.FC = ({ children }) => {
   return (
     <>
-      <HeaderLIT />
+      <Header />
 
       {children}
     </>

src/components/index.ts

@@ -1,5 +1,5 @@
 export { Layout } from './Layout';
-export { Header, HeaderLIT } from './Header';
+export { Header } from './Header';
 export { Table } from './Table';
 export { Banner } from './Banner';
 export { Tabs } from './Tabs';

src/modules/dashboard/DashboardLIT.tsx

@@ -1,9 +1,13 @@
 import React, { useEffect } from 'react';
-import { useApps } from 'src/services/apps';
-import { DashboardCardLIT } from './components/DashboardCard/DashboardCardLIT';
+import { AppStatusEnum, useApps } from 'src/services/apps';
+import { useAuth } from 'src/services/auth';
+import { DashboardUtility } from './components';
+import { DashboardCard } from './components/DashboardCard/DashboardCardLIT';
+import { UTILITY_APPS } from './consts';
 
-export const DashboardLIT: React.FC = () => {
+export const Dashboard: React.FC = () => {
   const { apps, loadApps, appTableLoading } = useApps();
+  const { isAdmin } = useAuth();
 
   // Tell React to load the apps
   useEffect(() => {
@@ -21,9 +25,27 @@ export const DashboardLIT: React.FC = () => {
       </div>
       <div className="max-w-7xl mx-auto py-4 px-3 sm:px-6 lg:px-8 h-full flex-grow">
         <div className="grid grid-cols-1 md:grid-cols-2 md:gap-4 lg:grid-cols-4 mb-10">
-          {!appTableLoading && apps.map((app) => <DashboardCardLIT app={app} key={app.name} />)}
+          {!appTableLoading &&
+            apps
+              .filter((app) => UTILITY_APPS.indexOf(app.slug) === -1)
+              .map((app) => <DashboardCard app={app} key={app.name} />)}
         </div>
       </div>
+      {isAdmin && (
+        <div className="max-w-4xl mx-auto py-4 sm:px-6 lg:px-8 h-full flex-grow">
+          <div className="pb-4 border-b border-gray-200 sm:flex sm:items-center">
+            <h3 className="text-lg leading-6 font-medium text-gray-900">Administration</h3>
+          </div>
+
+          <dl className="mt-5 grid grid-cols-1 gap-2 sm:grid-cols-2">
+            {apps
+              .filter((app) => UTILITY_APPS.indexOf(app.slug) !== -1 && app.url !== null)
+              .map((app) => (
+                <DashboardUtility item={app} key={app.name} />
+              ))}
+          </dl>
+        </div>
+      )}
     </div>
   );
 };

src/modules/dashboard/components/DashboardCard/DashboardCardLIT.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-export const DashboardCardLIT: React.FC<any> = ({ app }: { app: any }) => {
+export const DashboardCard: React.FC<any> = ({ app }: { app: any }) => {
   return (
     <>
       <Link

src/modules/dashboard/components/DashboardCard/index.ts

@@ -1 +1 @@
-export { DashboardCard } from './DashboardCard';
+export { DashboardCard } from './DashboardCardLIT';

src/modules/dashboard/components/DashboardUtility/DashboardUtilityLIT.tsx

@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { Link } from 'react-router-dom';
+
+export const DashboardUtility: React.FC<any> = ({ item }: { item: any }) => {
+  const [content, setContent] = useState('');
+
+  useEffect(() => {
+    fetch(item.markdownSrc)
+      .then((res) => res.text())
+      .then((md) => {
+        return setContent(md);
+      })
+      .catch(() => {});
+  }, [item.markdownSrc]);
+
+  return (
+    <Link
+      to={`/${item.slug}`}
+      key={item.name}
+      rel="noreferrer"
+      className="bg-white rounded-lg overflow-hidden sm:p-2 flex items-center group"
+    >
+      <div className="w-16 h-16 flex items-center justify-center bg-primary-100 group-hover:bg-primary-200 transition-colors rounded-lg mr-4">
+        {item.icon && <item.icon className="h-6 w-6 text-primary-900" aria-hidden="true" />}
+        {item.assetSrc && <img className="h-6 w-6" src={item.assetSrc} alt={item.name} />}
+      </div>
+      <div>
+        <dt className="truncate text-sm leading-5 font-medium">{item.name}</dt>
+        <dd className="mt-1 text-gray-500 text-sm leading-5 font-normal">
+          <ReactMarkdown>{content}</ReactMarkdown>
+        </dd>
+      </div>
+    </Link>
+  );
+};

src/modules/dashboard/components/DashboardUtility/index.ts

@@ -1 +1 @@
-export { DashboardUtility } from './DashboardUtility';
+export { DashboardUtility } from './DashboardUtilityLIT';

src/modules/dashboard/consts.ts

@@ -10,7 +10,7 @@ export const DASHBOARD_QUICK_ACCESS = [
 ];
 
 /** Apps that should not be shown on the dashboard */
-export const HIDDEN_APPS = ['dashboard', 'velero'];
+export const HIDDEN_APPS = ['dashboard'];
 
 /** Apps that should be shown under "Utilities" */
-export const UTILITY_APPS = ['monitoring'];
+export const UTILITY_APPS = ['authentik', 'zammad'];

src/modules/dashboard/index.ts

@@ -1 +1 @@
-export { Dashboard } from './Dashboard';
+export { Dashboard } from './DashboardLIT';