diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-07-15 18:15:01 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-07-15 18:15:01 +0300 |
commit | b616fd825faac3e7f194e1f942ef30730021e463 (patch) | |
tree | 8e187d885200ee5dd7958d7ef32383918ba8e99f /app/assets/javascripts/work_items | |
parent | 1a129420d6bd3e5223e8ba4a5b7749764118a885 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/work_items')
3 files changed, 85 insertions, 0 deletions
diff --git a/app/assets/javascripts/work_items/components/work_item_detail.vue b/app/assets/javascripts/work_items/components/work_item_detail.vue index 40467205d0d..7314b0afc54 100644 --- a/app/assets/javascripts/work_items/components/work_item_detail.vue +++ b/app/assets/javascripts/work_items/components/work_item_detail.vue @@ -1,6 +1,7 @@ <script> import { GlAlert, GlSkeletonLoader, GlIcon, GlButton } from '@gitlab/ui'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue'; import { i18n, WIDGET_TYPE_ASSIGNEES, @@ -8,6 +9,7 @@ import { WIDGET_TYPE_DESCRIPTION, WIDGET_TYPE_WEIGHT, WIDGET_TYPE_HIERARCHY, + WORK_ITEM_VIEWED_STORAGE_KEY, } from '../constants'; import workItemQuery from '../graphql/work_item.query.graphql'; import workItemTitleSubscription from '../graphql/work_item_title.subscription.graphql'; @@ -18,6 +20,7 @@ import WorkItemDescription from './work_item_description.vue'; import WorkItemAssignees from './work_item_assignees.vue'; import WorkItemLabels from './work_item_labels.vue'; import WorkItemWeight from './work_item_weight.vue'; +import WorkItemInformation from './work_item_information.vue'; export default { i18n, @@ -33,6 +36,8 @@ export default { WorkItemTitle, WorkItemState, WorkItemWeight, + WorkItemInformation, + LocalStorageSync, }, mixins: [glFeatureFlagMixin()], props: { @@ -56,6 +61,7 @@ export default { return { error: undefined, workItem: {}, + showInfoBanner: true, }; }, apollo: { @@ -120,6 +126,17 @@ export default { return `../../issues/${this.parentWorkItem?.iid}`; }, }, + beforeDestroy() { + /** make sure that if the user has not even dismissed the alert , + * should no be able to see the information next time and update the local storage * */ + this.dismissBanner(); + }, + methods: { + dismissBanner() { + this.showInfoBanner = false; + }, + }, + WORK_ITEM_VIEWED_STORAGE_KEY, }; </script> @@ -174,6 +191,16 @@ export default { @click="$emit('close')" /> </div> + <local-storage-sync + v-model="showInfoBanner" + :storage-key="$options.WORK_ITEM_VIEWED_STORAGE_KEY" + > + <work-item-information + v-if="showInfoBanner" + :show-info-banner="showInfoBanner" + @work-item-banner-dismissed="dismissBanner" + /> + </local-storage-sync> <work-item-title :work-item-id="workItem.id" :work-item-title="workItem.title" diff --git a/app/assets/javascripts/work_items/components/work_item_information.vue b/app/assets/javascripts/work_items/components/work_item_information.vue new file mode 100644 index 00000000000..2ff7ba169ea --- /dev/null +++ b/app/assets/javascripts/work_items/components/work_item_information.vue @@ -0,0 +1,57 @@ +<script> +import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui'; +import { s__ } from '~/locale'; +import { helpPagePath } from '~/helpers/help_page_helper'; + +export default { + i18n: { + learnTasksButtonText: s__('WorkItem|Learn about tasks'), + workItemsText: s__('WorkItem|work items'), + tasksInformationTitle: s__('WorkItem|Introducing tasks'), + tasksInformationBody: s__( + 'WorkItem|A task provides the ability to break down your work into smaller pieces tied to an issue. Tasks are the first items using our new %{workItemsLink} objects. Additional work item types will be coming soon.', + ), + }, + helpPageLinks: { + tasksDocLinkPath: helpPagePath('user/tasks'), + workItemsLinkPath: helpPagePath(`development/work_items`), + }, + components: { + GlAlert, + GlSprintf, + GlLink, + }, + props: { + showInfoBanner: { + type: Boolean, + required: false, + default: true, + }, + }, + emits: ['work-item-banner-dismissed'], +}; +</script> + +<template> + <section class="gl-display-block gl-mb-2"> + <gl-alert + v-if="showInfoBanner" + variant="tip" + :title="$options.i18n.tasksInformationTitle" + :primary-button-link="$options.helpPageLinks.tasksDocLinkPath" + :primary-button-text="$options.i18n.learnTasksButtonText" + data-testid="work-item-information" + class="gl-mt-3" + @dismiss="$emit('work-item-banner-dismissed')" + > + <gl-sprintf :message="$options.i18n.tasksInformationBody"> + <template #workItemsLink> + <gl-link :href="$options.helpPageLinks.workItemsLinkPath">{{ + $options.i18n.workItemsText + }}</gl-link> + </template> + ></gl-sprintf + > + </gl-alert> + </section> +</template> diff --git a/app/assets/javascripts/work_items/constants.js b/app/assets/javascripts/work_items/constants.js index c9ccbd48ba1..2140b418e6d 100644 --- a/app/assets/javascripts/work_items/constants.js +++ b/app/assets/javascripts/work_items/constants.js @@ -20,6 +20,7 @@ export const WIDGET_TYPE_DESCRIPTION = 'DESCRIPTION'; export const WIDGET_TYPE_LABELS = 'LABELS'; export const WIDGET_TYPE_WEIGHT = 'WEIGHT'; export const WIDGET_TYPE_HIERARCHY = 'HIERARCHY'; +export const WORK_ITEM_VIEWED_STORAGE_KEY = 'gl-show-work-item-banner'; export const WIDGET_TYPE_TASK_ICON = 'task-done'; |