ui: update savedsearch drop

frontend/app/components/shared/SavedSearch/SavedSearch.tsx

@@ -1,36 +1,36 @@
 import React, { useState } from "react";
-import { Dropdown, Button } from 'antd';
+import { Button } from 'antd';
 import { MoreOutlined } from "@ant-design/icons";
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
 import SaveSearchModal from "../SaveSearchModal/SaveSearchModal";
+import SavedSearchModal from "./components/SavedSearchModal";
+import { useModal } from 'App/components/Modal';
 
 function SavedSearch() {
   const [showModal, setShowModal] = useState(false);
   const { searchStore } = useStore();
   const savedSearch = searchStore.savedSearch;
 
-  const options = searchStore.list.map((item) => ({
-    key: item.searchId,
-    label: item.name,
-    onClick: () => searchStore.applySavedSearch(item)
-  }))
+  const { showModal: showListModal } = useModal();
 
   const toggleModal = () => {
     if (searchStore.instance.filters.length === 0) return;
     setShowModal(true);
   }
+
+  const toggleList = () => {
+    showListModal(<SavedSearchModal />, { right: true });
+  }
   return (
     <>
       <div style={{ display: 'inline-flex' }}>
         <Button onClick={toggleModal} disabled={searchStore.instance.filters.length === 0} style={{ borderRadius: '0.5rem 0 0 0.5rem', borderRight: 0 }}>
           {savedSearch.exists() ? 'Update' : 'Save'} Search
         </Button>
-        <Dropdown menu={{ items: options }} placement="bottomRight">
-          <Button style={{ borderRadius: '0 0.5rem 0.5rem 0' }}>
-            <MoreOutlined />
-          </Button>
-        </Dropdown>
+        <Button onClick={toggleList} style={{ borderRadius: '0 0.5rem 0.5rem 0' }}>
+          <MoreOutlined />
+        </Button>
       </div>
       {showModal && (
         <SaveSearchModal

frontend/app/components/shared/SavedSearch/components/SavedSearchModal/SavedSearchModal.tsx

@@ -27,13 +27,7 @@ function TooltipIcon(props: ITooltipIcon) {
   );
 }
 
-interface Props {
-  applySavedSearch: (item: SavedSearch) => void;
-  remove: (itemId: number) => void;
-  editSavedSearch: (item: SavedSearch) => void;
-}
-
-function SavedSearchModal(props: Props) {
+function SavedSearchModal() {
   const { hideModal } = useModal();
   const [showModal, setshowModal] = useState(false);
   const [filterQuery, setFilterQuery] = useState('');