@openmrs/esm-implementer-tools-app 3.1.10-pre.92 → 3.1.12-pre.598

package/src/ui-editor/ui-editor.tsx

@@ -1,26 +1,31 @@
 import React from "react";
 import styles from "./styles.css";
+import Close16 from "@carbon/icons-react/es/close/16";
+import { useExtensionStore, useStore } from "@openmrs/esm-framework";
+import { Button } from "carbon-components-react";
 import { Portal } from "./portal";
 import { ExtensionOverlay } from "./extension-overlay.component";
-import { useExtensionStore } from "@openmrs/esm-framework";
+import { ImplementerToolsStore, implementerToolsStore } from "../store";
 
 export function UiEditor() {
   const { slots, extensions } = useExtensionStore();
+  const { isOpen: implementerToolsIsOpen } = useStore(implementerToolsStore);
 
   return (
     <>
+      {implementerToolsIsOpen ? null : <ExitButton />}
       {slots
         ? Object.entries(slots).map(([slotName, slotInfo]) =>
-            Object.entries(slotInfo.instances).map(
-              ([slotModuleName, slotInstance]) => (
-                <Portal
-                  key={`slot-overlay-${slotModuleName}-${slotName}`}
-                  el={slotInstance.domElement}
-                >
-                  <SlotOverlay slotName={slotName} />
-                </Portal>
-              )
-            )
+            Object.keys(slotInfo.instances).map((slotModuleName) => (
+              <Portal
+                key={`slot-overlay-${slotModuleName}-${slotName}`}
+                el={document.querySelector(
+                  `*[data-extension-slot-name="${slotName}"][data-extension-slot-module-name="${slotModuleName}"]`
+                )}
+              >
+                <SlotOverlay slotName={slotName} />
+              </Portal>
+            ))
           )
         : null}
       {extensions
@@ -28,16 +33,17 @@ export function UiEditor() {
             Object.entries(extensionInfo.instances).map(
               ([slotModuleName, bySlotName]) =>
                 Object.entries(bySlotName).map(
-                  ([slotName, extensionInstance]) => {
-                    return (
-                      <ExtensionOverlay
-                        extensionName={extensionName}
-                        slotModuleName={slotModuleName}
-                        slotName={slotName}
-                        domElement={extensionInstance.domElement}
-                      />
-                    );
-                  }
+                  ([slotName, extensionInstance]) => (
+                    <ExtensionOverlay
+                      key={slotName}
+                      extensionName={extensionName}
+                      slotModuleName={slotModuleName}
+                      slotName={slotName}
+                      domElement={document.querySelector(
+                        `*[data-extension-slot-name="${slotName}"][data-extension-slot-module-name="${slotModuleName}"] *[data-extension-id="${extensionInstance.id}"]`
+                      )}
+                    />
+                  )
                 )
             )
           )
@@ -54,3 +60,25 @@ export function SlotOverlay({ slotName }) {
     </>
   );
 }
+
+const actions = {
+  toggleIsUIEditorEnabled({ isUIEditorEnabled }: ImplementerToolsStore) {
+    return { isUIEditorEnabled: !isUIEditorEnabled };
+  },
+};
+
+export function ExitButton() {
+  const { toggleIsUIEditorEnabled } = useStore(implementerToolsStore, actions);
+  return (
+    <Button
+      className={styles.exitButton}
+      kind="danger"
+      size="sm"
+      renderIcon={Close16}
+      iconDescription="Exit UI Editor"
+      tooltipPosition="left"
+      onClick={toggleIsUIEditorEnabled}
+      hasIconOnly
+    />
+  );
+}

package/translations/en.json

@@ -0,0 +1,12 @@
+{
+  "backendModules": "Backend Modules",
+  "clearTemporaryConfig": "Clear Temporary Config",
+  "configuration": "Configuration",
+  "devConfig": "Dev Config",
+  "downloadTemporaryConfig": "Download Temporary Config",
+  "edit": "Edit",
+  "installedVersion": "Installed Version",
+  "missing": "Missing",
+  "requiredVersion": "Required Version",
+  "uiEditor": "UI Editor"
+}

package/translations/es.json

@@ -0,0 +1,13 @@
+{
+  "backendModules": "Módulos backend",
+  "clearTemporaryConfig": "Borrar configuración temporal",
+  "configuration": "Configuración",
+  "devConfig": "Configuración de desarrollo",
+  "downloadTemporaryConfig": "Descargar configuración temporal",
+  "edit": "Editar",
+  "installedVersion": "Versión instalada",
+  "missing": "Desaparecido",
+  "requiredVersion": "Versión requerida",
+  "uiEditor": "Editora de interfaz de usuario",
+  "implementerTools": "Herramientas de implementación"
+}

package/tsconfig.json

@@ -6,6 +6,7 @@
     "jsx": "react",
     "strictNullChecks": true,
     "moduleResolution": "node",
+    "skipLibCheck": true,
     "declaration": true,
     "declarationDir": "dist",
     "emitDeclarationOnly": true,

package/webpack.config.js

@@ -1,66 +1 @@
-const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
-const { resolve } = require("path");
-const { CleanWebpackPlugin } = require("clean-webpack-plugin");
-const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
-
-const { peerDependencies } = require("./package.json");
-
-module.exports = (env) => ({
-  entry: [
-    resolve(__dirname, "src/set-public-path.ts"),
-    resolve(__dirname, "src/index.ts"),
-  ],
-  output: {
-    filename: "openmrs-esm-implementer-tools-app.js",
-    path: resolve(__dirname, "dist"),
-    libraryTarget: "system",
-  },
-  devtool: "sourcemap",
-  module: {
-    rules: [
-      {
-        parser: {
-          system: false,
-        },
-      },
-      {
-        test: /\.m?(js|ts|tsx)$/,
-        exclude: /(node_modules|bower_components)/,
-        use: "babel-loader",
-      },
-      {
-        test: /node_modules\/.+\.css$/i,
-        use: ["style-loader", "css-loader"],
-      },
-      {
-        test: /\.css$/,
-        use: [
-          "style-loader",
-          {
-            loader: "css-loader",
-            options: {
-              modules: true,
-            },
-          },
-        ],
-      },
-    ],
-  },
-  resolve: {
-    extensions: [".ts", ".js", ".tsx", ".jsx"],
-  },
-  plugins: [
-    new CleanWebpackPlugin(),
-    new ForkTsCheckerWebpackPlugin(),
-    new BundleAnalyzerPlugin({
-      analyzerMode: env && env.analyze ? "static" : "disabled",
-    }),
-  ],
-  externals: Object.keys(peerDependencies),
-  devServer: {
-    disableHostCheck: true,
-    headers: {
-      "Access-Control-Allow-Origin": "*",
-    },
-  },
-});
+module.exports = require("openmrs/default-webpack-config");

package/__mocks__/openmrs-esm-framework.mock.tsx

@@ -1,142 +0,0 @@
-import React from "react";
-import createStore, { Store } from "unistore";
-
-interface StoreEntity {
-  value: Store<any>;
-  active: boolean;
-}
-
-export type MockedStore<T> = Store<T> & { resetMock: () => void };
-
-const initialStates: Record<string, any> = {};
-
-const availableStores: Record<string, StoreEntity> = {};
-
-export const mockStores = availableStores;
-
-export function createGlobalStore<TState>(
-  name: string,
-  initialState: TState
-): Store<TState> {
-  const available = availableStores[name];
-
-  if (available) {
-    if (available.active) {
-      console.error(
-        "Cannot override an existing store. Make sure that stores are only created once."
-      );
-    } else {
-      available.value.setState(initialState, true);
-    }
-
-    available.active = true;
-    return available.value;
-  } else {
-    const store = createStore(initialState);
-    initialStates[name] = initialState;
-
-    availableStores[name] = {
-      value: store,
-      active: true,
-    };
-
-    return instrumentedStore(name, store);
-  }
-}
-
-export function getGlobalStore<TState = any>(
-  name: string,
-  fallbackState?: TState
-): Store<TState> {
-  const available = availableStores[name];
-
-  if (!available) {
-    const store = createStore(fallbackState);
-    initialStates[name] = fallbackState;
-    availableStores[name] = {
-      value: store,
-      active: false,
-    };
-    return instrumentedStore(name, store);
-  }
-
-  return instrumentedStore(name, available.value);
-}
-
-function instrumentedStore<T>(name: string, store: Store<T>) {
-  return ({
-    getState: jest.spyOn(store, "getState"),
-    setState: jest.spyOn(store, "setState"),
-    subscribe: jest.spyOn(store, "subscribe"),
-    unsubscribe: jest.spyOn(store, "unsubscribe"),
-    resetMock: () => store.setState(initialStates[name]),
-  } as any) as MockedStore<T>;
-}
-
-export const configInternalStore = createGlobalStore("config-internal", {
-  devDefaultsAreOn: false,
-});
-
-export const implementerToolsConfigStore = createGlobalStore(
-  "implementer-tools-config",
-  {}
-);
-
-export const temporaryConfigStore = createGlobalStore("temporary-config", {});
-
-export enum Type {
-  Array = "Array",
-  Boolean = "Boolean",
-  ConceptUuid = "ConceptUuid",
-  Number = "Number",
-  Object = "Object",
-  String = "String",
-  UUID = "UUID",
-}
-
-export function openmrsFetch() {
-  return new Promise(() => {});
-}
-
-export const setIsUIEditorEnabled = (boolean): void => {};
-
-let state = { slots: {}, extensions: {} };
-
-export const extensionStore = {
-  getState: () => state,
-  setState: (val) => {
-    state = { ...state, ...val };
-  },
-  subscribe: (updateFcn) => {
-    updateFcn(state);
-    return () => {};
-  },
-  unsubscribe: () => {},
-};
-
-export const ComponentContext = React.createContext(null);
-
-export const openmrsComponentDecorator = jest
-  .fn()
-  .mockImplementation(() => (component) => component);
-
-export const UserHasAccess = jest.fn().mockImplementation((props: any) => {
-  return props.children;
-});
-
-export const createUseStore = (store: Store<any>) => (actions) => {
-  const state = store.getState();
-  return { ...state, ...actions };
-};
-
-export const useExtensionStore = (actions) => {
-  const state = extensionStore.getState();
-  return { ...state, ...actions };
-};
-
-export const useStore = (store: Store<any>, actions) => {
-  const state = store.getState();
-  return { ...state, ...actions };
-};
-
-export const showToast = jest.fn();