Commit b80d7a7f authored by Filipa Lacerda's avatar Filipa Lacerda

Updates error state in artifacts list

Show the error state as plain text
instead of a disabled button
parent ed52aa0f
......@@ -39,9 +39,6 @@ export default {
ariaLabel() {
return this.isCollapsed ? __('Expand') : __('Collapse');
},
isButtonDisabled() {
return this.isLoading || this.hasError;
},
},
methods: {
toggleCollapsed() {
......@@ -53,25 +50,35 @@ export default {
<template>
<div>
<div class="mr-widget-extension d-flex align-items-center pl-3">
<gl-button
class="btn-blank btn s32 square append-right-default"
:aria-label="ariaLabel"
:disabled="isButtonDisabled"
@click="toggleCollapsed"
>
<gl-loading-icon v-if="isLoading" />
<icon v-else :name="arrowIconName" class="js-icon" />
</gl-button>
<gl-button
variant="link"
class="js-title"
:disabled="isButtonDisabled"
:class="{ 'border-0': isButtonDisabled }"
@click="toggleCollapsed"
>
<template v-if="isCollapsed">{{ title }}</template>
<template v-else>{{ __('Collapse') }}</template>
</gl-button>
<div v-if="hasError" class="ci-widget media">
<div class="media-body">
<span class="gl-font-size-small mr-widget-margin-left gl-line-height-24 js-error-state">{{
title
}}</span>
</div>
</div>
<template v-else>
<gl-button
class="btn-blank btn s32 square append-right-default"
:aria-label="ariaLabel"
:disabled="isLoading"
@click="toggleCollapsed"
>
<gl-loading-icon v-if="isLoading" />
<icon v-else :name="arrowIconName" class="js-icon" />
</gl-button>
<gl-button
variant="link"
class="js-title"
:disabled="isLoading"
:class="{ 'border-0': isLoading }"
@click="toggleCollapsed"
>
<template v-if="isCollapsed">{{ title }}</template>
<template v-else>{{ __('Collapse') }}</template>
</gl-button>
</template>
</div>
<div v-if="!isCollapsed" class="border-top js-slot-container">
......
......@@ -559,3 +559,6 @@ img.emoji {
}
}
}
.gl-font-size-small { font-size: $gl-font-size-small; }
.gl-line-height-24 { line-height: $gl-line-height-24; }
......@@ -833,6 +833,7 @@ Merge Requests
*/
$mr-tabs-height: 48px;
$mr-version-controls-height: 56px;
$mr-widget-margin-left: 40px;
/*
Compare Branches
......
......@@ -19,6 +19,8 @@
border-top: 1px solid $border-color;
}
.mr-widget-margin-left { margin-left: $mr-widget-margin-left; }
.media-section {
@include media-breakpoint-down(md) {
align-items: flex-start;
......
......@@ -44,6 +44,7 @@ describe('Merge Requests Artifacts list app', () => {
const findButtons = () => wrapper.findAll('button');
const findTitle = () => wrapper.find('.js-title');
const findErrorMessage = () => wrapper.find('.js-error-state');
const findTableRows = () => wrapper.findAll('tbody tr');
describe('while loading', () => {
......@@ -109,13 +110,12 @@ describe('Merge Requests Artifacts list app', () => {
});
it('renders the error state', () => {
expect(findTitle().text()).toBe('An error occurred while fetching the artifacts');
expect(findErrorMessage().text()).toBe('An error occurred while fetching the artifacts');
});
it('renders disabled buttons', () => {
it('does not render buttons', () => {
const buttons = findButtons();
expect(buttons.at(0).attributes('disabled')).toBe('disabled');
expect(buttons.at(1).attributes('disabled')).toBe('disabled');
expect(buttons.exists()).toBe(false);
});
});
});
......@@ -20,6 +20,7 @@ describe('Merge Request Collapsible Extension', () => {
};
const findTitle = () => wrapper.find('.js-title');
const findErrorMessage = () => wrapper.find('.js-error-state');
afterEach(() => {
wrapper.destroy();
......@@ -87,19 +88,12 @@ describe('Merge Request Collapsible Extension', () => {
mountComponent(Object.assign({}, data, { hasError: true }));
});
it('renders the buttons disabled', () => {
expect(
wrapper
.findAll('button')
.at(0)
.attributes('disabled'),
).toEqual('disabled');
expect(
wrapper
.findAll('button')
.at(1)
.attributes('disabled'),
).toEqual('disabled');
it('does not render the buttons', () => {
expect(wrapper.findAll('button').exists()).toBe(false);
});
it('renders title message provided', () => {
expect(findErrorMessage().text()).toBe(data.title);
});
});
});
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