Merge pull request #3 from CAAPIM/develop

4.5.3

Author: gzavgo

.gitignore

@@ -28,6 +28,7 @@ yarn-error.log*
 
 # config
 packages/example/public/config.js
+packages/healthcare/public/config.js
 
 # cypress
 cypress/screenshots

.travis.yml

@@ -28,7 +28,6 @@ script: make test
 
 stages:
     - name: test
-    - name: deploy
       if: branch = master
 
 jobs:
@@ -38,17 +37,3 @@ jobs:
           env:
               - DEPLOY_ENV=test
               - NODE_ENV=test
-        - stage: deploy
-          name: Deploy
-          env:
-              - DEPLOY_ENV=integration
-              - NODE_ENV=production
-          install: NODE_ENV=development make install # Install development dependencies
-          script: skip
-          before_deploy:
-              - pip install --user awscli
-              - export PATH=$PATH:$HOME/.local/bin
-          deploy:
-              skip_cleanup: true
-              provider: script
-              script: make deploy

Makefile

@@ -11,9 +11,12 @@ help:
 install: package.json ## Install dependencies
 	@yarn
 
-copy-config-example: ## Copy config of the example. Usage DEPLOY_ENV=[dev|integration|staging] make copy-config-example.
+copy-config-example: ## Copy config of the example. Usage DEPLOY_ENV=[dev|integration|layer7] make copy-config-example.
 	cp packages/example/config/config-${DEPLOY_ENV}.js packages/example/public/config.js
 
+copy-config-healthcare: ## Copy config of the healthcare. Usage DEPLOY_ENV=[dev|integration|layer7] make copy-config-healthcare.
+	cp packages/healthcare/config/config-${DEPLOY_ENV}.js packages/healthcare/public/config.js
+
 generate-mock-data: ## Generate new data for the mock server. Usage OUTPUT_FILE=my-file.json make generate-mock-data. OUTPUT_FILE is optionnal.
 	./packages/layer7-apihub-mock/bin/generateData.js ${OUTPUT_FILE}
 
@@ -25,6 +28,9 @@ build: ## Build the library
 build-example: ## Build the example
 	@yarn build-example
 
+build-healthcare: ## Build the healthcare
+	@yarn build-healthcare
+
 build-storybook: ## Build the storybook
 	@yarn build-storybook
 
@@ -34,6 +40,9 @@ build-storybook: ## Build the storybook
 start: copy-config-example build ## Starts the application in development mode
 	@yarn start-example
 
+start-healthcare: copy-config-healthcare build ## Starts the application in development mode
+	@yarn start-healthcare
+
 watch-lib: ## Starts the library in development mode
 	@yarn start-lib
 
@@ -59,8 +68,3 @@ test-e2e-local: ## Opens the end-to-end tests GUI. Usage make test-e2e-local.
 lint: ## Runs linting tools
 	@yarn lint
 
-
-#### Deployment ####
-
-copy-deploy-config-example: ## Copy config of the example. Usage DEPLOY_ENV=[dev|integration|staging] make copy-deploy-config-example.
-	cp packages/example/config/config-${DEPLOY_ENV}.js packages/example/build/config.js

OVERVIEW.md

@@ -6,26 +6,26 @@ This overview includes information about the following:
 - The Material-UI library and its integration in react-admin.
 - Guidelines for developing a react-admin application.
 
-## Overview of the React-Admin Framework
+## Overview of the React-admin Framework
 
 > This section provides an overview of the react-admin application structure, describes the key directories, and their content.
 
-The Layer7 API Hub library is based on top of [react-admin](https://marmelab.com/react-admin). It's a frontend framework for building admin applications running in the browser, on top of REST/GraphQL APIs, using ES6, React, and Material Design. React-admin is open-sourced and maintained by [Marmelab](https://marmelab.com).
+The Layer7 API Hub library is a front-end framework for building admin applications running in the browser, on top of REST/GraphQL APIs, using ES6, React, and Material Design. It is based on top of [react-admin](https://marmelab.com/react-admin). [Marmelab](https://marmelab.com) open sources and maintains react-admin.
 
 The best way to start with API Hub is to walk through [the react-admin tutorial](https://marmelab.com/react-admin/Tutorial.html). This tutorial is a 30-minute step-by-step walkthrough of how to build a react-admin application.
 
 Useful links:
 
 - [React-admin documentation](https://marmelab.com/react-admin/Readme.html): Contains documentation and tutorials to help you get started.
-- [Open-source code on GitHub](https://github.com/marmelab/react-admin): To go deeper, you can read the code source. Everything is public.
-- [Report issues on GitHub](https://github.com/marmelab/react-admin/issues): Report bugs in the react-admin repository.
-- [React-admin community on StackOverflow](http://stackoverflow.com/questions/tagged/react-admin): Ask "How To" questions, get usage advice, or troubleshoot your own code.
+- [React-admin open-source code on GitHub](https://github.com/marmelab/react-admin): To go deeper, you can read the code source. Everything is public.
+- [Report react-admin issues on GitHub](https://github.com/marmelab/react-admin/issues): Report bugs in the React Admin repository.
+- [React-admin community on StackOverflow](http://stackoverflow.com/questions/tagged/react-admin): Ask "How To" questions, get react-admin usage advice, or troubleshoot your own code.
 
-The following sections are based on the [simple example](https://github.com/marmelab/react-admin/tree/master/examples/simple) in the react-admin repository.
+The following sections are based on the [react-admin Simple Example](https://github.com/marmelab/react-admin/tree/master/examples/simple) in the react-admin repository.
 
 ### Application Structure
 
-The following structure is a simplified version of the Simple example:
+The following structure is a simplified version of the Simple Example:
 
 - /src
   - /posts
@@ -131,7 +131,7 @@ export default apiUrl => {
                 json: { uuid, ...data },
             } = await fetchUtils.fetchJson(url, { credentials: 'include' });
 
-            // React-Admin needs an id instead of an uuid.
+            // React Admin needs an id instead of an uuid.
             // So the getOne method makes the transformation
             return {
                 data: {
@@ -154,9 +154,10 @@ export default apiUrl => {
 };
 ```
 
-The Layer 7 API Hub library provides a built-in data provider that works with the API Portal.
+The Layer 7 API Hub library provides a built-in data provider that works with API Portal.
+
+**Tip:** Consider using [the pre-built react-admin data providers](https://marmelab.com/react-admin/DataProviders.html#available-providers).
 
-**Tip:** Consider using [the pre-built data providers](https://marmelab.com/react-admin/DataProviders.html#available-providers).
 
 ### The Authentication Provider
 
@@ -190,13 +191,15 @@ export const authProvider = {
 };
 ```
 
-The Layer7 API Hub library provides a built-in authentication provider. Implement it if you have a special authentication strategy. For more information about how to implement the built-in authentication provider, see the [the react-admin Authentication Documentation](https://marmelab.com/react-admin/Authentication.html).
+Implement the Layer7 API Hub library if you have a special authentication strategy.
+
+For more information about how to implement the built-in authentication provider, see the [the react-admin authentication provider documentation](https://marmelab.com/react-admin/Authentication.html).
 
 ### The i18n Provider
 
-The i18n provider is a dedicated built-in provider that manages the translations. It is based on [Polyglot.js](https://airbnb.io/polyglot.js/). The Layer7 API Hub library provides translations for English (default), Spanish, French, and Italian.
+The i18n provider is a dedicated built-in provider that manages the translations. It is based on [Polyglot.js](https://airbnb.io/polyglot.js/). The Layer7 API Hub library provides translations for English (default), Spanish, and French.
 
-**Tip**: For support of other languages, see [the list of available locales](https://marmelab.com/react-admin/Translation.html#available-locales).
+For more information about the other languages that you can add, see [available locales](https://marmelab.com/react-admin/Translation.html#available-locales).
 
 The i18n provider uses the following format:
 
@@ -258,13 +261,13 @@ export const frenchMessages = mergeTranslations(raFrenchMessages, {
 
 > This section provides an overview of the Material-UI library.
 
-The react-admin front-end framework relies on [Material-UI](https://material-ui.com), a library of components. Material-UI is an implementation for React of the [material design](https://material.io/design). When designing interfaces in react-admin applications, we recommend that you reference the [the Material Design guidelines](https://material.io/design).
+The Layer7 API Hub library react-admin front-end framework relies on [Material-UI](https://material-ui.com). Material-UI is a library of components and an implementation for React of the [material design](https://material.io/design). When designing interfaces in react-admin applications, we recommend that you reference the [the Material Design guidelines](https://material.io/design).
 
 ### Material-UI Components
 
 React-admin uses Material-UI components internally. But sometimes you need to use these components directly. For example, when you are composing a custom interface.
 
-For more information about how to use Material-UI, see [the Material-UI documentation](https://material-ui.com).
+For more information about how to use Material-UI, see [the Material-UI documentation](https://material-ui.com/getting-started/usage/).
 
 The following example builds a custom <Button /> that display a loader when saving:
 
@@ -316,7 +319,7 @@ export function CustomButton(props) {
 
 ### Material-UI Icons
 
-You can use the Material-UI icons as components, and you can customize them. For more information about these icons, see [the Material-UI library](https://material-ui.com/components/material-icons).
+You can use the [Material-UI icons](https://material-ui.com/components/material-icons) as components, and you can customize them:
 
 ``` js
 import { Save as SaveIcon } from '@material-ui/icons';
@@ -329,6 +332,7 @@ import { Save as SaveIcon } from '@material-ui/icons';
 You can customize the [Material-UI theme](https://material-ui.com/customization/theming) by overriding the [default theme](https://material-ui.com/customization/default-theme).
 
 In react-admin, pass the theme to the <Admin /> component:
+
 ``` js
 // Admin.js
 import { defaultTheme } from 'react-admin';
@@ -355,6 +359,57 @@ export function ApiHubAdmin() {
 }
 ```
 
-## Guidelines for Developing a React-Admin Application
+The theme can be much more than that. Most components, either from material-ui, react-admin, or Layer7 API Hub, have a *stylesheet* name. This name follows a convention:
+
+- `Mui[ComponentName]` for MaterialUI components
+- `Ra[ComponentName]` for react-admin components
+- `Layer7[ComponentName]` for Layer7 API Hub components
+
+The theme can contain an [`overrides`](https://material-ui.com/customization/components/#global-theme-override) object with overrides for those components.
+
+For example, the Healthcare app overrides many components like this:
+
+```js
+const theme = {
+    // ...Theme Design Tokens (palette, etc.)
+    overrides: {
+        // Overrides Material UI AppBar styles
+        MuiAppBar: {
+            root: {
+                paddingTop: defaultMuiTheme.spacing(1),
+                paddingBottom: defaultMuiTheme.spacing(1),
+                background: `linear-gradient(127deg, #10054d, #33065b);`,
+            },
+        },
+        // Overrides React Admin Sidebar styles
+        RaSidebar: {
+            drawerPaper: {
+                backgroundColor: palette.common.white,
+                color: palette.primary.main,
+                marginTop: '0.5rem !important',
+                height: `calc(100% - 0.5rem)`,
+                boxShadow: `2px 0px 1px -1px rgba(0,0,0,0.2),
+            1px 0px 3px 0px rgba(0,0,0,0.1)`,
+            },
+        },
+        // Overrides Layer7 ApiHub CardGrid styles
+        Layer7CardGrid: {
+            root: {
+                marginTop: '0px',
+                marginRight: '0px',
+                marginBottom: '0px',
+                marginLeft: '0px',
+            // },
+        },
+    }
+}
+```
+
+## Guidelines for Developing a React-admin Application
+
+When developing custom react-admin components, you might have to deal with errors. The react-admin default components automatically handle data provider errors. You can also handle errors and react to them (notifications, etc.) using the following custom data provider hooks:
+
+- [useDataProvider Hook](https://marmelab.com/react-admin/Actions.html#usedataprovider-hook).
+- [Specialized Hooks](https://marmelab.com/react-admin/Actions.html#specialized-hooks).
 
-// TODO
+If you are concerned about performances related to querying your API too much, you might want to take advantage of react-admin built in caching capabilities. For more information, see [the react-admin Caching documentation](https://marmelab.com/react-admin/Caching.html).

README.md

@@ -4,83 +4,99 @@
 
 ## Packages Directory
 
-> This section provides an overview of the react-admin application structure, describes the key directories, and their content. The packages directory includes the following libraries and apps.
+> This section provides an overview of the react-admin application structure, describes the key directories, and the content of these directories. The packages directory includes the following libraries and apps.
 
 ### Layer7 API Hub Library
 
-For more information about the Layer7 API Hub library, see [the README](./packages/layer7-apihub/README.md):
+[The Layer7 API Hub library README](./packages/layer7-apihub/README.md) includes the following information:
 
-- [Add custom pages](./packages/layer7-apihub/README.md##add-a-pages)
-- [Change the styles](./packages/layer7-apihub/README.md##how-to-change-the-styles)
-- [Add additional language support](./packages/layer7-apihub/README.md##how-to-add-additional-language-support)
-- [Catch and display PAPI errors](./packages/layer7-apihub/README.md##How-to-catch-and-display-papi-errors)
+- [Add pages](./packages/layer7-apihub/README.md##add-a-pages)
+- [Add additional language support](./packages/layer7-apihub/README.md##add-additional-language-support)
 
 ### Example App
 
-The Example app has the same source code as the standard API Hub.
+The Example app has the same source code as the standard API Hub. [The Example app README](./packages/example/README.md) includes the following information:
 
-For more information about the Example app, see [the Example App README](./packages/example/README.md):
-
-- [Change the configuration](./packages/example/README.md##change-the-configuration)
+- [Configure the Example app](./packages/example/README.md##configure-the-example-app)
 - [Change the page title](./packages/example/README.md##change-the-page-title)
-- [Connect to Portal API (PAPI) or use the Layer7 API Hub mock server](./packages/example/README.md##connecting-to-portal-apis-or-using-the-mock-server)
-- [Host the app on another domain](./packages/example/README.md##host-the-app-on-another-domain)
-- [Enable HTTPS](./packages/example/README.md##enable-https)
+- [Make calls to the Layer7 API Hub Mock Server or Portal API (PAPI)](./packages/example/README.md##make-calls-to-the-layer7-api-hub-mock-server-or-portal-api-papi)
+- [Host the Example app on another domain](./packages/example/README.md##host-the-example-app-on-another-domain)
 - [Auto-detect the API Hub URL](./packages/example/README.md##auto-detect-the-api-hub-url)
+- [Customization Tutorials](./packages/example/README.md##customization-tutorials)
+
+### Healthcare App
+
+[The Healthcare app](./packages/healthcare/README.md) demonstrates a possible customized variation of API Hub with a Healthcare theme. It includes the same developer features as the Example app. It further extends the API Hub to include custom pages and additional calls (PAPI and Portal Metrics API). You use this app with the mock server.
+
+The Healthcare app README includes the following information:
+
+- [Available users](./packages/healthcare/README.md##available-users)
+- [Customize the Healthcare app](./packages/layer7-apihub-mock/README.md##customize-the-healthcare-app)
 
 ### Layer7 API Hub Mock Server
 
-For more information about the API Hub mock server, see [the Layer7 API Hub Mock Server Package README](./packages/layer7-apihub-mock/README.md):
+[The Layer7 API Hub mock server README](./packages/layer7-apihub-mock/README.md) includes the following information:
 
-- [Use the mock server in your application](./packages/layer7-apihub-mock/README.md##How-to-use-it-in-your-application)
+- [Start the mock server in your client application](./packages/layer7-apihub-mock/README.md##start-the-cock-server-in-your-client-application)
 - [Available users](./packages/layer7-apihub-mock/README.md##available-users)
-- [Customize API Hub mock server](./packages/layer7-apihub-mock/README.md##customize-API-hub-mock-server)
+- [Customize the mock server](./packages/layer7-apihub-mock/README.md##customize-the-mock-server)
 
 ### Cypress End-To-End Testing
 
-For more information about end-to-end testing, see [the Cypress README](./cypress/README.md).
+The end-to-end (E2E) tests are for the Example app.
 
-## Development
+For more information about this testing, see [the Cypress - End-To-End Testing README](./cypress/README.md).
+
+## Quick Start
+
+Use the following commands to set up you local development environment.
 
 **Prerequisites:**
 
+Before setting up your local development environment, ensure that you have completed the following:
 - You have installed [Yarn](https://yarnpkg.com/).
 - You have installed Make.
 
-**Tip:** You can install the dependencies by issuing the following command:
+### Install the JavaScript Dependencies
+
+Install the JavaScript dependencies by issuing the following command:
 
 ```sh
 make install
 ```
-## Start the Application
+### Start an App
+
+Start the Example app or the Healthcare app in watch mode.
 
-Start the application in watch mode by issuing the following command:
+To start the **Example app**, issue the following command:
 
 ```sh
 make start
 ```
 
-## Run the Tests
+To start the **Healthcare app**, issue the following command:
 
-Run the unit tests and the end-to-end (E2E) tests by issuing the following command:
+```sh
+make start-healthcare
+```
 
-``` sh
+### Run the Tests
+
+Run the unit tests and the E2E tests by issuing the following command:
+
+``` 
 make test
 ```
 
-### Unit Tests
+#### Unit Tests
 
 Run only the unit tests by issuing the following command:
 
 ``` sh
 make test-unit
 ```
 
-### End-To-End Tests
-
-The E2E tests are based on the Example app. For more information about this package, see [Example app](./packages/example).
-
-**Prerequisite:** You have a running instance of the Example app at <https://localhost:3000>. For more information, see ([Host the Example app on another domain](./packages/example/README.md##host-the-app-on-another-domain)).
+#### End-To-End Tests
 
 Run only the E2E tests:
 
@@ -94,9 +110,9 @@ Open the E2E tests GUI (useful for writing and debugging E2E tests):
 make test-e2e-local
 ```
 
-## Deploy the Example API Hub
+## Deploy the Example App
 
-Build the Layer7 API Hub library, build the Example app, and copy the production configuration by issuing the following commands:
+Build the API Hub library, the Example app, and then copy the production configuration by issuing the following commands:
 
 ```sh
 make build
@@ -109,3 +125,5 @@ Copy the contents of the `packages/example/build` directory to your favorite web
 ```sh
 docker run --name APIHub -v `pwd`/packages/example/build:/usr/share/nginx/html:ro -p 8888:80 nginx
 ```
+
+

cypress/README.md

@@ -1,5 +1,5 @@
 # Cypress - End-To-End Testing
 
-The E2E tests use the [Cypress](https://www.cypress.io) testing framework. These tests are for the [Example Application](../packages/example).
+The E2E tests use the [Cypress](https://www.cypress.io) testing framework. These tests are for the [Example App](../packages/example).
 
 If you create a new application, create your own E2E tests.