MAT-7578: Add search icon functionality

MeasureAuthoringTool · Sep 20, 2024 · 113b0eb · 113b0eb
1 parent ce0ce37
commit 113b0eb
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 8 deletions.
diff --git a/src/components/cqlLibraryEditor/CqlLibraryEditor.tsx b/src/components/cqlLibraryEditor/CqlLibraryEditor.tsx
@@ -4,6 +4,9 @@ import { EditorAnnotation, MadieEditor } from "@madie/madie-editor";
 import * as _ from "lodash";
 import { ElmTranslationError } from "./editorUtil";
 import tw from "twin.macro";
+import { IconButton } from "@mui/material";
+import Search from "@mui/icons-material/Search";
+
 const MessageText = tw.p`text-sm font-medium`;
 const SuccessText = tw(MessageText)`text-green-800`;
 const ErrorText = tw(MessageText)`text-red-800`;

diff --git a/src/components/editCqlLibrary/EditCQLLibrary.scss b/src/components/editCqlLibrary/EditCQLLibrary.scss
@@ -10,6 +10,15 @@
   border-color: #ededed;
   background-color: white;
 
+  #header-editor-row {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+    height: 48px;
+    justify-content: flex-end;
+    background: #ededed;
+  }
+
   .flow-container {
     display: flex;
     flex-grow: 1;

diff --git a/src/components/editCqlLibrary/EditCqlLibrary.tsx b/src/components/editCqlLibrary/EditCqlLibrary.tsx
@@ -37,9 +37,15 @@ import {
 } from "@madie/madie-design-system/dist/react";
 import NavTabs from "./NavTabs";
 import "./EditCQLLibrary.scss";
-import { Checkbox, FormControlLabel, Typography } from "@mui/material";
+import {
+  Checkbox,
+  IconButton,
+  FormControlLabel,
+  Typography,
+} from "@mui/material";
 import TextArea from "../common/TextArea";
 import StatusHandler from "./statusHandler/StatusHandler";
+import Search from "@mui/icons-material/Search";
 
 const EditCqlLibrary = () => {
   useDocumentTitle("MADiE Edit Library");
@@ -334,24 +340,39 @@ const EditCqlLibrary = () => {
   const handleTabChange = (event, nextTab) => {
     history.push(`?tab=${nextTab}`);
   };
-
+  const toggleSearch = () => {
+    const event = new CustomEvent("toggleEditorSearchBox");
+    window.dispatchEvent(event);
+  };
   return (
     <form
       id="edit-library-page"
       data-testId="edit-library-form"
       onSubmit={formik.handleSubmit}
     >
+      <StatusHandler
+        error={error}
+        errorMessage={errorMessage}
+        success={success}
+        outboundAnnotations={outboundAnnotations}
+      />
       <div className="flow-container">
         <div id="left-panel">
           <div tw="flex-grow " data-testid="cql-library-editor-component">
             {!activeSpinner && (
               <>
-                <StatusHandler
-                  error={error}
-                  errorMessage={errorMessage}
-                  success={success}
-                  outboundAnnotations={outboundAnnotations}
-                />
+                <div id="header-editor-row">
+                  <IconButton
+                    data-testid="editor-search-button"
+                    aria-label="search button"
+                    style={{
+                      color: "#0073c8",
+                    }}
+                    onClick={toggleSearch}
+                  >
+                    <Search />
+                  </IconButton>
+                </div>
                 <CqlLibraryEditor
                   value={formik.values.cql}
                   onChange={onChange}