O3-908 - Combine meta and index

docs/diagrams/openmrs-offline-state.drawio

@@ -0,0 +1 @@
+<mxfile host="Electron" modified="2022-02-11T14:21:24.945Z" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/12.2.2 Chrome/78.0.3904.94 Electron/7.1.0 Safari/537.36" etag="sAUTCDZsfW7qMPxC1mIL" version="12.2.2" type="device" pages="1"><diagram id="q1xaKWcLuFI0TARncDAu" name="State Machine">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</diagram></mxfile>

docs/main/carbon.md

@@ -1,11 +1,13 @@
 # Design, Carbon, and the Styleguide
 
 ## Design Patterns in OpenMRS 3.x
+
 First, review these introduction materials that explain the patterns to follow to keep OpenMRS 3.x a consistent User Experience:
 
 👉  [**Click here to see the 3.x Design Patterns**](https://scene.zeplin.io/project/61434fa756474d5545f65cf4) 👈
 
-Key areas that all Developers and Project Managers/BA team members should be most familiar with are: 
+Key areas that all Developers and Project Managers/BA team members should be most familiar with are:
+
 * [NavBar/Header](https://scene.zeplin.io/project/61434fa756474d5545f65cf4/screen/6143628f56474d5545f6fce0)
 * [Side Rail](https://scene.zeplin.io/project/61434fa756474d5545f65cf4/screen/614362c96abfb0557aa9e357)
 * [Workspace](https://scene.zeplin.io/project/61434fa756474d5545f65cf4/screen/614363d860459a20f7936333)
@@ -14,44 +16,45 @@ Key areas that all Developers and Project Managers/BA team members should be mos
 * [Data Tables](https://scene.zeplin.io/project/61434fa756474d5545f65cf4/screen/61436254475da3542a84b400)
 
 ## What is Carbon?
-**Carbon**, or [Carbon Design System](https://www.carbondesignsystem.com/), is an 
-open-source design system with working code, design tools and resources, human 
-interface guidelines, and a community of contributors. 
 
-OpenMRS 3.0 uses Carbon to create a unified UI. Third party Design Systems like Carbon 
-are kept professionally maintained by another community which reduces work for OpenMRS 
-contributors. (More details in the [Why Use a Style Guide or a Design System](#why-use-a-style-guide-or-a-design-system) section below.
+**Carbon**, or [Carbon Design System](https://www.carbondesignsystem.com/), is an open-source design system with working code, design tools and resources, human interface guidelines, and a community of contributors.
+
+OpenMRS 3.0 uses Carbon to create a unified UI. Third party Design Systems like Carbon are kept professionally maintained by another community which reduces work for OpenMRS contributors. (More details in the [Why Use a Style Guide or a Design System](#why-use-a-style-guide-or-a-design-system) section below.
 
 ## How to Use Carbon in OpenMRS 3.0
-* See [Getting Started with Carbon](https://www.carbondesignsystem.com/developing/get-started/)
-  for first steps, dev resources, and a React-specific tutorial. 
+
+* See [Getting Started with Carbon](https://www.carbondesignsystem.com/developing/get-started/) for first steps, dev resources, and a React-specific tutorial.
 * More Carbon resources are available on [GitHub here](https://github.com/carbon-design-system/carbon).
 
 ## How to Use Zeplin
+
 **Zeplin** is a design collaboration tool that facilitates prototyping between UI designers and frontend developers. OpenMRS uses Zeplin for two purposes:
+
 1. *Design Handover*: To share designs as community assets.
-2. *Style Guide*: To clearly communicate the OpenMRS 3.0 frontend components, spacing 
-    and layout, color palette, and text styles (since Carbon Design doesn't
-    automatically customize all these for us). 
+2. *Style Guide*: To clearly communicate the OpenMRS 3.0 frontend components, spacing and layout, color palette, and text styles (since Carbon Design doesn't automatically customize all these for us).
 
 ### To see the designs anytime
+
 You can see the designs anytime (without creating a Zeplin account) by accessing these public links:
+
 * [Patient Chart designs](https://zpl.io/aNYmqeN)
 * [OHRI package designs](https://zpl.io/aMXW7e7)
 * [Offline Patient Follow-up designs](https://zpl.io/amRdKomv)
 
 ### To use the designs and the styleguide
 
 First, watch this video guide for Developers on how to use Zeplin:
+
 [![How to see UX & component guidance in Zeplin designs](https://img.youtube.com/vi/SjluEGDH4LU/0.jpg)](https://www.youtube.com/watch?v=SjluEGDH4LU&feature=youtu.be&ab_channel=OpenMRS "OpenMRS 3.0: Zeplin Intro for New OpenMRS Devs")
 
-To use the designs as a developer, you'll need to request Zeplin access from an OpenMRS
-admin; then, you can find them here:
+To use the designs as a developer, you'll need to request Zeplin access from an OpenMRS admin; then, you can find them here:
+
 [OpenMRS Zeplin Project](https://app.zeplin.io/workspace/60d4d9bc220676b218e75ed2/projects?pid=60d59321e8100b0324762e05)
 
 You can find re-useable shared components & more at the [OpenMRS Styleguide here](https://app.zeplin.io/project/60d5947dd636aebbd63dce4c/styleguide/components).
 
 ## Why use a Style Guide or a Design System?
+
 Users want a consistent, professional front-end UI. Without a style guide, 
 the expectations for various UI elements are unclear. This can create a messy, 
 inconsistent user experience. This is especially important in medical software: 
@@ -60,16 +63,11 @@ first encounter with that system. A poor UI can damage users' trust and can
 slow down staff workflows. 
 
 A shared, clear Design System helps to
+
 * assure consistency among frontend contributors in the UI look and feel for users
-* use precious technical time focusing on engineering work and on the clinical use/workflows,
-    rather than having to spend time on the details of how widgets should look and behave
-* make it faster for developers to contribute new features that add value for end users 
+* use precious technical time focusing on engineering work and on the clinical use/workflows, rather than having to spend time on the details of how widgets should look and behave
+* make it faster for developers to contribute new features that add value for end users
 
-A **design system** is a guide for making decisions about how interfaces should look, 
-how they should be structured, and the patterns according to which user experiences 
-are structured. Style Guides like Bootstrap and Material typically don’t provide this 
-kind of detail. We wanted a Style Guide that would also link to code you'll use in 
-your actual code base. 
+A **design system** is a guide for making decisions about how interfaces should look, how they should be structured, and the patterns according to which user experiences  are structured. Style Guides like Bootstrap and Material typically don’t provide this  kind of detail. We wanted a Style Guide that would also link to code you'll use in your actual code base.
 
 Learn more about [Why we chose Carbon](https://wiki.openmrs.org/x/uAwGDg) as our design system.
-

docs/main/creating_a_microfrontend.md

@@ -11,6 +11,7 @@ Follow the instructions in the README to turn it into your own frontend module.
 The process for creating a new frontend module in a monorepo
 is nearly identical to the one for creating one in an independent
 repo.
+
 1. Put the contents into a new directory under `packages/`
 2. Remove configuration files that are already present at the
   workspace level—things like `.github` and `.eslintrc`.

docs/main/distribution.md

@@ -27,7 +27,7 @@ The import map is used to define what frontend modules are included and where th
 
 ## Customizing the Import Map
 
-By building the app shell you'll already get a rudimenatary version of an import map, which can be used for development purposes. Generally, however, you should provide your own.
+By building the app shell you'll already get a rudimentary version of an import map, which can be used for development purposes. Generally, however, you should provide your own.
 
 An import map can also be specified as an URL. For instance, for the development instance as `dev3.openmrs.org` we have [https://spa-modules.nyc3.digitaloceanspaces.com/import-map.json](https://spa-modules.nyc3.digitaloceanspaces.com/import-map.json). The contents of this import map are updated once an update to any (official) frontend module has been pushed. Thus, while this import map may be great for development purposes, it should be considered unstable. Avoid this for your distribution or any application that should not break unexpectedly.
 

docs/main/faq.md

@@ -4,7 +4,7 @@
 
 In a repository using Yarn:
 
-```
+```sh
 yarn upgrade @openmrs/esm-framework openmrs  // to upgrade
 git checkout package.json  // to reset the version specifiers to 'next'
 yarn  // to re-create the lockfile
@@ -32,3 +32,19 @@ If you have done both of the above things and still haven't found the
 code you're looking for, feel free to ask in the
 [#openmrs-helpme](https://openmrs.slack.com/archives/C02UNMKFH8V) channel
 on Slack.
+
+### How to develop against a restricted environment?
+
+In general you can develop against another environment using the `--backend` flag.
+If the other environment is guarded, e.g., by an IP or network restriction then
+this is something you need to take care of on your local machine.
+
+In case the guarded environment is restricted via some SSO mechanism using a
+cookie you could use the `--add-cookie` flag to achieve this. As an example,
+look at the access for a development server from the ICRC:
+
+```sh
+npx openmrs start --backend "https://emr-v2.test.icrc.org/" --add-cookie "MRHSession=1234..."
+```
+
+The cookie must be obtained by you and strongly depends on the used backend.

docs/main/offline.md

@@ -111,3 +111,19 @@ function setupOpenMRS() {
 ```
 
 The previous snippet creates a synchronization processor for items of type `my-offline-data`. These items have a (potential) dependency to other items of type `other-offline-data`. Therefore, these items will be processed *before* the `my-offline-data` items.
+
+## State Machine
+
+Offline is in general a bit of a difficult topic. Most importantly, there are multiple states associated with it. Not only is the specific behavior dependent on the state of the network (online, offline), but also of the user (wants or does not want to be offline ready) and the application (already offline ready or still trying to be offline ready or updating the files required to go offline).
+
+The following state diagram shows the different entry points and their possible transitions.
+
+![Map of OpenMRS offline capability and state transitions](./openmrs-offline-state.png)
+
+Importantly, the user has 5 possible entry points to the application:
+
+- Fresh state (did not opt-in)
+- Downloading assets state (did opt-in, but never finished)
+- Ready state (did opt-in, no changes since last use), followed by a data sync
+- Outdated state (did opt-in, changes to assets since last use)
+- Offline state (did opt-in, no Internet connectivity)

packages/apps/esm-devtools-app/package.json

@@ -44,6 +44,7 @@
   },
   "devDependencies": {
     "@openmrs/esm-framework": "^3.2.0",
+    "@openmrs/webpack-config": "^3.2.0",
     "@types/carbon-components-react": "^7.24.0",
     "carbon-components": "10.31.0",
     "carbon-icons": "7.0.7",

packages/apps/esm-implementer-tools-app/package.json

@@ -52,6 +52,7 @@
   },
   "devDependencies": {
     "@openmrs/esm-framework": "^3.2.0",
+    "@openmrs/webpack-config": "^3.2.0",
     "@types/carbon-components-react": "^7.24.0",
     "jest": "^26.6.3",
     "react": "^16.13.1",

packages/apps/esm-login-app/package.json

@@ -53,6 +53,7 @@
   },
   "devDependencies": {
     "@openmrs/esm-framework": "^3.2.0",
+    "@openmrs/webpack-config": "^3.2.0",
     "@types/carbon-components-react": "^7.24.0",
     "@types/react-router-dom": "^5.1.7",
     "jest": "^26.6.3",

packages/apps/esm-login-app/src/login/login.component.tsx

@@ -134,6 +134,10 @@ const Login: React.FC<LoginProps> = ({ history, location, isLoginEnabled }) => {
           <InlineNotification
             kind="error"
             style={{ width: "23rem" }}
+            /**
+             * This comment tells i18n to still keep the following translation keys (used as value for: errorMessage):
+             * t('invalidCredentials')
+             */
             subtitle={t(errorMessage)}
             title={t("error", "Error")}
             onClick={() => setErrorMessage("")}

packages/apps/esm-login-app/translations/en.json

@@ -5,6 +5,7 @@
   "continue": "Continue",
   "error": "Error",
   "found": "found",
+  "invalidCredentials": "Invalid username or password",
   "locationNotFound": "Sorry, no matching location was found.",
   "locations": "locations",
   "login": "Log in",

packages/apps/esm-offline-tools-app/package.json

@@ -54,6 +54,7 @@
   },
   "devDependencies": {
     "@openmrs/esm-framework": "^3.2.0",
+    "@openmrs/webpack-config": "^3.2.0",
     "@types/carbon-components-react": "^7.24.0",
     "@types/lodash-es": "^4.17.5",
     "@types/react-router-dom": "^5.1.7",

packages/apps/esm-offline-tools-app/src/components/overview-card.component.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { useHistory } from "react-router-dom";
 import { Tile, Button, TileProps } from "carbon-components-react";
 import styles from "./overview-card.styles.scss";
 import ArrowRight16 from "@carbon/icons-react/es/arrow--right/16";
@@ -17,7 +16,6 @@ const OverviewCard: React.FC<OverviewCardProps> = ({
   children,
 }) => {
   const { t } = useTranslation();
-  const history = useHistory();
 
   return (
     <Tile light className={`${styles.overviewCard}`}>
@@ -27,7 +25,7 @@ const OverviewCard: React.FC<OverviewCardProps> = ({
           kind="ghost"
           renderIcon={ArrowRight16}
           size="sm"
-          onClick={() => navigate({ to: viewLink })}
+          onClick={() => navigate({ to: `\${openmrsSpaBase}/${viewLink}` })}
         >
           {t("homeOverviewCardView", "View")}
         </Button>

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

@@ -213,6 +213,18 @@ function setupOpenMRS() {
         online: true,
         offline: true,
       },
+      {
+        name: "offline-tools-opt-in-offline-mode-button",
+        slot: "user-panel-slot",
+        order: 1,
+        load: getAsyncLifecycle(
+          () =>
+            import("./offline-actions/offline-actions-mode-button.component"),
+          options
+        ),
+        online: true,
+        offline: false,
+      },
     ],
   };
 }

packages/apps/esm-offline-tools-app/src/offline-actions/offline-actions-mode-button.component.scss

@@ -0,0 +1,33 @@
+@import "../root.scss";
+
+.offlineModeButtonContainer {
+  display: flex;
+  flex-direction: row;
+  width: 16rem;
+  justify-content: flex-start;
+  color: $field-01;
+  align-items: center;
+  @extend .bodyLong01;
+  height: 3rem;
+  cursor: pointer;
+
+  :global(.bx--toggle-input__label .bx--toggle__switch) {
+    margin-top: 0 !important;
+  }
+}
+
+.offlineModeButtonContainer svg {
+  margin: 0rem 0.75rem;
+  fill: $field-01;
+}
+
+.offlineModeButtonContainer > div {
+  display: flex;
+  flex-direction: row;
+  width: fit-content;
+  align-items: center;
+
+  & > div {
+    margin-left: 1rem;
+  }
+}

packages/apps/esm-offline-tools-app/src/offline-actions/offline-actions-mode-button.component.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Toggle } from "carbon-components-react";
+import Network20 from "@carbon/icons-react/es/network--3/20";
+import {
+  getCurrentOfflineMode,
+  setCurrentOfflineMode,
+} from "@openmrs/esm-framework";
+import styles from "./offline-actions-mode-button.component.scss";
+
+function doNotCloseMenu(ev: React.SyntheticEvent) {
+  ev.stopPropagation();
+}
+
+const OfflineActionsModeButton: React.FC = () => {
+  const { t } = useTranslation();
+  const [active, setActive] = React.useState(
+    () => getCurrentOfflineMode().active
+  );
+  const toggle = React.useCallback(() => {
+    setActive((value) => {
+      const active = !value;
+      setCurrentOfflineMode(active ? "on" : "off");
+      return active;
+    });
+  }, []);
+
+  return (
+    <div className={styles.offlineModeButtonContainer}>
+      <Network20 />
+      <div onClick={doNotCloseMenu} role="none">
+        {t("offlineReady", "Offline Ready")}
+        <Toggle
+          id="offlineModeSwitch"
+          labelA=""
+          labelB=""
+          toggled={active}
+          onToggle={toggle}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default OfflineActionsModeButton;

packages/apps/esm-offline-tools-app/src/offline-actions/offline-actions-overview-card.component.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import HeaderedQuickInfo from "../components/headered-quick-info.component";
-import OverviewCard from "../components/overview-card.component";
 import { usePendingSyncItems } from "../hooks/offline-actions";
 import { routes } from "../constants";
+import HeaderedQuickInfo from "../components/headered-quick-info.component";
+import OverviewCard from "../components/overview-card.component";
 
 const OfflineActionsOverviewCard: React.FC = () => {
   const { t } = useTranslation();

packages/apps/esm-offline-tools-app/translations/en.json

@@ -31,5 +31,6 @@
   "offlinePatientSyncDetailsFailedHeader": "There was an error downloading the following items",
   "offlinePatientSyncDetailsFallbackErrorMessage": "Unknown error.",
   "offlinePatientSyncDetailsHeader": "Offline patient details",
+  "offlineReady": "Offline Ready",
   "offlineToolsAppMenuLink": "Offline tools"
 }

packages/apps/esm-primary-navigation-app/package.json

@@ -52,6 +52,7 @@
   },
   "devDependencies": {
     "@openmrs/esm-framework": "^3.2.0",
+    "@openmrs/webpack-config": "^3.2.0",
     "@types/carbon-components-react": "^7.24.0",
     "@types/react-router-dom": "^5.1.7",
     "jest": "^26.6.3",

packages/apps/esm-primary-navigation-app/src/components/navbar-header-panels/app-menu-panel.component.scss

@@ -12,12 +12,12 @@
 }
 
 .menuLink a:hover {
-  @include brand-01(background-color)
+  @include brand-01(background-color);
 }
 
 .externalLinks {
   border-top: 1px solid;
-  @include brand-03(border-top-color)
+  @include brand-03(border-top-color);
 }
 
 .launchIcon {