Merge branch '59903-env-css' into 'master'

Fixes stylelint warnings in environments

Closes #59903

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

app/assets/javascripts/environments/components/confirm_rollback_modal.vue

@@ -50,7 +50,7 @@ export default {
     },
 
     modalText() {
-      const linkStart = `<a class="commit-sha" href="${_.escape(this.commitUrl)}">`;
+      const linkStart = `<a class="commit-sha mr-0" href="${_.escape(this.commitUrl)}">`;
       const commitId = _.escape(this.commitShortSha);
       const linkEnd = '</a>';
       const name = _.escape(this.name);

app/assets/javascripts/environments/components/environment_item.vue

@@ -504,22 +504,28 @@ export default {
       class="table-section section-10 deployment-column d-none d-sm-none d-md-block"
       role="gridcell"
     >
-      <span v-if="shouldRenderDeploymentID"> {{ deploymentInternalId }} </span>
+      <span v-if="shouldRenderDeploymentID" class="text-break-word">
+        {{ deploymentInternalId }}
+      </span>
 
-      <span v-if="!model.isFolder && deploymentHasUser">
+      <span v-if="!model.isFolder && deploymentHasUser" class="text-break-word">
         by
         <user-avatar-link
           :link-href="deploymentUser.web_url"
           :img-src="deploymentUser.avatar_url"
           :img-alt="userImageAltDescription"
           :tooltip-text="deploymentUser.username"
-          class="js-deploy-user-container"
+          class="js-deploy-user-container float-none"
         />
       </span>
     </div>
 
     <div class="table-section section-15 d-none d-sm-none d-md-block" role="gridcell">
-      <a v-if="shouldRenderBuildName" :href="buildPath" class="build-link flex-truncate-parent">
+      <a
+        v-if="shouldRenderBuildName"
+        :href="buildPath"
+        class="build-link cgray flex-truncate-parent"
+      >
         <span class="flex-truncate-child">{{ buildName }}</span>
       </a>
     </div>

app/assets/javascripts/environments/components/environment_rollback.vue

@@ -72,10 +72,9 @@ export default {
   <gl-button
     v-gl-tooltip
     v-gl-modal.confirm-rollback-modal
-    variant="secondary"
     :disabled="isLoading"
     :title="title"
-    class="d-none d-md-block"
+    class="d-none d-md-block text-secondary"
     @click="onClick"
   >
     <icon v-if="isLastDeployment" name="repeat" /> <icon v-else name="redo" />

app/assets/javascripts/environments/components/environment_terminal_button.vue

@@ -39,7 +39,7 @@ export default {
     :aria-label="title"
     :href="terminalPath"
     :class="{ disabled: disabled }"
-    class="btn terminal-button d-none d-sm-none d-md-block"
+    class="btn terminal-button d-none d-sm-none d-md-block text-secondary"
   >
     <icon name="terminal" />
   </a>

app/assets/javascripts/vue_shared/components/commit.vue

@@ -162,7 +162,7 @@ export default {
     </template>
     <icon name="commit" class="commit-icon js-commit-icon" />
 
-    <gl-link :href="commitUrl" class="commit-sha"> {{ shortSha }} </gl-link>
+    <gl-link :href="commitUrl" class="commit-sha mr-0"> {{ shortSha }} </gl-link>
 
     <div class="commit-title flex-truncate-parent">
       <span v-if="title" class="flex-truncate-child">

app/assets/stylesheets/pages/environments.scss

@@ -12,34 +12,6 @@
 
 .environments-container {
   .ci-table {
-    .deployment-column {
-      > span {
-        word-break: break-all;
-      }
-
-      .avatar {
-        float: none;
-      }
-    }
-
-    .btn-group {
-      > .btn:not(.btn-danger) {
-        color: $gl-text-color-secondary;
-      }
-
-      svg path {
-        fill: $gl-text-color-secondary;
-      }
-
-      .dropdown {
-        outline: none;
-      }
-    }
-
-    .btn .text-center {
-      display: inline;
-    }
-
     .commit-title {
       margin: 0;
     }
@@ -49,47 +21,16 @@
       color: $gl-text-color-secondary;
     }
 
-    .dropdown-menu {
-      .fa {
-        margin-right: 6px;
-        color: $gl-text-color-secondary;
-      }
-    }
-
     .build-link,
     .ref-name {
       color: $gl-text-color;
     }
 
-    .stop-env-link,
-    .external-url {
-      color: $gl-text-color-secondary;
-
-      .stop-env-icon {
-        font-size: 14px;
-      }
-    }
-
-    .deployment .build-column {
-      .build-link {
-        color: $gl-text-color;
-      }
-
-      .avatar {
-        float: none;
-        margin-right: 0;
-      }
-    }
-
     .folder-icon {
       margin-right: 3px;
       color: $gl-text-color-secondary;
       display: inline-block;
       vertical-align: text-top;
-
-      .fa:nth-child(1) {
-        margin-right: 3px;
-      }
     }
 
     .folder-name {
@@ -103,12 +44,6 @@
       text-align: center;
     }
 
-    .branch-commit {
-      .commit-sha {
-        margin-right: 0;
-      }
-    }
-
     .no-btn {
       border: 0;
       background: none;
@@ -168,11 +103,6 @@
   opacity: 0.25;
 }
 
-.prometheus-graph-overlay {
-  fill: none;
-  opacity: 0;
-  pointer-events: all;
-}
 
 .rect-text-metric {
   fill: $white-light;
@@ -203,276 +133,10 @@
   stroke: $gray-darkest;
 }
 
-.prometheus-graphs {
-  .dropdowns {
-    .dropdown-menu-toggle {
-      svg {
-        position: absolute;
-        right: 5%;
-        top: 25%;
-      }
-    }
-
-    .dropdown-menu-toggle,
-    .dropdown-menu {
-      width: 240px;
-    }
-  }
-}
-
 .environments-actions {
   .external-url,
   .monitoring-url,
-  .terminal-button,
-  .stop-env-link {
+  .terminal-button {
     width: 38px;
   }
 }
-
-.prometheus-panel {
-  margin-top: 20px;
-}
-
-.prometheus-graph-group {
-  display: flex;
-  flex-wrap: wrap;
-  padding: $gl-padding / 2;
-}
-
-.prometheus-graph {
-  padding: $gl-padding / 2;
-}
-
-.prometheus-graph-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: $gl-padding-8;
-
-  h5 {
-    font-size: $gl-font-size-large;
-    margin: 0;
-  }
-}
-
-.prometheus-graph-cursor {
-  position: absolute;
-  background: $gray-600;
-  width: 1px;
-}
-
-.prometheus-graph-flag {
-  display: block;
-  min-width: 160px;
-  border: 0;
-  box-shadow: 0 1px 4px 0 $black-transparent;
-
-  h5 {
-    padding: 0;
-    margin: 0;
-    font-size: 14px;
-    line-height: 1.2;
-  }
-
-  .deploy-meta-content {
-    border-bottom: 1px solid $white-dark;
-
-    svg {
-      height: 15px;
-      vertical-align: bottom;
-    }
-  }
-
-  &.popover {
-    padding: 0;
-
-    &.left {
-      left: auto;
-      right: 0;
-      margin-right: 10px;
-
-      > .arrow {
-        right: -14px;
-        border-left-color: $border-color;
-      }
-
-      > .arrow::after {
-        border-top: 6px solid transparent;
-        border-bottom: 6px solid transparent;
-        border-left: 4px solid $gray-50;
-      }
-
-      .arrow-shadow {
-        right: -3px;
-        box-shadow: 1px 0 9px 0 $black-transparent;
-      }
-    }
-
-    &.right {
-      left: 0;
-      right: auto;
-      margin-left: 10px;
-
-      > .arrow {
-        left: -7px;
-        border-right-color: $border-color;
-      }
-
-      > .arrow::after {
-        border-top: 6px solid transparent;
-        border-bottom: 6px solid transparent;
-        border-right: 4px solid $gray-50;
-      }
-
-      .arrow-shadow {
-        left: -3px;
-        box-shadow: 1px 0 8px 0 $black-transparent;
-      }
-    }
-
-    > .arrow {
-      top: 10px;
-      margin: 0;
-    }
-
-    .arrow-shadow {
-      content: '';
-      position: absolute;
-      width: 7px;
-      height: 7px;
-      background-color: transparent;
-      transform: rotate(45deg);
-      top: 13px;
-    }
-
-    > .popover-title,
-    > .popover-content,
-    > .popover-header,
-    > .popover-body {
-      padding: 8px;
-      font-size: 12px;
-      white-space: nowrap;
-      position: relative;
-    }
-
-    > .popover-title {
-      background-color: $gray-50;
-      border-radius: $border-radius-default $border-radius-default 0 0;
-    }
-  }
-
-  strong {
-    font-weight: 600;
-  }
-}
-
-.prometheus-table {
-  border-collapse: collapse;
-  padding: 0;
-  margin: 0;
-
-  td {
-    vertical-align: middle;
-
-    + td {
-      padding-left: 8px;
-      vertical-align: top;
-    }
-  }
-
-  .legend-metric-title {
-    font-size: 12px;
-    vertical-align: middle;
-  }
-}
-
-.prometheus-svg-container {
-  position: relative;
-  height: 0;
-  width: 100%;
-  padding: 0;
-  padding-bottom: 100%;
-
-  .text-metric-usage {
-    fill: $black;
-    font-weight: $gl-font-weight-normal;
-    font-size: 12px;
-  }
-
-  > svg {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    left: 0;
-    top: 0;
-
-    text {
-      fill: $gl-text-color;
-      stroke-width: 0;
-    }
-
-    .text-metric-bold {
-      font-weight: $gl-font-weight-bold;
-    }
-
-    .label-axis-text {
-      fill: $black;
-      font-weight: $gl-font-weight-normal;
-      font-size: 10px;
-    }
-
-    .legend-axis-text {
-      fill: $black;
-    }
-
-    .tick {
-      > line {
-        stroke: $gray-darker;
-      }
-
-      > text {
-        fill: $gray-600;
-        font-size: 10px;
-      }
-    }
-
-    .y-label-text,
-    .x-label-text {
-      fill: $gray-darkest;
-    }
-
-    .axis-tick {
-      stroke: $gray-darker;
-    }
-
-    .deploy-info-text {
-      dominant-baseline: text-before-edge;
-      font-size: 12px;
-    }
-
-    .deploy-info-text-link {
-      font-family: $monospace-font;
-      fill: $blue-600;
-
-      &:hover {
-        fill: $blue-800;
-      }
-    }
-
-    @include media-breakpoint-down(sm) {
-      .label-axis-text,
-      .text-metric-usage,
-      .legend-axis-text {
-        font-size: 8px;
-      }
-
-      .tick > text {
-        font-size: 8px;
-      }
-    }
-  }
-}
-
-.prometheus-table-row-highlight {
-  background-color: $gray-100;
-}

app/assets/stylesheets/pages/prometheus.scss

+.prometheus-graphs {
+  .dropdowns {
+    .dropdown-menu-toggle {
+      svg {
+        position: absolute;
+        right: 5%;
+        top: 25%;
+      }
+    }
+
+    .dropdown-menu-toggle,
+    .dropdown-menu {
+      width: 240px;
+    }
+  }
+}
+
+.prometheus-panel {
+  margin-top: 20px;
+}
+
+.prometheus-graph-group {
+  display: flex;
+  flex-wrap: wrap;
+  padding: $gl-padding / 2;
+}
+
+.prometheus-graph {
+  padding: $gl-padding / 2;
+}
+
+.prometheus-graph-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: $gl-padding-8;
+
+  h5 {
+    font-size: $gl-font-size-large;
+    margin: 0;
+  }
+}
+
+.prometheus-graph-cursor {
+  position: absolute;
+  background: $gray-600;
+  width: 1px;
+}
+
+.prometheus-graph-flag {
+  display: block;
+  min-width: 160px;
+  border: 0;
+  box-shadow: 0 1px 4px 0 $black-transparent;
+
+  h5 {
+    padding: 0;
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.2;
+  }
+
+  .deploy-meta-content {
+    border-bottom: 1px solid $white-dark;
+
+    svg {
+      height: 15px;
+      vertical-align: bottom;
+    }
+  }
+
+  &.popover {
+    padding: 0;
+
+    &.left {
+      left: auto;
+      right: 0;
+      margin-right: 10px;
+
+      > .arrow {
+        right: -14px;
+        border-left-color: $border-color;
+      }
+
+      > .arrow::after {
+        border-top: 6px solid transparent;
+        border-bottom: 6px solid transparent;
+        border-left: 4px solid $gray-50;
+      }
+
+      .arrow-shadow {
+        right: -3px;
+        box-shadow: 1px 0 9px 0 $black-transparent;
+      }
+    }
+
+    &.right {
+      left: 0;
+      right: auto;
+      margin-left: 10px;
+
+      > .arrow {
+        left: -7px;
+        border-right-color: $border-color;
+      }
+
+      > .arrow::after {
+        border-top: 6px solid transparent;
+        border-bottom: 6px solid transparent;
+        border-right: 4px solid $gray-50;
+      }
+
+      .arrow-shadow {
+        left: -3px;
+        box-shadow: 1px 0 8px 0 $black-transparent;
+      }
+    }
+
+    > .arrow {
+      top: 10px;
+      margin: 0;
+    }
+
+    .arrow-shadow {
+      content: '';
+      position: absolute;
+      width: 7px;
+      height: 7px;
+      background-color: transparent;
+      transform: rotate(45deg);
+      top: 13px;
+    }
+
+    > .popover-title,
+    > .popover-content,
+    > .popover-header,
+    > .popover-body {
+      padding: 8px;
+      font-size: 12px;
+      white-space: nowrap;
+      position: relative;
+    }
+
+    > .popover-title {
+      background-color: $gray-50;
+      border-radius: $border-radius-default $border-radius-default 0 0;
+    }
+  }
+
+  strong {
+    font-weight: 600;
+  }
+}
+
+.prometheus-table {
+  border-collapse: collapse;
+  padding: 0;
+  margin: 0;
+
+  td {
+    vertical-align: middle;
+
+    + td {
+      padding-left: 8px;
+      vertical-align: top;
+    }
+  }
+
+  .legend-metric-title {
+    font-size: 12px;
+    vertical-align: middle;
+  }
+}
+
+.prometheus-svg-container {
+  position: relative;
+  height: 0;
+  width: 100%;
+  padding: 0;
+  padding-bottom: 100%;
+
+  .text-metric-usage {
+    fill: $black;
+    font-weight: $gl-font-weight-normal;
+    font-size: 12px;
+  }
+
+  > svg {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    left: 0;
+    top: 0;
+
+    text {
+      fill: $gl-text-color;
+      stroke-width: 0;
+    }
+
+    .text-metric-bold {
+      font-weight: $gl-font-weight-bold;
+    }
+
+    .label-axis-text {
+      fill: $black;
+      font-weight: $gl-font-weight-normal;
+      font-size: 10px;
+    }
+
+    .legend-axis-text {
+      fill: $black;
+    }
+
+    .tick {
+      > line {
+        stroke: $gray-darker;
+      }
+
+      > text {
+        fill: $gray-600;
+        font-size: 10px;
+      }
+    }
+
+    .y-label-text,
+    .x-label-text {
+      fill: $gray-darkest;
+    }
+
+    .axis-tick {
+      stroke: $gray-darker;
+    }
+
+    .deploy-info-text {
+      dominant-baseline: text-before-edge;
+      font-size: 12px;
+    }
+
+    .deploy-info-text-link {
+      font-family: $monospace-font;
+      fill: $blue-600;
+
+      &:hover {
+        fill: $blue-800;
+      }
+    }
+
+    @include media-breakpoint-down(sm) {
+      .label-axis-text,
+      .text-metric-usage,
+      .legend-axis-text {
+        font-size: 8px;
+      }
+
+      .tick > text {
+        font-size: 8px;
+      }
+    }
+  }
+}
+
+.prometheus-table-row-highlight {
+  background-color: $gray-100;
+}
+
+.prometheus-graph-overlay {
+  fill: none;
+  opacity: 0;
+  pointer-events: all;
+}

app/views/projects/ci/builds/_build.html.haml

@@ -30,7 +30,7 @@
         = custom_icon("icon_commit")
 
     - if commit_sha
-      = link_to job.short_sha, project_commit_path(job.project, job.sha), class: "commit-sha"
+      = link_to job.short_sha, project_commit_path(job.project, job.sha), class: "commit-sha mr-0"
 
     - if job.stuck?
       = icon('warning', class: 'text-warning has-tooltip', title: _('Job is stuck. Check runners.'))

app/views/projects/deployments/_commit.html.haml

@@ -6,7 +6,7 @@
       = link_to deployment.ref, project_ref_path(@project, deployment.ref), class: "ref-name"
     .icon-container.commit-icon
       = custom_icon("icon_commit")
-    = link_to deployment.short_sha, project_commit_path(@project, deployment.sha), class: "commit-sha"
+    = link_to deployment.short_sha, project_commit_path(@project, deployment.sha), class: "commit-sha mr-0"
 
     %p.commit-title.flex-truncate-parent
       %span.flex-truncate-child

app/views/projects/deployments/_deployment.html.haml

@@ -18,7 +18,7 @@
         - if deployment.user
           %div
             by
-            = user_avatar(user: deployment.user, size: 20)
+            = user_avatar(user: deployment.user, size: 20, css_class: "mr-0 float-none")
 
   .table-section.section-15{ role: 'gridcell' }
     .table-mobile-header{ role: 'rowheader' }= _("Created")