Add latest changes from gitlab-org/gitlab@13-4-stable-ee

15 files changed, 95 insertions, 82 deletions

diff --git a/app/assets/javascripts/environments/components/confirm_rollback_modal.vue b/app/assets/javascripts/environments/components/confirm_rollback_modal.vue
index f0723e96ddf..b2a8571820b 100644
--- a/app/assets/javascripts/environments/components/confirm_rollback_modal.vue
+++ b/app/assets/javascripts/environments/components/confirm_rollback_modal.vue
@@ -1,4 +1,5 @@
 <script>
+/* eslint-disable vue/no-v-html */
 /**
  * Render modal to confirm rollback/redeploy.
  */
diff --git a/app/assets/javascripts/environments/components/environment_actions.vue b/app/assets/javascripts/environments/components/environment_actions.vue
index d2978422224..035b276bc3b 100644
--- a/app/assets/javascripts/environments/components/environment_actions.vue
+++ b/app/assets/javascripts/environments/components/environment_actions.vue
@@ -1,8 +1,7 @@
 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlButton, GlIcon, GlLoadingIcon } from '@gitlab/ui';
 import { __, s__, sprintf } from '~/locale';
 import { formatTime } from '~/lib/utils/datetime_utility';
-import Icon from '~/vue_shared/components/icon.vue';
 import eventHub from '../event_hub';
 import tooltip from '../../vue_shared/directives/tooltip';
 
@@ -11,7 +10,8 @@ export default {
     tooltip,
   },
   components: {
-    Icon,
+    GlButton,
+    GlIcon,
     GlLoadingIcon,
   },
   props: {
@@ -69,38 +69,37 @@ export default {
 </script>
 <template>
   <div class="btn-group" role="group">
-    <button
+    <gl-button
       v-tooltip
       :title="title"
       :aria-label="title"
       :disabled="isLoading"
-      type="button"
-      class="dropdown btn btn-default dropdown-new js-environment-actions-dropdown"
+      class="dropdown dropdown-new js-environment-actions-dropdown"
       data-container="body"
       data-toggle="dropdown"
     >
       <span>
-        <icon name="play" />
-        <icon name="chevron-down" />
+        <gl-icon name="play" />
+        <gl-icon name="chevron-down" />
         <gl-loading-icon v-if="isLoading" />
       </span>
-    </button>
+    </gl-button>
 
     <ul class="dropdown-menu dropdown-menu-right">
-      <li v-for="(action, i) in actions" :key="i">
-        <button
+      <li v-for="(action, i) in actions" :key="i" class="gl-display-flex">
+        <gl-button
           :class="{ disabled: isActionDisabled(action) }"
           :disabled="isActionDisabled(action)"
-          type="button"
-          class="js-manual-action-link no-btn btn d-flex align-items-center"
+          variant="link"
+          class="js-manual-action-link gl-flex-fill-1"
           @click="onClickAction(action)"
         >
-          <span class="flex-fill">{{ action.name }}</span>
-          <span v-if="action.scheduledAt" class="text-secondary">
-            <icon name="clock" />
+          <span class="gl-flex-fill-1">{{ action.name }}</span>
+          <span v-if="action.scheduledAt" class="text-secondary float-right">
+            <gl-icon name="clock" />
             {{ remainingTime(action) }}
           </span>
-        </button>
+        </gl-button>
       </li>
     </ul>
   </div>
diff --git a/app/assets/javascripts/environments/components/environment_delete.vue b/app/assets/javascripts/environments/components/environment_delete.vue
index b53c5fa6583..55aaa6d57bd 100644
--- a/app/assets/javascripts/environments/components/environment_delete.vue
+++ b/app/assets/javascripts/environments/components/environment_delete.vue
@@ -5,15 +5,14 @@
  */
 
 import $ from 'jquery';
-import { GlTooltipDirective } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import eventHub from '../event_hub';
 import LoadingButton from '../../vue_shared/components/loading_button.vue';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     LoadingButton,
   },
   directives: {
@@ -65,6 +64,6 @@ export default {
     data-target="#delete-environment-modal"
     @click="onClick"
   >
-    <icon name="remove" />
+    <gl-icon name="remove" />
   </loading-button>
 </template>
diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index fa3d217f148..8850ed19a4b 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -1,13 +1,12 @@
 <script>
 /* eslint-disable @gitlab/vue-require-i18n-strings */
 import { isEmpty } from 'lodash';
-import { GlTooltipDirective } from '@gitlab/ui';
+import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import CommitComponent from '~/vue_shared/components/commit.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 import eventHub from '../event_hub';
 import ActionsComponent from './environment_actions.vue';
@@ -30,7 +29,7 @@ export default {
     ActionsComponent,
     CommitComponent,
     ExternalUrlComponent,
-    Icon,
+    GlIcon,
     MonitoringButtonComponent,
     PinComponent,
     DeleteComponent,
@@ -535,7 +534,7 @@ export default {
       </div>
 
       <span v-if="shouldRenderDeployBoard" class="deploy-board-icon" @click="toggleDeployBoard">
-        <icon :name="deployIconName" />
+        <gl-icon :name="deployIconName" />
       </span>
 
       <span
@@ -560,9 +559,9 @@ export default {
         role="button"
         @click="onClickFolder"
       >
-        <icon :name="folderIconName" class="folder-icon" />
+        <gl-icon :name="folderIconName" class="folder-icon" />
 
-        <icon name="folder" class="folder-icon" />
+        <gl-icon name="folder" class="folder-icon" />
 
         <span> {{ model.folderName }} </span>
 
diff --git a/app/assets/javascripts/environments/components/environment_monitoring.vue b/app/assets/javascripts/environments/components/environment_monitoring.vue
index bd6feb14319..4dc2c0ec1bd 100644
--- a/app/assets/javascripts/environments/components/environment_monitoring.vue
+++ b/app/assets/javascripts/environments/components/environment_monitoring.vue
@@ -1,15 +1,12 @@
 <script>
-import { GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui';
+import { GlButton, GlTooltipDirective } from '@gitlab/ui';
 import { __ } from '~/locale';
 /**
  * Renders the Monitoring (Metrics) link in environments table.
  */
-import Icon from '~/vue_shared/components/icon.vue';
-
 export default {
   components: {
-    Icon,
-    GlDeprecatedButton,
+    GlButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -28,15 +25,14 @@ export default {
 };
 </script>
 <template>
-  <gl-deprecated-button
+  <gl-button
     v-gl-tooltip
     :href="monitoringUrl"
     :title="title"
     :aria-label="title"
-    class="monitoring-url d-none d-sm-none d-md-block"
+    class="monitoring-url gl-display-none gl-display-sm-none gl-display-md-block"
+    icon="chart"
     rel="noopener noreferrer nofollow"
     variant="default"
-  >
-    <icon name="chart" />
-  </gl-deprecated-button>
+  />
 </template>
diff --git a/app/assets/javascripts/environments/components/environment_pin.vue b/app/assets/javascripts/environments/components/environment_pin.vue
index 3a219e98b08..52ac7725bde 100644
--- a/app/assets/javascripts/environments/components/environment_pin.vue
+++ b/app/assets/javascripts/environments/components/environment_pin.vue
@@ -3,15 +3,14 @@
  * Renders a prevent auto-stop button.
  * Used in environments table.
  */
-import { GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlButton, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
 import eventHub from '../event_hub';
 
 export default {
   components: {
-    Icon,
-    GlDeprecatedButton,
+    GlIcon,
+    GlButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -31,12 +30,7 @@ export default {
 };
 </script>
 <template>
-  <gl-deprecated-button
-    v-gl-tooltip
-    :title="$options.title"
-    :aria-label="$options.title"
-    @click="onPinClick"
-  >
-    <icon name="thumbtack" />
-  </gl-deprecated-button>
+  <gl-button v-gl-tooltip :title="$options.title" :aria-label="$options.title" @click="onPinClick">
+    <gl-icon name="thumbtack" />
+  </gl-button>
 </template>
diff --git a/app/assets/javascripts/environments/components/environment_rollback.vue b/app/assets/javascripts/environments/components/environment_rollback.vue
index 7a728961b37..32528e6c6ea 100644
--- a/app/assets/javascripts/environments/components/environment_rollback.vue
+++ b/app/assets/javascripts/environments/components/environment_rollback.vue
@@ -5,21 +5,13 @@
  *
  * Makes a post request when the button is clicked.
  */
-import {
-  GlTooltipDirective,
-  GlLoadingIcon,
-  GlModalDirective,
-  GlDeprecatedButton,
-} from '@gitlab/ui';
+import { GlTooltipDirective, GlModalDirective, GlButton } from '@gitlab/ui';
 import { s__ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import eventHub from '../event_hub';
 
 export default {
   components: {
-    Icon,
-    GlLoadingIcon,
-    GlDeprecatedButton,
+    GlButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -73,15 +65,13 @@ export default {
 };
 </script>
 <template>
-  <gl-deprecated-button
+  <gl-button
     v-gl-tooltip
     v-gl-modal.confirm-rollback-modal
-    :disabled="isLoading"
+    class="gl-display-none gl-display-md-block text-secondary"
+    :loading="isLoading"
     :title="title"
-    class="d-none d-md-block text-secondary"
+    :icon="isLastDeployment ? 'repeat' : 'redo'"
     @click="onClick"
-  >
-    <icon v-if="isLastDeployment" name="repeat" /> <icon v-else name="redo" />
-    <gl-loading-icon v-if="isLoading" />
-  </gl-deprecated-button>
+  />
 </template>
diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.vue b/app/assets/javascripts/environments/components/environment_terminal_button.vue
index 37f94f9f5ab..b5a7be90204 100644
--- a/app/assets/javascripts/environments/components/environment_terminal_button.vue
+++ b/app/assets/javascripts/environments/components/environment_terminal_button.vue
@@ -3,13 +3,12 @@
  * Renders a terminal button to open a web terminal.
  * Used in environments table.
  */
-import { GlTooltipDirective } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -42,6 +41,6 @@ export default {
     :class="{ disabled: disabled }"
     class="btn terminal-button d-none d-sm-none d-md-block text-secondary"
   >
-    <icon name="terminal" />
+    <gl-icon name="terminal" />
   </a>
 </template>
diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue
index 1bf705dcda2..c06ab265915 100644
--- a/app/assets/javascripts/environments/components/environments_table.vue
+++ b/app/assets/javascripts/environments/components/environments_table.vue
@@ -14,6 +14,7 @@ export default {
     DeployBoard: () => import('ee_component/environments/components/deploy_board_component.vue'),
     CanaryDeploymentCallout: () =>
       import('ee_component/environments/components/canary_deployment_callout.vue'),
+    EnvironmentAlert: () => import('ee_component/environments/components/environment_alert.vue'),
   },
   props: {
     environments: {
@@ -111,6 +112,9 @@ export default {
     shouldShowCanaryCallout(env) {
       return env.showCanaryCallout && this.showCanaryDeploymentCallout;
     },
+    shouldRenderAlert(env) {
+      return env?.has_opened_alert;
+    },
     sortEnvironments(environments) {
       /*
        * The sorting algorithm should sort in the following priorities:
@@ -185,6 +189,11 @@ export default {
           />
         </div>
       </div>
+      <environment-alert
+        v-if="shouldRenderAlert(model)"
+        :key="`alert-row-${i}`"
+        :environment="model"
+      />
 
       <template v-if="shouldRenderFolderContent(model)">
         <div v-if="model.isLoadingFolderContent" :key="`loading-item-${i}`">
diff --git a/app/assets/javascripts/environments/components/stop_environment_modal.vue b/app/assets/javascripts/environments/components/stop_environment_modal.vue
index 7448fd584c6..88612376b6e 100644
--- a/app/assets/javascripts/environments/components/stop_environment_modal.vue
+++ b/app/assets/javascripts/environments/components/stop_environment_modal.vue
@@ -1,5 +1,5 @@
 <script>
-/* eslint-disable @gitlab/vue-require-i18n-strings */
+/* eslint-disable @gitlab/vue-require-i18n-strings, vue/no-v-html */
 import { GlTooltipDirective } from '@gitlab/ui';
 import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
 import { s__, sprintf } from '~/locale';
diff --git a/app/assets/javascripts/environments/folder/environments_folder_bundle.js b/app/assets/javascripts/environments/folder/environments_folder_bundle.js
index 56896ac4d43..6c547c3713a 100644
--- a/app/assets/javascripts/environments/folder/environments_folder_bundle.js
+++ b/app/assets/javascripts/environments/folder/environments_folder_bundle.js
@@ -1,20 +1,33 @@
 import Vue from 'vue';
+import VueApollo from 'vue-apollo';
 import canaryCalloutMixin from '../mixins/canary_callout_mixin';
 import environmentsFolderApp from './environments_folder_view.vue';
 import { parseBoolean } from '../../lib/utils/common_utils';
 import Translate from '../../vue_shared/translate';
+import createDefaultClient from '~/lib/graphql';
 
 Vue.use(Translate);
+Vue.use(VueApollo);
 
-export default () =>
-  new Vue({
-    el: '#environments-folder-list-view',
+const apolloProvider = new VueApollo({
+  defaultClient: createDefaultClient(),
+});
+
+export default () => {
+  const el = document.getElementById('environments-folder-list-view');
+
+  return new Vue({
+    el,
     components: {
       environmentsFolderApp,
     },
     mixins: [canaryCalloutMixin],
+    apolloProvider,
+    provide: {
+      projectPath: el.dataset.projectPath,
+    },
     data() {
-      const environmentsData = document.querySelector(this.$options.el).dataset;
+      const environmentsData = el.dataset;
 
       return {
         endpoint: environmentsData.environmentsDataEndpoint,
@@ -35,3 +48,4 @@ export default () =>
       });
     },
   });
+};
diff --git a/app/assets/javascripts/environments/folder/environments_folder_view.vue b/app/assets/javascripts/environments/folder/environments_folder_view.vue
index e1e356a977f..16d25615779 100644
--- a/app/assets/javascripts/environments/folder/environments_folder_view.vue
+++ b/app/assets/javascripts/environments/folder/environments_folder_view.vue
@@ -23,7 +23,8 @@ export default {
     },
     cssContainerClass: {
       type: String,
-      required: true,
+      required: false,
+      default: '',
     },
     canReadEnvironment: {
       type: Boolean,
diff --git a/app/assets/javascripts/environments/index.js b/app/assets/javascripts/environments/index.js
index 4848cb0f13d..8e8af3f32f7 100644
--- a/app/assets/javascripts/environments/index.js
+++ b/app/assets/javascripts/environments/index.js
@@ -1,20 +1,32 @@
 import Vue from 'vue';
+import VueApollo from 'vue-apollo';
 import canaryCalloutMixin from './mixins/canary_callout_mixin';
 import environmentsComponent from './components/environments_app.vue';
 import { parseBoolean } from '../lib/utils/common_utils';
 import Translate from '../vue_shared/translate';
+import createDefaultClient from '~/lib/graphql';
 
 Vue.use(Translate);
+Vue.use(VueApollo);
 
-export default () =>
-  new Vue({
-    el: '#environments-list-view',
+const apolloProvider = new VueApollo({
+  defaultClient: createDefaultClient(),
+});
+
+export default () => {
+  const el = document.getElementById('environments-list-view');
+  return new Vue({
+    el,
     components: {
       environmentsComponent,
     },
     mixins: [canaryCalloutMixin],
+    apolloProvider,
+    provide: {
+      projectPath: el.dataset.projectPath,
+    },
     data() {
-      const environmentsData = document.querySelector(this.$options.el).dataset;
+      const environmentsData = el.dataset;
 
       return {
         endpoint: environmentsData.environmentsDataEndpoint,
@@ -39,3 +51,4 @@ export default () =>
       });
     },
   });
+};
diff --git a/app/assets/javascripts/environments/mixins/canary_callout_mixin.js b/app/assets/javascripts/environments/mixins/canary_callout_mixin.js
index 398576a31cb..e9f1a144cb3 100644
--- a/app/assets/javascripts/environments/mixins/canary_callout_mixin.js
+++ b/app/assets/javascripts/environments/mixins/canary_callout_mixin.js
@@ -2,7 +2,7 @@ import { parseBoolean } from '~/lib/utils/common_utils';
 
 export default {
   data() {
-    const data = document.querySelector(this.$options.el).dataset;
+    const data = this.$options.el.dataset;
 
     return {
       canaryDeploymentFeatureId: data.environmentsDataCanaryDeploymentFeatureId,
diff --git a/app/assets/javascripts/environments/stores/helpers.js b/app/assets/javascripts/environments/stores/helpers.js
index 8eba6c00601..eb47ba29412 100644
--- a/app/assets/javascripts/environments/stores/helpers.js
+++ b/app/assets/javascripts/environments/stores/helpers.js
@@ -4,5 +4,4 @@
  * @param {Object} environment
  * @returns {Object}
  */
-// eslint-disable-next-line import/prefer-default-export
 export const setDeployBoard = (oldEnvironmentState, environment) => environment;