Add latest changes from gitlab-org/gitlab@master

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';