Add latest changes from gitlab-org/gitlab@master

11 files changed, 78 insertions, 45 deletions

diff --git a/app/assets/javascripts/custom_metrics/components/custom_metrics_form_fields.vue b/app/assets/javascripts/custom_metrics/components/custom_metrics_form_fields.vue
index c6aeb6c726d..9811a0774e1 100644
--- a/app/assets/javascripts/custom_metrics/components/custom_metrics_form_fields.vue
+++ b/app/assets/javascripts/custom_metrics/components/custom_metrics_form_fields.vue
@@ -11,7 +11,7 @@ import { debounce } from 'lodash';
 import axios from '~/lib/utils/axios_utils';
 import { backOff } from '~/lib/utils/common_utils';
 import csrf from '~/lib/utils/csrf';
-import statusCodes from '~/lib/utils/http_status';
+import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import { __, s__ } from '~/locale';
 import { queryTypes, formDataValidator } from '../constants';
 
@@ -23,7 +23,7 @@ function backOffRequest(makeRequestCallback) {
   return backOff((next, stop) => {
     makeRequestCallback()
       .then((resp) => {
-        if (resp.status === statusCodes.OK) {
+        if (resp.status === HTTP_STATUS_OK) {
           stop(resp);
         } else {
           next();
diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index b87fe65841b..9f90de9abde 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -9,7 +9,7 @@ import { createAlert, VARIANT_WARNING } from '~/flash';
 import { diffViewerModes } from '~/ide/constants';
 import axios from '~/lib/utils/axios_utils';
 
-import httpStatusCodes, { HTTP_STATUS_NOT_FOUND } from '~/lib/utils/http_status';
+import { HTTP_STATUS_NOT_FOUND, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import Poll from '~/lib/utils/poll';
 import { mergeUrlParams, getLocationHash } from '~/lib/utils/url_utility';
 import { __, s__ } from '~/locale';
@@ -248,7 +248,7 @@ export const fetchCoverageFiles = ({ commit, state }) => {
     data: state.endpointCoverage,
     method: 'getCoverageReports',
     successCallback: ({ status, data }) => {
-      if (status === httpStatusCodes.OK) {
+      if (status === HTTP_STATUS_OK) {
         commit(types.SET_COVERAGE_DATA, data);
 
         coveragePoll.stop();
diff --git a/app/assets/javascripts/lib/utils/http_status.js b/app/assets/javascripts/lib/utils/http_status.js
index c3adb79bcbe..9ca4efe6dfe 100644
--- a/app/assets/javascripts/lib/utils/http_status.js
+++ b/app/assets/javascripts/lib/utils/http_status.js
@@ -1,4 +1,5 @@
 export const HTTP_STATUS_ABORTED = 0;
+export const HTTP_STATUS_OK = 200;
 export const HTTP_STATUS_CREATED = 201;
 export const HTTP_STATUS_ACCEPTED = 202;
 export const HTTP_STATUS_NON_AUTHORITATIVE_INFORMATION = 203;
@@ -28,7 +29,7 @@ const httpStatusCodes = {
 };
 
 export const successCodes = [
-  httpStatusCodes.OK,
+  HTTP_STATUS_OK,
   HTTP_STATUS_CREATED,
   HTTP_STATUS_ACCEPTED,
   HTTP_STATUS_NON_AUTHORITATIVE_INFORMATION,
diff --git a/app/assets/javascripts/lib/utils/poll_until_complete.js b/app/assets/javascripts/lib/utils/poll_until_complete.js
index 3545db3a227..dbe54dceb52 100644
--- a/app/assets/javascripts/lib/utils/poll_until_complete.js
+++ b/app/assets/javascripts/lib/utils/poll_until_complete.js
@@ -1,5 +1,5 @@
 import axios from '~/lib/utils/axios_utils';
-import httpStatusCodes from './http_status';
+import { HTTP_STATUS_OK } from './http_status';
 import Poll from './poll';
 
 /**
@@ -30,7 +30,7 @@ export default (url, config = {}) =>
       data: { url, config },
       method: 'axiosGet',
       successCallback: (response) => {
-        if (response.status === httpStatusCodes.OK) {
+        if (response.status === HTTP_STATUS_OK) {
           resolve(response);
           eTagPoll.stop();
         }
diff --git a/app/assets/javascripts/self_monitor/store/actions.js b/app/assets/javascripts/self_monitor/store/actions.js
index 7198dbe8b04..d94fd77dd42 100644
--- a/app/assets/javascripts/self_monitor/store/actions.js
+++ b/app/assets/javascripts/self_monitor/store/actions.js
@@ -1,6 +1,6 @@
 import axios from '~/lib/utils/axios_utils';
 import { backOff } from '~/lib/utils/common_utils';
-import statusCodes, { HTTP_STATUS_ACCEPTED } from '~/lib/utils/http_status';
+import { HTTP_STATUS_ACCEPTED, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import { __, s__ } from '~/locale';
 import * as types from './mutation_types';
 
@@ -43,7 +43,7 @@ export const requestCreateProject = ({ dispatch, state, commit }) => {
 export const requestCreateProjectStatus = ({ dispatch, state }, jobId) => {
   backOffRequest(() => axios.get(state.createProjectStatusEndpoint, { params: { job_id: jobId } }))
     .then((resp) => {
-      if (resp.status === statusCodes.OK) {
+      if (resp.status === HTTP_STATUS_OK) {
         dispatch('requestCreateProjectSuccess', resp.data);
       }
     })
@@ -95,7 +95,7 @@ export const requestDeleteProject = ({ dispatch, state, commit }) => {
 export const requestDeleteProjectStatus = ({ dispatch, state }, jobId) => {
   backOffRequest(() => axios.get(state.deleteProjectStatusEndpoint, { params: { job_id: jobId } }))
     .then((resp) => {
-      if (resp.status === statusCodes.OK) {
+      if (resp.status === HTTP_STATUS_OK) {
         dispatch('requestDeleteProjectSuccess', resp.data);
       }
     })
diff --git a/app/assets/javascripts/super_sidebar/components/counter.vue b/app/assets/javascripts/super_sidebar/components/counter.vue
index 873d7c48574..d790e61ca31 100644
--- a/app/assets/javascripts/super_sidebar/components/counter.vue
+++ b/app/assets/javascripts/super_sidebar/components/counter.vue
@@ -6,24 +6,43 @@ export default {
     GlIcon,
   },
   props: {
+    count: {
+      type: Number,
+      required: true,
+    },
+    href: {
+      type: String,
+      required: false,
+      default: '',
+    },
     icon: {
       type: String,
       required: true,
     },
-    count: {
-      type: Number,
+    label: {
+      type: String,
       required: true,
     },
   },
+  computed: {
+    ariaLabel() {
+      return `${this.label} ${this.count}`;
+    },
+    component() {
+      return this.href ? 'a' : 'button';
+    },
+  },
 };
 </script>
 
 <template>
-  <a
-    href="#"
+  <component
+    :is="component"
+    :aria-label="ariaLabel"
+    :href="href"
     class="counter gl-relative gl-display-inline-block gl-flex-grow-1 gl-text-center gl-py-3 gl-bg-gray-10 gl-rounded-base gl-text-black-normal gl-border gl-border-gray-a-08 gl-font-sm gl-font-weight-bold"
   >
-    <gl-icon :name="icon" />
-    {{ count }}
-  </a>
+    <gl-icon aria-hidden="true" :name="icon" />
+    <span aria-hidden="true">{{ count }}</span>
+  </component>
 </template>
diff --git a/app/assets/javascripts/super_sidebar/components/super_sidebar.vue b/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
index e5c29f966c1..e2eac64f5ad 100644
--- a/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
+++ b/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlCollapse } from '@gitlab/ui';
-import { user, counts, context } from '../mock_data';
+import { context } from '../mock_data';
 import UserBar from './user_bar.vue';
 import ContextSwitcherToggle from './context_switcher_toggle.vue';
 import ContextSwitcher from './context_switcher.vue';
@@ -8,8 +8,6 @@ import BottomBar from './bottom_bar.vue';
 
 export default {
   context,
-  user,
-  counts,
   components: {
     GlCollapse,
     UserBar,
@@ -17,6 +15,12 @@ export default {
     ContextSwitcher,
     BottomBar,
   },
+  props: {
+    sidebarData: {
+      type: Object,
+      required: true,
+    },
+  },
   data() {
     return {
       contextSwitcherOpened: false,
@@ -30,7 +34,7 @@ export default {
     class="super-sidebar gl-fixed gl-bottom-0 gl-left-0 gl-display-flex gl-flex-direction-column gl-bg-gray-10 gl-border-r gl-border-gray-a-08 gl-z-index-9999"
     data-testid="super-sidebar"
   >
-    <user-bar :user="$options.user" :counts="$options.counts" />
+    <user-bar :sidebar-data="sidebarData" />
     <div class="gl-display-flex gl-flex-direction-column gl-flex-grow-1 gl-overflow-hidden">
       <div class="gl-flex-grow-1 gl-overflow-auto">
         <context-switcher-toggle :context="$options.context" :expanded="contextSwitcherOpened" />
diff --git a/app/assets/javascripts/super_sidebar/components/user_bar.vue b/app/assets/javascripts/super_sidebar/components/user_bar.vue
index 00fcf70929c..7ee1776bf07 100644
--- a/app/assets/javascripts/super_sidebar/components/user_bar.vue
+++ b/app/assets/javascripts/super_sidebar/components/user_bar.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlAvatar, GlDropdown, GlIcon } from '@gitlab/ui';
+import { __ } from '~/locale';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import NewNavToggle from '~/nav/components/new_nav_toggle.vue';
 import logo from '../../../../views/shared/_logo.svg';
@@ -14,16 +15,17 @@ export default {
     NewNavToggle,
     Counter,
   },
+  i18n: {
+    issues: __('Issues'),
+    mergeRequests: __('Merge requests'),
+    todoList: __('To-Do list'),
+  },
   directives: {
     SafeHtml,
   },
   inject: ['rootPath', 'toggleNewNavEndpoint'],
   props: {
-    user: {
-      type: Object,
-      required: true,
-    },
-    counts: {
+    sidebarData: {
       type: Object,
       required: true,
     },
@@ -47,15 +49,29 @@ export default {
       </button>
       <gl-dropdown data-testid="user-dropdown" variant="link" no-caret>
         <template #button-content>
-          <gl-avatar :entity-name="user.name" :src="user.avatar_url" :size="32" />
+          <gl-avatar :entity-name="sidebarData.name" :src="sidebarData.avatar_url" :size="32" />
         </template>
         <new-nav-toggle :endpoint="toggleNewNavEndpoint" enabled />
       </gl-dropdown>
     </div>
     <div class="gl-display-flex gl-justify-content-space-between gl-px-3 gl-py-2 gl-gap-2">
-      <counter icon="issues" :count="counts.assigned_issues" />
-      <counter icon="merge-request-open" :count="counts.assigned_merge_requests" />
-      <counter icon="todo-done" :count="counts.pending_todos" />
+      <counter
+        icon="issues"
+        :count="sidebarData.assigned_open_issues_count"
+        :href="sidebarData.issues_dashboard_path"
+        :label="$options.i18n.issues"
+      />
+      <counter
+        icon="merge-request-open"
+        :count="sidebarData.assigned_open_merge_requests_count"
+        :label="$options.i18n.mergeRequests"
+      />
+      <counter
+        icon="todo-done"
+        :count="sidebarData.todos_pending_count"
+        href="/dashboard/todos"
+        :label="$options.i18n.todoList"
+      />
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/super_sidebar/mock_data.js b/app/assets/javascripts/super_sidebar/mock_data.js
index b16a188b94f..0d1ac006df7 100644
--- a/app/assets/javascripts/super_sidebar/mock_data.js
+++ b/app/assets/javascripts/super_sidebar/mock_data.js
@@ -1,16 +1,5 @@
 import { s__ } from '~/locale';
 
-export const user = {
-  name: 'GitLab Bot',
-  avatar_url: '',
-};
-
-export const counts = {
-  assigned_issues: 0,
-  assigned_merge_requests: 4,
-  pending_todos: 12,
-};
-
 export const context = {
   title: 'Typeahead.js',
   link: '/',
diff --git a/app/assets/javascripts/super_sidebar/super_sidebar_bundle.js b/app/assets/javascripts/super_sidebar/super_sidebar_bundle.js
index 35aa6aff08c..b9c7073df8c 100644
--- a/app/assets/javascripts/super_sidebar/super_sidebar_bundle.js
+++ b/app/assets/javascripts/super_sidebar/super_sidebar_bundle.js
@@ -6,7 +6,7 @@ export const initSuperSidebar = () => {
 
   if (!el) return false;
 
-  const { rootPath, toggleNewNavEndpoint } = el.dataset;
+  const { rootPath, sidebar, toggleNewNavEndpoint } = el.dataset;
 
   return new Vue({
     el,
@@ -16,7 +16,11 @@ export const initSuperSidebar = () => {
       toggleNewNavEndpoint,
     },
     render(h) {
-      return h(SuperSidebar);
+      return h(SuperSidebar, {
+        props: {
+          sidebarData: JSON.parse(sidebar),
+        },
+      });
     },
   });
 };
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/artifacts_list/actions.js b/app/assets/javascripts/vue_merge_request_widget/stores/artifacts_list/actions.js
index 5fd5950859b..c8d969e3adf 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/artifacts_list/actions.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/artifacts_list/actions.js
@@ -1,6 +1,6 @@
 import Visibility from 'visibilityjs';
 import axios from '~/lib/utils/axios_utils';
-import httpStatusCodes from '~/lib/utils/http_status';
+import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import Poll from '~/lib/utils/poll';
 
 import * as types from './mutation_types';
@@ -63,7 +63,7 @@ export const fetchArtifacts = ({ state, dispatch }) => {
 
 export const receiveArtifactsSuccess = ({ commit }, response) => {
   // With 204 we keep polling and don't update the state
-  if (response.status === httpStatusCodes.OK) {
+  if (response.status === HTTP_STATUS_OK) {
     commit(types.RECEIVE_ARTIFACTS_SUCCESS, response.data);
   }
 };