Pipeline Graph Structural Update: Cleanup CSS and Accessors

app/assets/javascripts/pipelines/components/graph/job_item.vue

@@ -4,7 +4,7 @@ import ActionComponent from './action_component.vue';
 import JobNameComponent from './job_name_component.vue';
 import { sprintf } from '~/locale';
 import delayedJobMixin from '~/jobs/mixins/delayed_job_mixin';
-import { accessors } from './accessors';
+import { accessValue } from './accessors';
 import { REST } from './constants';
 
 /**
@@ -79,10 +79,10 @@ export default {
       return this.dropdownLength === 1 ? 'viewport' : 'scrollParent';
     },
     detailsPath() {
-      return this.status[accessors[this.dataMethod].detailsPath];
+      return accessValue(this.dataMethod, 'detailsPath', this.status);
     },
     hasDetails() {
-      return this.status[accessors[this.dataMethod].hasDetails];
+      return accessValue(this.dataMethod, 'hasDetails', this.status);
     },
     status() {
       return this.job && this.job.status ? this.job.status : {};

app/assets/javascripts/pipelines/components/graph/stage_column_component.vue

@@ -5,7 +5,7 @@ import JobItem from './job_item.vue';
 import JobGroupDropdown from './job_group_dropdown.vue';
 import ActionComponent from './action_component.vue';
 import { GRAPHQL } from './constants';
-import { accessors } from './accessors';
+import { accessValue } from './accessors';
 
 export default {
   components: {
@@ -39,7 +39,6 @@ export default {
       default: () => ({}),
     },
   },
-  accessors,
   titleClasses: [
     'gl-font-weight-bold',
     'gl-pipeline-job-width',
@@ -56,8 +55,8 @@ export default {
     },
   },
   methods: {
-    getAccessor(property) {
-      return accessors[GRAPHQL][property];
+    getGroupId(group) {
+      return accessValue(GRAPHQL, 'groupId', group);
     },
     groupId(group) {
       return `ci-badge-${escape(group.name)}`;
@@ -87,7 +86,7 @@ export default {
       <div
         v-for="group in groups"
         :id="groupId(group)"
-        :key="group[getAccessor('groupId')]"
+        :key="getGroupId(group)"
         data-testid="stage-column-group"
         class="gl-relative gl-mb-3 gl-white-space-normal gl-pipeline-job-width"
       >

app/assets/stylesheets/page_bundles/pipeline.scss

@@ -129,17 +129,6 @@
   overflow: auto;
 }
 
-// Move to Gitlab UI
-.gl-font-weight-100 {
-  font-weight: 100;
-}
-
-.gl-active-text-decoration-none:active,
-.gl-focus-text-decoration-none:focus,
-.gl-hover-text-decoration-none:hover {
-  text-decoration: none;
-}
-
 // These are single-value classes to use with utility-class style CSS
 // but to still access this variable. Do not add other styles.
 .gl-pipeline-min-h {
@@ -150,10 +139,6 @@
   width: 186px;
 }
 
-.gl-pipeline-title-width {
-  width: 176px;
-}
-
 .gl-build-content {
   @include build-content();
 }