Add latest changes from gitlab-org/gitlab@master

13 files changed, 308 insertions, 101 deletions

diff --git a/app/assets/javascripts/ide/components/commit_sidebar/actions.vue b/app/assets/javascripts/ide/components/commit_sidebar/actions.vue
index 3276d21a04e..6a8ea506d1b 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/actions.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/actions.vue
@@ -18,7 +18,7 @@ export default {
   computed: {
     ...mapState(['currentBranchId', 'changedFiles', 'stagedFiles']),
     ...mapCommitState(['commitAction']),
-    ...mapGetters(['currentBranch']),
+    ...mapGetters(['currentBranch', 'emptyRepo', 'canPushToBranch']),
     commitToCurrentBranchText() {
       return sprintf(
         s__('IDE|Commit to %{branchName} branch'),
@@ -29,6 +29,13 @@ export default {
     containsStagedChanges() {
       return this.changedFiles.length > 0 && this.stagedFiles.length > 0;
     },
+    shouldDefaultToCurrentBranch() {
+      if (this.emptyRepo) {
+        return true;
+      }
+
+      return this.canPushToBranch && !this.currentBranch?.default;
+    },
   },
   watch: {
     containsStagedChanges() {
@@ -43,13 +50,11 @@ export default {
   methods: {
     ...mapCommitActions(['updateCommitAction']),
     updateSelectedCommitAction() {
-      if (!this.currentBranch) {
+      if (!this.currentBranch && !this.emptyRepo) {
         return;
       }
 
-      const { can_push: canPush = false, default: isDefault = false } = this.currentBranch;
-
-      if (canPush && !isDefault) {
+      if (this.shouldDefaultToCurrentBranch) {
         this.updateCommitAction(consts.COMMIT_TO_CURRENT_BRANCH);
       } else {
         this.updateCommitAction(consts.COMMIT_TO_NEW_BRANCH);
@@ -68,7 +73,7 @@ export default {
   <div class="append-bottom-15 ide-commit-options">
     <radio-group
       :value="$options.commitToCurrentBranch"
-      :disabled="currentBranch && !currentBranch.can_push"
+      :disabled="!canPushToBranch"
       :title="$options.currentBranchPermissionsTooltip"
     >
       <span
@@ -77,11 +82,13 @@ export default {
         v-html="commitToCurrentBranchText"
       ></span>
     </radio-group>
-    <radio-group
-      :value="$options.commitToNewBranch"
-      :label="__('Create a new branch')"
-      :show-input="true"
-    />
-    <new-merge-request-option />
+    <template v-if="!emptyRepo">
+      <radio-group
+        :value="$options.commitToNewBranch"
+        :label="__('Create a new branch')"
+        :show-input="true"
+      />
+      <new-merge-request-option />
+    </template>
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/constants.js b/app/assets/javascripts/ide/constants.js
index e7762f9e0f2..fa2672aaece 100644
--- a/app/assets/javascripts/ide/constants.js
+++ b/app/assets/javascripts/ide/constants.js
@@ -10,6 +10,7 @@ export const FILE_VIEW_MODE_PREVIEW = 'preview';
 
 export const PERMISSION_CREATE_MR = 'createMergeRequestIn';
 export const PERMISSION_READ_MR = 'readMergeRequest';
+export const PERMISSION_PUSH_CODE = 'pushCode';
 
 export const viewerTypes = {
   mr: 'mrdiff',
diff --git a/app/assets/javascripts/ide/queries/getUserPermissions.query.graphql b/app/assets/javascripts/ide/queries/getUserPermissions.query.graphql
index 48f63995f44..2c9013ffa9c 100644
--- a/app/assets/javascripts/ide/queries/getUserPermissions.query.graphql
+++ b/app/assets/javascripts/ide/queries/getUserPermissions.query.graphql
@@ -2,7 +2,8 @@ query getUserPermissions($projectPath: ID!) {
   project(fullPath: $projectPath) {
     userPermissions {
       createMergeRequestIn,
-      readMergeRequest
+      readMergeRequest,
+      pushCode
     }
   }
 }
diff --git a/app/assets/javascripts/ide/stores/actions/project.js b/app/assets/javascripts/ide/stores/actions/project.js
index 0b168009847..ae3829dc35e 100644
--- a/app/assets/javascripts/ide/stores/actions/project.js
+++ b/app/assets/javascripts/ide/stores/actions/project.js
@@ -83,10 +83,14 @@ export const showBranchNotFoundError = ({ dispatch }, branchId) => {
   });
 };
 
-export const showEmptyState = ({ commit, state, dispatch }, { projectId, branchId }) => {
+export const loadEmptyBranch = ({ commit, state }, { projectId, branchId }) => {
   const treePath = `${projectId}/${branchId}`;
+  const currentTree = state.trees[`${projectId}/${branchId}`];
 
-  dispatch('setCurrentBranchId', branchId);
+  // If we already have a tree, let's not recreate an empty one
+  if (currentTree) {
+    return;
+  }
 
   commit(types.CREATE_TREE, { treePath });
   commit(types.TOGGLE_LOADING, {
@@ -114,8 +118,16 @@ export const loadFile = ({ dispatch, state }, { basePath }) => {
   }
 };
 
-export const loadBranch = ({ dispatch, getters }, { projectId, branchId }) =>
-  dispatch('getBranchData', {
+export const loadBranch = ({ dispatch, getters, state }, { projectId, branchId }) => {
+  const currentProject = state.projects[projectId];
+
+  if (currentProject?.branches?.[branchId]) {
+    return Promise.resolve();
+  } else if (getters.emptyRepo) {
+    return dispatch('loadEmptyBranch', { projectId, branchId });
+  }
+
+  return dispatch('getBranchData', {
     projectId,
     branchId,
   })
@@ -137,29 +149,23 @@ export const loadBranch = ({ dispatch, getters }, { projectId, branchId }) =>
       dispatch('showBranchNotFoundError', branchId);
       throw err;
     });
+};
 
-export const openBranch = ({ dispatch, state, getters }, { projectId, branchId, basePath }) => {
-  const currentProject = state.projects[projectId];
-  if (getters.emptyRepo) {
-    return dispatch('showEmptyState', { projectId, branchId });
-  }
-  if (!currentProject || !currentProject.branches[branchId]) {
-    dispatch('setCurrentBranchId', branchId);
-
-    return dispatch('loadBranch', { projectId, branchId })
-      .then(() => dispatch('loadFile', { basePath }))
-      .catch(
-        () =>
-          new Error(
-            sprintf(
-              __('An error occurred while getting files for - %{branchId}'),
-              {
-                branchId: `<strong>${esc(projectId)}/${esc(branchId)}</strong>`,
-              },
-              false,
-            ),
+export const openBranch = ({ dispatch }, { projectId, branchId, basePath }) => {
+  dispatch('setCurrentBranchId', branchId);
+
+  return dispatch('loadBranch', { projectId, branchId })
+    .then(() => dispatch('loadFile', { basePath }))
+    .catch(
+      () =>
+        new Error(
+          sprintf(
+            __('An error occurred while getting files for - %{branchId}'),
+            {
+              branchId: `<strong>${esc(projectId)}/${esc(branchId)}</strong>`,
+            },
+            false,
           ),
-      );
-  }
-  return Promise.resolve(dispatch('loadFile', { basePath }));
+        ),
+    );
 };
diff --git a/app/assets/javascripts/ide/stores/getters.js b/app/assets/javascripts/ide/stores/getters.js
index d7ad39019a5..5d0a8570906 100644
--- a/app/assets/javascripts/ide/stores/getters.js
+++ b/app/assets/javascripts/ide/stores/getters.js
@@ -4,6 +4,7 @@ import {
   packageJsonPath,
   PERMISSION_READ_MR,
   PERMISSION_CREATE_MR,
+  PERMISSION_PUSH_CODE,
 } from '../constants';
 
 export const activeFile = state => state.openFiles.find(file => file.active) || null;
@@ -120,8 +121,9 @@ export const packageJson = state => state.entries[packageJsonPath];
 export const isOnDefaultBranch = (_state, getters) =>
   getters.currentProject && getters.currentProject.default_branch === getters.branchName;
 
-export const canPushToBranch = (_state, getters) =>
-  getters.currentBranch && getters.currentBranch.can_push;
+export const canPushToBranch = (_state, getters) => {
+  return Boolean(getters.currentBranch ? getters.currentBranch.can_push : getters.canPushCode);
+};
 
 export const isFileDeletedAndReadded = (state, getters) => path => {
   const stagedFile = getters.getStagedFile(path);
@@ -157,5 +159,8 @@ export const canReadMergeRequests = (state, getters) =>
 export const canCreateMergeRequests = (state, getters) =>
   Boolean(getters.findProjectPermissions(state.currentProjectId)[PERMISSION_CREATE_MR]);
 
+export const canPushCode = (state, getters) =>
+  Boolean(getters.findProjectPermissions(state.currentProjectId)[PERMISSION_PUSH_CODE]);
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};
diff --git a/app/assets/javascripts/ide/stores/modules/commit/actions.js b/app/assets/javascripts/ide/stores/modules/commit/actions.js
index 9bf0542cd0b..505daa8834d 100644
--- a/app/assets/javascripts/ide/stores/modules/commit/actions.js
+++ b/app/assets/javascripts/ide/stores/modules/commit/actions.js
@@ -106,6 +106,9 @@ export const updateFilesAfterCommit = ({ commit, dispatch, rootState, rootGetter
 };
 
 export const commitChanges = ({ commit, state, getters, dispatch, rootState, rootGetters }) => {
+  // Pull commit options out because they could change
+  // During some of the pre and post commit processing
+  const { shouldCreateMR, isCreatingNewBranch, branchName } = getters;
   const newBranch = state.commitAction !== consts.COMMIT_TO_CURRENT_BRANCH;
   const stageFilesPromise = rootState.stagedFiles.length
     ? Promise.resolve()
@@ -116,7 +119,7 @@ export const commitChanges = ({ commit, state, getters, dispatch, rootState, roo
   return stageFilesPromise
     .then(() => {
       const payload = createCommitPayload({
-        branch: getters.branchName,
+        branch: branchName,
         newBranch,
         getters,
         state,
@@ -149,7 +152,7 @@ export const commitChanges = ({ commit, state, getters, dispatch, rootState, roo
       dispatch('updateCommitMessage', '');
       return dispatch('updateFilesAfterCommit', {
         data,
-        branch: getters.branchName,
+        branch: branchName,
       })
         .then(() => {
           commit(rootTypes.CLEAR_STAGED_CHANGES, null, { root: true });
@@ -158,15 +161,15 @@ export const commitChanges = ({ commit, state, getters, dispatch, rootState, roo
             commit(rootTypes.SET_LAST_COMMIT_MSG, '', { root: true });
           }, 5000);
 
-          if (getters.shouldCreateMR) {
+          if (shouldCreateMR) {
             const { currentProject } = rootGetters;
-            const targetBranch = getters.isCreatingNewBranch
+            const targetBranch = isCreatingNewBranch
               ? rootState.currentBranchId
               : currentProject.default_branch;
 
             dispatch(
               'redirectToUrl',
-              createNewMergeRequestUrl(currentProject.web_url, getters.branchName, targetBranch),
+              createNewMergeRequestUrl(currentProject.web_url, branchName, targetBranch),
               { root: true },
             );
           }
@@ -194,7 +197,7 @@ export const commitChanges = ({ commit, state, getters, dispatch, rootState, roo
 
             if (rootGetters.activeFile) {
               router.push(
-                `/project/${rootState.currentProjectId}/blob/${getters.branchName}/-/${rootGetters.activeFile.path}`,
+                `/project/${rootState.currentProjectId}/blob/${branchName}/-/${rootGetters.activeFile.path}`,
               );
             }
           }
diff --git a/app/assets/javascripts/ide/stores/modules/commit/getters.js b/app/assets/javascripts/ide/stores/modules/commit/getters.js
index e421d44b6de..413c4b0110d 100644
--- a/app/assets/javascripts/ide/stores/modules/commit/getters.js
+++ b/app/assets/javascripts/ide/stores/modules/commit/getters.js
@@ -55,7 +55,7 @@ export const shouldHideNewMrOption = (_state, getters, _rootState, rootGetters)
   rootGetters.canPushToBranch;
 
 export const shouldDisableNewMrOption = (state, getters, rootState, rootGetters) =>
-  !rootGetters.canCreateMergeRequests;
+  !rootGetters.canCreateMergeRequests || rootGetters.emptyRepo;
 
 export const shouldCreateMR = (state, getters) =>
   state.shouldCreateMR && !getters.shouldDisableNewMrOption;
diff --git a/app/assets/javascripts/mirrors/ssh_mirror.js b/app/assets/javascripts/mirrors/ssh_mirror.js
index 550e1aeeb9c..2276a723326 100644
--- a/app/assets/javascripts/mirrors/ssh_mirror.js
+++ b/app/assets/javascripts/mirrors/ssh_mirror.js
@@ -22,7 +22,6 @@ export default class SSHMirror {
     this.$dropdownAuthType = this.$form.find('.js-mirror-auth-type');
     this.$hiddenAuthType = this.$form.find('.js-hidden-mirror-auth-type');
 
-    this.$wellAuthTypeChanging = this.$form.find('.js-well-changing-auth');
     this.$wellPasswordAuth = this.$form.find('.js-well-password-auth');
   }
 
diff --git a/app/assets/javascripts/monitoring/components/charts/annotations.js b/app/assets/javascripts/monitoring/components/charts/annotations.js
index cc2b2bd0900..b0c89d5e374 100644
--- a/app/assets/javascripts/monitoring/components/charts/annotations.js
+++ b/app/assets/javascripts/monitoring/components/charts/annotations.js
@@ -1,4 +1,4 @@
-import { graphTypes, symbolSizes } from '../../constants';
+import { graphTypes, symbolSizes, colorValues } from '../../constants';
 
 /**
  * Annotations and deployments are decoration layers on
@@ -40,33 +40,50 @@ export const annotationsYAxis = {
     formatter: () => {},
   },
 };
+
 /**
- * This util method check if a particular series data point
- * is of annotation type. Annotations are generally scatter
- * plot charts
+ * Fetched list of annotations are parsed into a
+ * format the eCharts accepts to draw markLines
+ *
+ * If Annotation is a single line, the `from` property
+ * has a value and the `to` is null. Because annotations
+ * only supports lines the from value does not exist yet.
+ *
  *
- * @param {String} type series component type
- * @returns {Boolean}
+ * @param {Object} annotation object
+ * @returns {Object} markLine object
  */
-export const isAnnotation = type => type === graphTypes.annotationsData;
+export const parseAnnotations = ({
+  from: annotationFrom = '',
+  color = colorValues.primaryColor,
+}) => ({
+  xAxis: annotationFrom,
+  lineStyle: {
+    color,
+  },
+});
 
 /**
- * This method currently supports only deployments. After
- * https://gitlab.com/gitlab-org/gitlab/-/issues/211418 annotations
- * support will be added in this method.
+ * This method currently generates deployments and annotations
+ * but are not used in the chart. The method calling
+ * generateAnnotationsSeries will not pass annotations until
+ * https://gitlab.com/gitlab-org/gitlab/-/issues/211330 is
+ * implemented.
  *
  * This method is extracted out of the charts so that
  * annotation lines can be easily supported in
  * the future.
  *
+ * In order to make hover work, hidden annotation data points
+ * are created along with the markLines. These data points have
+ * the necessart metadata that is used to display in the tooltip.
+ *
  * @param {Array} deployments deployments data
  * @returns {Object} annotation series object
  */
-export const generateAnnotationsSeries = (deployments = []) => {
-  if (!deployments.length) {
-    return [];
-  }
-  const data = deployments.map(deployment => {
+export const generateAnnotationsSeries = ({ deployments = [], annotations = [] } = {}) => {
+  // deployment data points
+  const deploymentsData = deployments.map(deployment => {
     return {
       name: 'deployments',
       value: [deployment.createdAt, annotationsYAxisCoords.pos],
@@ -78,9 +95,27 @@ export const generateAnnotationsSeries = (deployments = []) => {
     };
   });
 
+  // annotation data points
+  const annotationsData = annotations.map(annotation => {
+    return {
+      name: 'annotations',
+      value: [annotation.from, annotationsYAxisCoords.pos],
+      symbol: 'none',
+      description: annotation.description,
+    };
+  });
+
+  // annotation markLine option
+  const markLine = {
+    symbol: 'none',
+    silent: true,
+    data: annotations.map(parseAnnotations),
+  };
+
   return {
     type: graphTypes.annotationsData,
     yAxisIndex: 1, // annotationsYAxis index
-    data,
+    data: [...deploymentsData, ...annotationsData],
+    markLine,
   };
 };
diff --git a/app/assets/javascripts/monitoring/components/charts/time_series.vue b/app/assets/javascripts/monitoring/components/charts/time_series.vue
index 73c63a0580f..e43a0131528 100644
--- a/app/assets/javascripts/monitoring/components/charts/time_series.vue
+++ b/app/assets/javascripts/monitoring/components/charts/time_series.vue
@@ -6,9 +6,9 @@ import dateFormat from 'dateformat';
 import { s__, __ } from '~/locale';
 import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
 import Icon from '~/vue_shared/components/icon.vue';
-import { chartHeight, lineTypes, lineWidths, dateFormats } from '../../constants';
+import { chartHeight, lineTypes, lineWidths, dateFormats, tooltipTypes } from '../../constants';
 import { getYAxisOptions, getChartGrid, getTooltipFormatter } from './options';
-import { annotationsYAxis, generateAnnotationsSeries, isAnnotation } from './annotations';
+import { annotationsYAxis, generateAnnotationsSeries } from './annotations';
 import { makeDataSeries } from '~/helpers/monitor_helper';
 import { graphDataValidatorForValues } from '../../utils';
 
@@ -20,6 +20,7 @@ const events = {
 };
 
 export default {
+  tooltipTypes,
   components: {
     GlAreaChart,
     GlLineChart,
@@ -88,10 +89,10 @@ export default {
   data() {
     return {
       tooltip: {
+        type: '',
         title: '',
         content: [],
         commitUrl: '',
-        isDeployment: false,
         sha: '',
       },
       width: 0,
@@ -137,7 +138,13 @@ export default {
       }, []);
     },
     chartOptionSeries() {
-      return (this.option.series || []).concat(generateAnnotationsSeries(this.recentDeployments));
+      // After https://gitlab.com/gitlab-org/gitlab/-/issues/211330 is implemented,
+      // this method will have access to annotations data
+      return (this.option.series || []).concat(
+        generateAnnotationsSeries({
+          deployments: this.recentDeployments,
+        }),
+      );
     },
     chartOptions() {
       const { yAxis, xAxis } = this.option;
@@ -246,6 +253,9 @@ export default {
     formatLegendLabel(query) {
       return `${query.label}`;
     },
+    isTooltipOfType(tooltipType, defaultType) {
+      return tooltipType === defaultType;
+    },
     formatTooltipText(params) {
       this.tooltip.title = dateFormat(params.value, dateFormats.default);
       this.tooltip.content = [];
@@ -253,13 +263,18 @@ export default {
       params.seriesData.forEach(dataPoint => {
         if (dataPoint.value) {
           const [xVal, yVal] = dataPoint.value;
-          this.tooltip.isDeployment = isAnnotation(dataPoint.componentSubType);
-          if (this.tooltip.isDeployment) {
+          this.tooltip.type = dataPoint.name;
+          if (this.isTooltipOfType(this.tooltip.type, this.$options.tooltipTypes.deployments)) {
             const [deploy] = this.recentDeployments.filter(
               deployment => deployment.createdAt === xVal,
             );
             this.tooltip.sha = deploy.sha.substring(0, 8);
             this.tooltip.commitUrl = deploy.commitUrl;
+          } else if (
+            this.isTooltipOfType(this.tooltip.type, this.$options.tooltipTypes.annotations)
+          ) {
+            const { data } = dataPoint;
+            this.tooltip.content.push(data?.description);
           } else {
             const { seriesName, color, dataIndex } = dataPoint;
 
@@ -288,7 +303,6 @@ export default {
     onChartUpdated(eChart) {
       [this.primaryColor] = eChart.getOption().color;
     },
-
     onChartCreated(eChart) {
       // Emit a datazoom event that corresponds to the eChart
       // `datazoom` event.
@@ -346,7 +360,7 @@ export default {
       @created="onChartCreated"
       @updated="onChartUpdated"
     >
-      <template v-if="tooltip.isDeployment">
+      <template v-if="isTooltipOfType(tooltip.type, this.$options.tooltipTypes.deployments)">
         <template slot="tooltipTitle">
           {{ __('Deployed') }}
         </template>
@@ -355,29 +369,35 @@ export default {
           <gl-link :href="tooltip.commitUrl">{{ tooltip.sha }}</gl-link>
         </div>
       </template>
+      <template v-else-if="isTooltipOfType(tooltip.type, this.$options.tooltipTypes.annotations)">
+        <template slot="tooltipTitle">
+          <div class="text-nowrap">
+            {{ tooltip.title }}
+          </div>
+        </template>
+        <div slot="tooltipContent" class="d-flex align-items-center">
+          {{ tooltip.content.join('\n') }}
+        </div>
+      </template>
       <template v-else>
         <template slot="tooltipTitle">
-          <slot name="tooltipTitle">
-            <div class="text-nowrap">
-              {{ tooltip.title }}
-            </div>
-          </slot>
+          <div class="text-nowrap">
+            {{ tooltip.title }}
+          </div>
         </template>
-        <template slot="tooltipContent">
-          <slot name="tooltipContent" :tooltip="tooltip">
-            <div
-              v-for="(content, key) in tooltip.content"
-              :key="key"
-              class="d-flex justify-content-between"
-            >
-              <gl-chart-series-label :color="isMultiSeries ? content.color : ''">
-                {{ content.name }}
-              </gl-chart-series-label>
-              <div class="prepend-left-32">
-                {{ content.value }}
-              </div>
+        <template slot="tooltipContent" :tooltip="tooltip">
+          <div
+            v-for="(content, key) in tooltip.content"
+            :key="key"
+            class="d-flex justify-content-between"
+          >
+            <gl-chart-series-label :color="isMultiSeries ? content.color : ''">
+              {{ content.name }}
+            </gl-chart-series-label>
+            <div class="prepend-left-32">
+              {{ content.value }}
             </div>
-          </slot>
+          </div>
         </template>
       </template>
     </component>
diff --git a/app/assets/javascripts/monitoring/constants.js b/app/assets/javascripts/monitoring/constants.js
index e092c0ccae0..6af1d399cfc 100644
--- a/app/assets/javascripts/monitoring/constants.js
+++ b/app/assets/javascripts/monitoring/constants.js
@@ -115,3 +115,12 @@ export const NOT_IN_DB_PREFIX = 'NO_DB';
  * Used as a value for the 'states' query filter
  */
 export const ENVIRONMENT_AVAILABLE_STATE = 'available';
+
+/**
+ * Time series charts have different types of
+ * tooltip based on the hovered data point.
+ */
+export const tooltipTypes = {
+  deployments: 'deployments',
+  annotations: 'annotations',
+};
diff --git a/app/assets/javascripts/projects/default_project_templates.js b/app/assets/javascripts/projects/default_project_templates.js
index 37bad1efaaf..e5898c3b047 100644
--- a/app/assets/javascripts/projects/default_project_templates.js
+++ b/app/assets/javascripts/projects/default_project_templates.js
@@ -81,4 +81,8 @@ export default {
     text: s__('ProjectTemplates|Serverless Framework/JS'),
     icon: '.template-option .icon-serverless_framework',
   },
+  cluster_management: {
+    text: s__('ProjectTemplates|GitLab Cluster Management'),
+    icon: '.template-option .icon-cluster_management',
+  },
 };
diff --git a/app/assets/stylesheets/components/related_items_list.scss b/app/assets/stylesheets/components/related_items_list.scss
index 59224d37744..6820bdca2fa 100644
--- a/app/assets/stylesheets/components/related_items_list.scss
+++ b/app/assets/stylesheets/components/related_items_list.scss
@@ -15,6 +15,14 @@ $item-weight-max-width: 48px;
   max-width: 85%;
 }
 
+.related-items-tree {
+  .card-header {
+    .gl-label {
+      line-height: $gl-line-height;
+    }
+  }
+}
+
 .item-body {
   position: relative;
   line-height: $gl-line-height;
@@ -49,6 +57,10 @@ $item-weight-max-width: 48px;
     color: $orange-600;
   }
 
+  .item-title-wrapper {
+    max-width: 100%;
+  }
+
   .item-title {
     flex-basis: 100%;
     font-size: $gl-font-size-small;
@@ -72,15 +84,62 @@ $item-weight-max-width: 48px;
     overflow: hidden;
     white-space: nowrap;
   }
+
+  @include media-breakpoint-down(lg) {
+    .issue-count-badge {
+      padding-left: 0;
+    }
+  }
+}
+
+.item-body,
+.card-header {
+  .health-label-short {
+    display: initial;
+    max-width: 0;
+  }
+
+  .health-label-long {
+    display: none;
+  }
+
+  .status {
+    &-at-risk {
+      color: $red-500;
+      background-color: $red-100;
+    }
+
+    &-needs-attention {
+      color: $orange-700;
+      background-color: $orange-100;
+    }
+
+    &-on-track {
+      color: $green-600;
+      background-color: $green-100;
+    }
+  }
+
+  .gl-label-text {
+    font-weight: $gl-font-weight-bold;
+  }
+
+  .bullet-separator {
+    font-size: 9px;
+    color: $gray-400;
+  }
 }
 
 .item-meta {
   flex-basis: 100%;
-  font-size: $gl-font-size-small;
+  font-size: $gl-font-size;
   color: $gl-text-color-secondary;
 
-  .item-meta-child {
-    flex-basis: 100%;
+  .item-due-date,
+  .board-card-weight {
+    &.board-card-info {
+      margin-right: 0;
+    }
   }
 
   .item-attributes-area {
@@ -88,10 +147,6 @@ $item-weight-max-width: 48px;
       margin-left: 8px;
     }
 
-    .board-card-info {
-      margin-right: 0;
-    }
-
     @include media-breakpoint-down(sm) {
       margin-left: -8px;
     }
@@ -107,13 +162,21 @@ $item-weight-max-width: 48px;
     max-width: $item-milestone-max-width;
 
     .ic-clock {
-      color: $gl-text-color-tertiary;
+      color: $gl-text-color-secondary;
       margin-right: $gl-padding-4;
     }
   }
 
   .item-weight {
     max-width: $item-weight-max-width;
+
+    .ic-weight {
+      color: $gl-text-color-secondary;
+    }
+  }
+
+  .item-due-date .ic-calendar {
+    color: $gl-text-color-secondary;
   }
 }
 
@@ -194,6 +257,13 @@ $item-weight-max-width: 48px;
   .sortable-link {
     max-width: 90%;
   }
+
+  .item-body,
+  .card-header {
+    .health-label-short {
+      max-width: 30px;
+    }
+  }
 }
 
 /* Small devices (landscape phones, 768px and up) */
@@ -232,6 +302,13 @@ $item-weight-max-width: 48px;
       }
     }
   }
+
+  .item-body,
+  .card-header {
+    .health-label-short {
+      max-width: 60px;
+    }
+  }
 }
 
 /* Medium devices (desktops, 992px and up) */
@@ -245,6 +322,17 @@ $item-weight-max-width: 48px;
       font-size: inherit; // Base size given to `item-meta` is `$gl-font-size-small`
     }
   }
+
+  .item-body,
+  .card-header {
+    .health-label-short {
+      max-width: 100px;
+    }
+  }
+
+  .health-label-long {
+    display: none;
+  }
 }
 
 /* Large devices (large desktops, 1200px and up) */
@@ -264,11 +352,23 @@ $item-weight-max-width: 48px;
       }
     }
 
+    .item-title-wrapper {
+      max-width: calc(100% - 440px);
+    }
+
     .item-info-area {
       flex-basis: auto;
     }
   }
 
+  .health-label-short {
+    display: initial;
+  }
+
+  .health-label-long {
+    display: none;
+  }
+
   .item-contents {
     overflow: hidden;
   }
@@ -306,3 +406,20 @@ $item-weight-max-width: 48px;
     line-height: 1.3;
   }
 }
+
+@media only screen and (min-width: 1400px) {
+  .card-header,
+  .item-body {
+    .health-label-short {
+      display: none;
+    }
+
+    .health-label-long {
+      display: initial;
+    }
+  }
+
+  .item-body .item-title-wrapper {
+    max-width: calc(100% - 570px);
+  }
+}