Add latest changes from gitlab-org/gitlab@13-6-stable-eev13.6.0-rc42

6 files changed, 71 insertions, 52 deletions

diff --git a/app/assets/javascripts/environments/components/container.vue b/app/assets/javascripts/environments/components/container.vue
index 4c6d233c4d2..e7697f14802 100644
--- a/app/assets/javascripts/environments/components/container.vue
+++ b/app/assets/javascripts/environments/components/container.vue
@@ -69,7 +69,7 @@ export default {
   <div class="environments-container">
     <gl-loading-icon v-if="isLoading" size="md" class="gl-mt-3" label="Loading environments" />
 
-    <slot name="emptyState"></slot>
+    <slot name="empty-state"></slot>
 
     <div v-if="!isLoading && environments.length > 0" class="table-holder">
       <environment-table
diff --git a/app/assets/javascripts/environments/components/delete_environment_modal.vue b/app/assets/javascripts/environments/components/delete_environment_modal.vue
index 29aab268fd3..2eb2be351b3 100644
--- a/app/assets/javascripts/environments/components/delete_environment_modal.vue
+++ b/app/assets/javascripts/environments/components/delete_environment_modal.vue
@@ -1,29 +1,35 @@
 <script>
-import { GlTooltipDirective } from '@gitlab/ui';
-import GlModal from '~/vue_shared/components/gl_modal.vue';
+import { GlTooltipDirective, GlModal } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
 import eventHub from '../event_hub';
 
 export default {
   id: 'delete-environment-modal',
   name: 'DeleteEnvironmentModal',
-
   components: {
     GlModal,
   },
-
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-
   props: {
     environment: {
       type: Object,
       required: true,
     },
   },
-
   computed: {
+    primaryProps() {
+      return {
+        text: s__('Environments|Delete environment'),
+        attributes: [{ variant: 'danger' }],
+      };
+    },
+    cancelProps() {
+      return {
+        text: s__('Cancel'),
+      };
+    },
     confirmDeleteMessage() {
       return sprintf(
         s__(
@@ -35,8 +41,12 @@ export default {
         false,
       );
     },
+    modalTitle() {
+      return sprintf(s__(`Environments|Delete '%{environmentName}'?`), {
+        environmentName: this.environment.name,
+      });
+    },
   },
-
   methods: {
     onSubmit() {
       eventHub.$emit('deleteEnvironment', this.environment);
@@ -47,20 +57,12 @@ export default {
 
 <template>
   <gl-modal
-    :id="$options.id"
-    :footer-primary-button-text="s__('Environments|Delete environment')"
-    footer-primary-button-variant="danger"
-    @submit="onSubmit"
+    :modal-id="$options.id"
+    :action-primary="primaryProps"
+    :action-cancel="cancelProps"
+    :title="modalTitle"
+    @primary="onSubmit"
   >
-    <template #header>
-      <h4 class="modal-title d-flex mw-100">
-        {{ __('Delete') }}
-        <span v-gl-tooltip :title="environment.name" class="text-truncate mx-1 flex-fill">
-          {{ environment.name }}?
-        </span>
-      </h4>
-    </template>
-
     <p>{{ confirmDeleteMessage }}</p>
   </gl-modal>
 </template>
diff --git a/app/assets/javascripts/environments/components/environment_delete.vue b/app/assets/javascripts/environments/components/environment_delete.vue
index 039b40a3596..75d92d3295d 100644
--- a/app/assets/javascripts/environments/components/environment_delete.vue
+++ b/app/assets/javascripts/environments/components/environment_delete.vue
@@ -1,21 +1,20 @@
 <script>
 /**
  * Renders the delete button that allows deleting a stopped environment.
- * Used in the environments table and the environment detail view.
+ * Used in the environments table.
  */
 
-import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
+import { GlTooltipDirective, GlButton, GlModalDirective } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import eventHub from '../event_hub';
-import LoadingButton from '../../vue_shared/components/loading_button.vue';
 
 export default {
   components: {
-    GlIcon,
-    LoadingButton,
+    GlButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
+    GlModalDirective,
   },
   props: {
     environment: {
@@ -54,16 +53,16 @@ export default {
 };
 </script>
 <template>
-  <loading-button
+  <gl-button
     v-gl-tooltip="{ id: $options.deleteEnvironmentTooltipId }"
+    v-gl-modal-directive="'delete-environment-modal'"
     :loading="isLoading"
     :title="title"
     :aria-label="title"
-    container-class="btn btn-danger d-none d-md-block"
-    data-toggle="modal"
-    data-target="#delete-environment-modal"
+    class="gl-display-none gl-display-md-block"
+    variant="danger"
+    category="primary"
+    icon="remove"
     @click="onClick"
-  >
-    <gl-icon name="remove" />
-  </loading-button>
+  />
 </template>
diff --git a/app/assets/javascripts/environments/components/environment_stop.vue b/app/assets/javascripts/environments/components/environment_stop.vue
index ff74f81c98e..8e100623199 100644
--- a/app/assets/javascripts/environments/components/environment_stop.vue
+++ b/app/assets/javascripts/environments/components/environment_stop.vue
@@ -4,7 +4,7 @@
  * Used in environments table.
  */
 
-import { GlTooltipDirective, GlButton } from '@gitlab/ui';
+import { GlTooltipDirective, GlButton, GlModalDirective } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import eventHub from '../event_hub';
 
@@ -14,6 +14,7 @@ export default {
   },
   directives: {
     GlTooltip: GlTooltipDirective,
+    GlModalDirective,
   },
   props: {
     environment: {
@@ -54,14 +55,13 @@ export default {
 <template>
   <gl-button
     v-gl-tooltip="{ id: $options.stopEnvironmentTooltipId }"
+    v-gl-modal-directive="'stop-environment-modal'"
     :loading="isLoading"
     :title="title"
     :aria-label="title"
     icon="stop"
     category="primary"
     variant="danger"
-    data-toggle="modal"
-    data-target="#stop-environment-modal"
     @click="onClick"
   />
 </template>
diff --git a/app/assets/javascripts/environments/components/environments_app.vue b/app/assets/javascripts/environments/components/environments_app.vue
index 9bafc7ed153..c1b9ba755a6 100644
--- a/app/assets/javascripts/environments/components/environments_app.vue
+++ b/app/assets/javascripts/environments/components/environments_app.vue
@@ -228,7 +228,7 @@ export default {
         :deploy-boards-help-path="deployBoardsHelpPath"
         @onChangePage="onChangePage"
       >
-        <template v-if="!isLoading && state.environments.length === 0" #emptyState>
+        <template v-if="!isLoading && state.environments.length === 0" #empty-state>
           <empty-state :help-path="helpPagePath" />
         </template>
       </container>
diff --git a/app/assets/javascripts/environments/components/stop_environment_modal.vue b/app/assets/javascripts/environments/components/stop_environment_modal.vue
index f0dafe0620e..0832822520d 100644
--- a/app/assets/javascripts/environments/components/stop_environment_modal.vue
+++ b/app/assets/javascripts/environments/components/stop_environment_modal.vue
@@ -1,15 +1,14 @@
 <script>
-/* eslint-disable @gitlab/vue-require-i18n-strings */
-import { GlSprintf, GlTooltipDirective } from '@gitlab/ui';
-import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
+import { GlSprintf, GlTooltipDirective, GlModal } from '@gitlab/ui';
 import eventHub from '../event_hub';
+import { __, s__ } from '~/locale';
 
 export default {
   id: 'stop-environment-modal',
   name: 'StopEnvironmentModal',
 
   components: {
-    GlModal: DeprecatedModal2,
+    GlModal,
     GlSprintf,
   },
 
@@ -24,6 +23,20 @@ export default {
     },
   },
 
+  computed: {
+    primaryProps() {
+      return {
+        text: s__('Environments|Stop environment'),
+        attributes: [{ variant: 'danger' }],
+      };
+    },
+    cancelProps() {
+      return {
+        text: __('Cancel'),
+      };
+    },
+  },
+
   methods: {
     onSubmit() {
       eventHub.$emit('stopEnvironment', this.environment);
@@ -34,18 +47,23 @@ export default {
 
 <template>
   <gl-modal
-    :id="$options.id"
-    :footer-primary-button-text="s__('Environments|Stop environment')"
-    footer-primary-button-variant="danger"
-    @submit="onSubmit"
+    :modal-id="$options.id"
+    :action-primary="primaryProps"
+    :action-cancel="cancelProps"
+    @primary="onSubmit"
   >
-    <template #header>
-      <h4 class="modal-title d-flex mw-100">
-        Stopping
-        <span v-gl-tooltip :title="environment.name" class="text-truncate ml-1 mr-1 flex-fill">
-          {{ environment.name }}?
-        </span>
-      </h4>
+    <template #modal-title>
+      <gl-sprintf :message="s__('Environments|Stopping %{environmentName}')">
+        <template #environmentName>
+          <span
+            v-gl-tooltip
+            :title="environment.name"
+            class="gl-text-truncate gl-ml-2 gl-mr-2 gl-flex-fill"
+          >
+            {{ environment.name }}?
+          </span>
+        </template>
+      </gl-sprintf>
     </template>
 
     <p>{{ s__('Environments|Are you sure you want to stop this environment?') }}</p>