summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/issuable
diff options
context:
space:
mode:
authorGitLab Bot <gitlab-bot@gitlab.com>2021-05-19 15:44:42 +0000
committerGitLab Bot <gitlab-bot@gitlab.com>2021-05-19 15:44:42 +0000
commit4555e1b21c365ed8303ffb7a3325d773c9b8bf31 (patch)
tree5423a1c7516cffe36384133ade12572cf709398d /app/assets/javascripts/issuable
parente570267f2f6b326480d284e0164a6464ba4081bc (diff)
downloadgitlab-ce-4555e1b21c365ed8303ffb7a3325d773c9b8bf31.tar.gz
Add latest changes from gitlab-org/gitlab@13-12-stable-eev13.12.0-rc42
Diffstat (limited to 'app/assets/javascripts/issuable')
-rw-r--r--app/assets/javascripts/issuable/components/csv_export_modal.vue6
-rw-r--r--app/assets/javascripts/issuable/components/status_box.vue103
2 files changed, 105 insertions, 4 deletions
diff --git a/app/assets/javascripts/issuable/components/csv_export_modal.vue b/app/assets/javascripts/issuable/components/csv_export_modal.vue
index 7bdd55ddda3..f17440a4a14 100644
--- a/app/assets/javascripts/issuable/components/csv_export_modal.vue
+++ b/app/assets/javascripts/issuable/components/csv_export_modal.vue
@@ -21,13 +21,11 @@ export default {
props: {
exportCsvPath: {
type: String,
- required: false,
- default: '',
+ required: true,
},
issuableCount: {
type: Number,
- required: false,
- default: 0,
+ required: true,
},
modalId: {
type: String,
diff --git a/app/assets/javascripts/issuable/components/status_box.vue b/app/assets/javascripts/issuable/components/status_box.vue
new file mode 100644
index 00000000000..cb768f2bc5b
--- /dev/null
+++ b/app/assets/javascripts/issuable/components/status_box.vue
@@ -0,0 +1,103 @@
+<script>
+import { GlIcon } from '@gitlab/ui';
+import Vue from 'vue';
+import { fetchPolicies } from '~/lib/graphql';
+import { __ } from '~/locale';
+
+export const statusBoxState = Vue.observable({
+ state: '',
+ updateStatus: null,
+});
+
+const CLASSES = {
+ opened: 'status-box-open',
+ locked: 'status-box-open',
+ closed: 'status-box-mr-closed',
+ merged: 'status-box-mr-merged',
+};
+
+const STATUS = {
+ opened: [__('Open'), 'issue-open-m'],
+ locked: [__('Open'), 'issue-open-m'],
+ closed: [__('Closed'), 'issue-close'],
+ merged: [__('Merged'), 'git-merge'],
+};
+
+export default {
+ components: {
+ GlIcon,
+ },
+ inject: {
+ query: { default: null },
+ projectPath: { default: null },
+ iid: { default: null },
+ },
+ props: {
+ initialState: {
+ type: String,
+ required: false,
+ default: null,
+ },
+ issuableType: {
+ type: String,
+ required: false,
+ default: '',
+ },
+ },
+ data() {
+ if (this.initialState) {
+ statusBoxState.state = this.initialState;
+ }
+
+ return statusBoxState;
+ },
+ computed: {
+ statusBoxClass() {
+ return CLASSES[`${this.issuableType}_${this.state}`] || CLASSES[this.state];
+ },
+ statusHumanName() {
+ return (STATUS[`${this.issuableType}_${this.state}`] || STATUS[this.state])[0];
+ },
+ statusIconName() {
+ return (STATUS[`${this.issuableType}_${this.state}`] || STATUS[this.state])[1];
+ },
+ },
+ created() {
+ if (!statusBoxState.updateStatus) {
+ statusBoxState.updateStatus = this.fetchState;
+ }
+ },
+ beforeDestroy() {
+ if (statusBoxState.updateStatus && this.query) {
+ statusBoxState.updateStatus = null;
+ }
+ },
+ methods: {
+ async fetchState() {
+ const { data } = await this.$apollo.query({
+ query: this.query,
+ variables: {
+ projectPath: this.projectPath,
+ iid: this.iid,
+ },
+ fetchPolicy: fetchPolicies.NO_CACHE,
+ });
+
+ statusBoxState.state = data?.workspace?.issuable?.state;
+ },
+ },
+};
+</script>
+
+<template>
+ <div :class="statusBoxClass" class="issuable-status-box status-box">
+ <gl-icon
+ :name="statusIconName"
+ class="gl-display-block gl-sm-display-none!"
+ data-testid="status-icon"
+ />
+ <span class="gl-display-none gl-sm-display-block">
+ {{ statusHumanName }}
+ </span>
+ </div>
+</template>