Refactor the feedback widget (#4239)

Feedback JS resources no longer passively load on each page hit.

packages/@okta/vuepress-site/.vuepress/config.js

@@ -313,8 +313,7 @@ module.exports = ctx => ({
           ]
         }
       ]
-    },
-    '@okta/vuepress-plugin-qualtrics-feedback': {}
+    }
   },
 
   extraWatchFiles: [

packages/@okta/vuepress-site/package.json

@@ -26,7 +26,6 @@
     "semver": "^7.3.8"
   },
   "dependencies": {
-    "@okta/vuepress-plugin-qualtrics-feedback": "^1.0.0",
     "bootstrap": "^4.6.1",
     "esm": "^3.0.0",
     "js-yaml": "^3.13.1",

packages/@okta/vuepress-theme-prose/assets/css/components/_feedback.scss

@@ -0,0 +1,32 @@
+/* QUALTRICS FEEDBACK WIDGET */
+#feedback-tab {
+  position: fixed;
+
+  right: 0;
+  bottom: 158px;
+
+  width: 36px;
+  height: 139px;
+
+  overflow: hidden;
+
+  background-color: #242424;
+}
+
+#feedback-link {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+}
+
+#feedback-container {
+  transform: translate(0,70px);
+}
+
+#feedback-text {
+  transform: rotate(270deg);
+
+  font-size: 1em;
+  font-family: "arial", sans-serif;
+  color: #ffffff;
+}

packages/@okta/vuepress-theme-prose/assets/css/prose.scss

@@ -77,6 +77,7 @@
 @import "components/dialog";
 @import "components/visually-hidden";
 @import "components/wrapper";
+@import "components/feedback";
 
 //Custom Landing
 @import "components/customLanding/main";

packages/@okta/vuepress-theme-prose/components/Feedback.vue

@@ -0,0 +1,25 @@
+<template>
+  <div id="feedback-tab">
+    <a
+      id="feedback-link"
+      href="#"
+      title="Submit feedback"
+      @click="openSurvey()"
+    >
+      <div id="feedback-container">
+        <p id="feedback-text">Feedback</p>
+      </div>
+    </a>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Feedback',
+    methods: {
+      openSurvey() {
+        window.open('https://surveys.okta.com/jfe/form/SV_e4L0iW8a3tz8Yol?source=' + encodeURIComponent(document.location.href), '_blank');
+      }
+    }
+  }
+</script>

packages/@okta/vuepress-theme-prose/global-components/EventHookEANote.vue

@@ -1,8 +1,10 @@
 <template>
   <blockquote>
-    <p><strong>Note</strong>: Event hook filters is a <a href="/docs/concepts/feature-lifecycle-management/#self-service-features">self-service Early Access (EA)</a> feature.
-    See <a href="https://help.okta.com/okta_help.htm?id=ext_secur_manage_ea_bata">Manage Early Access and Beta features</a> to enable.
-    If you want to disable this feature, it’s recommended to first remove all event filters.</p>
+    <p>
+      <strong>Note</strong>: Event hook filters is a <a href="/docs/concepts/feature-lifecycle-management/#self-service-features">self-service Early Access (EA)</a> feature.
+      See <a href="https://help.okta.com/okta_help.htm?id=ext_secur_manage_ea_bata">Manage Early Access and Beta features</a> to enable.
+      If you want to disable this feature, it’s recommended to first remove all event filters.
+    </p>
   </blockquote>
 </template>
 

packages/@okta/vuepress-theme-prose/global-components/EventHookEANoteProcedure.vue

@@ -1,8 +1,10 @@
 <template>
   <blockquote>
-    <p><strong>Note</strong>:  If your org is set up to use the <a href="/docs/concepts/feature-lifecycle-management/#self-service-features">self-service Early Access (EA)</a> feature event hook filtering,
-    the event hook set up flow is slightly different. Follow the procedure in <a href="https://help.okta.com/okta_help.htm?type=oie&locale=en&id=ext-add-event-hooks">Create an event hook</a> with the same values.
-    To enable this feature, see <a href="https://help.okta.com/okta_help.htm?id=ext_secur_manage_ea_bata">Manage Early Access and Beta features</a>.</p>
+    <p>
+      <strong>Note</strong>:  If your org is set up to use the <a href="/docs/concepts/feature-lifecycle-management/#self-service-features">self-service Early Access (EA)</a> feature event hook filtering,
+      the event hook set up flow is slightly different. Follow the procedure in <a href="https://help.okta.com/okta_help.htm?type=oie&locale=en&id=ext-add-event-hooks">Create an event hook</a> with the same values.
+      To enable this feature, see <a href="https://help.okta.com/okta_help.htm?id=ext_secur_manage_ea_bata">Manage Early Access and Beta features</a>.
+    </p>
   </blockquote>
 </template>
 

packages/@okta/vuepress-theme-prose/layouts/Layout.vue

@@ -82,6 +82,7 @@
       </div>
     </div>
     <Footer />
+    <Feedback />
   </div>
 </template>
 
@@ -106,6 +107,7 @@ export default {
     ContentPage: () => import("../components/ContentPage.vue"),
     GeneratedContent: () => import("../components/GeneratedContent.vue"),
     Footer: () => import("../components/Footer.vue"),
+    Feedback: () => import("../components/Feedback.vue"),
     Quickstart: () => import("../components/Quickstart.vue"),
     Pricing: () => import("../components/Pricing.vue"),
     OktaIntegrationNetwork: () =>

tests/cypress/integration/feedback_spec.js

@@ -0,0 +1,19 @@
+import MainPage from '../page-objects/MainPage';
+
+describe('feedback widget sanity check', () => {
+  const mainPage = new MainPage();
+
+  beforeEach( () => {
+    mainPage.visit('/test_page/');
+  });
+
+  it('validate feedback widget', () => {
+    const widget = mainPage.getFeedbackWidget();
+    widget.should('be.visible');
+    widget.find('#feedback-link')
+      .should('have.attr', 'href')
+      .and('include', '#')
+      .and('not.contain', 'https://surveys.okta.com');
+  });
+
+});

tests/cypress/page-objects/MainPage.js

@@ -23,6 +23,9 @@ class MainPage extends BasePage {
       'footer ul.link-list a[href="https://www.okta.com/pricing/#workforce-identity-pricing"]'
     );
   }
+  getFeedbackWidget() {
+    return cy.get('#feedback-tab');
+  }
   getSearchBarInput() {
     return cy.get("header .search--slideout").find("input");
   }

yarn.lock

@@ -7971,10 +7971,10 @@ json-stringify-safe@~5.0.1:
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
   integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
 
-[email protected].3, json5@^1.0.1, json5@^2.1.2, json5@^2.2.1:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
-  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
+[email protected].2, json5@^1.0.1, json5@^2.1.2, json5@^2.2.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.2.tgz#64471c5bdcc564c18f7c1d4df2e2297f2457c5ab"
+  integrity sha512-46Tk9JiOL2z7ytNQWFLpj99RZkVgeHf87yGQKsIkaPz1qSH9UczKH1rO7K3wgRselo0tYMUNfecYpm/p1vC7tQ==
 
 jsonfile@^4.0.0:
   version "4.0.0"