From ac397b899f99827a4c999169b24484d1b74cdb99 Mon Sep 17 00:00:00 2001
From: jwnasambu <julietwamalwa@yahoo.com>
Date: Wed, 29 Sep 2021 18:35:44 +0300
Subject: [PATCH] OCLOMRS-1044:Bug Fix: Pick Concepts from Source and
 Dictionaries

---
 .../components/ViewConceptsHeader.tsx         | 53 ++++++++-----------
 1 file changed, 23 insertions(+), 30 deletions(-)

diff --git a/src/apps/concepts/components/ViewConceptsHeader.tsx b/src/apps/concepts/components/ViewConceptsHeader.tsx
index a46e6cb0b..5b02cb2fe 100644
--- a/src/apps/concepts/components/ViewConceptsHeader.tsx
+++ b/src/apps/concepts/components/ViewConceptsHeader.tsx
@@ -10,10 +10,12 @@ import { getContainerIdFromUrl } from "../utils";
 import {
   Button,
   createStyles,
+  IconButton,
+  Input,
+  InputAdornment,
   makeStyles,
   Menu,
   MenuItem,
-  TextField,
   Theme
 } from "@material-ui/core";
 import {
@@ -21,10 +23,9 @@ import {
   useAnchor
 } from "../../../utils";
 import { APISource } from "../../sources";
-import { AccountTreeOutlined, FolderOpen } from "@material-ui/icons";
+import { AccountTreeOutlined, FolderOpen  } from "@material-ui/icons";
+import { Search as SearchIcon } from "@material-ui/icons";
 import { APIDictionary } from '../../dictionaries/types';
-import Stack from '@mui/material/Stack'
-import { Autocomplete } from "@material-ui/lab";
 
 interface Props {
   containerType: string;
@@ -95,6 +96,7 @@ const ViewConceptsHeader: React.FC<Props> = ({
     handleSwitchSourceClose
   ] = useAnchor();
 
+  // const [q, setQ] = useState(initialQ);
   const getTitleBasedOnContainerType = () => {
     return isAddToDictionary
       ? `Import existing concept from ${getContainerIdFromUrl(containerUrl)}`
@@ -128,32 +130,23 @@ const ViewConceptsHeader: React.FC<Props> = ({
           open={Boolean(switchSourceAnchor)}
           onClose={handleSwitchSourceClose}
         >
-        <Button 
-           variant="text" 
-           onClick={() => setShowSources(!showSources)}
-          > 
-             {showSources ? "Select a recommended source" : "Select an alternative source"}
-
-          <Stack spacing={2} sx={{ width: 300 }}>
-          <Autocomplete
-            Choose an alternative source
-            id="Select-a-recommended-source"
-            disableClearable
-            options={dictionaries.map((option: { name: url; }) => option.Sources)}
-            renderInput={(params) => (
-          <TextField
-            {...params}
-            label="Search input"
-            InputProps={{
-              ...params.InputProps,
-              type: 'search',
-            }}
-          />
-        )}
-      />
-    </Stack>
-  )
-        </Button>
+        <Input
+          color="secondary"
+          type="search"
+          fullWidth
+          placeholder= {showSources ? "Select a recommended source" : "Select an alternative source"}
+          data-testid="searchInput"
+          endAdornment={
+            <InputAdornment position="end">
+              <IconButton
+                onClick={() => setShowSources(!showSources)}
+                data-testid="searchButton"
+              >
+                <SearchIcon />
+              </IconButton>
+            </InputAdornment>
+          }
+        />
             {preferredSources?.map(({ name, url }) => (
             <MenuItem
               // replace because we want to keep the back button useful