mirror of
https://github.com/Unleash/unleash.git
synced 2025-09-28 17:55:15 +02:00
fix: hide project CRUD actions for oss (#416)
This commit is contained in:
Ivar Conradi Østhus
GitHub
parent
2990fc180a
commit
012cfc1806
@ -1,3 +1,4 @@
|
|||||||
|
/* eslint-disable react/jsx-no-target-blank */
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import {
|
import {
|
||||||
@ -20,16 +21,27 @@ import {
|
|||||||
FormControl,
|
FormControl,
|
||||||
} from '@material-ui/core';
|
} from '@material-ui/core';
|
||||||
import { Delete } from '@material-ui/icons';
|
import { Delete } from '@material-ui/icons';
|
||||||
|
import { Alert } from '@material-ui/lab';
|
||||||
|
|
||||||
import AddUserComponent from './access-add-user';
|
import AddUserComponent from './access-add-user';
|
||||||
|
|
||||||
import projectApi from '../../store/project/api';
|
import projectApi from '../../store/project/api';
|
||||||
import PageContent from '../common/PageContent';
|
import PageContent from '../common/PageContent';
|
||||||
|
import useUiConfig from '../../hooks/api/getters/useUiConfig/useUiConfig';
|
||||||
|
|
||||||
|
|
||||||
function AccessComponent({ projectId, project }) {
|
function AccessComponent({ projectId, project }) {
|
||||||
const [roles, setRoles] = useState([]);
|
const [roles, setRoles] = useState([]);
|
||||||
const [users, setUsers] = useState([]);
|
const [users, setUsers] = useState([]);
|
||||||
const [error, setError] = useState();
|
const [error, setError] = useState();
|
||||||
|
const { isOss } = useUiConfig();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchAccess();
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [projectId]);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const fetchAccess = async () => {
|
const fetchAccess = async () => {
|
||||||
try {
|
try {
|
||||||
@ -43,13 +55,14 @@ function AccessComponent({ projectId, project }) {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
if (isOss()) {
|
||||||
fetchAccess();
|
return (
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
<PageContent>
|
||||||
}, [projectId]);
|
<Alert severity="error">
|
||||||
|
Controlling access to projects requires a paid version of Unleash.
|
||||||
if (!project) {
|
Check out <a href="https://www.getunleash.io" target="_blank">getunleash.io</a> to find out more.
|
||||||
return <p>....</p>;
|
</Alert>
|
||||||
|
</PageContent>);
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleRoleChange = (userId, currRoleId) => async evt => {
|
const handleRoleChange = (userId, currRoleId) => async evt => {
|
||||||
|
|||||||
@ -1,200 +0,0 @@
|
|||||||
import { Component } from 'react';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import { TextField, Typography } from '@material-ui/core';
|
|
||||||
|
|
||||||
import styles from './Project.module.scss';
|
|
||||||
import classnames from 'classnames';
|
|
||||||
import { FormButtons, styles as commonStyles } from '../common';
|
|
||||||
import { trim } from '../common/util';
|
|
||||||
import PageContent from '../common/PageContent/PageContent';
|
|
||||||
import AccessContext from '../../contexts/AccessContext';
|
|
||||||
import ConditionallyRender from '../common/ConditionallyRender';
|
|
||||||
import { CREATE_PROJECT } from '../AccessProvider/permissions';
|
|
||||||
import HeaderTitle from '../common/HeaderTitle';
|
|
||||||
|
|
||||||
class ProjectFormComponent extends Component {
|
|
||||||
static contextType = AccessContext;
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
project: props.project,
|
|
||||||
errors: {},
|
|
||||||
currentLegalValue: '',
|
|
||||||
dirty: false,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
static getDerivedStateFromProps(props, state) {
|
|
||||||
if (!state.project.id && props.project.id) {
|
|
||||||
return { project: props.project };
|
|
||||||
} else {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setValue = (field, value) => {
|
|
||||||
const { project } = this.state;
|
|
||||||
project[field] = value;
|
|
||||||
this.setState({ project, dirty: true });
|
|
||||||
};
|
|
||||||
|
|
||||||
validateId = async id => {
|
|
||||||
const { errors } = this.state;
|
|
||||||
const { validateId, editMode } = this.props;
|
|
||||||
if (editMode) return true;
|
|
||||||
|
|
||||||
try {
|
|
||||||
await validateId(id);
|
|
||||||
errors.id = undefined;
|
|
||||||
} catch (err) {
|
|
||||||
errors.id = err.message;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setState({ errors });
|
|
||||||
if (errors.id) return false;
|
|
||||||
return true;
|
|
||||||
};
|
|
||||||
|
|
||||||
validateName = () => {
|
|
||||||
const { project } = this.state;
|
|
||||||
if (project.name.length === 0) {
|
|
||||||
this.setState(prev => ({
|
|
||||||
errors: { ...prev.errors, name: 'Name can not be empty.' },
|
|
||||||
}));
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
};
|
|
||||||
|
|
||||||
validate = async id => {
|
|
||||||
const validId = await this.validateId(id);
|
|
||||||
const validName = this.validateName();
|
|
||||||
|
|
||||||
return validId && validName;
|
|
||||||
};
|
|
||||||
|
|
||||||
onCancel = evt => {
|
|
||||||
const { project } = this.state;
|
|
||||||
evt.preventDefault();
|
|
||||||
|
|
||||||
const { editMode } = this.props;
|
|
||||||
|
|
||||||
if (editMode) {
|
|
||||||
this.props.history.push(`/projects/${project.id}`);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.props.history.goBack();
|
|
||||||
};
|
|
||||||
|
|
||||||
onSubmit = async evt => {
|
|
||||||
evt.preventDefault();
|
|
||||||
const { project } = this.state;
|
|
||||||
|
|
||||||
const valid = await this.validate(project.id);
|
|
||||||
|
|
||||||
if (valid) {
|
|
||||||
const { editMode } = this.props;
|
|
||||||
const query = editMode ? 'edited=true' : 'created=true';
|
|
||||||
await this.props.submit(project);
|
|
||||||
this.props.history.push(`/projects/${project.id}?${query}`);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { project, errors } = this.state;
|
|
||||||
const { hasAccess } = this.context;
|
|
||||||
const { editMode } = this.props;
|
|
||||||
const submitText = editMode ? 'Update' : 'Create';
|
|
||||||
|
|
||||||
return (
|
|
||||||
<PageContent
|
|
||||||
headerContent={
|
|
||||||
<HeaderTitle
|
|
||||||
title={`${submitText} Project`}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Typography
|
|
||||||
variant="subtitle1"
|
|
||||||
style={{ marginBottom: '0.5rem' }}
|
|
||||||
>
|
|
||||||
Projects allows you to group feature toggles together in the
|
|
||||||
management UI.
|
|
||||||
</Typography>
|
|
||||||
<form
|
|
||||||
onSubmit={this.onSubmit}
|
|
||||||
className={classnames(
|
|
||||||
commonStyles.contentSpacing,
|
|
||||||
styles.formContainer
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<TextField
|
|
||||||
label="Project Id"
|
|
||||||
name="id"
|
|
||||||
placeholder="A-unique-key"
|
|
||||||
value={project.id}
|
|
||||||
error={!!errors.id}
|
|
||||||
helperText={errors.id}
|
|
||||||
disabled={editMode}
|
|
||||||
variant="outlined"
|
|
||||||
size="small"
|
|
||||||
onBlur={v => this.validateId(v.target.value)}
|
|
||||||
onChange={v =>
|
|
||||||
this.setValue('id', trim(v.target.value))
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<br />
|
|
||||||
<TextField
|
|
||||||
label="Name"
|
|
||||||
name="name"
|
|
||||||
placeholder="Project name"
|
|
||||||
value={project.name}
|
|
||||||
error={!!errors.name}
|
|
||||||
variant="outlined"
|
|
||||||
size="small"
|
|
||||||
helperText={errors.name}
|
|
||||||
onChange={v => this.setValue('name', v.target.value)}
|
|
||||||
/>
|
|
||||||
<TextField
|
|
||||||
className={commonStyles.fullwidth}
|
|
||||||
placeholder="A short description"
|
|
||||||
rowsMax={2}
|
|
||||||
label="Description"
|
|
||||||
error={!!errors.description}
|
|
||||||
helperText={errors.description}
|
|
||||||
variant="outlined"
|
|
||||||
size="small"
|
|
||||||
multiline
|
|
||||||
value={project.description}
|
|
||||||
onChange={v =>
|
|
||||||
this.setValue('description', v.target.value)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ConditionallyRender
|
|
||||||
condition={hasAccess(CREATE_PROJECT)}
|
|
||||||
show={
|
|
||||||
<div className={styles.formButtons}>
|
|
||||||
<FormButtons
|
|
||||||
submitText={submitText}
|
|
||||||
onCancel={this.onCancel}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</form>
|
|
||||||
</PageContent>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ProjectFormComponent.propTypes = {
|
|
||||||
project: PropTypes.object.isRequired,
|
|
||||||
validateId: PropTypes.func.isRequired,
|
|
||||||
submit: PropTypes.func.isRequired,
|
|
||||||
history: PropTypes.object.isRequired,
|
|
||||||
editMode: PropTypes.bool.isRequired,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ProjectFormComponent;
|
|
||||||
208
frontend/src/component/project/form-project-component.tsx
Normal file
208
frontend/src/component/project/form-project-component.tsx
Normal file
@ -0,0 +1,208 @@
|
|||||||
|
import { useContext, useEffect, useState } from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { TextField, Typography } from '@material-ui/core';
|
||||||
|
|
||||||
|
import styles from './Project.module.scss';
|
||||||
|
import classnames from 'classnames';
|
||||||
|
import { FormButtons, styles as commonStyles } from '../common';
|
||||||
|
import { trim } from '../common/util';
|
||||||
|
import PageContent from '../common/PageContent/PageContent';
|
||||||
|
import AccessContext from '../../contexts/AccessContext';
|
||||||
|
import ConditionallyRender from '../common/ConditionallyRender';
|
||||||
|
import { CREATE_PROJECT } from '../AccessProvider/permissions';
|
||||||
|
import HeaderTitle from '../common/HeaderTitle';
|
||||||
|
import useUiConfig from '../../hooks/api/getters/useUiConfig/useUiConfig';
|
||||||
|
import { Alert } from '@material-ui/lab';
|
||||||
|
import { FormEvent } from 'react-router/node_modules/@types/react';
|
||||||
|
import useLoading from '../../hooks/useLoading';
|
||||||
|
|
||||||
|
interface ProjectFormComponentProps {
|
||||||
|
editMode: boolean;
|
||||||
|
project: any;
|
||||||
|
validateId: (id: string) => Promise<void>;
|
||||||
|
history: any;
|
||||||
|
submit: (project: any) => Promise<void>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ProjectFormComponent = (props: ProjectFormComponentProps) => {
|
||||||
|
const { editMode } = props;
|
||||||
|
|
||||||
|
const { hasAccess } = useContext(AccessContext);
|
||||||
|
const [project, setProject ] = useState(props.project || {});
|
||||||
|
const [errors, setErrors ] = useState<any>({});
|
||||||
|
const { isOss, loading } = useUiConfig();
|
||||||
|
const ref = useLoading(loading);
|
||||||
|
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if(!project.id && props.project.id) {
|
||||||
|
setProject(props.project);
|
||||||
|
}
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [props.project]);
|
||||||
|
|
||||||
|
const setValue = (field: string, value: string) => {
|
||||||
|
const p = {...project}
|
||||||
|
p[field] = value;
|
||||||
|
setProject(p)
|
||||||
|
};
|
||||||
|
|
||||||
|
const validateId = async (id: string) => {
|
||||||
|
if (editMode) return true;
|
||||||
|
|
||||||
|
const e = {...errors};
|
||||||
|
try {
|
||||||
|
await props.validateId(id);
|
||||||
|
e.id = undefined;
|
||||||
|
} catch (err: any) {
|
||||||
|
e.id = err.message;
|
||||||
|
}
|
||||||
|
|
||||||
|
setErrors(e)
|
||||||
|
if (e.id) return false;
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const validateName = () => {
|
||||||
|
if (project.name.length === 0) {
|
||||||
|
setErrors({...errors, name: 'Name can not be empty.' })
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const validate = async (id: string) => {
|
||||||
|
const validId = await validateId(id);
|
||||||
|
const validName = validateName();
|
||||||
|
|
||||||
|
return validId && validName;
|
||||||
|
};
|
||||||
|
|
||||||
|
const onCancel = (evt: Event) => {
|
||||||
|
evt.preventDefault();
|
||||||
|
|
||||||
|
if (editMode) {
|
||||||
|
props.history.push(`/projects/${project.id}`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
props.history.push(`/projects/`);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSubmit = async (evt: FormEvent<HTMLFormElement>) => {
|
||||||
|
evt.preventDefault();
|
||||||
|
|
||||||
|
const valid = await validate(project.id);
|
||||||
|
|
||||||
|
if (valid) {
|
||||||
|
const query = editMode ? 'edited=true' : 'created=true';
|
||||||
|
await props.submit(project);
|
||||||
|
props.history.push(`/projects/${project.id}?${query}`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const submitText = editMode ? 'Update' : 'Create';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div ref={ref}>
|
||||||
|
<PageContent
|
||||||
|
headerContent={
|
||||||
|
<HeaderTitle
|
||||||
|
title={`${submitText} Project`}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
|
||||||
|
<ConditionallyRender condition={isOss()} show={
|
||||||
|
<Alert data-loading severity="error">
|
||||||
|
Creating and updating projects requires a paid version of Unleash.
|
||||||
|
Check out <a href="https://www.getunleash.io" target="_blank" rel="noreferrer">getunleash.io</a>
|
||||||
|
to find out more.
|
||||||
|
</Alert>
|
||||||
|
} elseShow={
|
||||||
|
<>
|
||||||
|
<Typography
|
||||||
|
variant="subtitle1"
|
||||||
|
style={{ marginBottom: '0.5rem' }}
|
||||||
|
>
|
||||||
|
Projects allows you to group feature toggles together in the
|
||||||
|
management UI.
|
||||||
|
</Typography>
|
||||||
|
<form
|
||||||
|
data-loading
|
||||||
|
onSubmit={onSubmit}
|
||||||
|
className={classnames(
|
||||||
|
commonStyles.contentSpacing,
|
||||||
|
styles.formContainer
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<TextField
|
||||||
|
label="Project Id"
|
||||||
|
name="id"
|
||||||
|
placeholder="A-unique-key"
|
||||||
|
value={project.id}
|
||||||
|
error={!!errors.id}
|
||||||
|
helperText={errors.id}
|
||||||
|
disabled={editMode}
|
||||||
|
variant="outlined"
|
||||||
|
size="small"
|
||||||
|
onBlur={v => validateId(v.target.value)}
|
||||||
|
onChange={v =>
|
||||||
|
setValue('id', trim(v.target.value))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<br />
|
||||||
|
<TextField
|
||||||
|
label="Name"
|
||||||
|
name="name"
|
||||||
|
placeholder="Project name"
|
||||||
|
value={project.name}
|
||||||
|
error={!!errors.name}
|
||||||
|
variant="outlined"
|
||||||
|
size="small"
|
||||||
|
helperText={errors.name}
|
||||||
|
onChange={v => setValue('name', v.target.value)}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
className={commonStyles.fullwidth}
|
||||||
|
placeholder="A short description"
|
||||||
|
maxRows={2}
|
||||||
|
label="Description"
|
||||||
|
error={!!errors.description}
|
||||||
|
helperText={errors.description}
|
||||||
|
variant="outlined"
|
||||||
|
size="small"
|
||||||
|
multiline
|
||||||
|
value={project.description}
|
||||||
|
onChange={v =>
|
||||||
|
setValue('description', v.target.value)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ConditionallyRender
|
||||||
|
condition={hasAccess(CREATE_PROJECT)}
|
||||||
|
show={
|
||||||
|
<div className={styles.formButtons}>
|
||||||
|
<FormButtons
|
||||||
|
submitText={submitText}
|
||||||
|
onCancel={onCancel}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</form>
|
||||||
|
</>
|
||||||
|
} />
|
||||||
|
</PageContent>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
ProjectFormComponent.propTypes = {
|
||||||
|
project: PropTypes.object.isRequired,
|
||||||
|
validateId: PropTypes.func.isRequired,
|
||||||
|
submit: PropTypes.func.isRequired,
|
||||||
|
history: PropTypes.object.isRequired,
|
||||||
|
editMode: PropTypes.bool.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ProjectFormComponent;
|
||||||
@ -26,6 +26,8 @@ const useUiConfig = () => {
|
|||||||
const isOss = () => {
|
const isOss = () => {
|
||||||
if (data?.versionInfo?.current?.enterprise) {
|
if (data?.versionInfo?.current?.enterprise) {
|
||||||
return false;
|
return false;
|
||||||
|
} else if (!data || !data.versionInfo) {
|
||||||
|
return false;
|
||||||
}
|
}
|
||||||
return true;
|
return true;
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user