Commit 8f661028 authored by David O'Regan's avatar David O'Regan Committed by Paul Slaughter

Fix(oncallschedules): replace GlToken with plain div

reduce code complexity and remove unneeded code
parent 7dae08d1
<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"
......
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');
......
......@@ -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"
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment