flowbuilder-test v1.0.0

React Dashboard

This repository contains the React app that powers https://dashboard.messagebird.com.

Getting started with developing

1. Make sure you have the PHP dashboard running on your machine (http://dashboard.messagebird.internal:8080). Or follow these instructions
2. Clone this repository and cd into it
3. Run yarn && yarn start - The development server should start on http://localhost:3000
4. Go to http://dashboard.messagebird.internal:8080 and make sure you are connected to VPN
5. in The console, run window.enableReactDev(). This tells the dashboard to load the React bundle from http://localhost:3000 instead of from the CDN. This way non React devs can still use the full dashboard on development.

Testing branches on staging

Everytime you push a change to a branch, our CI pipeline will build a new bundle, run linting and tests, and deploy everything to the staging CDN (https://static.messagebird.io) when the pipeline passes.

To be able to test changes in React app without having to deploy a new version of the the PHP dashboard, some helper functions that are globally exposed allow us to load the React bundle of a specific branch. To do so, go to https://dashboard-staging.messagebird.io, open the console and run:

window.setReactBranch("BRANCH_YOU_WANT")

After running this command, the dashboard will load the React bundle of the given branch name after a refresh.

To go back to the master branch, you can run

window.resetReactBranch()

Monitoring (because our code sucks)

Despite the omnipotence of technology, sometimes shit randomly explodes for no apparent reason (there's always a reason though really). For client-side error monitoring we use Sentry (check out #react-dash-alerts slack channel).

For monitoring bundle load failures we use pushprom.js and prometheus. Here's a graph visualising the failures: https://mon.messagebird.io/grafana/d/XPTlzLNWk/react-bundle-load-failures?orgId=1

Once the number of failures of the last five minutes exceed an arbitrary amount, a critical alert will be sent to #monitoring-critical. To edit the alert or configure it to send out an alert that will wake people up in the middle of the night check out this file: https://gitlab.messagebird.io/infrastructure-team/kubernetes/monitoring/blob/master/alerts/dashboard.yaml

Dealing with pipeline. (Important!)

There few facts that you should know about this pipeline:

• Don't forget to perform manual clean-up action before merging into master
• After merging development branch to the master and performing manual step deploy-production your code will be available by https://static.messagebird.com/master/
• There is a very special "delete-lock-file" manual step, DO NOT use this unless you really have to, it's an escape hatch for if the deployment pipeline failed but left the lockfile intact, in which case manually clearing it is necessary.

Translations

Read our transifex frontend handbook page before you continue.

1. You can use yarn tx:pull, to update your local translations files with the latest from Transifex. Watch out! This will override your local translations files!
2. After that you need to add manual your new english strings to src/translations/en.json, unfortunately atm we do not have script that can extract english strings from the source code, you need to do that manually
3. Finally you can yarn tx:push to upload your new source strings back to Transifex. Remember that this will override whatever is in Transifex, so make sure you don't wait long between yarn tx:pull and yarn tx:push to minimize the chance that someone else also pushed new strings in the meantime.

To make sure we don't hinder eachother, add your new strings and push as soon as possible after you've pulled. This way we minimize the risk of overwriting.

Translations in code

Translations are managed by react-intl, together with babel's translations plugin and a translations manager package.

In practice, most of it is already setup in the app's template and the translations script. So all you need to know is: for ANY text, you have to use the FormattedMessage object, like so:

import { FormattedMessage } from 'react-intl';

<FormattedMessage
    id="contacts.number"
    defaultMessage="Number"
/>

TypeScript

react-dashboard has TypeScript support. You can import .ts modules from .js modules and vice versa. Because TypeScript is compiled with babel there is no type checking during the build proces. To run type checks during development run yarn check-types.

Typing cheatsheets

Typing React components and redux stuff takes some getting used to. Bookmark these resources for help with common patterns

• React: https://github.com/sw-yx/react-typescript-cheatsheet
• Redux: https://github.com/sw-yx/react-typescript-cheatsheet
• If something is too difficult to type (it takes more than +/-5 minutes) you can bail out with the any type.

@types for npm modules

Many npm modules come with type definitions which is handy for autocomplete. Use https://microsoft.github.io/TypeSearch to find if typings exists for a package, then install the types for a package with.

yarn add @types/*package* --dev

Directory structure 🌳

The preferred directory structure is a recursive directory structure we call a "package". A package may contain:

• scenes - inside are sub packages with the same exact structure, this is the recursive part
• containers - for all container components shared in this package and sub packages
• contexts - for all react contexts shared in this package and sub packages
• components - for all components shared in this package and sub packages
• reducers - for all reducers shared in this package and sub packages
• hooks - for all hooks shared in this package and sub packages
• helpers - for all helpers shared in this package and sub packages
• ... - more stuff shared in this and all sub packages

Frequently asked questions

Which version of the React app is running on production?

You can easily find out by opening the Dashboard, and running window._react_app_commit in the console. The command should output a commit hash. If you go to https://gitlab.messagebird.io/frontend/react-dashboard/commit/{HASH} you'll see the commit of the current bundle.

How do I run FlowBuilder standalone?

There are plans to move flow builder to it's own repository. For now flow builder still lives inside the react-dashboard repo and it is possible to run it in "standalone" mode, meaning you don't have to rely on the PHP dashboard to develop for flow builder. To get up and running:

• Copy .env.local.example to .env.local
• Fill in the empty environment variables. You can find the correct values for these in the dashboard repo, depending on the account you will be using.
• Run yarn standalone
• When the build is done, go to http://localhost:3000/en/flow-builder and enjoy the fast reloads 🚀