Add latest changes from gitlab-org/gitlab@master

13 files changed, 144 insertions, 160 deletions

diff --git a/app/assets/javascripts/boards/components/board_list.vue b/app/assets/javascripts/boards/components/board_list.vue
index 1a3a4997280..d9dc0025658 100644
--- a/app/assets/javascripts/boards/components/board_list.vue
+++ b/app/assets/javascripts/boards/components/board_list.vue
@@ -142,6 +142,7 @@ export default {
     },
     onReachingListBottom() {
       if (!this.loadingMore && this.hasNextPage) {
+        this.showCount = true;
         this.loadNextPage();
       }
     },
@@ -150,12 +151,19 @@ export default {
     },
     handleDragOnEnd(params) {
       sortableEnd();
-      const { newIndex, oldIndex, from, to, item } = params;
+      const { oldIndex, from, to, item } = params;
+      let { newIndex } = params;
       const { itemId, itemIid, itemPath } = item.dataset;
-      const { children } = to;
+      let { children } = to;
       let moveBeforeId;
       let moveAfterId;
 
+      children = Array.from(children).filter((card) => card.classList.contains('board-card'));
+
+      if (newIndex > children.length) {
+        newIndex = children.length;
+      }
+
       const getItemId = (el) => Number(el.dataset.itemId);
 
       // If item is being moved within the same list
@@ -218,6 +226,7 @@ export default {
       :data-board="list.id"
       :data-board-type="list.listType"
       :class="{ 'bg-danger-100': boardItemsSizeExceedsMax }"
+      draggable=".board-card"
       class="board-list gl-w-full gl-h-full gl-list-style-none gl-mb-0 gl-p-2 js-board-list"
       data-testid="tree-root-wrapper"
       @start="handleDragOnStart"
@@ -232,17 +241,17 @@ export default {
         :item="item"
         :disabled="disabled"
       />
-      <li v-if="showCount" class="board-list-count gl-text-center" data-issue-id="-1">
-        <gl-loading-icon
-          v-if="loadingMore"
-          :label="$options.i18n.loadingMoreboardItems"
-          data-testid="count-loading-icon"
-        />
-        <span v-if="showingAllItems">{{ showingAllItemsText }}</span>
-        <gl-intersection-observer v-else @appear="onReachingListBottom">
-          <span>{{ paginatedIssueText }}</span>
-        </gl-intersection-observer>
-      </li>
+      <gl-intersection-observer @appear="onReachingListBottom">
+        <li v-if="showCount" class="board-list-count gl-text-center" data-issue-id="-1">
+          <gl-loading-icon
+            v-if="loadingMore"
+            :label="$options.i18n.loadingMoreboardItems"
+            data-testid="count-loading-icon"
+          />
+          <span v-if="showingAllItems">{{ showingAllItemsText }}</span>
+          <span v-else>{{ paginatedIssueText }}</span>
+        </li>
+      </gl-intersection-observer>
     </component>
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/branches/search_list.vue b/app/assets/javascripts/ide/components/branches/search_list.vue
index 5e93b7c1bbb..ce39c796386 100644
--- a/app/assets/javascripts/ide/components/branches/search_list.vue
+++ b/app/assets/javascripts/ide/components/branches/search_list.vue
@@ -69,7 +69,7 @@ export default {
         class="form-control dropdown-input-field"
         @input="searchBranches"
       />
-      <gl-icon :size="18" name="search" class="ml-3 input-icon" use-deprecated-sizes />
+      <gl-icon name="search" class="gl-ml-5 gl-mt-1 input-icon" />
     </label>
     <div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
       <gl-loading-icon
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue
index d860fe8079f..db8d67d86dc 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue
@@ -1,25 +1,18 @@
 <script>
-import {
-  GlFilteredSearchToken,
-  GlAvatar,
-  GlFilteredSearchSuggestion,
-  GlDropdownDivider,
-  GlLoadingIcon,
-} from '@gitlab/ui';
-import { debounce } from 'lodash';
+import { GlAvatar, GlFilteredSearchSuggestion } from '@gitlab/ui';
 
 import createFlash from '~/flash';
 import { __ } from '~/locale';
 
-import { DEFAULT_LABEL_ANY, DEBOUNCE_DELAY } from '../constants';
+import { DEFAULT_LABEL_ANY } from '../constants';
+
+import BaseToken from './base_token.vue';
 
 export default {
   components: {
-    GlFilteredSearchToken,
+    BaseToken,
     GlAvatar,
     GlFilteredSearchSuggestion,
-    GlDropdownDivider,
-    GlLoadingIcon,
   },
   props: {
     config: {
@@ -30,45 +23,35 @@ export default {
       type: Object,
       required: true,
     },
+    active: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     return {
       authors: this.config.initialAuthors || [],
       defaultAuthors: this.config.defaultAuthors || [DEFAULT_LABEL_ANY],
-      loading: true,
+      preloadedAuthors: [
+        {
+          id: gon.current_user_id,
+          name: gon.current_user_fullname,
+          username: gon.current_username,
+          avatar_url: gon.current_user_avatar_url,
+        },
+      ],
+      loading: false,
     };
   },
-  computed: {
-    currentUser() {
-      return {
-        id: gon.current_user_id,
-        name: gon.current_user_fullname,
-        username: gon.current_username,
-        avatar_url: gon.current_user_avatar_url,
-      };
-    },
-    currentValue() {
-      return this.value.data.toLowerCase();
-    },
-    activeAuthor() {
-      return this.authors.find((author) => author.username.toLowerCase() === this.currentValue);
-    },
-    activeAuthorAvatar() {
-      return this.avatarUrl(this.activeAuthor);
+  methods: {
+    getActiveAuthor(authors, currentValue) {
+      return authors.find((author) => author.username.toLowerCase() === currentValue);
     },
-  },
-  watch: {
-    active: {
-      immediate: true,
-      handler(newValue) {
-        if (!newValue && !this.authors.length) {
-          this.fetchAuthorBySearchTerm(this.value.data);
-        }
-      },
+    getAvatarUrl(author) {
+      return author.avatarUrl || author.avatar_url;
     },
-  },
-  methods: {
     fetchAuthorBySearchTerm(searchTerm) {
+      this.loading = true;
       const fetchPromise = this.config.fetchPath
         ? this.config.fetchAuthors(this.config.fetchPath, searchTerm)
         : this.config.fetchAuthors(searchTerm);
@@ -89,69 +72,47 @@ export default {
           this.loading = false;
         });
     },
-    avatarUrl(author) {
-      return author.avatarUrl || author.avatar_url;
-    },
-    searchAuthors: debounce(function debouncedSearch({ data }) {
-      this.fetchAuthorBySearchTerm(data);
-    }, DEBOUNCE_DELAY),
   },
 };
 </script>
 
 <template>
-  <gl-filtered-search-token
-    :config="config"
-    v-bind="{ ...$props, ...$attrs }"
-    v-on="$listeners"
-    @input="searchAuthors"
+  <base-token
+    :token-config="config"
+    :token-value="value"
+    :token-active="active"
+    :tokens-list-loading="loading"
+    :token-values="authors"
+    :fn-active-token-value="getActiveAuthor"
+    :default-token-values="defaultAuthors"
+    :preloaded-token-values="preloadedAuthors"
+    :recent-token-values-storage-key="config.recentTokenValuesStorageKey"
+    @fetch-token-values="fetchAuthorBySearchTerm"
   >
-    <template #view="{ inputValue }">
+    <template #view="{ viewTokenProps: { inputValue, activeTokenValue } }">
       <gl-avatar
-        v-if="activeAuthor"
+        v-if="activeTokenValue"
         :size="16"
-        :src="activeAuthorAvatar"
+        :src="getAvatarUrl(activeTokenValue)"
         shape="circle"
         class="gl-mr-2"
       />
-      <span>{{ activeAuthor ? activeAuthor.name : inputValue }}</span>
+      <span>{{ activeTokenValue ? activeTokenValue.name : inputValue }}</span>
     </template>
-    <template #suggestions>
+    <template #token-values-list="{ tokenValues }">
       <gl-filtered-search-suggestion
-        v-for="author in defaultAuthors"
-        :key="author.value"
-        :value="author.value"
+        v-for="author in tokenValues"
+        :key="author.username"
+        :value="author.username"
       >
-        {{ author.text }}
-      </gl-filtered-search-suggestion>
-      <gl-dropdown-divider v-if="defaultAuthors.length" />
-      <template v-if="loading">
-        <gl-filtered-search-suggestion v-if="currentUser.id" :value="currentUser.username">
-          <div class="gl-display-flex">
-            <gl-avatar :size="32" :src="avatarUrl(currentUser)" />
-            <div>
-              <div>{{ currentUser.name }}</div>
-              <div>@{{ currentUser.username }}</div>
-            </div>
+        <div class="gl-display-flex">
+          <gl-avatar :size="32" :src="getAvatarUrl(author)" />
+          <div>
+            <div>{{ author.name }}</div>
+            <div>@{{ author.username }}</div>
           </div>
-        </gl-filtered-search-suggestion>
-        <gl-loading-icon class="gl-mt-3" />
-      </template>
-      <template v-else>
-        <gl-filtered-search-suggestion
-          v-for="author in authors"
-          :key="author.username"
-          :value="author.username"
-        >
-          <div class="d-flex">
-            <gl-avatar :size="32" :src="avatarUrl(author)" />
-            <div>
-              <div>{{ author.name }}</div>
-              <div>@{{ author.username }}</div>
-            </div>
-          </div>
-        </gl-filtered-search-suggestion>
-      </template>
+        </div>
+      </gl-filtered-search-suggestion>
     </template>
-  </gl-filtered-search-token>
+  </base-token>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue
index b325f846934..6bd67a4cdf0 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue
@@ -48,6 +48,11 @@ export default {
       required: false,
       default: () => [],
     },
+    preloadedTokenValues: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
     recentTokenValuesStorageKey: {
       type: String,
       required: false,
@@ -158,6 +163,11 @@ export default {
         <slot name="token-values-list" :token-values="recentTokenValues"></slot>
         <gl-dropdown-divider />
       </template>
+      <slot
+        v-if="preloadedTokenValues.length"
+        name="token-values-list"
+        :token-values="preloadedTokenValues"
+      ></slot>
       <gl-loading-icon v-if="tokensListLoading" />
       <template v-else>
         <slot name="token-values-list" :token-values="availableTokenValues"></slot>
diff --git a/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss b/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss
index ece81fde078..d0cddd5b565 100644
--- a/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss
+++ b/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss
@@ -47,6 +47,14 @@ $top-level-item-color: $purple-900;
 
   @include context-header-collapsed;
 
+  .context-header {
+    @include gl-h-auto;
+
+    a {
+      @include gl-p-2;
+    }
+  }
+
   .sidebar-top-level-items > li {
     .sidebar-sub-level-items {
       &:not(.flyout-list) {
@@ -60,17 +68,16 @@ $top-level-item-color: $purple-900;
   }
 
   .toggle-sidebar-button {
-    padding: 16px;
-    width: $contextual-sidebar-collapsed-width - 1px;
+    width: $contextual-sidebar-collapsed-width;
 
-    .collapse-text,
-    .icon-chevron-double-lg-left {
+    .collapse-text {
       display: none;
     }
 
-    .icon-chevron-double-lg-right {
-      display: block;
-      margin: 0;
+    .icon-chevron-double-lg-left {
+      @include gl-rotate-180;
+      @include gl-display-block; // TODO: shouldn't be needed after the flag roll out
+      @include gl-m-0;
     }
   }
 }
@@ -83,12 +90,13 @@ $top-level-item-color: $purple-900;
   }
 
   .badge.badge-pill:not(.fly-out-badge),
-  .nav-item-name {
+  .nav-item-name,
+  .collapse-text {
     @include gl-sr-only;
   }
 
   .sidebar-top-level-items > li > a {
-    min-height: 45px;
+    min-height: unset;
   }
 
   .fly-out-top-item {
@@ -98,6 +106,10 @@ $top-level-item-color: $purple-900;
   .avatar-container {
     margin: 0 auto;
   }
+
+  li.active > a {
+    background-color: $indigo-900-alpha-008;
+  }
 }
 
 @mixin sub-level-items-flyout {
@@ -158,6 +170,7 @@ $top-level-item-color: $purple-900;
 
   @include gl-p-2;
   @include gl-mb-2;
+  @include gl-mt-0;
 
   .avatar-container {
     @include gl-font-weight-normal;
@@ -187,7 +200,6 @@ $top-level-item-color: $purple-900;
   @include gl-align-items-center;
   @include gl-rounded-base;
   @include gl-w-auto;
-  transition: padding $sidebar-transition-duration;
   margin: $sidebar-top-item-tb-margin $sidebar-top-item-lr-margin;
 
   &:hover {
@@ -226,22 +238,16 @@ $top-level-item-color: $purple-900;
 //
 
 .nav-sidebar {
+  @include gl-fixed;
+  @include gl-bottom-0;
+  @include gl-left-0;
   transition: width $sidebar-transition-duration, left $sidebar-transition-duration;
-  position: fixed;
   z-index: 600;
   width: $contextual-sidebar-width;
   top: $header-height;
-  bottom: 0;
-  left: 0;
   background-color: $gray-50;
   transform: translate3d(0, 0, 0);
 
-  &:not(.sidebar-collapsed-desktop) {
-    @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, sm)) {
-      box-shadow: inset -1px 0 0 $border-color, 2px 1px 3px $dropdown-shadow-color;
-    }
-  }
-
   &.sidebar-collapsed-desktop {
     @include collapse-contextual-sidebar;
   }
@@ -380,7 +386,11 @@ $top-level-item-color: $purple-900;
 .close-nav-button {
   @include side-panel-toggle;
   background-color: $gray-50;
+  border-top: 1px solid $border-color;
   color: $top-level-item-color;
+  position: fixed;
+  bottom: 0;
+  width: $contextual-sidebar-width;
 
   .collapse-text,
   .icon-chevron-double-lg-left,
@@ -389,22 +399,6 @@ $top-level-item-color: $purple-900;
   }
 }
 
-.toggle-sidebar-button,
-.close-nav-button {
-  position: fixed;
-  bottom: 0;
-  width: $contextual-sidebar-width - 1px;
-  border-top: 1px solid $border-color;
-
-  svg {
-    margin-right: 8px;
-  }
-
-  .icon-chevron-double-lg-right {
-    display: none;
-  }
-}
-
 .collapse-text {
   white-space: nowrap;
   overflow: hidden;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 164bdb19447..eb5cb19facd 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -9,7 +9,7 @@ $sidebar-transition-duration: 0.3s;
 $sidebar-breakpoint: 1024px;
 $default-transition-duration: 0.15s;
 $contextual-sidebar-width: 220px;
-$contextual-sidebar-collapsed-width: 50px;
+$contextual-sidebar-collapsed-width: 48px;
 $toggle-sidebar-height: 48px;
 
 /**
diff --git a/app/assets/stylesheets/page_bundles/escalation_policies.scss b/app/assets/stylesheets/page_bundles/escalation_policies.scss
index 3da8cce8a8a..00aae78421c 100644
--- a/app/assets/stylesheets/page_bundles/escalation_policies.scss
+++ b/app/assets/stylesheets/page_bundles/escalation_policies.scss
@@ -6,10 +6,6 @@
   width: 240px;
 }
 
-.rule-elapsed-minutes {
-  width: 56px;
-}
-
 .rule-close-icon {
   right: 1rem;
 }
diff --git a/app/views/layouts/nav/sidebar/_admin.html.haml b/app/views/layouts/nav/sidebar/_admin.html.haml
index e67dc750c4f..1e0362ce065 100644
--- a/app/views/layouts/nav/sidebar/_admin.html.haml
+++ b/app/views/layouts/nav/sidebar/_admin.html.haml
@@ -1,9 +1,12 @@
+- avatar_size = sidebar_refactor_disabled? ? 24 : 18
+- avatar_size_class = sidebar_refactor_disabled? ? 's40' : 's32'
+
 %aside.nav-sidebar.qa-admin-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?), 'aria-label': _('Admin navigation') }
   .nav-sidebar-inner-scroll
     .context-header
       = link_to admin_root_path, title: _('Admin Overview') do
-        %span.avatar-container.rect-avatar.s32.settings-avatar
-          = sprite_icon('admin', size: 18)
+        %span{ class: ['avatar-container', 'settings-avatar', 'rect-avatar', avatar_size_class] }
+          = sprite_icon('admin', size: avatar_size)
         %span.sidebar-context-title
           = _('Admin Area')
     %ul.sidebar-top-level-items{ data: { qa_selector: 'admin_sidebar_overview_submenu_content' } }
diff --git a/app/views/layouts/nav/sidebar/_context_menu_body.html.haml b/app/views/layouts/nav/sidebar/_context_menu_body.html.haml
index 1f56e0fefa8..d8409a5ebd1 100644
--- a/app/views/layouts/nav/sidebar/_context_menu_body.html.haml
+++ b/app/views/layouts/nav/sidebar/_context_menu_body.html.haml
@@ -1,5 +1,9 @@
+- avatar_size_class = sidebar_refactor_disabled? ? 's40' : 's32'
+- avatar_classes = ['avatar-container', 'rect-avatar', 'group-avatar']
+- avatar_classes << avatar_size_class
+
 = link_to group_path(@group), title: @group.name do
-  %span.avatar-container.rect-avatar.s32.group-avatar
-    = group_icon(@group, class: "avatar s32 avatar-tile")
+  %span{ class: avatar_classes }
+    = group_icon(@group, class: ['avatar', 'avatar-tile', avatar_size_class])
   %span.sidebar-context-title
     = @group.name
diff --git a/app/views/layouts/nav/sidebar/_profile.html.haml b/app/views/layouts/nav/sidebar/_profile.html.haml
index 236283badf4..daafabdb799 100644
--- a/app/views/layouts/nav/sidebar/_profile.html.haml
+++ b/app/views/layouts/nav/sidebar/_profile.html.haml
@@ -1,9 +1,12 @@
+- avatar_size = sidebar_refactor_disabled? ? 40 : 32
+- avatar_size_class = sidebar_refactor_disabled? ? 's40' : 's32'
+
 %aside.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?), **sidebar_tracking_attributes_by_object(current_user), 'aria-label': _('User settings') }
   .nav-sidebar-inner-scroll
     .context-header
       = link_to profile_path, title: _('Profile Settings') do
-        %span.avatar-container.s32.settings-avatar
-          = image_tag avatar_icon_for_user(current_user, 32), class: "avatar s32 avatar-tile js-sidebar-user-avatar", alt: current_user.name, data: { testid: 'sidebar-user-avatar' }
+        %span{ class: ['avatar-container', 'settings-avatar', avatar_size_class] }
+          = image_tag avatar_icon_for_user(current_user, avatar_size), class: ['avatar', 'avatar-tile', 'js-sidebar-user-avatar', avatar_size_class], alt: current_user.name, data: { testid: 'sidebar-user-avatar' }
         %span.sidebar-context-title= _('User Settings')
     %ul.sidebar-top-level-items
       = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do
diff --git a/app/views/profiles/emails/index.html.haml b/app/views/profiles/emails/index.html.haml
index d78b542ae8a..c14efa99555 100644
--- a/app/views/profiles/emails/index.html.haml
+++ b/app/views/profiles/emails/index.html.haml
@@ -22,15 +22,15 @@
     .account-well.gl-mb-3
       %ul
         %li
-          = _('Your Primary Email will be used for avatar detection.')
+          - profile_message = _('Your primary email is used for avatar detection. You can change it in your %{openingTag}profile settings%{closingTag}.') % { openingTag: "<a href='#{profile_path}'>".html_safe, closingTag: '</a>'.html_safe}
+          = profile_message.html_safe
         %li
-          = _('Your Commit Email will be used for web based operations, such as edits and merges.')
+          = _('Your commit email is used for web based operations, such as edits and merges.')
         %li
-          - address = profile_notifications_path
-          - notification_message = _('Your Default Notification Email will be used for account notifications if a %{openingTag}group-specific email address%{closingTag} is not set.') % { openingTag: "<a href='#{address}'>".html_safe, closingTag: '</a>'.html_safe}
+          - notification_message = _('Your default notification email is used for account notifications if a %{openingTag}group-specific email address%{closingTag} is not set.') % { openingTag: "<a href='#{profile_notifications_path}'>".html_safe, closingTag: '</a>'.html_safe}
           = notification_message.html_safe
         %li
-          = _('Your Public Email will be displayed on your public profile.')
+          = _('Your public email will be displayed on your public profile.')
         %li
           = _('All email addresses will be used to identify your commits.')
     %ul.content-list
diff --git a/app/views/shared/_sidebar_toggle_button.html.haml b/app/views/shared/_sidebar_toggle_button.html.haml
index 9d1970093b8..a5a411db8a0 100644
--- a/app/views/shared/_sidebar_toggle_button.html.haml
+++ b/app/views/shared/_sidebar_toggle_button.html.haml
@@ -1,8 +1,9 @@
 %a.toggle-sidebar-button.js-toggle-sidebar.qa-toggle-sidebar.rspec-toggle-sidebar{ role: "button", type: "button", title: "Toggle sidebar" }
   = sprite_icon('chevron-double-lg-left', css_class: 'icon-chevron-double-lg-left')
-  = sprite_icon('chevron-double-lg-right', css_class: 'icon-chevron-double-lg-right')
-  %span.collapse-text= _("Collapse sidebar")
+  - if sidebar_refactor_disabled?
+    = sprite_icon('chevron-double-lg-right', css_class: 'icon-chevron-double-lg-right')
+  %span.collapse-text.gl-ml-3= _("Collapse sidebar")
 
 = button_tag class: 'close-nav-button', type: 'button' do
   = sprite_icon('close')
-  %span.collapse-text= _("Close sidebar")
+  %span.collapse-text.gl-ml-3= _("Close sidebar")
diff --git a/app/views/shared/nav/_scope_menu_body.html.haml b/app/views/shared/nav/_scope_menu_body.html.haml
index 64b503bb327..cccff4d766b 100644
--- a/app/views/shared/nav/_scope_menu_body.html.haml
+++ b/app/views/shared/nav/_scope_menu_body.html.haml
@@ -1,5 +1,8 @@
+- avatar_size = sidebar_refactor_disabled? ? 40 : 32
+- avatar_size_class = sidebar_refactor_disabled? ? 's40' : 's32'
+
 = link_to scope_menu.link, **scope_menu.container_html_options do
-  %span.avatar-container.rect-avatar.s32.project-avatar
-    = source_icon(scope_menu.container, alt: scope_menu.title, class: 'avatar s32 avatar-tile', width: 32, height: 32)
+  %span{ class: ['avatar-container', 'rect-avatar', 'project-avatar', avatar_size_class] }
+    = source_icon(scope_menu.container, alt: scope_menu.title, class: ['avatar', 'avatar-tile', avatar_size_class], width: avatar_size, height: avatar_size)
   %span.sidebar-context-title
     = scope_menu.title