diff options
Diffstat (limited to 'app/assets/javascripts/issuables_list/components')
-rw-r--r-- | app/assets/javascripts/issuables_list/components/issuable_list_root_app.vue | 96 |
1 files changed, 96 insertions, 0 deletions
diff --git a/app/assets/javascripts/issuables_list/components/issuable_list_root_app.vue b/app/assets/javascripts/issuables_list/components/issuable_list_root_app.vue new file mode 100644 index 00000000000..27a04da9541 --- /dev/null +++ b/app/assets/javascripts/issuables_list/components/issuable_list_root_app.vue @@ -0,0 +1,96 @@ +<script> +import { GlAlert, GlLabel } from '@gitlab/ui'; +import getIssuesListDetailsQuery from '../queries/get_issues_list_details.query.graphql'; +import { calculateJiraImportLabel, isFinished, isInProgress } from '~/jira_import/utils'; + +export default { + name: 'IssuableListRoot', + components: { + GlAlert, + GlLabel, + }, + props: { + canEdit: { + type: Boolean, + required: true, + }, + isJiraConfigured: { + type: Boolean, + required: true, + }, + issuesPath: { + type: String, + required: true, + }, + projectPath: { + type: String, + required: true, + }, + }, + data() { + return { + isFinishedAlertShowing: true, + isInProgressAlertShowing: true, + jiraImport: {}, + }; + }, + apollo: { + jiraImport: { + query: getIssuesListDetailsQuery, + variables() { + return { + fullPath: this.projectPath, + }; + }, + update: ({ project }) => ({ + isInProgress: isInProgress(project.jiraImportStatus), + isFinished: isFinished(project.jiraImportStatus), + label: calculateJiraImportLabel( + project.jiraImports.nodes, + project.issues.nodes.flatMap(({ labels }) => labels.nodes), + ), + }), + skip() { + return !this.isJiraConfigured || !this.canEdit; + }, + }, + }, + computed: { + labelTarget() { + return `${this.issuesPath}?label_name[]=${encodeURIComponent(this.jiraImport.label.title)}`; + }, + shouldShowFinishedAlert() { + return this.isFinishedAlertShowing && this.jiraImport.isFinished; + }, + shouldShowInProgressAlert() { + return this.isInProgressAlertShowing && this.jiraImport.isInProgress; + }, + }, + methods: { + hideFinishedAlert() { + this.isFinishedAlertShowing = false; + }, + hideInProgressAlert() { + this.isInProgressAlertShowing = false; + }, + }, +}; +</script> + +<template> + <div class="issuable-list-root"> + <gl-alert v-if="shouldShowInProgressAlert" @dismiss="hideInProgressAlert"> + {{ __('Import in progress. Refresh page to see newly added issues.') }} + </gl-alert> + <gl-alert v-if="shouldShowFinishedAlert" variant="success" @dismiss="hideFinishedAlert"> + {{ __('Issues successfully imported with the label') }} + <gl-label + :background-color="jiraImport.label.color" + scoped + size="sm" + :target="labelTarget" + :title="jiraImport.label.title" + /> + </gl-alert> + </div> +</template> |