diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-10-20 08:43:02 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-10-20 08:43:02 +0000 |
commit | d9ab72d6080f594d0b3cae15f14b3ef2c6c638cb (patch) | |
tree | 2341ef426af70ad1e289c38036737e04b0aa5007 /app/assets/javascripts/environments | |
parent | d6e514dd13db8947884cd58fe2a9c2a063400a9b (diff) | |
download | gitlab-ce-d9ab72d6080f594d0b3cae15f14b3ef2c6c638cb.tar.gz |
Add latest changes from gitlab-org/gitlab@14-4-stable-eev14.4.0-rc42
Diffstat (limited to 'app/assets/javascripts/environments')
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 () => { |