Commit fd3864e0 authored by Mark Florian's avatar Mark Florian

Merge branch 'nfriend-update-releases-page-skeleton-loader-shape' into 'master'

Update shape of skeleton loader on Releases and Release pages

See merge request gitlab-org/gitlab!43138
parents 880da96a dcb9d37f
<script>
import { mapState, mapActions } from 'vuex';
import {
GlDeprecatedSkeletonLoading as GlSkeletonLoading,
GlEmptyState,
GlLink,
GlButton,
} from '@gitlab/ui';
import { GlEmptyState, GlLink, GlButton } from '@gitlab/ui';
import { getParameterByName } from '~/lib/utils/common_utils';
import { __ } from '~/locale';
import ReleaseBlock from './release_block.vue';
import ReleasesPagination from './releases_pagination.vue';
import ReleaseSkeletonLoader from './release_skeleton_loader.vue';
export default {
name: 'ReleasesApp',
components: {
GlSkeletonLoading,
GlEmptyState,
ReleaseBlock,
ReleasesPagination,
GlLink,
GlButton,
ReleaseBlock,
ReleasesPagination,
ReleaseSkeletonLoader,
},
computed: {
...mapState('list', [
......@@ -77,7 +73,7 @@ export default {
{{ __('New release') }}
</gl-button>
<gl-skeleton-loading v-if="isLoading" class="js-loading" />
<release-skeleton-loader v-if="isLoading" class="js-loading" />
<gl-empty-state
v-else-if="shouldRenderEmptyState"
......
<script>
import { mapState, mapActions } from 'vuex';
import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
import ReleaseBlock from './release_block.vue';
import ReleaseSkeletonLoader from './release_skeleton_loader.vue';
export default {
name: 'ReleaseShowApp',
components: {
GlSkeletonLoading,
ReleaseBlock,
ReleaseSkeletonLoader,
},
computed: {
...mapState('detail', ['isFetchingRelease', 'fetchError', 'release']),
......@@ -22,7 +22,7 @@ export default {
</script>
<template>
<div class="gl-mt-3">
<gl-skeleton-loading v-if="isFetchingRelease" />
<release-skeleton-loader v-if="isFetchingRelease" />
<release-block v-else-if="!fetchError" :release="release" />
</div>
......
<script>
import { GlSkeletonLoader } from '@gitlab/ui';
export default {
name: 'ReleaseSkeletonLoader',
components: { GlSkeletonLoader },
};
</script>
<template>
<gl-skeleton-loader :width="1248" :height="420">
<!-- Outside border -->
<path
d="M 4.5 0 C 2.0156486 0 0 2.0156486 0 4.5 L 0 415.5 C 0 417.98435 2.0156486 420 4.5 420 L 1243.5 420 C 1245.9844 420 1248 417.98435 1248 415.5 L 1248 4.5 C 1248 2.0156486 1245.9844 0 1243.5 0 L 4.5 0 z M 4.5 1 L 1243.5 1 C 1245.4476 1 1247 2.5523514 1247 4.5 L 1247 415.5 C 1247 417.44765 1245.4476 419 1243.5 419 L 4.5 419 C 2.5523514 419 1 417.44765 1 415.5 L 1 4.5 C 1 2.5523514 2.5523514 1 4.5 1 z "
/>
<!-- Header bottom border -->
<rect x="0" y="63.5" width="1248" height="1" />
<!-- Release title -->
<rect x="16" y="20" width="293" height="24" />
<!-- Edit (pencil) button -->
<rect x="1207" y="16" rx="4" width="32" height="32" />
<!-- Asset link 1 -->
<rect x="40" y="121" rx="4" width="16" height="16" />
<rect x="60" y="125" width="116" height="8" />
<!-- Asset link 2 -->
<rect x="40" y="145" rx="4" width="16" height="16" />
<rect x="60" y="149" width="132" height="8" />
<!-- Asset link 3 -->
<rect x="40" y="169" rx="4" width="16" height="16" />
<rect x="60" y="173" width="140" height="8" />
<!-- Asset link 4 -->
<rect x="40" y="193" rx="4" width="16" height="16" />
<rect x="60" y="197" width="112" height="8" />
<!-- Release notes -->
<rect x="16" y="228" width="480" height="8" />
<rect x="16" y="252" width="560" height="8" />
<rect x="16" y="276" width="480" height="8" />
<rect x="16" y="300" width="560" height="8" />
<rect x="16" y="324" width="320" height="8" />
<!-- Footer top border -->
<rect x="0" y="373" width="1248" height="1" />
</gl-skeleton-loader>
</template>
---
title: Update skeleton loader shape on releases pages
merge_request: 43138
author:
type: added
import Vuex from 'vuex';
import { shallowMount } from '@vue/test-utils';
import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
import ReleaseShowApp from '~/releases/components/app_show.vue';
import ReleaseSkeletonLoader from '~/releases/components/release_skeleton_loader.vue';
import { release as originalRelease } from '../mock_data';
import ReleaseBlock from '~/releases/components/release_block.vue';
import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
......@@ -33,7 +33,7 @@ describe('Release show component', () => {
wrapper = shallowMount(ReleaseShowApp, { store });
};
const findLoadingSkeleton = () => wrapper.find(GlSkeletonLoading);
const findLoadingSkeleton = () => wrapper.find(ReleaseSkeletonLoader);
const findReleaseBlock = () => wrapper.find(ReleaseBlock);
it('calls fetchRelease when the component is created', () => {
......
import { mount } from '@vue/test-utils';
import { GlSkeletonLoader } from '@gitlab/ui';
import ReleaseSkeletonLoader from '~/releases/components/release_skeleton_loader.vue';
describe('release_skeleton_loader.vue', () => {
let wrapper;
beforeEach(() => {
wrapper = mount(ReleaseSkeletonLoader);
});
it('renders a GlSkeletonLoader', () => {
expect(wrapper.find(GlSkeletonLoader).exists()).toBe(true);
});
});
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