Commit d7f68bcf authored by Tim Zallmann's avatar Tim Zallmann

Merge branch 'fl-prettify-2' into 'master'

Runs prettier on some vue shared components

See merge request gitlab-org/gitlab-ce!18487
parents 14981d51 d7642137
<script> <script>
import commitIconSvg from 'icons/_icon_commit.svg'; import UserAvatarLink from './user_avatar/user_avatar_link.vue';
import userAvatarLink from './user_avatar/user_avatar_link.vue'; import tooltip from '../directives/tooltip';
import tooltip from '../directives/tooltip'; import Icon from '../../vue_shared/components/icon.vue';
import icon from '../../vue_shared/components/icon.vue';
export default { export default {
directives: { directives: {
tooltip, tooltip,
},
components: {
UserAvatarLink,
Icon,
},
props: {
/**
* Indicates the existance of a tag.
* Used to render the correct icon, if true will render `fa-tag` icon,
* if false will render a svg sprite fork icon
*/
tag: {
type: Boolean,
required: false,
default: false,
}, },
components: { /**
userAvatarLink, * If provided is used to render the branch name and url.
icon, * Should contain the following properties:
* name
* ref_url
*/
commitRef: {
type: Object,
required: false,
default: () => ({}),
},
/**
* Used to link to the commit sha.
*/
commitUrl: {
type: String,
required: false,
default: '',
}, },
props: {
/**
* Indicates the existance of a tag.
* Used to render the correct icon, if true will render `fa-tag` icon,
* if false will render a svg sprite fork icon
*/
tag: {
type: Boolean,
required: false,
default: false,
},
/**
* If provided is used to render the branch name and url.
* Should contain the following properties:
* name
* ref_url
*/
commitRef: {
type: Object,
required: false,
default: () => ({}),
},
/**
* Used to link to the commit sha.
*/
commitUrl: {
type: String,
required: false,
default: '',
},
/** /**
* Used to show the commit short sha that links to the commit url. * Used to show the commit short sha that links to the commit url.
*/ */
shortSha: { shortSha: {
type: String, type: String,
required: false, required: false,
default: '', default: '',
}, },
/** /**
* If provided shows the commit tile. * If provided shows the commit tile.
*/ */
title: { title: {
type: String, type: String,
required: false, required: false,
default: '', default: '',
}, },
/** /**
* If provided renders information about the author of the commit. * If provided renders information about the author of the commit.
* When provided should include: * When provided should include:
* `avatar_url` to render the avatar icon * `avatar_url` to render the avatar icon
* `web_url` to link to user profile * `web_url` to link to user profile
* `username` to render alt and title tags * `username` to render alt and title tags
*/ */
author: { author: {
type: Object, type: Object,
required: false, required: false,
default: () => ({}), default: () => ({}),
}, },
showBranch: { showBranch: {
type: Boolean, type: Boolean,
required: false, required: false,
default: true, default: true,
},
}, },
computed: { },
/** computed: {
* Used to verify if all the properties needed to render the commit /**
* ref section were provided. * Used to verify if all the properties needed to render the commit
* * ref section were provided.
* @returns {Boolean} *
*/ * @returns {Boolean}
hasCommitRef() { */
return this.commitRef && this.commitRef.name && this.commitRef.ref_url; hasCommitRef() {
}, return this.commitRef && this.commitRef.name && this.commitRef.ref_url;
/**
* Used to verify if all the properties needed to render the commit
* author section were provided.
*
* @returns {Boolean}
*/
hasAuthor() {
return this.author &&
this.author.avatar_url &&
this.author.path &&
this.author.username;
},
/**
* If information about the author is provided will return a string
* to be rendered as the alt attribute of the img tag.
*
* @returns {String}
*/
userImageAltDescription() {
return this.author &&
this.author.username ? `${this.author.username}'s avatar` : null;
},
}, },
created() { /**
this.commitIconSvg = commitIconSvg; * Used to verify if all the properties needed to render the commit
* author section were provided.
*
* @returns {Boolean}
*/
hasAuthor() {
return this.author && this.author.avatar_url && this.author.path && this.author.username;
}, },
}; /**
* If information about the author is provided will return a string
* to be rendered as the alt attribute of the img tag.
*
* @returns {String}
*/
userImageAltDescription() {
return this.author && this.author.username ? `${this.author.username}'s avatar` : null;
},
},
};
</script> </script>
<template> <template>
<div class="branch-commit"> <div class="branch-commit">
...@@ -141,11 +133,10 @@ ...@@ -141,11 +133,10 @@
{{ commitRef.name }} {{ commitRef.name }}
</a> </a>
</template> </template>
<div <icon
v-html="commitIconSvg" name="commit"
class="commit-icon js-commit-icon" class="commit-icon js-commit-icon"
> />
</div>
<a <a
class="commit-sha" class="commit-sha"
......
<script> <script>
import { __ } from '~/locale'; import { __ } from '~/locale';
/** /**
* Port of detail_behavior expand button. * Port of detail_behavior expand button.
* *
* @example * @example
* <expand-button> * <expand-button>
* <template slot="expanded"> * <template slot="expanded">
* Text goes here. * Text goes here.
* </template> * </template>
* </expand-button> * </expand-button>
*/ */
export default { export default {
name: 'ExpandButton', name: 'ExpandButton',
data() { data() {
return { return {
isCollapsed: true, isCollapsed: true,
}; };
},
computed: {
ariaLabel() {
return __('Click to expand text');
}, },
computed: { },
ariaLabel() { methods: {
return __('Click to expand text'); onClick() {
}, this.isCollapsed = !this.isCollapsed;
}, },
methods: { },
onClick() { };
this.isCollapsed = !this.isCollapsed;
},
},
};
</script> </script>
<template> <template>
<span> <span>
......
<script> <script>
import ciIconBadge from './ci_badge_link.vue'; import CiIconBadge from './ci_badge_link.vue';
import loadingIcon from './loading_icon.vue'; import LoadingIcon from './loading_icon.vue';
import timeagoTooltip from './time_ago_tooltip.vue'; import TimeagoTooltip from './time_ago_tooltip.vue';
import tooltip from '../directives/tooltip'; import tooltip from '../directives/tooltip';
import userAvatarImage from './user_avatar/user_avatar_image.vue'; import UserAvatarImage from './user_avatar/user_avatar_image.vue';
/** /**
* Renders header component for job and pipeline page based on UI mockups * Renders header component for job and pipeline page based on UI mockups
* *
* Used in: * Used in:
* - job show page * - job show page
* - pipeline show page * - pipeline show page
*/ */
export default { export default {
components: { components: {
ciIconBadge, CiIconBadge,
loadingIcon, LoadingIcon,
timeagoTooltip, TimeagoTooltip,
userAvatarImage, UserAvatarImage,
},
directives: {
tooltip,
},
props: {
status: {
type: Object,
required: true,
}, },
directives: { itemName: {
tooltip, type: String,
required: true,
}, },
props: { itemId: {
status: { type: Number,
type: Object, required: true,
required: true,
},
itemName: {
type: String,
required: true,
},
itemId: {
type: Number,
required: true,
},
time: {
type: String,
required: true,
},
user: {
type: Object,
required: false,
default: () => ({}),
},
actions: {
type: Array,
required: false,
default: () => [],
},
hasSidebarButton: {
type: Boolean,
required: false,
default: false,
},
shouldRenderTriggeredLabel: {
type: Boolean,
required: false,
default: true,
},
}, },
time: {
type: String,
required: true,
},
user: {
type: Object,
required: false,
default: () => ({}),
},
actions: {
type: Array,
required: false,
default: () => [],
},
hasSidebarButton: {
type: Boolean,
required: false,
default: false,
},
shouldRenderTriggeredLabel: {
type: Boolean,
required: false,
default: true,
},
},
computed: { computed: {
userAvatarAltText() { userAvatarAltText() {
return `${this.user.name}'s avatar`; return `${this.user.name}'s avatar`;
},
}, },
},
methods: { methods: {
onClickAction(action) { onClickAction(action) {
this.$emit('actionClicked', action); this.$emit('actionClicked', action);
},
}, },
}; },
};
</script> </script>
<template> <template>
......
<script> <script>
/* This is a re-usable vue component for rendering a svg sprite
icon
/* This is a re-usable vue component for rendering a svg sprite Sample configuration:
icon
Sample configuration: <icon
name="retry"
:size="32"
css-classes="top"
/>
<icon */
name="retry" // only allow classes in images.scss e.g. s12
:size="32" const validSizes = [8, 12, 16, 18, 24, 32, 48, 72];
css-classes="top"
/>
*/ export default {
// only allow classes in images.scss e.g. s12 props: {
const validSizes = [8, 12, 16, 18, 24, 32, 48, 72]; name: {
type: String,
export default { required: true,
props: { },
name: {
type: String,
required: true,
},
size: { size: {
type: Number, type: Number,
required: false, required: false,
default: 16, default: 16,
validator(value) { validator(value) {
return validSizes.includes(value); return validSizes.includes(value);
},
}, },
},
cssClasses: { cssClasses: {
type: String, type: String,
required: false, required: false,
default: '', default: '',
}, },
width: { width: {
type: Number, type: Number,
required: false, required: false,
default: null, default: null,
}, },
height: { height: {
type: Number, type: Number,
required: false, required: false,
default: null, default: null,
}, },
y: { y: {
type: Number, type: Number,
required: false, required: false,
default: null, default: null,
}, },
x: { x: {
type: Number, type: Number,
required: false, required: false,
default: null, default: null,
},
}, },
},
computed: { computed: {
spriteHref() { spriteHref() {
return `${gon.sprite_icons}#${this.name}`; return `${gon.sprite_icons}#${this.name}`;
}, },
iconSizeClass() { iconSizeClass() {
return this.size ? `s${this.size}` : ''; return this.size ? `s${this.size}` : '';
},
}, },
}; },
};
</script> </script>
<template> <template>
...@@ -79,7 +78,8 @@ ...@@ -79,7 +78,8 @@
:width="width" :width="width"
:height="height" :height="height"
:x="x" :x="x"
:y="y"> :y="y"
>
<use v-bind="{ 'xlink:href':spriteHref }" /> <use v-bind="{ 'xlink:href':spriteHref }" />
</svg> </svg>
</template> </template>
...@@ -55,7 +55,6 @@ describe('Commit component', () => { ...@@ -55,7 +55,6 @@ describe('Commit component', () => {
path: '/jschatz1', path: '/jschatz1',
username: 'jschatz1', username: 'jschatz1',
}, },
commitIconSvg: '<svg></svg>',
}; };
component = mountComponent(CommitComponent, props); component = mountComponent(CommitComponent, props);
...@@ -82,8 +81,10 @@ describe('Commit component', () => { ...@@ -82,8 +81,10 @@ describe('Commit component', () => {
expect(component.$el.querySelector('.commit-sha').textContent).toContain(props.shortSha); expect(component.$el.querySelector('.commit-sha').textContent).toContain(props.shortSha);
}); });
it('should render the given commitIconSvg', () => { it('should render icon for commit', () => {
expect(component.$el.querySelector('.js-commit-icon').children).toContain('svg'); expect(
component.$el.querySelector('.js-commit-icon use').getAttribute('xlink:href'),
).toContain('commit');
}); });
describe('Given commit title and author props', () => { describe('Given commit title and author props', () => {
......
...@@ -3,10 +3,10 @@ import expandButton from '~/vue_shared/components/expand_button.vue'; ...@@ -3,10 +3,10 @@ import expandButton from '~/vue_shared/components/expand_button.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper'; import mountComponent from 'spec/helpers/vue_mount_component_helper';
describe('expand button', () => { describe('expand button', () => {
const Component = Vue.extend(expandButton);
let vm; let vm;
beforeEach(() => { beforeEach(() => {
const Component = Vue.extend(expandButton);
vm = mountComponent(Component, { vm = mountComponent(Component, {
slots: { slots: {
expanded: '<p>Expanded!</p>', expanded: '<p>Expanded!</p>',
...@@ -22,7 +22,7 @@ describe('expand button', () => { ...@@ -22,7 +22,7 @@ describe('expand button', () => {
expect(vm.$el.textContent.trim()).toEqual('...'); expect(vm.$el.textContent.trim()).toEqual('...');
}); });
it('hides expander on click', (done) => { it('hides expander on click', done => {
vm.$el.querySelector('button').click(); vm.$el.querySelector('button').click();
vm.$nextTick(() => { vm.$nextTick(() => {
expect(vm.$el.querySelector('button').getAttribute('style')).toEqual('display: none;'); expect(vm.$el.querySelector('button').getAttribute('style')).toEqual('display: none;');
......
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