From 18fc5eebd296147f745c822156b436ec5dd72591 Mon Sep 17 00:00:00 2001 From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com> Date: Mon, 5 Sep 2022 11:00:59 +0200 Subject: [PATCH] fix: show addon event select validation (#2031) * fix: show addon event select validation * fix: addon form parameters error not clearing * fix: addon required parameter field indicators --- .../addons/AddonForm/AddonForm.styles.tsx | 2 +- .../src/component/addons/AddonForm/AddonForm.tsx | 13 +++++++------ .../AddonMultiSelector/AddonMultiSelector.tsx | 14 +++++++++++--- .../AddonParameter/AddonParameter.tsx | 13 +++++++++++-- src/lib/addons/datadog-definition.ts | 4 ++-- src/lib/addons/slack-definition.ts | 3 ++- src/lib/addons/teams-definition.ts | 1 + 7 files changed, 35 insertions(+), 15 deletions(-) diff --git a/frontend/src/component/addons/AddonForm/AddonForm.styles.tsx b/frontend/src/component/addons/AddonForm/AddonForm.styles.tsx index 4ae328f0bc..03dd7f5d76 100644 --- a/frontend/src/component/addons/AddonForm/AddonForm.styles.tsx +++ b/frontend/src/component/addons/AddonForm/AddonForm.styles.tsx @@ -27,7 +27,7 @@ export const StyledButtonContainer = styled('div')({ }); export const StyledButtonSection = styled('section')(({ theme }) => ({ - 'padding-top': '16px', + paddingTop: theme.spacing(2), '& > *': { marginRight: theme.spacing(1), }, diff --git a/frontend/src/component/addons/AddonForm/AddonForm.tsx b/frontend/src/component/addons/AddonForm/AddonForm.tsx index 3a19477149..cfafd7fab2 100644 --- a/frontend/src/component/addons/AddonForm/AddonForm.tsx +++ b/frontend/src/component/addons/AddonForm/AddonForm.tsx @@ -179,6 +179,7 @@ export const AddonForm: VFC = ({ } const updatedErrors = cloneDeep(errors); + updatedErrors.parameters = {}; updatedErrors.containsErrors = false; // Validations @@ -291,11 +292,11 @@ export const AddonForm: VFC = ({ options={selectableEvents || []} selectedItems={formValues.events} onChange={setEventValues} - entityName={'event'} + entityName="event" selectAllEnabled={false} - description={ - 'Select what events you want your addon to be notified about' - } + error={errors.events} + description="Select what events you want your addon to be notified about." + required /> @@ -303,7 +304,7 @@ export const AddonForm: VFC = ({ options={selectableProjects} selectedItems={formValues.projects || []} onChange={setProjects} - entityName={'project'} + entityName="project" selectAllEnabled={true} /> @@ -312,7 +313,7 @@ export const AddonForm: VFC = ({ options={selectableEnvironments} selectedItems={formValues.environments || []} onChange={setEnvironments} - entityName={'environment'} + entityName="environment" selectAllEnabled={true} /> diff --git a/frontend/src/component/addons/AddonForm/AddonMultiSelector/AddonMultiSelector.tsx b/frontend/src/component/addons/AddonForm/AddonMultiSelector/AddonMultiSelector.tsx index e7c29889d5..a1492981f3 100644 --- a/frontend/src/component/addons/AddonForm/AddonMultiSelector/AddonMultiSelector.tsx +++ b/frontend/src/component/addons/AddonForm/AddonMultiSelector/AddonMultiSelector.tsx @@ -1,6 +1,5 @@ import React, { ChangeEvent, Fragment, useState, VFC } from 'react'; import { IAutocompleteBoxOption } from '../../../common/AutocompleteBox/AutocompleteBox'; -import { styles as themeStyles } from 'component/common'; import { AutocompleteRenderGroupParams, AutocompleteRenderInputParams, @@ -13,6 +12,7 @@ import { Paper, TextField, Autocomplete, + Typography, } from '@mui/material'; import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank'; import CheckBoxIcon from '@mui/icons-material/CheckBox'; @@ -33,6 +33,7 @@ export interface IAddonMultiSelectorProps { entityName: string; selectAllEnabled: boolean; description?: string; + required?: boolean; } const ALL_OPTIONS = '*'; @@ -52,6 +53,7 @@ export const AddonMultiSelector: VFC = ({ entityName, selectAllEnabled = true, description, + required, }) => { const [isWildcardSelected, selectWildcard] = useState( selectedItems.includes(ALL_OPTIONS) @@ -144,7 +146,14 @@ export const AddonMultiSelector: VFC = ({ return ( - {capitalize(entityName)}s + + {capitalize(entityName)}s + {required ? ( + + * + + ) : null} + {description}} @@ -153,7 +162,6 @@ export const AddonMultiSelector: VFC = ({ condition={selectAllEnabled} show={} /> - {error} } diff --git a/frontend/src/component/addons/AddonForm/AddonParameters/AddonParameter/AddonParameter.tsx b/frontend/src/component/addons/AddonForm/AddonParameters/AddonParameter/AddonParameter.tsx index 9a1f3b20f8..d4f15ec80b 100644 --- a/frontend/src/component/addons/AddonForm/AddonParameters/AddonParameter/AddonParameter.tsx +++ b/frontend/src/component/addons/AddonForm/AddonParameters/AddonParameter/AddonParameter.tsx @@ -1,4 +1,4 @@ -import { TextField } from '@mui/material'; +import { TextField, Typography } from '@mui/material'; import { IAddonConfig, IAddonProviderParams } from 'interfaces/addons'; import { ChangeEventHandler } from 'react'; import { StyledAddonParameterContainer } from '../../AddonForm.styles'; @@ -40,7 +40,16 @@ export const AddonParameter = ({ minRows={definition.type === 'textfield' ? 9 : 0} multiline={definition.type === 'textfield'} type={type} - label={definition.displayName} + label={ + <> + {definition.displayName} + {definition.required ? ( + + * + + ) : null} + + } name={definition.name} placeholder={definition.placeholder || ''} InputLabelProps={{ diff --git a/src/lib/addons/datadog-definition.ts b/src/lib/addons/datadog-definition.ts index 0c87aef376..16ef412164 100644 --- a/src/lib/addons/datadog-definition.ts +++ b/src/lib/addons/datadog-definition.ts @@ -33,9 +33,9 @@ const dataDogDefinition: IAddonDefinition = { }, { name: 'apiKey', - displayName: 'DD API KEY', + displayName: 'Datadog API key', placeholder: 'j96c23b0f12a6b3434a8d710110bd862', - description: 'Api key from datadog', + description: '(Required) API key from Datadog', type: 'text', required: true, sensitive: true, diff --git a/src/lib/addons/slack-definition.ts b/src/lib/addons/slack-definition.ts index 03cacf4478..f8f3839755 100644 --- a/src/lib/addons/slack-definition.ts +++ b/src/lib/addons/slack-definition.ts @@ -25,6 +25,7 @@ const slackDefinition: IAddonDefinition = { { name: 'url', displayName: 'Slack webhook URL', + description: '(Required)', type: 'url', required: true, sensitive: true, @@ -53,7 +54,7 @@ const slackDefinition: IAddonDefinition = { name: 'defaultChannel', displayName: 'Default channel', description: - 'Default channel to post updates to if not specified in the slack-tag', + '(Required) Default channel to post updates to if not specified in the slack-tag', type: 'text', required: true, sensitive: false, diff --git a/src/lib/addons/teams-definition.ts b/src/lib/addons/teams-definition.ts index 9bf97a2781..67d7f4c2d0 100644 --- a/src/lib/addons/teams-definition.ts +++ b/src/lib/addons/teams-definition.ts @@ -25,6 +25,7 @@ const teamsDefinition: IAddonDefinition = { { name: 'url', displayName: 'Microsoft Teams webhook URL', + description: '(Required)', type: 'url', required: true, sensitive: true,