diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-11-19 08:27:35 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-11-19 08:27:35 +0000 |
commit | 7e9c479f7de77702622631cff2628a9c8dcbc627 (patch) | |
tree | c8f718a08e110ad7e1894510980d2155a6549197 /app/assets/javascripts/environments | |
parent | e852b0ae16db4052c1c567d9efa4facc81146e88 (diff) | |
download | gitlab-ce-7e9c479f7de77702622631cff2628a9c8dcbc627.tar.gz |
Add latest changes from gitlab-org/gitlab@13-6-stable-eev13.6.0-rc42
Diffstat (limited to 'app/assets/javascripts/environments')
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> |