Applying frontend feedback

Changed util classes to use Bootstrap
Added button type
Removed un-needed mutations from Vuex
Removed mutation tests
Updated snapshots
Updated activity test

ee/app/assets/javascripts/packages/details/components/activity.vue

@@ -47,7 +47,7 @@ export default {
 </script>
 
 <template>
-  <div class="append-bottom-default">
+  <div class="mb-3">
     <h3 class="gl-font-size-16">{{ __('Activity') }}</h3>
 
     <div ref="commit-info" class="info-well">
@@ -61,7 +61,8 @@ export default {
             v-gl-tooltip
             :title="$options.i18n.showCommit"
             :aria-label="$options.i18n.showCommit"
-            class="text-expander append-right-5 d-none d-sm-flex"
+            class="text-expander mr-2 d-none d-sm-flex"
+            type="button"
             @click="toggleShowDescription"
           >
             <gl-icon name="ellipsis_h" :size="12" />
@@ -76,8 +77,8 @@ export default {
           />
         </div>
 
-        <div v-if="showDescription" ref="commit-message" class="prepend-top-8 d-none d-sm-block">
-          <pre class="commit-row-description append-bottom-0 gl-pl-8">{{
+        <div v-if="showDescription" ref="commit-message" class="mt-2 d-none d-sm-block">
+          <pre class="commit-row-description mb-0 pl-2">{{
             packagePipeline.git_commit_message
           }}</pre>
         </div>
@@ -85,7 +86,7 @@ export default {
 
       <div v-if="packagePipeline" ref="pipeline-info" class="well-segment">
         <div class="d-flex align-items-center">
-          <gl-icon name="pipeline" class="append-right-8 d-none d-sm-block" />
+          <gl-icon name="pipeline" class="mr-2 d-none d-sm-block" />
 
           <gl-sprintf :message="$options.i18n.pipelineText">
             <template #link>
@@ -105,7 +106,7 @@ export default {
             <template #author
               >{{ packagePipeline.user.name }}
               <gl-avatar
-                class="prepend-left-8 d-none d-sm-block"
+                class="ml-2 d-none d-sm-block"
                 :src="packagePipeline.user.avatar_url"
                 :size="24"
             /></template>
@@ -114,7 +115,7 @@ export default {
       </div>
 
       <div class="well-segment d-flex align-items-center">
-        <gl-icon name="clock" class="append-right-8 d-none d-sm-block" />
+        <gl-icon name="clock" class="mr-2 d-none d-sm-block" />
 
         <gl-sprintf :message="$options.i18n.publishText">
           <template #timestamp>

ee/app/assets/javascripts/packages/details/store/index.js

 import Vue from 'vue';
 import Vuex from 'vuex';
-import state from './state';
 import * as getters from './getters';
-import mutations from './mutations';
 
 Vue.use(Vuex);
 
 export default (initialState = {}) =>
   new Vuex.Store({
     getters,
-    mutations,
     state: {
-      ...state(),
       ...initialState,
     },
   });

ee/app/assets/javascripts/packages/details/store/mutation_types.js

-export const TOGGLE_LOADING = 'TOGGLE_LOADING';
-export const SET_PIPELINE_ERROR = 'SET_PIPELINE_ERROR';
-export const SET_PIPELINE_INFO = 'SET_PIPELINE_INFO';

ee/app/assets/javascripts/packages/details/store/mutations.js

-import * as types from './mutation_types';
-
-export default {
-  [types.TOGGLE_LOADING](state) {
-    Object.assign(state, { isLoading: !state.isLoading });
-  },
-
-  [types.SET_PIPELINE_ERROR](state, pipelineError) {
-    Object.assign(state, { pipelineError });
-  },
-
-  [types.SET_PIPELINE_INFO](state, pipelineInfo) {
-    Object.assign(state, { pipelineInfo });
-  },
-};

ee/app/assets/javascripts/packages/details/store/state.js

 export default () => ({
   packageEntity: null,
   packageFiles: [],
-  pipelineInfo: {},
-  pipelineError: null,
-  isLoading: false,
 });

ee/spec/frontend/packages/details/components/__snapshots__/activity_spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`PackageActivity render to match the default snapshot when no pipeline 1`] = `
 <div
-  class="append-bottom-default"
+  class="mb-3"
 >
   <h3
     class="gl-font-size-16"
@@ -21,7 +21,7 @@ exports[`PackageActivity render to match the default snapshot when no pipeline 1
       class="well-segment d-flex align-items-center"
     >
       <gl-icon-stub
-        class="append-right-8 d-none d-sm-block"
+        class="mr-2 d-none d-sm-block"
         name="clock"
         size="16"
       />
@@ -36,7 +36,7 @@ exports[`PackageActivity render to match the default snapshot when no pipeline 1
 
 exports[`PackageActivity render to match the default snapshot when there is a pipeline 1`] = `
 <div
-  class="append-bottom-default"
+  class="mb-3"
 >
   <h3
     class="gl-font-size-16"
@@ -85,7 +85,7 @@ exports[`PackageActivity render to match the default snapshot when there is a pi
         class="d-flex align-items-center"
       >
         <gl-icon-stub
-          class="append-right-8 d-none d-sm-block"
+          class="mr-2 d-none d-sm-block"
           name="pipeline"
           size="16"
         />
@@ -100,7 +100,7 @@ exports[`PackageActivity render to match the default snapshot when there is a pi
       class="well-segment d-flex align-items-center"
     >
       <gl-icon-stub
-        class="append-right-8 d-none d-sm-block"
+        class="mr-2 d-none d-sm-block"
         name="clock"
         size="16"
       />

ee/spec/frontend/packages/details/components/activity_spec.js

@@ -37,6 +37,7 @@ describe('PackageActivity', () => {
 
   afterEach(() => {
     if (wrapper) wrapper.destroy();
+    wrapper = null;
   });
 
   describe('render', () => {

ee/spec/frontend/packages/details/store/mutations_spec.js

-import * as types from 'ee/packages/details/store/mutation_types';
-import mutations from 'ee/packages/details/store/mutations';
-import { mockPipelineInfo as pipelineInfo } from '../../mock_data';
-
-describe('Mutations PackageDetails Store', () => {
-  let mockState;
-
-  const defaultState = {
-    packageEntity: null,
-    packageFiles: [],
-    pipelineInfo: {},
-    pipelineError: null,
-    isLoading: false,
-  };
-
-  beforeEach(() => {
-    mockState = defaultState;
-  });
-
-  describe('set package info', () => {
-    it('should set packageInfo', () => {
-      const expectedState = { ...mockState, pipelineInfo };
-      mutations[types.SET_PIPELINE_INFO](mockState, pipelineInfo);
-
-      expect(mockState.pipelineInfo).toEqual(expectedState.pipelineInfo);
-    });
-  });
-
-  describe('set pipeline error', () => {
-    it('should set pipelineError', () => {
-      const pipelineError = 'a-pipeline-error-message';
-      const expectedState = { ...mockState, pipelineError };
-      mutations[types.SET_PIPELINE_ERROR](mockState, pipelineError);
-
-      expect(mockState.pipelineError).toEqual(expectedState.pipelineError);
-    });
-  });
-
-  describe('toggle loading', () => {
-    it('should set to true', () => {
-      const expectedState = Object.assign({}, mockState, { isLoading: true });
-      mutations[types.TOGGLE_LOADING](mockState);
-
-      expect(mockState.isLoading).toEqual(expectedState.isLoading);
-    });
-
-    it('should toggle back to false', () => {
-      const expectedState = Object.assign({}, mockState, { isLoading: false });
-      mockState.isLoading = true;
-
-      mutations[types.TOGGLE_LOADING](mockState);
-
-      expect(mockState.isLoading).toEqual(expectedState.isLoading);
-    });
-  });
-});