From d6da3d227b3cf964e54b2c3b71f5f990fcdefdea Mon Sep 17 00:00:00 2001
From: Martin Marosi <marvusm.mmi@gmail.com>
Date: Thu, 15 Aug 2024 09:52:53 +0200
Subject: [PATCH] Add option to disable PF4 styling.

---
 docs/disablingPf4.md         | 11 +++++++++++
 src/index.ejs                |  2 +-
 src/index.ts                 |  6 ++++++
 src/utils/debugFunctions.ts  |  3 +++
 src/utils/removePf4Styles.ts |  8 ++++++++
 5 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 docs/disablingPf4.md
 create mode 100644 src/utils/removePf4Styles.ts

diff --git a/docs/disablingPf4.md b/docs/disablingPf4.md
new file mode 100644
index 000000000..66b7b0892
--- /dev/null
+++ b/docs/disablingPf4.md
@@ -0,0 +1,11 @@
+# Disabling PF4 styling
+
+> Note: This flag is mean to be used for debugging purposes to help visually identify usage of outdated PF version
+
+## To remove PF4 styling support follow these steps
+
+1. Open your browser developer tool and access the "console" tab
+2. Run this command: `window.insights.chrome.enable.disabledPf4()`
+3. Refresh the browser page
+
+> Note: The flag uses localStorage for storage. The browser will remember the flag until the local storage is cleared. To remove the flag run `localStorage.clear()` command in you console and refresh the page.
diff --git a/src/index.ejs b/src/index.ejs
index 3c965890d..c5ad192f0 100644
--- a/src/index.ejs
+++ b/src/index.ejs
@@ -12,7 +12,7 @@
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <link rel="icon" type="image/png" href="https://access.redhat.com/webassets/avalon/g/favicon.ico">
-    <link rel="stylesheet" type="text/css" href="<%= pf4styles %>">
+    <link id="pf4-styles" rel="stylesheet" type="text/css" href="<%= pf4styles %>">
     <link rel="stylesheet" type="text/css" href="<%= pf5styles %>">
     <script type="text/javascript">
         window.insights = {
diff --git a/src/index.ts b/src/index.ts
index aa739d472..7d23bc48e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,11 @@
 import './sass/chrome.scss';
 import { chunkLoadErrorRefreshKey } from './utils/common';
+import { CHROME_PF4_DEBUG } from './utils/debugFunctions';
+import removePf4Styles from './utils/removePf4Styles';
+
+if (localStorage.getItem(CHROME_PF4_DEBUG)) {
+  removePf4Styles();
+}
 
 Object.keys(localStorage).map((key) => {
   if (key.includes(chunkLoadErrorRefreshKey)) {
diff --git a/src/utils/debugFunctions.ts b/src/utils/debugFunctions.ts
index cd9b8c890..1897088e8 100644
--- a/src/utils/debugFunctions.ts
+++ b/src/utils/debugFunctions.ts
@@ -3,6 +3,8 @@ const functionBuilder = (key: string, value: boolean | number | string) => {
   return () => window.localStorage && window.localStorage.removeItem(key);
 };
 
+export const CHROME_PF4_DEBUG = 'chrome:pf4:disabled';
+
 const debugFunctions = {
   iqe: () => functionBuilder('iqe:chrome:init', true),
   remediationsDebug: () => functionBuilder('remediations:debug', true),
@@ -23,6 +25,7 @@ const debugFunctions = {
   segmentDev: () => functionBuilder('chrome:analytics:dev', true),
   intlDebug: () => functionBuilder('chrome:intl:debug', true),
   sentryDebug: () => functionBuilder('chrome:sentry:debug', true),
+  disabledPf4: () => functionBuilder(CHROME_PF4_DEBUG, true),
 };
 
 export default debugFunctions;
diff --git a/src/utils/removePf4Styles.ts b/src/utils/removePf4Styles.ts
new file mode 100644
index 000000000..db1fc4a15
--- /dev/null
+++ b/src/utils/removePf4Styles.ts
@@ -0,0 +1,8 @@
+function removePf4Styles() {
+  const pf4Styles = document.getElementById('pf4-styles');
+  if (pf4Styles) {
+    pf4Styles.remove();
+  }
+}
+
+export default removePf4Styles;