Add latest changes from gitlab-org/gitlab@14-4-stable-eev14.4.0-rc42

10 files changed, 113 insertions, 137 deletions

diff --git a/app/assets/javascripts/environments/components/environment_delete.vue b/app/assets/javascripts/environments/components/environment_delete.vue
index 4b7917b4572..8609503e486 100644
--- a/app/assets/javascripts/environments/components/environment_delete.vue
+++ b/app/assets/javascripts/environments/components/environment_delete.vue
@@ -4,17 +4,15 @@
  * Used in the environments table.
  */
 
-import { GlTooltipDirective, GlButton, GlModalDirective } from '@gitlab/ui';
-import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
+import { GlDropdownItem, GlModalDirective } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import eventHub from '../event_hub';
 
 export default {
   components: {
-    GlButton,
+    GlDropdownItem,
   },
   directives: {
-    GlTooltip: GlTooltipDirective,
     GlModalDirective,
   },
   props: {
@@ -28,10 +26,8 @@ export default {
       isLoading: false,
     };
   },
-  computed: {
-    title() {
-      return s__('Environments|Delete environment');
-    },
+  i18n: {
+    title: s__('Environments|Delete environment'),
   },
   mounted() {
     eventHub.$on('deleteEnvironment', this.onDeleteEnvironment);
@@ -41,7 +37,6 @@ export default {
   },
   methods: {
     onClick() {
-      this.$root.$emit(BV_HIDE_TOOLTIP, this.$options.deleteEnvironmentTooltipId);
       eventHub.$emit('requestDeleteEnvironment', this.environment);
     },
     onDeleteEnvironment(environment) {
@@ -50,20 +45,15 @@ export default {
       }
     },
   },
-  deleteEnvironmentTooltipId: 'delete-environment-button-tooltip',
 };
 </script>
 <template>
-  <gl-button
-    v-gl-tooltip="{ id: $options.deleteEnvironmentTooltipId }"
-    v-gl-modal-directive="'delete-environment-modal'"
+  <gl-dropdown-item
+    v-gl-modal-directive.delete-environment-modal
     :loading="isLoading"
-    :title="title"
-    :aria-label="title"
-    class="gl-display-none gl-md-display-block"
     variant="danger"
-    category="primary"
-    icon="remove"
     @click="onClick"
-  />
+  >
+    {{ $options.i18n.title }}
+  </gl-dropdown-item>
 </template>
diff --git a/app/assets/javascripts/environments/components/environment_external_url.vue b/app/assets/javascripts/environments/components/environment_external_url.vue
index 793f7bf0681..b8def676e7d 100644
--- a/app/assets/javascripts/environments/components/environment_external_url.vue
+++ b/app/assets/javascripts/environments/components/environment_external_url.vue
@@ -18,22 +18,23 @@ export default {
       required: true,
     },
   },
-  computed: {
-    title() {
-      return s__('Environments|Open live environment');
-    },
+  i18n: {
+    title: s__('Environments|Open live environment'),
+    open: s__('Environments|Open'),
   },
 };
 </script>
 <template>
   <gl-button
     v-gl-tooltip
-    :title="title"
-    :aria-label="title"
+    :title="$options.i18n.title"
+    :aria-label="$options.i18n.title"
     :href="externalUrl"
     class="external-url"
     target="_blank"
     icon="external-link"
     rel="noopener noreferrer nofollow"
-  />
+  >
+    {{ $options.i18n.open }}
+  </gl-button>
 </template>
diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index d12863ee742..db01d455b2b 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTooltipDirective, GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
+import { GlDropdown, GlTooltipDirective, GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
 import { isEmpty } from 'lodash';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { __, s__, sprintf } from '~/locale';
@@ -29,6 +29,7 @@ export default {
     ActionsComponent,
     CommitComponent,
     ExternalUrlComponent,
+    GlDropdown,
     GlIcon,
     GlLink,
     GlSprintf,
@@ -521,6 +522,10 @@ export default {
       return this.model.metrics_path || '';
     },
 
+    terminalPath() {
+      return this.model?.terminal_path ?? '';
+    },
+
     autoStopUrl() {
       return this.model.cancel_auto_stop_path || '';
     },
@@ -549,6 +554,15 @@ export default {
     tableNameSpacingClass() {
       return this.isFolder ? 'section-100' : this.tableData.name.spacing;
     },
+    hasExtraActions() {
+      return Boolean(
+        this.canRetry ||
+          this.canShowAutoStopDate ||
+          this.monitoringUrl ||
+          this.terminalPath ||
+          this.canDeleteEnvironment,
+      );
+    },
   },
 
   methods: {
@@ -776,13 +790,6 @@ export default {
       role="gridcell"
     >
       <div class="btn-group table-action-buttons" role="group">
-        <pin-component
-          v-if="canShowAutoStopDate"
-          :auto-stop-url="autoStopUrl"
-          data-track-action="click_button"
-          data-track-label="environment_pin"
-        />
-
         <external-url-component
           v-if="externalURL"
           :external-url="externalURL"
@@ -790,13 +797,6 @@ export default {
           data-track-label="environment_url"
         />
 
-        <monitoring-button-component
-          v-if="monitoringUrl"
-          :monitoring-url="monitoringUrl"
-          data-track-action="click_button"
-          data-track-label="environment_monitoring"
-        />
-
         <actions-component
           v-if="actions.length > 0"
           :actions="actions"
@@ -804,35 +804,59 @@ export default {
           data-track-label="environment_actions"
         />
 
-        <terminal-button-component
-          v-if="model && model.terminal_path"
-          :terminal-path="model.terminal_path"
-          data-track-action="click_button"
-          data-track-label="environment_terminal"
-        />
-
-        <rollback-component
-          v-if="canRetry"
-          :environment="model"
-          :is-last-deployment="isLastDeployment"
-          :retry-url="retryUrl"
-          data-track-action="click_button"
-          data-track-label="environment_rollback"
-        />
-
         <stop-component
           v-if="canStopEnvironment"
           :environment="model"
+          class="gl-z-index-2"
           data-track-action="click_button"
           data-track-label="environment_stop"
         />
 
-        <delete-component
-          v-if="canDeleteEnvironment"
-          :environment="model"
-          data-track-action="click_button"
-          data-track-label="environment_delete"
-        />
+        <gl-dropdown
+          v-if="hasExtraActions"
+          icon="ellipsis_v"
+          text-sr-only
+          :text="__('More actions')"
+          category="secondary"
+          no-caret
+        >
+          <rollback-component
+            v-if="canRetry"
+            :environment="model"
+            :is-last-deployment="isLastDeployment"
+            :retry-url="retryUrl"
+            data-track-action="click_button"
+            data-track-label="environment_rollback"
+          />
+
+          <pin-component
+            v-if="canShowAutoStopDate"
+            :auto-stop-url="autoStopUrl"
+            data-track-action="click_button"
+            data-track-label="environment_pin"
+          />
+
+          <monitoring-button-component
+            v-if="monitoringUrl"
+            :monitoring-url="monitoringUrl"
+            data-track-action="click_button"
+            data-track-label="environment_monitoring"
+          />
+
+          <terminal-button-component
+            v-if="terminalPath"
+            :terminal-path="terminalPath"
+            data-track-action="click_button"
+            data-track-label="environment_terminal"
+          />
+
+          <delete-component
+            v-if="canDeleteEnvironment"
+            :environment="model"
+            data-track-action="click_button"
+            data-track-label="environment_delete"
+          />
+        </gl-dropdown>
       </div>
     </div>
   </div>
diff --git a/app/assets/javascripts/environments/components/environment_monitoring.vue b/app/assets/javascripts/environments/components/environment_monitoring.vue
index 7f70433776d..06c7f10223a 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 { GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { GlDropdownItem } from '@gitlab/ui';
 import { __ } from '~/locale';
 /**
  * Renders the Monitoring (Metrics) link in environments table.
  */
 export default {
   components: {
-    GlButton,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
+    GlDropdownItem,
   },
   props: {
     monitoringUrl: {
@@ -17,22 +14,11 @@ export default {
       required: true,
     },
   },
-  computed: {
-    title() {
-      return __('Monitoring');
-    },
-  },
+  title: __('Monitoring'),
 };
 </script>
 <template>
-  <gl-button
-    v-gl-tooltip
-    :href="monitoringUrl"
-    :title="title"
-    :aria-label="title"
-    class="monitoring-url gl-display-none gl-sm-display-none gl-md-display-block"
-    icon="chart"
-    rel="noopener noreferrer nofollow"
-    variant="default"
-  />
+  <gl-dropdown-item :href="monitoringUrl" rel="noopener noreferrer nofollow" target="_blank">
+    {{ $options.title }}
+  </gl-dropdown-item>
 </template>
diff --git a/app/assets/javascripts/environments/components/environment_pin.vue b/app/assets/javascripts/environments/components/environment_pin.vue
index 52ac7725bde..0b753d53ee3 100644
--- a/app/assets/javascripts/environments/components/environment_pin.vue
+++ b/app/assets/javascripts/environments/components/environment_pin.vue
@@ -3,17 +3,13 @@
  * Renders a prevent auto-stop button.
  * Used in environments table.
  */
-import { GlButton, GlTooltipDirective, GlIcon } from '@gitlab/ui';
+import { GlDropdownItem } from '@gitlab/ui';
 import { __ } from '~/locale';
 import eventHub from '../event_hub';
 
 export default {
   components: {
-    GlIcon,
-    GlButton,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
+    GlDropdownItem,
   },
   props: {
     autoStopUrl: {
@@ -26,11 +22,11 @@ export default {
       eventHub.$emit('cancelAutoStop', this.autoStopUrl);
     },
   },
-  title: __('Prevent environment from auto-stopping'),
+  title: __('Prevent auto-stopping'),
 };
 </script>
 <template>
-  <gl-button v-gl-tooltip :title="$options.title" :aria-label="$options.title" @click="onPinClick">
-    <gl-icon name="thumbtack" />
-  </gl-button>
+  <gl-dropdown-item @click="onPinClick">
+    {{ $options.title }}
+  </gl-dropdown-item>
 </template>
diff --git a/app/assets/javascripts/environments/components/environment_rollback.vue b/app/assets/javascripts/environments/components/environment_rollback.vue
index c0b4e96cea2..00497b3c683 100644
--- a/app/assets/javascripts/environments/components/environment_rollback.vue
+++ b/app/assets/javascripts/environments/components/environment_rollback.vue
@@ -5,16 +5,15 @@
  *
  * Makes a post request when the button is clicked.
  */
-import { GlTooltipDirective, GlModalDirective, GlButton } from '@gitlab/ui';
+import { GlModalDirective, GlDropdownItem } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import eventHub from '../event_hub';
 
 export default {
   components: {
-    GlButton,
+    GlDropdownItem,
   },
   directives: {
-    GlTooltip: GlTooltipDirective,
     GlModal: GlModalDirective,
   },
   props: {
@@ -65,14 +64,7 @@ export default {
 };
 </script>
 <template>
-  <gl-button
-    v-gl-tooltip
-    v-gl-modal.confirm-rollback-modal
-    class="gl-display-none gl-md-display-block text-secondary"
-    :loading="isLoading"
-    :title="title"
-    :aria-label="title"
-    :icon="isLastDeployment ? 'repeat' : 'redo'"
-    @click="onClick"
-  />
+  <gl-dropdown-item v-gl-modal.confirm-rollback-modal @click="onClick">
+    {{ title }}
+  </gl-dropdown-item>
 </template>
diff --git a/app/assets/javascripts/environments/components/environment_stop.vue b/app/assets/javascripts/environments/components/environment_stop.vue
index dceaf3cacf1..0d4a1e76eb8 100644
--- a/app/assets/javascripts/environments/components/environment_stop.vue
+++ b/app/assets/javascripts/environments/components/environment_stop.vue
@@ -23,16 +23,15 @@ export default {
       required: true,
     },
   },
+  i18n: {
+    title: s__('Environments|Stop environment'),
+    stop: s__('Environments|Stop'),
+  },
   data() {
     return {
       isLoading: false,
     };
   },
-  computed: {
-    title() {
-      return s__('Environments|Stop environment');
-    },
-  },
   mounted() {
     eventHub.$on('stopEnvironment', this.onStopEnvironment);
   },
@@ -58,11 +57,13 @@ export default {
     v-gl-tooltip="{ id: $options.stopEnvironmentTooltipId }"
     v-gl-modal-directive="'stop-environment-modal'"
     :loading="isLoading"
-    :title="title"
-    :aria-label="title"
+    :title="$options.i18n.title"
+    :aria-label="$options.i18n.title"
     icon="stop"
-    category="primary"
+    category="secondary"
     variant="danger"
     @click="onClick"
-  />
+  >
+    {{ $options.i18n.stop }}
+  </gl-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 4750b8ef01b..0df07f0457f 100644
--- a/app/assets/javascripts/environments/components/environment_terminal_button.vue
+++ b/app/assets/javascripts/environments/components/environment_terminal_button.vue
@@ -3,15 +3,12 @@
  * Renders a terminal button to open a web terminal.
  * Used in environments table.
  */
-import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
+import { GlDropdownItem } from '@gitlab/ui';
 import { __ } from '~/locale';
 
 export default {
   components: {
-    GlIcon,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
+    GlDropdownItem,
   },
   props: {
     terminalPath: {
@@ -25,22 +22,11 @@ export default {
       default: false,
     },
   },
-  computed: {
-    title() {
-      return __('Terminal');
-    },
-  },
+  title: __('Terminal'),
 };
 </script>
 <template>
-  <a
-    v-gl-tooltip
-    :title="title"
-    :aria-label="title"
-    :href="terminalPath"
-    :class="{ disabled: disabled }"
-    class="btn terminal-button d-none d-md-block text-secondary"
-  >
-    <gl-icon name="terminal" />
-  </a>
+  <gl-dropdown-item :href="terminalPath" :disabled="disabled">
+    {{ $options.title }}
+  </gl-dropdown-item>
 </template>
diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue
index f1c728b84fd..7b8b756487b 100644
--- a/app/assets/javascripts/environments/components/environments_table.vue
+++ b/app/assets/javascripts/environments/components/environments_table.vue
@@ -67,7 +67,7 @@ export default {
           spacing: 'section-10',
         },
         autoStop: {
-          title: s__('Environments|Auto stop in'),
+          title: s__('Environments|Auto stop'),
           spacing: 'section-10',
         },
         actions: {
diff --git a/app/assets/javascripts/environments/folder/environments_folder_bundle.js b/app/assets/javascripts/environments/folder/environments_folder_bundle.js
index 206381e0b7e..f248e9ec079 100644
--- a/app/assets/javascripts/environments/folder/environments_folder_bundle.js
+++ b/app/assets/javascripts/environments/folder/environments_folder_bundle.js
@@ -8,7 +8,7 @@ Vue.use(Translate);
 Vue.use(VueApollo);
 
 const apolloProvider = new VueApollo({
-  defaultClient: createDefaultClient(),
+  defaultClient: createDefaultClient({}, { assumeImmutableResults: true }),
 });
 
 export default () => {