fix: workaround for chrome issue (#569)

* fix: workaround for chrome issue * chore: update coverage * chore: move class to other element * chore: improve remove class logic * chore: improve handle class logic * chore: rename class * chore: remove class from app-bar element * chore: add workaround for dots.svg button * chore: add workaround for dots.svg button
SAP · Apr 21, 2021 · 5d73261 · 5d73261
1 parent 45b5541
commit 5d73261
Show file tree

Hide file tree

Showing 10 changed files with 69 additions and 39 deletions.
diff --git a/packages/frontend/jest.config.js b/packages/frontend/jest.config.js
@@ -5,6 +5,7 @@ module.exports = {
   collectCoverageFrom: [
     "src/**/*.{js,vue}",
     "!**/node_modules/**",
+    "!<rootDir>/src/utils.js",
     "!<rootDir>/src/main.js",
     "!<rootDir>/src/exploreGensMain.js",
     "!<rootDir>/src/exploreGensMessages.js",

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -18,7 +18,7 @@
     "coverage:copy": "shx mkdir -p ../../coverage && shx cp -u ./coverage/lcov.info ../../coverage/lcov_frontend.info"
   },
   "dependencies": {
-    "@mdi/font": "5.5.55",
+    "@mdi/font": "5.9.55",
     "@sap-devx/inquirer-gui": "0.1.27",
     "@sap-devx/inquirer-gui-file-browser-plugin": "0.0.5",
     "@sap-devx/inquirer-gui-folder-browser-plugin": "0.0.3",

diff --git a/packages/frontend/src/App.vue b/packages/frontend/src/App.vue
@@ -11,6 +11,7 @@
     ></loading>
 
     <Header
+      id="header"
       v-if="prompts.length"
       :headerTitle="headerTitle"
       :stepName="promptIndex < prompts.length ? prompts[promptIndex].name : ''"
@@ -141,6 +142,7 @@ import LoginPlugin from "@sap-devx/inquirer-gui-login-plugin";
 import TilesPlugin from "@sap-devx/inquirer-gui-tiles-plugin";
 import LabelPlugin from "@sap-devx/inquirer-gui-label-plugin";
 import { Severity } from "@sap-devx/yeoman-ui-types";
+import utils from "./utils";
 
 const FUNCTION = "__Function";
 const PENDING = "pending";
@@ -664,6 +666,8 @@ export default {
   },
   mounted() {
     this.init();
+    // TODO: remove after a solution is found for DEVXBUGS-8741
+    utils.addAndRemoveClass("header", "material-icons");
   },
 };
 </script>

diff --git a/packages/frontend/src/ExploreGensApp.vue b/packages/frontend/src/ExploreGensApp.vue
@@ -1,7 +1,7 @@
 <template>
   <v-app id="exploregens" class="exploregens-main explore-generators">
     <div>
-      <v-app-bar dense class="pa-0 ma-0 elevation-0">
+      <v-app-bar id="app-bar" dense class="pa-0 ma-0 elevation-0">
         <v-toolbar-title>{{ messages.title }}</v-toolbar-title>
       </v-app-bar>
     </div>
@@ -118,9 +118,12 @@
     <div v-if="!isLegalNoteAccepted && ready">
       <v-row class="pa-2">
         <v-col>
-          <v-card-text class="pa-0 ma-0" style="font-size: 14px">{{
-            messages.legal_note
-          }}</v-card-text>
+          <v-card-text
+            id="legal-note"
+            class="pa-0 ma-0"
+            style="font-size: 14px"
+            >{{ messages.legal_note }}</v-card-text
+          >
           <v-btn class="mt-6" @click="onAcceptLegalNote">{{
             messages.accept
           }}</v-btn>
@@ -136,6 +139,7 @@ import * as _ from "lodash";
 import { RpcBrowser } from "@sap-devx/webview-rpc/out.browser/rpc-browser";
 import { RpcBrowserWebSockets } from "@sap-devx/webview-rpc/out.browser/rpc-browser-ws";
 import messages from "./exploreGensMessages";
+import utils from "./utils";
 
 export default {
   name: "exploregens",
@@ -298,6 +302,10 @@ export default {
     ]);
     this.ready = true;
   },
+  mounted() {
+    // TODO: remove after a solution is found for DEVXBUGS-8741
+    utils.addAndRemoveClass("legal-note", "material-icons");
+  },
 };
 </script>
 <style scoped>

diff --git a/packages/frontend/src/components/Navigation.vue b/packages/frontend/src/components/Navigation.vue
@@ -60,6 +60,7 @@ div.v-stepper.v-stepper--vertical {
   background-color: transparent;
   box-shadow: none;
   border-radius: 0;
+  border-image: url("../assets/dots.svg");
 }
 div.v-stepper div.v-stepper__step {
   padding: 24px;

diff --git a/packages/frontend/src/exploreGensMain.js b/packages/frontend/src/exploreGensMain.js
@@ -1,7 +1,6 @@
 import Vue from "vue";
 import ExploreGensApp from "./ExploreGensApp";
 import vuetify from "./plugins/vuetify";
-import "./assets/css/globalStyles.css";
 
 Vue.config.productionTip = false;
 

diff --git a/packages/frontend/src/main.js b/packages/frontend/src/main.js
@@ -2,8 +2,6 @@ import Vue from "vue";
 import App from "./App";
 
 import vuetify from "./plugins/vuetify";
-import "material-design-icons-iconfont/dist/material-design-icons.css";
-import "./assets/css/globalStyles.css";
 import "@sap-devx/inquirer-gui/dist/form.css";
 
 import Form from "@sap-devx/inquirer-gui";

diff --git a/packages/frontend/src/plugins/vuetify.js b/packages/frontend/src/plugins/vuetify.js
@@ -1,5 +1,6 @@
 import Vue from "vue";
 import Vuetify from "vuetify/lib";
+import "../assets/css/globalStyles.css";
 import "material-design-icons-iconfont/dist/material-design-icons.css";
 import "@mdi/font/css/materialdesignicons.css";
 

diff --git a/packages/frontend/src/utils.js b/packages/frontend/src/utils.js
@@ -0,0 +1,22 @@
+const removeClass = (elementId, className, interval) => {
+  const refreshId = setInterval(() => {
+    const elem = document.getElementById(elementId);
+    if (elem) {
+      elem.classList.remove(className);
+      clearInterval(refreshId);
+    }
+  }, interval);
+};
+
+export default {
+  addAndRemoveClass: (elementId, className, interval = 100) => {
+    const refreshId = setInterval(() => {
+      const elem = document.getElementById(elementId);
+      if (elem) {
+        elem.classList.add(className);
+        clearInterval(refreshId);
+        removeClass(elementId, className, interval);
+      }
+    }, interval);
+  },
+};
diff --git a/yarn.lock b/yarn.lock
@@ -2113,10 +2113,10 @@
     npmlog "^4.1.2"
     write-file-atomic "^2.3.0"
 
-"@mdi/font@5.5.55":
-  version "5.5.55"
-  resolved "https://registry.yarnpkg.com/@mdi/font/-/font-5.5.55.tgz#7f83d640f0692651f5e59558da99975f42114123"
-  integrity sha512-xrVCXiRMz7ubB8mu6ehDhMADmGpLBsk3GWZccs39jWmhoTxatFnOvW8STJjqMGtePPNgGYYu/6m/AJVyMjBxnw==
+"@mdi/font@5.9.55":
+  version "5.9.55"
+  resolved "https://registry.yarnpkg.com/@mdi/font/-/font-5.9.55.tgz#41acd50b88073ded7095fc3029d8712b6e12f38e"
+  integrity sha512-jswRF6q3eq8NWpWiqct6q+6Fg/I7nUhrxYJfiEM8JJpap0wVJLQdbKtyS65GdlK7S7Ytnx3TTi/bmw+tBhkGmg==
 
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
@@ -2664,10 +2664,10 @@
   resolved "https://registry.yarnpkg.com/@types/npmlog/-/npmlog-4.1.2.tgz#d070fe6a6b78755d1092a3dc492d34c3d8f871c4"
   integrity sha512-4QQmOF5KlwfxJ5IGXFIudkeLCdMABz03RcUXu+LCb24zmln8QW6aDjuGl4d4XPVLf2j+FnjelHTP7dvceAFbhA==
 
-"@types/object-hash@^1.3.4":
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/@types/object-hash/-/object-hash-1.3.4.tgz#079ba142be65833293673254831b5e3e847fe58b"
-  integrity sha512-xFdpkAkikBgqBdG9vIlsqffDV8GpvnPEzs0IUtr1v3BEB97ijsFQ4RXVbUZwjFThhB4MDSTUfvmxUD5PGx0wXA==
+"@types/object-hash@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@types/object-hash/-/object-hash-2.1.0.tgz#284353e535481690a72bf748619d77577bd23317"
+  integrity sha512-RW3VRiuQIMo5PJ4Q1IwBtdLHL/t8ACpzUY40norN9ejE6CUBwKetmSxJnITJ0NlzN/ymF1nvPvlpvegtns7yOg==
 
 "@types/parse-json@^4.0.0":
   version "4.0.0"
@@ -5610,22 +5610,18 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
-copy-webpack-plugin@6.4.1:
-  version "6.4.1"
-  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-6.4.1.tgz#138cd9b436dbca0a6d071720d5414848992ec47e"
-  integrity sha512-MXyPCjdPVx5iiWyl40Va3JGh27bKzOTNY3NjUTrosD2q7dR/cLD0013uqJ3BpFbUjyONINjb6qI7nDIJujrMbA==
+copy-webpack-plugin@8.1.1:
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-8.1.1.tgz#3f697e162764925c2f0d235f380676125508fd26"
+  integrity sha512-rYM2uzRxrLRpcyPqGceRBDpxxUV8vcDqIKxAUKfcnFpcrPxT5+XvhTxv7XLjo5AvEJFPdAE3zCogG2JVahqgSQ==
   dependencies:
-    cacache "^15.0.5"
-    fast-glob "^3.2.4"
-    find-cache-dir "^3.3.1"
+    fast-glob "^3.2.5"
     glob-parent "^5.1.1"
-    globby "^11.0.1"
-    loader-utils "^2.0.0"
+    globby "^11.0.3"
     normalize-path "^3.0.0"
-    p-limit "^3.0.2"
+    p-limit "^3.1.0"
     schema-utils "^3.0.0"
     serialize-javascript "^5.0.1"
-    webpack-sources "^1.4.3"
 
 copy-webpack-plugin@^5.1.1:
   version "5.1.2"
@@ -7286,7 +7282,7 @@ fast-glob@^2.0.2, fast-glob@^2.2.6:
     merge2 "^1.2.3"
     micromatch "^3.1.10"
 
-fast-glob@^3.1.1, fast-glob@^3.2.4:
+fast-glob@^3.1.1, fast-glob@^3.2.5:
   version "3.2.5"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.5.tgz#7939af2a656de79a4f1901903ee8adcaa7cb9661"
   integrity sha512-2DtFcgT68wiTTiwZ2hNdJfcHNke9XOfnwmBRWXhmeKM8rF0TGwmC/Qto3S7RoZKp5cilZbxzO5iTNTQsJ+EeDg==
@@ -8062,7 +8058,7 @@ globals@^9.18.0:
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
   integrity sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==
 
-globby@^11.0.1:
+globby@^11.0.1, globby@^11.0.3:
   version "11.0.3"
   resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.3.tgz#9b1f0cb523e171dd1ad8c7b2a9fb4b644b9593cb"
   integrity sha512-ffdmosjA807y7+lA1NM0jELARVmYul/715xiILEjo3hBLPTcirgQNnXECn5g3mtR8TOLCVbkfua1Hpen25/Xcg==
@@ -14679,13 +14675,13 @@ string-length@^3.1.0:
     astral-regex "^1.0.0"
     strip-ansi "^5.2.0"
 
-string-replace-loader@2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/string-replace-loader/-/string-replace-loader-2.3.0.tgz#7f29be7d73c94dd92eccd5c5a15651181d7ecd3d"
-  integrity sha512-HYBIHStViMKLZC/Lehxy42OuwsBaPzX/LjcF5mkJlE2SnHXmW6SW6eiHABTXnY8ZCm/REbdJ8qnA0ptmIzN0Ng==
+string-replace-loader@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/string-replace-loader/-/string-replace-loader-3.0.1.tgz#a899de524a4dfaa296e4be73f1667de150bed8d2"
+  integrity sha512-G6UD9HX1XaKXnWpKgNHPVc/pYYLtP8+UWfORY5n3GTLSUNUo2hU2ABBnC9B3hg7ATWVSIGTisiP8zGq1DlvTbg==
   dependencies:
-    loader-utils "^1.2.3"
-    schema-utils "^2.6.5"
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
 
 string-template@~0.2.1:
   version "0.2.1"
@@ -16295,10 +16291,10 @@ webpack-sources@^2.1.1:
     source-list-map "^2.0.1"
     source-map "^0.6.1"
 
-webpack@5.25.0:
-  version "5.25.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.25.0.tgz#f9409977f0f3b6d4b9c4f73adc7d7cb9603a09e9"
-  integrity sha512-jqQZopNCzt9c4K6Qa7j6kIhzHfR9wgF84go58VoNp4JbZrBr2D2l5lcv72CW80yc6NJl8CR6OY8xctnIs0r2uw==
+webpack@5.33.2:
+  version "5.33.2"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.33.2.tgz#c049717c9b038febf5a72fd2f53319ad59a8c1fc"
+  integrity sha512-X4b7F1sYBmJx8mlh2B7mV5szEkE0jYNJ2y3akgAP0ERi0vLCG1VvdsIxt8lFd4st6SUy0lf7W0CCQS566MBpJg==
   dependencies:
     "@types/eslint-scope" "^3.7.0"
     "@types/estree" "^0.0.46"