fix: fix menus, address undefined bug, perform housekeeping (#14)

* fix: perform housekeeping

* chore: changes

* chore: pull in menu fixes

* chore: remove file

* chore: fix undefined bug

* chore: fix docs

.circleci/config.yml

@@ -21,7 +21,7 @@ defaults_Dependencies: &defaults_Dependencies |
   apk --no-cache add ca-certificates
   apk --no-cache add curl
   apk --no-cache add openssh-client
-  apk add --no-cache -t build-dependencies make gcc g++ python libtool autoconf automake jq
+  apk add --no-cache -t build-dependencies python3 make gcc g++ libtool autoconf automake jq
   npm config set unsafe-perm true
   npm install -g node-gyp
 

.env.template

@@ -0,0 +1,13 @@
+# Specify `webpack-dev-server` port.
+# You shouldn't need to change this unless there is port collision on
+# you local machine.
+DEV_PORT=3012
+
+# The mocks have diverged from the actual API and been removed.
+# Leave this as `false` or check `src/utils/api` and add mocks.
+REACT_APP_MOCK_API=false
+
+# When locally testing leave these endpoints as is.
+# Webpack uses proxies found in `webpack.config.js` to proxy
+# the request to your locally hosted or port-forwarded `reporting-hub-bop-api-svc` service.
+REACT_APP_API_BASE_URL=/role-assignment

.gitignore

@@ -9,6 +9,7 @@ dev/*
 styleguide
 
 ## Env files
+.env
 .env.local
 
 ## modules

Dockerfile

@@ -1,9 +1,9 @@
-FROM node:lts-alpine as builder
+FROM node:14.18.1-alpine as builder
 WORKDIR /opt/reporting-hub-bop-role-ui
 ENV PATH /opt/reporting-hub-bop-role-ui/node_modules/.bin:$PATH
 
 # Install build dependencies
-RUN apk add --no-cache -t build-dependencies git make gcc g++ python libtool autoconf automake \
+RUN apk add --no-cache -t build-dependencies python3 git make gcc g++  libtool autoconf automake \
     && cd $(npm root -g)/npm \
     && npm config set unsafe-perm true \
     && npm install -g node-gyp
@@ -76,5 +76,4 @@ USER appuser
 EXPOSE 8081
 ENTRYPOINT ["/usr/share/nginx/html/entrypoint.sh"]
 CMD ["sh", "/usr/share/nginx/start.sh"]
-# TODO: Need to add 8080 to image-scan whitelist
-#       Investigate Feed data unavailable, cannot perform CVE scan for distro: alpine:3.14.2
+# TODO: Need to add 8081 to image-scan whitelist

docs/docker.md

@@ -38,7 +38,6 @@ docker build \
   --build-arg REACT_APP_NAME=`npm run name --silent` \
   --build-arg REACT_APP_VERSION=`npm run version --silent` \
   --build-arg REACT_APP_COMMIT=`git rev-parse HEAD`\
-  --build-arg PUBLIC_PATH=https://localhost:8081/\
   -t reporting-hub-bop-role-ui \
   .
 ```
@@ -51,7 +50,7 @@ The `config.json` is produced at runtime, it uses environment variables passed t
 
 ```bash
 docker run --rm \
-  -p 8081:8080 \
+  -p 8081:8081 \
   -e API_BASE_URL="https://your-api-base-url" \
   -e MOCK_API="true" \
    reporting-hub-bop-role-ui

docs/environment-variables.md

@@ -10,7 +10,6 @@ The application is driven by some environment variables used at build and runtim
 | `REACT_APP_NAME` | name extracted from package.json` | - |
 | `REACT_APP_VERSION` | version extracted from package.json` | - |
 | `REACT_APP_COMMIT` | commit extracted from git history | - |
-| `PUBLIC_PATH` | public url where the app is accessible | http://localhost:3001/ |
 
 ### Used Locally / Static Files CDN
 
@@ -30,8 +29,3 @@ The application is driven by some environment variables used at build and runtim
 #### Note About Remote URLs Variables
 
 This project is using the `REMOTE_1_URL` to dinamically load a remote. You can add as many remotes as you want or you can decide to use static know localtions without relying on environment variables for the purpose.
-
-#### Note About The Public Path
-
-When working with several host/remote applications it is a requirement that
-`PUBLIC_PATH` are updated to avoid port collision.

docs/microfrontend-setup.md

@@ -2,7 +2,7 @@
 
 This microfrontend setup is configured to have this project acting as the remote.
 
-It is responsible to export the children modules/app which will be loaded at runtime and will be provided with some context e.g. auth, routing. 
+It is responsible to export the children modules/app which will be loaded at runtime and will be provided with some context e.g. auth, routing.
 
 `microfrontend-shell-boilerplate` is a default remote (child) boilerplate meant to be consumed by a host such as [microfrontend-shell-boilerplate](https://github.com/modusintegration/microfrontend-shell-boilerplate).
 
@@ -23,7 +23,7 @@ It's important to note the remote has to use a unique name in order to work and
 
 The suggested practice is use such name as:
 - Git repository
-- Webpack Module Federation [configuration](#webpack-module-federation) 
+- Webpack Module Federation [configuration](#webpack-module-federation)
 - Module (package.json) name
 - CSS wrapper name
 
@@ -100,15 +100,6 @@ In the project root directory you can find the `webpack.config.js` configuration
 
 Code splitting is automatically enabled when using the _ModuleFederationPlugin_.
 
-#### Public Path
-
-In order to work, the microfrontend remote has to specity the correct `output.publicPath`.
-
-The `publicPath` represents the URL where the host is expected to be accessed.
-
-To simplify the configuration, this is set using the `PUBLIC_PATH` environemnt variable.
-
-
 #### Module Federation Plugin
 
 At the `webpack.config.js` plugins section, you can find the _ModuleFederationPlugin_.
@@ -138,7 +129,7 @@ plugins: [
 
 In the `expose` configuration, you need to export all the components you expect are going to be use.
 
-**Note - export only the modules** 
+**Note - export only the modules**
 
 Make sure you do not export the `bootstrap.tsx` as that is only used locally. When your modules are imported by a host, they do not need to include all the traditional context setup specified in `bootstrap.tsx` since the host will be providing that.
 

src/App/Users/views.tsx

@@ -15,7 +15,7 @@ const usersColumns = [
     label: 'Name',
     key: 'name',
     fn: (rawValue: Name) => {
-      return `${rawValue.givenName || ''} ${rawValue.familyName || ''}`;
+      return `${rawValue ? rawValue.givenName : ''} ${rawValue ? rawValue.familyName : ''}`;
     },
   },
   {

src/Menu/Menu.tsx

@@ -6,32 +6,40 @@ import { useHistory, useLocation, useRouteMatch } from 'react-router-dom';
 
 interface ExportMenuProps {
   path: string;
+  pathname: string;
+  onChange: (path: string) => void;
 }
 
-function MenuItems({ path }: ExportMenuProps) {
+interface MenuItemsProps {
+  path: string;
+}
+
+function MenuItems({ path }: MenuItemsProps) {
   return (
     <>
       <Menu.Item path={`${path}`} label="Users" />
     </>
   );
 }
 
-export default function ExportMenu({ path }: ExportMenuProps) {
+// ExportMenu is the exported component to be consumed
+// The shell passes down these props
+export default function ExportMenu({ path, pathname, onChange }: ExportMenuProps) {
   return (
-    <Provider store={store} context={ReduxContext}>
-      <MenuItems path={path} />
-    </Provider>
+    <Menu path={path} pathname={pathname} onChange={onChange}>
+      <Provider store={store} context={ReduxContext}>
+        <MenuItems path={path} />
+      </Provider>
+    </Menu>
   );
 }
 
+// AppMenu is the standalone component used when the microfrontend is not being
+// consumed
 export function AppMenu() {
   const match = useRouteMatch();
   const history = useHistory();
   const location = useLocation();
   const path = match.url === '/' ? '' : match.url;
-  return (
-    <Menu path={path} pathname={location.pathname} onChange={history.push}>
-      <ExportMenu path={path} />
-    </Menu>
-  );
+  return <ExportMenu path={path} pathname={location.pathname} onChange={history.push} />;
 }

webpack.config.js

@@ -47,6 +47,15 @@ module.exports = {
     port: config.DEV_PORT,
     host: '0.0.0.0',
     publicPath: '/',
+    proxy: {
+      // For local testing update `target` to point to your
+      // locally hosted or port-forwarded `role-assignment-service` service
+      '/role-assignment': {
+        target: 'http://localhost:port',
+        pathRewrite: { '^/role-assignment': '' },
+        secure: false,
+      },
+    },
   },
   output: {
     path: path.resolve(__dirname, 'dist'),