Adds a list of available tenants on first loading of the app:

On selecting a tenant, login screen shows name of tenant with a "Change Team" button that takes the user back to the list:

UI doesn't look that nice yet but could be updated later.

When a tenant is selected, it requests more data from the API and saves the id, name, config and version to local storage.

On subsequent starts of the app, a check is made to the API to see if the version has incremented. If it has, it updates local storage with the new data. This is done silently in the background.

The page needs to be refreshed to use the new config. It's unlikely the config will change frequently (as far as I know only when making changes to how Amplify is configured). Any changes should always coincide with a front end update, so the service worker should prompt the user to refresh at the same time anyway. This keeps the config synchronised with the newest version of the front end.

The only exception might be if the user clears their browser cache, but not local storage data.

When the user clicks the change team button, it clears the local storage and DataStore database.

The tenant API just has a simple schema:

type Tenant @model {
  id: ID!
  name: String!
  config: AWSJSON!
  version: Int!
}

(still need to figure out auth rules)

It uses an API key for authentication. The API key needs to be refreshed occasionally (max 1 year). We could maybe configure the API to only accept connections from the NABB domain, but this might not work with the mobile app wrapper.

The API details are kept in env variables REACT_APP_TENANT_GRAPHQL_ENDPOINT and REACT_APP_TENANT_GRAPHQL_API_KEY.

I'm not sure how best to keep the API up to date when a config changes.

One idea I had was using a GitHub workflow that runs whenever the production branch is updated:

wait for the backend to be built for each tenant on Amplify
pull the Amplify backend for each tenant
update the API for each entry with the config (the contents of aws-exports.js)

But there could be a better way to do it.

Another caveat is that AWS has a restriction on how many APIs can be created (I think it's 25). Not something to worry about now, but we may need to apply to have that increased sometime down the line.

@petersjtaylor can you review please and let me know what you think? @ianphunt58 does the user workflow look good for you too?

Codecov Report

Merging #115 (12485bb) into master (2a91f17) will increase coverage by 0.70%. The diff coverage is 74.57%.

@@            Coverage Diff             @@
##           master     #115      +/-   ##
==========================================
+ Coverage   56.85%   57.56%   +0.70%     
==========================================
  Files         295      296       +1     
  Lines        9673     9707      +34     
  Branches     2420     2416       -4     
==========================================
+ Hits         5500     5588      +88     
+ Misses       3778     3738      -40     
+ Partials      395      381      -14

Impacted Files	Coverage Δ
src/App.tsx	`0.00% <0.00%> (ø)`
src/utilities/saveAmplifyConfig.ts	`76.00% <76.00%> (ø)`
src/scenes/Login/Login.tsx	`80.00% <80.00%> (ø)`
src/scenes/Login/components/SignInHeader.tsx	`88.88% <88.88%> (ø)`
src/scenes/TenantPicker/TenantList.tsx	`94.00% <94.00%> (ø)`
src/redux/Selectors.js	`92.30% <100.00%> (+0.20%)`	:arrow_up:
src/scenes/TenantPicker/components/TenantCard.tsx	`100.00% <100.00%> (ø)`
.../scenes/TenantPicker/utilities/configureAmplify.ts	`100.00% <100.00%> (ø)`

:mega: We’re building smart automated test selection to slash your CI/CD build times. Learn more

platelet-app / platelet

Multi-tenant selection list #115

Codecov Report