Add latest changes from gitlab-org/gitlab@master

14 files changed, 85 insertions, 23 deletions

diff --git a/app/assets/javascripts/design_management/components/design_notes/design_note_signed_out.vue b/app/assets/javascripts/design_management/components/design_notes/design_note_signed_out.vue
index f0812e62bba..de3e71c0e9c 100644
--- a/app/assets/javascripts/design_management/components/design_notes/design_note_signed_out.vue
+++ b/app/assets/javascripts/design_management/components/design_notes/design_note_signed_out.vue
@@ -37,7 +37,7 @@ export default {
 </script>
 
 <template>
-  <div class="disabled-comment text-center">
+  <div class="disabled-comment gl-text-center gl-text-secondary">
     <gl-sprintf :message="signedOutText">
       <template #registerLink="{ content }">
         <gl-link :href="registerPath">{{ content }}</gl-link>
diff --git a/app/assets/javascripts/notes/components/note_signed_out_widget.vue b/app/assets/javascripts/notes/components/note_signed_out_widget.vue
index 30d3bfcb989..738af4f6064 100644
--- a/app/assets/javascripts/notes/components/note_signed_out_widget.vue
+++ b/app/assets/javascripts/notes/components/note_signed_out_widget.vue
@@ -35,5 +35,5 @@ export default {
 </script>
 
 <template>
-  <div v-safe-html="signedOutText" class="disabled-comment text-center"></div>
+  <div v-safe-html="signedOutText" class="disabled-comment gl-text-center gl-text-secondary"></div>
 </template>
diff --git a/app/assets/javascripts/super_sidebar/components/flyout_menu.vue b/app/assets/javascripts/super_sidebar/components/flyout_menu.vue
index e73b9b275ee..414e4a54a8e 100644
--- a/app/assets/javascripts/super_sidebar/components/flyout_menu.vue
+++ b/app/assets/javascripts/super_sidebar/components/flyout_menu.vue
@@ -139,8 +139,8 @@ export default {
         :key="item.id"
         :item="item"
         :is-flyout="true"
-        @pin-add="(itemId) => $emit('pin-add', itemId)"
-        @pin-remove="(itemId) => $emit('pin-remove', itemId)"
+        @pin-add="(itemId, itemTitle) => $emit('pin-add', itemId, itemTitle)"
+        @pin-remove="(itemId, itemTitle) => $emit('pin-remove', itemId, itemTitle)"
       />
     </ul>
     <svg
diff --git a/app/assets/javascripts/super_sidebar/components/menu_section.vue b/app/assets/javascripts/super_sidebar/components/menu_section.vue
index 91b781b8235..a672e254004 100644
--- a/app/assets/javascripts/super_sidebar/components/menu_section.vue
+++ b/app/assets/javascripts/super_sidebar/components/menu_section.vue
@@ -145,8 +145,8 @@ export default {
       :items="item.items"
       @mouseover="isMouseOverFlyout = true"
       @mouseleave="isMouseOverFlyout = false"
-      @pin-add="(itemId) => $emit('pin-add', itemId)"
-      @pin-remove="(itemId) => $emit('pin-remove', itemId)"
+      @pin-add="(itemId, itemTitle) => $emit('pin-add', itemId, itemTitle)"
+      @pin-remove="(itemId, itemTitle) => $emit('pin-remove', itemId, itemTitle)"
     />
 
     <gl-collapse
@@ -162,8 +162,8 @@ export default {
             v-for="subItem of item.items"
             :key="`${item.title}-${subItem.title}`"
             :item="subItem"
-            @pin-add="(itemId) => $emit('pin-add', itemId)"
-            @pin-remove="(itemId) => $emit('pin-remove', itemId)"
+            @pin-add="(itemId, itemTitle) => $emit('pin-add', itemId, itemTitle)"
+            @pin-remove="(itemId, itemTitle) => $emit('pin-remove', itemId, itemTitle)"
           />
         </ul>
       </slot>
diff --git a/app/assets/javascripts/super_sidebar/components/nav_item.vue b/app/assets/javascripts/super_sidebar/components/nav_item.vue
index 1e1ec185ee1..3ae33bf8b37 100644
--- a/app/assets/javascripts/super_sidebar/components/nav_item.vue
+++ b/app/assets/javascripts/super_sidebar/components/nav_item.vue
@@ -190,6 +190,12 @@ export default {
     eventHub.$off('updatePillValue', this.updatePillValue);
   },
   methods: {
+    pinAdd() {
+      this.$emit('pin-add', this.item.id, this.item.title);
+    },
+    pinRemove() {
+      this.$emit('pin-remove', this.item.id, this.item.title);
+    },
     togglePointerEvents() {
       this.canClickPinButton = this.isMouseIn;
     },
@@ -278,7 +284,7 @@ export default {
         data-testid="nav-item-unpin"
         icon="thumbtack-solid"
         size="small"
-        @click="$emit('pin-remove', item.id)"
+        @click="pinRemove"
         @transitionend="togglePointerEvents"
       />
       <gl-button
@@ -291,7 +297,7 @@ export default {
         data-testid="nav-item-pin"
         icon="thumbtack"
         size="small"
-        @click="$emit('pin-add', item.id)"
+        @click="pinAdd"
         @transitionend="togglePointerEvents"
       />
     </template>
diff --git a/app/assets/javascripts/super_sidebar/components/pinned_section.vue b/app/assets/javascripts/super_sidebar/components/pinned_section.vue
index ea3e9e9df1f..05040218164 100644
--- a/app/assets/javascripts/super_sidebar/components/pinned_section.vue
+++ b/app/assets/javascripts/super_sidebar/components/pinned_section.vue
@@ -84,8 +84,8 @@ export default {
         return { ...i, title };
       });
     },
-    onPinRemove(itemId) {
-      this.$emit('pin-remove', itemId);
+    onPinRemove(itemId, itemTitle) {
+      this.$emit('pin-remove', itemId, itemTitle);
     },
   },
 };
@@ -113,7 +113,7 @@ export default {
         :key="item.id"
         :item="item"
         is-in-pinned-section
-        @pin-remove="onPinRemove"
+        @pin-remove="onPinRemove(item.id, item.title)"
       />
     </draggable>
     <li v-else class="gl-text-secondary gl-font-sm gl-py-3" style="margin-left: 2.5rem">
diff --git a/app/assets/javascripts/super_sidebar/components/sidebar_menu.vue b/app/assets/javascripts/super_sidebar/components/sidebar_menu.vue
index 18573cacdba..c04addf5262 100644
--- a/app/assets/javascripts/super_sidebar/components/sidebar_menu.vue
+++ b/app/assets/javascripts/super_sidebar/components/sidebar_menu.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlBreakpointInstance, breakpoints } from '@gitlab/ui/dist/utils';
+import { s__, sprintf } from '~/locale';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import axios from '~/lib/utils/axios_utils';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -16,7 +17,10 @@ export default {
     PinnedSection,
   },
   mixins: [glFeatureFlagsMixin()],
-
+  i18n: {
+    pinAdded: s__('Navigation|%{title} added to pinned items'),
+    pinRemoved: s__('Navigation|%{title} removed from pinned items'),
+  },
   provide() {
     return {
       pinnedItemIds: this.changedPinnedItemIds,
@@ -111,12 +115,22 @@ export default {
     window.removeEventListener('resize', this.decideFlyoutState);
   },
   methods: {
-    createPin(itemId) {
+    createPin(itemId, itemTitle) {
       this.changedPinnedItemIds.ids.push(itemId);
+      this.$toast.show(
+        sprintf(this.$options.i18n.pinAdded, {
+          title: itemTitle,
+        }),
+      );
       this.updatePins();
     },
-    destroyPin(itemId) {
+    destroyPin(itemId, itemTitle) {
       this.changedPinnedItemIds.ids = this.changedPinnedItemIds.ids.filter((id) => id !== itemId);
+      this.$toast.show(
+        sprintf(this.$options.i18n.pinRemoved, {
+          title: itemTitle,
+        }),
+      );
       this.updatePins();
     },
     movePin(fromId, toId, isDownwards) {
diff --git a/app/assets/javascripts/super_sidebar/super_sidebar_bundle.js b/app/assets/javascripts/super_sidebar/super_sidebar_bundle.js
index f9e488ea5ee..d0d98ef3808 100644
--- a/app/assets/javascripts/super_sidebar/super_sidebar_bundle.js
+++ b/app/assets/javascripts/super_sidebar/super_sidebar_bundle.js
@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import { GlToast } from '@gitlab/ui';
 import { convertObjectPropsToCamelCase, parseBoolean } from '~/lib/utils/common_utils';
 import { initStatusTriggers } from '../header';
 import { JS_TOGGLE_EXPAND_CLASS } from './constants';
@@ -10,6 +11,8 @@ import {
 import SuperSidebar from './components/super_sidebar.vue';
 import SuperSidebarToggle from './components/super_sidebar_toggle.vue';
 
+Vue.use(GlToast);
+
 const getTrialStatusWidgetData = (sidebarData) => {
   if (sidebarData.trial_status_widget_data_attrs && sidebarData.trial_status_popover_data_attrs) {
     const {
diff --git a/app/assets/javascripts/work_items/components/notes/work_item_note_signed_out.vue b/app/assets/javascripts/work_items/components/notes/work_item_note_signed_out.vue
index bccbec903b4..e073fddeddb 100644
--- a/app/assets/javascripts/work_items/components/notes/work_item_note_signed_out.vue
+++ b/app/assets/javascripts/work_items/components/notes/work_item_note_signed_out.vue
@@ -27,5 +27,8 @@ export default {
 </script>
 
 <template>
-  <div v-safe-html="signedOutText" class="disabled-comment gl-text-center gl-relative"></div>
+  <div
+    v-safe-html="signedOutText"
+    class="disabled-comment gl-text-center gl-text-secondary gl-relative"
+  ></div>
 </template>
diff --git a/app/views/discussions/_notes.html.haml b/app/views/discussions/_notes.html.haml
index e34a5cebe78..5e6ebe87808 100644
--- a/app/views/discussions/_notes.html.haml
+++ b/app/views/discussions/_notes.html.haml
@@ -20,7 +20,7 @@
         .discussion-with-resolve-btn
           = link_to_reply_discussion(discussion)
       - elsif !current_user
-        .disabled-comment.text-center
+        .disabled-comment.gl-text-center.gl-text-secondary
           Please
           = link_to "register", new_session_path(:user, redirect_to_referer: 'yes')
           or
diff --git a/app/views/shared/notes/_notes_with_form.html.haml b/app/views/shared/notes/_notes_with_form.html.haml
index 336fdedf89b..343a8597444 100644
--- a/app/views/shared/notes/_notes_with_form.html.haml
+++ b/app/views/shared/notes/_notes_with_form.html.haml
@@ -15,12 +15,12 @@
         .timeline-content.timeline-content-form
           = render "shared/notes/form", view: diff_view, supports_autocomplete: autocomplete
 - elsif !current_user
-  .disabled-comment.text-center.gl-mt-3
+  .disabled-comment.gl-text-center.gl-text-secondary.gl-mt-3
     - link_to_register = link_to(_("register"), new_user_registration_path(redirect_to_referer: 'yes'), class: 'js-register-link')
     - link_to_sign_in = link_to(_("sign in"), new_session_path(:user, redirect_to_referer: 'yes'), class: 'js-sign-in-link')
     = _("Please %{link_to_register} or %{link_to_sign_in} to comment").html_safe % { link_to_register: link_to_register, link_to_sign_in: link_to_sign_in }
 - elsif discussion_locked
-  .disabled-comment.text-center.gl-mt-3
+  .disabled-comment.gl-text-center.gl-mt-3
     %span.issuable-note-warning
       = sprite_icon('lock', css_class: 'icon')
       %span
diff --git a/doc/architecture/blueprints/work_items/index.md b/doc/architecture/blueprints/work_items/index.md
index e12bb4d8773..74690d34088 100644
--- a/doc/architecture/blueprints/work_items/index.md
+++ b/doc/architecture/blueprints/work_items/index.md
@@ -64,7 +64,7 @@ You can also refer to fields of [Work Item](../../../api/graphql/reference/index
 
 All Work Item types share the same pool of predefined widgets and are customized by which widgets are active on a specific type. The list of widgets for any certain Work Item type is currently predefined and is not customizable. However, in the future we plan to allow users to create new Work Item types and define a set of widgets for them.
 
-### Work Item widget types (updating)
+### Widget types (updating)
 
 | Widget  | Description | Feature flag | Write permission | GraphQL Subscription Support |
 |---|---|---|---|---|
@@ -86,6 +86,36 @@ All Work Item types share the same pool of predefined widgets and are customized
 | [WorkItemWidgetTestReports](../../../api/graphql/reference/index.md#workitemwidgettestreports) | Test reports associated with a work item | | | |
 | [WorkItemWidgetWeight](../../../api/graphql/reference/index.md#workitemwidgetweight) | Set weight of a work item | |`Reporter`|No|
 
+#### Widget availability (updating)
+
+| Widget | Epic | Issue | Task | Objective | Key Result |
+|---|---|---|---|---|---|
+| [WorkItemWidgetAssignees](../../../api/graphql/reference/index.md#workitemwidgetassignees) | ✅ | ✅ | ✅ | ✅ | ✅ |
+| [WorkItemWidgetAwardEmoji](../../../api/graphql/reference/index.md#workitemwidgetawardemoji) | ✅ | ✔️ | ✅ | ✅ | ✅ |
+| [WorkItemWidgetCurrentUserTodos](../../../api/graphql/reference/index.md#workitemwidgetcurrentusertodos) | ✅ | ✅ | ✅ | ✅ | ✅ |
+| [WorkItemWidgetDescription](../../../api/graphql/reference/index.md#workitemwidgetdescription) | ✅ | ✅ | ✅ | ✅ | ✅ |
+| [WorkItemWidgetHealthStatus](../../../api/graphql/reference/index.md#workitemwidgethealthstatus) | ✅ | ✅ | ✅ | ✅ | ✅ |
+| [WorkItemWidgetHierarchy](../../../api/graphql/reference/index.md#workitemwidgethierarchy) | ✔ | ✔️ | ❌ | ✅ | ❌ |
+| [WorkItemWidgetIteration](../../../api/graphql/reference/index.md#workitemwidgetiteration) | ❌ | ✅ | ✅ | ❌ | ❌ |
+| [WorkItemWidgetLabels](../../../api/graphql/reference/index.md#workitemwidgetlabels) | ✅ | ✅ | ✅ | ✅ | ✅ |
+| [WorkItemWidgetLinkedItems](../../../api/graphql/reference/index.md#workitemwidgetlinkeditems) | ✔️ | ✔️ | ✔️ | ✅ | ✅ |
+| [WorkItemWidgetMilestone](../../../api/graphql/reference/index.md#workitemwidgetmilestone) | 🔍 | ✅ | ✅ | ✅ | ❌ |
+| [WorkItemWidgetNotes](../../../api/graphql/reference/index.md#workitemwidgetnotes) | ✅ | ✅ | ✅ | ✅ | ✅ |
+| [WorkItemWidgetNotifications](../../../api/graphql/reference/index.md#workitemwidgetnotifications) | ✅ | ✅ | ✅ | ✅ | ✅ |
+| [WorkItemWidgetProgress](../../../api/graphql/reference/index.md#workitemwidgetprogress) | ❌ | ❌ | ❌ | ✅ | ✅ |
+| [WorkItemWidgetStartAndDueDate](../../../api/graphql/reference/index.md#workitemwidgetstartandduedate) | 🔍 | ✅ | ✅ | ❌ | ✅ |
+| [WorkItemWidgetStatus](../../../api/graphql/reference/index.md#workitemwidgetstatus) | ❓ | ❓ | ❓ | ❓ | ❓ |
+| [WorkItemWidgetTestReports](../../../api/graphql/reference/index.md#workitemwidgettestreports) | ❌ | ❌ | ❌ | ❌ | ❌ |
+| [WorkItemWidgetWeight](../../../api/graphql/reference/index.md#workitemwidgetweight) | 🔍 | ✅ | ✅ | ❌ | ❌ |
+
+##### Legend
+
+- ✅ - Widget available
+- ✔️ - Widget planned to be available
+- ❌ - Widget not available
+- ❓ - Widget pending for consideration
+- 🔍 - Alternative widget planned
+
 ### Work item relationships
 
 Work items can be related to other work items in a number of different ways:
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index ead2e432b72..50f5efeb5cc 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -31269,6 +31269,12 @@ msgstr ""
 msgid "NavigationTheme|Red"
 msgstr ""
 
+msgid "Navigation|%{title} added to pinned items"
+msgstr ""
+
+msgid "Navigation|%{title} removed from pinned items"
+msgstr ""
+
 msgid "Navigation|Admin Area"
 msgstr ""
 
diff --git a/spec/frontend/design_management/components/design_notes/__snapshots__/design_note_signed_out_spec.js.snap b/spec/frontend/design_management/components/design_notes/__snapshots__/design_note_signed_out_spec.js.snap
index 8bc9bce7e80..f77f1a791f9 100644
--- a/spec/frontend/design_management/components/design_notes/__snapshots__/design_note_signed_out_spec.js.snap
+++ b/spec/frontend/design_management/components/design_notes/__snapshots__/design_note_signed_out_spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`DesignNoteSignedOut renders message containing register and sign-in links while user wants to reply to a discussion 1`] = `
 <div
-  class="disabled-comment text-center"
+  class="disabled-comment gl-text-center gl-text-secondary"
 >
   Please
   <gl-link-stub
@@ -22,7 +22,7 @@ exports[`DesignNoteSignedOut renders message containing register and sign-in lin
 
 exports[`DesignNoteSignedOut renders message containing register and sign-in links while user wants to start a new discussion 1`] = `
 <div
-  class="disabled-comment text-center"
+  class="disabled-comment gl-text-center gl-text-secondary"
 >
   Please
   <gl-link-stub