From c316382ba50d7cf0e79cdcedf89e9f8bfc286bd1 Mon Sep 17 00:00:00 2001 From: Youssef Date: Fri, 4 Feb 2022 11:27:59 +0100 Subject: [PATCH] refactor: create new EditApplication component --- .../component/application/ApplicationView.tsx | 10 +- .../component/application/EditApplication.tsx | 162 ++++++++++++++++++ .../src/component/common/TabNav/TabNav.jsx | 7 +- frontend/src/component/menu/routes.js | 4 +- .../getters/useApplication/useApplication.ts | 2 +- 5 files changed, 177 insertions(+), 8 deletions(-) create mode 100644 frontend/src/component/application/EditApplication.tsx diff --git a/frontend/src/component/application/ApplicationView.tsx b/frontend/src/component/application/ApplicationView.tsx index 471875690c..1ada6f1e55 100644 --- a/frontend/src/component/application/ApplicationView.tsx +++ b/frontend/src/component/application/ApplicationView.tsx @@ -129,7 +129,7 @@ const ApplicationView = () => {
- {strategies.map(({ name, description, notFound }, i) => ( + {strategies.map(({ name, description, notFound }, i: number) => ( { 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 = () => { {instanceId} {(sdkVersion)}} + show={ + + {instanceId} {sdkVersion} + + } elseShow={{instanceId}} /> } diff --git a/frontend/src/component/application/EditApplication.tsx b/frontend/src/component/application/EditApplication.tsx new file mode 100644 index 0000000000..956af65f53 --- /dev/null +++ b/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 = () => ( + + ); + + const tabData = [ + { + label: 'Application overview', + component: , + }, + { + label: 'Edit application', + component: ( + + ), + }, + ]; + + if (loading) { + return ( +
+

Loading...

+ +
+ ); + } else if (!application) { + return

Application ({appName}) not found

; + } + return ( + + + {icon || 'apps'} + + {appName} + + } + actions={ + <> + + + + } + /> + + + Delete + + } + /> + + } + /> + } + > +
+ {description || ''} + + {/* // need to use formatDate once we have the useSettings hook ready */} + Created: {createdAt} + +
+ + {renderModal()} + + + } + /> + + ); +}; + +export default EditApplication; diff --git a/frontend/src/component/common/TabNav/TabNav.jsx b/frontend/src/component/common/TabNav/TabNav.jsx index 47687c5618..b8730f143c 100644 --- a/frontend/src/component/common/TabNav/TabNav.jsx +++ b/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(); diff --git a/frontend/src/component/menu/routes.js b/frontend/src/component/menu/routes.js index 8359ee178a..b12d4f31da 100644 --- a/frontend/src/component/menu/routes.js +++ b/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: {}, diff --git a/frontend/src/hooks/api/getters/useApplication/useApplication.ts b/frontend/src/hooks/api/getters/useApplication/useApplication.ts index 782b63b820..6802f3f64a 100644 --- a/frontend/src/hooks/api/getters/useApplication/useApplication.ts +++ b/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: [],