add button to fill last used items into new restriction

components/Flipper/FlipRestrictionList/NewRestriction/NewRestriction.module.css

@@ -1,3 +1,14 @@
-.newRestrictionSearchbar {
+.newRestrictionSearchbarContainer {
     margin-top: 20px;
 }
+
+.newRestrictionSearchbarContainer{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+}
+
+.multiSearch {
+    flex: 1;
+}

components/Flipper/FlipRestrictionList/NewRestriction/NewRestriction.tsx

@@ -29,6 +29,7 @@ function NewRestriction(props: Props) {
     })
     let [isFilterValid, setIsFilterValid] = useState(true)
     let [filters, setFilters] = useState<FilterOptions[]>([])
+    let [showFillLastUsedItems, setShowFillLastUsedItems] = useState(sessionStorage.getItem('lastUsedItemsForNewRestrictions') !== null)
 
     useEffect(() => {
         loadFilters()
@@ -68,6 +69,11 @@ function NewRestriction(props: Props) {
         }
     }
 
+    function fillLastUsedItems() {
+        let lastUsedItems = JSON.parse(sessionStorage.getItem('lastUsedItemsForNewRestrictions') || '[]')
+        setCreateState({ ...createState, selectedItems: lastUsedItems })
+    }
+
     let getButtonVariant = (range: string): string => {
         return range === createState.type ? 'primary' : 'secondary'
     }
@@ -100,8 +106,9 @@ function NewRestriction(props: Props) {
                     Whitelist
                 </ToggleButton>
             </ToggleButtonGroup>
-            <div className={styles.newRestrictionSearchbar}>
+            <div className={styles.newRestrictionSearchbarContainer}>
                 <MultiSearch
+                    className={styles.multiSearch}
                     onChange={items => {
                         setCreateState({
                             ...createState,
@@ -115,7 +122,7 @@ function NewRestriction(props: Props) {
                         })
                     }}
                     searchFunction={api.itemSearch}
-                    defaultSelected={createState.selectedItems?.map(item => {
+                    selected={createState.selectedItems?.map(item => {
                         return {
                             dataItem: {
                                 name: item.name,
@@ -126,6 +133,7 @@ function NewRestriction(props: Props) {
                         } as unknown as SearchResultItem
                     })}
                 />
+                {showFillLastUsedItems && <Button onClick={fillLastUsedItems}>Last used Items</Button>}
             </div>
             <ItemFilter
                 filters={filters}
@@ -150,6 +158,7 @@ function NewRestriction(props: Props) {
                 <Button
                     variant="success"
                     onClick={() => {
+                        sessionStorage.setItem('lastUsedItemsForNewRestrictions', JSON.stringify(createState.selectedItems))
                         props.onSaveRestrictions(
                             (createState.selectedItems || [null]).map(item => {
                                 return {

components/Search/MultiSearch.tsx

@@ -1,6 +1,6 @@
 'use client'
 import { forwardRef, Ref, useState } from 'react'
-import { AsyncTypeahead, Highlighter } from 'react-bootstrap-typeahead'
+import { AsyncTypeahead } from 'react-bootstrap-typeahead'
 import { v4 as generateUUID } from 'uuid'
 import Typeahead from 'react-bootstrap-typeahead/types/core/Typeahead'
 import api from '../../api/ApiHelper'
@@ -15,7 +15,8 @@ interface Props {
     placeholder?: string
     defaultValue?: string
     searchFunction?(searchText: string): Promise<SearchResultItem[]>
-    defaultSelected?: SearchResultItem[]
+    selected?: SearchResultItem[]
+    className?: string
 }
 
 export let MultiSearch = forwardRef((props: Props, ref: Ref<Typeahead>) => {
@@ -48,7 +49,7 @@ export let MultiSearch = forwardRef((props: Props, ref: Ref<Typeahead>) => {
     return (
         <AsyncTypeahead
             id={uuid}
-            className={styles.multiSearch}
+            className={`${styles.multiSearch} ${props.className}`}
             disabled={props.disabled}
             inputProps={{ className: styles.multiInputfield }}
             filterBy={() => true}
@@ -74,7 +75,7 @@ export let MultiSearch = forwardRef((props: Props, ref: Ref<Typeahead>) => {
             minLength={1}
             onSearch={handleSearch}
             defaultInputValue={props.defaultValue}
-            defaultSelected={props.defaultSelected}
+            selected={props.selected}
             options={results}
             placeholder={props.placeholder || 'Search item...'}
             onChange={_onChange}