Frontend: added ability to set custom resource (for using wildcard)

Author: eko

Dockerfile.standalone

@@ -37,7 +37,7 @@ FROM nginx:1.23-alpine
 
 ARG GRPC_SERVER_ADDR=:8081
 ARG HTTP_SERVER_ADDR=:8080
-ARG NGINX_VHOST=./frontend/.docker/vhost.demo.conf
+ARG NGINX_VHOST=./frontend/.docker/vhost.conf
 
 ENV GRPC_SERVER_ADDR=$GRPC_SERVER_ADDR
 ENV HTTP_SERVER_ADDR=$HTTP_SERVER_ADDR

frontend/src/component/MultipleAutocompleteInput.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { InputAdornment, SxProps } from '@mui/material';
+import { FilterOptionsState, InputAdornment, SxProps } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import CloseIcon from '@mui/icons-material/Close';
 import SearchIcon from '@mui/icons-material/Search';
 import Autocomplete, {
   AutocompleteCloseReason,
+  createFilterOptions,
 } from '@mui/material/Autocomplete';
 import Box from '@mui/material/Box';
 import { Button, List, ListItem, ListItemText, TextField } from '@mui/material';
@@ -22,6 +23,7 @@ type SetValueFunc = (items: ItemType[]) => void;
 
 type AutocompleteInputProps = {
   disabled?: boolean
+  allowAdd?: boolean
   defaultValues?: ItemType[]
   errorField?: any
   fetcher: FetcherFunc
@@ -34,6 +36,7 @@ type AutocompleteInputProps = {
 
 export default function MultipleAutocompleteInput({
   disabled,
+  allowAdd,
   defaultValues,
   errorField,
   fetcher,
@@ -89,16 +92,37 @@ export default function MultipleAutocompleteInput({
     setItems(defaultValues);
   }, [defaultValues]);
 
+  const filter = createFilterOptions<ItemType>();
+
+  const filterOptions = (options: ItemType[], params: FilterOptionsState<ItemType>) => {
+    const filtered = filter(options, params);
+
+    const { inputValue } = params;
+    const isExisting = options.some((option) => inputValue === option.id);
+    if (inputValue !== '' && !isExisting) {
+      filtered.push({
+        id: inputValue,
+        label: inputValue,
+      });
+    }
+
+    return filtered;
+  };
+
   return (
     <div style={style}>
       <Autocomplete
         disabled={disabled}
         multiple
         openOnFocus
+        freeSolo={allowAdd}
+        selectOnFocus
+        clearOnBlur
         onClose={handleOnClose}
         value={items}
         onChange={handleOnChange}
         disableCloseOnSelect
+        filterOptions={allowAdd ? filterOptions : undefined}
         isOptionEqualToValue={(option: ItemType, value: ItemType): boolean => {
           return option.id === value.id;
         }}
@@ -124,7 +148,7 @@ export default function MultipleAutocompleteInput({
           </li>
         )}
         options={[...listItems]}
-        getOptionLabel={(option) => option.label}
+        getOptionLabel={(option) => typeof(option) === 'string' ? option : option.label}
         onFocus={handleOnKeyUp}
         onKeyUp={handleOnKeyUp}
         renderInput={(params) => (

frontend/src/component/SingleAutocompleteInput.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { InputAdornment, SxProps } from '@mui/material';
+import { InputAdornment, SxProps, FilterOptionsState } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import SearchIcon from '@mui/icons-material/Search';
 import Autocomplete, {
   AutocompleteCloseReason,
+  createFilterOptions,
 } from '@mui/material/Autocomplete';
 import Box from '@mui/material/Box';
 import { TextField } from '@mui/material';
@@ -14,6 +15,7 @@ type SetValueFunc = (items: ItemType) => void;
 
 type AutocompleteInputProps = {
   disabled?: boolean
+  allowAdd?: boolean
   defaultValue?: ItemType
   errorField?: any
   fetcher: FetcherFunc
@@ -26,6 +28,7 @@ type AutocompleteInputProps = {
 
 export default function SingleAutocompleteInput({
   disabled,
+  allowAdd,
   defaultValue,
   errorField,
   fetcher,
@@ -57,18 +60,39 @@ export default function SingleAutocompleteInput({
     }
   };
 
-  const handleOnChange = (event: React.SyntheticEvent, newItem: ItemType | null, reason: string) => {
+  const handleOnChange = (event: React.SyntheticEvent, newItem: NonNullable<string | ItemType>, reason: string) => {
     if (event.type === 'keydown' &&
       (event as React.KeyboardEvent).key === 'Backspace' &&
       reason === 'removeOption') {
       return;
     }
 
+    if (typeof(newItem) === 'string') {
+      return;
+    }
+
     if (newItem !== null) {
         setValue(newItem);
     }
   };
 
+  const filter = createFilterOptions<ItemType>();
+
+  const filterOptions = (options: ItemType[], params: FilterOptionsState<ItemType>) => {
+    const filtered = filter(options, params);
+
+    const { inputValue } = params;
+    const isExisting = options.some((option) => inputValue === option.id);
+    if (inputValue !== '' && !isExisting) {
+      filtered.push({
+        id: inputValue,
+        label: inputValue,
+      });
+    }
+
+    return filtered;
+  };
+
   React.useEffect(() => {
     if (defaultValue === undefined) {
       return;
@@ -82,10 +106,14 @@ export default function SingleAutocompleteInput({
       <Autocomplete
         disabled={disabled}
         openOnFocus
+        freeSolo={allowAdd}
+        selectOnFocus
+        clearOnBlur
         onClose={handleOnClose}
         onChange={handleOnChange}
         disableClearable
         defaultValue={defaultValue}
+        filterOptions={allowAdd ? filterOptions : undefined}
         isOptionEqualToValue={(option: ItemType, value: ItemType): boolean => {
           return option.id === value.id;
         }}
@@ -106,7 +134,7 @@ export default function SingleAutocompleteInput({
           </li>
         )}
         options={[...listItems]}
-        getOptionLabel={(option) => option.label}
+        getOptionLabel={(option) => typeof(option) === 'string' ? option : option.label}
         onFocus={handleOnKeyUp}
         onKeyUp={handleOnKeyUp}
         renderInput={(params) => (

frontend/src/page/check/component/Check.tsx

@@ -128,6 +128,7 @@ export default function Check() {
               <Grid container spacing={2}>
                 <Grid item xs={12} md={12}>
                   <SingleAutocompleteInput
+                    allowAdd
                     label='Resource'
                     placeholder='Search for a resource...'
                     defaultValue={defaultValues?.resource as any}

frontend/src/page/policies/component/PolicyCreateOrEdit.tsx

@@ -173,6 +173,7 @@ export default function PolicyCreateOrEdit() {
           <Grid container spacing={2}>
             <Grid item xs={12} md={6}>
               <MultipleAutocompleteInput
+                allowAdd
                 label='Associated resources'
                 placeholder='Search for a resource...'
                 defaultValues={defaultValues?.resources as any}