mirror of
https://github.com/Unleash/unleash.git
synced 2024-10-18 20:09:08 +02:00
005daa3740
* fix: use swr with login * fix: remove metrics poller * fix: do not allow retry on 401 * fix: create swr provider * fix: move accessprovider * fix: remove metrics poller test * fix: hide password auth if disableDefault is set * Update src/component/project/ProjectList/ProjectList.tsx Co-authored-by: Christopher Kolstad <chriswk@getunleash.ai> * fix: console log Co-authored-by: Christopher Kolstad <chriswk@getunleash.ai>
220 lines
8.2 KiB
TypeScript
220 lines
8.2 KiB
TypeScript
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 '../providers/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?.name} project`}
|
|
/>
|
|
}
|
|
>
|
|
<ConditionallyRender
|
|
condition={isOss()}
|
|
show={
|
|
<Alert data-loading severity="error">
|
|
{submitText} project requires a paid version of
|
|
Unleash. Check out{' '}
|
|
<a
|
|
href="https://www.getunleash.io"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
getunleash.io
|
|
</a>{' '}
|
|
to learn 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;
|