Merge branch '27774-ide-scss-utility-classes' into 'master'

ide.scss: Use utility classes where possible

See merge request gitlab-org/gitlab!24264

app/assets/javascripts/ide/components/jobs/detail/description.vue

@@ -26,7 +26,7 @@ export default {
     <ci-icon :status="job.status" :borderless="true" :size="24" class="d-flex" />
     <span class="prepend-left-8">
       {{ job.name }}
-      <a :href="job.path" target="_blank" class="ide-external-link">
+      <a :href="job.path" target="_blank" class="ide-external-link position-relative">
         {{ jobId }} <icon :size="12" name="external-link" />
       </a>
     </span>

app/assets/javascripts/ide/components/jobs/stage.vue

@@ -71,7 +71,7 @@ export default {
         v-tooltip="showTooltip"
         :title="showTooltip ? stage.name : null"
         data-container="body"
-        class="prepend-left-8 ide-stage-title"
+        class="prepend-left-8 text-truncate"
       >
         {{ stage.name }}
       </strong>
@@ -80,7 +80,7 @@ export default {
       </div>
       <icon :name="collapseIcon" class="ide-stage-collapse-icon" />
     </div>
-    <div v-show="!stage.isCollapsed" ref="jobList" class="card-body">
+    <div v-show="!stage.isCollapsed" ref="jobList" class="card-body p-0">
       <gl-loading-icon v-if="showLoadingIcon" />
       <template v-else>
         <item v-for="job in stage.jobs" :key="job.id" :job="job" @clickViewLog="clickViewLog" />

app/assets/javascripts/ide/components/new_dropdown/index.vue

@@ -51,7 +51,7 @@ export default {
 </script>
 
 <template>
-  <div class="ide-new-btn">
+  <div class="ide-new-btn d-none">
     <div
       :class="{
         show: isOpen,

app/assets/javascripts/ide/components/pipelines/list.vue

@@ -62,7 +62,11 @@ export default {
         <ci-icon :status="latestPipeline.details.status" :size="24" />
         <span class="prepend-left-8">
           <strong> {{ __('Pipeline') }} </strong>
-          <a :href="latestPipeline.path" target="_blank" class="ide-external-link">
+          <a
+            :href="latestPipeline.path"
+            target="_blank"
+            class="ide-external-link position-relative"
+          >
             #{{ latestPipeline.id }} <icon :size="12" name="external-link" />
           </a>
         </span>

app/assets/javascripts/ide/components/repo_editor.vue

@@ -274,7 +274,7 @@ export default {
 <template>
   <div id="ide" class="blob-viewer-container blob-editor-container">
     <div class="ide-mode-tabs clearfix">
-      <ul v-if="!shouldHideEditor && isEditModeActive" class="nav-links float-left">
+      <ul v-if="!shouldHideEditor && isEditModeActive" class="nav-links float-left border-bottom-0">
         <li :class="editTabCSS">
           <a
             href="javascript:void(0);"

app/assets/stylesheets/page_bundles/ide.scss

@@ -25,10 +25,6 @@ $ide-commit-header-height: 48px;
   @include str-truncated(250px);
 }
 
-.editable-mode {
-  display: inline-block;
-}
-
 .ide-view {
   position: relative;
   margin-top: 0;
@@ -344,13 +340,9 @@ $ide-commit-header-height: 48px;
 .ide-mode-tabs {
   border-bottom: 1px solid $white-dark;
 
-  .nav-links {
-    border-bottom: 0;
-
-    li a {
-      padding: $gl-padding-8 $gl-padding;
-      line-height: $gl-btn-line-height;
-    }
+  li a {
+    padding: $gl-padding-8 $gl-padding;
+    line-height: $gl-btn-line-height;
   }
 }
 
@@ -1025,8 +1017,6 @@ $ide-commit-header-height: 48px;
 }
 
 .ide-external-link {
-  position: relative;
-
   svg {
     display: none;
     position: absolute;
@@ -1129,22 +1119,12 @@ $ide-commit-header-height: 48px;
       align-items: center;
     }
   }
-
-  .card-body {
-    padding: 0;
-  }
 }
 
 .ide-stage-collapse-icon {
   margin: auto 0 auto auto;
 }
 
-.ide-stage-title {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 .ide-job-header {
   min-height: 60px;
 }
@@ -1244,8 +1224,6 @@ $ide-commit-header-height: 48px;
 }
 
 .ide-new-btn {
-  display: none;
-
   .btn {
     padding: 2px 5px;
   }

spec/frontend/ide/components/jobs/__snapshots__/stage_spec.js.snap

@@ -14,7 +14,7 @@ exports[`IDE pipeline stage renders stage details & icon 1`] = `
     />
      
     <strong
-      class="prepend-left-8 ide-stage-title"
+      class="prepend-left-8 text-truncate"
       data-container="body"
       data-original-title=""
       title=""
@@ -42,7 +42,7 @@ exports[`IDE pipeline stage renders stage details & icon 1`] = `
   </div>
    
   <div
-    class="card-body"
+    class="card-body p-0"
   >
     <item-stub
       job="[object Object]"