Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-09 00:18:00 +01:00
Code Issues Projects Releases Wiki Activity

refactor: change based on PR feedback

Browse Source
This commit is contained in:
Youssef 2022-02-09 16:15:07 +01:00
parent b12f0b9d0d
commit a6e1e60e2c
8 changed files with 101 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
frontend/src/component/application/ApplicationEdit.tsx → frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx
View File

@ -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>
</>
}
/>

26
frontend/src/component/application/ApplicationList.tsx → frontend/src/component/application/ApplicationList/ApplicationList.tsx
View File

@ -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>

8
frontend/src/component/application/ApplicationUpdate.tsx → frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx
View File

@ -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;

14
frontend/src/component/application/ApplicationView.tsx → frontend/src/component/application/ApplicationView/ApplicationView.tsx
View File

@ -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 }>();

2
frontend/src/component/application/__tests__/application-edit-component-test.js
View File

@ -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';

4
frontend/src/component/menu/routes.js
View File

@ -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';

12
frontend/src/hooks/api/actions/useApplicationsApi/useApplicationsApi.ts
View File

@ -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,

40
frontend/src/hooks/api/getters/useApplicationsForStrategy/useApplicationsForStrategy.ts Normal file
View File

@ -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;