Merge branch '322137-oncall-div' into 'master'

Fix(oncallschedules): remove rotation assignee GlToken

See merge request gitlab-org/gitlab!55283

ee/app/assets/javascripts/oncall_schedules/components/rotations/components/rotation_assignee.vue

 <script>
-import { GlToken, GlAvatar, GlPopover } from '@gitlab/ui';
+import { GlAvatar, GlPopover } from '@gitlab/ui';
 import { formatDate } from '~/lib/utils/datetime_utility';
 import { truncate } from '~/lib/utils/text_utility';
 import { __, sprintf } from '~/locale';
@@ -10,11 +10,13 @@ export const SHIFT_WIDTHS = {
   xs: 40,
 };
 
+const ROTATION_CENTER_CLASS = 'gl-display-flex gl-justify-content-center gl-align-items-center';
+
 export default {
+  ROTATION_CENTER_CLASS,
   components: {
     GlAvatar,
     GlPopover,
-    GlToken,
   },
   props: {
     assignee: {
@@ -72,19 +74,19 @@ export default {
 
 <template>
   <div class="gl-absolute gl-h-7 gl-mt-3" :style="rotationAssigneeStyle">
-    <gl-token
+    <div
       :id="rotationAssigneeUniqueID"
-      class="gl-w-full gl-h-6 gl-align-items-center"
-      :class="chevronClass"
-      :view-only="true"
+      class="gl-h-6"
+      :class="[chevronClass, $options.ROTATION_CENTER_CLASS]"
+      data-testid="rotation-assignee"
     >
-      <div class="gl-display-flex gl-text-white gl-font-weight-normal">
+      <div class="gl-text-white" :class="$options.ROTATION_CENTER_CLASS">
         <gl-avatar :src="assignee.user.avatarUrl" :size="16" />
         <span v-if="!rotationMobileView" class="gl-ml-2" data-testid="rotation-assignee-name">{{
           assigneeName
         }}</span>
       </div>
-    </gl-token>
+    </div>
     <gl-popover
       :target="rotationAssigneeUniqueID"
       :title="assignee.user.username"

ee/spec/frontend/oncall_schedule/rotations/components/rotation_assignee_spec.js

-import { GlToken, GlAvatar, GlPopover } from '@gitlab/ui';
+import { GlAvatar, GlPopover } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import RotationAssignee, {
   SHIFT_WIDTHS,
@@ -13,7 +13,7 @@ describe('RotationAssignee', () => {
 
   const shiftWidth = 100;
   const assignee = mockRotations[0].shifts.nodes[0];
-  const findToken = () => wrapper.findComponent(GlToken);
+  const findToken = () => wrapper.findByTestId('rotation-assignee');
   const findAvatar = () => wrapper.findComponent(GlAvatar);
   const findPopOver = () => wrapper.findComponent(GlPopover);
   const findStartsAt = () => wrapper.findByTestId('rotation-assignee-starts-at');

ee/spec/frontend/oncall_schedule/schedule/components/__snapshots__/rotations_list_section_spec.js.snap

@@ -80,15 +80,13 @@ exports[`RotationsListSectionComponent when the timeframe includes today renders
             class="gl-absolute gl-h-7 gl-mt-3"
             style="left: 0px; width: -2px;"
           >
-            <span
-              class="gl-w-full gl-h-6 gl-align-items-center gl-token gl-token-default-variant gl-bg-data-viz-blue-500"
+            <div
+              class="gl-h-6 gl-bg-data-viz-blue-500 gl-display-flex gl-justify-content-center gl-align-items-center"
+              data-testid="rotation-assignee"
               id="1-12"
-            >
-              <span
-                class="gl-token-content"
             >
               <div
-                  class="gl-display-flex gl-text-white gl-font-weight-normal"
+                class="gl-text-white gl-display-flex gl-justify-content-center gl-align-items-center"
               >
                 <img
                   alt="avatar"
@@ -98,10 +96,7 @@ exports[`RotationsListSectionComponent when the timeframe includes today renders
                  
                 <!---->
               </div>
-                 
-                <!---->
-              </span>
-            </span>
+            </div>
              
             <div
               class="gl-popover"
@@ -125,15 +120,13 @@ exports[`RotationsListSectionComponent when the timeframe includes today renders
             class="gl-absolute gl-h-7 gl-mt-3"
             style="left: 0px; width: -2px;"
           >
-            <span
-              class="gl-w-full gl-h-6 gl-align-items-center gl-token gl-token-default-variant gl-bg-data-viz-orange-500"
-              id="2-17"
-            >
-              <span
-                class="gl-token-content"
+            <div
+              class="gl-h-6 gl-bg-data-viz-orange-500 gl-display-flex gl-justify-content-center gl-align-items-center"
+              data-testid="rotation-assignee"
+              id="2-16"
             >
               <div
-                  class="gl-display-flex gl-text-white gl-font-weight-normal"
+                class="gl-text-white gl-display-flex gl-justify-content-center gl-align-items-center"
               >
                 <img
                   alt="avatar"
@@ -143,10 +136,7 @@ exports[`RotationsListSectionComponent when the timeframe includes today renders
                  
                 <!---->
               </div>
-                 
-                <!---->
-              </span>
-            </span>
+            </div>
              
             <div
               class="gl-popover"