refactor: change based on PR feedback

frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx

@@ -1,50 +1,43 @@
 /* eslint react/no-multi-comp:off */
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useState } from 'react';
 import {
     Avatar,
     Link,
     Icon,
     IconButton,
-    Button,
     LinearProgress,
     Typography,
 } from '@material-ui/core';
 import { Link as LinkIcon } from '@material-ui/icons';
-import ConditionallyRender from '../common/ConditionallyRender/ConditionallyRender';
-import {
-    formatDateWithLocale,
-} from '../common/util';
-import { UPDATE_APPLICATION } from '../providers/AccessProvider/permissions';
-import ApplicationView from './ApplicationView';
-import ApplicationUpdate from './ApplicationUpdate';
-import TabNav from '../common/TabNav/TabNav';
-import Dialogue from '../common/Dialogue';
-import PageContent from '../common/PageContent';
-import HeaderTitle from '../common/HeaderTitle';
-import AccessContext from '../../contexts/AccessContext';
-import useApplicationsApi from '../../hooks/api/actions/useApplicationsApi/useApplicationsApi';
-import useApplication from '../../hooks/api/getters/useApplication/useApplication';
+import ConditionallyRender from '../../common/ConditionallyRender/ConditionallyRender';
+import { formatDateWithLocale } from '../../common/util';
+import { UPDATE_APPLICATION } from '../../providers/AccessProvider/permissions';
+import ApplicationView from '../ApplicationView/ApplicationView';
+import ApplicationUpdate from '../ApplicationUpdate/ApplicationUpdate';
+import TabNav from '../../common/TabNav/TabNav';
+import Dialogue from '../../common/Dialogue';
+import PageContent from '../../common/PageContent';
+import HeaderTitle from '../../common/HeaderTitle';
+import AccessContext from '../../../contexts/AccessContext';
+import useApplicationsApi from '../../../hooks/api/actions/useApplicationsApi/useApplicationsApi';
+import useApplication from '../../../hooks/api/getters/useApplication/useApplication';
 import { useHistory, useParams } from 'react-router-dom';
-import { useLocationSettings } from '../../hooks/useLocationSettings';
+import { useLocationSettings } from '../../../hooks/useLocationSettings';
+import useToast from '../../../hooks/useToast';
+import PermissionButton from '../../common/PermissionButton/PermissionButton';
 
 const ApplicationEdit = () => {
     const history = useHistory();
     const { name } = useParams<{ name: string }>();
-    const { refetchApplication, application } = useApplication(name);
+    const { application, loading } = useApplication(name);
     const { appName, url, description, icon = 'apps', createdAt } = application;
     const { hasAccess } = useContext(AccessContext);
     const { deleteApplication } = useApplicationsApi();
     const { locationSettings } = useLocationSettings();
+    const { setToastData, setToastApiError } = useToast();
 
-    const [loading, setLoading] = useState(true);
     const [showDialog, setShowDialog] = useState(false);
 
-    useEffect(() => {
-        refetchApplication();
-        setLoading(false);
-        // eslint-disable-next-line
-    }, []);
-
     const toggleModal = () => {
         setShowDialog(!showDialog);
     };
@@ -54,8 +47,17 @@ const ApplicationEdit = () => {
 
     const onDeleteApplication = async (evt: Event) => {
         evt.preventDefault();
-        await deleteApplication(appName);
-        history.push('/applications');
+        try {
+            await deleteApplication(appName);
+            setToastData({
+                title: 'Deleted Successfully',
+                text: 'Application deleted successfully',
+                type: 'success',
+            });
+            history.push('/applications');
+        } catch (e: any) {
+            setToastApiError(e.toString());
+        }
     };
 
     const renderModal = () => (
@@ -115,18 +117,13 @@ const ApplicationEdit = () => {
                                 }
                             />
 
-                            <ConditionallyRender
-                                condition={hasAccess(UPDATE_APPLICATION)}
-                                show={
-                                    <Button
-                                        color="secondary"
-                                        title="Delete application"
-                                        onClick={toggleModal}
-                                    >
-                                        Delete
-                                    </Button>
-                                }
-                            />
+                            <PermissionButton
+                                title="Delete application"
+                                onClick={toggleModal}
+                                permission={UPDATE_APPLICATION}
+                            >
+                                Delete
+                            </PermissionButton>
                         </>
                     }
                 />

frontend/src/component/application/ApplicationList/ApplicationList.tsx

@@ -1,20 +1,16 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { CircularProgress } from '@material-ui/core';
 import { Warning } from '@material-ui/icons';
 
-import { AppsLinkList, styles as commonStyles } from '../common';
-import SearchField from '../common/SearchField/SearchField';
-import PageContent from '../common/PageContent/PageContent';
-import HeaderTitle from '../common/HeaderTitle';
-import useApplications from '../../hooks/api/getters/useApplications/useApplications';
+import { AppsLinkList, styles as commonStyles } from '../../common';
+import SearchField from '../../common/SearchField/SearchField';
+import PageContent from '../../common/PageContent/PageContent';
+import HeaderTitle from '../../common/HeaderTitle';
+import useApplications from '../../../hooks/api/getters/useApplications/useApplications';
 
 const ApplicationList = () => {
-    const { applications, refetchApplications } = useApplications();
+    const { applications } = useApplications();
     const [filter, setFilter] = useState('');
-    useEffect(() => {
-        refetchApplications();
-        // eslint-disable-next-line
-    }, []);
 
     const filteredApplications = useMemo(() => {
         const regExp = new RegExp(filter, 'i');
@@ -23,8 +19,8 @@ const ApplicationList = () => {
             : applications;
     }, [applications, filter]);
 
-    const Empty = () => (
-        <React.Fragment>
+    const RenderNoApplications = () => (
+        <>
             <section style={{ textAlign: 'center' }}>
                 <Warning /> <br />
                 <br />
@@ -39,7 +35,7 @@ const ApplicationList = () => {
                     documentation.
                 </a>
             </section>
-        </React.Fragment>
+        </>
     );
 
     if (!filteredApplications) {
@@ -56,7 +52,7 @@ const ApplicationList = () => {
                     {filteredApplications.length > 0 ? (
                         <AppsLinkList apps={filteredApplications} />
                     ) : (
-                        <Empty />
+                        <RenderNoApplications />
                     )}
                 </div>
             </PageContent>

frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react';
 import { TextField, Grid } from '@material-ui/core';
-import { useCommonStyles } from '../../common.styles';
-import icons from './icon-names';
-import GeneralSelect from '../common/GeneralSelect/GeneralSelect';
-import useApplicationsApi from '../../hooks/api/actions/useApplicationsApi/useApplicationsApi';
+import { useCommonStyles } from '../../../common.styles';
+import icons from '../icon-names';
+import GeneralSelect from '../../common/GeneralSelect/GeneralSelect';
+import useApplicationsApi from '../../../hooks/api/actions/useApplicationsApi/useApplicationsApi';
 
 interface IApplication {
     appName: string;

frontend/src/component/application/ApplicationView/ApplicationView.tsx

@@ -15,16 +15,16 @@ import {
     FlagRounded,
     SvgIconComponent,
 } from '@material-ui/icons';
-import { shorten } from '../common';
+import { shorten } from '../../common';
 import {
     CREATE_FEATURE,
     CREATE_STRATEGY,
-} from '../providers/AccessProvider/permissions';
-import ConditionallyRender from '../common/ConditionallyRender/ConditionallyRender';
-import { getTogglePath } from '../../utils/route-path-helpers';
-import useApplication from '../../hooks/api/getters/useApplication/useApplication';
-import AccessContext from '../../contexts/AccessContext';
-import { formatFullDateTimeWithLocale } from '../common/util';
+} from '../../providers/AccessProvider/permissions';
+import ConditionallyRender from '../../common/ConditionallyRender/ConditionallyRender';
+import { getTogglePath } from '../../../utils/route-path-helpers';
+import useApplication from '../../../hooks/api/getters/useApplication/useApplication';
+import AccessContext from '../../../contexts/AccessContext';
+import { formatFullDateTimeWithLocale } from '../../common/util';
 const ApplicationView = () => {
     const { hasAccess } = useContext(AccessContext);
     const { name } = useParams<{ name: string }>();

frontend/src/component/application/__tests__/application-edit-component-test.js

@@ -1,5 +1,5 @@
 import { ThemeProvider } from '@material-ui/core';
-import ApplicationEdit from '../ApplicationEdit';
+import ApplicationEdit from '../ApplicationEdit/ApplicationEdit';
 import renderer from 'react-test-renderer';
 import { MemoryRouter } from 'react-router-dom';
 import { ADMIN } from '../../providers/AccessProvider/permissions';

frontend/src/component/menu/routes.js

@@ -41,8 +41,8 @@ import EditProject from '../project/Project/EditProject/EditProject';
 import CreateProject from '../project/Project/CreateProject/CreateProject';
 import CreateFeature from '../feature/CreateFeature/CreateFeature';
 import EditFeature from '../feature/EditFeature/EditFeature';
-import ApplicationEdit from '../application/ApplicationEdit';
-import ApplicationList from '../application/ApplicationList';
+import ApplicationEdit from '../application/ApplicationEdit/ApplicationEdit';
+import ApplicationList from '../application/ApplicationList/ApplicationList';
 import ContextList from '../context/ContextList/ContextList';
 import RedirectFeatureView from '../feature/RedirectFeatureView/RedirectFeatureView';
 

frontend/src/hooks/api/actions/useApplicationsApi/useApplicationsApi.ts

@@ -39,20 +39,8 @@ const useApplicationsApi = () => {
         }
     };
 
-    const fetchApplicationsWithStrategyName = async (strategyName: string) => {
-        const path = `${URI}?strategyName=${strategyName}`;
-        const req = createRequest(path, { method: 'GET' });
-        try {
-            const res = await makeRequest(req.caller, req.id);
-            return res;
-        } catch (e) {
-            throw e;
-        }
-    };
-
     return {
         storeApplicationMetaData,
-        fetchApplicationsWithStrategyName,
         deleteApplication,
         errors,
         loading,

frontend/src/hooks/api/getters/useApplicationsForStrategy/useApplicationsForStrategy.ts

@@ -0,0 +1,40 @@
+import useSWR, { mutate, SWRConfiguration } from 'swr';
+import { useState, useEffect } from 'react';
+import { formatApiPath } from '../../../../utils/format-path';
+import handleErrorResponses from '../httpErrorResponseHandler';
+
+const path = formatApiPath(`api/admin/metrics/applications`);
+const KEY = `api/admin/metrics/applications`;
+
+const useApplicationsForStrategy = (
+    strategyName: string,
+    options: SWRConfiguration = {}
+) => {
+    const fetcher = async () => {
+        const res = await fetch(`${path}?strategyName=${strategyName}`, {
+            method: 'GET',
+        }).then(handleErrorResponses('Application'));
+        return res.json();
+    };
+
+    const { data, error } = useSWR(KEY, fetcher, options);
+    const [loading, setLoading] = useState(!error && !data);
+
+    const refetchAddons = () => {
+        mutate(KEY);
+    };
+
+    useEffect(() => {
+        setLoading(!error && !data);
+    }, [data, error]);
+
+    return {
+        addons: data?.addons || [],
+        providers: data?.providers || [],
+        error,
+        loading,
+        refetchAddons,
+    };
+};
+
+export default useApplicationsForStrategy;