Merge branch 'bootstrap4' into 'master'

Upgrade to Bootstrap 4

Closes #45185 and #46710

See merge request gitlab-org/gitlab-ce!18232

8 files changed, 15 insertions, 14 deletions

diff --git a/app/assets/javascripts/pipelines/components/blank_state.vue b/app/assets/javascripts/pipelines/components/blank_state.vue
index 8d3d6223d7b..f3219b8291c 100644
--- a/app/assets/javascripts/pipelines/components/blank_state.vue
+++ b/app/assets/javascripts/pipelines/components/blank_state.vue
@@ -17,13 +17,13 @@
 
 <template>
   <div class="row empty-state">
-    <div class="col-xs-12">
+    <div class="col-12">
       <div class="svg-content">
         <img :src="svgPath" />
       </div>
     </div>
 
-    <div class="col-xs-12 text-center">
+    <div class="col-12 text-center">
       <div class="text-content">
         <h4>{{ message }}</h4>
       </div>
diff --git a/app/assets/javascripts/pipelines/components/empty_state.vue b/app/assets/javascripts/pipelines/components/empty_state.vue
index 6083421073e..50c27bed9fd 100644
--- a/app/assets/javascripts/pipelines/components/empty_state.vue
+++ b/app/assets/javascripts/pipelines/components/empty_state.vue
@@ -19,13 +19,13 @@
 </script>
 <template>
   <div class="row empty-state js-empty-state">
-    <div class="col-xs-12">
+    <div class="col-12">
       <div class="svg-content svg-250">
         <img :src="emptyStateSvgPath" />
       </div>
     </div>
 
-    <div class="col-xs-12">
+    <div class="col-12">
       <div class="text-content">
 
         <template v-if="canSetCi">
diff --git a/app/assets/javascripts/pipelines/components/graph/job_component.vue b/app/assets/javascripts/pipelines/components/graph/job_component.vue
index 27b938c4985..dc16d395bcb 100644
--- a/app/assets/javascripts/pipelines/components/graph/job_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/job_component.vue
@@ -96,6 +96,7 @@ export default {
       :class="cssClassJobName"
       data-container="body"
       data-html="true"
+      data-boundary="viewport"
       class="js-pipeline-graph-job-link"
     >
 
diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipeline_url.vue
index ceb4d9ca604..4d965733f95 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_url.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_url.vue
@@ -46,7 +46,7 @@
   };
 </script>
 <template>
-  <div class="table-section section-15 hidden-xs hidden-sm pipeline-tags">
+  <div class="table-section section-15 d-none d-sm-none d-md-block pipeline-tags">
     <a
       :href="pipeline.path"
       class="js-pipeline-url-link">
@@ -69,35 +69,35 @@
       <span
         v-if="pipeline.flags.latest"
         v-tooltip
-        class="js-pipeline-url-latest label label-success"
+        class="js-pipeline-url-latest badge badge-success"
         title="Latest pipeline for this branch">
         latest
       </span>
       <span
         v-if="pipeline.flags.yaml_errors"
         v-tooltip
-        class="js-pipeline-url-yaml label label-danger"
+        class="js-pipeline-url-yaml badge badge-danger"
         :title="pipeline.yaml_errors">
         yaml invalid
       </span>
       <span
         v-if="pipeline.flags.failure_reason"
         v-tooltip
-        class="js-pipeline-url-failure label label-danger"
+        class="js-pipeline-url-failure badge badge-danger"
         :title="pipeline.failure_reason">
         error
       </span>
       <a
         v-if="pipeline.flags.auto_devops"
         tabindex="0"
-        class="js-pipeline-url-autodevops label label-info autodevops-badge"
+        class="js-pipeline-url-autodevops badge badge-info autodevops-badge"
         v-popover="popoverOptions"
         role="button">
         Auto DevOps
       </a>
       <span
         v-if="pipeline.flags.stuck"
-        class="js-pipeline-url-stuck label label-warning">
+        class="js-pipeline-url-stuck badge badge-warning">
         stuck
       </span>
     </div>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_actions.vue b/app/assets/javascripts/pipelines/components/pipelines_actions.vue
index 3297af7bde4..e9bc3cf14ca 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_actions.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_actions.vue
@@ -63,7 +63,7 @@
       <loading-icon v-if="isLoading" />
     </button>
 
-    <ul class="dropdown-menu dropdown-menu-align-right">
+    <ul class="dropdown-menu dropdown-menu-right">
       <li
         v-for="(action, i) in actions"
         :key="i"
diff --git a/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue b/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
index 1b9e0f917a4..31fcc9dd412 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
@@ -37,7 +37,7 @@
       >
       </i>
     </button>
-    <ul class="dropdown-menu dropdown-menu-align-right">
+    <ul class="dropdown-menu dropdown-menu-right">
       <li
         v-for="(artifact, i) in artifacts"
         :key="i">
diff --git a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
index b99246a92d0..a3c17479e6f 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
@@ -331,7 +331,7 @@
 
         <pipelines-artifacts-component
           v-if="pipeline.details.artifacts.length"
-          class="hidden-xs hidden-sm"
+          class="d-none d-sm-none d-md-block"
           :artifacts="pipeline.details.artifacts"
         />
 
diff --git a/app/assets/javascripts/pipelines/components/time_ago.vue b/app/assets/javascripts/pipelines/components/time_ago.vue
index cd54d26c9d3..79dbdca4010 100644
--- a/app/assets/javascripts/pipelines/components/time_ago.vue
+++ b/app/assets/javascripts/pipelines/components/time_ago.vue
@@ -75,7 +75,7 @@
       </p>
 
       <p
-        class="finished-at hidden-xs hidden-sm"
+        class="finished-at d-none d-sm-none d-md-block"
         v-if="hasFinishedTime"
       >