Merge branch...

Merge branch '35530-serverless-on-knative-install-functions-view-invite-user-to-help-shape-gitlab-serverless' into 'master'

Place link in clusters page to pre-filled survey for Knative users

Closes #35530

See merge request gitlab-org/gitlab!23025

app/assets/javascripts/clusters/clusters_bundle.js

@@ -8,13 +8,20 @@ import Flash from '../flash';
 import Poll from '../lib/utils/poll';
 import initSettingsPanels from '../settings_panels';
 import eventHub from './event_hub';
-import { APPLICATION_STATUS, INGRESS, INGRESS_DOMAIN_SUFFIX, CROSSPLANE } from './constants';
+import {
+  APPLICATION_STATUS,
+  INGRESS,
+  INGRESS_DOMAIN_SUFFIX,
+  CROSSPLANE,
+  KNATIVE,
+} from './constants';
 import ClustersService from './services/clusters_service';
 import ClustersStore from './stores/clusters_store';
 import Applications from './components/applications.vue';
 import RemoveClusterConfirmation from './components/remove_cluster_confirmation.vue';
 import setupToggleButtons from '../toggle_buttons';
 import initProjectSelectDropdown from '~/project_select';
+import initServerlessSurveyBanner from '~/serverless/survey_banner';
 
 const Environments = () => import('ee_component/clusters/components/environments.vue');
 
@@ -326,6 +333,10 @@ export default class Clusters {
         this.store.state.applications[INGRESS],
       );
     }
+
+    if (this.store.state.applications[KNATIVE]?.status === APPLICATION_STATUS.INSTALLED) {
+      initServerlessSurveyBanner();
+    }
   }
 
   showToken() {

app/assets/javascripts/pages/projects/serverless/index.js

 import ServerlessBundle from '~/serverless/serverless_bundle';
+import initServerlessSurveyBanner from '~/serverless/survey_banner';
 
 document.addEventListener('DOMContentLoaded', () => {
+  initServerlessSurveyBanner();
   new ServerlessBundle(); // eslint-disable-line no-new
 });

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 && !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,
+    );
+
+    bannerInstance = new Vue({
+      el,
+      render(createElement) {
+        return createElement(SurveyBanner, {
+          props: {
+            surveyUrl,
+          },
+        });
+      },
+    });
+  }
+}

app/assets/javascripts/serverless/survey_banner.vue

+<script>
+import Cookies from 'js-cookie';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import { GlBanner } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlBanner,
+  },
+  props: {
+    surveyUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      visible: true,
+    };
+  },
+  created() {
+    if (parseBoolean(Cookies.get('hide_serverless_survey'))) {
+      this.visible = false;
+    }
+  },
+  methods: {
+    handleClose() {
+      Cookies.set('hide_serverless_survey', 'true', { expires: 365 * 10 });
+      this.visible = false;
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-banner
+    v-if="visible"
+    class="mt-4"
+    :title="s__('Serverless|Help shape the future of Serverless at GitLab')"
+    :button-text="s__('Serverless|Sign up for First Look')"
+    :button-link="surveyUrl"
+    @close="handleClose"
+  >
+    <p>
+      {{
+        s__(
+          'Serverless|We are continually striving to improve our Serverless functionality. As a Knative user, we would love to hear how we can make this experience better for you. Sign up for GitLab First Look today and we will be in touch shortly.',
+        )
+      }}
+    </p>
+  </gl-banner>
+</template>

app/views/clusters/clusters/show.html.haml

@@ -39,6 +39,8 @@
   .js-cluster-application-notice
     .flash-container
 
+  .js-serverless-survey-banner{ data: { user_name: current_user.name, user_email: current_user.email } }
+
   %h4= @cluster.name
   = render 'banner'
 

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

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

changelogs/unreleased/35530-serverless-on-knative-install-functions-view-invite-user-to-help-sh.yml

+---
+title: Provide link to a survey for Knative users
+merge_request: 23025
+author:
+type: other

locale/gitlab.pot

@@ -17972,6 +17972,9 @@ msgstr ""
 msgid "Serverless|Getting started with serverless"
 msgstr ""
 
+msgid "Serverless|Help shape the future of Serverless at GitLab"
+msgstr ""
+
 msgid "Serverless|If you believe none of these apply, please check back later as the function data may be in the process of becoming available."
 msgstr ""
 
@@ -17984,6 +17987,9 @@ msgstr ""
 msgid "Serverless|No functions available"
 msgstr ""
 
+msgid "Serverless|Sign up for First Look"
+msgstr ""
+
 msgid "Serverless|The deploy job has not finished."
 msgstr ""
 
@@ -17993,6 +17999,9 @@ msgstr ""
 msgid "Serverless|There is currently no function data available from Knative. This could be for a variety of reasons including:"
 msgstr ""
 
+msgid "Serverless|We are continually striving to improve our Serverless functionality. As a Knative user, we would love to hear how we can make this experience better for you. Sign up for GitLab First Look today and we will be in touch shortly."
+msgstr ""
+
 msgid "Serverless|Your %{startTag}.gitlab-ci.yml%{endTag} file is not properly configured."
 msgstr ""
 

spec/frontend/serverless/survey_banner_spec.js

+import { shallowMount } from '@vue/test-utils';
+import Cookies from 'js-cookie';
+import SurveyBanner from '~/serverless/survey_banner.vue';
+import { GlBanner } from '@gitlab/ui';
+
+describe('Knative survey banner', () => {
+  let wrapper;
+
+  function mountBanner() {
+    wrapper = shallowMount(SurveyBanner, {
+      propsData: {
+        surveyUrl: 'http://somesurvey.com/',
+      },
+    });
+  }
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('should render the banner when the cookie is absent', () => {
+    jest.spyOn(Cookies, 'get').mockReturnValue(undefined);
+    mountBanner();
+
+    expect(Cookies.get).toHaveBeenCalled();
+    expect(wrapper.find(GlBanner).exists()).toBe(true);
+  });
+
+  it('should close the banner and set a cookie when close button is clicked', () => {
+    jest.spyOn(Cookies, 'get').mockReturnValue(undefined);
+    jest.spyOn(Cookies, 'set');
+    mountBanner();
+
+    expect(wrapper.find(GlBanner).exists()).toBe(true);
+    wrapper.find(GlBanner).vm.$emit('close');
+
+    return wrapper.vm.$nextTick().then(() => {
+      expect(Cookies.set).toHaveBeenCalledWith('hide_serverless_survey', 'true', { expires: 3650 });
+      expect(wrapper.find(GlBanner).exists()).toBe(false);
+    });
+  });
+
+  it('should not render the banner when the cookie is set', () => {
+    jest.spyOn(Cookies, 'get').mockReturnValue('true');
+    mountBanner();
+
+    expect(Cookies.get).toHaveBeenCalled();
+    expect(wrapper.find(GlBanner).exists()).toBe(false);
+  });
+});