Revert multi select

src/components/Dropdown/index.tsx

@@ -22,7 +22,6 @@ export interface DropdownProps {
     variant?: string;
     meta?: string;
     maxHeight?: string;
-    keepOpen?: boolean;
 }
 
 const KEYCODE_ESCAPE = 27;
@@ -37,7 +36,6 @@ const Dropdown: React.FC<DropdownProps> = ({
     variant,
     meta,
     maxHeight = '80vh',
-    keepOpen,
 }: DropdownProps): JSX.Element => {
     const [isOpen, setIsOpen] = useState(false);
     const containerRef = useRef<HTMLDivElement>(null);
@@ -125,9 +123,7 @@ const Dropdown: React.FC<DropdownProps> = ({
                                 <DropdownItem
                                     key={index}
                                     role="option"
-                                    onClick={
-                                        keepOpen ? undefined : toggleDropdown
-                                    }
+                                    onClick={toggleDropdown}
                                     tabIndex={0}
                                 >
                                     {item}

src/core/ProCoSysSettings.ts

@@ -240,6 +240,7 @@ class ProCoSysSettings {
             );
             throw error;
         }
+
         try {
             this.overrideFromLocalConfiguration();
         } catch (error) {

src/modules/Preservation/http/PreservationApiClient.ts

@@ -166,8 +166,8 @@ interface TagListFilter {
     journeyIds: string[];
     modeIds: string[];
     dueFilters: string[];
-    preservationStatus: string[];
-    actionStatus: string[];
+    preservationStatus: string | null;
+    actionStatus: string | null;
 }
 
 interface SavedScopeFilterResponse {
@@ -413,7 +413,6 @@ interface RequirementTypeFilterResponse {
 
 interface TagFunctionFilterResponse {
     code: string;
-    description: string;
 }
 
 interface TagFunctionResponse {

src/modules/Preservation/views/ScopeOverview/ScopeFilter/CheckboxFilter.style.ts

@@ -1,18 +1,5 @@
-import { Checkbox } from '@equinor/eds-core-react';
 import styled from 'styled-components';
 
 export const ExpandedContainer = styled.div`
     padding-left: calc(var(--grid-unit) * 2);
 `;
-
-export const ScopeFilterCheckbox = styled(Checkbox).withConfig({
-    displayName: 'scope-filter-item-',
-})`
-    display: flex;
-    height: 40px;
-    & > span:last-child {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-    }
-`;

src/modules/Preservation/views/ScopeOverview/ScopeFilter/CheckboxFilter.tsx

@@ -1,9 +1,11 @@
-import { KeyboardArrowDown, KeyboardArrowUp } from '@mui/icons-material';
-import EdsIcon from '@procosys/components/EdsIcon';
-import React, { ChangeEvent, useState } from 'react';
-import { ExpandedContainer, ScopeFilterCheckbox } from './CheckboxFilter.style';
-import { CheckboxFilterValue, TagListFilterParamType } from './ScopeFilter';
+import React, { useState } from 'react';
 import { Collapse, CollapseInfo } from './ScopeFilter.style';
+import { ExpandedContainer } from './CheckboxFilter.style';
+import { Typography } from '@equinor/eds-core-react';
+import Checkbox from '../../../../../components/Checkbox';
+import { CheckboxFilterValue, TagListFilterParamType } from './ScopeFilter';
+import EdsIcon from '@procosys/components/EdsIcon';
+import { KeyboardArrowDown, KeyboardArrowUp } from '@mui/icons-material';
 
 interface CheckboxFilterProps {
     title: string;
@@ -44,24 +46,25 @@ const CheckboxFilter = ({
                 <ExpandedContainer>
                     {filterValues.map((value) => {
                         return (
-                            <ScopeFilterCheckbox
-                                key={value.title}
+                            <Checkbox
+                                key={value.id}
                                 checked={itemsChecked.some((elementId) => {
                                     return (
                                         String(value.id) === String(elementId)
                                     );
                                 })}
-                                onChange={(
-                                    e: ChangeEvent<HTMLInputElement>
-                                ): void => {
+                                onChange={(checked: boolean): void => {
                                     onCheckboxFilterChange(
                                         tagListFilterParam,
                                         String(value.id),
-                                        e.target.checked
+                                        checked
                                     );
                                 }}
-                                label={value.title}
-                            ></ScopeFilterCheckbox>
+                            >
+                                <Typography variant="body_long">
+                                    {value.title}
+                                </Typography>
+                            </Checkbox>
                         );
                     })}
                 </ExpandedContainer>

src/modules/Preservation/views/ScopeOverview/ScopeFilter/MultiSelectFilter/MultiSelectFilter.style.ts

@@ -24,6 +24,12 @@ export const FilterContainer = styled.div`
     display: flex;
     flex-direction: column;
     margin: var(--grid-unit) calc(2 * var(--grid-unit));
+    button {
+        background-color: ${tokens.colors.ui.background__light.rgba};
+        color: ${tokens.colors.text.static_icons__tertiary.rgba};
+        border-bottom: 1px solid
+            ${tokens.colors.text.static_icons__tertiary.rgba};
+    }
 `;
 
 export const SelectedItem = styled.span`

src/modules/Preservation/views/ScopeOverview/ScopeFilter/MultiSelectFilter/MultiSelectFilter.tsx

@@ -1,14 +1,14 @@
-import { Autocomplete } from '@equinor/eds-core-react';
-import { KeyboardArrowDown, KeyboardArrowUp } from '@mui/icons-material';
-import EdsIcon from '@procosys/components/EdsIcon';
 import React, { useEffect, useState } from 'react';
+import Dropdown from '@procosys/components/Dropdown';
 import { Collapse, CollapseInfo } from '../ScopeFilter.style';
 import {
-    FilterContainer,
+    SelectedItemsContainer,
     Item,
     SelectedItem,
-    SelectedItemsContainer,
+    FilterContainer,
 } from './MultiSelectFilter.style';
+import EdsIcon from '@procosys/components/EdsIcon';
+import { KeyboardArrowUp, KeyboardArrowDown } from '@mui/icons-material';
 
 interface Item {
     title: string;
@@ -19,7 +19,7 @@ type MultiSelectProps = {
     items: Item[];
     headerLabel: string;
     inputLabel: string;
-    inputPlaceholder?: string;
+    inputPlaceholder: string;
     selectedItems: string[] | null;
     onChange: (selectedItems: Item[]) => void;
     icon: JSX.Element;
@@ -47,6 +47,18 @@ const MultiSelectFilter = ({
         setSelectedItemsState(selected);
     }, [selectedItems, items]);
 
+    const onSelect = (item: Item): void => {
+        if (
+            !selectedItemsState.find(
+                (selectedItem) => selectedItem.id === item.id
+            )
+        ) {
+            const newSelectedItems = [...selectedItemsState, item];
+            setSelectedItemsState(newSelectedItems);
+            onChange(newSelectedItems);
+        }
+    };
+
     const onDeselect = (item: Item): void => {
         const newSelectedItems = selectedItemsState.filter(
             (selectedItem) => selectedItem.id !== item.id
@@ -55,16 +67,27 @@ const MultiSelectFilter = ({
         onChange(newSelectedItems);
     };
 
-    const onSelectionChanged = ({ selectedItems }: any): void => {
-        setSelectedItemsState(selectedItems);
-        onChange(selectedItems);
-    };
-
-    const selectableItems = items.filter(
-        (itm) =>
-            filter === '' ||
-            itm.title.toLowerCase().includes(filter.toLowerCase())
-    );
+    const selectableItems = items
+        .filter(
+            (itm) =>
+                filter === '' ||
+                itm.title.toLowerCase().includes(filter.toLowerCase())
+        )
+        .map((itm) => {
+            const isSelected = selectedItemsState.some(
+                (selectedItem) => selectedItem.id === itm.id
+            );
+            return (
+                <Item key={itm.id} onClick={() => onSelect(itm)}>
+                    {isSelected ? (
+                        <EdsIcon name="checkbox" />
+                    ) : (
+                        <EdsIcon name="checkbox_outline" />
+                    )}
+                    {itm.title}
+                </Item>
+            );
+        });
 
     const selectedItemsComponents = selectedItemsState.map((item) => (
         <SelectedItem key={item.id} onClick={() => onDeselect(item)}>
@@ -76,7 +99,7 @@ const MultiSelectFilter = ({
         <>
             <Collapse
                 isExpanded={isExpanded}
-                onClick={(): void => setIsExpanded(!isExpanded)}
+                onClick={() => setIsExpanded(!isExpanded)}
                 data-testid="MultiSelectHeader"
                 filterActive={selectedItemsState.length > 0}
             >
@@ -86,15 +109,13 @@ const MultiSelectFilter = ({
             </Collapse>
             {isExpanded && (
                 <FilterContainer>
-                    <Autocomplete
+                    <Dropdown
+                        text={inputPlaceholder}
+                        onFilter={setFilter}
                         label={inputLabel}
-                        options={selectableItems}
-                        optionLabel={(option: Item): string => option.title}
-                        selectedOptions={selectedItemsState}
-                        onOptionsChange={onSelectionChanged}
-                        placeholder={inputPlaceholder}
-                        multiple
-                    ></Autocomplete>
+                    >
+                        {selectableItems}
+                    </Dropdown>
                     <SelectedItemsContainer>
                         {selectedItemsComponents}
                     </SelectedItemsContainer>

src/modules/Preservation/views/ScopeOverview/ScopeFilter/RadioGroupFilter.tsx

@@ -1,10 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import {
-    CollapseInfo,
-    Collapse,
-    ExpandedContainer,
-    ScopeFilterRadio,
-} from './ScopeFilter.style';
+import { CollapseInfo, Collapse, ExpandedContainer } from './ScopeFilter.style';
 import EdsIcon from '@procosys/components/EdsIcon';
 import { Radio } from '@equinor/eds-core-react';
 import { KeyboardArrowUp, KeyboardArrowDown } from '@mui/icons-material';
@@ -71,7 +66,7 @@ const RadioGroupFilter = ({
                     <UnstyledList>
                         {options.map((option) => (
                             <li key={option.value}>
-                                <ScopeFilterRadio
+                                <Radio
                                     label={option.title}
                                     value={option.value}
                                     checked={

src/modules/Preservation/views/ScopeOverview/ScopeFilter/ScopeFilter.style.ts

@@ -1,9 +1,6 @@
 import styled, { css } from 'styled-components';
 
 import { tokens } from '@equinor/eds-tokens';
-import { Typography } from '@equinor/eds-core-react';
-import { Checkbox } from '@equinor/eds-core-react';
-import { Radio } from '@equinor/eds-core-react';
 
 export const Container = styled.div`
     display: flex;
@@ -87,9 +84,5 @@ export const Link = styled.span<FilterProps>`
 `;
 
 export const ExpandedContainer = styled.div`
-    padding-left: calc(var(--grid-unit) * 2);
-`;
-
-export const ScopeFilterRadio = styled(Radio)`
-    height: 40px;
+    padding-left: calc(var(--grid-unit) * 4);
 `;