From 7bb2a77112ed3d85955309b73c4c773ac7f495f6 Mon Sep 17 00:00:00 2001
From: jwnasambu <julietwamalwa@yahoo.com>
Date: Tue, 5 Oct 2021 15:00:16 +0300
Subject: [PATCH] OCLOMRS-1044:Bug Fix: Pick Concepts from Source and
 Dictionaries

---
 .../components/ViewConceptsHeader.tsx         | 32 ++++++++++++-------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/apps/concepts/components/ViewConceptsHeader.tsx b/src/apps/concepts/components/ViewConceptsHeader.tsx
index f4317731c..3a0dd0381 100644
--- a/src/apps/concepts/components/ViewConceptsHeader.tsx
+++ b/src/apps/concepts/components/ViewConceptsHeader.tsx
@@ -82,6 +82,7 @@ const ViewConceptsHeader: React.FC<Props> = ({
   // toggleShowVerified
 }) => {
   const [showSources, setShowSources] = useState(false);
+  const [search, setSearch] = useState("");
   const [preferredSources, setPreferredSources] = useState< { name: string; url: string }[] >();
   useEffect(() => {
   const defaultSources = Object.entries( PREFERRED_SOURCES_VIEW_ONLY).map(([key, value]) => ({ name: key, url: value }));
@@ -92,6 +93,9 @@ const ViewConceptsHeader: React.FC<Props> = ({
         setPreferredSources(allSources);
       } else setPreferredSources(defaultSources);
     }, [showSources, sources, dictionaries]);
+    // const handleSearch = (event) => {
+    //   setSearch(event.target.value)
+    // }
 
   const classes = useStyles();
   const isSourceContainer = containerType === SOURCE_CONTAINER;
@@ -138,29 +142,35 @@ const ViewConceptsHeader: React.FC<Props> = ({
         container
           // eslint-disable-next-line react/jsx-no-comment-textnodes
           direction="column">
-          <Button 
-           variant="text" 
-           onClick={() => setShowSources(!showSources)}
-          > 
-             {/* {showSources ? "Select a recommended source" : "Select an alternative source"} */}
-          </Button> 
-        <Input
-          color="secondary"
+          {showSources?  
+          <Input
+          color="primary"
           type="search"
           fullWidth
           placeholder= {"Select an alternative source"}
-          //data-testid="switch-source"
+          value={search}
+          onChange = {event => setSearch(event.target.value)}
+          data-testid="switch-source"
           endAdornment={
             <InputAdornment position="end">
               <IconButton
-                onClick={() => setShowSources(!showSources)}
+              onClick={() => setShowSources(!showSources)}
                 data-testid="searchButton"
               >
                 <SearchIcon />
               </IconButton>
             </InputAdornment>
           }
-        />
+        /> :
+          <Button 
+           variant="text" 
+           onClick={() => setShowSources(!showSources)}
+          > 
+          Select a recommended source
+             {/* {showSources ? "Select a recommended source" : "Select an alternative source"} */}
+          </Button> 
+        }
+      
         {/* <FormControlLabel
         control={
           <Switch