(fix) O3-3890 Help menu (and menu items) should use a standard Carbon…

.tx/config

@@ -1,39 +1,39 @@
 [main]
 host = https://www.transifex.com
 
-[o:openmrs:p:openmrs-esm-core:r:esm-implementer-tools-app]
+[o:openmrs:p:openmrs3:r:esm-implementer-tools-app]
 file_filter            = packages/apps/esm-implementer-tools-app/translations/<lang>.json
 source_file            = packages/apps/esm-implementer-tools-app/translations/en.json
 source_lang            = en
 type                   = KEYVALUEJSON
 replace_edited_strings = false
 keep_translations      = false
 
-[o:openmrs:p:openmrs-esm-core:r:esm-login-app]
+[o:openmrs:p:openmrs3:r:esm-login-app]
 file_filter            = packages/apps/esm-login-app/translations/<lang>.json
 source_file            = packages/apps/esm-login-app/translations/en.json
 source_lang            = en
 type                   = KEYVALUEJSON
 replace_edited_strings = false
 keep_translations      = false
 
-[o:openmrs:p:openmrs-esm-core:r:esm-offline-tools-app]
+[o:openmrs:p:openmrs3:r:esm-offline-tools-app]
 file_filter            = packages/apps/esm-offline-tools-app/translations/<lang>.json
 source_file            = packages/apps/esm-offline-tools-app/translations/en.json
 source_lang            = en
 type                   = KEYVALUEJSON
 replace_edited_strings = false
 keep_translations      = false
 
-[o:openmrs:p:openmrs-esm-core:r:esm-primary-navigation-app]
+[o:openmrs:p:openmrs3:r:esm-primary-navigation-app]
 file_filter            = packages/apps/esm-primary-navigation-app/translations/<lang>.json
 source_file            = packages/apps/esm-primary-navigation-app/translations/en.json
 source_lang            = en
 type                   = KEYVALUEJSON
 replace_edited_strings = false
 keep_translations      = false
 
-[o:openmrs:p:openmrs-esm-core:r:esm-translations]
+[o:openmrs:p:openmrs3:r:esm-translations]
 file_filter            = packages/framework/esm-translations/translations/<lang>.json
 source_file            = packages/framework/esm-translations/translations/en.json
 source_lang            = en

packages/apps/esm-help-menu-app/src/help-menu/components/contact-us.component.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import styles from './styles.scss';
-import { ArrowUpRight } from '@carbon/react/icons';
+import { ArrowUpRight } from '@carbon/react/icons'
 import { Link } from '@carbon/react';
 
 const ContactUs = () => {
   const { t } = useTranslation();
   return (
     <Link
       className={styles.helpButton}
+      style={{ textDecoration: 'none' }}
       href="https://talk.openmrs.org"
       rel="noopener noreferrer"
       renderIcon={ArrowUpRight}

packages/apps/esm-help-menu-app/src/help-menu/components/docs.component.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import styles from './styles.scss';
-import { ArrowUpRight } from '@carbon/react/icons';
+import { ArrowUpRight } from '@carbon/react/icons'
 import { Link } from '@carbon/react';
 
 const Docs = () => {
   const { t } = useTranslation();
   return (
     <Link
       className={styles.helpButton}
+      style={{ textDecoration: 'none' }}
       href="https://o3-docs.openmrs.org"
       rel="noopener noreferrer"
       renderIcon={ArrowUpRight}

packages/apps/esm-help-menu-app/src/help-menu/components/release-notes.component.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import styles from './styles.scss';
-import { ArrowUpRight } from '@carbon/react/icons';
+import { ArrowUpRight } from '@carbon/react/icons'
 import { Link } from '@carbon/react';
 
 const ReleaseNotes = () => {
@@ -10,6 +10,7 @@ const ReleaseNotes = () => {
   return (
     <Link
       className={styles.helpButton}
+      style={{ textDecoration: 'none' }}
       href="https://o3-docs.openmrs.org/docs/changelog"
       rel="noopener noreferrer"
       renderIcon={ArrowUpRight}

packages/apps/esm-help-menu-app/src/help-menu/components/styles.scss

@@ -1,13 +1,19 @@
 @use '@carbon/layout';
 @use '@carbon/type';
+@use '@carbon/colors';
 @import '~@openmrs/esm-styleguide/src/vars';
 
 .helpButton {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding: layout.$spacing-03;
   color: black !important;
   &:focus {
     outline: none;
   }
 }
+
+.helpButton:hover {
+  background: colors.$gray-10-hover;
+}

packages/apps/esm-help-menu-app/src/help-menu/help-popup.component.tsx

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
-import styles from './help-popup.styles.scss';
+import React from 'react';
 import { ExtensionSlot } from '@openmrs/esm-framework';
+import styles from './help-popup.styles.scss';
 
 export default function HelpMenuPopup() {
   return (

packages/apps/esm-help-menu-app/src/help-menu/help-popup.styles.scss

@@ -7,7 +7,7 @@
   flex: auto;
   bottom: 2rem;
   right: 3rem;
-  width: 11rem;
+  width: 12rem;
   z-index: 8000;
   background-color: $ui-02;
   gap: spacing.$spacing-05;
@@ -22,10 +22,8 @@
 
 .helpextension {
   margin: spacing.$spacing-04;
-  padding: spacing.$spacing-01;
   cursor: pointer;
   text-align: left;
   display: flex;
   flex-direction: column;
-  gap: spacing.$spacing-05;
 }

packages/apps/esm-help-menu-app/src/help-menu/help.component.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useEffect, useRef } from 'react';
 import classNames from 'classnames';
+import { Help } from '@carbon/react/icons';
 import HelpMenuPopup from './help-popup.component';
 import styles from './help.styles.scss';
-import { Help } from '@carbon/react/icons';
 
 export default function HelpMenu() {
   const [helpMenuOpen, setHelpMenuOpen] = useState(false);
@@ -14,7 +14,7 @@ export default function HelpMenu() {
   };
 
   useEffect(() => {
-    const handleClickOutside = (event) => {
+    const handleClickOutside = (event: MouseEvent) => {
       if (
         helpMenuButtonRef.current &&
         !helpMenuButtonRef.current.contains(event.target) &&
@@ -24,12 +24,14 @@ export default function HelpMenu() {
         setHelpMenuOpen(false);
       }
     };
-    document.addEventListener('click', handleClickOutside);
 
+    window.addEventListener(`mousedown`, handleClickOutside);
+    window.addEventListener(`touchstart`, handleClickOutside);
     return () => {
-      document.removeEventListener('click', handleClickOutside);
+      window.removeEventListener(`mousedown`, handleClickOutside);
+      window.removeEventListener(`touchstart`, handleClickOutside);
     };
-  }, [helpMenuOpen]);
+  }, []);
 
   return (
     <>

packages/apps/esm-help-menu-app/src/help-menu/help.styles.scss

@@ -1,9 +1,12 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+
 .helpMenuButton {
   z-index: 7900;
   background-color: white;
   height: 2.5rem !important;
   width: 2.5rem !important;
-  bottom: 1rem;
+  bottom: layout.$spacing-05;
   position: fixed;
   display: flex;
   justify-content: center;
@@ -13,5 +16,10 @@
   box-shadow:
     0 1px 3px rgba(0, 0, 0, 0.1),
     0 1px 2px -1px rgba(0, 0, 0, 0.1);
-  border-radius: 2rem;
+  border-radius: layout.$spacing-03;
+
+  &:hover {
+    background-color: colors.$gray-20;
+    cursor: pointer;
+  }
 }

packages/apps/esm-help-menu-app/src/root.component.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Root from './root.component';
 import { render } from '@testing-library/react';
+import Root from './root.component';
 
 describe(`<Root />`, () => {
   it(`renders without dying`, () => {

packages/apps/esm-implementer-tools-app/jest.config.js

@@ -7,7 +7,8 @@ module.exports = {
   },
   setupFilesAfterEnv: ['<rootDir>/setup-tests.ts'],
   moduleNameMapper: {
-    'lodash-es': 'lodash',
+    '^lodash-es$': 'lodash',
+    '^lodash-es/(.*)$': 'lodash/$1',
     '\\.(s?css)$': 'identity-obj-proxy',
     '@openmrs/esm-framework': '@openmrs/esm-framework/mock.tsx',
     dexie: require.resolve('dexie'),

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

@@ -9,7 +9,6 @@ import { useConceptLookup, useGetConceptByUuid } from './interactive-editor/valu
 const mockUseConceptLookup = useConceptLookup as jest.Mock;
 const mockUseGetConceptByUuid = useGetConceptByUuid as jest.Mock;
 
-jest.mock('lodash-es/debounce', () => jest.fn((fn) => fn));
 jest.mock('./interactive-editor/value-editors/concept-search.resource', () => ({
   useConceptLookup: jest.fn().mockImplementation(() => ({
     concepts: [],

packages/apps/esm-implementer-tools-app/translations/am.json

@@ -1,28 +1,30 @@
 {
   "activeItemSourceText": "The current value comes from ",
-  "backendModules": "Backend Modules",
+  "backendModules": "Backend modules",
   "checkImplementerToolsMessage": "Check the Backend Modules tab in the Implementer Tools for more details",
-  "clearConfig": "Clear Local Config",
+  "clearConfig": "Clear local config",
+  "close": "Close",
   "configuration": "Configuration",
   "description": "Description",
-  "downloadConfig": "Download Config",
+  "downloadConfig": "Download config",
   "edit": "Edit",
   "editValueButtonText": "Edit",
   "enabled": "Enabled",
   "extensions": "Extensions",
-  "featureFlag": "Feature Flag",
-  "featureFlags": "Feature Flags",
-  "frontendModules": "Frontend Modules",
-  "installedVersion": "Installed Version",
+  "featureFlag": "Feature flag",
+  "featureFlags": "Feature flags",
+  "frontendModules": "Frontend modules",
+  "installedVersion": "Installed version",
   "itemDescriptionSourceDefaultText": "The current value is the default.",
-  "jsonEditor": "JSON Editor",
+  "jsonEditor": "JSON editor",
   "missing": "Missing",
-  "moduleName": "Module Name",
+  "moduleName": "Module name",
   "modulesWithMissingDependenciesWarning": "Some modules have unresolved backend dependencies",
   "requiredVersion": "Required Version",
   "resetToDefaultValueButtonText": "Reset to default",
-  "uiEditor": "UI Editor",
+  "uiEditor": "UI editor",
   "unknownVersion": "unknown",
+  "updateConfig": "Update config",
   "value": "Value",
   "viewModules": "View modules"
 }

packages/apps/esm-implementer-tools-app/translations/ar.json

@@ -3,6 +3,7 @@
   "backendModules": "وحدات الخلفية",
   "checkImplementerToolsMessage": "تحقق من علامة التبويب وحدات الخلفية في أدوات المنفذ لمزيد من التفاصيل",
   "clearConfig": "مسح التكوين المحلي",
+  "close": "Close",
   "configuration": "تكوين",
   "description": "وصف",
   "downloadConfig": "تحميل التكوين",
@@ -23,6 +24,7 @@
   "resetToDefaultValueButtonText": "إعادة تعيين إلى القيمة الافتراضية",
   "uiEditor": "محرر الواجهة",
   "unknownVersion": "غير معروف",
+  "updateConfig": "Update config",
   "value": "قيمة",
   "viewModules": "عرض الوحدات"
 }

packages/apps/esm-implementer-tools-app/translations/de.json

@@ -0,0 +1,30 @@
+{
+  "activeItemSourceText": "The current value comes from ",
+  "backendModules": "Backend modules",
+  "checkImplementerToolsMessage": "Check the Backend Modules tab in the Implementer Tools for more details",
+  "clearConfig": "Clear local config",
+  "close": "Close",
+  "configuration": "Configuration",
+  "description": "Description",
+  "downloadConfig": "Download config",
+  "edit": "Edit",
+  "editValueButtonText": "Edit",
+  "enabled": "Enabled",
+  "extensions": "Extensions",
+  "featureFlag": "Feature flag",
+  "featureFlags": "Feature flags",
+  "frontendModules": "Frontend modules",
+  "installedVersion": "Installed version",
+  "itemDescriptionSourceDefaultText": "The current value is the default.",
+  "jsonEditor": "JSON editor",
+  "missing": "Missing",
+  "moduleName": "Module name",
+  "modulesWithMissingDependenciesWarning": "Some modules have unresolved backend dependencies",
+  "requiredVersion": "Required Version",
+  "resetToDefaultValueButtonText": "Reset to default",
+  "uiEditor": "UI editor",
+  "unknownVersion": "unknown",
+  "updateConfig": "Update config",
+  "value": "Value",
+  "viewModules": "View modules"
+}

packages/apps/esm-implementer-tools-app/translations/es.json

@@ -1,28 +1,30 @@
 {
-  "activeItemSourceText": "El valor coriente viene de ",
-  "backendModules": "Modulos backend",
-  "checkImplementerToolsMessage": "Consulta la pestaña Módulos de Backend en las Herramientas del Implementador para obtener más detalles",
-  "clearConfig": "Borrar config",
+  "activeItemSourceText": "El valor actual viene de ",
+  "backendModules": "Módulos Backend",
+  "checkImplementerToolsMessage": "Consulta la pestaña Módulos Backend en las Herramientas del Implementador para obtener más detalles",
+  "clearConfig": "Borrar configuración local",
+  "close": "Cerrar",
   "configuration": "Configuración",
   "description": "Descripción",
-  "downloadConfig": "Descargar config",
+  "downloadConfig": "Descargar configuración",
   "edit": "Editar",
   "editValueButtonText": "Editar",
   "enabled": "Habilitado",
   "extensions": "Extensiones",
-  "featureFlag": "Feature Flag",
-  "featureFlags": "Feature Flags",
-  "frontendModules": "Frontend Modules",
+  "featureFlag": "Feature flag",
+  "featureFlags": "Feature flags",
+  "frontendModules": "Módulos Frontend",
   "installedVersion": "Versión instalada",
   "itemDescriptionSourceDefaultText": "El valor coriente es lo predeterminado.",
   "jsonEditor": "Editar como JSON",
   "missing": "Falta",
-  "moduleName": "Nombre de modulo",
-  "modulesWithMissingDependenciesWarning": "Some modules have unresolved backend dependencies",
+  "moduleName": "Nombre del módulo",
+  "modulesWithMissingDependenciesWarning": "Algunos módulos tienen dependencias del backend sin resolver",
   "requiredVersion": "Versión requerida",
   "resetToDefaultValueButtonText": "Volver al valor predeterminado",
-  "uiEditor": "Editór visual",
-  "unknownVersion": "desconocida",
+  "uiEditor": "Editor visual",
+  "unknownVersion": "desconocido/a",
+  "updateConfig": "Actualizar configuración",
   "value": "Valor",
   "viewModules": "Ver módulos"
 }