diff --git a/app/assets/javascripts/vue_merge_request_widget/components/state_container.vue b/app/assets/javascripts/vue_merge_request_widget/components/state_container.vue
index 86caccfc95b28fc27977a2ff3d42a9ff5d08aa26..2bba8d2dc82c98a6a4b471e6f121a7642a6db823 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/state_container.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/state_container.vue
@@ -1,13 +1,23 @@
<script>
+import { GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { __ } from '~/locale';
import StatusIcon from './mr_widget_status_icon.vue';
import Actions from './action_buttons.vue';
export default {
components: {
+ GlButton,
StatusIcon,
Actions,
},
+ directives: {
+ GlTooltip: GlTooltipDirective,
+ },
props: {
+ mr: {
+ type: Object,
+ required: true,
+ },
isLoading: {
type: Boolean,
required: false,
@@ -24,6 +34,10 @@ export default {
default: () => [],
},
},
+ i18n: {
+ expandDetailsTooltip: __('Expand merge details'),
+ collapseDetailsTooltip: __('Collapse merge details'),
+ },
};
</script>
@@ -36,18 +50,37 @@ export default {
<slot name="icon">
<status-icon :status="status" />
</slot>
- <div
- :class="{ 'gl-display-flex': actions.length, 'gl-md-display-flex': !actions.length }"
- class="media-body"
- >
- <slot></slot>
+ <div class="gl-display-flex gl-w-full">
+ <div
+ :class="{ 'gl-display-flex': actions.length, 'gl-md-display-flex': !actions.length }"
+ class="media-body"
+ >
+ <slot></slot>
+ <div
+ :class="{ 'gl-flex-direction-column-reverse': !actions.length }"
+ class="gl-display-flex gl-md-display-block gl-font-size-0 gl-ml-auto"
+ >
+ <slot name="actions">
+ <actions v-if="actions.length" :tertiary-buttons="actions" />
+ </slot>
+ </div>
+ </div>
<div
- :class="{ 'gl-flex-direction-column-reverse': !actions.length }"
- class="gl-display-flex gl-md-display-block gl-font-size-0 gl-ml-auto"
+ class="gl-md-display-none gl-border-l-1 gl-border-l-solid gl-border-gray-100 gl-ml-3 gl-pl-3 gl-h-6 gl-mt-1"
>
- <slot name="actions">
- <actions v-if="actions.length" :tertiary-buttons="actions" />
- </slot>
+ <gl-button
+ v-gl-tooltip
+ :title="
+ mr.mergeDetailsCollapsed
+ ? $options.i18n.expandDetailsTooltip
+ : $options.i18n.collapseDetailsTooltip
+ "
+ :icon="mr.mergeDetailsCollapsed ? 'chevron-lg-down' : 'chevron-lg-up'"
+ category="tertiary"
+ size="small"
+ class="gl-vertical-align-top"
+ @click="() => mr.toggleMergeDetails()"
+ />
</div>
</div>
</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue
index f97c980ea36a9e672664773605499f633a927476..79e878431ed6131a19caf0e03498e87b8866a659 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue
@@ -6,11 +6,17 @@ export default {
components: {
StateContainer,
},
+ props: {
+ mr: {
+ type: Object,
+ required: true,
+ },
+ },
};
</script>
<template>
- <state-container status="failed">
+ <state-container :mr="mr" status="failed">
<span class="gl-font-weight-bold">
{{ s__('mrWidget|Merge unavailable: merge requests are read-only on archived projects.') }}
</span>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue
index 9a311b3c8f45bbc177b31d50f6f613ecb25cca60..3c6c2a44e7076c8902fe807749c33801a2efdd64 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue
@@ -150,7 +150,7 @@ export default {
};
</script>
<template>
- <state-container status="scheduled" :is-loading="loading" :actions="actions">
+ <state-container :mr="mr" status="scheduled" :is-loading="loading" :actions="actions">
<template #loading>
<gl-skeleton-loader :width="334" :height="30">
<rect x="0" y="3" width="24" height="24" rx="4" />
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
index 97a9aba970fbfaaeb153c9f4d9d2006f863eb845..39c56cbb93d23e20b11ba2ca050f5f4d465cf58d 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
@@ -58,7 +58,7 @@ export default {
};
</script>
<template>
- <state-container status="failed" :actions="actions">
+ <state-container :mr="mr" status="failed" :actions="actions">
<span class="gl-font-weight-bold">
<template v-if="mergeError">{{ mergeError }}</template>
{{ s__('mrWidget|This merge request failed to be merged automatically') }}
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue
index 3c63a724e15bf285dad832a8722bfcb101331523..922075516f377173fb3426037cb25e663600612f 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue
@@ -6,10 +6,16 @@ export default {
components: {
StateContainer,
},
+ props: {
+ mr: {
+ type: Object,
+ required: true,
+ },
+ },
};
</script>
<template>
- <state-container status="loading">
+ <state-container :mr="mr" status="loading">
<span class="gl-font-weight-bold">
{{ s__('mrWidget|Checking if merge request can be merged…') }}
</span>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
index c15c6f253c28918f98a2aea7eb6d62394b650288..d60d3cfc9ea16dc5c07b1705828daca06a7c60fc 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
@@ -86,7 +86,7 @@ export default {
};
</script>
<template>
- <state-container status="failed" :is-loading="isLoading">
+ <state-container :mr="mr" status="failed" :is-loading="isLoading">
<template #loading>
<gl-skeleton-loader :width="334" :height="30">
<rect x="0" y="7" width="150" height="16" rx="4" />
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue
index dea4b2e83c08b98ffdfd9e96d0f6a158236a7a5a..8a7f15d8d1a878466d88cae013d628d35744f373 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue
@@ -95,12 +95,12 @@ export default {
};
</script>
<template>
- <state-container v-if="isRefreshing" status="loading">
+ <state-container v-if="isRefreshing" :mr="mr" status="loading">
<span class="gl-font-weight-bold">
{{ s__('mrWidget|Refreshing now') }}
</span>
</state-container>
- <state-container v-else status="failed" :actions="actions">
+ <state-container v-else :mr="mr" status="failed" :actions="actions">
<span class="gl-font-weight-bold">
<span v-if="mr.mergeError" class="has-error-message" data-testid="merge-error">
{{ mergeError }}
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
index dc86aa17c6534414d162485aa1c5d35bb368effe..e9298b0c856e57951280c2dc50ad9423498ace6b 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
@@ -150,7 +150,7 @@ export default {
};
</script>
<template>
- <state-container :actions="actions" status="merged">
+ <state-container :mr="mr" :actions="actions" status="merged">
<mr-widget-author-time
:action-text="s__('mrWidget|Merged by')"
:author="mr.metrics.mergedBy"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
index 781612135c2b1823a1a5d372d7713689a1d5ffb1..37c8d5d15f30de77b4068a9eba98816b3e3a2b5e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
@@ -152,7 +152,7 @@ export default {
};
</script>
<template>
- <state-container :status="status" :is-loading="isLoading">
+ <state-container :mr="mr" :status="status" :is-loading="isLoading">
<template #loading>
<gl-skeleton-loader :width="334" :height="30">
<rect x="0" y="3" width="24" height="24" rx="4" />
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue
index 000ea2d0bdc0c8e276bbf1963ccd064af5765c05..27919f90cc381ac54bfa43c382dbd9eed73666de 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue
@@ -22,7 +22,7 @@ export default {
</script>
<template>
- <state-container status="failed">
+ <state-container :mr="mr" status="failed">
<span
class="gl-font-weight-bold gl-md-mr-3 gl-flex-grow-1 gl-ml-0! gl-text-body!"
data-qa-selector="head_mismatch_content"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue
index 43be8444cb56bc6b91193e1af932c2e3f7cb0da4..8f2e4eb21312a9525829ae3f480fe6fc5323a56e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue
@@ -24,7 +24,7 @@ export default {
</script>
<template>
- <state-container status="failed">
+ <state-container :mr="mr" status="failed">
<span
class="gl-ml-3 gl-font-weight-bold gl-w-100 gl-flex-grow-1 gl-md-mr-3 gl-ml-0! gl-text-body!"
>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
index 43d26d34a93294676c97898ba722a534aabc6392..0458e9dfaf57838e18a5f9703479a5fb5d277463 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
@@ -163,7 +163,7 @@ export default {
</script>
<template>
- <state-container status="failed">
+ <state-container :mr="mr" status="failed">
<span class="gl-font-weight-bold gl-ml-0! gl-text-body! gl-flex-grow-1">
{{ __("Merge blocked: merge request must be marked as ready. It's still marked as draft.") }}
</span>
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index 77d6c51a3dc914d52be9b0b9d1d0888d20aa6c6c..c8a2a8d119b6fa78d42e997820c1427134a4746c 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -230,6 +230,11 @@ export default {
shouldShowCodeQualityExtension() {
return window.gon?.features?.refactorCodeQualityExtension;
},
+ shouldShowMergeDetails() {
+ if (this.mr.state === 'readyToMerge') return true;
+
+ return !this.mr.mergeDetailsCollapsed;
+ },
},
watch: {
'mr.machineValue': {
@@ -318,6 +323,12 @@ export default {
this.initPolling();
this.bindEventHubListeners();
eventHub.$on('mr.discussion.updated', this.checkStatus);
+
+ window.addEventListener('resize', () => {
+ if (window.innerWidth >= 768) {
+ this.mr.toggleMergeDetails(false);
+ }
+ });
},
getServiceEndpoints(store) {
return {
@@ -621,7 +632,12 @@ export default {
<div class="mr-widget-section" data-qa-selector="mr_widget_content">
<component :is="componentName" :mr="mr" :service="service" />
- <ready-to-merge v-if="mr.commitsCount" :mr="mr" :service="service" />
+ <ready-to-merge
+ v-if="mr.commitsCount"
+ v-show="shouldShowMergeDetails"
+ :mr="mr"
+ :service="service"
+ />
</div>
</div>
<mr-widget-pipeline-container
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
index ae2f95f4cfa5182da7964c371505b6879cd88434..e6ff586892f3c861491122fbf694ce3dab700ca2 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
@@ -28,6 +28,7 @@ export default class MergeRequestStore {
this.stateMachine = machine(STATE_MACHINE.definition);
this.machineValue = this.stateMachine.value;
+ this.mergeDetailsCollapsed = window.innerWidth < 768;
this.setPaths(data);
@@ -405,4 +406,8 @@ export default class MergeRequestStore {
this.transitionStateMachine(transitionOptions);
}
+
+ toggleMergeDetails(val = !this.mergeDetailsCollapsed) {
+ this.mergeDetailsCollapsed = val;
+ }
}
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_jira_association_missing.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_jira_association_missing.vue
index e05648870fdf4feb651b9689ec1e560a638e2acb..99117ff1b1fe62a8965f2f1c6000edbf87fe8331 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_jira_association_missing.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_jira_association_missing.vue
@@ -6,11 +6,17 @@ export default {
components: {
StateContainer,
},
+ props: {
+ mr: {
+ type: Object,
+ required: true,
+ },
+ },
};
</script>
<template>
- <state-container status="failed">
+ <state-container :mr="mr" status="failed">
<span class="gl-font-weight-bold">
{{
s__(
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_policy_violation.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_policy_violation.vue
index 58ebad9d42b8b7cdd42f4ac8f9ab60dd7e59bfe4..68e4cb8ede8b34869f66154928ce5567e04d7606 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_policy_violation.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_policy_violation.vue
@@ -6,11 +6,17 @@ export default {
components: {
StateContainer,
},
+ props: {
+ mr: {
+ type: Object,
+ required: true,
+ },
+ },
};
</script>
<template>
- <state-container status="failed">
+ <state-container :mr="mr" status="failed">
<span class="gl-font-weight-bold">
{{ s__('mrWidget|Merge blocked: denied licenses must be removed.') }}
</span>
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_secondary_geo_node.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_secondary_geo_node.vue
index ba0eff9220d230c15d596e176a9bb73bb957243d..7af814cdc91a839928b36ae3796f3c4de6a90962 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_secondary_geo_node.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_secondary_geo_node.vue
@@ -20,7 +20,7 @@ export default {
</script>
<template>
- <state-container status="failed">
+ <state-container :mr="mr" status="failed">
<span class="gl-font-weight-bold">
{{ __('Merge unavailable: merge requests are read-only in a secondary Geo node.') }}
</span>
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index 0d419cda6fef3c9b96edf37c689a69f99f782821..5b086fe767074437d5395f921c2a0ae02016fc87 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -524,7 +524,12 @@ export default {
<div class="mr-widget-section">
<component :is="componentName" :mr="mr" :service="service" />
- <ready-to-merge v-if="mr.commitsCount" :mr="mr" :service="service" />
+ <ready-to-merge
+ v-if="mr.commitsCount"
+ v-show="shouldShowMergeDetails"
+ :mr="mr"
+ :service="service"
+ />
</div>
</div>
<mr-widget-pipeline-container
diff --git a/ee/spec/frontend/vue_merge_request_widget/components/states/mr_widget_jira_association_missing_spec.js b/ee/spec/frontend/vue_merge_request_widget/components/states/mr_widget_jira_association_missing_spec.js
index ea68dd6f707a8b146b989cf3f767fca935d4ae6d..7483311b4a18f6bd136dcd61537a1bc4704a1832 100644
--- a/ee/spec/frontend/vue_merge_request_widget/components/states/mr_widget_jira_association_missing_spec.js
+++ b/ee/spec/frontend/vue_merge_request_widget/components/states/mr_widget_jira_association_missing_spec.js
@@ -6,7 +6,11 @@ describe('MrWidgetJiraAssociationMissing', () => {
let wrapper;
beforeEach(() => {
- wrapper = shallowMount(MrWidgetJiraAssociationMissing);
+ wrapper = shallowMount(MrWidgetJiraAssociationMissing, {
+ propsData: {
+ mr: {},
+ },
+ });
});
afterEach(() => {
diff --git a/ee/spec/frontend/vue_merge_request_widget/components/states/mr_widget_policy_violation_spec.js b/ee/spec/frontend/vue_merge_request_widget/components/states/mr_widget_policy_violation_spec.js
index a6ec1ade661697d89ca934169b3fa851430ccfc5..1567d7c0222b2c5d1c632b7e6a0a4bc0ffa39778 100644
--- a/ee/spec/frontend/vue_merge_request_widget/components/states/mr_widget_policy_violation_spec.js
+++ b/ee/spec/frontend/vue_merge_request_widget/components/states/mr_widget_policy_violation_spec.js
@@ -5,7 +5,11 @@ describe('EE MrWidgetPolicyViolation', () => {
let wrapper;
const createComponent = () => {
- wrapper = shallowMount(MrWidgetPolicyViolation, {});
+ wrapper = shallowMount(MrWidgetPolicyViolation, {
+ propsData: {
+ mr: {},
+ },
+ });
};
afterEach(() => {
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index e46cf7594106cb72967c461527c8f83f362c662b..37843b8bb12e0eeb72d15a5fb55df3f873971f59 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -9391,6 +9391,9 @@ msgstr ""
msgid "Collapse jobs"
msgstr ""
+msgid "Collapse merge details"
+msgstr ""
+
msgid "Collapse milestones"
msgstr ""
@@ -15687,6 +15690,9 @@ msgstr ""
msgid "Expand jobs"
msgstr ""
+msgid "Expand merge details"
+msgstr ""
+
msgid "Expand milestones"
msgstr ""
diff --git a/spec/frontend/vue_merge_request_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap b/spec/frontend/vue_merge_request_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap
index 413ac0d61314fe177d2e7e8d2fe1894382389b7a..635ef0f6b0df38f185f7a218ecbb73af4e4aea25 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap
+++ b/spec/frontend/vue_merge_request_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap
@@ -41,105 +41,134 @@ exports[`MRWidgetAutoMergeEnabled when graphql is disabled template should have
</div>
<div
- class="media-body gl-display-flex"
+ class="gl-display-flex gl-w-full"
>
-
- <h4
- class="gl-mr-3"
- data-testid="statusText"
- >
- Set by
- <a
- class="author-link inline"
- >
- <img
- class="avatar avatar-inline s16"
- src="no_avatar.png"
- />
-
- <span
- class="author"
- >
-
- </span>
- </a>
- to be merged automatically when the pipeline succeeds
- </h4>
-
<div
- class="gl-display-flex gl-md-display-block gl-font-size-0 gl-ml-auto"
+ class="media-body gl-display-flex"
>
- <div>
- <div
- class="dropdown b-dropdown gl-new-dropdown gl-display-block gl-md-display-none! btn-group"
- lazy=""
- no-caret=""
+
+ <h4
+ class="gl-mr-3"
+ data-testid="statusText"
+ >
+ Set by
+ <a
+ class="author-link inline"
>
- <!---->
+ <img
+ class="avatar avatar-inline s16"
+ src="no_avatar.png"
+ />
+
+ <span
+ class="author"
+ >
+
+ </span>
+ </a>
+ to be merged automatically when the pipeline succeeds
+ </h4>
+
+ <div
+ class="gl-display-flex gl-md-display-block gl-font-size-0 gl-ml-auto"
+ >
+ <div>
+ <div
+ class="dropdown b-dropdown gl-new-dropdown gl-display-block gl-md-display-none! btn-group"
+ lazy=""
+ no-caret=""
+ >
+ <!---->
+ <button
+ aria-expanded="false"
+ aria-haspopup="true"
+ class="btn dropdown-toggle btn-default btn-sm gl-p-2! gl-button gl-dropdown-toggle btn-default-tertiary dropdown-icon-only dropdown-toggle-no-caret"
+ type="button"
+ >
+ <!---->
+
+ <svg
+ aria-hidden="true"
+ class="dropdown-icon gl-icon s16"
+ data-testid="ellipsis_v-icon"
+ role="img"
+ >
+ <use
+ href="#ellipsis_v"
+ />
+ </svg>
+
+ <span
+ class="gl-new-dropdown-button-text gl-sr-only"
+ >
+
+ </span>
+
+ <svg
+ aria-hidden="true"
+ class="gl-button-icon dropdown-chevron gl-icon s16"
+ data-testid="chevron-down-icon"
+ role="img"
+ >
+ <use
+ href="#chevron-down"
+ />
+ </svg>
+ </button>
+ <ul
+ class="dropdown-menu dropdown-menu-right"
+ role="menu"
+ tabindex="-1"
+ >
+ <!---->
+ </ul>
+ </div>
+
<button
- aria-expanded="false"
- aria-haspopup="true"
- class="btn dropdown-toggle btn-default btn-sm gl-p-2! gl-button gl-dropdown-toggle btn-default-tertiary dropdown-icon-only dropdown-toggle-no-caret"
+ class="btn gl-display-none gl-md-display-block gl-float-left btn-confirm btn-sm gl-button btn-confirm-tertiary js-cancel-auto-merge"
+ data-qa-selector="cancel_auto_merge_button"
+ data-testid="cancelAutomaticMergeButton"
type="button"
>
<!---->
- <svg
- aria-hidden="true"
- class="dropdown-icon gl-icon s16"
- data-testid="ellipsis_v-icon"
- role="img"
- >
- <use
- href="#ellipsis_v"
- />
- </svg>
-
+ <!---->
+
<span
- class="gl-new-dropdown-button-text gl-sr-only"
+ class="gl-button-text"
>
+ Cancel auto-merge
+
</span>
-
- <svg
- aria-hidden="true"
- class="gl-button-icon dropdown-chevron gl-icon s16"
- data-testid="chevron-down-icon"
- role="img"
- >
- <use
- href="#chevron-down"
- />
- </svg>
</button>
- <ul
- class="dropdown-menu dropdown-menu-right"
- role="menu"
- tabindex="-1"
- >
- <!---->
- </ul>
</div>
+ </div>
+ </div>
+
+ <div
+ class="gl-md-display-none gl-border-l-1 gl-border-l-solid gl-border-gray-100 gl-ml-3 gl-pl-3 gl-h-6 gl-mt-1"
+ >
+ <button
+ class="btn gl-vertical-align-top btn-default btn-sm gl-button btn-default-tertiary btn-icon"
+ title="Collapse merge details"
+ type="button"
+ >
+ <!---->
- <button
- class="btn gl-display-none gl-md-display-block gl-float-left btn-confirm btn-sm gl-button btn-confirm-tertiary js-cancel-auto-merge"
- data-qa-selector="cancel_auto_merge_button"
- data-testid="cancelAutomaticMergeButton"
- type="button"
+ <svg
+ aria-hidden="true"
+ class="gl-button-icon gl-icon s16"
+ data-testid="chevron-lg-up-icon"
+ role="img"
>
- <!---->
-
- <!---->
-
- <span
- class="gl-button-text"
- >
-
- Cancel auto-merge
-
- </span>
- </button>
- </div>
+ <use
+ href="#chevron-lg-up"
+ />
+ </svg>
+
+ <!---->
+ </button>
</div>
</div>
</div>
@@ -186,105 +215,134 @@ exports[`MRWidgetAutoMergeEnabled when graphql is enabled template should have c
</div>
<div
- class="media-body gl-display-flex"
+ class="gl-display-flex gl-w-full"
>
-
- <h4
- class="gl-mr-3"
- data-testid="statusText"
- >
- Set by
- <a
- class="author-link inline"
- >
- <img
- class="avatar avatar-inline s16"
- src="no_avatar.png"
- />
-
- <span
- class="author"
- >
-
- </span>
- </a>
- to be merged automatically when the pipeline succeeds
- </h4>
-
<div
- class="gl-display-flex gl-md-display-block gl-font-size-0 gl-ml-auto"
+ class="media-body gl-display-flex"
>
- <div>
- <div
- class="dropdown b-dropdown gl-new-dropdown gl-display-block gl-md-display-none! btn-group"
- lazy=""
- no-caret=""
+
+ <h4
+ class="gl-mr-3"
+ data-testid="statusText"
+ >
+ Set by
+ <a
+ class="author-link inline"
>
- <!---->
+ <img
+ class="avatar avatar-inline s16"
+ src="no_avatar.png"
+ />
+
+ <span
+ class="author"
+ >
+
+ </span>
+ </a>
+ to be merged automatically when the pipeline succeeds
+ </h4>
+
+ <div
+ class="gl-display-flex gl-md-display-block gl-font-size-0 gl-ml-auto"
+ >
+ <div>
+ <div
+ class="dropdown b-dropdown gl-new-dropdown gl-display-block gl-md-display-none! btn-group"
+ lazy=""
+ no-caret=""
+ >
+ <!---->
+ <button
+ aria-expanded="false"
+ aria-haspopup="true"
+ class="btn dropdown-toggle btn-default btn-sm gl-p-2! gl-button gl-dropdown-toggle btn-default-tertiary dropdown-icon-only dropdown-toggle-no-caret"
+ type="button"
+ >
+ <!---->
+
+ <svg
+ aria-hidden="true"
+ class="dropdown-icon gl-icon s16"
+ data-testid="ellipsis_v-icon"
+ role="img"
+ >
+ <use
+ href="#ellipsis_v"
+ />
+ </svg>
+
+ <span
+ class="gl-new-dropdown-button-text gl-sr-only"
+ >
+
+ </span>
+
+ <svg
+ aria-hidden="true"
+ class="gl-button-icon dropdown-chevron gl-icon s16"
+ data-testid="chevron-down-icon"
+ role="img"
+ >
+ <use
+ href="#chevron-down"
+ />
+ </svg>
+ </button>
+ <ul
+ class="dropdown-menu dropdown-menu-right"
+ role="menu"
+ tabindex="-1"
+ >
+ <!---->
+ </ul>
+ </div>
+
<button
- aria-expanded="false"
- aria-haspopup="true"
- class="btn dropdown-toggle btn-default btn-sm gl-p-2! gl-button gl-dropdown-toggle btn-default-tertiary dropdown-icon-only dropdown-toggle-no-caret"
+ class="btn gl-display-none gl-md-display-block gl-float-left btn-confirm btn-sm gl-button btn-confirm-tertiary js-cancel-auto-merge"
+ data-qa-selector="cancel_auto_merge_button"
+ data-testid="cancelAutomaticMergeButton"
type="button"
>
<!---->
- <svg
- aria-hidden="true"
- class="dropdown-icon gl-icon s16"
- data-testid="ellipsis_v-icon"
- role="img"
- >
- <use
- href="#ellipsis_v"
- />
- </svg>
-
+ <!---->
+
<span
- class="gl-new-dropdown-button-text gl-sr-only"
+ class="gl-button-text"
>
+ Cancel auto-merge
+
</span>
-
- <svg
- aria-hidden="true"
- class="gl-button-icon dropdown-chevron gl-icon s16"
- data-testid="chevron-down-icon"
- role="img"
- >
- <use
- href="#chevron-down"
- />
- </svg>
</button>
- <ul
- class="dropdown-menu dropdown-menu-right"
- role="menu"
- tabindex="-1"
- >
- <!---->
- </ul>
</div>
+ </div>
+ </div>
+
+ <div
+ class="gl-md-display-none gl-border-l-1 gl-border-l-solid gl-border-gray-100 gl-ml-3 gl-pl-3 gl-h-6 gl-mt-1"
+ >
+ <button
+ class="btn gl-vertical-align-top btn-default btn-sm gl-button btn-default-tertiary btn-icon"
+ title="Collapse merge details"
+ type="button"
+ >
+ <!---->
- <button
- class="btn gl-display-none gl-md-display-block gl-float-left btn-confirm btn-sm gl-button btn-confirm-tertiary js-cancel-auto-merge"
- data-qa-selector="cancel_auto_merge_button"
- data-testid="cancelAutomaticMergeButton"
- type="button"
+ <svg
+ aria-hidden="true"
+ class="gl-button-icon gl-icon s16"
+ data-testid="chevron-lg-up-icon"
+ role="img"
>
- <!---->
-
- <!---->
-
- <span
- class="gl-button-text"
- >
-
- Cancel auto-merge
-
- </span>
- </button>
- </div>
+ <use
+ href="#chevron-lg-up"
+ />
+ </svg>
+
+ <!---->
+ </button>
</div>
</div>
</div>
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_archived_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_archived_spec.js
index 5f2555b7a77baedbf8ba37c2be30059cd19c0c46..5c07f4ce143f2bc72ee2fe176f62d7ffe1e7dfef 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_archived_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_archived_spec.js
@@ -6,7 +6,7 @@ describe('MRWidgetArchived', () => {
let wrapper;
beforeEach(() => {
- wrapper = shallowMount(archivedComponent);
+ wrapper = shallowMount(archivedComponent, { propsData: { mr: {} } });
});
afterEach(() => {
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_checking_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_checking_spec.js
index 4021aff6014b51851ac691d423e25ff71fd6c3b3..ac18ccf9e26da517cd3767b0259191906efd92cc 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_checking_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_checking_spec.js
@@ -6,7 +6,7 @@ describe('MRWidgetChecking', () => {
let wrapper;
beforeEach(() => {
- wrapper = shallowMount(CheckingComponent);
+ wrapper = shallowMount(CheckingComponent, { propsData: { mr: {} } });
});
afterEach(() => {