diff --git a/CHANGELOG.MD b/CHANGELOG.MD
index 8ab80e5d8..394cc43a6 100644
--- a/CHANGELOG.MD
+++ b/CHANGELOG.MD
@@ -1,5 +1,8 @@
## May 30, 2024
+- **Feature** Remove web components [🎟️ DESENG-616](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-616)
+ - Removed web components and all code that references it
+
- **Feature** Remove EAO process widget [🎟️ DESENG-626](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-626)
- Removed EAO process widget
- Added migration file to remove EAO process widget attached to any existing engagement
diff --git a/met-web/.gitignore b/met-web/.gitignore
index 75a78ac08..c95e5fe47 100644
--- a/met-web/.gitignore
+++ b/met-web/.gitignore
@@ -10,9 +10,6 @@
# production
/build
-#web-components
-/wc-lib
-
# misc
.DS_Store
.env.local
diff --git a/met-web/config-overrides-wc.js b/met-web/config-overrides-wc.js
deleted file mode 100644
index 8d8a29c72..000000000
--- a/met-web/config-overrides-wc.js
+++ /dev/null
@@ -1,41 +0,0 @@
-const path = require('path');
-const fs = require('fs');
-
-const appDirectory = fs.realpathSync(process.cwd());
-const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
-const moduleFileExtensions = [
- 'web.mjs',
- 'mjs',
- 'web.js',
- 'js',
- 'web.ts',
- 'ts',
- 'web.tsx',
- 'tsx',
- 'json',
- 'web.jsx',
- 'jsx',
- ];
-
- // Resolve file paths in the same order as webpack
-const resolveModule = (resolveFn, filePath) => {
- const extension = moduleFileExtensions.find(extension =>
- fs.existsSync(resolveFn(`${filePath}.${extension}`))
- );
-
- if (extension) {
- return resolveFn(`${filePath}.${extension}`);
- }
-
- return resolveFn(`${filePath}.js`);
- };
-
- const config = {
- entry: resolveModule(resolveApp,'src/web-components/index'),
- output: {
- path: resolveApp('wc-lib'),
- filename: `static/js/met-web-component.${require(resolveApp('package.json')).version}.js`
- }
- }
-
- module.exports = config;
\ No newline at end of file
diff --git a/met-web/config-overrides.js b/met-web/config-overrides.js
index d2cfc8571..bda1f07a4 100644
--- a/met-web/config-overrides.js
+++ b/met-web/config-overrides.js
@@ -1,7 +1,5 @@
const webpack = require('webpack');
-const wcConfig = require('./config-overrides-wc');
module.exports = function override(config) {
- const isWcBuild = process.argv.indexOf('--wc-build')!==-1;
const fallback = config.resolve.fallback || {};
Object.assign(fallback, {
crypto: require.resolve('crypto-browserify'),
@@ -25,12 +23,5 @@ module.exports = function override(config) {
fullySpecified: false, // disable the behavior
},
});
- if(isWcBuild) {
- config.entry = wcConfig.entry;
- config.output = {
- ...config.output,
- ...wcConfig.output
- }
- }
return config;
};
diff --git a/met-web/package.json b/met-web/package.json
index 7f5c1cf30..4607e85e3 100644
--- a/met-web/package.json
+++ b/met-web/package.json
@@ -82,7 +82,6 @@
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
- "build-wc": "react-app-rewired build --wc-build",
"test": "jest",
"eject": "react-scripts eject",
"lint": "eslint \"src/**/*.{ts,tsx}\"",
diff --git a/met-web/src/config.ts b/met-web/src/config.ts
index 1dcc633c1..620c62517 100644
--- a/met-web/src/config.ts
+++ b/met-web/src/config.ts
@@ -38,12 +38,9 @@ const getEnv = (key: string, defaultValue = '') => {
} else return process.env[key] || defaultValue;
};
-// adding localStorage to access the MET API from external sources(eg: web-components)
-const API_URL = localStorage.getItem('met-api-url') || getEnv('REACT_APP_API_URL');
-const PUBLIC_URL = localStorage.getItem('met-public-url') || getEnv('REACT_APP_PUBLIC_URL');
-
-// adding localStorage to access the MET Analytics API from external sources(eg: web-components)
-const REACT_APP_ANALYTICS_API_URL = localStorage.getItem('analytics-api-url') || getEnv('REACT_APP_ANALYTICS_API_URL');
+const API_URL = getEnv('REACT_APP_API_URL');
+const PUBLIC_URL = getEnv('REACT_APP_PUBLIC_URL');
+const REACT_APP_ANALYTICS_API_URL = getEnv('REACT_APP_ANALYTICS_API_URL');
// Formio Environment Variables
const FORMIO_PROJECT_URL = getEnv('REACT_APP_FORMIO_PROJECT_URL');
diff --git a/met-web/src/web-components/components/engagement-banner-wc.tsx b/met-web/src/web-components/components/engagement-banner-wc.tsx
deleted file mode 100644
index 855f489d2..000000000
--- a/met-web/src/web-components/components/engagement-banner-wc.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import React from 'react';
-import createCache from '@emotion/cache';
-import { CacheProvider } from '@emotion/react';
-import { ThemeProvider } from '@mui/material/styles';
-import { Provider } from 'react-redux';
-import ReactDOM from 'react-dom/client';
-import { EngagementBanner } from '../../components/engagement/view/EngagementBanner/StandAloneBanner';
-import createWcTheme from '../styles/wcTheme';
-import { store } from '../../store';
-import { PrimaryButtonOld } from 'components/common';
-import { Grid } from '@mui/material';
-
-export default class EngagementBannerWC extends HTMLElement {
- root: any;
- observer: MutationObserver;
- shadowContainer: any;
- constructor(componentToMount: React.ComponentType) {
- super();
- this.observer = new MutationObserver(() => this.update());
- this.observer.observe(this, { attributes: true });
- }
- connectedCallback() {
- this.shadowContainer = this.attachShadow({ mode: 'open' });
-
- this.mount();
- }
-
- disconnectedCallback() {
- this.unmount();
- this.observer.disconnect();
- }
-
- mount() {
- const emotionRoot = document.createElement('style');
- const shadowRootElement = document.createElement('div');
- this.shadowContainer.appendChild(emotionRoot);
- this.shadowContainer.appendChild(shadowRootElement);
-
- const cache = createCache({
- key: 'css',
- prepend: true,
- container: emotionRoot,
- });
- const shadowTheme = createWcTheme(shadowRootElement);
- this.root = ReactDOM.createRoot(shadowRootElement);
- const props: any = {
- ...this.getProps(this.attributes),
- ...this.getEvents(),
- };
- this.root.render(
-
-
-
-
-
- (window.location.href = props['engagementurl'])}
- >
- View Engagement
-
-
- }
- engagementSlug={this._getSlugFromUrl(props['engagementurl'])}
- {...props}
- />
-
-
-
- ,
- );
- }
-
- unmount() {
- this.root.unmount();
- }
-
- update() {
- this.unmount();
- this.mount();
- }
- getProps(attributes: any) {
- return [...attributes]
- .filter((attr) => attr.name !== 'style')
- .map((attr) => this.convert(attr.name, attr.value))
- .reduce((props, prop) => ({ ...props, [prop.name]: prop.value }), {});
- }
- getEvents() {
- return Object.values(this.attributes)
- .filter((key) => /on([a-z].*)/.exec(key.name))
- .reduce(
- (events, ev) => ({
- ...events,
- [ev.name]: (args: any) => this.dispatchEvent(new CustomEvent(ev.name, { ...args })),
- }),
- {},
- );
- }
- convert(attrName: any, attrValue: any) {
- let value = attrValue;
- if (attrValue === 'true' || attrValue === 'false') value = attrValue === 'true';
- else if (!isNaN(attrValue) && attrValue !== '') value = +attrValue;
- else if (/^{.*}/.exec(attrValue)) value = JSON.parse(attrValue);
- return {
- name: attrName,
- value: value,
- };
- }
- _getSlugFromUrl(url: string) {
- return url.substring(url.lastIndexOf('/') + 1, url.length);
- }
-}
-
-customElements.define('engagement-banner-wc', EngagementBannerWC);
diff --git a/met-web/src/web-components/components/engagment-tiles-wc.tsx b/met-web/src/web-components/components/engagment-tiles-wc.tsx
deleted file mode 100644
index 1c7b74ecb..000000000
--- a/met-web/src/web-components/components/engagment-tiles-wc.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { CacheProvider } from '@emotion/react';
-import { BrowserRouter as Router } from 'react-router-dom';
-import { Provider } from 'react-redux';
-import createCache from '@emotion/cache';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
-import TileBlock from 'components/landing/TileBlock';
-import { store } from '../../store';
-
-export default class EngagementTilesWC extends HTMLElement {
- connectedCallback() {
- const shadowContainer = this.attachShadow({ mode: 'open' });
- const emotionRoot = document.createElement('style');
- const shadowRootElement = document.createElement('div');
- shadowContainer.appendChild(emotionRoot);
- shadowContainer.appendChild(shadowRootElement);
-
- const cache = createCache({
- key: 'css',
- prepend: true,
- container: emotionRoot,
- });
- const shadowTheme = createTheme({});
-
- ReactDOM.createRoot(shadowRootElement).render(
-
-
-
-
-
-
-
-
-
-
- ,
- );
- }
-}
-customElements.define('engagement-tiles-wc', EngagementTilesWC);
diff --git a/met-web/src/web-components/components/wcBase.tsx b/met-web/src/web-components/components/wcBase.tsx
deleted file mode 100644
index ecff2b197..000000000
--- a/met-web/src/web-components/components/wcBase.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import React from 'react';
-import createCache from '@emotion/cache';
-import { CacheProvider } from '@emotion/react';
-import { ThemeProvider } from '@mui/material/styles';
-import { Provider } from 'react-redux';
-import ReactDOM from 'react-dom/client';
-import createWcTheme from '../styles/wcTheme';
-import { store } from '../../store';
-
-class WCBaseELement extends HTMLElement {
- ComponentToMount: React.ComponentType;
- root: any;
- observer: MutationObserver;
- shadowContainer: any;
- constructor(componentToMount: React.ComponentType) {
- super();
- this.ComponentToMount = componentToMount;
- this.observer = new MutationObserver(() => this.update());
- this.observer.observe(this, { attributes: true });
- }
- connectedCallback() {
- this.shadowContainer = this.attachShadow({ mode: 'open' });
-
- this.mount();
- }
-
- disconnectedCallback() {
- this.unmount();
- this.observer.disconnect();
- }
-
- mount() {
- console.log('Mounting the component');
- const ComponentToMount: React.ComponentType = this.ComponentToMount;
- const emotionRoot = document.createElement('style');
- const shadowRootElement = document.createElement('div');
- this.shadowContainer.appendChild(emotionRoot);
- this.shadowContainer.appendChild(shadowRootElement);
-
- const cache = createCache({
- key: 'css',
- prepend: true,
- container: emotionRoot,
- });
- const shadowTheme = createWcTheme(shadowRootElement);
- this.root = ReactDOM.createRoot(shadowRootElement);
- const props = {
- ...this.getProps(this.attributes),
- ...this.getEvents(),
- };
- this.root.render(
-
-
-
-
-
-
-
-
- ,
- );
- }
-
- unmount() {
- console.log('Performing unmount');
- this.root.unmount();
- }
-
- update() {
- console.log('Updating attribute');
- this.unmount();
- this.mount();
- }
- getProps(attributes: any) {
- return [...attributes]
- .filter((attr) => attr.name !== 'style')
- .map((attr) => this.convert(attr.name, attr.value))
- .reduce((props, prop) => ({ ...props, [prop.name]: prop.value }), {});
- }
- getEvents() {
- return Object.values(this.attributes)
- .filter((key) => /on([a-z].*)/.exec(key.name))
- .reduce(
- (events, ev) => ({
- ...events,
- [ev.name]: (args: any) => this.dispatchEvent(new CustomEvent(ev.name, { ...args })),
- }),
- {},
- );
- }
- convert(attrName: any, attrValue: any) {
- let value = attrValue;
- if (attrValue === 'true' || attrValue === 'false') value = attrValue === 'true';
- else if (!isNaN(attrValue) && attrValue !== '') value = +attrValue;
- else if (/^{.*}/.exec(attrValue)) value = JSON.parse(attrValue);
- return {
- name: attrName,
- value: value,
- };
- }
-}
-
-export default WCBaseELement;
diff --git a/met-web/src/web-components/index.ts b/met-web/src/web-components/index.ts
deleted file mode 100644
index ba1069f0e..000000000
--- a/met-web/src/web-components/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import EngagementTilesWC from './components/engagment-tiles-wc';
-import EngagementBannerWC from './components/engagement-banner-wc';
-export default {
- EngagementTilesWC,
- EngagementBannerWC,
-};
diff --git a/met-web/src/web-components/styles/wcTheme.ts b/met-web/src/web-components/styles/wcTheme.ts
deleted file mode 100644
index 383c9f796..000000000
--- a/met-web/src/web-components/styles/wcTheme.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { createTheme } from '@mui/material';
-import { BaseTheme } from '../../styles/Theme';
-
-export default function createWcTheme(shadowRoot: HTMLElement) {
- const wcTheme = createTheme(BaseTheme, {
- components: {
- MuiPopover: {
- defaultProps: {
- container: shadowRoot,
- },
- },
- MuiPopper: {
- defaultProps: {
- container: shadowRoot,
- },
- },
- MuiModal: {
- defaultProps: {
- container: shadowRoot,
- },
- },
- },
- });
- return wcTheme;
-}