add short description on top of pages

src/modules/apps/AppSingle.tsx

@@ -1,3 +1,13 @@
+/**
+ * This page shows information about a single application. It contains several
+ * configuration options (that are not implemented in the back-end yet) such as:
+ *
+ * 1. Toggling auto-updates
+ * 2. Advanced configuration by overwriting helm values
+ * 3. Deleting the application
+ *
+ * This page is only available for Admin users.
+ */
 import React, { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useForm, useWatch } from 'react-hook-form';

src/modules/apps/Apps.tsx

@@ -1,6 +1,11 @@
 /* eslint-disable react-hooks/exhaustive-deps */
+/**
+ * This page shows all the applications and their status in a table.
+ *
+ * This page is only available for Admin users.
+ */
 import React, { useState, useCallback, useMemo, useEffect } from 'react';
-import { useNavigate } from 'react-router';
+// import { useNavigate } from 'react-router';
 import { SearchIcon } from '@heroicons/react/solid';
 import { showToast, ToastType } from 'src/common/util/show-toast';
 import _, { debounce } from 'lodash';
@@ -12,7 +17,7 @@ import { getConstForStatus } from './consts';
 export const Apps: React.FC = () => {
   const [search, setSearch] = useState('');
   const [installModalOpen, setInstallModalOpen] = useState(false);
-  const [appSlug, setAppSlug] = useState(null);
+  const [appSlug] = useState(null);
   const { apps, appTableLoading, loadApps } = useApps();
 
   const handleSearch = useCallback((event: any) => {
@@ -92,6 +97,9 @@ export const Apps: React.FC = () => {
     //     let buttonFuntion = () => 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);
     //         setAppSlug(slug);
     //         setInstallModalOpen(true);
     //       };

src/modules/dashboard/Dashboard.tsx

@@ -1,4 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
+/**
+ * Page that shows only installed applications, and links to them.
+ *
+ * "Utilities" is a special section that links to the Stackspin documentation,
+ * and that shows the "Monitoring" application if it is installed.
+ */
 import React, { useEffect } from 'react';
 import { useApps } from 'src/services/apps';
 import { AppStatusEnum } from 'src/services/apps/types';

src/modules/login/Login.tsx

@@ -1,3 +1,6 @@
+/**
+ * Login page that starts the OAuth2 authentication flow.
+ */
 import React from 'react';
 import clsx from 'clsx';
 import { LockClosedIcon } from '@heroicons/react/solid';

src/modules/users/Users.tsx

@@ -1,4 +1,9 @@
 /* eslint-disable react-hooks/exhaustive-deps */
+/**
+ * This page shows a table of all users. It is only available for Admin users.
+ *
+ * Admin users can add one or more users, or edit a user.
+ */
 import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import { SearchIcon, PlusIcon, ViewGridAddIcon } from '@heroicons/react/solid';
 import { CogIcon, TrashIcon } from '@heroicons/react/outline';