mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-25 00:07:47 +01:00
refactor: create new EditApplication component
This commit is contained in:
parent
47a1a47d28
commit
c316382ba5
@ -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>}
|
||||
/>
|
||||
}
|
||||
|
162
frontend/src/component/application/EditApplication.tsx
Normal file
162
frontend/src/component/application/EditApplication.tsx
Normal file
@ -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;
|
@ -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();
|
||||
|
@ -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: {},
|
||||
|
@ -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: [],
|
||||
|
Loading…
Reference in New Issue
Block a user