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> <script>
import { GlToken, GlAvatar, GlPopover } from '@gitlab/ui'; import { GlAvatar, GlPopover } from '@gitlab/ui';
import { formatDate } from '~/lib/utils/datetime_utility'; import { formatDate } from '~/lib/utils/datetime_utility';
import { truncate } from '~/lib/utils/text_utility'; import { truncate } from '~/lib/utils/text_utility';
import { __, sprintf } from '~/locale'; import { __, sprintf } from '~/locale';
...@@ -10,11 +10,13 @@ export const SHIFT_WIDTHS = { ...@@ -10,11 +10,13 @@ export const SHIFT_WIDTHS = {
xs: 40, xs: 40,
}; };
const ROTATION_CENTER_CLASS = 'gl-display-flex gl-justify-content-center gl-align-items-center';
export default { export default {
ROTATION_CENTER_CLASS,
components: { components: {
GlAvatar, GlAvatar,
GlPopover, GlPopover,
GlToken,
}, },
props: { props: {
assignee: { assignee: {
...@@ -72,19 +74,19 @@ export default { ...@@ -72,19 +74,19 @@ export default {
<template> <template>
<div class="gl-absolute gl-h-7 gl-mt-3" :style="rotationAssigneeStyle"> <div class="gl-absolute gl-h-7 gl-mt-3" :style="rotationAssigneeStyle">
<gl-token <div
:id="rotationAssigneeUniqueID" :id="rotationAssigneeUniqueID"
class="gl-w-full gl-h-6 gl-align-items-center" class="gl-h-6"
:class="chevronClass" :class="[chevronClass, $options.ROTATION_CENTER_CLASS]"
:view-only="true" 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" /> <gl-avatar :src="assignee.user.avatarUrl" :size="16" />
<span v-if="!rotationMobileView" class="gl-ml-2" data-testid="rotation-assignee-name">{{ <span v-if="!rotationMobileView" class="gl-ml-2" data-testid="rotation-assignee-name">{{
assigneeName assigneeName
}}</span> }}</span>
</div> </div>
</gl-token> </div>
<gl-popover <gl-popover
:target="rotationAssigneeUniqueID" :target="rotationAssigneeUniqueID"
:title="assignee.user.username" :title="assignee.user.username"
......
import { GlToken, GlAvatar, GlPopover } from '@gitlab/ui'; import { GlAvatar, GlPopover } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import RotationAssignee, { import RotationAssignee, {
SHIFT_WIDTHS, SHIFT_WIDTHS,
...@@ -13,7 +13,7 @@ describe('RotationAssignee', () => { ...@@ -13,7 +13,7 @@ describe('RotationAssignee', () => {
const shiftWidth = 100; const shiftWidth = 100;
const assignee = mockRotations[0].shifts.nodes[0]; const assignee = mockRotations[0].shifts.nodes[0];
const findToken = () => wrapper.findComponent(GlToken); const findToken = () => wrapper.findByTestId('rotation-assignee');
const findAvatar = () => wrapper.findComponent(GlAvatar); const findAvatar = () => wrapper.findComponent(GlAvatar);
const findPopOver = () => wrapper.findComponent(GlPopover); const findPopOver = () => wrapper.findComponent(GlPopover);
const findStartsAt = () => wrapper.findByTestId('rotation-assignee-starts-at'); const findStartsAt = () => wrapper.findByTestId('rotation-assignee-starts-at');
......
...@@ -80,28 +80,23 @@ exports[`RotationsListSectionComponent when the timeframe includes today renders ...@@ -80,28 +80,23 @@ exports[`RotationsListSectionComponent when the timeframe includes today renders
class="gl-absolute gl-h-7 gl-mt-3" class="gl-absolute gl-h-7 gl-mt-3"
style="left: 0px; width: -2px;" style="left: 0px; width: -2px;"
> >
<span <div
class="gl-w-full gl-h-6 gl-align-items-center gl-token gl-token-default-variant gl-bg-data-viz-blue-500" 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" id="1-12"
> >
<span <div
class="gl-token-content" class="gl-text-white gl-display-flex gl-justify-content-center gl-align-items-center"
> >
<div <img
class="gl-display-flex gl-text-white gl-font-weight-normal" alt="avatar"
> class="gl-avatar gl-avatar-circle gl-avatar-s16"
<img src="/url"
alt="avatar" />
class="gl-avatar gl-avatar-circle gl-avatar-s16"
src="/url"
/>
<!---->
</div>
<!----> <!---->
</span> </div>
</span> </div>
<div <div
class="gl-popover" class="gl-popover"
...@@ -125,28 +120,23 @@ exports[`RotationsListSectionComponent when the timeframe includes today renders ...@@ -125,28 +120,23 @@ exports[`RotationsListSectionComponent when the timeframe includes today renders
class="gl-absolute gl-h-7 gl-mt-3" class="gl-absolute gl-h-7 gl-mt-3"
style="left: 0px; width: -2px;" style="left: 0px; width: -2px;"
> >
<span <div
class="gl-w-full gl-h-6 gl-align-items-center gl-token gl-token-default-variant gl-bg-data-viz-orange-500" class="gl-h-6 gl-bg-data-viz-orange-500 gl-display-flex gl-justify-content-center gl-align-items-center"
id="2-17" data-testid="rotation-assignee"
id="2-16"
> >
<span <div
class="gl-token-content" class="gl-text-white gl-display-flex gl-justify-content-center gl-align-items-center"
> >
<div <img
class="gl-display-flex gl-text-white gl-font-weight-normal" alt="avatar"
> class="gl-avatar gl-avatar-circle gl-avatar-s16"
<img src="/url"
alt="avatar" />
class="gl-avatar gl-avatar-circle gl-avatar-s16"
src="/url"
/>
<!---->
</div>
<!----> <!---->
</span> </div>
</span> </div>
<div <div
class="gl-popover" 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