Merge branch 'dev' into PROD-1531_update_documentation

Author: Maria Mattlin

.circleci/config.yml

@@ -11,7 +11,7 @@ install_dependency: &install_dependency
 install_deploysuite: &install_deploysuite
   name: Installation of install_deploysuite.
   command: |
-    git clone --branch v1.4.2 https://github.com/topcoder-platform/tc-deploy-scripts ../buildscript
+    git clone --branch v1.4.8 https://github.com/topcoder-platform/tc-deploy-scripts ../buildscript
     cp ./../buildscript/master_deploy.sh .
     cp ./../buildscript/buildenv.sh .
     cp ./../buildscript/awsconfiguration.sh .
@@ -53,15 +53,15 @@ jobs:
     environment:
       DEPLOY_ENV: "DEV"
       LOGICAL_ENV: "dev"
-      APPNAME: "micro-frontends-frame"
+      APPNAME: "mfe-core"
     steps: *builddeploy_steps
 
   "build-prod":
     <<: *defaults
     environment:
       DEPLOY_ENV: "PROD"
       LOGICAL_ENV: "prod"
-      APPNAME: "micro-frontends-frame"
+      APPNAME: "mfe-core"
     steps: *builddeploy_steps
 
 workflows:

README.md

@@ -1,14 +1,14 @@
-# Topcoder Frame Single-Spa Application (micro-frontends-frame)
+# Topcoder Frame Single-Spa Application (mfe-core)
 
-This is the micro-frontends-frame [single-spa](https://single-spa.js.org/) application which loads all other Topcoder micro-frontend applications.
-It always loads **Topcoder Navbar Microapp** which provides the top-level navigation, handles authorization, and loads other microapps depend on the current URL.
+This is the mfe-core [single-spa](https://single-spa.js.org/) application which loads all other Topcoder micro applications.
+It always loads **Topcoder Navbar Microapp** which show the top navigation and handles authorization and loads other microapps depend on the current URL.
 
 ## Overview
 
 Topcoder Single Spa consist of 3 main components:
 
-- This frame application which is `micro-frontends-frame` [single-spa](https://single-spa.js.org/) application. The only function of this application is to register other micro applications to load.
-- **Topcoder Navbar Microapp** - micro application which is always loaded by the frame application and shows the top-level navigation bar and handles user authorization.
+- This frame application which is `mfe-core` [single-spa](https://single-spa.js.org/) application. The only function of this application is to register other micro applications to load.
+- **Topcoder Navbar Microapp** - micro application which is always loaded by the frame application and shows top navigation bar and handles user authorization.
 - Any other micro application can be loaded as main content of the overall application.
 
 ## Requirements
@@ -53,15 +53,15 @@ Given this complexity, it is recommended that you use a tool like [iTerm2](https
 
 ## Application Configuration
 
-This `micro-frontends-frame` app has 2 types of configs:
+This `mfe-core` app has 2 types of configs:
 
 1. Import mapping for the frame, containg `micro app name` and `relative url path` for each micro app. The configuration files are available on TC AWS S3 and have public access.
 
     i. What needs to be added for a new micro-app:
     ```json
     {
         "imports": {
-            "@topcoder/micro-frontends-navbar-app": "https://mfe.topcoder-dev.com/navbar/topcoder-micro-frontends-navbar-app.js",
+            "@topcoder/mfe-header": "https://mfe.topcoder-dev.com/navbar/topcoder-mfe-header.js",
             "<MICRO_APP_NAME>": "<RELATIVE_URL_PATH>"
         }
     }
@@ -70,7 +70,7 @@ This `micro-frontends-frame` app has 2 types of configs:
     ii. Location of the AWS S3 files:
     - Configure micro app names and relative URL to be used when deployed to production environment in file at location : `https://tc-platform-prod.s3.amazonaws.com/micro-frontends/micro-frontends-config-production.json`
     - Configure micro app names and relative URL to be used when deployed to development environment in file at location : `https://tc-platform-dev.s3.amazonaws.com/micro-frontends/micro-frontends-config-development.json`
-    - Configure micro app names and relative URL to be used when deployed to local environment in file at location : `./micro-frontends-frame/config/micro-frontends-config-local.json`
+    - Configure micro app names and relative URL to be used when deployed to local environment in file at location : `./mfe-core/config/micro-frontends-config-local.json`
 
 
 2. Route mapping handled by the frame, containing `route path` and `micro app name` for each micro app. The configuration files are available on TC AWS S3 and have public access.
@@ -84,7 +84,7 @@ This `micro-frontends-frame` app has 2 types of configs:
     ii. Location of the AWS S3 files:
     - Configure route path and micro app name to be used when deployed to production environment in file at location : `https://tc-platform-prod.s3.amazonaws.com/micro-frontends/micro-frontends-routes-production.txt`
     - Configure route path and micro app name to be used when deployed to development environment in file at location : `https://tc-platform-dev.s3.amazonaws.com/micro-frontends/micro-frontends-routes-development.txt`
-    - Configure route path and micro app name to be used when deployed to development environment in file at location : `./micro-frontends-frame/config/micro-frontends-routes-local.txt`
+    - Configure route path and micro app name to be used when deployed to development environment in file at location : `./mfe-core/config/micro-frontends-routes-local.txt`
 
 ⚠️ **NOTE** : When a configuration files is updated on TC AWS S3, make sure to give public access to the file.
 
@@ -102,7 +102,7 @@ This `micro-frontends-frame` app has 2 types of configs:
 
 ## Local Deployment from multi web servers (nodemon & webpack-dev-server) for local development
 
-To deploy `micro-frontends-frame` app locally run inside the project root `./micro-frontends-frame`:
+To deploy `mfe-core` app locally run inside the project root `./mfe-core`:
 
 | Command              | Description            |
 | -------------------- | ---------------------- |
@@ -117,7 +117,7 @@ To deploy `micro-frontends-frame` app locally run inside the project root `./mic
 
 ## Local Deployment from web server (node)
 
-To deploy `micro-frontends-frame` app locally run inside the project root `./micro-frontends-frame`:
+To deploy `mfe-core` app locally run inside the project root `./mfe-core`:
 
 | Command              | Description            |
 | -------------------- | ---------------------- |
@@ -189,7 +189,7 @@ For adding a child app to the root app make the following steps:
 1. Add child app path to importmap. File underpath
 - `https://tc-platform-prod.s3.amazonaws.com/micro-frontends/micro-frontends-config-production.json` for production deployment
 - `https://tc-platform-dev.s3.amazonaws.com/micro-frontends/micro-frontends-config-development.json` for development deployment
-- `./micro-frontends-frame/config/micro-frontends-config-local.json` for local deployment
+- `./mfe-core/config/micro-frontends-config-local.json` for local deployment
 
    React example:
 
@@ -206,7 +206,7 @@ For adding a child app to the root app make the following steps:
 2. Add a route which should show the app. File underpath
 - `https://tc-platform-prod.s3.amazonaws.com/micro-frontends/micro-frontends-routes-production.txt` for production deployment
 - `https://tc-platform-dev.s3.amazonaws.com/micro-frontends/micro-frontends-routes-development.txt` for development deployment
-- `./micro-frontends-frame/config/micro-frontends-routes-local.txt` for local deployment
+- `./mfe-core/config/micro-frontends-routes-local.txt` for local deployment
 
    ```html
    <route path="<RELATIVE_URL_PATH>">
@@ -216,7 +216,7 @@ For adding a child app to the root app make the following steps:
 
 ## Add-hoc child app replacement (import override)
 
-To run a child app locally we always need to have frame (`micro-frontends-frame`) which would load a child app. But the cool thing is that we don't have to deploy the frame locally and we can use already deployed frame app. We can use a dev tool to override a child app URL so it would be loaded from the local machine by following the next steps:
+To run a child app locally we always need to have frame (`mfe-core`) which would load a child app. But the cool thing is that we don't have to deploy the frame locally and we can use already deployed frame app. We can use a dev tool to override a child app URL so it would be loaded from the local machine by following the next steps:
 
 - Load already deployed frame app in the browser.
 - Open browser console and set `devtools` flag in the local storage by executing the next command:
@@ -349,8 +349,8 @@ There is no universal approach to run any React app as child app in Single SPA.
 
 
 ### Checkout 4 repos and apply patches:
-- git clone https://github.com/topcoder-platform/micro-frontends-frame.git
-- git clone https://github.com/topcoder-platform/micro-frontends-navbar-app.git
+- git clone https://github.com/topcoder-platform/mfe-core.git
+- git clone https://github.com/topcoder-platform/mfe-header.git
 - git clone https://github.com/topcoder-platform/micro-frontends-react-app.git
 - git clone https://github.com/topcoder-platform/micro-frontends-angular-app.git
 and create a folder (ex: 'auth0-local-login'), and save the following file: 'https://accounts-auth0.topcoder-dev.com/setupAuth0WithRedirect.js' into that folder. After 'setupAuth0WithRedirect.js' file was saved, create an empty 'index.html' file with the following content:
@@ -375,8 +375,8 @@ and create a folder (ex: 'auth0-local-login'), and save the following file: 'htt
 (1). root-config: 
 open Terminal #1
 change the current dir to the root-config folder and apply patch:
-- cd micro-frontends-frame
-- git apply ../micro-frontends-frame.diff --ignore-whitespace --whitespace=nowarn
+- cd mfe-core
+- git apply ../mfe-core.diff --ignore-whitespace --whitespace=nowarn
 install dependencies:
 - npm install
 build and run the app:
@@ -385,8 +385,8 @@ build and run the app:
 (2). navbar-app: 
 open Terminal #2
 change the current dir to the navbar-app folder and apply patch:
-- cd micro-frontends-navbar-app
-- git apply ../micro-frontends-navbar-app.diff --ignore-whitespace --whitespace=nowarn
+- cd mfe-header
+- git apply ../mfe-header.diff --ignore-whitespace --whitespace=nowarn
 there is a config file: '{navbar-app-repo}/config/development.js'. To login locally, change 'ACCOUNTS_APP_CONNECTOR', and 'AUTH' to point to the server that will be served in folder 'auth0-local-login' which was setup in the previous step.
 ```
 URL: {
@@ -443,9 +443,9 @@ The app can be open at the browser url: 'http://localhost:5000' (this page will
 
 ### Checkout 4 repos and apply patches:
 
-- git clone https://github.com/topcoder-platform/micro-frontends-frame.git
+- git clone https://github.com/topcoder-platform/mfe-core.git
 
-- git clone https://github.com/topcoder-platform/micro-frontends-navbar-app.git
+- git clone https://github.com/topcoder-platform/mfe-header.git
 
 - git clone https://github.com/topcoder-platform/micro-frontends-react-app.git
 
@@ -495,9 +495,9 @@ open Terminal #1
 
 change the current dir to the root-config folder and apply patch:
 
-- cd micro-frontends-frame
+- cd mfe-core
 
-- git apply ../micro-frontends-frame.diff --ignore-whitespace --whitespace=nowarn
+- git apply ../mfe-core.diff --ignore-whitespace --whitespace=nowarn
 
 install dependencies:
 
@@ -515,9 +515,9 @@ open Terminal #2
 
 change the current dir to the navbar-app folder and apply patch:
 
-- cd micro-frontends-navbar-app
+- cd mfe-header
 
-- git apply ../micro-frontends-navbar-app.diff --ignore-whitespace --whitespace=nowarn
+- git apply ../mfe-header.diff --ignore-whitespace --whitespace=nowarn
 
 there is a config file: '{navbar-app-repo}/config/development.js'. To login locally, change 'ACCOUNTS_APP_CONNECTOR', and 'AUTH' to point to the server that will be served in folder 'auth0-local-login' which was setup in the previous step.
 
@@ -619,4 +619,4 @@ change the current dir to the 'auth0-local-login' folder and serve with the inde
 
 - npx http-server . -p 5000
 
-The app can be open at the browser url: 'http://localhost:5000' (this page will redirect to the actual page: 'http://localhost:3000')
+The app can be open at the browser url: 'http://localhost:5000' (this page will redirect to the actual page: 'http://localhost:3000')

config/constants.js

@@ -2,15 +2,15 @@ module.exports = Object.freeze({
   APP_CONFIG: [
     {
       'appEnv': 'dev',
-      'mfeConfigPath': 'https://tc-public-static-files.topcoder-dev.com/micro-frontends/micro-frontends-config-development.json',
+      'mfeConfigPath': '/config/micro-frontends-config-dev.json',
       'mfeIndexPath': '/index.html',
-      'mfeRoutesPath': 'https://tc-public-static-files.topcoder-dev.com/micro-frontends/micro-frontends-routes-development.txt'
+      'mfeRoutesPath': '/config/micro-frontends-routes-dev.txt'
     },
     {
       'appEnv': 'prod',
-      'mfeConfigPath': 'https://tc-public-static-files.topcoder.com/micro-frontends/micro-frontends-config-production.json',
+      'mfeConfigPath': '/config/micro-frontends-config-prod.json',
       'mfeIndexPath': '/index.html',
-      'mfeRoutesPath': 'https://tc-public-static-files.topcoder.com/micro-frontends/micro-frontends-routes-production.txt'
+      'mfeRoutesPath': '/config/micro-frontends-routes-prod.txt'
     },
     {
       'appEnv': 'local-multi',

config/docs/adr-01.md

@@ -0,0 +1,9 @@
+# ADR-01 2022-05-06
+
+- by [email protected] and [email protected]
+
+We moved the source of the config json and routes txt files to source control
+from the S3 server in order to simplify modifications.
+
+There is no sensitive info in these files, so there is no need to host
+them any differently in prod or dev envs.

config/micro-frontends-config-dev.json

@@ -0,0 +1,18 @@
+{
+  "imports": {
+    "@topcoder/mfe-header": "https://platform.topcoder-dev.com/navbar/topcoder-mfe-header.js",
+    "@topcoder/micro-frontends-react-app": "https://platform.topcoder-dev.com/react/topcoder-micro-frontends-react-app.js",
+    "@topcoder/micro-frontends-angular-app": "https://platform.topcoder-dev.com/angular/main.js",
+    "@topcoder/micro-frontends-teams": "https://platform.topcoder-dev.com/taas-app/topcoder-micro-frontends-teams.js",
+    "@topcoder/micro-frontends-task-marketplace-app": "https://platform.topcoder-dev.com/tasks/topcoder-micro-frontends-task-marketplace-app.js",
+    "@topcoder/micro-frontends-earn-app": "https://platform.topcoder-dev.com/earn-app/topcoder-micro-frontends-earn-app.js",
+    "@topcoder/micro-frontends-submission-review-app": "https://platform.topcoder-dev.com/submissionreview/topcoder-micro-frontends-submission-review-app.js",
+    "@topcoder/micro-frontends-model-app": "https://platform.topcoder-dev.com/model-app/topcoder-micro-frontends-model-app.js",
+    "@topcoder/micro-frontends-community-admin-app": "https://tc-micro-community-admin.herokuapp.com/community-admin-app/topcoder-micro-frontends-community-admin-app.js",
+    "@topcoder/micro-frontends-taas-admin-app": "https://platform.topcoder-dev.com/taas-admin-app/topcoder-micro-frontends-taas-admin-app.js",
+    "@topcoder/micro-frontends-profile-app": "https://platform.topcoder-dev.com/profile-app/topcoder-micro-frontends-profile-app.js",
+    "@topcoder/micro-frontends-onboarding-app": "https://platform.topcoder-dev.com/onboarding-app/topcoder-micro-frontends-onboarding-app.js",
+    "@topcoder/micro-frontends-forums-app": "https://platform.topcoder-dev.com/forums-app/topcoder-micro-frontends-forums-app.js",    
+    "@topcoder/mfe-customer-work": "https://platform.topcoder-dev.com/self-service-app/topcoder-mfe-customer-work.js"
+  }
+}

config/micro-frontends-config-local.json

@@ -1,6 +1,6 @@
 {
   "imports": {
-    "@topcoder/micro-frontends-navbar-app": "http://localhost:3001/navbar/topcoder-micro-frontends-navbar-app.js",
+    "@topcoder/mfe-header": "http://localhost:3001/navbar/topcoder-mfe-header.js",
     "@topcoder/micro-frontends-taas-admin-app": "https://platform.topcoder-dev.com/taas-admin-app/topcoder-micro-frontends-taas-admin-app.js",
     "@topcoder/micro-frontends-react-app": "https://platform.topcoder-dev.com/react/topcoder-micro-frontends-react-app.js",
     "@topcoder/micro-frontends-angular-app": "https://platform.topcoder-dev.com/angular/main.js",
@@ -13,6 +13,6 @@
     "@topcoder/micro-frontends-profile-app": "http://localhost:8009/profile-app/topcoder-micro-frontends-profile-app.js",
     "@topcoder/micro-frontends-onboarding-app": "http://localhost:8510/onboarding-app/topcoder-micro-frontends-onboarding-app.js",
     "@topcoder/micro-frontends-forums-app": "http://localhost:8510/forums-app/topcoder-micro-frontends-forums-app.js",
-    "@topcoder/micro-frontends-self-service-app": "http://localhost:8519/self-service-app/topcoder-micro-frontends-self-service-app.js"
+    "@topcoder/mfe-customer-work": "http://localhost:8519/self-service-app/topcoder-mfe-customer-work.js"
   }
 }

config/micro-frontends-config-prod.json

@@ -0,0 +1,16 @@
+{
+  "imports": {
+    "@topcoder/mfe-header": "https://platform.topcoder.com/navbar/topcoder-mfe-header.js",
+    "@topcoder/micro-frontends-react-app": "https://platform.topcoder.com/react/topcoder-micro-frontends-react-app.js",
+    "@topcoder/micro-frontends-angular-app": "https://platform.topcoder.com/angular/main.js",
+    "@topcoder/micro-frontends-teams": "https://platform.topcoder.com/taas-app/topcoder-micro-frontends-teams.js",
+    "@topcoder/micro-frontends-task-marketplace-app": "https://platform.topcoder.com/tasks/topcoder-micro-frontends-task-marketplace-app.js",
+    "@topcoder/micro-frontends-earn-app": "https://platform.topcoder.com/earn-app/topcoder-micro-frontends-earn-app.js",
+    "@topcoder/micro-frontends-submission-review-app": "https://platform.topcoder.com/submissionreview/topcoder-micro-frontends-submission-review-app.js",
+    "@topcoder/micro-frontends-model-app": "https://platform.topcoder.com/model-app/topcoder-micro-frontends-model-app.js",
+    "@topcoder/micro-frontends-taas-admin-app": "https://platform.topcoder.com/taas-admin-app/topcoder-micro-frontends-taas-admin-app.js",
+    "@topcoder/micro-frontends-profile-app": "https://platform.topcoder.com/profile-app/topcoder-micro-frontends-profile-app.js",
+    "@topcoder/micro-frontends-onboarding-app": "https://platform.topcoder.com/onboarding-app/topcoder-micro-frontends-onboarding-app.js",    
+    "@topcoder/mfe-customer-work": "https://platform.topcoder.com/self-service-app/topcoder-mfe-customer-work.js"
+  }
+}