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

feat: Wrap addons form in FormTemplate (#1138)

Browse Source 
* feat: Wrap addons form in FormTemplate

* Change styled button section
This commit is contained in:
Christopher Kolstad 2022-07-21 14:02:17 +02:00 committed by GitHub
parent 4c5eb20e09
commit e5b2f907e4
5 changed files with 266 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
frontend/src/component/addons/AddonForm/AddonForm.styles.tsx Normal file
View File

@ -0,0 +1,57 @@
import { styled } from '@mui/system';
import { FormControlLabel, TextField } from '@mui/material';
import Autocomplete from '@mui/material/Autocomplete';
export const StyledForm = styled('form')({
display: 'flex',
flexDirection: 'column',
height: '100%',
gap: '1rem',
});
export const StyledAutocomplete = styled(Autocomplete)({
paddingBottom: '36px',
marginTop: '0px',
});
export const StyledFormSection = styled('section')({
marginBottom: '36px',
});
export const StyledHelpText = styled('p')({
marginBottom: '0.5rem',
});
export const StyledContainer = styled('div')({
maxWidth: '600px',
});
export const StyledButtonContainer = styled('div')({
marginTop: 'auto',
display: 'flex',
justifyContent: 'flex-end',
});
export const StyledButtonSection = styled('section')(({ theme }) => ({
'padding-top': '16px',
'& > *': {
marginRight: theme.spacing(1),
},
}));
export const StyledTextField = styled(TextField)({
width: '100%',
marginBottom: '1rem',
marginTop: '0px',
});
export const StyledSelectAllFormControlLabel = styled(FormControlLabel)({
paddingBottom: '16px',
});
export const StyledTitle = styled('h4')({
marginBottom: '8px',
});
export const StyledAddonParameterContainer = styled('div')({
marginTop: '25px',
});

255
frontend/src/component/addons/AddonForm/AddonForm.tsx
View File

@ -6,35 +6,39 @@ import React, {
useState, useState,
VFC, VFC,
} from 'react'; } from 'react';
import { Button, FormControlLabel, Switch, TextField } from '@mui/material'; import {
Button,
Divider,
FormControlLabel,
Switch,
TextField,
} from '@mui/material';
import produce from 'immer'; import produce from 'immer';
import { styles as themeStyles } from 'component/common';
import { trim } from 'component/common/util'; import { trim } from 'component/common/util';
import { IAddon, IAddonProvider } from 'interfaces/addons'; import { IAddon, IAddonProvider } from 'interfaces/addons';
import { AddonParameters } from './AddonParameters/AddonParameters'; import { AddonParameters } from './AddonParameters/AddonParameters';
import cloneDeep from 'lodash.clonedeep'; import cloneDeep from 'lodash.clonedeep';
import { PageContent } from 'component/common/PageContent/PageContent';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import useAddonsApi from 'hooks/api/actions/useAddonsApi/useAddonsApi'; import useAddonsApi from 'hooks/api/actions/useAddonsApi/useAddonsApi';
import useToast from 'hooks/useToast'; import useToast from 'hooks/useToast';
import { makeStyles } from 'tss-react/mui';
import { formatUnknownError } from 'utils/formatUnknownError'; import { formatUnknownError } from 'utils/formatUnknownError';
import useProjects from '../../../hooks/api/getters/useProjects/useProjects'; import useProjects from '../../../hooks/api/getters/useProjects/useProjects';
import { useEnvironments } from '../../../hooks/api/getters/useEnvironments/useEnvironments'; import { useEnvironments } from '../../../hooks/api/getters/useEnvironments/useEnvironments';
import { AddonMultiSelector } from './AddonMultiSelector/AddonMultiSelector'; import { AddonMultiSelector } from './AddonMultiSelector/AddonMultiSelector';
import FormTemplate from 'component/common/FormTemplate/FormTemplate';
const useStyles = makeStyles()(theme => ({ import useUiConfig from '../../../hooks/api/getters/useUiConfig/useUiConfig';
nameInput: { import PermissionButton from '../../common/PermissionButton/PermissionButton';
marginRight: '1.5rem', import { ADMIN } from '../../providers/AccessProvider/permissions';
}, import {
formSection: { padding: '10px 28px' }, StyledForm,
buttonsSection: { StyledFormSection,
padding: '10px 28px', StyledHelpText,
'& > *': { StyledTextField,
marginRight: theme.spacing(1), StyledContainer,
}, StyledButtonContainer,
}, StyledButtonSection,
})); } from './AddonForm.styles';
import { useTheme } from '@mui/system';
interface IAddonFormProps { interface IAddonFormProps {
provider?: IAddonProvider; provider?: IAddonProvider;
@ -52,7 +56,7 @@ export const AddonForm: VFC<IAddonFormProps> = ({
const { createAddon, updateAddon } = useAddonsApi(); const { createAddon, updateAddon } = useAddonsApi();
const { setToastData, setToastApiError } = useToast(); const { setToastData, setToastApiError } = useToast();
const navigate = useNavigate(); const navigate = useNavigate();
const { classes: styles } = useStyles(); const theme = useTheme();
const { projects: availableProjects } = useProjects(); const { projects: availableProjects } = useProjects();
const selectableProjects = availableProjects.map(project => ({ const selectableProjects = availableProjects.map(project => ({
value: project.id, value: project.id,
@ -67,6 +71,7 @@ export const AddonForm: VFC<IAddonFormProps> = ({
value: event, value: event,
label: event, label: event,
})); }));
const { uiConfig } = useUiConfig();
const [formValues, setFormValues] = useState(initialValues); const [formValues, setFormValues] = useState(initialValues);
const [errors, setErrors] = useState<{ const [errors, setErrors] = useState<{
containsErrors: boolean; containsErrors: boolean;
@ -81,6 +86,18 @@ export const AddonForm: VFC<IAddonFormProps> = ({
parameters: {}, parameters: {},
}); });
const submitText = editMode ? 'Update' : 'Create'; const submitText = editMode ? 'Update' : 'Create';
let url = `${uiConfig.unleashUrl}/api/admin/addons${
editMode ? `/${formValues.id}` : ``
}`;
const formatApiCode = () => {
return `curl --location --request ${
editMode ? 'PUT' : 'POST'
} '${url}' \\
--header 'Authorization: INSERT_API_KEY' \\
--header 'Content-Type: application/json' \\
--data-raw '${JSON.stringify(formValues, undefined, 2)}'`;
};
useEffect(() => { useEffect(() => {
if (!provider) { if (!provider) {
@ -162,7 +179,9 @@ export const AddonForm: VFC<IAddonFormProps> = ({
const onSubmit: FormEventHandler<HTMLFormElement> = async event => { const onSubmit: FormEventHandler<HTMLFormElement> = async event => {
event.preventDefault(); event.preventDefault();
if (!provider) return; if (!provider) {
return;
}
const updatedErrors = cloneDeep(errors); const updatedErrors = cloneDeep(errors);
updatedErrors.containsErrors = false; updatedErrors.containsErrors = false;
@ -222,97 +241,113 @@ export const AddonForm: VFC<IAddonFormProps> = ({
} = provider ? provider : ({} as Partial<IAddonProvider>); } = provider ? provider : ({} as Partial<IAddonProvider>);
return ( return (
<PageContent header={`Configure ${name} addon`}> <FormTemplate
<section className={styles.formSection}> title={`${submitText} ${name} addon`}
{description}&nbsp; description={description || ''}
<a href={documentationUrl} target="_blank" rel="noreferrer"> documentationLink={documentationUrl}
Read more documentationLinkLabel="Addon documentation"
</a> formatApiCode={formatApiCode}
<p className={themeStyles.error}>{errors.general}</p> >
</section> <StyledForm onSubmit={onSubmit}>
<form onSubmit={onSubmit}> <StyledContainer>
<section className={styles.formSection}> <StyledFormSection>
<TextField <StyledTextField
size="small" size="small"
label="Provider" label="Provider"
name="provider" name="provider"
value={formValues.provider} value={formValues.provider}
disabled disabled
variant="outlined" hidden={true}
className={styles.nameInput} variant="outlined"
/> />
<FormControlLabel <FormControlLabel
control={ control={
<Switch <Switch
checked={formValues.enabled} checked={formValues.enabled}
onClick={onEnabled} onClick={onEnabled}
/> />
} }
label={formValues.enabled ? 'Enabled' : 'Disabled'} label={formValues.enabled ? 'Enabled' : 'Disabled'}
/> />
</section> </StyledFormSection>
<section className={styles.formSection}> <StyledFormSection>
<TextField <StyledHelpText>
size="small" What is your addon description?
style={{ width: '80%' }} </StyledHelpText>
minRows={4}
multiline
label="Description"
name="description"
placeholder=""
value={formValues.description}
error={Boolean(errors.description)}
helperText={errors.description}
onChange={setFieldValue('description')}
variant="outlined"
/>
</section>
<section className={styles.formSection}> <StyledTextField
<AddonMultiSelector size="small"
options={selectableEvents || []} style={{ width: '80%' }}
selectedItems={formValues.events} minRows={4}
onChange={setEventValues} multiline
entityName={'event'} label="Description"
selectAllEnabled={false} name="description"
/> placeholder=""
</section> value={formValues.description}
<section className={styles.formSection}> error={Boolean(errors.description)}
<AddonMultiSelector helperText={errors.description}
options={selectableProjects} onChange={setFieldValue('description')}
selectedItems={formValues.projects || []} variant="outlined"
onChange={setProjects} />
entityName={'project'} </StyledFormSection>
selectAllEnabled={true}
/> <StyledFormSection>
</section> <AddonMultiSelector
<section className={styles.formSection}> options={selectableEvents || []}
<AddonMultiSelector selectedItems={formValues.events}
options={selectableEnvironments} onChange={setEventValues}
selectedItems={formValues.environments || []} entityName={'event'}
onChange={setEnvironments} selectAllEnabled={false}
entityName={'environment'} description={
selectAllEnabled={true} 'Select what events you want your addon to be notified about'
/> }
</section> />
<section className={styles.formSection}> </StyledFormSection>
<AddonParameters <StyledFormSection>
provider={provider} <AddonMultiSelector
config={formValues} options={selectableProjects}
parametersErrors={errors.parameters} selectedItems={formValues.projects || []}
editMode={editMode} onChange={setProjects}
setParameterValue={setParameterValue} entityName={'project'}
/> selectAllEnabled={true}
</section> />
<section className={styles.buttonsSection}> </StyledFormSection>
<Button type="submit" color="primary" variant="contained"> <StyledFormSection>
{submitText} <AddonMultiSelector
</Button> options={selectableEnvironments}
<Button type="button" onClick={onCancel}> selectedItems={formValues.environments || []}
Cancel onChange={setEnvironments}
</Button> entityName={'environment'}
</section> selectAllEnabled={true}
</form> />
</PageContent> </StyledFormSection>
<StyledFormSection>
<AddonParameters
provider={provider}
config={formValues}
parametersErrors={errors.parameters}
editMode={editMode}
setParameterValue={setParameterValue}
/>
</StyledFormSection>
</StyledContainer>
<Divider />
<StyledButtonContainer>
<StyledButtonSection theme={theme}>
<PermissionButton
type="submit"
color="primary"
variant="contained"
permission={ADMIN}
>
{submitText}
</PermissionButton>
<Button type="button" onClick={onCancel}>
Cancel
</Button>
</StyledButtonSection>
</StyledButtonContainer>
</StyledForm>
</FormTemplate>
); );
}; };

109
frontend/src/component/addons/AddonForm/AddonMultiSelector/AddonMultiSelector.tsx
View File

@ -12,7 +12,6 @@ import {
Box, Box,
capitalize, capitalize,
Checkbox, Checkbox,
FormControlLabel,
Paper, Paper,
TextField, TextField,
} from '@mui/material'; } from '@mui/material';
@ -20,6 +19,12 @@ import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
import CheckBoxIcon from '@mui/icons-material/CheckBox'; import CheckBoxIcon from '@mui/icons-material/CheckBox';
import { ConditionallyRender } from '../../../common/ConditionallyRender/ConditionallyRender'; import { ConditionallyRender } from '../../../common/ConditionallyRender/ConditionallyRender';
import { SelectAllButton } from '../../../admin/apiToken/ApiTokenForm/SelectProjectInput/SelectAllButton/SelectAllButton'; import { SelectAllButton } from '../../../admin/apiToken/ApiTokenForm/SelectProjectInput/SelectAllButton/SelectAllButton';
import {
StyledHelpText,
StyledSelectAllFormControlLabel,
StyledTitle,
StyledAutocomplete,
} from '../AddonForm.styles';
export interface IAddonMultiSelectorProps { export interface IAddonMultiSelectorProps {
options: IAutocompleteBoxOption[]; options: IAutocompleteBoxOption[];
@ -29,6 +34,7 @@ export interface IAddonMultiSelectorProps {
onFocus?: () => void; onFocus?: () => void;
entityName: string; entityName: string;
selectAllEnabled: boolean; selectAllEnabled: boolean;
description?: string;
} }
const ALL_OPTIONS = '*'; const ALL_OPTIONS = '*';
@ -47,6 +53,7 @@ export const AddonMultiSelector: VFC<IAddonMultiSelectorProps> = ({
onFocus, onFocus,
entityName, entityName,
selectAllEnabled = true, selectAllEnabled = true,
description,
}) => { }) => {
const [isWildcardSelected, selectWildcard] = useState( const [isWildcardSelected, selectWildcard] = useState(
selectedItems.includes(ALL_OPTIONS) selectedItems.includes(ALL_OPTIONS)
@ -117,68 +124,70 @@ export const AddonMultiSelector: VFC<IAddonMultiSelectorProps> = ({
</Fragment> </Fragment>
); );
const SelectAllFormControl = () => ( const SelectAllFormControl = () => (
<Box sx={{ mt: 1, mb: 0.25, ml: 1.5 }}> <StyledSelectAllFormControlLabel
<FormControlLabel data-testid={`select-all-${entityName}s`}
data-testid={`select-all-${entityName}s`} control={
control={ <Checkbox
<Checkbox checked={isWildcardSelected}
checked={isWildcardSelected} onChange={onAllItemsChange}
onChange={onAllItemsChange} />
/> }
} label={`ALL current and future ${entityName}s`}
label={`ALL current and future ${entityName}s`} />
/>
</Box>
); );
const HelpText = () => ( const DefaultHelpText = () => (
<p> <StyledHelpText>
Selecting {entityName}(s) here will filter events so that your addon Selecting {entityName}(s) here will filter events so that your addon
will only receive events that are tagged with one of your{' '} will only receive events that are tagged with one of your{' '}
{entityName}s. {entityName}s.
</p> </StyledHelpText>
); );
return ( return (
<React.Fragment> <React.Fragment>
<h4>{capitalize(entityName)}s</h4> <StyledTitle>{capitalize(entityName)}s</StyledTitle>
<ConditionallyRender
condition={description !== undefined}
show={<StyledHelpText>{description}</StyledHelpText>}
/>
<ConditionallyRender <ConditionallyRender
condition={selectAllEnabled} condition={selectAllEnabled}
show={<HelpText />} show={<DefaultHelpText />}
/> />
<span className={themeStyles.error}>{error}</span> <span className={themeStyles.error}>{error}</span>
<br /> <ConditionallyRender
<Box sx={{ mt: -1, mb: 3 }}> condition={selectAllEnabled}
<ConditionallyRender show={<SelectAllFormControl />}
condition={selectAllEnabled} />
show={<SelectAllFormControl />} <StyledAutocomplete
/> disabled={isWildcardSelected}
<Autocomplete multiple
disabled={isWildcardSelected} limitTags={2}
multiple options={options}
limitTags={2} disableCloseOnSelect
options={options} //@ts-expect-error
disableCloseOnSelect getOptionLabel={({ label }) => label}
getOptionLabel={({ label }) => label} fullWidth
fullWidth groupBy={() => 'Select/Deselect all'}
groupBy={() => 'Select/Deselect all'} renderGroup={renderGroup}
renderGroup={renderGroup} PaperComponent={CustomPaper}
PaperComponent={CustomPaper} //@ts-expect-error
renderOption={renderOption} renderOption={renderOption}
renderInput={renderInput} renderInput={renderInput}
value={ value={
isWildcardSelected isWildcardSelected
? options ? options
: options.filter(option => : options.filter(option =>
selectedItems.includes(option.value) selectedItems.includes(option.value)
) )
} }
onChange={(_, input) => { onChange={(_, input) => {
const state = input.map(({ value }) => value); //@ts-expect-error
onChange(state); const state = input.map(({ value }) => value);
}} onChange(state);
/> }}
</Box> />
</React.Fragment> </React.Fragment>
); );
}; };

5
frontend/src/component/addons/AddonForm/AddonParameters/AddonParameter/AddonParameter.tsx
View File

@ -1,6 +1,7 @@
import { TextField } from '@mui/material'; import { TextField } from '@mui/material';
import { IAddonConfig, IAddonProviderParams } from 'interfaces/addons'; import { IAddonConfig, IAddonProviderParams } from 'interfaces/addons';
import { ChangeEventHandler } from 'react'; import { ChangeEventHandler } from 'react';
import { StyledAddonParameterContainer } from '../../AddonForm.styles';
const resolveType = ({ type = 'text', sensitive = false }, value: string) => { const resolveType = ({ type = 'text', sensitive = false }, value: string) => {
if (sensitive && value === MASKED_VALUE) { if (sensitive && value === MASKED_VALUE) {
@ -32,7 +33,7 @@ export const AddonParameter = ({
const error = parametersErrors[definition.name]; const error = parametersErrors[definition.name];
return ( return (
<div style={{ width: '80%', marginTop: '25px' }}> <StyledAddonParameterContainer>
<TextField <TextField
size="small" size="small"
style={{ width: '100%' }} style={{ width: '100%' }}
@ -51,6 +52,6 @@ export const AddonParameter = ({
variant="outlined" variant="outlined"
helperText={definition.description} helperText={definition.description}
/> />
</div> </StyledAddonParameterContainer>
); );
}; };

4
frontend/src/component/addons/AddonForm/AddonParameters/AddonParameters.tsx
View File

@ -4,6 +4,7 @@ import {
AddonParameter, AddonParameter,
IAddonParameterProps, IAddonParameterProps,
} from './AddonParameter/AddonParameter'; } from './AddonParameter/AddonParameter';
import { StyledTitle } from '../AddonForm.styles';
interface IAddonParametersProps { interface IAddonParametersProps {
provider?: IAddonProvider; provider?: IAddonProvider;
@ -21,10 +22,9 @@ export const AddonParameters = ({
editMode, editMode,
}: IAddonParametersProps) => { }: IAddonParametersProps) => {
if (!provider) return null; if (!provider) return null;
return ( return (
<React.Fragment> <React.Fragment>
<h4>Parameters</h4> <StyledTitle>Parameters</StyledTitle>
{editMode ? ( {editMode ? (
<p> <p>
Sensitive parameters will be masked with value "<i>*****</i> Sensitive parameters will be masked with value "<i>*****</i>