npm package: @mytw/people-frontend
Description: ## Description This is the myTW Requests tab's frontend code base.
Latest version: 0.1.5

# 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

![](image/overview.png)


## Initial Setup (common for all release channels)

### 1. Project name

##### a) manifest (package.json)

```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

```shell
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](https://single-spa.js.org/docs/getting-started-overview), [Material UI](https://mui.com/material-ui/getting-started/)

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

```shell
yarn version:patch
```

```shell
yarn version:minor
```

```shell
yarn version:major
```

### 2. Pushing changes including tags

```shell
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.

```shell
 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

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