Pre-populate survey fields

app/assets/javascripts/serverless/survey_banner.js

 import Vue from 'vue';
+import { setUrlParams } from '~/lib/utils/url_utility';
 import SurveyBanner from './survey_banner.vue';
 
+let bannerInstance;
+const SURVEY_URL_BASE = 'https://gitlab.fra1.qualtrics.com/jfe/form/SV_00PfofFfY9s8Shf';
+
 export default function initServerlessSurveyBanner() {
   const el = document.querySelector('.js-serverless-survey-banner');
-  if (el) {
-    const surveyUrl = 'https://gitlab.fra1.qualtrics.com/jfe/form/SV_51J9D8skLbWqdil';
-    new Vue({
+  if (el && !bannerInstance) {
+    const { userName, userEmail } = el.dataset;
+
+    // pre-populate survey fields
+    const surveyUrl = setUrlParams(
+      {
+        Q_PopulateResponse: JSON.stringify({
+          QID1: userEmail,
+          QID2: userName,
+          QID16: '1', // selects "yes" to "do you currently use GitLab?"
+        }),
+      },
+      SURVEY_URL_BASE,
+    );
+
+    // eslint-disable-next-line no-new
+    bannerInstance = new Vue({
       el,
       render(createElement) {
         return createElement(SurveyBanner, {

app/views/projects/serverless/functions/index.html.haml

@@ -10,7 +10,7 @@
   help_path: help_page_path('user/project/clusters/serverless/index') } }
 
 %div{ class: [('limit-container-width' unless fluid_layout)] }
-  .js-serverless-survey-banner
+  .js-serverless-survey-banner{ data: { user_name: current_user.name, user_email: current_user.email } }
 
   .js-serverless-functions-notice
     .flash-container