show only installed apps on Dashboard, fix status message on Apps screen

src/modules/apps/Apps.tsx

@@ -5,7 +5,7 @@ import { SearchIcon } from '@heroicons/react/solid';
 import { showToast, ToastType } from 'src/common/util/show-toast';
 import _, { debounce } from 'lodash';
 import { Table } from 'src/components';
-import { App, AppStatus, useApps } from 'src/services/apps';
+import { App, AppStatusEnum, useApps } from 'src/services/apps';
 import { AppInstallModal } from './components';
 import { getConstForStatus } from './consts';
 
@@ -56,11 +56,11 @@ export const Apps: React.FC = () => {
       Header: 'Status',
       accessor: 'status',
       Cell: (e: any) => {
-        const status = e.cell.row.original.status as AppStatus;
+        const status = e.cell.row.original.status as AppStatusEnum;
         return (
           <div className="flex items-center">
             <div className={`flex-shrink-0 h-4 w-4 rounded-full bg-${getConstForStatus(status, 'colorClass')}`} />
-            {status === AppStatus.Installing ? (
+            {status === AppStatusEnum.Installing ? (
               <div
                 className={`ml-2 cursor-pointer text-sm text-${getConstForStatus(status, 'colorClass')}`}
                 onClick={() => showToast('Installing an app can take up to 10 minutes.', ToastType.Success)}
@@ -79,13 +79,13 @@ export const Apps: React.FC = () => {
       Header: ' ',
       Cell: (e: any) => {
         const navigate = useNavigate();
-        const appStatus = e.cell.row.original.status as AppStatus;
-        if (appStatus === AppStatus.Installing) {
+        const appStatus = e.cell.row.original.status as AppStatusEnum;
+        if (appStatus === AppStatusEnum.Installing) {
           return null;
         }
         const { slug } = e.cell.row.original;
         let buttonFuntion = () => navigate(`/apps/${slug}`);
-        if (appStatus === AppStatus.NotInstalled) {
+        if (appStatus === AppStatusEnum.NotInstalled) {
           buttonFuntion = () => {
             setAppSlug(slug);
             setInstallModalOpen(true);

src/modules/apps/consts.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CogIcon, PlusCircleIcon } from '@heroicons/react/outline';
 import _ from 'lodash';
-import { AppStatus } from 'src/services/apps';
+import { AppStatusEnum } from 'src/services/apps';
 
 export const initialEditorYaml = `luck: except
 natural: still
@@ -27,26 +27,26 @@ search:
 
 const tableConsts = [
   {
-    status: AppStatus.Installed,
+    status: AppStatusEnum.Installed,
     colorClass: 'green-600',
     buttonTitle: 'Configure',
     buttonIcon: <CogIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />,
   },
   {
-    status: AppStatus.NotInstalled,
+    status: AppStatusEnum.NotInstalled,
     colorClass: 'gray-600',
     buttonTitle: 'Install',
     buttonIcon: <PlusCircleIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />,
   },
   {
-    status: AppStatus.Installing,
+    status: AppStatusEnum.Installing,
     colorClass: 'primary-600',
     buttonTitle: null,
     buttonIcon: null,
   },
 ];
 
-export const getConstForStatus = (appStatus: AppStatus, paramName: string) => {
+export const getConstForStatus = (appStatus: AppStatusEnum, paramName: string) => {
   const tableConst = _.find(tableConsts, { status: appStatus });
   return _.get(tableConst, paramName);
 };

src/modules/dashboard/Dashboard.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect } from 'react';
 import { useApps } from 'src/services/apps';
-import { useAuth } from 'src/services/auth';
+import { AppStatusEnum } from 'src/services/apps/types';
 import { DashboardCard, DashboardUtility } from './components';
 import { DASHBOARD_QUICK_ACCESS } from './consts';
 
@@ -11,8 +11,6 @@ export const Dashboard: React.FC = () => {
   splitedDomain.shift();
   const { apps, loadApps } = useApps();
 
-  const { currentUser, isAdmin } = useAuth();
-
   // Tell React to load the apps
   useEffect(() => {
     loadApps();
@@ -32,7 +30,7 @@ export const Dashboard: React.FC = () => {
         <div className="grid grid-cols-1 md:grid-cols-2 md:gap-4 lg:grid-cols-4 mb-10">
           {apps
             .filter((app) => ['dashboard', 'monitoring'].indexOf(app.slug) === -1)
-            .filter((app) => currentUser?.app_roles.filter((role) => role.name === app.slug) !== [])
+            .filter((app) => app.status !== AppStatusEnum.NotInstalled)
             .map((app) => (
               <DashboardCard app={app} key={app.name} />
             ))}
@@ -48,6 +46,7 @@ export const Dashboard: React.FC = () => {
             ))}
             {apps
               .filter((app) => app.slug === 'monitoring' && app.url !== null)
+              .filter((app) => app.status !== AppStatusEnum.NotInstalled)
               .map((app) => (
                 <DashboardUtility item={app} key={app.name} />
               ))}