diff options
Diffstat (limited to 'app/assets')
7 files changed, 88 insertions, 44 deletions
diff --git a/app/assets/javascripts/alert_management/components/alert_management_table.vue b/app/assets/javascripts/alert_management/components/alert_management_table.vue index d86b57538ea..924d0c9b234 100644 --- a/app/assets/javascripts/alert_management/components/alert_management_table.vue +++ b/app/assets/javascripts/alert_management/components/alert_management_table.vue @@ -44,6 +44,8 @@ const initialPaginationState = { lastPageSize: null, }; +const TWELVE_HOURS_IN_MS = 12 * 60 * 60 * 1000; + export default { i18n: { noAlertsMsg: s__( @@ -149,9 +151,20 @@ export default { update(data) { const { alertManagementAlerts: { nodes: list = [], pageInfo = {} } = {} } = data.project || {}; + const now = new Date(); + + const listWithData = list.map(alert => { + const then = new Date(alert.startedAt); + const diff = now - then; + + return { + ...alert, + isNew: diff < TWELVE_HOURS_IN_MS, + }; + }); return { - list, + list: listWithData, pageInfo, }; }, @@ -207,9 +220,6 @@ export default { hasAlerts() { return this.alerts?.list?.length; }, - tbodyTrClass() { - return !this.loading && this.hasAlerts ? bodyTrClass : ''; - }, showPaginationControls() { return Boolean(this.prevPage || this.nextPage); }, @@ -290,6 +300,12 @@ export default { resetPagination() { this.pagination = initialPaginationState; }, + tbodyTrClass(item) { + return { + [bodyTrClass]: !this.loading && this.hasAlerts, + 'new-alert': item?.isNew, + }; + }, handleAlertError(errorMessage) { this.errored = true; this.errorMessage = errorMessage; diff --git a/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue b/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue index 63f3b3bc1f0..476866ca9e1 100644 --- a/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue +++ b/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue @@ -14,7 +14,6 @@ import { GlFormSelect, } from '@gitlab/ui'; import { debounce } from 'lodash'; -import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import ToggleButton from '~/vue_shared/components/toggle_button.vue'; import csrf from '~/lib/utils/csrf'; @@ -42,7 +41,6 @@ export default { directives: { 'gl-modal': GlModalDirective, }, - mixins: [glFeatureFlagsMixin()], props: { prometheus: { type: Object, @@ -129,7 +127,7 @@ export default { return !this.isGeneric ? this.$options.i18n.prometheusInfo : ''; }, prometheusFeatureEnabled() { - return !this.isGeneric && this.glFeatures.alertIntegrationsDropdown; + return !this.isGeneric; }, jsonIsValid() { return this.testAlert.error === null; @@ -147,13 +145,9 @@ export default { }, JSON_VALIDATE_DELAY), }, created() { - if (this.glFeatures.alertIntegrationsDropdown) { - this.selectedEndpoint = this.prometheus.prometheusIsActivated - ? this.options[1].value - : this.options[0].value; - } else { - this.selectedEndpoint = this.options[0].value; - } + this.selectedEndpoint = this.prometheus.prometheusIsActivated + ? this.options[1].value + : this.options[0].value; }, methods: { clearJson() { @@ -187,9 +181,6 @@ export default { }, toggleService(value) { this.canSaveForm = true; - if (!this.glFeatures.alertIntegrationsDropdown) { - this.toggleActivated(value); - } if (this.isGeneric) { this.activated.generic = value; @@ -334,7 +325,6 @@ export default { </div> <gl-form @submit.prevent="onSubmit" @reset.prevent="onReset"> <gl-form-group - v-if="glFeatures.alertIntegrationsDropdown" :label="$options.i18n.integrationsLabel" label-for="integrations" label-class="label-bold" @@ -433,7 +423,6 @@ export default { </gl-modal> </gl-form-group> <gl-form-group - v-if="glFeatures.alertIntegrationsDropdown" :label="$options.i18n.alertJson" label-for="alert-json" label-class="label-bold" @@ -452,10 +441,7 @@ export default { <gl-button :disabled="!canTestAlert" @click="validateTestAlert">{{ $options.i18n.testAlertInfo }}</gl-button> - <div - v-if="glFeatures.alertIntegrationsDropdown" - class="footer-block row-content-block gl-display-flex gl-justify-content-space-between" - > + <div class="footer-block row-content-block gl-display-flex gl-justify-content-space-between"> <gl-button type="submit" variant="success" category="primary" :disabled="!canSaveConfig"> {{ __('Save changes') }} </gl-button> diff --git a/app/assets/javascripts/boards/components/board_list_header.vue b/app/assets/javascripts/boards/components/board_list_header.vue index 5e617c89aa0..02a04cb4e46 100644 --- a/app/assets/javascripts/boards/components/board_list_header.vue +++ b/app/assets/javascripts/boards/components/board_list_header.vue @@ -281,7 +281,7 @@ export default { </board-delete> <div v-if="showBoardListAndBoardInfo" - class="issue-count-badge gl-pr-0 no-drag text-secondary" + class="issue-count-badge gl-display-inline-flex gl-pr-0 no-drag text-secondary" :class="{ 'gl-display-none': !list.isExpanded && isSwimlanesHeader }" > <span class="gl-display-inline-flex"> 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 index f859384916b..cc90d23eda7 100644 --- a/app/assets/javascripts/issuables_list/components/issuable_list_root_app.vue +++ b/app/assets/javascripts/issuables_list/components/issuable_list_root_app.vue @@ -5,8 +5,9 @@ import { n__ } from '~/locale'; import getIssuesListDetailsQuery from '../queries/get_issues_list_details.query.graphql'; import { calculateJiraImportLabel, - isFinished, isInProgress, + setFinishedAlertHideMap, + shouldShowFinishedAlert, } from '~/jira_import/utils/jira_import_utils'; export default { @@ -35,8 +36,6 @@ export default { }, data() { return { - isFinishedAlertShowing: true, - isInProgressAlertShowing: true, jiraImport: {}, }; }, @@ -48,15 +47,18 @@ export default { fullPath: this.projectPath, }; }, - update: ({ project }) => ({ - importedIssuesCount: last(project.jiraImports.nodes)?.importedIssuesCount, - isInProgress: isInProgress(project.jiraImportStatus), - isFinished: isFinished(project.jiraImportStatus), - label: calculateJiraImportLabel( + update: ({ project }) => { + const label = calculateJiraImportLabel( project.jiraImports.nodes, project.issues.nodes.flatMap(({ labels }) => labels.nodes), - ), - }), + ); + return { + importedIssuesCount: last(project.jiraImports.nodes)?.importedIssuesCount, + label, + shouldShowFinishedAlert: shouldShowFinishedAlert(label.title, project.jiraImportStatus), + shouldShowInProgressAlert: isInProgress(project.jiraImportStatus), + }; + }, skip() { return !this.isJiraConfigured || !this.canEdit; }, @@ -73,19 +75,14 @@ export default { 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; + setFinishedAlertHideMap(this.jiraImport.label.title); + this.jiraImport.shouldShowFinishedAlert = false; }, hideInProgressAlert() { - this.isInProgressAlertShowing = false; + this.jiraImport.shouldShowInProgressAlert = false; }, }, }; @@ -93,10 +90,15 @@ export default { <template> <div class="issuable-list-root"> - <gl-alert v-if="shouldShowInProgressAlert" @dismiss="hideInProgressAlert"> + <gl-alert v-if="jiraImport.shouldShowInProgressAlert" @dismiss="hideInProgressAlert"> {{ __('Import in progress. Refresh page to see newly added issues.') }} </gl-alert> - <gl-alert v-if="shouldShowFinishedAlert" variant="success" @dismiss="hideFinishedAlert"> + + <gl-alert + v-if="jiraImport.shouldShowFinishedAlert" + variant="success" + @dismiss="hideFinishedAlert" + > {{ finishedMessage }} <gl-label :background-color="jiraImport.label.color" diff --git a/app/assets/javascripts/issuables_list/constants.js b/app/assets/javascripts/issuables_list/constants.js index e240efd2804..f008ba1bf4a 100644 --- a/app/assets/javascripts/issuables_list/constants.js +++ b/app/assets/javascripts/issuables_list/constants.js @@ -52,3 +52,5 @@ export const availableSortOptionsJira = [ }, }, ]; + +export const JIRA_IMPORT_SUCCESS_ALERT_HIDE_MAP_KEY = 'jira-import-success-alert-hide-map'; diff --git a/app/assets/javascripts/jira_import/utils/jira_import_utils.js b/app/assets/javascripts/jira_import/utils/jira_import_utils.js index e82a3f44a29..a1186b087e1 100644 --- a/app/assets/javascripts/jira_import/utils/jira_import_utils.js +++ b/app/assets/javascripts/jira_import/utils/jira_import_utils.js @@ -1,4 +1,5 @@ import { last } from 'lodash'; +import { JIRA_IMPORT_SUCCESS_ALERT_HIDE_MAP_KEY } from '~/issuables_list/constants'; export const IMPORT_STATE = { FAILED: 'failed', @@ -68,3 +69,36 @@ export const calculateJiraImportLabel = (jiraImports, labels) => { title, }; }; + +/** + * Calculates whether the Jira import success alert should be shown. + * + * @param {string} labelTitle - Jira import label, for checking localStorage + * @param {string} importStatus - Jira import status + * @returns {boolean} - A boolean indicating whether to show the success alert + */ +export const shouldShowFinishedAlert = (labelTitle, importStatus) => { + const finishedAlertHideMap = + JSON.parse(localStorage.getItem(JIRA_IMPORT_SUCCESS_ALERT_HIDE_MAP_KEY)) || {}; + + const shouldHide = finishedAlertHideMap[labelTitle]; + + return !shouldHide && isFinished(importStatus); +}; + +/** + * Updates the localStorage map to permanently hide the Jira import success alert + * + * @param {string} labelTitle - Jira import label, for checking localStorage + */ +export const setFinishedAlertHideMap = labelTitle => { + const finishedAlertHideMap = + JSON.parse(localStorage.getItem(JIRA_IMPORT_SUCCESS_ALERT_HIDE_MAP_KEY)) || {}; + + finishedAlertHideMap[labelTitle] = true; + + localStorage.setItem( + JIRA_IMPORT_SUCCESS_ALERT_HIDE_MAP_KEY, + JSON.stringify(finishedAlertHideMap), + ); +}; diff --git a/app/assets/stylesheets/pages/alert_management/list.scss b/app/assets/stylesheets/pages/alert_management/list.scss index 5d3fd0d7dcf..e420209b1fc 100644 --- a/app/assets/stylesheets/pages/alert_management/list.scss +++ b/app/assets/stylesheets/pages/alert_management/list.scss @@ -1,4 +1,8 @@ .alert-management-list { + .new-alert { + background-color: $issues-today-bg; + } + // these styles need to be deleted once GlTable component looks in GitLab same as in @gitlab/ui table { color: $gray-700; |