Merge ac109cb into 87fae50

openmrs · Oct 4, 2021 · 99dc5ed · 99dc5ed
2 parents 87fae50 + ac109cb
commit 99dc5ed
Showing 1 changed file with 23 additions and 16 deletions.
diff --git a/src/apps/concepts/components/ViewConceptsHeader.tsx b/src/apps/concepts/components/ViewConceptsHeader.tsx
@@ -10,18 +10,21 @@ import { getContainerIdFromUrl } from "../utils";
 import {
   Button,
   createStyles,
+  IconButton,
+  Input,
+  InputAdornment,
   makeStyles,
   Menu,
   MenuItem,
-  TextField,
   Theme
 } from "@material-ui/core";
 import {
   PREFERRED_SOURCES_VIEW_ONLY,
   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';
 
 interface Props {
@@ -93,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)}`
@@ -126,20 +130,23 @@ const ViewConceptsHeader: React.FC<Props> = ({
           open={Boolean(switchSourceAnchor)}
           onClose={handleSwitchSourceClose}
         >
-          <TextField 
-          multiline
-          className={classes.textField} 
-          InputProps={{
-            className: classes.underline
-          }} 
-            inputProps={{
-              className: classes.input
-            }}
-            value={
-              showSources ? "Choose a source/dictionary" : "Select a different source/dictionary"
-            }
-            onClick={() => setShowSources(!showSources)}
-          />
+        <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