Add latest changes from gitlab-org/gitlab@14-1-stable-eev14.1.0-rc42

6 files changed, 37 insertions, 16 deletions

diff --git a/app/assets/javascripts/environments/components/deploy_board.vue b/app/assets/javascripts/environments/components/deploy_board.vue
index 217cea051b7..c642a07fd1e 100644
--- a/app/assets/javascripts/environments/components/deploy_board.vue
+++ b/app/assets/javascripts/environments/components/deploy_board.vue
@@ -111,7 +111,7 @@ export default {
 </script>
 <template>
   <div class="js-deploy-board deploy-board">
-    <gl-loading-icon v-if="isLoading" class="loading-icon" />
+    <gl-loading-icon v-if="isLoading" size="sm" class="loading-icon" />
     <template v-else>
       <div v-if="canRenderDeployBoard" class="deploy-board-information gl-p-5">
         <div class="deploy-board-information gl-w-full">
diff --git a/app/assets/javascripts/environments/components/environment_actions.vue b/app/assets/javascripts/environments/components/environment_actions.vue
index 542b8c9219d..2d98f00433a 100644
--- a/app/assets/javascripts/environments/components/environment_actions.vue
+++ b/app/assets/javascripts/environments/components/environment_actions.vue
@@ -80,7 +80,7 @@ export default {
     <template #button-content>
       <gl-icon name="play" />
       <gl-icon name="chevron-down" />
-      <gl-loading-icon v-if="isLoading" />
+      <gl-loading-icon v-if="isLoading" size="sm" />
     </template>
     <gl-dropdown-item
       v-for="(action, i) in actions"
diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index 4db0dff16aa..5ae8b000fc0 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -552,6 +552,9 @@ export default {
         { 'gl-display-none gl-md-display-block': !this.upcomingDeployment },
       ];
     },
+    tableNameSpacingClass() {
+      return this.isFolder ? 'section-100' : this.tableData.name.spacing;
+    },
   },
 
   methods: {
@@ -588,8 +591,9 @@ export default {
   >
     <div
       class="table-section section-wrap text-truncate"
-      :class="tableData.name.spacing"
+      :class="tableNameSpacingClass"
       role="gridcell"
+      data-testid="environment-name-cell"
     >
       <div v-if="!isFolder" class="table-mobile-header" role="rowheader">
         {{ getMobileViewTitleForField('name') }}
@@ -632,9 +636,11 @@ export default {
     </div>
 
     <div
+      v-if="!isFolder"
       class="table-section deployment-column d-none d-md-block"
       :class="tableData.deploy.spacing"
       role="gridcell"
+      data-testid="enviornment-deployment-id-cell"
     >
       <span v-if="shouldRenderDeploymentID" class="text-break-word">
         {{ deploymentInternalId }}
@@ -656,7 +662,13 @@ export default {
       </div>
     </div>
 
-    <div class="table-section d-none d-md-block" :class="tableData.build.spacing" role="gridcell">
+    <div
+      v-if="!isFolder"
+      class="table-section d-none d-md-block"
+      :class="tableData.build.spacing"
+      role="gridcell"
+      data-testid="environment-build-cell"
+    >
       <a v-if="shouldRenderBuildName" :href="buildPath" class="build-link cgray">
         <tooltip-on-truncate
           :title="buildName"
diff --git a/app/assets/javascripts/environments/components/environments_app.vue b/app/assets/javascripts/environments/components/environments_app.vue
index 8bd71db957c..e4cf5760987 100644
--- a/app/assets/javascripts/environments/components/environments_app.vue
+++ b/app/assets/javascripts/environments/components/environments_app.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlBadge, GlButton, GlModalDirective, GlTab, GlTabs } from '@gitlab/ui';
-import { deprecatedCreateFlash as Flash } from '~/flash';
+import createFlash from '~/flash';
 import { s__ } from '~/locale';
 import eventHub from '../event_hub';
 import environmentsMixin from '../mixins/environments_mixin';
@@ -89,7 +89,9 @@ export default {
         .then((response) => this.store.setfolderContent(folder, response.data.environments))
         .then(() => this.store.updateEnvironmentProp(folder, 'isLoadingFolderContent', false))
         .catch(() => {
-          Flash(s__('Environments|An error occurred while fetching the environments.'));
+          createFlash({
+            message: s__('Environments|An error occurred while fetching the environments.'),
+          });
           this.store.updateEnvironmentProp(folder, 'isLoadingFolderContent', false);
         });
     },
@@ -133,7 +135,7 @@ export default {
           >{{ $options.i18n.newEnvironmentButtonLabel }}</gl-button
         >
       </div>
-      <gl-tabs content-class="gl-display-none">
+      <gl-tabs :value="activeTab" content-class="gl-display-none">
         <gl-tab
           v-for="(tab, idx) in tabs"
           :key="idx"
diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue
index f82d3065ca5..61438872afc 100644
--- a/app/assets/javascripts/environments/components/environments_table.vue
+++ b/app/assets/javascripts/environments/components/environments_table.vue
@@ -152,8 +152,7 @@ export default {
       </div>
     </div>
     <template v-for="(model, i) in sortedEnvironments" :model="model">
-      <div
-        is="environment-item"
+      <environment-item
         :key="`environment-item-${i}`"
         :model="model"
         :can-read-environment="canReadEnvironment"
@@ -189,8 +188,7 @@ export default {
 
         <template v-else>
           <template v-for="(child, index) in model.children">
-            <div
-              is="environment-item"
+            <environment-item
               :key="`environment-row-${i}-${index}`"
               :model="child"
               :can-read-environment="canReadEnvironment"
diff --git a/app/assets/javascripts/environments/mixins/environments_mixin.js b/app/assets/javascripts/environments/mixins/environments_mixin.js
index d5caff1660a..6f701f87261 100644
--- a/app/assets/javascripts/environments/mixins/environments_mixin.js
+++ b/app/assets/javascripts/environments/mixins/environments_mixin.js
@@ -3,9 +3,9 @@
  */
 import { isEqual, isFunction, omitBy } from 'lodash';
 import Visibility from 'visibilityjs';
-import { deprecatedCreateFlash as Flash } from '../../flash';
-import { getParameterByName } from '../../lib/utils/common_utils';
+import createFlash from '~/flash';
 import Poll from '../../lib/utils/poll';
+import { getParameterByName } from '../../lib/utils/url_utility';
 import { s__ } from '../../locale';
 import tabs from '../../vue_shared/components/navigation_tabs.vue';
 import tablePagination from '../../vue_shared/components/pagination/table_pagination.vue';
@@ -94,7 +94,9 @@ export default {
 
     errorCallback() {
       this.isLoading = false;
-      Flash(s__('Environments|An error occurred while fetching the environments.'));
+      createFlash({
+        message: s__('Environments|An error occurred while fetching the environments.'),
+      });
     },
 
     postAction({
@@ -109,7 +111,9 @@ export default {
           .then(() => this.fetchEnvironments())
           .catch((err) => {
             this.isLoading = false;
-            Flash(isFunction(errorMessage) ? errorMessage(err.response.data) : errorMessage);
+            createFlash({
+              message: isFunction(errorMessage) ? errorMessage(err.response.data) : errorMessage,
+            });
           });
       }
     },
@@ -163,7 +167,9 @@ export default {
           window.location.href = url.join('/');
         })
         .catch(() => {
-          Flash(errorMessage);
+          createFlash({
+            message: errorMessage,
+          });
         });
     },
 
@@ -202,6 +208,9 @@ export default {
         },
       ];
     },
+    activeTab() {
+      return this.tabs.findIndex(({ isActive }) => isActive) ?? 0;
+    },
   },
 
   /**