refactor: create new EditApplication component

frontend/src/component/application/ApplicationView.tsx

@@ -129,7 +129,7 @@ const ApplicationView = () => {
                 </Typography>
                 <hr />
                 <List>
-                    {strategies.map(({ name, description, notFound }, i) => (
+                    {strategies.map(({ name, description, notFound }, i: number) => (
                         <ConditionallyRender
                             key={`strategies_conditional_${name}`}
                             condition={notFound}
@@ -137,13 +137,11 @@ const ApplicationView = () => {
                                 createUrl: '/strategies/create',
                                 name,
                                 permission: CREATE_STRATEGY,
-                                i,
                             })}
                             elseShow={foundListItem({
                                 viewUrl: '/strategies/view',
                                 name,
                                 Icon: Extension,
-                                enabled: undefined,
                                 description,
                                 i,
                             })}
@@ -178,7 +176,11 @@ const ApplicationView = () => {
                                         <ConditionallyRender
                                             key={`${instanceId}_conditional`}
                                             condition={Boolean(sdkVersion)}
-                                            show={<span>{instanceId} {(sdkVersion)}</span>}
+                                            show={
+                                                <span>
+                                                    {instanceId} {sdkVersion}
+                                                </span>
+                                            }
                                             elseShow={<span>{instanceId}</span>}
                                         />
                                     }

frontend/src/component/application/EditApplication.tsx

@@ -0,0 +1,162 @@
+/* eslint react/no-multi-comp:off */
+import { useContext, useEffect, 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 {
+    formatFullDateTimeWithLocale,
+    formatDateWithLocale,
+} from '../common/util';
+import { UPDATE_APPLICATION } from '../providers/AccessProvider/permissions';
+import ApplicationView from './ApplicationView';
+import ApplicationUpdate from './application-update';
+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';
+
+const EditApplication = () => {
+    const history = useHistory();
+    const { name } = useParams<{ name: string }>();
+    const { refetchApplication, application } = useApplication(name);
+    const { appName, url, description, icon = 'apps', createdAt } = application;
+    const { hasAccess } = useContext(AccessContext);
+    const { storeApplicationMetaData, deleteApplication } =
+        useApplicationsApi();
+
+    const [loading, setLoading] = useState(true);
+    const [showDialog, setShowDialog] = useState(false);
+
+    useEffect(() => {
+        refetchApplication();
+        setLoading(false);
+        // eslint-disable-next-line
+    }, []);
+
+    const toggleModal = () => {
+        setShowDialog(!showDialog);
+    };
+
+    // missing the settings hook (locale)
+    //const formatDate = v => formatDateWithLocale(v, locale);
+
+    const onDeleteApplication = async (evt: Event) => {
+        evt.preventDefault();
+        await deleteApplication(appName);
+        history.push('/applications');
+    };
+
+    const renderModal = () => (
+        <Dialogue
+            open={showDialog}
+            onClose={toggleModal}
+            onClick={onDeleteApplication}
+            title="Are you sure you want to delete this application?"
+        />
+    );
+
+    const tabData = [
+        {
+            label: 'Application overview',
+            component: <ApplicationView />,
+        },
+        {
+            label: 'Edit application',
+            component: (
+                <ApplicationUpdate
+                    application={application}
+                    storeApplicationMetaData={storeApplicationMetaData}
+                />
+            ),
+        },
+    ];
+
+    if (loading) {
+        return (
+            <div>
+                <p>Loading...</p>
+                <LinearProgress />
+            </div>
+        );
+    } else if (!application) {
+        return <p>Application ({appName}) not found</p>;
+    }
+    return (
+        <PageContent
+            headerContent={
+                <HeaderTitle
+                    title={
+                        <span
+                            style={{
+                                display: 'flex',
+                                alignItems: 'center',
+                            }}
+                        >
+                            <Avatar style={{ marginRight: '8px' }}>
+                                <Icon>{icon || 'apps'}</Icon>
+                            </Avatar>
+                            {appName}
+                        </span>
+                    }
+                    actions={
+                        <>
+                            <ConditionallyRender
+                                condition={url}
+                                show={
+                                    <IconButton component={Link} href={url}>
+                                        <LinkIcon />
+                                    </IconButton>
+                                }
+                            />
+
+                            <ConditionallyRender
+                                condition={hasAccess(UPDATE_APPLICATION)}
+                                show={
+                                    <Button
+                                        color="secondary"
+                                        title="Delete application"
+                                        onClick={toggleModal}
+                                    >
+                                        Delete
+                                    </Button>
+                                }
+                            />
+                        </>
+                    }
+                />
+            }
+        >
+            <div>
+                <Typography variant="body1">{description || ''}</Typography>
+                <Typography variant="body2">
+                    {/* // need to use formatDate once we have the useSettings hook ready */}
+                    Created: <strong>{createdAt}</strong>
+                </Typography>
+            </div>
+            <ConditionallyRender
+                condition={hasAccess(UPDATE_APPLICATION)}
+                show={
+                    <div>
+                        {renderModal()}
+                        <TabNav tabData={tabData} />
+                    </div>
+                }
+            />
+        </PageContent>
+    );
+};
+
+export default EditApplication;

frontend/src/component/common/TabNav/TabNav.jsx

@@ -13,7 +13,12 @@ const a11yProps = index => ({
     'aria-controls': `tabpanel-${index}`,
 });
 
-const TabNav = ({ tabData, className, navClass, startingTab = 0 }) => {
+const TabNav = ({
+    tabData,
+    className = '',
+    navClass = '',
+    startingTab = 0,
+}) => {
     const styles = useStyles();
     const [activeTab, setActiveTab] = useState(startingTab);
     const history = useHistory();

frontend/src/component/menu/routes.js

@@ -9,7 +9,6 @@ import HistoryTogglePage from '../../page/history/toggle';
 import ShowArchive from '../../page/archive/show';
 import Archive from '../../page/archive';
 import Applications from '../../page/applications';
-import ApplicationView from '../../page/applications/view';
 import ContextFields from '../../page/context';
 import ListTagTypes from '../../page/tag-types';
 import Addons from '../../page/addons';
@@ -47,6 +46,7 @@ import EditProject from '../project/Project/EditProject/EditProject';
 import CreateProject from '../project/Project/CreateProject/CreateProject';
 import CreateFeature from '../feature/CreateFeature/CreateFeature/CreateFeature';
 import EditFeature from '../feature/CreateFeature/EditFeature/EditFeature';
+import EditApplication from '../application/EditApplication';
 
 export const routes = [
     // Project
@@ -195,7 +195,7 @@ export const routes = [
         path: '/applications/:name',
         title: ':name',
         parent: '/applications',
-        component: ApplicationView,
+        component: EditApplication,
         type: 'protected',
         layout: 'main',
         menu: {},

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

@@ -32,7 +32,7 @@ const useApplication = (name: string, options: SWRConfiguration = {}) => {
     return {
         application: data || {
             appName: name,
-            color: null,
+            color: '',
             createdAt: '2022-02-02T21:04:00.268Z',
             descriotion: '',
             instances: [],