Global button for opening Implementer Tools (#482)

* Added global implementer tools button

* Shifted the global implementer tools button to the bottom

packages/apps/esm-implementer-tools-app/src/global-implementer-tools-button.test.tsx

@@ -0,0 +1,13 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import React from "react";
+import "@testing-library/jest-dom";
+import GlobalImplementerToolsButton from "./global-implementer-tools.component";
+
+describe("Testing the global implementer tools button", () => {
+  afterEach(cleanup);
+  it("should render global Implementer tools", () => {
+    render(<GlobalImplementerToolsButton />);
+    const button = screen.getByTestId("globalImplementerToolsButton");
+    expect(button).toBeInTheDocument();
+  });
+});

packages/apps/esm-implementer-tools-app/src/global-implementer-tools.component.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import ChevronUp from "@carbon/icons-react/es/chevron--up/16";
+import ChevronDown from "@carbon/icons-react/es/chevron--down/16";
+import { UserHasAccess, useStore } from "@openmrs/esm-framework";
+import { implementerToolsStore, togglePopup } from "./store";
+import styles from "./implementer-tools.styles.scss";
+
+const GlobalImplementerToolsButton: React.FC = () => {
+  const { t } = useTranslation();
+  const { isOpen } = useStore(implementerToolsStore);
+
+  return (
+    <UserHasAccess privilege="coreapps.systemAdministration">
+      <div
+        className={styles.chevronImplementerToolsButton}
+        data-testid="globalImplementerToolsButton"
+      >
+        <div onClick={togglePopup} role="button" tabIndex={0}>
+          {isOpen ? <ChevronDown /> : <ChevronUp />}
+        </div>
+      </div>
+    </UserHasAccess>
+  );
+};
+
+export default GlobalImplementerToolsButton;

packages/apps/esm-implementer-tools-app/src/implementer-tools.styles.scss

@@ -17,3 +17,25 @@
 .toolStyles {
   background-color: transparent;
 }
+
+// Chevron button - implementer-tools component
+
+.chevronImplementerToolsButton {
+  position: fixed;
+  bottom: 0;
+  left: calc(50vw - $spacing-05);
+  z-index: 9999;
+
+  div {
+    background-color: $ui-02;
+    width: $spacing-07;
+    display: flex;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.1s ease-in-out;
+  }
+
+  div:hover {
+    padding: $spacing-03 0;
+  }
+}

packages/apps/esm-implementer-tools-app/src/index.ts

@@ -16,6 +16,13 @@ function setupOpenMRS() {
           options
         ),
       },
+      {
+        route: () => true,
+        load: getAsyncLifecycle(
+          () => import("./global-implementer-tools.component"),
+          options
+        ),
+      },
     ],
     extensions: [
       {