Create dismissable banner for knative survey

Add a component that displays a banner, allowiing the banner to be
permamnently hidden when closed through the use of a cookie value

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 SurveyBanner from './survey_banner.vue';
+
+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({
+      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';
+import { s__ } from '../locale';
+
+export default {
+  components: {
+    GlBanner,
+  },
+  data() {
+    return {
+      visible: true,
+    };
+  },
+  props: {
+    surveyUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    handleClose() {
+      Cookies.set('hide_serverless_survey', 'true', {
+        expires: 365 * 10,
+        path: '',
+      });
+      this.visible = false;
+    },
+  },
+  beforeMount() {
+    if (parseBoolean(Cookies.get('hide_serverless_survey'))) {
+      this.visible = false;
+    }
+  },
+};
+</script>
+
+<template>
+  <gl-banner
+    v-if="visible"
+    class="mt-4"
+    :title="s__('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/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
+
   .js-serverless-functions-notice
     .flash-container