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

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

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

@ -15,16 +15,16 @@ import {
FlagRounded, FlagRounded,
SvgIconComponent, SvgIconComponent,
} from '@material-ui/icons'; } from '@material-ui/icons';
import { shorten } from '../common'; import { shorten } from '../../common';
import { import {
CREATE_FEATURE, CREATE_FEATURE,
CREATE_STRATEGY, CREATE_STRATEGY,
} from '../providers/AccessProvider/permissions'; } from '../../providers/AccessProvider/permissions';
import ConditionallyRender from '../common/ConditionallyRender/ConditionallyRender'; import ConditionallyRender from '../../common/ConditionallyRender/ConditionallyRender';
import { getTogglePath } from '../../utils/route-path-helpers'; import { getTogglePath } from '../../../utils/route-path-helpers';
import useApplication from '../../hooks/api/getters/useApplication/useApplication'; import useApplication from '../../../hooks/api/getters/useApplication/useApplication';
import AccessContext from '../../contexts/AccessContext'; import AccessContext from '../../../contexts/AccessContext';
import { formatFullDateTimeWithLocale } from '../common/util'; import { formatFullDateTimeWithLocale } from '../../common/util';
const ApplicationView = () => { const ApplicationView = () => {
const { hasAccess } = useContext(AccessContext); const { hasAccess } = useContext(AccessContext);
const { name } = useParams<{ name: string }>(); 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 { ThemeProvider } from '@material-ui/core';
import ApplicationEdit from '../ApplicationEdit'; import ApplicationEdit from '../ApplicationEdit/ApplicationEdit';
import renderer from 'react-test-renderer'; import renderer from 'react-test-renderer';
import { MemoryRouter } from 'react-router-dom'; import { MemoryRouter } from 'react-router-dom';
import { ADMIN } from '../../providers/AccessProvider/permissions'; 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 CreateProject from '../project/Project/CreateProject/CreateProject';
import CreateFeature from '../feature/CreateFeature/CreateFeature'; import CreateFeature from '../feature/CreateFeature/CreateFeature';
import EditFeature from '../feature/EditFeature/EditFeature'; import EditFeature from '../feature/EditFeature/EditFeature';
import ApplicationEdit from '../application/ApplicationEdit'; import ApplicationEdit from '../application/ApplicationEdit/ApplicationEdit';
import ApplicationList from '../application/ApplicationList'; import ApplicationList from '../application/ApplicationList/ApplicationList';
import ContextList from '../context/ContextList/ContextList'; import ContextList from '../context/ContextList/ContextList';
import RedirectFeatureView from '../feature/RedirectFeatureView/RedirectFeatureView'; 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 { return {
storeApplicationMetaData, storeApplicationMetaData,
fetchApplicationsWithStrategyName,
deleteApplication, deleteApplication,
errors, errors,
loading, 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;