From 113b0eb709d2b947944961fc086a6033a2a9d092 Mon Sep 17 00:00:00 2001
From: mcmcphillips <matt.mcphillips@icf.com>
Date: Fri, 20 Sep 2024 11:56:13 -0700
Subject: [PATCH] MAT-7578: Add search icon functionality

---
 .../cqlLibraryEditor/CqlLibraryEditor.tsx     |  3 ++
 .../editCqlLibrary/EditCQLLibrary.scss        |  9 +++++
 .../editCqlLibrary/EditCqlLibrary.tsx         | 37 +++++++++++++++----
 3 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/src/components/cqlLibraryEditor/CqlLibraryEditor.tsx b/src/components/cqlLibraryEditor/CqlLibraryEditor.tsx
index e1fcae8..1f1c680 100644
--- 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
index ddd0336..1a47fc7 100644
--- 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
index 1f01530..cd433c9 100644
--- 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}