Merge remote-tracking branch 'upstream/master' into ce-to-ee-2018-06-29

app/assets/javascripts/diffs/components/diff_file_header.vue

@@ -201,7 +201,7 @@ export default {
 
     <div
       v-if="!diffFile.submodule && addMergeRequestButtons"
-      class="file-actions d-none d-md-block"
+      class="file-actions d-none d-sm-block"
     >
       <template
         v-if="diffFile.blob && diffFile.blob.readableText"

app/assets/javascripts/dispatcher.js

 /* eslint-disable consistent-return, no-new */
 
 import $ from 'jquery';
-import Flash from './flash';
 import GfmAutoComplete from './gfm_auto_complete';
 import { convertPermissionToBoolean } from './lib/utils/common_utils';
 import GlFieldErrors from './gl_field_errors';
 import Shortcuts from './shortcuts';
 import SearchAutocomplete from './search_autocomplete';
+import performanceBar from './performance_bar';
 
 function initSearch() {
   // Only when search form is present
@@ -72,9 +72,7 @@ function initGFMInput() {
 
 function initPerformanceBar() {
   if (document.querySelector('#js-peek')) {
-    import('./performance_bar')
-      .then(m => new m.default({ container: '#js-peek' })) // eslint-disable-line new-cap
-      .catch(() => Flash('Error loading performance bar module'));
+    performanceBar({ container: '#js-peek' });
   }
 }
 

app/assets/javascripts/merge_request_tabs.js

@@ -16,6 +16,7 @@ import Diff from './diff';
 import { localTimeAgo } from './lib/utils/datetime_utility';
 import syntaxHighlight from './syntax_highlight';
 import Notes from './notes';
+import { polyfillSticky } from './lib/utils/sticky';
 
 /* eslint-disable max-len */
 // MergeRequestTabs
@@ -426,7 +427,6 @@ export default class MergeRequestTabs {
 
   initAffix() {
     const $tabs = $('.js-tabs-affix');
-    const $fixedNav = $('.navbar-gitlab');
 
     // Screen space on small screens is usually very sparse
     // So we dont affix the tabs on these
@@ -439,21 +439,6 @@ export default class MergeRequestTabs {
     */
     if ($tabs.css('position') !== 'static') return;
 
-    const $diffTabs = $('#diff-notes-app');
-
-    $tabs
-      .off('affix.bs.affix affix-top.bs.affix')
-      .affix({
-        offset: {
-          top: () => $diffTabs.offset().top - $tabs.height() - $fixedNav.height(),
-        },
-      })
-      .on('affix.bs.affix', () => $diffTabs.css({ marginTop: $tabs.height() }))
-      .on('affix-top.bs.affix', () => $diffTabs.css({ marginTop: '' }));
-
-    // Fix bug when reloading the page already scrolling
-    if ($tabs.hasClass('affix')) {
-      $tabs.trigger('affix.bs.affix');
-    }
+    polyfillSticky($tabs);
   }
 }

app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue

@@ -109,6 +109,7 @@ export default {
             :key="i"
           >
             <job-component
+              :dropdown-length="job.size"
               :job="item"
               css-class-job-name="mini-pipeline-graph-dropdown-item"
               @pipelineActionRequestComplete="pipelineActionRequestComplete"

app/assets/javascripts/pipelines/components/graph/job_component.vue

@@ -46,6 +46,11 @@ export default {
       required: false,
       default: '',
     },
+    dropdownLength: {
+      type: Number,
+      required: false,
+      default: Infinity,
+    },
   },
   computed: {
     status() {
@@ -70,6 +75,10 @@ export default {
       return textBuilder.join(' ');
     },
 
+    tooltipBoundary() {
+      return this.dropdownLength < 5 ? 'viewport' : null;
+    },
+
     /**
      * Verifies if the provided job has an action path
      *
@@ -94,9 +103,9 @@ export default {
       :href="status.details_path"
       :title="tooltipText"
       :class="cssClassJobName"
+      :data-boundary="tooltipBoundary"
       data-container="body"
       data-html="true"
-      data-boundary="viewport"
       class="js-pipeline-graph-job-link"
     >
 

app/assets/javascripts/pipelines/components/stage.vue

@@ -186,32 +186,27 @@ export default {
       </i>
     </button>
 
-    <ul
+    <div
       class="dropdown-menu mini-pipeline-graph-dropdown-menu js-builds-dropdown-container"
       aria-labelledby="stageDropdown"
     >
-
-      <li
+      <loading-icon v-if="isLoading"/>
+      <ul
+        v-else
         class="js-builds-dropdown-list scrollable-menu"
       >
-
-        <loading-icon v-if="isLoading"/>
-
-        <ul
-          v-else
+        <li
+          v-for="job in dropdownContent"
+          :key="job.id"
         >
-          <li
-            v-for="job in dropdownContent"
-            :key="job.id"
-          >
-            <job-component
-              :job="job"
-              css-class-job-name="mini-pipeline-graph-dropdown-item"
-              @pipelineActionRequestComplete="pipelineActionRequestComplete"
-            />
-          </li>
-        </ul>
-      </li>
-    </ul>
+          <job-component
+            :dropdown-length="dropdownContent.length"
+            :job="job"
+            css-class-job-name="mini-pipeline-graph-dropdown-item"
+            @pipelineActionRequestComplete="pipelineActionRequestComplete"
+          />
+        </li>
+      </ul>
+    </div>
   </div>
 </template>

app/assets/stylesheets/bootstrap_migration.scss

@@ -128,6 +128,11 @@ table {
   border-spacing: 0;
 }
 
+.tooltip {
+  // Fix bootstrap4 bug whereby tooltips flicker when they are hovered over their borders
+  pointer-events: none;
+}
+
 .popover {
   font-size: 14px;
 }

app/assets/stylesheets/framework/files.scss

@@ -322,14 +322,17 @@ span.idiff {
 }
 
 .file-title-flex-parent {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: $gray-light;
-  border-bottom: 1px solid $border-color;
-  padding: 5px $gl-padding;
-  margin: 0;
-  border-radius: $border-radius-default $border-radius-default 0 0;
+  &,
+  .file-holder & {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: $gray-light;
+    border-bottom: 1px solid $border-color;
+    padding: 5px $gl-padding;
+    margin: 0;
+    border-radius: $border-radius-default $border-radius-default 0 0;
+  }
 
   .file-header-content {
     white-space: nowrap;
@@ -337,6 +340,17 @@ span.idiff {
     text-overflow: ellipsis;
     padding-right: 30px;
     position: relative;
+    width: auto;
+
+    @media (max-width: map-get($grid-breakpoints, sm)-1) {
+      width: 100%;
+    }
+  }
+
+  .file-holder & {
+    .file-actions {
+      position: static;
+    }
   }
 
   .btn-clipboard {

app/views/doorkeeper/authorizations/new.html.haml

@@ -35,7 +35,7 @@
               - @pre_auth.scopes.each do |scope|
                 %li
                   %strong= t scope, scope: [:doorkeeper, :scopes]
-                  .scope-description= t scope, scope: [:doorkeeper, :scope_desc]
+                  .text-secondary= t scope, scope: [:doorkeeper, :scope_desc]
         .form-actions.text-right
           = form_tag oauth_authorization_path, method: :delete, class: 'inline'  do
             = hidden_field_tag :client_id, @pre_auth.client.uid

changelogs/unreleased/47516-pipe-scroll.yml

+---
+title: Prevent pipeline job tooltip from scrolling off dropdown container
+merge_request:
+author:
+type: fixed

changelogs/unreleased/47661-merge-request-box-disappearing-on-chrome.yml

+---
+title: Replace deprecated bs.affix in merge request tabs with sticky polyfill
+merge_request:
+author:
+type: fixed

changelogs/unreleased/47865-changelog-for-style-updates.yml

+---
+title: Minor style changes to personal access token form and scope checkboxes
+merge_request: 20052
+author:
+type: other

changelogs/unreleased/48603-merge-request-refactor-title-and-copy-to-clipboard-button-are-behind-the-action-buttons.yml

+---
+title: Fix overlapping file title and file actions in MR changes tag
+merge_request:
+author:
+type: fixed

changelogs/unreleased/fix-tooltip-flicker.yml

+---
+title: Fix tooltip flickering bug
+merge_request:
+author:
+type: fixed

spec/javascripts/pipelines/graph/job_component_spec.js

@@ -135,4 +135,34 @@ describe('pipeline graph job component', () => {
       expect(component.$el.querySelector('.js-job-component-tooltip').getAttribute('data-original-title')).toEqual('test - success');
     });
   });
+
+  describe('tooltip placement', () => {
+    const tooltipBoundary = 'a[data-boundary="viewport"]';
+
+    it('does not set tooltip boundary by default', () => {
+      component = mountComponent(JobComponent, {
+        job: mockJob,
+      });
+
+      expect(component.$el.querySelector(tooltipBoundary)).toBeNull();
+    });
+
+    it('sets tooltip boundary to viewport for small dropdowns', () => {
+      component = mountComponent(JobComponent, {
+        job: mockJob,
+        dropdownLength: 1,
+      });
+
+      expect(component.$el.querySelector(tooltipBoundary)).not.toBeNull();
+    });
+
+    it('does not set tooltip boundary for large lists', () => {
+      component = mountComponent(JobComponent, {
+        job: mockJob,
+        dropdownLength: 7,
+      });
+
+      expect(component.$el.querySelector(tooltipBoundary)).toBeNull();
+    });
+  });
 });