feat: add new notification trigger in GitHub

packages/web/src/components/ControlledAutocomplete/index.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import FormHelperText from '@mui/material/FormHelperText';
 import { Controller, useFormContext } from 'react-hook-form';
 import Autocomplete, { AutocompleteProps } from '@mui/material/Autocomplete';
 
@@ -6,6 +7,7 @@ interface ControlledAutocompleteProps extends AutocompleteProps<Option, boolean,
   shouldUnregister?: boolean;
   name: string;
   required?: boolean;
+  description?: string;
 }
 
 type Option = {
@@ -25,6 +27,7 @@ function ControlledAutocomplete(props: ControlledAutocompleteProps): React.React
     shouldUnregister,
     onBlur,
     onChange,
+    description,
     ...autocompleteProps
   } = props;
 
@@ -38,23 +41,32 @@ function ControlledAutocomplete(props: ControlledAutocompleteProps): React.React
       control={control}
       shouldUnregister={shouldUnregister}
       render={({ field: { ref, onChange: controllerOnChange, onBlur: controllerOnBlur, ...field } }) => (
-        <Autocomplete
-          {...autocompleteProps}
-          {...field}
-          value={getOption(autocompleteProps.options, field.value)}
-          onChange={(event, selectedOption, reason, details) => {
-            const typedSelectedOption = selectedOption as Option;
-            if (typedSelectedOption?.value) {
-              controllerOnChange(typedSelectedOption.value);
-            } else {
-              controllerOnChange(typedSelectedOption);
-            }
+        <div>
+          {/* encapsulated with an element such as div to vertical spacing delegated from parent */}
+          <Autocomplete
+            {...autocompleteProps}
+            {...field}
+            value={getOption(autocompleteProps.options, field.value)}
+            onChange={(event, selectedOption, reason, details) => {
+              const typedSelectedOption = selectedOption as Option;
+              if (typedSelectedOption?.value) {
+                controllerOnChange(typedSelectedOption.value);
+              } else {
+                controllerOnChange(typedSelectedOption);
+              }
 
-            onChange?.(event, selectedOption, reason, details);
-          }}
-          onBlur={(...args) => { controllerOnBlur(); onBlur?.(...args); }}
-          ref={ref}
-        />
+              onChange?.(event, selectedOption, reason, details);
+            }}
+            onBlur={(...args) => { controllerOnBlur(); onBlur?.(...args); }}
+            ref={ref}
+          />
+
+          <FormHelperText
+            variant="outlined"
+          >
+            {description}
+          </FormHelperText>
+        </div>
       )}
     />
   );