modify apps table

src/modules/apps/Apps.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useState, useCallback, useMemo } from 'react';
-import { SearchIcon, PlusIcon } from '@heroicons/react/solid';
+import { SearchIcon } from '@heroicons/react/solid';
 import { Table } from 'src/components';
 import { columns, data } from './consts';
 
@@ -20,16 +20,6 @@ export const Apps: React.FC = () => {
       <div className="max-w-7xl mx-auto py-4 px-3 sm:px-6 lg:px-8 h-full flex-grow">
         <div className="pb-5 mt-6 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
-              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"
-            >
-              <PlusIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
-              Add new app
-            </button>
-          </div>
         </div>
 
         <div className="flex justify-between w-100 my-3 items-center">

src/modules/apps/consts.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { CogIcon } from '@heroicons/react/outline';
+import { CogIcon, PlusCircleIcon } from '@heroicons/react/outline';
+import _ from 'lodash';
 
 export const initialEditorYaml = () => {
   return `luck: except
@@ -25,6 +26,38 @@ search:
                   great: stomach`;
 };
 
+export enum AppStatus {
+  NotInstalled = 'Not installed',
+  Installed = 'Installed',
+  Installing = 'Installing',
+}
+
+const tableConsts = [
+  {
+    status: AppStatus.Installed,
+    colorClass: 'green-600',
+    buttonTitle: 'Configure',
+    buttonIcon: <CogIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />,
+  },
+  {
+    status: AppStatus.NotInstalled,
+    colorClass: 'gray-600',
+    buttonTitle: 'Install',
+    buttonIcon: <PlusCircleIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />,
+  },
+  {
+    status: AppStatus.Installing,
+    colorClass: 'primary-600',
+    buttonTitle: null,
+    buttonIcon: null,
+  },
+];
+
+const getConstForStatus = (appStatus: AppStatus, paramName: string) => {
+  const tableConst = _.find(tableConsts, { status: appStatus });
+  return _.get(tableConst, paramName);
+};
+
 export const columns: any = [
   {
     Header: 'Name',
@@ -47,10 +80,11 @@ export const columns: any = [
     Header: 'Status',
     accessor: 'status',
     Cell: (e: any) => {
+      const appStatus = e.cell.row.original.status as AppStatus;
       return (
         <div className="flex items-center">
-          <div className="flex-shrink-0 h-4 w-4 rounded-full bg-green-600" />
+          <div className={`flex-shrink-0 h-4 w-4 rounded-full bg-${getConstForStatus(appStatus, 'colorClass')}`} />
-          <div className="ml-2 text-sm text-green-600">{e.cell.row.original.status}</div>
+          <div className={`ml-2 text-sm text-${getConstForStatus(appStatus, 'colorClass')}`}>{appStatus}</div>
         </div>
       );
     },
@@ -58,7 +92,11 @@ export const columns: any = [
   },
   {
     Header: ' ',
-    Cell: () => {
+    Cell: (e: any) => {
+      const appStatus = e.cell.row.original.status as AppStatus;
+      if (appStatus === AppStatus.Installing) {
+        return null;
+      }
       return (
         <div className="text-right opacity-0 group-hover:opacity-100 transition-opacity">
           <button
@@ -66,8 +104,8 @@ export const columns: any = [
             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" />
+            {getConstForStatus(appStatus, 'buttonIcon')}
-            Configure
+            {getConstForStatus(appStatus, 'buttonTitle')}
           </button>
         </div>
       );
@@ -80,25 +118,32 @@ export const data: any[] = [
   {
     id: 1,
     name: 'Nextcloud',
-    status: 'Active for everyone',
+    status: AppStatus.Installed,
     assetSrc: './assets/nextcloud.svg',
   },
   {
     id: 2,
     name: 'Wekan',
-    status: 'Active for everyone',
+    status: AppStatus.Installing,
     assetSrc: './assets/wekan.svg',
   },
   {
     id: 3,
     name: 'Zulip',
-    status: 'Active for everyone',
+    status: AppStatus.NotInstalled,
     assetSrc: './assets/zulip.svg',
   },
   {
     id: 4,
     name: 'Wordpress',
-    status: 'Active for everyone',
+    status: AppStatus.NotInstalled,
     assetSrc: './assets/wordpress.svg',
   },
 ];
+
+export interface AppInfo {
+  id: number;
+  name: string;
+  status: AppStatus;
+  assetSrc: string;
+}