Cockpit Notifications

Builds Status

Master:

Development:

Test Coverage

Master:

Development:

About

Receive and distribute notifications across the network of retailers using the WM Cockpit suite of products. These products include:

• Cockpit (Root)

• Gearbox

• CRM

• Comprar Veículos

• Estoque

• Mais Fidelidade

• AutoGuru

• Universidade

Who are the end users?

• Tenants who have access to the Cockpit. (Only receive messages / notifications)

• WebMotors administrators (Create messages / notifications)

• Systems integrated via HTTP API.

Requirements

• nvm v0.35.0 (install details)

• Node v12.17.0 (install details)

• npm v6.14.4

Stack

• Node

• Webpack

• Rollup

• Storybook

• ES6 (Babel)

• React

• PostCSS / SASS

• Jest / Enzyme / Chai

• Editorconfig

• Prettier

• ESLint

Peer Dependencies

• react
• react-dom
• prop-types

Installation

$ npm install @laborit-dev/cockpit-notifications --save

Usage

Please, refer to the main file USAGE.md to instructions on how to use this library on your project.

Local development setup

This application is integrate with WM Cockpit React Library, so we are required to run this application on a subdomain of *.webmotors.com.br so the authentication integration can properly work.

This can be achived by editing your /etc/hosts file and including:

127.0.0.1  cdn-dev.webmotors.com.br

You can use nvm to install the current NodeJS version utilized on this project.

$ git clone [email protected]:laborit/webmotors-cockpit-notifications-client.git
$ cd webmotors-cockpit-notifications-client/
$ cp .env.sample .env
$ nvm use # Only if you have nvm installed on your machine
$ npm install
$ npm run build
$ npm run test
$ npm run dev

You should be able to access the application at:

• http://localhost:4000
• http://cdn-dev.webmotors.com.br:4000

Demo Application

You can run a demo application by running npm run dev on the root folder of this project. The application will be acessible at http://localhost:4000

You should use an .env file to set the following environment variables:

Hint: This project includes an .env.sample which you can use as start point.

- NODE_ENV
- FIREBASE_MESSAGING_SENDER_ID
- FIREBASE_API_KEY
- FIREBASE_PROJECT_ID
- FIREBASE_APP_ID
- FIREBASE_PUBLIC_VAPID_KEY
- BASE_API_URL

Proxy application for development (CORS)

You may encounter Cross-Origin Resource Sharing (CORS) problems when integrating with the remote HTTP API in your development environment, this is why we provide the command npm run dev:proxy

Make sure your .env has the following configuration to use the HK HTTP API to test in your local NODE_ENV=development environment:

# .env
BASE_PROXY_API_URL='https://hkcomprarveiculos.webmotors.com.br'
BASE_API_URL='http://localhost:4000/api/central-de-notificacao/'

Make sure that all OPTIONS requests to the local API actually enable CORS:

$ npm run dev:proxy
$ curl -vvv -X OPTIONS http://localhost:4000/api/central-de-notificacao/v1/notifications/unread_count

< HTTP/1.1 200 OK
< Access-Control-Allow-Origin: *
< Access-Control-Allow-Headers: *

{"cors":"enabled"}

Now all requests in the demo application at http://cdn-dev.webmotors.com.br:4000 or http://localhost:4000 should be able to be perfomed without CORS restrictions.

Chrome with Web Security Disabled

Another option that you can use, it's to run your Chrome Browser with Web Security disabled. This is not our recommended solution, but it can be useful at some point when you need to test the application running npm run dev (and not npm run dev:proxy).

The commands for Linux, Mac, and Windows are the following: [source]:

# Linux
$ google-chrome --disable-web-security --user-data-dir=/tmp/chrome_dev_test

# Mac
open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security

# Windows 10 or newer
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp

Storybook

You can use Storybook to follow and document the library's components, just run:

$ nvm use # Make sure you're using Node > 10
$ npm run storybook

Access it on: http://localhost:6006

Code Development

Required setup on your favorite code editor

First of all, note that we use some formatters/plugins to make sure our codebase is following a very strict standard and patterns.

Before actually writing code, you should install the following on your code editor or IDE:

EditorConfig

• https://editorconfig.org/ (Supports VSCode, Sublime Text, Vim, Atom and others)

Why?

EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs. Some editors actually support it by default (Ex: RubyMine)

Prettier

• https://prettier.io/ (Supports VSCode, Sublime Text, Vim, Atom and others)

Why?

It removes all original styling and ensures that all outputted code conforms to a consistent style.

As you can see, these two tools we make sure our codebase is consistent across all developers, IDE's and operating systems. Make sure you have them properly configurated on your IDE before starting writing code.

Optional (but recommended) plugins

To make your life easier during code development and testing we recommend the following plugins/extensions to be used on your editor*.

VSCode Jest

• https://github.com/jest-community/vscode-jest

Why?

This extension allows you to quickly run your tests within VSCode, it also show the current code coverage and gives you a lot of auto complete on the intelise.nse

Majestic Jest GUI

• https://github.com/Raathigesh/majestic (Majestic is a GUI for Jest)

This is useful if you want to navigate through our test suite by using an interface, it can useful for better debugging .

You can simply start it by running:

$ npx majestic

PS*: Most of us use VSCode for Javascript development, some plugins might be supported on every IDE and you could probably look for some equivalent extension to your editor.

Test suite

You can run all automated tests and generate a HTML report by running:

$ npm run test:coverage

This will generate a HTML report in coverage/index.html folder.

Open it using:

# Linux
$ xdg-open coverage/index.html
# Mac
$ open coverage/index.html
# Windows
$ start coverage/index.html

If you just want to run the tests but not generate the report, just run:

$ npm run test

Optimizers

SVGO

$ npm run optimize:svg

This command check all files with SVGO using installation is globally npm install -g svgo.

Code Linting

ESLint

$ npm run lint

This command check all files with eslint using the configurations in .eslintrc file.

Prettier

$ npm run prettier:check

This command check all files using prettier with the configurations in .prettierrc file.

$ npm run prettier:write

This command update all files which are not formatted by prettier using the configurations on .prettierc file.

Build library and application

Build library to production

$ nvm use # Make sure you're using Node > 10
$ npm run build

This will generate the following files:

• dist/index.csj.js (CommonJS)
• dist/index.esm.js (Module/ES)
• dist/index.js (Browser/UMD)

Build demo application:

$ nvm use # Make sure you're using Node > 10
$ npm run build:webpack

This will generate a static HTML application in dist/demo, the most relevant generated files are:

• dist/demo/index.html
• dist/demo/main.[hash].js
• dist/demo/firebase-messaging-sw.js
• dist/demo/serviceWorkerEnv.js

Build Storybook

$ nvm use # Make sure you're using Node > 10
$ npm run build-storybook

This will generate a static HTML application in dist/storybook folder.

Deploy

NPM

Set the npm token on Gitlab CI using the environment variable NPM_TOKEN

PS: Before releasing a new version to master branch, make sure you update the version of the release.

Deploy to production

An automatic deploy will start when any code reaches the master branch.

Deploy to HK/Staging

An automatic deploy will start when any code reaches the develop branch.

Gitlab Pages

Deploy demo application on Gitlab Pages

Every time a commit reaches the deploy-pages branch, a new job will start to deploy the demo application to http://dev-notifications.laborit.com.br/.

You can start a new deploy anytime by replacing/sending your current branch to Gitlab using:

$ git push <gitlab_origin> <branch>:deploy-pages

Useful references & links

• http://gitlab.com/laborit/webmotors-cockpit-notifications-client/

• https://gitlab.com/laborit/webmotors-notification-api

• https://hkcdn.webmotors.com.br (Demo application hosted on *.webmotors.com.br)

• http://dev-notifications.laborit.com.br/ (Demo application)

• https://dev-notifications.laborit.com.br/e619230f5c/coverage/ (Atual code coverage do projeto)

• https://dev-notifications.laborit.com.br/e619230f5c/docs/ (Storybook do projeto)

• https://dev-notifications.laborit.com.br/e619230f5c/stats (Analise de bundle atual do projeto)

• https://drive.google.com/open?id=1c1PIBMtj1bCg2AU4dVedjjcgfYafVivM (Cenários de testes do produto desenvolvidos pela equipe de Q/A da Lab)

• https://projects.invisionapp.com/share/JHUP4ZB523V (Invision com layout do projeto)

• https://www.figma.com/file/2faw2qKFevKxWI7PsIBP0Z/Cockpit-%5BD%5D?node-id=702%3A17441 (Central de Notificações: Projeto Figma)

• https://docs.google.com/presentation/d/16--ReK0nyKn7usS6bn7WkcYfSSbfiCjAUUgXWgggM8o (Apresentação de Produto do Cockpit Notifications)

• https://glebbahmutov.com/blog/configure-prettier-in-vscode/ (How to configure Prettier on VSCOde)

• https://editorconfig.org/

• https://prettier.io/docs/en/index.html (What is Prettier?)

• https://github.com/Raathigesh/majestic (Majestic GUI)

• https://docs.npmjs.com/cli/publish (NPM Publish)

• https://docs.gitlab.com/ee/user/project/pages/ (Gitlab Pages)

• https://github.com/rollup/rollup/ (Rollup)

• https://storybook.js.org/ (Storybook)

• https://github.com/nvm-sh/nvm

• https://github.com/FiloSottile/mkcert (HTTPS Certificates for localhost)

• https://github.com/webpack/webpack-dev-server/tree/master/examples/cli/https (Webpack HTTPS)

• https://developer.mozilla.org/pt-PT/docs/Web/HTTP/CORS

• https://enable-cors.org/

• https://alfilatov.com/posts/run-chrome-without-cors/