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_information.vue

@@ -2,13 +2,15 @@
 import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
-import { __, s__ } from '~/locale';
+import { s__ } from '~/locale';
 import { helpPagePath } from '~/helpers/help_page_helper';
-import { WORK_ITEM_VIEWED_COUNTER_KEY } from '../constants';
+import { WORK_ITEM_VIEWED_STORAGE_KEY } from '../constants';
 
 export default {
   i18n: {
     learnTasksButtonText: s__('WorkItem|Learn about tasks'),
+    workItemsText: s__('WorkItem|work items'),
+    tasksInformationTitle: s__('WorkItem|Introducing tasks'),
   },
   components: {
     GlAlert,
@@ -45,19 +47,16 @@ export default {
     showWorkItemInformation() {
       return this.workItemAccessCounter > 1;
     },
-    informationTitle() {
-      return s__('Introducing tasks');
-    },
     informationBody() {
       return s__(
-        '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',
+        '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.',
       );
     },
   },
   mounted() {
     this.workItemAccessCounter += 1;
   },
-  WORK_ITEM_VIEWED_COUNTER_KEY,
+  WORK_ITEM_VIEWED_STORAGE_KEY,
 };
 </script>
 
@@ -65,19 +64,20 @@ export default {
   <section class="gl-display-block gl-mb-2">
     <local-storage-sync
       v-model="workItemAccessCounter"
-      :storage-key="$options.WORK_ITEM_VIEWED_COUNTER_KEY"
+      :storage-key="$options.WORK_ITEM_VIEWED_STORAGE_KEY"
     />
     <gl-alert
       v-if="showWorkItemInformation"
       variant="info"
-      :title="informationTitle"
+      :title="$options.i18n.tasksInformationTitle"
       :primary-button-link="tasksDocLinkPath"
       :primary-button-text="$options.i18n.learnTasksButtonText"
+      data-testid="work-item-information"
       @dismiss="showInfo = false"
     >
       <gl-sprintf :message="informationBody">
         <template #workItemsLink>
-          <gl-link :href="workItemsLinkPath">{{ __('work items') }}</gl-link>
+          <gl-link :href="workItemsLinkPath">{{ $options.i18n.workItemsText }}</gl-link>
         </template>
         ></gl-sprintf
       >