diff options
Diffstat (limited to 'app/assets/javascripts/issuables_list')
4 files changed, 167 insertions, 12 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> diff --git a/app/assets/javascripts/issuables_list/eventhub.js b/app/assets/javascripts/issuables_list/eventhub.js index d1601a7d8f3..e31806ad199 100644 --- a/app/assets/javascripts/issuables_list/eventhub.js +++ b/app/assets/javascripts/issuables_list/eventhub.js @@ -1,5 +1,3 @@ -import Vue from 'vue'; +import createEventHub from '~/helpers/event_hub_factory'; -const issueablesEventBus = new Vue(); - -export default issueablesEventBus; +export default createEventHub(); diff --git a/app/assets/javascripts/issuables_list/index.js b/app/assets/javascripts/issuables_list/index.js index 9fc7fa837ff..6bfb885a8af 100644 --- a/app/assets/javascripts/issuables_list/index.js +++ b/app/assets/javascripts/issuables_list/index.js @@ -1,24 +1,63 @@ import Vue from 'vue'; +import VueApollo from 'vue-apollo'; +import createDefaultClient from '~/lib/graphql'; +import { parseBoolean } from '~/lib/utils/common_utils'; +import IssuableListRootApp from './components/issuable_list_root_app.vue'; import IssuablesListApp from './components/issuables_list_app.vue'; -export default function initIssuablesList() { - if (!gon.features || !gon.features.vueIssuablesList) { +function mountIssuableListRootApp() { + const el = document.querySelector('.js-projects-issues-root'); + + if (!el) { + return false; + } + + Vue.use(VueApollo); + + const defaultClient = createDefaultClient(); + const apolloProvider = new VueApollo({ + defaultClient, + }); + + return new Vue({ + el, + apolloProvider, + render(createComponent) { + return createComponent(IssuableListRootApp, { + props: { + canEdit: parseBoolean(el.dataset.canEdit), + isJiraConfigured: parseBoolean(el.dataset.isJiraConfigured), + issuesPath: el.dataset.issuesPath, + projectPath: el.dataset.projectPath, + }, + }); + }, + }); +} + +function mountIssuablesListApp() { + if (!gon.features?.vueIssuablesList) { return; } document.querySelectorAll('.js-issuables-list').forEach(el => { const { canBulkEdit, ...data } = el.dataset; - const props = { - ...data, - canBulkEdit: Boolean(canBulkEdit), - }; - return new Vue({ el, render(createElement) { - return createElement(IssuablesListApp, { props }); + return createElement(IssuablesListApp, { + props: { + ...data, + canBulkEdit: Boolean(canBulkEdit), + }, + }); }, }); }); } + +export default function initIssuablesList() { + mountIssuableListRootApp(); + mountIssuablesListApp(); +} diff --git a/app/assets/javascripts/issuables_list/queries/get_issues_list_details.query.graphql b/app/assets/javascripts/issuables_list/queries/get_issues_list_details.query.graphql new file mode 100644 index 00000000000..b62b9b2af60 --- /dev/null +++ b/app/assets/javascripts/issuables_list/queries/get_issues_list_details.query.graphql @@ -0,0 +1,22 @@ +#import "~/jira_import/queries/jira_import.fragment.graphql" + +query($fullPath: ID!) { + project(fullPath: $fullPath) { + issues { + nodes { + labels { + nodes { + title + color + } + } + } + } + jiraImportStatus + jiraImports { + nodes { + ...JiraImport + } + } + } +} |