From 0afadffdcd5d07c1148edd6bbccf5a1bb76b8ebf Mon Sep 17 00:00:00 2001
From: David O'Regan <doregan@gitlab.com>
Date: Wed, 24 Feb 2021 08:39:53 -0500
Subject: [PATCH] Fix(oncallschedules): replace GlToken with plain div

Squashed:

Update the grid start time and allow
for midnight shift edge case
in weekly grid draw for shifts less
than 24 hours
---
 .../components/rotation_assignee.vue          | 18 +++---
 .../components/rotation_assignee_spec.js      |  4 +-
 .../rotations_list_section_spec.js.snap       | 60 ++++++++-----------
 3 files changed, 37 insertions(+), 45 deletions(-)

diff --git a/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/rotation_assignee.vue b/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/rotation_assignee.vue
index d51ff3a4fb8508..dbf086cbf65223 100644
--- a/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/rotation_assignee.vue
+++ b/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/rotation_assignee.vue
@@ -1,5 +1,5 @@
 <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"
diff --git a/ee/spec/frontend/oncall_schedule/rotations/components/rotation_assignee_spec.js b/ee/spec/frontend/oncall_schedule/rotations/components/rotation_assignee_spec.js
index 50a82dfc63a30a..d629666ace0fce 100644
--- a/ee/spec/frontend/oncall_schedule/rotations/components/rotation_assignee_spec.js
+++ b/ee/spec/frontend/oncall_schedule/rotations/components/rotation_assignee_spec.js
@@ -1,4 +1,4 @@
-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');
diff --git a/ee/spec/frontend/oncall_schedule/schedule/components/__snapshots__/rotations_list_section_spec.js.snap b/ee/spec/frontend/oncall_schedule/schedule/components/__snapshots__/rotations_list_section_spec.js.snap
index a4fb9f16e36b86..3b93074d1720a7 100644
--- a/ee/spec/frontend/oncall_schedule/schedule/components/__snapshots__/rotations_list_section_spec.js.snap
+++ b/ee/spec/frontend/oncall_schedule/schedule/components/__snapshots__/rotations_list_section_spec.js.snap
@@ -80,28 +80,23 @@ 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-text-white gl-display-flex gl-justify-content-center gl-align-items-center"
               >
-                <div
-                  class="gl-display-flex gl-text-white gl-font-weight-normal"
-                >
-                  <img
-                    alt="avatar"
-                    class="gl-avatar gl-avatar-circle gl-avatar-s16"
-                    src="/url"
-                  />
-                   
-                  <!---->
-                </div>
+                <img
+                  alt="avatar"
+                  class="gl-avatar gl-avatar-circle gl-avatar-s16"
+                  src="/url"
+                />
                  
                 <!---->
-              </span>
-            </span>
+              </div>
+            </div>
              
             <div
               class="gl-popover"
@@ -125,28 +120,23 @@ 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"
+            <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"
             >
-              <span
-                class="gl-token-content"
+              <div
+                class="gl-text-white gl-display-flex gl-justify-content-center gl-align-items-center"
               >
-                <div
-                  class="gl-display-flex gl-text-white gl-font-weight-normal"
-                >
-                  <img
-                    alt="avatar"
-                    class="gl-avatar gl-avatar-circle gl-avatar-s16"
-                    src="/url"
-                  />
-                   
-                  <!---->
-                </div>
+                <img
+                  alt="avatar"
+                  class="gl-avatar gl-avatar-circle gl-avatar-s16"
+                  src="/url"
+                />
                  
                 <!---->
-              </span>
-            </span>
+              </div>
+            </div>
              
             <div
               class="gl-popover"
-- 
GitLab