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

refactor: remove unused components

Browse Source
This commit is contained in:
Youssef 2022-02-08 16:38:08 +01:00
parent 6f2e7be852
commit 1853f7d502
9 changed files with 21 additions and 389 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/component/application/EditApplication.tsx → frontend/src/component/application/ApplicationEdit.tsx
View File

@ -27,7 +27,7 @@ import useApplication from '../../hooks/api/getters/useApplication/useApplicatio
import { useHistory, useParams } from 'react-router-dom';
import { useLocationSettings } from '../../hooks/useLocationSettings';
const EditApplication = () => {
const ApplicationEdit = () => {
const history = useHistory();
const { name } = useParams<{ name: string }>();
const { refetchApplication, application } = useApplication(name);
@ -36,8 +36,6 @@ const EditApplication = () => {
const { deleteApplication } = useApplicationsApi();
const { locationSettings } = useLocationSettings();
console.log(locationSettings)
const [loading, setLoading] = useState(true);
const [showDialog, setShowDialog] = useState(false);
@ -153,4 +151,4 @@ const EditApplication = () => {
);
};
export default EditApplication;
export default ApplicationEdit;

18
frontend/src/component/application/ApplicationUpdate.tsx
View File

@ -5,7 +5,23 @@ import icons from './icon-names';
import GeneralSelect from '../common/GeneralSelect/GeneralSelect';
import useApplicationsApi from '../../hooks/api/actions/useApplicationsApi/useApplicationsApi';
const ApplicationUpdate = ({ application }) => {
interface IApplication {
appName: string;
color: string;
createdAt: string;
description: string;
icon: string;
instances: [];
links: object;
seenToggles: [];
strategies: [];
url: string;
}
interface IApplicationUpdateProps {
application: IApplication;
}
const ApplicationUpdate = ({ application }: IApplicationUpdateProps) => {
const { storeApplicationMetaData } = useApplicationsApi();
const { appName, icon, url, description } = application;
const [localUrl, setLocalUrl] = useState(url || '');

196
frontend/src/component/application/application-edit-component.js
View File

@ -1,196 +0,0 @@
/* eslint react/no-multi-comp:off */
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
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';
class ClientApplications extends PureComponent {
static contextType = AccessContext;
static propTypes = {
fetchApplication: PropTypes.func.isRequired,
appName: PropTypes.string,
application: PropTypes.object,
locationSettings: PropTypes.object.isRequired,
storeApplicationMetaData: PropTypes.func.isRequired,
deleteApplication: PropTypes.func.isRequired,
history: PropTypes.object.isRequired,
};
constructor(props) {
super();
this.state = {
activeTab: 0,
loading: !props.application,
prompt: false,
};
}
componentDidMount() {
this.props
.fetchApplication(this.props.appName)
.finally(() => this.setState({ loading: false }));
}
formatFullDateTime = v =>
formatFullDateTimeWithLocale(v, this.props.locationSettings.locale);
formatDate = v => formatDateWithLocale(v, this.props.locationSettings.locale);
deleteApplication = async evt => {
evt.preventDefault();
// if (window.confirm('Are you sure you want to remove this application?')) {
const { deleteApplication, appName } = this.props;
await deleteApplication(appName);
this.props.history.push('/applications');
// }
};
render() {
if (this.state.loading) {
return (
<div>
<p>Loading...</p>
<LinearProgress />
</div>
);
} else if (!this.props.application) {
return <p>Application ({this.props.appName}) not found</p>;
}
const { hasAccess } = this.context;
const { application, storeApplicationMetaData } = this.props;
const {
appName,
instances,
strategies,
seenToggles,
url,
description,
icon = 'apps',
createdAt,
} = application;
const toggleModal = () => {
this.setState(prev => ({ ...prev, prompt: !prev.prompt }));
};
const renderModal = () => (
<Dialogue
open={this.state.prompt}
onClose={toggleModal}
onClick={this.deleteApplication}
title="Are you sure you want to delete this application?"
/>
);
const tabData = [
{
label: 'Application overview',
component: (
<ApplicationView
strategies={strategies}
instances={instances}
seenToggles={seenToggles}
hasAccess={hasAccess}
formatFullDateTime={this.formatFullDateTime}
/>
),
},
{
label: 'Edit application',
component: (
<ApplicationUpdate
application={application}
storeApplicationMetaData={storeApplicationMetaData}
/>
),
},
];
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">
Created: <strong>{this.formatDate(createdAt)}</strong>
</Typography>
</div>
<ConditionallyRender
condition={hasAccess(UPDATE_APPLICATION)}
show={
<div>
{renderModal()}
<TabNav tabData={tabData} />
</div>
}
/>
</PageContent>
);
}
}
export default ClientApplications;

30
frontend/src/component/application/application-edit-container.jsx
View File

@ -1,30 +0,0 @@
import { connect } from 'react-redux';
import ApplicationEdit from './application-edit-component';
import {
deleteApplication,
fetchApplication,
storeApplicationMetaData,
} from '../../store/application/actions';
import { useLocationSettings } from '../../hooks/useLocationSettings';
const ApplicationEditContainer = props => {
const { locationSettings } = useLocationSettings();
return <ApplicationEdit {...props} locationSettings={locationSettings} />;
};
const mapStateToProps = (state, props) => {
let application = state.applications.getIn(['apps', props.appName]);
if (application) {
application = application.toJS();
}
return {
application,
};
};
export default connect(mapStateToProps, {
fetchApplication,
storeApplicationMetaData,
deleteApplication,
})(ApplicationEditContainer);

69
frontend/src/component/application/application-list-component.js
View File

@ -1,69 +0,0 @@
import React, { useEffect, useMemo, useState } from 'react';
import PropTypes from 'prop-types';
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';
const Empty = () => (
<React.Fragment>
<section style={{ textAlign: 'center' }}>
<Warning /> <br />
<br />
Oh snap, it does not seem like you have connected any applications.
To connect your application to Unleash you will require a Client
SDK.
<br />
<br />
You can read more about how to use Unleash in your application in
the{' '}
<a href="https://docs.getunleash.io/docs/sdks/">documentation.</a>
</section>
</React.Fragment>
);
const ClientStrategies = ({ fetchAll, applications }) => {
const [filter, setFilter] = useState('');
useEffect(() => {
fetchAll();
}, [fetchAll]);
const filteredApplications = useMemo(() => {
const regExp = new RegExp(filter, 'i');
return filter
? applications?.filter(a => regExp.test(a.appName))
: applications;
}, [applications, filter]);
if (!filteredApplications) {
return <CircularProgress variant="indeterminate" />;
}
return (
<>
<div className={commonStyles.searchField}>
<SearchField value={filter} updateValue={setFilter} />
</div>
<PageContent headerContent={<HeaderTitle title="Applications" />}>
<div className={commonStyles.fullwidth}>
{filteredApplications.length > 0 ? (
<AppsLinkList apps={filteredApplications} />
) : (
<Empty />
)}
</div>
</PageContent>
</>
);
};
ClientStrategies.propTypes = {
applications: PropTypes.array,
fetchAll: PropTypes.func.isRequired,
};
export default ClientStrategies;

15
frontend/src/component/application/application-list-container.js
View File

@ -1,15 +0,0 @@
import { connect } from 'react-redux';
import ApplicationList from './application-list-component';
import { fetchAll } from '../../store/application/actions';
const mapStateToProps = state => ({
applications: state.applications.get('list').toJS(),
});
const mapDispatchToProps = {
fetchAll,
};
const Container = connect(mapStateToProps, mapDispatchToProps)(ApplicationList);
export default Container;

72
frontend/src/component/application/application-update.jsx
View File

@ -1,72 +0,0 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { TextField, Grid } from '@material-ui/core';
import { useCommonStyles } from '../../common.styles';
import icons from './icon-names';
import GeneralSelect from '../common/GeneralSelect/GeneralSelect';
function ApplicationUpdate({ application, storeApplicationMetaData }) {
const { appName, icon, url, description } = application;
const [localUrl, setLocalUrl] = useState(url);
const [localDescription, setLocalDescription] = useState(description);
const commonStyles = useCommonStyles();
return (
<Grid container style={{ marginTop: '1rem' }}>
<Grid item sm={12} xs={12} className={commonStyles.contentSpacingY}>
<Grid item>
<GeneralSelect
label="Icon"
options={icons.map(v => ({ key: v, label: v }))}
value={icon || 'apps'}
onChange={e =>
storeApplicationMetaData(
appName,
'icon',
e.target.value
)
}
/>
</Grid>
<Grid item>
<TextField
value={localUrl}
onChange={e => setLocalUrl(e.target.value)}
label="Application URL"
placeholder="https://example.com"
type="url"
variant="outlined"
size="small"
onBlur={() =>
storeApplicationMetaData(appName, 'url', localUrl)
}
/>
</Grid>
<Grid item>
<TextField
value={localDescription}
label="Description"
variant="outlined"
size="small"
rows={2}
onChange={e => setLocalDescription(e.target.value)}
onBlur={() =>
storeApplicationMetaData(
appName,
'description',
localDescription
)
}
/>
</Grid>
</Grid>
</Grid>
);
}
ApplicationUpdate.propTypes = {
application: PropTypes.object.isRequired,
storeApplicationMetaData: PropTypes.func.isRequired,
};
export default ApplicationUpdate;

0
frontend/src/component/application/icon-names.js → frontend/src/component/application/icon-names.ts
View File

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

@ -41,7 +41,7 @@ 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 EditApplication from '../application/EditApplication';
import ApplicationEdit from '../application/ApplicationEdit';
import ApplicationList from '../application/ApplicationList';
import ContextList from '../context/ContextList/ContextList';
import RedirectFeatureView from '../feature/RedirectFeatureView/RedirectFeatureView';
@ -194,7 +194,7 @@ export const routes = [
path: '/applications/:name',
title: ':name',
parent: '/applications',
component: EditApplication,
component: ApplicationEdit,
type: 'protected',
layout: 'main',
menu: {},