mytw-people-frontend

Description

This is the myTW Requests tab's frontend code base.

Business Context

People Ops team i.e. People Support team is facing multiple challenges while working on tickets received from TWers as identified during workshop.

Transformers team has proposed a solution where myTW becomes a one step solution for TWers to raise a request to People Ops team and TWer should be navigated to Zendesk through link provided for newly raised ticket from TWer. For People Ops team, the challenges such as sorting and training of tickets, will be solved through One Zendesk creation.

Possible release channels

• NPM Package (current)

Diagram

Context

Initial Setup (common for all release channels)

1. Project name

a) manifest (package.json)

{
  "name": "@mytw/people-frontend",
  "main": "dist/mytw-people-frontend.js",
  "types": "dist/mytw-people-frontend.d.ts"
}

2. Context in CircleCI

Create context in circleci and replace the context in config.yml with your context name

The following environment variables should be set. Contact for access to 1password vault access to the credentials

export NPM_TOKEN

Development

Architecture

MyTW use micro front-end architecture, each tab(route) has its own code repository.

Tech stack

Typescript, React 17, Single Spa, Material UI

Jest、Webpack

Infra: Terraform, Amazon cloud

CI/CD: Circle CI

Local start step

Recommend to replace the source of resource in dev env(https://dev.non-prod.my.thoughtworks.net) which one you want to debug.

1. use yarn install to get all packages
2. use yarn start, get the frontend server url, copy the server url
3. open dev env website's devtools, enter localStorage.setItem("devtools",true); in console table. Will see a button like{...} after refresh the page.
4. Click the {...} button and select the module named @mytw/people-frontend, use the local frontend service origin to override, then refresh the page.
5. Can debug with local service now.

Releasing Package (only for teams who choose npm as CDN)

1. Version

Version using the available script and it will create commit and tag for the version bump

yarn version:patch

yarn version:minor

yarn version:major

2. Pushing changes including tags

git push origin main --tags

3. CircleCI Workflow

The Publish NPM Package Job is enabled in the workflow only for tag publish in git. Make sure All branches is selected in the branch filter to see the tag commit in CircleCI

Unpublish in case of emergency or security threats

Run the following command. Once you unpublish you cannot republish using the same version.

 npm unpublish @mytw/people-frontend@0.0.0 --force

4. Minimal Setup for CircleCI

Refer CircleCI for minimal setup. You can additionally add any workflow. The workflow contains immediate deployment strategy for import-maps includes

- NOTE: ANY WORKFLOW SHOULD HAVE SEMGREP IN PLACE TO AVOID SECURITY INCIDENTS