Merge pull request #2919 from Hyperkid123/pf4-debug-flag

Add option to disable PF4 styling.

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.

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 = {

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)) {

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;

src/utils/removePf4Styles.ts

@@ -0,0 +1,8 @@
+function removePf4Styles() {
+  const pf4Styles = document.getElementById('pf4-styles');
+  if (pf4Styles) {
+    pf4Styles.remove();
+  }
+}
+
+export default removePf4Styles;