From d6af0d8ae9b839635180d01e523b5255e12e5d15 Mon Sep 17 00:00:00 2001 From: VineetBala-AOT <90332175+VineetBala-AOT@users.noreply.github.com> Date: Mon, 3 Jun 2024 12:42:40 -0700 Subject: [PATCH] Removing web components (#2530) Removed web components and all code that references it --- CHANGELOG.MD | 3 + met-web/.gitignore | 3 - met-web/config-overrides-wc.js | 41 ------ met-web/config-overrides.js | 9 -- met-web/package.json | 1 - met-web/src/config.ts | 9 +- .../components/engagement-banner-wc.tsx | 121 ------------------ .../components/engagment-tiles-wc.tsx | 41 ------ .../src/web-components/components/wcBase.tsx | 103 --------------- met-web/src/web-components/index.ts | 6 - met-web/src/web-components/styles/wcTheme.ts | 25 ---- 11 files changed, 6 insertions(+), 356 deletions(-) delete mode 100644 met-web/config-overrides-wc.js delete mode 100644 met-web/src/web-components/components/engagement-banner-wc.tsx delete mode 100644 met-web/src/web-components/components/engagment-tiles-wc.tsx delete mode 100644 met-web/src/web-components/components/wcBase.tsx delete mode 100644 met-web/src/web-components/index.ts delete mode 100644 met-web/src/web-components/styles/wcTheme.ts 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; -}