process MR feedback

public/markdown/support.md

@@ -1 +1 @@
-Access documentation and forum
+Access documentation website

src/modules/apps/Apps.tsx

@@ -11,13 +11,15 @@ import { showToast, ToastType } from 'src/common/util/show-toast';
 import _, { debounce } from 'lodash';
 import { Table } from 'src/components';
 import { App, AppStatusEnum, useApps } from 'src/services/apps';
-import { AppInstallModal } from './components';
+// import { AppInstallModal } from './components';
 import { getConstForStatus } from './consts';
 
 export const Apps: React.FC = () => {
+  // If you want to enable the App Install button again, uncomment this:
+  // const [installModalOpen, setInstallModalOpen] = useState(false);
+  // const [appSlug, setAppSlug] = useState(null);
+
   const [search, setSearch] = useState('');
-  const [installModalOpen, setInstallModalOpen] = useState(false);
-  const [appSlug] = useState(null);
   const { apps, appTableLoading, loadApps } = useApps();
 
   const handleSearch = useCallback((event: any) => {
@@ -80,8 +82,7 @@ export const Apps: React.FC = () => {
       },
       width: 'auto',
     },
-    // Uncomment this to have an "Install" or "Configure" button for
-    // applications.
+    // If you want to enable the App Install button again, uncomment this:
     //
     // We need to implement installation and configuration in the back-end to be
     // able to use those buttons.
@@ -94,12 +95,9 @@ export const Apps: React.FC = () => {
     //       return null;
     //     }
     //     const { slug } = e.cell.row.original;
-    //     let buttonFuntion = () => navigate(`/apps/${slug}`);
+    //     let buttonFunction = () => navigate(`/apps/${slug}`);
     //     if (appStatus === AppStatusEnum.NotInstalled) {
-    //       buttonFuntion = () => {
-    //         // To make this work, change the `useState` call on top of this
-    //         // file to this:
-    //         // const [appSlug, setAppSlug] = useState(null);
+    //       buttonFunction = () => {
     //         setAppSlug(slug);
     //         setInstallModalOpen(true);
     //       };
@@ -107,7 +105,7 @@ export const Apps: React.FC = () => {
     //     return (
     //       <div className="text-right opacity-0 group-hover:opacity-100 transition-opacity">
     //         <button
-    //           onClick={buttonFuntion}
+    //           onClick={buttonFunction}
     //           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"
     //         >
@@ -168,9 +166,13 @@ export const Apps: React.FC = () => {
         </div>
       </div>
 
-      {installModalOpen && (
-        <AppInstallModal appSlug={appSlug} onClose={() => setInstallModalOpen(false)} open={installModalOpen} />
-      )}
+      {
+        // If you want to enable the App Install button again, uncomment this:
+        //
+        // installModalOpen && (
+        //   <AppInstallModal appSlug={appSlug} onClose={() => setInstallModalOpen(false)} open={installModalOpen} />
+        // )
+      }
     </div>
   );
 };

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

@@ -30,7 +30,7 @@ export const AdvancedTab = () => {
     }
   };
 
-  const vertifyCode = () => {
+  const verifyCode = () => {
     if (isConfigurationValid()) {
       showToast('Configuration is valid.', ToastType.Success);
     } else {
@@ -161,7 +161,7 @@ export const AdvancedTab = () => {
 
         <button
           type="button"
-          onClick={vertifyCode}
+          onClick={verifyCode}
           className="mr-3 inline-flex items-center px-4 py-2 shadow-sm text-sm font-medium rounded-md text-primary-700 bg-primary-100 hover:bg-primary-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
         >
           Verify

src/modules/dashboard/Dashboard.tsx

@@ -9,7 +9,7 @@ import React, { useEffect } from 'react';
 import { useApps } from 'src/services/apps';
 import { AppStatusEnum } from 'src/services/apps/types';
 import { DashboardCard, DashboardUtility } from './components';
-import { DASHBOARD_QUICK_ACCESS } from './consts';
+import { DASHBOARD_QUICK_ACCESS, HIDDEN_APPS, UTILITY_APPS } from './consts';
 
 export const Dashboard: React.FC = () => {
   const host = window.location.hostname;
@@ -35,7 +35,7 @@ export const Dashboard: 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="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) => HIDDEN_APPS.concat(UTILITY_APPS).indexOf(app.slug) === -1)
             .filter((app) => app.status !== AppStatusEnum.NotInstalled)
             .map((app) => (
               <DashboardCard app={app} key={app.name} />
@@ -51,7 +51,7 @@ export const Dashboard: React.FC = () => {
               <DashboardUtility item={item} key={item.name} />
             ))}
             {apps
-              .filter((app) => app.slug === 'monitoring' && app.url !== null)
+              .filter((app) => UTILITY_APPS.indexOf(app.slug) !== -1 && app.url !== null)
               .filter((app) => app.status !== AppStatusEnum.NotInstalled)
               .map((app) => (
                 <DashboardUtility item={app} key={app.name} />

src/modules/dashboard/consts.ts

@@ -8,3 +8,9 @@ export const DASHBOARD_QUICK_ACCESS = [
     icon: InformationCircleIcon,
   },
 ];
+
+/** Apps that should not be shown on the dashboard */
+export const HIDDEN_APPS = ['dashboard'];
+
+/** Apps that should be shown under "Utilities" */
+export const UTILITY_APPS = ['monitoring'];