Merge branch 'dfosco/add-environment-survey' into 'master'

Add environments survey alert

See merge request gitlab-org/gitlab!67243

app/assets/javascripts/environments/components/environments_app.vue

 <script>
-import { GlBadge, GlButton, GlModalDirective, GlTab, GlTabs } from '@gitlab/ui';
+import { GlBadge, GlButton, GlModalDirective, GlTab, GlTabs, GlAlert } from '@gitlab/ui';
 import createFlash from '~/flash';
+import { setCookie, getCookie, parseBoolean } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';
+import { ENVIRONMENTS_SURVEY_DISMISSED_COOKIE_NAME } from '../constants';
 import eventHub from '../event_hub';
 import environmentsMixin from '../mixins/environments_mixin';
 import EnvironmentsPaginationApiMixin from '../mixins/environments_pagination_api_mixin';
@@ -15,6 +17,12 @@ export default {
   i18n: {
     newEnvironmentButtonLabel: s__('Environments|New environment'),
     reviewAppButtonLabel: s__('Environments|Enable review app'),
+    surveyAlertTitle: s__('Environments|Help us improve environments'),
+    surveyAlertText: s__(
+      'Environments|Your feedback helps GitLab make environments better for you and other users. Participate and enter a sweepstake to win a USD 30 gift card.',
+    ),
+    surveyAlertButtonLabel: s__('Environments|Take the survey'),
+    surveyDismissButtonLabel: s__('Environments|Dismiss'),
   },
   modal: {
     id: 'enable-review-app-info',
@@ -25,6 +33,7 @@ export default {
     EnableReviewAppModal,
     GlBadge,
     GlButton,
+    GlAlert,
     GlTab,
     GlTabs,
     StopEnvironmentModal,
@@ -56,6 +65,13 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      environmentsSurveyAlertDismissed: parseBoolean(
+        getCookie(ENVIRONMENTS_SURVEY_DISMISSED_COOKIE_NAME),
+      ),
+    };
+  },
 
   created() {
     eventHub.$on('toggleFolder', this.toggleFolder);
@@ -105,6 +121,11 @@ export default {
         openFolders.forEach((folder) => this.fetchChildEnvironments(folder));
       }
     },
+
+    onSurveyAlertDismiss() {
+      setCookie(ENVIRONMENTS_SURVEY_DISMISSED_COOKIE_NAME, 'true');
+      this.environmentsSurveyAlertDismissed = true;
+    },
   },
 };
 </script>
@@ -135,6 +156,19 @@ export default {
           >{{ $options.i18n.newEnvironmentButtonLabel }}</gl-button
         >
       </div>
+      <gl-alert
+        v-if="!environmentsSurveyAlertDismissed"
+        class="gl-my-4"
+        :title="$options.i18n.surveyAlertTitle"
+        :primary-button-text="$options.i18n.surveyAlertButtonLabel"
+        variant="info"
+        dismissible
+        :dismiss-label="$options.i18n.surveyDismissButtonLabel"
+        primary-button-link="https://gitlab.fra1.qualtrics.com/jfe/form/SV_a2xyFsAA4D0w0Jg"
+        @dismiss="onSurveyAlertDismiss"
+      >
+        {{ $options.i18n.surveyAlertText }}
+      </gl-alert>
       <gl-tabs :value="activeTab" content-class="gl-display-none">
         <gl-tab
           v-for="(tab, idx) in tabs"

app/assets/javascripts/environments/constants.js

@@ -38,3 +38,5 @@ export const CANARY_STATUS = {
 };
 
 export const CANARY_UPDATE_MODAL = 'confirm-canary-change';
+
+export const ENVIRONMENTS_SURVEY_DISMISSED_COOKIE_NAME = 'environments_survey_alert_dismissed';

locale/gitlab.pot

@@ -12748,6 +12748,9 @@ msgstr ""
 msgid "Environments|Deployment %{status}"
 msgstr ""
 
+msgid "Environments|Dismiss"
+msgstr ""
+
 msgid "Environments|Enable review app"
 msgstr ""
 
@@ -12760,6 +12763,9 @@ msgstr ""
 msgid "Environments|Environments are places where code gets deployed, such as staging or production."
 msgstr ""
 
+msgid "Environments|Help us improve environments"
+msgstr ""
+
 msgid "Environments|Install Elastic Stack on your cluster to enable advanced querying capabilities such as full text search."
 msgstr ""
 
@@ -12835,6 +12841,9 @@ msgstr ""
 msgid "Environments|Stopping %{environmentName}"
 msgstr ""
 
+msgid "Environments|Take the survey"
+msgstr ""
+
 msgid "Environments|There was an error fetching the logs. Please try again."
 msgstr ""
 
@@ -12856,6 +12865,9 @@ msgstr ""
 msgid "Environments|You don't have any environments right now"
 msgstr ""
 
+msgid "Environments|Your feedback helps GitLab make environments better for you and other users. Participate and enter a sweepstake to win a USD 30 gift card."
+msgstr ""
+
 msgid "Environments|protected"
 msgstr ""
 

spec/frontend/environments/environments_app_spec.js

-import { GlTabs } from '@gitlab/ui';
+import { GlTabs, GlAlert } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
@@ -7,7 +7,9 @@ import DeployBoard from '~/environments/components/deploy_board.vue';
 import EmptyState from '~/environments/components/empty_state.vue';
 import EnableReviewAppModal from '~/environments/components/enable_review_app_modal.vue';
 import EnvironmentsApp from '~/environments/components/environments_app.vue';
+import { ENVIRONMENTS_SURVEY_DISMISSED_COOKIE_NAME } from '~/environments/constants';
 import axios from '~/lib/utils/axios_utils';
+import { setCookie, getCookie, removeCookie } from '~/lib/utils/common_utils';
 import * as urlUtils from '~/lib/utils/url_utility';
 import { environment, folder } from './mock_data';
 
@@ -48,6 +50,7 @@ describe('Environment', () => {
   const findNewEnvironmentButton = () => wrapper.findByTestId('new-environment');
   const findEnvironmentsTabAvailable = () => wrapper.find('.js-environments-tab-available > a');
   const findEnvironmentsTabStopped = () => wrapper.find('.js-environments-tab-stopped > a');
+  const findSurveyAlert = () => wrapper.find(GlAlert);
 
   beforeEach(() => {
     mock = new MockAdapter(axios);
@@ -280,4 +283,49 @@ describe('Environment', () => {
       expect(wrapper.findComponent(GlTabs).attributes('value')).toBe('1');
     });
   });
+
+  describe('survey alert', () => {
+    beforeEach(async () => {
+      mockRequest(200, { environments: [] });
+      await createWrapper(true);
+    });
+
+    afterEach(() => {
+      removeCookie(ENVIRONMENTS_SURVEY_DISMISSED_COOKIE_NAME);
+    });
+
+    describe('when the user has not dismissed the alert', () => {
+      it('shows the alert', () => {
+        expect(findSurveyAlert().exists()).toBe(true);
+      });
+
+      describe('when the user dismisses the alert', () => {
+        beforeEach(() => {
+          findSurveyAlert().vm.$emit('dismiss');
+        });
+
+        it('hides the alert', () => {
+          expect(findSurveyAlert().exists()).toBe(false);
+        });
+
+        it('persists the dismisal using a cookie', () => {
+          const cookieValue = getCookie(ENVIRONMENTS_SURVEY_DISMISSED_COOKIE_NAME);
+
+          expect(cookieValue).toBe('true');
+        });
+      });
+    });
+
+    describe('when the user has previously dismissed the alert', () => {
+      beforeEach(async () => {
+        setCookie(ENVIRONMENTS_SURVEY_DISMISSED_COOKIE_NAME, 'true');
+
+        await createWrapper(true);
+      });
+
+      it('does not show the alert', () => {
+        expect(findSurveyAlert().exists()).toBe(false);
+      });
+    });
+  });
 });