Add latest changes from gitlab-org/gitlab@master

5 files changed, 25 insertions, 48 deletions

diff --git a/app/assets/javascripts/ci/pipeline_editor/components/commit/commit_form.vue b/app/assets/javascripts/ci/pipeline_editor/components/commit/commit_form.vue
index 1885694187b..baf3dbfa090 100644
--- a/app/assets/javascripts/ci/pipeline_editor/components/commit/commit_form.vue
+++ b/app/assets/javascripts/ci/pipeline_editor/components/commit/commit_form.vue
@@ -108,7 +108,6 @@ export default {
       <gl-form-group
         id="commit-group"
         :label="$options.i18n.commitMessage"
-        label-cols-sm="2"
         label-for="commit-message"
       >
         <gl-form-textarea
@@ -122,7 +121,6 @@ export default {
       <gl-form-group
         id="source-branch-group"
         :label="$options.i18n.sourceBranch"
-        label-cols-sm="2"
         label-for="source-branch-field"
       >
         <gl-form-input
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue b/app/assets/javascripts/ci/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue
index 7368d1a3a91..da165413341 100644
--- a/app/assets/javascripts/ci/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue
+++ b/app/assets/javascripts/ci/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue
@@ -52,7 +52,7 @@ export default {
 };
 </script>
 <template>
-  <div class="gl-mb-4 gl-display-flex gl-flex-wrap gl-gap-3">
+  <div class="gl-display-flex gl-flex-wrap gl-gap-3">
     <gl-button
       v-if="showFileTreeToggle"
       id="file-tree-toggle"
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_editor_header.vue b/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_editor_header.vue
index ec6ee52b6b2..eecf8e42f4b 100644
--- a/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_editor_header.vue
+++ b/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_editor_header.vue
@@ -1,30 +1,11 @@
 <script>
+import { GlCard } from '@gitlab/ui';
 import PipelineStatus from './pipeline_status.vue';
 import ValidationSegment from './validation_segment.vue';
 
-const baseClasses = ['gl-p-5', 'gl-bg-gray-10', 'gl-border-solid', 'gl-border-gray-100'];
-
-const pipelineStatusClasses = [
-  ...baseClasses,
-  'gl-border-1',
-  'gl-border-b-0!',
-  'gl-rounded-top-base',
-];
-
-const validationSegmentClasses = [...baseClasses, 'gl-border-1', 'gl-rounded-base'];
-
-const validationSegmentWithPipelineStatusClasses = [
-  ...baseClasses,
-  'gl-border-1',
-  'gl-rounded-bottom-left-base',
-  'gl-rounded-bottom-right-base',
-];
-
 export default {
-  pipelineStatusClasses,
-  validationSegmentClasses,
-  validationSegmentWithPipelineStatusClasses,
   components: {
+    GlCard,
     PipelineStatus,
     ValidationSegment,
   },
@@ -47,24 +28,19 @@ export default {
     showPipelineStatus() {
       return !this.isNewCiConfigFile;
     },
-    // make sure corners are rounded correctly depending on if
-    // pipeline status is rendered
-    validationStyling() {
-      return this.showPipelineStatus
-        ? this.$options.validationSegmentWithPipelineStatusClasses
-        : this.$options.validationSegmentClasses;
-    },
   },
 };
 </script>
 <template>
-  <div class="gl-mb-5">
-    <pipeline-status
-      v-if="showPipelineStatus"
-      :commit-sha="commitSha"
-      :class="$options.pipelineStatusClasses"
-      v-on="$listeners"
-    />
-    <validation-segment :class="validationStyling" :ci-config="ciConfigData" />
-  </div>
+  <gl-card
+    class="gl-new-card gl-mb-3"
+    header-class="gl-new-card-header"
+    body-class="gl-new-card-body gl-py-4 gl-px-5"
+  >
+    <template v-if="showPipelineStatus" #header>
+      <pipeline-status :commit-sha="commitSha" v-on="$listeners" />
+    </template>
+
+    <validation-segment :ci-config="ciConfigData" />
+  </gl-card>
 </template>
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_status.vue b/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_status.vue
index 5ce3c645145..58b5c0004e0 100644
--- a/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_status.vue
+++ b/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_status.vue
@@ -138,7 +138,9 @@ export default {
 </script>
 
 <template>
-  <div class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-flex-wrap">
+  <div
+    class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-flex-wrap gl-w-full"
+  >
     <template v-if="showLoadingState">
       <div>
         <gl-loading-icon class="gl-mr-auto gl-display-inline-block" size="sm" />
@@ -146,13 +148,15 @@ export default {
       </div>
     </template>
     <template v-else-if="hasError">
-      <gl-icon class="gl-mr-auto" name="warning-solid" />
-      <span data-testid="pipeline-error-msg">{{ $options.i18n.fetchError }}</span>
+      <div>
+        <gl-icon class="gl-mr-auto" name="warning-solid" />
+        <span data-testid="pipeline-error-msg">{{ $options.i18n.fetchError }}</span>
+      </div>
     </template>
     <template v-else>
       <div class="gl-text-truncate gl-md-max-w-50p gl-mr-1">
         <a :href="status.detailsPath" class="gl-mr-auto">
-          <ci-icon :status="status" :size="16" data-testid="pipeline-status-icon" />
+          <ci-icon :status="status" :size="16" data-testid="pipeline-status-icon" class="gl-mr-2" />
         </a>
         <span class="gl-font-weight-bold">
           <gl-sprintf :message="$options.i18n.pipelineInfo">
@@ -182,9 +186,8 @@ export default {
         />
         <pipeline-editor-mini-graph v-else :pipeline="pipeline" v-on="$listeners" />
         <gl-button
-          class="gl-ml-3"
-          category="secondary"
-          variant="confirm"
+          class="gl-ml-3 gl-align-self-center"
+          size="small"
           :href="status.detailsPath"
           data-testid="pipeline-view-btn"
         >
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/header/validation_segment.vue b/app/assets/javascripts/ci/pipeline_editor/components/header/validation_segment.vue
index cc0bbeaa71b..d54ad78b3d3 100644
--- a/app/assets/javascripts/ci/pipeline_editor/components/header/validation_segment.vue
+++ b/app/assets/javascripts/ci/pipeline_editor/components/header/validation_segment.vue
@@ -113,7 +113,7 @@ export default {
     </template>
     <span v-else data-testid="validation-segment">
       <span class="gl-max-w-full">
-        <gl-icon :name="icon" />
+        <gl-icon :name="icon" class="gl-mr-2" />
         <gl-sprintf :message="message">
           <template v-if="hasLink" #link="{ content }">
             <gl-link :href="helpPath">{{ content }}</gl-link>