Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

O3-908 - Combine meta and index #324

Merged
merged 21 commits into from
Feb 12, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
afb2fdc
Prepare offline
FlorianRappl Jan 27, 2022
7140523
Fixed the version of the file size impact
FlorianRappl Jan 27, 2022
7b8cb40
Merge branch 'master' of github.com:openmrs/openmrs-esm-core into fea…
FlorianRappl Jan 27, 2022
8878d46
Merge branch 'master' of https://github.com/openmrs/openmrs-esm-core …
FlorianRappl Jan 28, 2022
def85c0
Merge branch 'master' of https://github.com/openmrs/openmrs-esm-core …
FlorianRappl Feb 10, 2022
3d14701
Include output optimizer
FlorianRappl Feb 11, 2022
46abcdb
Merge branch 'feature/offline-on-demand' of github.com:openmrs/openmr…
FlorianRappl Feb 11, 2022
c05743b
Updated importmap
FlorianRappl Feb 11, 2022
86f0ab0
Updated asset optimizer
FlorianRappl Feb 11, 2022
067d79e
Improved documentation
FlorianRappl Feb 11, 2022
89f07bd
Improved translation
FlorianRappl Feb 11, 2022
69683df
Improved tooling w.r.t. dependent modules
FlorianRappl Feb 11, 2022
505b32f
Merge branch 'master' of github.com:openmrs/openmrs-esm-core into fea…
FlorianRappl Feb 11, 2022
7c62d4a
Updated docs
FlorianRappl Feb 11, 2022
a05f75b
Fixed usage of non-spa based path O3-1022
FlorianRappl Feb 11, 2022
242b833
Added offline capability button
FlorianRappl Feb 11, 2022
91bdbc6
Fixed local representation
FlorianRappl Feb 11, 2022
8b26912
Applied prettier
FlorianRappl Feb 11, 2022
590046f
Correctly mark openmrs dev dependency
FlorianRappl Feb 11, 2022
f676893
Merge branch 'master' of github.com:openmrs/openmrs-esm-core into fea…
FlorianRappl Feb 11, 2022
ec82c1c
Put default webpack config in dedicated package
FlorianRappl Feb 11, 2022
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/diagrams/openmrs-offline-state.drawio
Original file line number Diff line number Diff line change
@@ -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>
44 changes: 21 additions & 23 deletions docs/main/carbon.md
Original file line number Diff line number Diff line change
@@ -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)
Expand All @@ -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:
Expand All @@ -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.

1 change: 1 addition & 0 deletions docs/main/creating_a_microfrontend.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`.
Expand Down
2 changes: 1 addition & 1 deletion docs/main/distribution.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
18 changes: 17 additions & 1 deletion docs/main/faq.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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.
16 changes: 16 additions & 0 deletions docs/main/offline.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Binary file added docs/main/openmrs-offline-state.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions packages/apps/esm-devtools-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions packages/apps/esm-implementer-tools-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions packages/apps/esm-login-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 4 additions & 0 deletions packages/apps/esm-login-app/src/login/login.component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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("")}
Expand Down
1 change: 1 addition & 0 deletions packages/apps/esm-login-app/translations/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions packages/apps/esm-offline-tools-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -17,7 +16,6 @@ const OverviewCard: React.FC<OverviewCardProps> = ({
children,
}) => {
const { t } = useTranslation();
const history = useHistory();

return (
<Tile light className={`${styles.overviewCard}`}>
Expand All @@ -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>
Expand Down
12 changes: 12 additions & 0 deletions packages/apps/esm-offline-tools-app/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
],
};
}
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
}
}
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -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();
Expand Down
1 change: 1 addition & 0 deletions packages/apps/esm-offline-tools-app/translations/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
1 change: 1 addition & 0 deletions packages/apps/esm-primary-navigation-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Loading