Use import and remove commit component from global namespacevue-commit-component-new-standards

4 files changed, 168 insertions, 175 deletions

diff --git a/app/assets/javascripts/environments/components/environment_item.js b/app/assets/javascripts/environments/components/environment_item.js
index 7f4e070b229..867428abfe9 100644
--- a/app/assets/javascripts/environments/components/environment_item.js
+++ b/app/assets/javascripts/environments/components/environment_item.js
@@ -2,7 +2,7 @@ const Vue = require('vue');
 const Timeago = require('timeago.js');
 
 require('../../lib/utils/text_utility');
-require('../../vue_shared/components/commit');
+import CommitComponent from '../../vue_shared/components/commit';
 const ActionsComponent = require('./environment_actions');
 const ExternalUrlComponent = require('./environment_external_url');
 const StopComponent = require('./environment_stop');
@@ -20,7 +20,7 @@ const timeagoInstance = new Timeago();
 module.exports = Vue.component('environment-item', {
 
   components: {
-    'commit-component': gl.CommitComponent,
+    'commit-component': CommitComponent,
     'actions-component': ActionsComponent,
     'external-url-component': ExternalUrlComponent,
     'stop-component': StopComponent,
diff --git a/app/assets/javascripts/vue_shared/components/commit.js b/app/assets/javascripts/vue_shared/components/commit.js
index 4381487b79e..cea73c33fb4 100644
--- a/app/assets/javascripts/vue_shared/components/commit.js
+++ b/app/assets/javascripts/vue_shared/components/commit.js
@@ -1,164 +1,158 @@
-/* global Vue */
-window.Vue = require('vue');
-const commitIconSvg = require('icons/_icon_commit.svg');
-
-(() => {
-  window.gl = window.gl || {};
-
-  window.gl.CommitComponent = Vue.component('commit-component', {
-
-    props: {
-      /**
-       * Indicates the existance of a tag.
-       * Used to render the correct icon, if true will render `fa-tag` icon,
-       * if false will render `fa-code-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.
-       */
-      shortSha: {
-        type: String,
-        required: false,
-        default: '',
-      },
-
-      /**
-       * If provided shows the commit tile.
-       */
-      title: {
-        type: String,
-        required: false,
-        default: '',
-      },
-
-      /**
-       * If provided renders information about the author of the commit.
-       * When provided should include:
-       * `avatar_url` to render the avatar icon
-       * `web_url` to link to user profile
-       * `username` to render alt and title tags
-       */
-      author: {
-        type: Object,
-        required: false,
-        default: () => ({}),
-      },
+import commitIconSvg from 'icons/_icon_commit.svg';
+
+export 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 `fa-code-fork` icon.
+     */
+    tag: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
 
-    computed: {
-      /**
-       * Used to verify if all the properties needed to render the commit
-       * ref section were provided.
-       *
-       * TODO: Improve this! Use lodash _.has when we have it.
-       *
-       * @returns {Boolean}
-       */
-      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.
-       *
-       * TODO: Improve this! Use lodash _.has when we have it.
-       *
-       * @returns {Boolean}
-       */
-      hasAuthor() {
-        return this.author &&
-          this.author.avatar_url &&
-          this.author.web_url &&
-          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;
-      },
+    /**
+     * 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: () => ({}),
     },
 
-    data() {
-      return { commitIconSvg };
+    /**
+     * Used to link to the commit sha.
+     */
+    commitUrl: {
+      type: String,
+      required: false,
+      default: '',
     },
 
-    template: `
-      <div class="branch-commit">
-
-        <div v-if="hasCommitRef" class="icon-container">
-          <i v-if="tag" class="fa fa-tag"></i>
-          <i v-if="!tag" class="fa fa-code-fork"></i>
-        </div>
-
-        <a v-if="hasCommitRef"
-          class="monospace branch-name"
-          :href="commitRef.ref_url">
-          {{commitRef.name}}
-        </a>
-
-        <div v-html="commitIconSvg" class="commit-icon js-commit-icon"></div>
-
-        <a class="commit-id monospace"
-          :href="commitUrl">
-          {{shortSha}}
-        </a>
-
-        <p class="commit-title">
-          <span v-if="title">
-            <a v-if="hasAuthor"
-              class="avatar-image-container"
-              :href="author.web_url">
-              <img
-                class="avatar has-tooltip s20"
-                :src="author.avatar_url"
-                :alt="userImageAltDescription"
-                :title="author.username" />
-            </a>
-
-            <a class="commit-row-message"
-              :href="commitUrl">
-              {{title}}
-            </a>
-          </span>
-          <span v-else>
-            Cant find HEAD commit for this branch
-          </span>
-        </p>
+    /**
+     * Used to show the commit short sha that links to the commit url.
+     */
+    shortSha: {
+      type: String,
+      required: false,
+      default: '',
+    },
+
+    /**
+     * If provided shows the commit tile.
+     */
+    title: {
+      type: String,
+      required: false,
+      default: '',
+    },
+
+    /**
+     * If provided renders information about the author of the commit.
+     * When provided should include:
+     * `avatar_url` to render the avatar icon
+     * `web_url` to link to user profile
+     * `username` to render alt and title tags
+     */
+    author: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+
+  computed: {
+    /**
+     * Used to verify if all the properties needed to render the commit
+     * ref section were provided.
+     *
+     * TODO: Improve this! Use lodash _.has when we have it.
+     *
+     * @returns {Boolean}
+     */
+    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.
+     *
+     * TODO: Improve this! Use lodash _.has when we have it.
+     *
+     * @returns {Boolean}
+     */
+    hasAuthor() {
+      return this.author &&
+        this.author.avatar_url &&
+        this.author.web_url &&
+        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;
+    },
+  },
+
+  data() {
+    return { commitIconSvg };
+  },
+
+  template: `
+    <div class="branch-commit">
+
+      <div v-if="hasCommitRef" class="icon-container">
+        <i v-if="tag" class="fa fa-tag"></i>
+        <i v-if="!tag" class="fa fa-code-fork"></i>
       </div>
-    `,
-  });
-})();
+
+      <a v-if="hasCommitRef"
+        class="monospace branch-name"
+        :href="commitRef.ref_url">
+        {{commitRef.name}}
+      </a>
+
+      <div v-html="commitIconSvg" class="commit-icon js-commit-icon"></div>
+
+      <a class="commit-id monospace"
+        :href="commitUrl">
+        {{shortSha}}
+      </a>
+
+      <p class="commit-title">
+        <span v-if="title">
+          <a v-if="hasAuthor"
+            class="avatar-image-container"
+            :href="author.web_url">
+            <img
+              class="avatar has-tooltip s20"
+              :src="author.avatar_url"
+              :alt="userImageAltDescription"
+              :title="author.username" />
+          </a>
+
+          <a class="commit-row-message"
+            :href="commitUrl">
+            {{title}}
+          </a>
+        </span>
+        <span v-else>
+          Cant find HEAD commit for this branch
+        </span>
+      </p>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/vue_shared/components/pipelines_table_row.js b/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
index e5e88186a85..d4b957ef4c9 100644
--- a/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
+++ b/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
@@ -1,12 +1,12 @@
 /* eslint-disable no-param-reassign */
 /* global Vue */
+import CommitComponent from './commit';
 
 require('../../vue_pipelines_index/status');
 require('../../vue_pipelines_index/pipeline_url');
 require('../../vue_pipelines_index/stage');
 require('../../vue_pipelines_index/pipeline_actions');
 require('../../vue_pipelines_index/time_ago');
-require('./commit');
 /**
  * Pipeline table row.
  *
@@ -28,7 +28,7 @@ require('./commit');
     },
 
     components: {
-      'commit-component': gl.CommitComponent,
+      'commit-component': CommitComponent,
       'pipeline-actions': gl.VuePipelineActions,
       'dropdown-stage': gl.VueStage,
       'pipeline-url': gl.VuePipelineUrl,
diff --git a/spec/javascripts/vue_shared/components/commit_spec.js b/spec/javascripts/vue_shared/components/commit_spec.js
index 15ab10b9b69..53d2dfa82a5 100644
--- a/spec/javascripts/vue_shared/components/commit_spec.js
+++ b/spec/javascripts/vue_shared/components/commit_spec.js
@@ -1,13 +1,17 @@
-require('~/vue_shared/components/commit');
+import commitComp from '~/vue_shared/components/commit';
+import Vue from 'vue';
 
 describe('Commit component', () => {
   let props;
   let component;
+  let CommitComponent;
+
+  beforeEach(() => {
+    CommitComponent = Vue.extend(commitComp);
+  });
 
   it('should render a code-fork icon if it does not represent a tag', () => {
-    setFixtures('<div class="test-commit-container"></div>');
-    component = new window.gl.CommitComponent({
-      el: document.querySelector('.test-commit-container'),
+    component = new CommitComponent({
       propsData: {
         tag: false,
         commitRef: {
@@ -23,15 +27,13 @@ describe('Commit component', () => {
           username: 'jschatz1',
         },
       },
-    });
+    }).$mount();
 
     expect(component.$el.querySelector('.icon-container i').classList).toContain('fa-code-fork');
   });
 
   describe('Given all the props', () => {
     beforeEach(() => {
-      setFixtures('<div class="test-commit-container"></div>');
-
       props = {
         tag: true,
         commitRef: {
@@ -49,10 +51,9 @@ describe('Commit component', () => {
         commitIconSvg: '<svg></svg>',
       };
 
-      component = new window.gl.CommitComponent({
-        el: document.querySelector('.test-commit-container'),
+      component = new CommitComponent({
         propsData: props,
-      });
+      }).$mount();
     });
 
     it('should render a tag icon if it represents a tag', () => {
@@ -105,7 +106,6 @@ describe('Commit component', () => {
 
   describe('When commit title is not provided', () => {
     it('should render default message', () => {
-      setFixtures('<div class="test-commit-container"></div>');
       props = {
         tag: false,
         commitRef: {
@@ -118,10 +118,9 @@ describe('Commit component', () => {
         author: {},
       };
 
-      component = new window.gl.CommitComponent({
-        el: document.querySelector('.test-commit-container'),
+      component = new CommitComponent({
         propsData: props,
-      });
+      }).$mount();
 
       expect(
         component.$el.querySelector('.commit-title span').textContent,