Add latest changes from gitlab-org/gitlab@master

3 files changed, 16 insertions, 6 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue
index 0f1c13f818f..c3a4897ce78 100644
--- a/app/assets/javascripts/diffs/components/diff_file_header.vue
+++ b/app/assets/javascripts/diffs/components/diff_file_header.vue
@@ -376,7 +376,7 @@ export default {
         v-if="isReviewable && showLocalFileReviews"
         v-gl-tooltip.hover
         data-testid="fileReviewCheckbox"
-        class="gl-mr-5 gl-display-flex gl-align-items-center"
+        class="gl-mr-5 gl-mb-n3 gl-display-flex gl-align-items-center"
         :title="$options.i18n.fileReviewTooltip"
         :checked="reviewed"
         @change="toggleReview"
diff --git a/app/assets/javascripts/vue_shared/components/ci_cd_analytics/ci_cd_analytics_area_chart.vue b/app/assets/javascripts/vue_shared/components/ci_cd_analytics/ci_cd_analytics_area_chart.vue
index c89e843b660..b4751d51fcb 100644
--- a/app/assets/javascripts/vue_shared/components/ci_cd_analytics/ci_cd_analytics_area_chart.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_cd_analytics/ci_cd_analytics_area_chart.vue
@@ -1,4 +1,5 @@
 <script>
+import { v4 as uuidv4 } from 'uuid';
 import { GlAreaChart } from '@gitlab/ui/dist/charts';
 import { CHART_CONTAINER_HEIGHT } from './constants';
 
@@ -17,6 +18,15 @@ export default {
       required: true,
     },
   },
+  data: () => ({
+    chartKey: uuidv4(),
+  }),
+  watch: {
+    chartData() {
+      // Re-render area chart when the data changes
+      this.chartKey = uuidv4();
+    },
+  },
   chartContainerHeight: CHART_CONTAINER_HEIGHT,
 };
 </script>
@@ -27,6 +37,7 @@ export default {
     </p>
     <gl-area-chart
       v-bind="$attrs"
+      :key="chartKey"
       responsive
       width="auto"
       :height="$options.chartContainerHeight"
diff --git a/app/assets/javascripts/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue b/app/assets/javascripts/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue
index 47b96934420..e5d82bad54f 100644
--- a/app/assets/javascripts/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue
@@ -39,11 +39,10 @@ export default {
 </script>
 <template>
   <div>
-    <segmented-control-button-group
-      v-model="selectedChart"
-      :options="chartRanges"
-      class="gl-mb-4"
-    />
+    <div class="gl-display-flex gl-flex-wrap-wrap gl-gap-5">
+      <segmented-control-button-group v-model="selectedChart" :options="chartRanges" />
+      <slot name="extend-button-group"></slot>
+    </div>
     <ci-cd-analytics-area-chart
       v-if="chart"
       v-bind="$attrs"