From 162d34f68d18328b9ac0481a8c447f5ac90b0686 Mon Sep 17 00:00:00 2001
From: Kyle Mann <kmann@gitlab.com>
Date: Fri, 11 Sep 2020 12:50:53 +0200
Subject: [PATCH 01/14] Replace button GlButton
---
.../components/approvals/approvals_footer.vue | 11 +++++------
1 file changed, 5 insertions(+), 6 deletions(-)
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
index 93f0eefc945263..1c110caf660f5b 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
@@ -1,5 +1,5 @@
<script>
-import { GlDeprecatedButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
+import { GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
import { __ } from '~/locale';
import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
import ApprovalsList from './approvals_list.vue';
@@ -7,7 +7,7 @@ import ApprovalsList from './approvals_list.vue';
export default {
components: {
GlIcon,
- GlDeprecatedButton,
+ GlButton,
GlLoadingIcon,
UserAvatarList,
ApprovalsList,
@@ -67,15 +67,14 @@ export default {
<template>
<div>
<div class="mr-widget-extension d-flex align-items-center pl-3">
- <button
- class="btn btn-blank square s32 gl-mr-3"
- type="button"
+ <gl-button
+ class="square s32 gl-mr-3"
:aria-label="ariaLabel"
@click="toggle"
>
<gl-loading-icon v-if="!isCollapsed && isLoadingRules" />
<gl-icon v-else :name="angleIcon" :size="16" />
- </button>
+ </gl-button>
<template v-if="isCollapsed">
<user-avatar-list :items="suggestedApproversTrimmed" :breakpoint="0" empty-text="" />
<gl-deprecated-button variant="link" @click="toggle">{{
--
GitLab
From d42c1c914cfa12dd0e11e2de32b26e448d200f7d Mon Sep 17 00:00:00 2001
From: Kyle Mann <kmann@gitlab.com>
Date: Mon, 14 Sep 2020 17:58:48 +0200
Subject: [PATCH 02/14] Fix icon display
---
.../components/approvals/approvals_footer.vue | 10 ++++++----
1 file changed, 6 insertions(+), 4 deletions(-)
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
index 1c110caf660f5b..b1a47ee1e59231 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
@@ -1,5 +1,5 @@
<script>
-import { GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
+import { GlButton, GlDeprecatedButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
import { __ } from '~/locale';
import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
import ApprovalsList from './approvals_list.vue';
@@ -8,6 +8,7 @@ export default {
components: {
GlIcon,
GlButton,
+ GlDeprecatedButton,
GlLoadingIcon,
UserAvatarList,
ApprovalsList,
@@ -68,12 +69,13 @@ export default {
<div>
<div class="mr-widget-extension d-flex align-items-center pl-3">
<gl-button
- class="square s32 gl-mr-3"
+ class="gl-mr-3"
+ category="tertiary"
:aria-label="ariaLabel"
@click="toggle"
>
- <gl-loading-icon v-if="!isCollapsed && isLoadingRules" />
- <gl-icon v-else :name="angleIcon" :size="16" />
+ <gl-loading-icon v-if="!isCollapsed && isLoadingRules" class="gl-mr-0!" />
+ <gl-icon v-else :name="angleIcon" :size="16" class="gl-mr-0!" />
</gl-button>
<template v-if="isCollapsed">
<user-avatar-list :items="suggestedApproversTrimmed" :breakpoint="0" empty-text="" />
--
GitLab
From 81403b29855b3cf796f3bb46af1c16d8f6a26ca3 Mon Sep 17 00:00:00 2001
From: Kyle Mann <kmann@gitlab.com>
Date: Tue, 15 Sep 2020 17:21:39 +0200
Subject: [PATCH 03/14] Update button in spec
---
.../components/approvals/approvals_footer_spec.js | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/ee/spec/frontend/vue_mr_widget/components/approvals/approvals_footer_spec.js b/ee/spec/frontend/vue_mr_widget/components/approvals/approvals_footer_spec.js
index 3ed688f93cc0e4..e439c24ab08fb6 100644
--- a/ee/spec/frontend/vue_mr_widget/components/approvals/approvals_footer_spec.js
+++ b/ee/spec/frontend/vue_mr_widget/components/approvals/approvals_footer_spec.js
@@ -1,5 +1,5 @@
import { shallowMount } from '@vue/test-utils';
-import { GlDeprecatedButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
+import { GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
import ApprovalsList from 'ee/vue_merge_request_widget/components/approvals/approvals_list.vue';
import ApprovalsFooter from 'ee/vue_merge_request_widget/components/approvals/approvals_footer.vue';
import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
@@ -23,8 +23,8 @@ describe('EE MRWidget approvals footer', () => {
const findToggle = () => wrapper.find('button');
const findToggleIcon = () => findToggle().find(GlIcon);
const findToggleLoadingIcon = () => findToggle().find(GlLoadingIcon);
- const findExpandButton = () => wrapper.find(GlDeprecatedButton);
- const findCollapseButton = () => wrapper.find(GlDeprecatedButton);
+ const findExpandButton = () => wrapper.find(GlButton);
+ const findCollapseButton = () => wrapper.find(GlButton);
const findList = () => wrapper.find(ApprovalsList);
const findAvatars = () => wrapper.find(UserAvatarList);
--
GitLab
From 718eb7ea14e208576df7a7b8f22dbd23fd11515e Mon Sep 17 00:00:00 2001
From: Kyle Mann <kmann@gitlab.com>
Date: Wed, 16 Sep 2020 15:28:35 +0200
Subject: [PATCH 04/14] Update button prettier
---
.../components/approvals/approvals_footer.vue | 7 +------
1 file changed, 1 insertion(+), 6 deletions(-)
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
index b1a47ee1e59231..f0bce5a6965c28 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
@@ -68,12 +68,7 @@ export default {
<template>
<div>
<div class="mr-widget-extension d-flex align-items-center pl-3">
- <gl-button
- class="gl-mr-3"
- category="tertiary"
- :aria-label="ariaLabel"
- @click="toggle"
- >
+ <gl-button class="gl-mr-3" category="tertiary" :aria-label="ariaLabel" @click="toggle">
<gl-loading-icon v-if="!isCollapsed && isLoadingRules" class="gl-mr-0!" />
<gl-icon v-else :name="angleIcon" :size="16" class="gl-mr-0!" />
</gl-button>
--
GitLab
From 53d2eac250d033fb8a9aa33a252f39e32d1227dc Mon Sep 17 00:00:00 2001
From: Kyle Mann <kmann@gitlab.com>
Date: Fri, 11 Sep 2020 12:50:53 +0200
Subject: [PATCH 05/14] Replace button GlButton
---
.../components/approvals/approvals_footer.vue | 11 +++++------
1 file changed, 5 insertions(+), 6 deletions(-)
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
index 93f0eefc945263..1c110caf660f5b 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
@@ -1,5 +1,5 @@
<script>
-import { GlDeprecatedButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
+import { GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
import { __ } from '~/locale';
import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
import ApprovalsList from './approvals_list.vue';
@@ -7,7 +7,7 @@ import ApprovalsList from './approvals_list.vue';
export default {
components: {
GlIcon,
- GlDeprecatedButton,
+ GlButton,
GlLoadingIcon,
UserAvatarList,
ApprovalsList,
@@ -67,15 +67,14 @@ export default {
<template>
<div>
<div class="mr-widget-extension d-flex align-items-center pl-3">
- <button
- class="btn btn-blank square s32 gl-mr-3"
- type="button"
+ <gl-button
+ class="square s32 gl-mr-3"
:aria-label="ariaLabel"
@click="toggle"
>
<gl-loading-icon v-if="!isCollapsed && isLoadingRules" />
<gl-icon v-else :name="angleIcon" :size="16" />
- </button>
+ </gl-button>
<template v-if="isCollapsed">
<user-avatar-list :items="suggestedApproversTrimmed" :breakpoint="0" empty-text="" />
<gl-deprecated-button variant="link" @click="toggle">{{
--
GitLab
From 7c0446c874303f371779d0503cc2e35a514ee0ed Mon Sep 17 00:00:00 2001
From: Kyle Mann <kmann@gitlab.com>
Date: Mon, 14 Sep 2020 17:58:48 +0200
Subject: [PATCH 06/14] Fix icon display
---
.../components/approvals/approvals_footer.vue | 10 ++++++----
1 file changed, 6 insertions(+), 4 deletions(-)
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
index 1c110caf660f5b..b1a47ee1e59231 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
@@ -1,5 +1,5 @@
<script>
-import { GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
+import { GlButton, GlDeprecatedButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
import { __ } from '~/locale';
import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
import ApprovalsList from './approvals_list.vue';
@@ -8,6 +8,7 @@ export default {
components: {
GlIcon,
GlButton,
+ GlDeprecatedButton,
GlLoadingIcon,
UserAvatarList,
ApprovalsList,
@@ -68,12 +69,13 @@ export default {
<div>
<div class="mr-widget-extension d-flex align-items-center pl-3">
<gl-button
- class="square s32 gl-mr-3"
+ class="gl-mr-3"
+ category="tertiary"
:aria-label="ariaLabel"
@click="toggle"
>
- <gl-loading-icon v-if="!isCollapsed && isLoadingRules" />
- <gl-icon v-else :name="angleIcon" :size="16" />
+ <gl-loading-icon v-if="!isCollapsed && isLoadingRules" class="gl-mr-0!" />
+ <gl-icon v-else :name="angleIcon" :size="16" class="gl-mr-0!" />
</gl-button>
<template v-if="isCollapsed">
<user-avatar-list :items="suggestedApproversTrimmed" :breakpoint="0" empty-text="" />
--
GitLab
From 5daa110a86b2535c570e0c21125fdf5e853c89d4 Mon Sep 17 00:00:00 2001
From: Kyle Mann <kmann@gitlab.com>
Date: Tue, 15 Sep 2020 17:21:39 +0200
Subject: [PATCH 07/14] Update button in spec
---
.../components/approvals/approvals_footer_spec.js | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/ee/spec/frontend/vue_mr_widget/components/approvals/approvals_footer_spec.js b/ee/spec/frontend/vue_mr_widget/components/approvals/approvals_footer_spec.js
index 3ed688f93cc0e4..e439c24ab08fb6 100644
--- a/ee/spec/frontend/vue_mr_widget/components/approvals/approvals_footer_spec.js
+++ b/ee/spec/frontend/vue_mr_widget/components/approvals/approvals_footer_spec.js
@@ -1,5 +1,5 @@
import { shallowMount } from '@vue/test-utils';
-import { GlDeprecatedButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
+import { GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
import ApprovalsList from 'ee/vue_merge_request_widget/components/approvals/approvals_list.vue';
import ApprovalsFooter from 'ee/vue_merge_request_widget/components/approvals/approvals_footer.vue';
import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
@@ -23,8 +23,8 @@ describe('EE MRWidget approvals footer', () => {
const findToggle = () => wrapper.find('button');
const findToggleIcon = () => findToggle().find(GlIcon);
const findToggleLoadingIcon = () => findToggle().find(GlLoadingIcon);
- const findExpandButton = () => wrapper.find(GlDeprecatedButton);
- const findCollapseButton = () => wrapper.find(GlDeprecatedButton);
+ const findExpandButton = () => wrapper.find(GlButton);
+ const findCollapseButton = () => wrapper.find(GlButton);
const findList = () => wrapper.find(ApprovalsList);
const findAvatars = () => wrapper.find(UserAvatarList);
--
GitLab
From c6954fb0a0b3a51269085ef37d1c07e349e0f8e8 Mon Sep 17 00:00:00 2001
From: Kyle Mann <kmann@gitlab.com>
Date: Wed, 16 Sep 2020 15:28:35 +0200
Subject: [PATCH 08/14] Update button prettier
---
.../components/approvals/approvals_footer.vue | 7 +------
1 file changed, 1 insertion(+), 6 deletions(-)
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
index b1a47ee1e59231..f0bce5a6965c28 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
@@ -68,12 +68,7 @@ export default {
<template>
<div>
<div class="mr-widget-extension d-flex align-items-center pl-3">
- <gl-button
- class="gl-mr-3"
- category="tertiary"
- :aria-label="ariaLabel"
- @click="toggle"
- >
+ <gl-button class="gl-mr-3" category="tertiary" :aria-label="ariaLabel" @click="toggle">
<gl-loading-icon v-if="!isCollapsed && isLoadingRules" class="gl-mr-0!" />
<gl-icon v-else :name="angleIcon" :size="16" class="gl-mr-0!" />
</gl-button>
--
GitLab
From 8fe205cadb397a9993561d6e1db11b6c4864b303 Mon Sep 17 00:00:00 2001
From: Kyle Mann <kmann@gitlab.com>
Date: Fri, 11 Sep 2020 12:50:53 +0200
Subject: [PATCH 09/14] Replace button GlButton
---
.../components/approvals/approvals_footer.vue | 11 +++++------
1 file changed, 5 insertions(+), 6 deletions(-)
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
index 93f0eefc945263..1c110caf660f5b 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
@@ -1,5 +1,5 @@
<script>
-import { GlDeprecatedButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
+import { GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
import { __ } from '~/locale';
import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
import ApprovalsList from './approvals_list.vue';
@@ -7,7 +7,7 @@ import ApprovalsList from './approvals_list.vue';
export default {
components: {
GlIcon,
- GlDeprecatedButton,
+ GlButton,
GlLoadingIcon,
UserAvatarList,
ApprovalsList,
@@ -67,15 +67,14 @@ export default {
<template>
<div>
<div class="mr-widget-extension d-flex align-items-center pl-3">
- <button
- class="btn btn-blank square s32 gl-mr-3"
- type="button"
+ <gl-button
+ class="square s32 gl-mr-3"
:aria-label="ariaLabel"
@click="toggle"
>
<gl-loading-icon v-if="!isCollapsed && isLoadingRules" />
<gl-icon v-else :name="angleIcon" :size="16" />
- </button>
+ </gl-button>
<template v-if="isCollapsed">
<user-avatar-list :items="suggestedApproversTrimmed" :breakpoint="0" empty-text="" />
<gl-deprecated-button variant="link" @click="toggle">{{
--
GitLab
From e42ceabdffd3c81c33da951fb343850dc8acfb6d Mon Sep 17 00:00:00 2001
From: Enrique Alcantara <ealcantara@gitlab.com>
Date: Thu, 17 Sep 2020 09:39:35 -0400
Subject: [PATCH 10/14] Fix test specs
---
.../components/approvals/approvals_footer.vue | 3 ++-
.../components/approvals/approvals_footer_spec.js | 6 +++---
2 files changed, 5 insertions(+), 4 deletions(-)
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
index 1c110caf660f5b..ca58b7e7bf5e73 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
@@ -1,5 +1,5 @@
<script>
-import { GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
+import { GlButton, GlDeprecatedButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
import { __ } from '~/locale';
import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
import ApprovalsList from './approvals_list.vue';
@@ -8,6 +8,7 @@ export default {
components: {
GlIcon,
GlButton,
+ GlDeprecatedButton,
GlLoadingIcon,
UserAvatarList,
ApprovalsList,
diff --git a/ee/spec/frontend/vue_mr_widget/components/approvals/approvals_footer_spec.js b/ee/spec/frontend/vue_mr_widget/components/approvals/approvals_footer_spec.js
index 3ed688f93cc0e4..c1a5c6791d1443 100644
--- a/ee/spec/frontend/vue_mr_widget/components/approvals/approvals_footer_spec.js
+++ b/ee/spec/frontend/vue_mr_widget/components/approvals/approvals_footer_spec.js
@@ -1,5 +1,5 @@
import { shallowMount } from '@vue/test-utils';
-import { GlDeprecatedButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
+import { GlDeprecatedButton, GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
import ApprovalsList from 'ee/vue_merge_request_widget/components/approvals/approvals_list.vue';
import ApprovalsFooter from 'ee/vue_merge_request_widget/components/approvals/approvals_footer.vue';
import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
@@ -20,7 +20,7 @@ describe('EE MRWidget approvals footer', () => {
});
};
- const findToggle = () => wrapper.find('button');
+ const findToggle = () => wrapper.find(GlButton);
const findToggleIcon = () => findToggle().find(GlIcon);
const findToggleLoadingIcon = () => findToggle().find(GlLoadingIcon);
const findExpandButton = () => wrapper.find(GlDeprecatedButton);
@@ -138,7 +138,7 @@ describe('EE MRWidget approvals footer', () => {
it('expands when clicked', () => {
const button = findToggle();
- button.trigger('click');
+ button.vm.$emit('click');
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.emitted().input).toEqual([[true]]);
--
GitLab
From b7b07e90d86f0c07ef0735a021708e3a70884e9d Mon Sep 17 00:00:00 2001
From: Kyle Mann <kmann@gitlab.com>
Date: Thu, 8 Oct 2020 17:01:23 +0200
Subject: [PATCH 11/14] Apply suggestion
---
.../components/approvals/approvals_footer.vue | 12 ++++++------
1 file changed, 6 insertions(+), 6 deletions(-)
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
index ca58b7e7bf5e73..2d5e8e654d90a2 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
@@ -68,14 +68,14 @@ export default {
<template>
<div>
<div class="mr-widget-extension d-flex align-items-center pl-3">
- <gl-button
- class="square s32 gl-mr-3"
+ <gl-button
+ class="gl-mr-3"
:aria-label="ariaLabel"
+ :loading="!isCollapsed && isLoadingRules"
+ :icon="angleIcon"
+ category="tertiary"
@click="toggle"
- >
- <gl-loading-icon v-if="!isCollapsed && isLoadingRules" />
- <gl-icon v-else :name="angleIcon" :size="16" />
- </gl-button>
+ />
<template v-if="isCollapsed">
<user-avatar-list :items="suggestedApproversTrimmed" :breakpoint="0" empty-text="" />
<gl-deprecated-button variant="link" @click="toggle">{{
--
GitLab
From 6795aa24fbdd97a00724d7d0664cd20b82618d7a Mon Sep 17 00:00:00 2001
From: Taurie Davis <taurie@gitlab.com>
Date: Fri, 23 Oct 2020 09:03:31 -0700
Subject: [PATCH 12/14] Correct styling of loading button on mr widget
extension
---
app/assets/stylesheets/pages/merge_requests.scss | 16 ++++++++++++++++
.../components/approvals/approvals_footer.vue | 4 ++--
2 files changed, 18 insertions(+), 2 deletions(-)
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 8aaeb92eb7a98a..4433abeddaf1fc 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -67,6 +67,22 @@ $mr-widget-min-height: 69px;
background-color: $gray-100;
cursor: pointer;
}
+
+ .mr-widget-extension-button {
+ // Styles loading button without border
+ // Can be removed after https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1029 is complete
+ &[disabled] {
+ box-shadow: none !important;
+
+ .gl-button-loading-indicator {
+ margin-right: 0 !important;
+ }
+
+ svg {
+ display: none;
+ }
+ }
+ }
}
.mr-widget-workflow {
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
index 2d5e8e654d90a2..1084772f97200d 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
@@ -68,8 +68,8 @@ export default {
<template>
<div>
<div class="mr-widget-extension d-flex align-items-center pl-3">
- <gl-button
- class="gl-mr-3"
+ <gl-button
+ class="gl-mr-3 mr-widget-extension-button"
:aria-label="ariaLabel"
:loading="!isCollapsed && isLoadingRules"
:icon="angleIcon"
--
GitLab
From 6fb7783e67cf99d097dc9e374d1850192a3c14cc Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Mon, 26 Oct 2020 17:06:34 +0000
Subject: [PATCH 13/14] Fix specs and prefer util classes over new CSS
---
app/assets/stylesheets/pages/merge_requests.scss | 16 ----------------
.../components/approvals/approvals_footer.vue | 13 ++++++++-----
.../approvals/approvals_footer_spec.js | 13 +++++++++----
3 files changed, 17 insertions(+), 25 deletions(-)
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index ad65a5c2c93a2e..796228f66ce79b 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -67,22 +67,6 @@ $mr-widget-min-height: 69px;
background-color: $gray-100;
cursor: pointer;
}
-
- .mr-widget-extension-button {
- // Styles loading button without border
- // Can be removed after https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1029 is complete
- &[disabled] {
- box-shadow: none !important;
-
- .gl-button-loading-indicator {
- margin-right: 0 !important;
- }
-
- svg {
- display: none;
- }
- }
- }
}
.mr-widget-workflow {
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
index 1084772f97200d..69a0ccefacc4d2 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
@@ -1,15 +1,13 @@
<script>
-import { GlButton, GlDeprecatedButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
+import { GlButton, GlDeprecatedButton } from '@gitlab/ui';
import { __ } from '~/locale';
import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
import ApprovalsList from './approvals_list.vue';
export default {
components: {
- GlIcon,
GlButton,
GlDeprecatedButton,
- GlLoadingIcon,
UserAvatarList,
ApprovalsList,
},
@@ -56,6 +54,9 @@ export default {
suggestedApproversTrimmed() {
return this.suggestedApprovers.slice(0, Math.min(5, this.suggestedApprovers.length));
},
+ shouldShowLoadingSpinner() {
+ return !this.isCollapsed && this.isLoadingRules;
+ },
},
methods: {
toggle() {
@@ -68,10 +69,12 @@ export default {
<template>
<div>
<div class="mr-widget-extension d-flex align-items-center pl-3">
+ <!-- TODO: simplify button classes once https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1029 is completed -->
<gl-button
- class="gl-mr-3 mr-widget-extension-button"
+ class="gl-mr-3"
+ :class="{ 'gl-shadow-none!': shouldShowLoadingSpinner }"
:aria-label="ariaLabel"
- :loading="!isCollapsed && isLoadingRules"
+ :loading="shouldShowLoadingSpinner"
:icon="angleIcon"
category="tertiary"
@click="toggle"
diff --git a/ee/spec/frontend/vue_mr_widget/components/approvals/approvals_footer_spec.js b/ee/spec/frontend/vue_mr_widget/components/approvals/approvals_footer_spec.js
index 3c14143c1805dd..45e76912ce6b6d 100644
--- a/ee/spec/frontend/vue_mr_widget/components/approvals/approvals_footer_spec.js
+++ b/ee/spec/frontend/vue_mr_widget/components/approvals/approvals_footer_spec.js
@@ -1,5 +1,6 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
import { GlDeprecatedButton, GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
+import stubChildren from 'helpers/stub_children';
import ApprovalsList from 'ee/vue_merge_request_widget/components/approvals/approvals_list.vue';
import ApprovalsFooter from 'ee/vue_merge_request_widget/components/approvals/approvals_footer.vue';
import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
@@ -11,20 +12,24 @@ describe('EE MRWidget approvals footer', () => {
let wrapper;
const createComponent = (props = {}) => {
- wrapper = shallowMount(ApprovalsFooter, {
+ wrapper = mount(ApprovalsFooter, {
propsData: {
suggestedApprovers: testSuggestedApprovers(),
approvalRules: testApprovalRules(),
...props,
},
+ stubs: {
+ ...stubChildren(ApprovalsFooter),
+ GlButton: false,
+ },
});
};
const findToggle = () => wrapper.find(GlButton);
const findToggleIcon = () => findToggle().find(GlIcon);
const findToggleLoadingIcon = () => findToggle().find(GlLoadingIcon);
- const findExpandButton = () => wrapper.find(GlButton);
- const findCollapseButton = () => wrapper.find(GlButton);
+ const findExpandButton = () => wrapper.find(GlDeprecatedButton);
+ const findCollapseButton = () => wrapper.find(GlDeprecatedButton);
const findList = () => wrapper.find(ApprovalsList);
const findAvatars = () => wrapper.find(UserAvatarList);
--
GitLab
From e0188ad756326a831bd8f6f5ed8198826ffc06f0 Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Tue, 27 Oct 2020 10:54:33 +0000
Subject: [PATCH 14/14] Add changelog
---
...otstrap-button-to-gitlab-ui-glbutton-in-ee-app-assets.yml | 5 +++++
1 file changed, 5 insertions(+)
create mode 100644 ee/changelogs/unreleased/229316-migrate-bootstrap-button-to-gitlab-ui-glbutton-in-ee-app-assets.yml
diff --git a/ee/changelogs/unreleased/229316-migrate-bootstrap-button-to-gitlab-ui-glbutton-in-ee-app-assets.yml b/ee/changelogs/unreleased/229316-migrate-bootstrap-button-to-gitlab-ui-glbutton-in-ee-app-assets.yml
new file mode 100644
index 00000000000000..35fa62ee6136e0
--- /dev/null
+++ b/ee/changelogs/unreleased/229316-migrate-bootstrap-button-to-gitlab-ui-glbutton-in-ee-app-assets.yml
@@ -0,0 +1,5 @@
+---
+title: Update approvals toggle button style
+merge_request: 42075
+author:
+type: other
--
GitLab