Add latest changes from gitlab-org/gitlab@master

38 files changed, 254 insertions, 130 deletions

diff --git a/app/assets/javascripts/issues/list/components/issues_list_app.vue b/app/assets/javascripts/issues/list/components/issues_list_app.vue
index 2da6a049703..e5c557ce769 100644
--- a/app/assets/javascripts/issues/list/components/issues_list_app.vue
+++ b/app/assets/javascripts/issues/list/components/issues_list_app.vue
@@ -30,9 +30,11 @@ import {
   TOKEN_TITLE_ASSIGNEE,
   TOKEN_TITLE_AUTHOR,
   TOKEN_TITLE_CONFIDENTIAL,
+  TOKEN_TITLE_CONTACT,
   TOKEN_TITLE_LABEL,
   TOKEN_TITLE_MILESTONE,
   TOKEN_TITLE_MY_REACTION,
+  TOKEN_TITLE_ORGANIZATION,
   TOKEN_TITLE_RELEASE,
   TOKEN_TITLE_TYPE,
 } from '~/vue_shared/components/filtered_search_bar/constants';
@@ -54,9 +56,11 @@ import {
   TOKEN_TYPE_ASSIGNEE,
   TOKEN_TYPE_AUTHOR,
   TOKEN_TYPE_CONFIDENTIAL,
+  TOKEN_TYPE_CONTACT,
   TOKEN_TYPE_LABEL,
   TOKEN_TYPE_MILESTONE,
   TOKEN_TYPE_MY_REACTION,
+  TOKEN_TYPE_ORGANIZATION,
   TOKEN_TYPE_RELEASE,
   TOKEN_TYPE_TYPE,
   UPDATED_DESC,
@@ -113,6 +117,8 @@ export default {
     'autocompleteAwardEmojisPath',
     'calendarPath',
     'canBulkUpdate',
+    'canReadCrmContact',
+    'canReadCrmOrganization',
     'emptyStateSvgPath',
     'exportCsvPath',
     'fullPath',
@@ -360,6 +366,28 @@ export default {
         });
       }
 
+      if (this.canReadCrmContact) {
+        tokens.push({
+          type: TOKEN_TYPE_CONTACT,
+          title: TOKEN_TITLE_CONTACT,
+          icon: 'user',
+          token: GlFilteredSearchToken,
+          operators: OPERATOR_IS_ONLY,
+          unique: true,
+        });
+      }
+
+      if (this.canReadCrmOrganization) {
+        tokens.push({
+          type: TOKEN_TYPE_ORGANIZATION,
+          title: TOKEN_TITLE_ORGANIZATION,
+          icon: 'users',
+          token: GlFilteredSearchToken,
+          operators: OPERATOR_IS_ONLY,
+          unique: true,
+        });
+      }
+
       if (this.eeSearchTokens.length) {
         tokens.push(...this.eeSearchTokens);
       }
diff --git a/app/assets/javascripts/issues/list/index.js b/app/assets/javascripts/issues/list/index.js
index f5cb160e344..7cfd8badf48 100644
--- a/app/assets/javascripts/issues/list/index.js
+++ b/app/assets/javascripts/issues/list/index.js
@@ -82,6 +82,8 @@ export function mountIssuesListApp() {
     canBulkUpdate,
     canEdit,
     canImportIssues,
+    canReadCrmContact,
+    canReadCrmOrganization,
     email,
     emailsHelpPagePath,
     emptyStateSvgPath,
@@ -131,6 +133,8 @@ export function mountIssuesListApp() {
       autocompleteAwardEmojisPath,
       calendarPath,
       canBulkUpdate: parseBoolean(canBulkUpdate),
+      canReadCrmContact: parseBoolean(canReadCrmContact),
+      canReadCrmOrganization: parseBoolean(canReadCrmOrganization),
       emptyStateSvgPath,
       fullPath,
       groupPath,
diff --git a/app/assets/javascripts/lib/graphql.js b/app/assets/javascripts/lib/graphql.js
index 451950346b0..4ad979be6e6 100644
--- a/app/assets/javascripts/lib/graphql.js
+++ b/app/assets/javascripts/lib/graphql.js
@@ -105,7 +105,7 @@ export default (resolvers = {}, config = {}) => {
   const {
     baseUrl,
     batchMax = 10,
-    cacheConfig,
+    cacheConfig = { typePolicies: {}, possibleTypes: {} },
     fetchPolicy = fetchPolicies.CACHE_FIRST,
     typeDefs,
     path = '/api/graphql',
@@ -221,9 +221,15 @@ export default (resolvers = {}, config = {}) => {
     typeDefs,
     link: appLink,
     cache: new InMemoryCache({
-      typePolicies,
-      possibleTypes,
       ...cacheConfig,
+      typePolicies: {
+        ...typePolicies,
+        ...cacheConfig.typePolicies,
+      },
+      possibleTypes: {
+        ...possibleTypes,
+        ...cacheConfig.possibleTypes,
+      },
     }),
     resolvers,
     defaultOptions: {
diff --git a/app/assets/javascripts/notes/components/diff_with_note.vue b/app/assets/javascripts/notes/components/diff_with_note.vue
index e2b0c7fee32..ec2095c91f2 100644
--- a/app/assets/javascripts/notes/components/diff_with_note.vue
+++ b/app/assets/javascripts/notes/components/diff_with_note.vue
@@ -107,7 +107,7 @@ export default {
           <td v-if="error" class="js-error-lazy-load-diff diff-loading-error-block">
             {{ __('Unable to load the diff') }}
             <button
-              class="btn-link btn-link-retry gl-p-0 js-toggle-lazy-diff-retry-button"
+              class="gl-button btn-link btn-link-retry gl-p-0 js-toggle-lazy-diff-retry-button gl-reset-font-size!"
               @click="fetchDiff"
             >
               {{ __('Try again') }}
diff --git a/app/assets/javascripts/notes/components/email_participants_warning.vue b/app/assets/javascripts/notes/components/email_participants_warning.vue
index ecf42fce1d2..1875d48e7b2 100644
--- a/app/assets/javascripts/notes/components/email_participants_warning.vue
+++ b/app/assets/javascripts/notes/components/email_participants_warning.vue
@@ -58,7 +58,7 @@ export default {
   <div class="issuable-note-warning" data-testid="email-participants-warning">
     <gl-sprintf :message="message">
       <template #andMore>
-        <button type="button" class="btn-transparent btn-link" @click="showMoreParticipants">
+        <button type="button" class="gl-button btn-link" @click="showMoreParticipants">
           {{ moreLabel }}
         </button>
       </template>
diff --git a/app/assets/javascripts/notes/components/toggle_replies_widget.vue b/app/assets/javascripts/notes/components/toggle_replies_widget.vue
index 65b3fd6f8b3..8cd4477a3bb 100644
--- a/app/assets/javascripts/notes/components/toggle_replies_widget.vue
+++ b/app/assets/javascripts/notes/components/toggle_replies_widget.vue
@@ -72,7 +72,7 @@ export default {
         {{ replies.length }} {{ n__('reply', 'replies', replies.length) }}
       </gl-button>
       {{ __('Last reply by') }}
-      <a :href="lastReply.author.path" class="btn btn-link author-link gl-mx-2">
+      <a :href="lastReply.author.path" class="btn btn-link author-link gl-mx-2 gl-button">
         {{ lastReply.author.name }}
       </a>
       <time-ago-tooltip :time="lastReply.created_at" tooltip-placement="bottom" />
diff --git a/app/assets/javascripts/performance_bar/components/add_request.vue b/app/assets/javascripts/performance_bar/components/add_request.vue
index d48a5acb85c..8396f00810d 100644
--- a/app/assets/javascripts/performance_bar/components/add_request.vue
+++ b/app/assets/javascripts/performance_bar/components/add_request.vue
@@ -27,7 +27,7 @@ export default {
   <div id="peek-view-add-request" class="view">
     <form class="form-inline" @submit.prevent>
       <button
-        class="btn-blank btn-link bold gl-text-blue-300"
+        class="btn-link bold gl-text-blue-300 gl-button"
         type="button"
         :title="__(`Add request manually`)"
         @click="toggleInput"
diff --git a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
index 0f744e858f2..cce0976f66f 100644
--- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
+++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
@@ -150,7 +150,7 @@ export default {
   <div id="js-peek" :class="env">
     <div
       v-if="currentRequest"
-      class="d-flex container-fluid container-limited justify-content-center"
+      class="d-flex container-fluid container-limited justify-content-center gl-align-items-center"
       data-qa-selector="performance_bar"
     >
       <div id="peek-view-host" class="view">
diff --git a/app/assets/javascripts/sidebar/components/assignees/assignees.vue b/app/assets/javascripts/sidebar/components/assignees/assignees.vue
index bdd014163a0..3602b5ec4f6 100644
--- a/app/assets/javascripts/sidebar/components/assignees/assignees.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/assignees.vue
@@ -55,7 +55,12 @@ export default {
         {{ __('None') }}
         <template v-if="editable">
           -
-          <button type="button" class="btn-link" data-testid="assign-yourself" @click="assignSelf">
+          <button
+            type="button"
+            class="gl-button btn-link gl-reset-color!"
+            data-testid="assign-yourself"
+            @click="assignSelf"
+          >
             {{ __('assign yourself') }}
           </button>
         </template>
diff --git a/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee.vue b/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee.vue
index af4227fa48d..46bda26c327 100644
--- a/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee.vue
@@ -26,7 +26,7 @@ export default {
 };
 </script>
 <template>
-  <button type="button" class="btn-link">
+  <button type="button" class="gl-button btn-link">
     <assignee-avatar :user="user" :img-size="24" :issuable-type="issuableType" />
     <user-name-with-status
       :name="user.name"
diff --git a/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue b/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue
index 50b1955abcc..f894ef0c42d 100644
--- a/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue
@@ -123,7 +123,7 @@ export default {
       :user="user"
       :issuable-type="issuableType"
     />
-    <button v-if="hasMoreThanTwoAssignees" class="btn-link" type="button">
+    <button v-if="hasMoreThanTwoAssignees" class="btn-link gl-button" type="button">
       <span
         class="avatar-counter sidebar-avatar-counter gl-display-flex gl-align-items-center gl-pl-3"
       >
diff --git a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue b/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
index 01d29da5486..b6260418837 100644
--- a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
@@ -120,7 +120,7 @@ export default {
     <div v-if="renderShowMoreSection" class="user-list-more gl-hover-text-blue-800">
       <button
         type="button"
-        class="btn-link"
+        class="btn-link gl-button gl-reset-color!"
         data-qa-selector="more_assignees_link"
         @click="toggleShowLess"
       >
diff --git a/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer.vue b/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer.vue
index 6de926e0ff9..2ea7c125a85 100644
--- a/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer.vue
+++ b/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer.vue
@@ -17,7 +17,7 @@ export default {
 </script>
 
 <template>
-  <button type="button" class="btn-link">
+  <button type="button" class="btn-link gl-button">
     <reviewer-avatar :user="user" :img-size="24" />
     <span class="author"> {{ user.name }} </span>
   </button>
diff --git a/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer_list.vue b/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer_list.vue
index e09b5d913f7..9502b2e78b3 100644
--- a/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer_list.vue
+++ b/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer_list.vue
@@ -95,7 +95,7 @@ export default {
   >
     <gl-icon v-if="hasNoUsers" name="user" :aria-label="__('None')" />
     <collapsed-reviewer v-for="user in collapsedUsers" :key="user.id" :user="user" />
-    <button v-if="hasMoreThanTwoReviewers" class="btn-link" type="button">
+    <button v-if="hasMoreThanTwoReviewers" class="btn-link gl-button" type="button">
       <span
         class="avatar-counter sidebar-avatar-counter gl-display-flex gl-align-items-center gl-pl-3"
       >
diff --git a/app/assets/javascripts/sidebar/graphql.js b/app/assets/javascripts/sidebar/graphql.js
index 034bdc71122..ff3fb4aae6b 100644
--- a/app/assets/javascripts/sidebar/graphql.js
+++ b/app/assets/javascripts/sidebar/graphql.js
@@ -2,6 +2,7 @@ import produce from 'immer';
 import VueApollo from 'vue-apollo';
 import getIssueStateQuery from '~/issues/show/queries/get_issue_state.query.graphql';
 import createDefaultClient from '~/lib/graphql';
+import { temporaryConfig } from '~/work_items/graphql/provider';
 
 const resolvers = {
   Mutation: {
@@ -15,7 +16,12 @@ const resolvers = {
   },
 };
 
-export const defaultClient = createDefaultClient(resolvers);
+export const defaultClient = createDefaultClient(
+  resolvers,
+  // should be removed with the rollout of work item assignees FF
+  // https://gitlab.com/gitlab-org/gitlab/-/issues/363030
+  temporaryConfig,
+);
 
 export const apolloProvider = new VueApollo({
   defaultClient,
diff --git a/app/assets/javascripts/single_file_diff.js b/app/assets/javascripts/single_file_diff.js
index b7159fd6835..26838682fc8 100644
--- a/app/assets/javascripts/single_file_diff.js
+++ b/app/assets/javascripts/single_file_diff.js
@@ -17,7 +17,7 @@ const ERROR_HTML = `<div class="nothing-here-block">${spriteIcon(
   's16',
 )} Could not load diff</div>`;
 const COLLAPSED_HTML =
-  '<div class="nothing-here-block diff-collapsed">This diff is collapsed. <button class="click-to-expand btn btn-link">Click to expand it.</button></div>';
+  '<div class="nothing-here-block diff-collapsed">This diff is collapsed. <button class="click-to-expand btn btn-link gl-button">Click to expand it.</button></div>';
 
 export default class SingleFileDiff {
   constructor(file) {
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js b/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js
index d7a84798e47..5d7f4ae2a01 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js
@@ -1,4 +1,4 @@
-import { __ } from '~/locale';
+import { __, s__ } from '~/locale';
 
 export const DEBOUNCE_DELAY = 500;
 export const MAX_RECENT_TOKENS_SIZE = 3;
@@ -46,11 +46,13 @@ export const SortDirection = {
 export const FILTERED_SEARCH_LABELS = 'labels';
 export const FILTERED_SEARCH_TERM = 'filtered-search-term';
 
-export const TOKEN_TITLE_AUTHOR = __('Author');
 export const TOKEN_TITLE_ASSIGNEE = __('Assignee');
-export const TOKEN_TITLE_MILESTONE = __('Milestone');
+export const TOKEN_TITLE_AUTHOR = __('Author');
+export const TOKEN_TITLE_CONFIDENTIAL = __('Confidential');
+export const TOKEN_TITLE_CONTACT = s__('Crm|Contact');
 export const TOKEN_TITLE_LABEL = __('Label');
-export const TOKEN_TITLE_TYPE = __('Type');
-export const TOKEN_TITLE_RELEASE = __('Release');
+export const TOKEN_TITLE_MILESTONE = __('Milestone');
 export const TOKEN_TITLE_MY_REACTION = __('My-Reaction');
-export const TOKEN_TITLE_CONFIDENTIAL = __('Confidential');
+export const TOKEN_TITLE_ORGANIZATION = s__('Crm|Organization');
+export const TOKEN_TITLE_RELEASE = __('Release');
+export const TOKEN_TITLE_TYPE = __('Type');
diff --git a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_body.vue b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_body.vue
index 05dc1650379..5eb3da3c62e 100644
--- a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_body.vue
+++ b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_body.vue
@@ -22,10 +22,6 @@ export default {
       type: Object,
       required: true,
     },
-    statusBadgeClass: {
-      type: String,
-      required: true,
-    },
     statusIcon: {
       type: String,
       required: true,
@@ -162,7 +158,6 @@ export default {
       <template v-else>
         <issuable-title
           :issuable="issuable"
-          :status-badge-class="statusBadgeClass"
           :status-icon="statusIcon"
           :enable-edit="enableEdit"
           @edit-issuable="$emit('edit-issuable', $event)"
diff --git a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_header.vue b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_header.vue
index d883abd2dfd..f035795a045 100644
--- a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_header.vue
+++ b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_header.vue
@@ -40,11 +40,6 @@ export default {
       required: false,
       default: '',
     },
-    statusBadgeClass: {
-      type: String,
-      required: false,
-      default: '',
-    },
     statusIcon: {
       type: String,
       required: false,
@@ -113,11 +108,7 @@ export default {
 <template>
   <div class="detail-page-header">
     <div class="detail-page-header-body">
-      <gl-badge
-        class="issuable-status-badge gl-mr-3"
-        :class="statusBadgeClass"
-        :variant="badgeVariant"
-      >
+      <gl-badge class="issuable-status-badge gl-mr-3" :variant="badgeVariant">
         <gl-icon v-if="statusIcon" :name="statusIcon" :class="statusIconClass" />
         <span class="gl-display-none gl-sm-display-block"><slot name="status-badge"></slot></span>
       </gl-badge>
diff --git a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_show_root.vue b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_show_root.vue
index c165ee91c59..7ed93c042f8 100644
--- a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_show_root.vue
+++ b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_show_root.vue
@@ -17,11 +17,6 @@ export default {
       type: Object,
       required: true,
     },
-    statusBadgeClass: {
-      type: String,
-      required: false,
-      default: '',
-    },
     statusIcon: {
       type: String,
       required: false,
@@ -108,7 +103,6 @@ export default {
   <div class="issuable-show-container" data-qa-selector="issuable_show_container">
     <issuable-header
       :issuable-state="issuable.state"
-      :status-badge-class="statusBadgeClass"
       :status-icon="statusIcon"
       :status-icon-class="statusIconClass"
       :blocked="issuable.blocked"
@@ -127,7 +121,6 @@ export default {
 
     <issuable-body
       :issuable="issuable"
-      :status-badge-class="statusBadgeClass"
       :status-icon="statusIcon"
       :status-icon-class="statusIconClass"
       :enable-edit="enableEdit"
diff --git a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_title.vue b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_title.vue
index 8038b7a80a0..22d28a32b7a 100644
--- a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_title.vue
+++ b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_title.vue
@@ -29,10 +29,6 @@ export default {
       type: Object,
       required: true,
     },
-    statusBadgeClass: {
-      type: String,
-      required: true,
-    },
     statusIcon: {
       type: String,
       required: true,
@@ -92,11 +88,7 @@ export default {
           <div
             class="issue-sticky-header-text gl-display-flex gl-align-items-center gl-mx-auto gl-px-5"
           >
-            <gl-badge
-              class="gl-white-space-nowrap gl-mr-3"
-              :class="statusBadgeClass"
-              :variant="badgeVariant"
-            >
+            <gl-badge class="gl-white-space-nowrap gl-mr-3" :variant="badgeVariant">
               <gl-icon v-if="statusIcon" class="gl-sm-display-none" :name="statusIcon" />
               <span class="gl-display-none gl-sm-display-block">
                 <slot name="status-badge"></slot>
diff --git a/app/assets/javascripts/work_items/components/work_item_assignees.vue b/app/assets/javascripts/work_items/components/work_item_assignees.vue
new file mode 100644
index 00000000000..8089af72322
--- /dev/null
+++ b/app/assets/javascripts/work_items/components/work_item_assignees.vue
@@ -0,0 +1,42 @@
+<script>
+import { GlAvatar, GlLink } from '@gitlab/ui';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+
+export default {
+  components: {
+    GlAvatar,
+    GlLink,
+  },
+  props: {
+    assignees: {
+      type: Array,
+      required: true,
+    },
+  },
+  methods: {
+    getUserId(id) {
+      return getIdFromGraphQLId(id);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-display-flex">
+    <span class="gl-font-weight-bold gl-w-15 gl-pt-1">{{ __('Assignee(s)') }}</span>
+    <div class="gl-mb-4">
+      <gl-link
+        v-for="user in assignees"
+        :key="user.id"
+        :href="user.webUrl"
+        :title="`test`"
+        :data-user-id="getUserId(user.id)"
+        data-placement="top"
+        class="gl-text-decoration-none! gl-text-black-normal! gl-display-flex gl-md-display-inline-flex! gl-align-items-center gl-mb-4 gl-md-mb-0 gl-mr-4 js-user-link"
+      >
+        <gl-avatar :size="24" :src="user.avatarUrl" />
+        <span class="gl-pl-2">{{ user.name }}</span>
+      </gl-link>
+    </div>
+  </div>
+</template>
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 842c110e896..418c465d820 100644
--- a/app/assets/javascripts/work_items/components/work_item_detail.vue
+++ b/app/assets/javascripts/work_items/components/work_item_detail.vue
@@ -1,23 +1,27 @@
 <script>
 import { GlAlert, GlSkeletonLoader } from '@gitlab/ui';
-import { i18n } from '../constants';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import { i18n, WIDGET_TYPE_ASSIGNEE } from '../constants';
 import workItemQuery from '../graphql/work_item.query.graphql';
 import workItemTitleSubscription from '../graphql/work_item_title.subscription.graphql';
 import WorkItemActions from './work_item_actions.vue';
 import WorkItemState from './work_item_state.vue';
 import WorkItemTitle from './work_item_title.vue';
 import WorkItemLinks from './work_item_links/work_item_links.vue';
+import WorkItemAssignees from './work_item_assignees.vue';
 
 export default {
   i18n,
   components: {
     GlAlert,
     GlSkeletonLoader,
+    WorkItemAssignees,
     WorkItemActions,
     WorkItemTitle,
     WorkItemState,
     WorkItemLinks,
   },
+  mixins: [glFeatureFlagMixin()],
   props: {
     workItemId: {
       type: String,
@@ -68,6 +72,12 @@ export default {
     canDelete() {
       return this.workItem?.userPermissions?.deleteWorkItem;
     },
+    workItemAssigneesEnabled() {
+      return this.glFeatures.workItemAssignees;
+    },
+    workItemAssignees() {
+      return this.workItem?.mockWidgets?.find((widget) => widget.type === WIDGET_TYPE_ASSIGNEE);
+    },
   },
 };
 </script>
@@ -102,6 +112,10 @@ export default {
           @error="error = $event"
         />
       </div>
+      <work-item-assignees
+        v-if="workItemAssigneesEnabled && workItemAssignees"
+        :assignees="workItemAssignees.nodes"
+      />
       <work-item-state
         :work-item="workItem"
         @error="error = $event"
diff --git a/app/assets/javascripts/work_items/constants.js b/app/assets/javascripts/work_items/constants.js
index e914500108f..dc01e2424e5 100644
--- a/app/assets/javascripts/work_items/constants.js
+++ b/app/assets/javascripts/work_items/constants.js
@@ -12,3 +12,5 @@ export const i18n = {
 };
 
 export const DEFAULT_MODAL_TYPE = 'Task';
+
+export const WIDGET_TYPE_ASSIGNEE = 'ASSIGNEES';
diff --git a/app/assets/javascripts/work_items/graphql/provider.js b/app/assets/javascripts/work_items/graphql/provider.js
index 3c2955ce1e2..aa30094f345 100644
--- a/app/assets/javascripts/work_items/graphql/provider.js
+++ b/app/assets/javascripts/work_items/graphql/provider.js
@@ -1,11 +1,57 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
+import typeDefs from './typedefs.graphql';
+
+export const temporaryConfig = {
+  typeDefs,
+  cacheConfig: {
+    possibleTypes: {
+      LocalWorkItemWidget: ['LocalWorkItemAssignees'],
+    },
+    typePolicies: {
+      WorkItem: {
+        fields: {
+          mockWidgets: {
+            read() {
+              return [
+                {
+                  __typename: 'LocalWorkItemAssignees',
+                  type: 'ASSIGNEES',
+                  nodes: [
+                    {
+                      __typename: 'UserCore',
+                      id: 'gid://gitlab/User/1',
+                      avatarUrl: '',
+                      webUrl: '',
+                      // eslint-disable-next-line @gitlab/require-i18n-strings
+                      name: 'John Doe',
+                      username: 'doe_I',
+                    },
+                    {
+                      __typename: 'UserCore',
+                      id: 'gid://gitlab/User/2',
+                      avatarUrl: '',
+                      webUrl: '',
+                      // eslint-disable-next-line @gitlab/require-i18n-strings
+                      name: 'Marcus Rutherford',
+                      username: 'ruthfull',
+                    },
+                  ],
+                },
+              ];
+            },
+          },
+        },
+      },
+    },
+  },
+};
 
 export function createApolloProvider() {
   Vue.use(VueApollo);
 
-  const defaultClient = createDefaultClient();
+  const defaultClient = createDefaultClient({}, temporaryConfig);
 
   return new VueApollo({
     defaultClient,
diff --git a/app/assets/javascripts/work_items/graphql/typedefs.graphql b/app/assets/javascripts/work_items/graphql/typedefs.graphql
new file mode 100644
index 00000000000..0e2c8593a04
--- /dev/null
+++ b/app/assets/javascripts/work_items/graphql/typedefs.graphql
@@ -0,0 +1,16 @@
+enum LocalWidgetType {
+  ASSIGNEES
+}
+
+interface LocalWorkItemWidget {
+  type: LocalWidgetType!
+}
+
+type LocalWorkItemAssignees implements LocalWorkItemWidget {
+  type: LocalWidgetType!
+  nodes: [UserCore]
+}
+
+extend type WorkItem {
+  mockWidgets: [LocalWorkItemWidget]
+}
diff --git a/app/assets/javascripts/work_items/graphql/work_item.query.graphql b/app/assets/javascripts/work_items/graphql/work_item.query.graphql
index 3b46fed97ec..ff9341c4c0c 100644
--- a/app/assets/javascripts/work_items/graphql/work_item.query.graphql
+++ b/app/assets/javascripts/work_items/graphql/work_item.query.graphql
@@ -3,5 +3,17 @@
 query workItem($id: WorkItemID!) {
   workItem(id: $id) {
     ...WorkItem
+    mockWidgets @client {
+      ... on LocalWorkItemAssignees {
+        type
+        nodes {
+          id
+          avatarUrl
+          name
+          username
+          webUrl
+        }
+      }
+    }
   }
 }
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index 8e43a9b1b0d..e977fb92928 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -24,7 +24,6 @@
 @import 'framework/kbd';
 @import 'framework/header';
 @import 'framework/highlight';
-@import 'framework/issue_box';
 @import 'framework/lists';
 @import 'framework/logo';
 @import 'framework/job_log';
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 7ecd7ea277f..f951b663cb7 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -357,25 +357,6 @@
   }
 }
 
-.btn-link {
-  padding: 0;
-  background-color: transparent;
-  color: $blue-600;
-  font-weight: normal;
-  border-radius: 0;
-  border-color: transparent;
-  border-width: 0;
-
-  &:hover,
-  &:active,
-  &:focus {
-    color: $blue-800;
-    text-decoration: underline;
-    background-color: transparent;
-    border-color: transparent;
-  }
-}
-
 // The .btn-svg class is available for legacy icon buttons to
 // preserve a 34px height and have 16x16 icons at the same time.
 // Once a button is migrated (to the current 32px height)
diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss
deleted file mode 100644
index 8baf70da0c6..00000000000
--- a/app/assets/stylesheets/framework/issue_box.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Issue box for showing Open/Closed state:
- * Used for Issue#show page, MergeRequest#show page etc
- *
- */
-
-.status-box {
-  padding: 0 $gl-btn-padding;
-
-  border-radius: $border-radius-default;
-  display: block;
-  float: left;
-  margin-right: $gl-padding-8;
-  color: $white;
-  font-size: $gl-font-size;
-  line-height: $gl-line-height-24;
-
-  &.status-box-closed,
-  &.status-box-mr-closed {
-    background-color: $red-500;
-  }
-
-  &.status-box-issue-closed,
-  &.status-box-alert-resolved,
-  &.status-box-mr-merged {
-    background-color: $blue-500;
-  }
-
-  &.status-box-open {
-    background-color: $green-500;
-  }
-
-  &.status-box-expired {
-    background-color: $orange-500;
-  }
-
-  &.status-box-upcoming {
-    background: $gl-text-color-secondary;
-  }
-}
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 8fea6134e30..5b14e85d8ea 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -1,3 +1,14 @@
+.status-box {
+  padding: 0 $gl-btn-padding;
+  border-radius: $border-radius-default;
+  display: block;
+  float: left;
+  margin-right: $gl-padding-8;
+  color: $white;
+  font-size: $gl-font-size;
+  line-height: $gl-line-height-24;
+}
+
 .issuable-warning-icon {
   background-color: $orange-50;
   border-radius: $border-radius-default;
diff --git a/app/controllers/projects/issues_controller.rb b/app/controllers/projects/issues_controller.rb
index b65616fdb3c..3763fcf6c4d 100644
--- a/app/controllers/projects/issues_controller.rb
+++ b/app/controllers/projects/issues_controller.rb
@@ -50,6 +50,7 @@ class Projects::IssuesController < Projects::ApplicationController
     push_frontend_feature_flag(:paginated_issue_discussions, project)
     push_frontend_feature_flag(:realtime_labels, project)
     push_force_frontend_feature_flag(:work_items, project&.work_items_feature_flag_enabled?)
+    push_frontend_feature_flag(:work_item_assignees)
   end
 
   around_action :allow_gitaly_ref_name_caching, only: [:discussions]
diff --git a/app/controllers/projects/work_items_controller.rb b/app/controllers/projects/work_items_controller.rb
index 27857dac2b7..de3168dd415 100644
--- a/app/controllers/projects/work_items_controller.rb
+++ b/app/controllers/projects/work_items_controller.rb
@@ -3,6 +3,7 @@
 class Projects::WorkItemsController < Projects::ApplicationController
   before_action do
     push_force_frontend_feature_flag(:work_items, project&.work_items_feature_flag_enabled?)
+    push_frontend_feature_flag(:work_item_assignees)
   end
 
   feature_category :team_planning
diff --git a/app/controllers/projects_controller.rb b/app/controllers/projects_controller.rb
index 60d30352ff8..c363bf5021b 100644
--- a/app/controllers/projects_controller.rb
+++ b/app/controllers/projects_controller.rb
@@ -42,6 +42,7 @@ class ProjectsController < Projects::ApplicationController
     push_licensed_feature(:file_locks) if @project.present? && @project.licensed_feature_available?(:file_locks)
     push_licensed_feature(:security_orchestration_policies) if @project.present? && @project.licensed_feature_available?(:security_orchestration_policies)
     push_force_frontend_feature_flag(:work_items, @project&.work_items_feature_flag_enabled?)
+    push_frontend_feature_flag(:work_item_assignees)
   end
 
   layout :determine_layout
diff --git a/app/graphql/types/ci/runner_type.rb b/app/graphql/types/ci/runner_type.rb
index 6f957d2511f..27e84d39db5 100644
--- a/app/graphql/types/ci/runner_type.rb
+++ b/app/graphql/types/ci/runner_type.rb
@@ -86,6 +86,12 @@ module Types
       field :version, GraphQL::Types::String, null: true,
             description: 'Version of the runner.'
 
+      markdown_field :maintenance_note_html, null: true
+
+      def maintenance_note_html_resolver
+        ::MarkupHelper.markdown(object.maintenance_note, context.to_h.dup)
+      end
+
       def job_count
         # We limit to 1 above the JOB_COUNT_LIMIT to indicate that more items exist after JOB_COUNT_LIMIT
         runner.builds.limit(JOB_COUNT_LIMIT + 1).count
diff --git a/app/helpers/issues_helper.rb b/app/helpers/issues_helper.rb
index 04de77dd484..75b20412e71 100644
--- a/app/helpers/issues_helper.rb
+++ b/app/helpers/issues_helper.rb
@@ -31,15 +31,15 @@ module IssuesHelper
     updated_mr_header_enabled = Feature.enabled?(:updated_mr_header, @project)
 
     if item.try(:expired?)
-      'status-box-expired'
+      'gl-bg-orange-500'
     elsif item.try(:merged?)
-      updated_mr_header_enabled ? 'badge-info' : 'status-box-mr-merged'
+      updated_mr_header_enabled ? 'badge-info' : 'gl-bg-blue-500'
     elsif item.closed?
-      item.is_a?(MergeRequest) && updated_mr_header_enabled ? 'badge-danger' : 'status-box-mr-closed'
+      item.is_a?(MergeRequest) && updated_mr_header_enabled ? 'badge-danger' : 'gl-bg-red-500'
     elsif item.try(:upcoming?)
-      'status-box-upcoming'
+      'gl-bg-gray-500'
     else
-      item.is_a?(MergeRequest) && updated_mr_header_enabled ? 'badge-success' : 'status-box-open'
+      item.is_a?(MergeRequest) && updated_mr_header_enabled ? 'badge-success' : 'gl-bg-green-500'
     end
   end
 
@@ -218,6 +218,8 @@ module IssuesHelper
       can_bulk_update: can?(current_user, :admin_issue, project).to_s,
       can_edit: can?(current_user, :admin_project, project).to_s,
       can_import_issues: can?(current_user, :import_issues, @project).to_s,
+      can_read_crm_contact: can?(current_user, :read_crm_contact, project.group).to_s,
+      can_read_crm_organization: can?(current_user, :read_crm_organization, project.group).to_s,
       email: current_user&.notification_email_or_default,
       emails_help_page_path: help_page_path('development/emails', anchor: 'email-namespace'),
       export_csv_path: export_csv_project_issues_path(project),
@@ -238,6 +240,8 @@ module IssuesHelper
 
   def group_issues_list_data(group, current_user)
     common_issues_list_data(group, current_user).merge(
+      can_read_crm_contact: can?(current_user, :read_crm_contact, group).to_s,
+      can_read_crm_organization: can?(current_user, :read_crm_organization, group).to_s,
       has_any_issues: @has_issues.to_s,
       has_any_projects: @has_projects.to_s
     )
diff --git a/app/helpers/todos_helper.rb b/app/helpers/todos_helper.rb
index d3cc922423d..8529959f73c 100644
--- a/app/helpers/todos_helper.rb
+++ b/app/helpers/todos_helper.rb
@@ -100,17 +100,22 @@ module TodosHelper
   def todo_target_state_pill(todo)
     return unless show_todo_state?(todo)
 
-    type =
-      case todo.target
-      when MergeRequest
-        'mr'
-      when Issue
-        'issue'
-      when AlertManagement::Alert
-        'alert'
+    state = todo.target.state.to_s
+
+    case todo.target
+    when MergeRequest
+      if state == 'closed'
+        background_class = 'gl-bg-red-500'
+      elsif state == 'merged'
+        background_class = 'gl-bg-blue-500'
       end
+    when Issue
+      background_class = 'gl-bg-blue-500' if state == 'closed'
+    when AlertManagement::Alert
+      background_class = 'gl-bg-blue-500' if state == 'resolved'
+    end
 
-    tag.span class: "gl-my-0 gl-px-2 status-box status-box-#{type}-#{todo.target.state.to_s.dasherize}" do
+    tag.span class: "gl-my-0 gl-px-2 status-box #{background_class}" do
       todo.target.state.to_s.capitalize
     end
   end
diff --git a/app/services/packages/go/create_package_service.rb b/app/services/packages/go/create_package_service.rb
index 2a6eeff402e..0e5771a2e73 100644
--- a/app/services/packages/go/create_package_service.rb
+++ b/app/services/packages/go/create_package_service.rb
@@ -38,11 +38,12 @@ module Packages
         raise GoZipSizeError, "#{version.mod.name}@#{version.name}.#{type} exceeds size limit" if file.size > project.actual_limits.golang_max_file_size
 
         digests = {
-          md5: Digest::MD5.hexdigest(content),
           sha1: Digest::SHA1.hexdigest(content),
           sha256: Digest::SHA256.hexdigest(content)
         }
 
+        digests[:md5] = Digest::MD5.hexdigest(content) unless Gitlab::FIPS.enabled?
+
         [file, digests]
       end