Merge branch 'fix-style-lint-errors-pipeline' into 'master'

Fix style-lint errors and warnings for pipeline.scss

See merge request gitlab-org/gitlab-ee!16145

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

@@ -20,6 +20,9 @@ export default {
         <stage-column-component
           v-for="(stage, index) in graph"
           :key="stage.name"
+          :class="{
+            'append-right-48': shouldAddRightMargin(index),
+          }"
           :title="capitalizeStageName(stage.name)"
           :groups="stage.groups"
           :stage-connector-class="stageConnectorClass(index, stage)"

app/assets/javascripts/pipelines/mixins/graph_component_mixin.js

@@ -40,5 +40,15 @@ export default {
     refreshPipelineGraph() {
       this.$emit('refreshPipelineGraph');
     },
+    /**
+     * CSS class is applied:
+     *  - if pipeline graph contains only one stage column component
+     *
+     * @param {number} index
+     * @returns {boolean}
+     */
+    shouldAddRightMargin(index) {
+      return !(index === this.graph.length - 1);
+    },
   },
 };

app/assets/stylesheets/framework/common.scss

@@ -395,6 +395,7 @@ img.emoji {
 .prepend-left-default { margin-left: $gl-padding; }
 .prepend-left-20 { margin-left: 20px; }
 .prepend-left-32 { margin-left: 32px; }
+.prepend-left-64 { margin-left: 64px; }
 .append-right-4 { margin-right: 4px; }
 .append-right-5 { margin-right: 5px; }
 .append-right-8 { margin-right: 8px; }
@@ -402,6 +403,8 @@ img.emoji {
 .append-right-15 { margin-right: 15px; }
 .append-right-default { margin-right: $gl-padding; }
 .append-right-20 { margin-right: 20px; }
+.append-right-32 { margin-right: 32px; }
+.append-right-48 { margin-right: 48px; }
 .prepend-right-32 { margin-right: 32px; }
 .append-bottom-0 { margin-bottom: 0; }
 .append-bottom-4 { margin-bottom: $gl-padding-4; }

app/assets/stylesheets/pages/pipelines.scss

@@ -476,10 +476,6 @@
     display: inline-block;
     vertical-align: top;
 
-    &:not(:last-child) {
-      margin-right: 44px;
-    }
-
     &.left-margin {
       &:not(:first-child) {
         margin-left: 44px;

ee/app/assets/javascripts/pipelines/components/graph/graph_component.vue

@@ -132,7 +132,7 @@ export default {
       <ul
         v-if="!isLoading"
         :class="{
-          'has-linked-pipelines': hasTriggered || hasTriggeredBy,
+          'inline js-has-linked-pipelines': hasTriggered || hasTriggeredBy,
         }"
         class="stage-column-list align-top"
       >
@@ -140,9 +140,10 @@ export default {
           v-for="(stage, index) in graph"
           :key="stage.name"
           :class="{
-            'has-upstream': index === 0 && hasTriggeredBy,
+            'has-upstream prepend-left-64': index === 0 && hasTriggeredBy,
             'has-downstream': index === graph.length - 1 && hasTriggered,
             'has-only-one-job': hasOnlyOneJob(stage),
+            'append-right-46': shouldAddRightMargin(index),
           }"
           :title="capitalizeStageName(stage.name)"
           :groups="stage.groups"

ee/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue

@@ -52,8 +52,12 @@ export default {
       @click="onClickLinkedPipeline"
     >
       <gl-loading-icon v-if="pipeline.isLoading" class="js-linked-pipeline-loading d-inline" />
-      <ci-status v-else :status="pipelineStatus" class="js-linked-pipeline-status" />
-
+      <ci-status
+        v-else
+        :status="pipelineStatus"
+        css-classes="position-top-0"
+        class="js-linked-pipeline-status"
+      />
       <span class="str-truncated align-bottom"> {{ projectName }} &#8226; #{{ pipeline.id }} </span>
     </gl-button>
   </li>

ee/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue

@@ -21,7 +21,11 @@ export default {
   },
   computed: {
     columnClass() {
-      return `graph-position-${this.graphPosition}`;
+      const positionValues = {
+        right: 'prepend-left-64',
+        left: 'append-right-32',
+      };
+      return `graph-position-${this.graphPosition} ${positionValues[this.graphPosition]}`;
     },
   },
 };

ee/app/assets/javascripts/vue_shared/components/linked_pipelines_mini_list.vue

@@ -86,7 +86,7 @@ export default {
       'is-upstream': isUpstream,
       'is-downstream': isDownstream,
     }"
-    class="linked-pipeline-mini-list"
+    class="linked-pipeline-mini-list inline-block"
   >
     <icon v-if="isDownstream" class="arrow-icon" name="long-arrow" />
 

ee/app/assets/stylesheets/pages/pipelines.scss

 .linked-pipeline-mini-list {
-  display: inline-block;
-
   &.is-downstream {
     margin-left: -4px;
     margin-right: 4px;
@@ -94,10 +92,6 @@
   }
 }
 
-.has-linked-pipelines.stage-column-list {
-  display: inline-block;
-}
-
 .upstream-pipeline {
   margin-right: 84px;
 }
@@ -169,17 +163,11 @@
       @include build-content(0);
       text-align: inherit;
       min-height: 42px;
-
-      svg {
-        top: 0;
-      }
     }
   }
 }
 
 .stage-column.has-upstream {
-  margin-left: 60px;
-
   .left-connector {
     @include flat-connector-before(60px);
   }

ee/spec/javascripts/pipelines/graph/graph_component_spec.js

@@ -76,8 +76,8 @@ describe('graph component', () => {
         expect(firstStageColumnElement.classList.contains('left-margin')).toEqual(true);
       });
 
-      it('should include the has-linked-pipelines flag', () => {
-        expect(component.$el.querySelector('.has-linked-pipelines')).not.toBeNull();
+      it('should include the js-has-linked-pipelines flag', () => {
+        expect(component.$el.querySelector('.js-has-linked-pipelines')).not.toBeNull();
       });
     });