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>
       )}
     />
   );

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

@@ -75,16 +75,16 @@ export default function InputCreator(props: InputCreatorProps): React.ReactEleme
         name={computedName}
         fullWidth
         disablePortal
-        disableClearable={true}
+        disableClearable={required}
         options={options}
         renderInput={(params) => <MuiTextField {...params} label={label} />}
         value={getOption(options, value)}
         onChange={console.log}
+        description={description}
       />
     );
   }
 
-
   if (type === 'string') {
     if (variables) {
       return (

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

@@ -4,7 +4,7 @@ import Chip from '@mui/material/Chip';
 import Popper from '@mui/material/Popper';
 import InputLabel from '@mui/material/InputLabel';
 import FormHelperText from '@mui/material/FormHelperText';
-import { Controller, Control, FieldValues, useFormContext } from 'react-hook-form';
+import { Controller, useFormContext } from 'react-hook-form';
 import { Editor, Transforms, Range, createEditor } from 'slate';
 import {
   Slate,