Work Items - Tasks First Time Experience

What does this MR do and why?

Any time a user visits a work item, he should see an alert/info having links to the doc page of gitlab for a detailed explanation. This information will be seen either when a work item(right now task) is viewed in modal/full page view

Screenshots or screen recordings

How to set up and validate locally

Make sure :work_items feature flag is enabled if the changes are not visible in the local environment

Feature.enable(:work_items)

Example below:

1. To create a work item/task , open any issue and create checkboxes/tasks list in the description.
2. When you view the issue after saving and hover over any list item , you will see a small icon at the end of the item , click on that.
3. A modal will be opened , and here is your first work item created when you close it. Now that will be converted to a link.
4. Visit any work item in full page view/modal such as http://127.0.0.1:3000/gitlab-instance-3485f007/Monitoring/-/work_items/505
5. You should see the alert only the first time you visit a task, since you will be testing in your machine the first time , you will see the first time by default but not after that

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Related to #366687 (closed)

app/assets/javascripts/work_items/components/work_item_detail.vue

 <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"