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

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),
     },

frontend/src/component/addons/AddonForm/AddonForm.tsx

@@ -179,6 +179,7 @@ export const AddonForm: VFC<IAddonFormProps> = ({
         }
 
         const updatedErrors = cloneDeep(errors);
+        updatedErrors.parameters = {};
         updatedErrors.containsErrors = false;
 
         // Validations
@@ -291,11 +292,11 @@ export const AddonForm: VFC<IAddonFormProps> = ({
                             options={selectableEvents || []}
                             selectedItems={formValues.events}
                             onChange={setEventValues}
-                            entityName={'event'}
+                            entityName="event"
                             selectAllEnabled={false}
-                            description={
+                            error={errors.events}
-                                'Select what events you want your addon to be notified about'
+                            description="Select what events you want your addon to be notified about."
-                            }
+                            required
                         />
                     </StyledFormSection>
                     <StyledFormSection>
@@ -303,7 +304,7 @@ export const AddonForm: VFC<IAddonFormProps> = ({
                             options={selectableProjects}
                             selectedItems={formValues.projects || []}
                             onChange={setProjects}
-                            entityName={'project'}
+                            entityName="project"
                             selectAllEnabled={true}
                         />
                     </StyledFormSection>
@@ -312,7 +313,7 @@ export const AddonForm: VFC<IAddonFormProps> = ({
                             options={selectableEnvironments}
                             selectedItems={formValues.environments || []}
                             onChange={setEnvironments}
-                            entityName={'environment'}
+                            entityName="environment"
                             selectAllEnabled={true}
                         />
                     </StyledFormSection>

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<IAddonMultiSelectorProps> = ({
     entityName,
     selectAllEnabled = true,
     description,
+    required,
 }) => {
     const [isWildcardSelected, selectWildcard] = useState(
         selectedItems.includes(ALL_OPTIONS)
@@ -144,7 +146,14 @@ export const AddonMultiSelector: VFC<IAddonMultiSelectorProps> = ({
 
     return (
         <React.Fragment>
-            <StyledTitle>{capitalize(entityName)}s</StyledTitle>
+            <StyledTitle>
+                {capitalize(entityName)}s
+                {required ? (
+                    <Typography component="span" color="error">
+                        *
+                    </Typography>
+                ) : null}
+            </StyledTitle>
             <ConditionallyRender
                 condition={description !== undefined}
                 show={<StyledHelpText>{description}</StyledHelpText>}
@@ -153,7 +162,6 @@ export const AddonMultiSelector: VFC<IAddonMultiSelectorProps> = ({
                 condition={selectAllEnabled}
                 show={<DefaultHelpText />}
             />
-            <span className={themeStyles.error}>{error}</span>
             <ConditionallyRender
                 condition={selectAllEnabled}
                 show={<SelectAllFormControl />}

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 ? (
+                            <Typography component="span" color="error">
+                                *
+                            </Typography>
+                        ) : null}
+                    </>
+                }
                 name={definition.name}
                 placeholder={definition.placeholder || ''}
                 InputLabelProps={{

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,

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,

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,