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

Runs prettier on some vue shared components

See merge request gitlab-org/gitlab-ce!18487

app/assets/javascripts/vue_shared/components/commit.vue

 <script>
-  import commitIconSvg from 'icons/_icon_commit.svg';
-  import userAvatarLink from './user_avatar/user_avatar_link.vue';
-  import tooltip from '../directives/tooltip';
-  import icon from '../../vue_shared/components/icon.vue';
+import UserAvatarLink from './user_avatar/user_avatar_link.vue';
+import tooltip from '../directives/tooltip';
+import Icon from '../../vue_shared/components/icon.vue';
 
-  export default {
+export default {
   directives: {
     tooltip,
   },
   components: {
-      userAvatarLink,
-      icon,
+    UserAvatarLink,
+    Icon,
   },
   props: {
     /**
@@ -94,10 +93,7 @@
      * @returns {Boolean}
      */
     hasAuthor() {
-        return this.author &&
-          this.author.avatar_url &&
-          this.author.path &&
-          this.author.username;
+      return this.author && this.author.avatar_url && this.author.path && this.author.username;
     },
     /**
      * If information about the author is provided will return a string
@@ -106,14 +102,10 @@
      * @returns {String}
      */
     userImageAltDescription() {
-        return this.author &&
-          this.author.username ? `${this.author.username}'s avatar` : null;
+      return this.author && this.author.username ? `${this.author.username}'s avatar` : null;
     },
   },
-    created() {
-      this.commitIconSvg = commitIconSvg;
-    },
-  };
+};
 </script>
 <template>
   <div class="branch-commit">
@@ -141,11 +133,10 @@
         {{ commitRef.name }}
       </a>
     </template>
-    <div
-      v-html="commitIconSvg"
+    <icon
+      name="commit"
       class="commit-icon js-commit-icon"
-    >
-    </div>
+    />
 
     <a
       class="commit-sha"

app/assets/javascripts/vue_shared/components/expand_button.vue

 <script>
-  import { __ } from '~/locale';
-  /**
+import { __ } from '~/locale';
+/**
  * Port of detail_behavior expand button.
  *
  * @example
@@ -10,7 +10,7 @@
  *    </template>
  * </expand-button>
  */
-  export default {
+export default {
   name: 'ExpandButton',
   data() {
     return {
@@ -27,7 +27,7 @@
       this.isCollapsed = !this.isCollapsed;
     },
   },
-  };
+};
 </script>
 <template>
   <span>

app/assets/javascripts/vue_shared/components/header_ci_component.vue

 <script>
-  import ciIconBadge from './ci_badge_link.vue';
-  import loadingIcon from './loading_icon.vue';
-  import timeagoTooltip from './time_ago_tooltip.vue';
-  import tooltip from '../directives/tooltip';
-  import userAvatarImage from './user_avatar/user_avatar_image.vue';
+import CiIconBadge from './ci_badge_link.vue';
+import LoadingIcon from './loading_icon.vue';
+import TimeagoTooltip from './time_ago_tooltip.vue';
+import tooltip from '../directives/tooltip';
+import UserAvatarImage from './user_avatar/user_avatar_image.vue';
 
-  /**
+/**
  * Renders header component for job and pipeline page based on UI mockups
  *
  * Used in:
  * - job show page
  * - pipeline show page
  */
-  export default {
+export default {
   components: {
-      ciIconBadge,
-      loadingIcon,
-      timeagoTooltip,
-      userAvatarImage,
+    CiIconBadge,
+    LoadingIcon,
+    TimeagoTooltip,
+    UserAvatarImage,
   },
   directives: {
     tooltip,
@@ -72,7 +72,7 @@
       this.$emit('actionClicked', action);
     },
   },
-  };
+};
 </script>
 
 <template>

app/assets/javascripts/vue_shared/components/icon.vue

 <script>
-
-  /* This is a re-usable vue component for rendering a svg sprite
+/* This is a re-usable vue component for rendering a svg sprite
   icon
 
   Sample configuration:
@@ -11,11 +10,11 @@
     css-classes="top"
   />
 
-  */
-  // only allow classes in images.scss e.g. s12
-  const validSizes = [8, 12, 16, 18, 24, 32, 48, 72];
+*/
+// only allow classes in images.scss e.g. s12
+const validSizes = [8, 12, 16, 18, 24, 32, 48, 72];
 
-  export default {
+export default {
   props: {
     name: {
       type: String,
@@ -70,7 +69,7 @@
       return this.size ? `s${this.size}` : '';
     },
   },
-  };
+};
 </script>
 
 <template>
@@ -79,7 +78,8 @@
     :width="width"
     :height="height"
     :x="x"
-    :y="y">
+    :y="y"
+  >
     <use v-bind="{ 'xlink:href':spriteHref }" />
   </svg>
 </template>

spec/javascripts/vue_shared/components/commit_spec.js

@@ -55,7 +55,6 @@ describe('Commit component', () => {
           path: '/jschatz1',
           username: 'jschatz1',
         },
-        commitIconSvg: '<svg></svg>',
       };
 
       component = mountComponent(CommitComponent, props);
@@ -82,8 +81,10 @@ describe('Commit component', () => {
       expect(component.$el.querySelector('.commit-sha').textContent).toContain(props.shortSha);
     });
 
-    it('should render the given commitIconSvg', () => {
-      expect(component.$el.querySelector('.js-commit-icon').children).toContain('svg');
+    it('should render icon for commit', () => {
+      expect(
+        component.$el.querySelector('.js-commit-icon use').getAttribute('xlink:href'),
+      ).toContain('commit');
     });
 
     describe('Given commit title and author props', () => {

spec/javascripts/vue_shared/components/expand_button_spec.js

@@ -3,10 +3,10 @@ import expandButton from '~/vue_shared/components/expand_button.vue';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
 
 describe('expand button', () => {
+  const Component = Vue.extend(expandButton);
   let vm;
 
   beforeEach(() => {
-    const Component = Vue.extend(expandButton);
     vm = mountComponent(Component, {
       slots: {
         expanded: '<p>Expanded!</p>',
@@ -22,7 +22,7 @@ describe('expand button', () => {
     expect(vm.$el.textContent.trim()).toEqual('...');
   });
 
-  it('hides expander on click', (done) => {
+  it('hides expander on click', done => {
     vm.$el.querySelector('button').click();
     vm.$nextTick(() => {
       expect(vm.$el.querySelector('button').getAttribute('style')).toEqual('display: none;');