Merge branch 'ce-to-ee-2018-03-13' into 'master'

CE upstream - 2018-03-13 15:27 UTC

See merge request gitlab-org/gitlab-ee!4948

app/assets/javascripts/notes/components/comment_form.vue

 <script>
   import $ from 'jquery';
-  import { mapActions, mapGetters } from 'vuex';
+  import { mapActions, mapGetters, mapState } from 'vuex';
   import _ from 'underscore';
   import Autosize from 'autosize';
   import { __, sprintf } from '~/locale';
@@ -53,6 +53,9 @@
         'getNotesData',
         'openState',
       ]),
+      ...mapState([
+        'isToggleStateButtonLoading',
+      ]),
       noteableDisplayName() {
         return this.noteableType.replace(/_/g, ' ');
       },
@@ -143,6 +146,7 @@
         'closeIssue',
         'reopenIssue',
         'toggleIssueLocalState',
+        'toggleStateButtonLoading',
       ]),
       setIsSubmitButtonDisabled(note, isSubmitting) {
         if (!_.isEmpty(note) && !isSubmitting) {
@@ -170,13 +174,14 @@
           if (this.noteType === constants.DISCUSSION) {
             noteData.data.note.type = constants.DISCUSSION_NOTE;
           }
+
           this.note = ''; // Empty textarea while being requested. Repopulate in catch
           this.resizeTextarea();
           this.stopPolling();
 
           this.saveNote(noteData)
             .then((res) => {
-              this.isSubmitting = false;
+              this.enableButton();
               this.restartPolling();
 
               if (res.errors) {
@@ -198,7 +203,7 @@
               }
             })
             .catch(() => {
-              this.isSubmitting = false;
+              this.enableButton();
               this.discard(false);
               const msg =
                 `Your comment could not be submitted!
@@ -220,6 +225,7 @@ Please check your network connection and try again.`;
             .then(() => this.enableButton())
             .catch(() => {
               this.enableButton();
+              this.toggleStateButtonLoading(false);
               Flash(
                 sprintf(
                   __('Something went wrong while closing the %{issuable}. Please try again later'),
@@ -232,6 +238,7 @@ Please check your network connection and try again.`;
             .then(() => this.enableButton())
             .catch(() => {
               this.enableButton();
+              this.toggleStateButtonLoading(false);
               Flash(
                 sprintf(
                   __('Something went wrong while reopening the %{issuable}. Please try again later'),
@@ -419,13 +426,13 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"
 
                 <loading-button
                   v-if="canUpdateIssue"
-                  :loading="isSubmitting"
+                  :loading="isToggleStateButtonLoading"
                   @click="handleSave(true)"
                   :container-class="[
                     actionButtonClassNames,
                     'btn btn-comment btn-comment-and-close js-action-button'
                   ]"
-                  :disabled="isSubmitting"
+                  :disabled="isToggleStateButtonLoading || isSubmitting"
                   :label="issueActionButtonTitle"
                 />
 

app/assets/javascripts/notes/stores/actions.js

@@ -71,21 +71,32 @@ export const toggleResolveNote = ({ commit }, { endpoint, isResolved, discussion
     commit(mutationType, res);
   });
 
-export const closeIssue = ({ commit, dispatch, state }) => service
+export const closeIssue = ({ commit, dispatch, state }) => {
+  dispatch('toggleStateButtonLoading', true);
+  return service
   .toggleIssueState(state.notesData.closePath)
   .then(res => res.json())
   .then((data) => {
     commit(types.CLOSE_ISSUE);
     dispatch('emitStateChangedEvent', data);
+    dispatch('toggleStateButtonLoading', false);
   });
+};
 
-export const reopenIssue = ({ commit, dispatch, state }) => service
+export const reopenIssue = ({ commit, dispatch, state }) => {
+  dispatch('toggleStateButtonLoading', true);
+  return service
   .toggleIssueState(state.notesData.reopenPath)
   .then(res => res.json())
   .then((data) => {
     commit(types.REOPEN_ISSUE);
     dispatch('emitStateChangedEvent', data);
+    dispatch('toggleStateButtonLoading', false);
   });
+};
+
+export const toggleStateButtonLoading = ({ commit }, value) =>
+  commit(types.TOGGLE_STATE_BUTTON_LOADING, value);
 
 export const emitStateChangedEvent = ({ commit, getters }, data) => {
   const event = new CustomEvent('issuable_vue_app:change', { detail: {

app/assets/javascripts/notes/stores/index.js

@@ -12,6 +12,9 @@ export default new Vuex.Store({
     targetNoteHash: null,
     lastFetchedAt: null,
 
+    // View layer
+    isToggleStateButtonLoading: false,
+
     // holds endpoints and permissions provided through haml
     notesData: {},
     userData: {},

app/assets/javascripts/notes/stores/mutation_types.js

@@ -17,3 +17,4 @@ export const UPDATE_DISCUSSION = 'UPDATE_DISCUSSION';
 // Issue
 export const CLOSE_ISSUE = 'CLOSE_ISSUE';
 export const REOPEN_ISSUE = 'REOPEN_ISSUE';
+export const TOGGLE_STATE_BUTTON_LOADING = 'TOGGLE_STATE_BUTTON_LOADING';

app/assets/javascripts/notes/stores/mutations.js

@@ -199,4 +199,8 @@ export default {
   [types.REOPEN_ISSUE](state) {
     Object.assign(state.noteableData, { state: constants.REOPENED });
   },
+
+  [types.TOGGLE_STATE_BUTTON_LOADING](state, value) {
+    Object.assign(state, { isToggleStateButtonLoading: value });
+  },
 };

app/assets/javascripts/performance_bar.js

@@ -14,8 +14,6 @@ export default class PerformanceBar {
 
   init(opts) {
     const $container = $(opts.container);
-    this.$sqlProfileLink = $container.find('.js-toggle-modal-peek-sql');
-    this.$sqlProfileModal = $container.find('#modal-peek-pg-queries');
     this.$lineProfileLink = $container.find('.js-toggle-modal-peek-line-profile');
     this.$lineProfileModal = $('#modal-peek-line-profile');
     this.initEventListeners();
@@ -23,7 +21,6 @@ export default class PerformanceBar {
   }
 
   initEventListeners() {
-    this.$sqlProfileLink.on('click', () => this.handleSQLProfileLink());
     this.$lineProfileLink.on('click', e => this.handleLineProfileLink(e));
     $(document).on('click', '.js-lineprof-file', PerformanceBar.toggleLineProfileFile);
   }
@@ -36,10 +33,6 @@ export default class PerformanceBar {
     }
   }
 
-  handleSQLProfileLink() {
-    PerformanceBar.toggleModal(this.$sqlProfileModal);
-  }
-
   handleLineProfileLink(e) {
     const lineProfilerParameter = getParameterValues('lineprofiler');
     const lineProfilerParameterRegex = new RegExp(`lineprofiler=${lineProfilerParameter[0]}`);

app/assets/stylesheets/pages/commits.scss

@@ -198,8 +198,6 @@
 
 .commit-actions {
   @media (min-width: $screen-sm-min) {
-    font-size: 0;
-
     .fa-spinner {
       font-size: 12px;
     }
@@ -208,7 +206,7 @@
   .ci-status-link {
     display: inline-block;
     position: relative;
-    top: 1px;
+    top: 2px;
   }
 
   .btn-clipboard,
@@ -230,7 +228,7 @@
 
   .ci-status-icon {
     position: relative;
-    top: 1px;
+    top: 2px;
   }
 }
 

app/helpers/import_helper.rb

 module ImportHelper
+  include ::Gitlab::Utils::StrongMemoize
+
   def has_ci_cd_only_params?
     false
   end
@@ -75,17 +77,18 @@ module ImportHelper
   private
 
   def github_project_url(full_path)
-    "#{github_root_url}/#{full_path}"
+    URI.join(github_root_url, full_path).to_s
   end
 
   def github_root_url
-    return @github_url if defined?(@github_url)
+    strong_memoize(:github_url) do
+      provider = Gitlab::Auth::OAuth::Provider.config_for('github')
 
-    provider = Gitlab.config.omniauth.providers.find { |p| p.name == 'github' }
-    @github_url = provider.fetch('url', 'https://github.com') if provider
+      provider&.dig('url').presence || 'https://github.com'
+    end
   end
 
   def gitea_project_url(full_path)
-    "#{@gitea_host_url.sub(%r{/+\z}, '')}/#{full_path}"
+    URI.join(@gitea_host_url, full_path).to_s
   end
 end

app/helpers/javascript_helper.rb

@@ -2,9 +2,4 @@ module JavascriptHelper
   def page_specific_javascript_tag(js)
     javascript_include_tag asset_path(js)
   end
-
-  # deprecated; use webpack_bundle_tag directly instead
-  def page_specific_javascript_bundle_tag(bundle)
-    webpack_bundle_tag(bundle)
-  end
 end

app/views/peek/views/_gc.html.haml

+- local_assigns.fetch(:view)
+
+%span.bold
+  %span{ title: 'Invoke Time', data: { defer_to: "#{view.defer_key}-gc_time" } }...
+  \/
+  %span{ title: 'Invoke Count', data: { defer_to: "#{view.defer_key}-invokes" } }...
+gc

app/views/peek/views/_gitaly.html.haml

 - local_assigns.fetch(:view)
 
-%strong
-  %span{ data: { defer_to: "#{view.defer_key}-duration" } } ...
+%button.btn-blank.btn-link.bold{ type: 'button', data: { toggle: 'modal', target: '#modal-peek-gitaly-details' } }
+  %span{ data: { defer_to: "#{view.defer_key}-duration" } }...
   \/
-  %span{ data: { defer_to: "#{view.defer_key}-calls" } } ...
-  Gitaly
+  %span{ data: { defer_to: "#{view.defer_key}-calls" } }...
+#modal-peek-gitaly-details.modal{ tabindex: -1, role: 'dialog' }
+  .modal-dialog.modal-full
+    .modal-content
+      .modal-header
+        %button.close{ type: 'button', data: { dismiss: 'modal' }, 'aria-label' => 'Close' }
+          %span{ 'aria-hidden' => 'true' }
+            ×
+        %h4
+          Gitaly requests
+      .modal-body{ data: { defer_to: "#{view.defer_key}-details" } }...
+gitaly

app/views/peek/views/_redis.html.haml

+- local_assigns.fetch(:view)
+
+%span.bold
+  %span{ data: { defer_to: "#{view.defer_key}-duration" } }...
+  \/
+  %span{ data: { defer_to: "#{view.defer_key}-calls" } }...
+redis

app/views/peek/views/_sidekiq.html.haml

+- local_assigns.fetch(:view)
+
+%span.bold
+  %span{ data: { defer_to: "#{view.defer_key}-duration" } }...
+  \/
+  %span{ data: { defer_to: "#{view.defer_key}-calls" } }...
+sidekiq

app/views/peek/views/_sql.html.haml

-%strong
-  %a.js-toggle-modal-peek-sql
-    %span{ data: { defer_to: "#{view.defer_key}-duration" } }...
-    \/
-    %span{ data: { defer_to: "#{view.defer_key}-calls" } }...
+%button.btn-blank.btn-link.bold{ type: 'button', data: { toggle: 'modal', target: '#modal-peek-pg-queries' } }
+  %span{ data: { defer_to: "#{view.defer_key}-duration" } }...
+  \/
+  %span{ data: { defer_to: "#{view.defer_key}-calls" } }...
 #modal-peek-pg-queries.modal{ tabindex: -1 }
   .modal-dialog.modal-full
     .modal-content
       .modal-header
-        %button.close.btn.btn-link.btn-sm{ type: 'button', data: { dismiss: 'modal' } } X
+        %button.close{ type: 'button', data: { dismiss: 'modal' }, 'aria-label' => 'Close' }
+          %span{ 'aria-hidden' => 'true' }
+            ×
         %h4
           SQL queries
       .modal-body{ data: { defer_to: "#{view.defer_key}-queries" } }...

app/views/shared/issuable/form/_contribution.html.haml

@@ -14,7 +14,7 @@
     .checkbox
       = form.label :allow_maintainer_to_push do
         = form.check_box :allow_maintainer_to_push, disabled: !issuable.can_allow_maintainer_to_push?(current_user)
-        = _('Allow edits from maintainers')
+        = _('Allow edits from maintainers.')
         = link_to 'About this feature', help_page_path('user/project/merge_requests/maintainer_access')
         .help-block
           = allow_maintainer_push_unavailable_reason(issuable)

changelogs/unreleased/34604-fix-generated-url-for-external-repository.yml

+---
+title: Fix generated URL when listing repoitories for import
+merge_request: 17692
+author:
+type: fixed

changelogs/unreleased/35475-lazy-diff.yml

+---
+title: lazy load diffs on merge request discussions
+merge_request:
+author:
+type: performance

changelogs/unreleased/43720-update-fe-webpack-docs.yml

+---
+title: Update documentation to reflect current minimum required versions of node and
+  yarn
+merge_request: 17706
+author:
+type: other

changelogs/unreleased/43805-list-gitaly-calls-and-arguments-in-the-performance-bar.yml

+---
+title: Add Gitaly call details to performance bar
+merge_request:
+author:
+type: added

changelogs/unreleased/44149-issue-comment-buttons.yml

+---
+title: Fix broken loading state for close issue button
+merge_request:
+author:
+type: fixed

config/initializers/peek.rb

@@ -16,11 +16,11 @@ else
 end
 
 Peek.into PEEK_DB_VIEW
+Peek.into Peek::Views::Gitaly
+Peek.into Peek::Views::Rblineprof
 Peek.into Peek::Views::Redis
 Peek.into Peek::Views::Sidekiq
-Peek.into Peek::Views::Rblineprof
 Peek.into Peek::Views::GC
-Peek.into Peek::Views::Gitaly
 
 # rubocop:disable Naming/ClassAndModuleCamelCase
 class PEEK_DB_CLIENT

doc/administration/monitoring/performance/performance_bar.md

@@ -11,10 +11,12 @@ It allows you to see (from left to right):
 - the timing of the page (backend, frontend)
 - time taken and number of DB queries, click through for details of these queries
 ![SQL profiling using the Performance Bar](img/performance_bar_sql_queries.png)
-- time taken and number of calls to Redis
-- time taken and number of background jobs created by Sidekiq
+- time taken and number of [Gitaly] calls, click through for details of these calls
+![Gitaly profiling using the Performance Bar](img/performance_bar_gitaly_calls.png)
 - profile of the code used to generate the page, line by line for either _all_, _app & lib_ , or _views_. In the profile view, the numbers in the left panel represent wall time, cpu time, and number of calls (based on [rblineprof](https://github.com/tmm1/rblineprof)).
 ![Line profiling using the Performance Bar](img/performance_bar_line_profiling.png)
+- time taken and number of calls to Redis
+- time taken and number of background jobs created by Sidekiq
 - time taken and number of Ruby GC calls
 
 ## Enable the Performance Bar via the Admin panel
@@ -39,3 +41,5 @@ You can toggle the Bar using the same shortcut.
 ![GitLab Performance Bar Admin Settings](img/performance_bar_configuration_settings.png)
 
 ---
+
+[Gitaly]: ../../gitaly/index.md

doc/development/ee_features.md

@@ -360,27 +360,15 @@ Instead place EE specs in the `ee/spec` folder.
 
 ## JavaScript code in `assets/javascripts/`
 
-To separate EE-specific JS-files we can also move the files into an `ee` folder.
+To separate EE-specific JS-files we should also move the files into an `ee` folder.
 
 For example there can be an
 `app/assets/javascripts/protected_branches/protected_branches_bundle.js` and an
 EE counterpart
 `ee/app/assets/javascripts/protected_branches/protected_branches_bundle.js`.
 
-That way we can create a separate webpack bundle in `webpack.config.js`:
-
-```javascript
-    protected_branches:    '~/protected_branches',
-    ee_protected_branches: 'ee/protected_branches/protected_branches_bundle.js',
-```
-
-With the separate bundle in place, we can decide which bundle to load inside the
-view, using the `page_specific_javascript_bundle_tag` helper.
-
-```haml
-- content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('protected_branches')
-```
+See the frontend guide [performance section](./fe_guide/performance.md) for
+information on managing page-specific javascript within EE.
 
 ## SCSS code in `assets/stylesheets`
 

doc/development/fe_guide/index.md

@@ -14,8 +14,8 @@ support through [webpack][webpack].
 We also utilize [webpack][webpack] to handle the bundling, minification, and
 compression of our assets.
 
-Working with our frontend assets requires Node (v4.3 or greater) and Yarn
-(v0.17 or greater).  You can find information on how to install these on our
+Working with our frontend assets requires Node (v6.0 or greater) and Yarn
+(v1.2 or greater).  You can find information on how to install these on our
 [installation guide][install].
 
 [jQuery][jquery] is used throughout the application's JavaScript, with

doc/development/fe_guide/performance.md

@@ -23,7 +23,7 @@ controlled by the server.
 1. The backend code will most likely be using etags. You do not and should not check for status
 `304 Not Modified`. The browser will transform it for you.
 
-### Lazy Loading
+### Lazy Loading Images
 
 To improve the time to first render we are using lazy loading for images. This works by setting 
 the actual image source on the `data-src` attribute. After the HTML is rendered and JavaScript is loaded, 
@@ -47,41 +47,103 @@ properties once, and handle the actual animation with transforms.
 
 ## Reducing Asset Footprint
 
-### Page-specific JavaScript
+### Universal code
 
-Certain pages may require the use of a third party library, such as [d3][d3] for
-the User Activity Calendar and [Chart.js][chartjs] for the Graphs pages. These
-libraries increase the page size significantly, and impact load times due to
-bandwidth bottlenecks and the browser needing to parse more JavaScript.
-
-In cases where libraries are only used on a few specific pages, we use
-"page-specific JavaScript" to prevent the main `main.js` file from
-becoming unnecessarily large.
-
-Steps to split page-specific JavaScript from the main `main.js`:
-
-1. Create a directory for the specific page(s), e.g. `graphs/`.
-1. In that directory, create a `namespace_bundle.js` file, e.g. `graphs_bundle.js`.
-1. Add the new "bundle" file to the list of entry files in `config/webpack.config.js`.
-  - For example: `graphs: './graphs/graphs_bundle.js',`.
-1. Move code reliant on these libraries into the `graphs` directory.
-1. In `graphs_bundle.js` add CommonJS `require('./path_to_some_component.js');` statements to load any other files in this directory. Make sure to use relative urls.
-1. In the relevant views, add the scripts to the page with the following:
-
-```haml
-- content_for :page_specific_javascripts do
-  = webpack_bundle_tag 'lib_chart'
-  = webpack_bundle_tag 'graphs'
-```
+Code that is contained within `main.js` and `commons/index.js` are loaded and
+run on _all_ pages. **DO NOT ADD** anything to these files unless it is truly
+needed _everywhere_. These bundles include ubiquitous libraries like `vue`,
+`axios`, and `jQuery`, as well as code for the main navigation and sidebar.
+Where possible we should aim to remove modules from these bundles to reduce our
+code footprint.
+
+### Page-specific JavaScript
 
-The above loads `chart.js` and `graphs_bundle.js` for this page only. `chart.js`
-is separated from the bundle file so it can be cached separately from the bundle
-and reused for other pages that also rely on the library. For an example, see
-[this Haml file][page-specific-js-example].
+Webpack has been configured to automatically generate entry point bundles based
+on the file structure within `app/assets/javascripts/pages/*`. The directories
+within the `pages` directory correspond to Rails controllers and actions. These
+auto-generated bundles will be automatically included on the corresponding
+pages.
+
+For example, if you were to visit [gitlab.com/gitlab-org/gitlab-ce/issues](https://gitlab.com/gitlab-org/gitlab-ce/issues),
+you would be accessing the `app/controllers/projects/issues_controller.rb`
+controller with the `index` action. If a corresponding file exists at
+`pages/projects/issues/index/index.js`, it will be compiled into a webpack
+bundle and included on the page.
+
+> **Note:** Previously we had encouraged the use of
+> `content_for :page_specific_javascripts` within haml files, along with
+> manually generated webpack bundles. However under this new system you should
+> not ever need to manually add an entry point to the `webpack.config.js` file.
+
+> **Tip:**
+> If you are unsure what controller and action corresponds to a given page, you
+> can find this out by inspecting `document.body.dataset.page` within your
+> browser's developer console while on any page within gitlab.
+
+#### Important Considerations:
+
+- **Keep Entry Points Lite:**
+  Page-specific javascript entry points should be as lite as possible.  These
+  files are exempt from unit tests, and should be used primarily for
+  instantiation and dependency injection of classes and methods that live in
+  modules outside of the entry point script.  Just import, read the DOM,
+  instantiate, and nothing else.
+
+- **Entry Points May Be Asynchronous:**
+  _DO NOT ASSUME_ that the DOM has been fully loaded and available when an
+  entry point script is run.  If you require that some code be run after the
+  DOM has loaded, you should attach an event handler to the `DOMContentLoaded`
+  event with:
+
+    ```javascript
+    import initMyWidget from './my_widget';
+  
+    document.addEventListener('DOMContentLoaded', () => {
+      initMyWidget();
+    });
+    ```
+
+- **Supporting Module Placement:**  
+    - If a class or a module is _specific to a particular route_, try to locate
+      it close to the entry point it will be used. For instance, if
+      `my_widget.js` is only imported within `pages/widget/show/index.js`, you
+      should place the module at `pages/widget/show/my_widget.js` and import it
+      with a relative path (e.g. `import initMyWidget from './my_widget';`).
+      
+    - If a class or module is _used by multiple routes_, place it within a
+      shared directory at the closest common parent directory for the entry
+      points that import it.  For example, if `my_widget.js` is imported within
+      both `pages/widget/show/index.js` and `pages/widget/run/index.js`, then
+      place the module at `pages/widget/shared/my_widget.js` and import it with
+      a relative path if possible (e.g. `../shared/my_widget`).
+
+- **Enterprise Edition Caveats:**
+  For GitLab Enterprise Edition, page-specific entry points will override their
+  Community Edition counterparts with the same name, so if
+  `ee/app/assets/javascripts/pages/foo/bar/index.js` exists, it will take
+  precedence over `app/assets/javascripts/pages/foo/bar/index.js`.  If you want
+  to minimize duplicate code, you can import one entry point from the other.
+  This is not done automatically to allow for flexibility in overriding
+  functionality.
 
 ### Code Splitting
 
-> *TODO* flesh out this section once webpack is ready for code-splitting
+For any code that does not need to be run immediately upon page load, (e.g.
+modals, dropdowns, and other behaviors that can be lazy-loaded), you can split
+your module into asynchronous chunks with dynamic import statements.  These
+imports return a Promise which will be resolved once the script has loaded:
+
+```javascript
+import(/* webpackChunkName: 'emoji' */ '~/emoji')
+  .then(/* do something */)
+  .catch(/* report error */)
+```
+
+Please try to use `webpackChunkName` when generating these dynamic imports as
+it will provide a deterministic filename for the chunk which can then be cached
+the browser across GitLab versions.
+
+More information is available in [webpack's code splitting documentation](https://webpack.js.org/guides/code-splitting/#dynamic-imports).
 
 ### Minimizing page size
 
@@ -95,7 +157,8 @@ General tips:
 - Prefer font formats with better compression, e.g. WOFF2 is better than WOFF, which is better than TTF.
 - Compress and minify assets wherever possible (For CSS/JS, Sprockets and webpack do this for us).
 - If some functionality can reasonably be achieved without adding extra libraries, avoid them.
-- Use page-specific JavaScript as described above to dynamically load libraries that are only needed on certain pages.
+- Use page-specific JavaScript as described above to load libraries that are only needed on certain pages.
+- Use code-splitting dynamic imports wherever possible to lazy-load code that is not needed initially.
 - [High Performance Animations][high-perf-animations]
 
 -------
@@ -112,8 +175,5 @@ General tips:
 [pagespeed-insights]: https://developers.google.com/speed/pagespeed/insights/
 [google-devtools-profiling]: https://developers.google.com/web/tools/chrome-devtools/profile/?hl=en
 [browser-diet]: https://browserdiet.com/
-[d3]: https://d3js.org/
-[chartjs]: http://www.chartjs.org/
-[page-specific-js-example]: https://gitlab.com/gitlab-org/gitlab-ce/blob/13bb9ed77f405c5f6ee4fdbc964ecf635c9a223f/app/views/projects/graphs/_head.html.haml#L6-8
 [high-perf-animations]: https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
 [flip]: https://aerotwist.com/blog/flip-your-animations/

doc/development/new_fe_guide/development/security.md

 # Security
 
-> TODO: Add content
+## Avoid inline scripts and styles
+
+Inline scripts and styles should be avoided in almost all cases. In an effort to protect users from [XSS vulnerabilities](https://en.wikipedia.org/wiki/Cross-site_scripting), we will be disabling inline scripts using Content Security Policy.
+
+## Including external resources
+
+External fonts, CSS, and JavaScript should never be used with the exception of Google Analytics and Piwik - and only when the instance has enabled it. Assets should always be hosted and served locally from the GitLab instance. Embedded resources via `iframes` should never be used except in certain circumstances such as with ReCaptcha, which cannot be used without an `iframe`.
+
+## Resources for security testing
+
+- [Mozilla's HTTP Observatory CLI](https://github.com/mozilla/http-observatory-cli)
+- [Qualys SSL Labs Server Test](https://www.ssllabs.com/ssltest/analyze.html)

doc/install/installation.md

@@ -162,13 +162,14 @@ page](https://golang.org/dl).
 
 ## 4. Node
 
-Since GitLab 8.17, GitLab requires the use of node >= v4.3.0 to compile
-javascript assets, and yarn >= v0.17.0 to manage javascript dependencies.
-In many distros the versions provided by the official package  repositories
-are out of date, so we'll need to install through the following commands:
-
-    # install node v7.x
-    curl --location https://deb.nodesource.com/setup_7.x | sudo bash -
+Since GitLab 8.17, GitLab requires the use of Node to compile javascript
+assets, and Yarn to manage javascript dependencies. The current minimum
+requirements for these are node >= v6.0.0 and yarn >= v1.2.0. In many distros
+the versions provided by the official package repositories are out of date, so
+we'll need to install through the following commands:
+
+    # install node v8.x
+    curl --location https://deb.nodesource.com/setup_8.x | sudo bash -
     sudo apt-get install -y nodejs
 
     curl --silent --show-error https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -

doc/update/10.5-to-10.6.md

@@ -56,8 +56,8 @@ sudo gem install bundler --no-ri --no-rdoc
 
 ### 4. Update Node
 
-GitLab now runs [webpack](http://webpack.js.org) to compile frontend assets.
-We require a minimum version of node v6.0.0.
+GitLab utilizes [webpack](http://webpack.js.org) to compile frontend assets.
+This requires a minimum version of node v6.0.0.
 
 You can check which version you are running with `node -v`. If you are running
 a version older than `v6.0.0` you will need to update to a newer version. You
@@ -66,8 +66,8 @@ from source at the nodejs.org website.
 
 <https://nodejs.org/en/download/>
 
-Since 8.17, GitLab requires the use of yarn `>= v0.17.0` to manage
-JavaScript dependencies.
+GitLab also requires the use of yarn `>= v1.2.0` to manage JavaScript
+dependencies.
 
 ```bash
 curl --silent --show-error https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -

lib/generators/rails/post_deployment_migration/post_deployment_migration_generator.rb

@@ -3,7 +3,7 @@ require 'rails/generators'
 module Rails
   class PostDeploymentMigrationGenerator < Rails::Generators::NamedBase
     def create_migration_file
-      timestamp = Time.now.strftime('%Y%m%d%H%I%S')
+      timestamp = Time.now.strftime('%Y%m%d%H%M%S')
 
       template "migration.rb", "db/post_migrate/#{timestamp}_#{file_name}.rb"
     end

lib/gitlab/auth/saml/config.rb

@@ -4,7 +4,7 @@ module Gitlab
       class Config
         class << self
           def options
-            Gitlab.config.omniauth.providers.find { |provider| provider.name == 'saml' }
+            Gitlab::Auth::OAuth::Provider.config_for('saml')
           end
 
           def groups

lib/gitlab/gitaly_client.rb

@@ -119,6 +119,9 @@ module Gitlab
     #
     def self.call(storage, service, rpc, request, remote_storage: nil, timeout: nil)
       start = Gitlab::Metrics::System.monotonic_time
+      request_hash = request.is_a?(Google::Protobuf::MessageExts) ? request.to_h : {}
+      @current_call_id ||= SecureRandom.uuid
+
       enforce_gitaly_request_limits(:call)
 
       kwargs = request_kwargs(storage, timeout, remote_storage: remote_storage)
@@ -135,6 +138,10 @@ module Gitlab
       gitaly_controller_action_duration_seconds.observe(
         current_transaction_labels.merge(gitaly_service: service.to_s, rpc: rpc.to_s),
         duration)
+
+      add_call_details(id: @current_call_id, feature: service, duration: duration, request: request_hash)
+
+      @current_call_id = nil
     end
 
     def self.handle_grpc_unavailable!(ex)
@@ -252,12 +259,16 @@ module Gitlab
           feature_stack.unshift(feature)
           begin
             start = Gitlab::Metrics::System.monotonic_time
+            @current_call_id = SecureRandom.uuid
+            call_details = { id: @current_call_id }
             yield is_enabled
           ensure
             total_time = Gitlab::Metrics::System.monotonic_time - start
             gitaly_migrate_call_duration_seconds.observe({ gitaly_enabled: is_enabled, feature: feature }, total_time)
             feature_stack.shift
             Thread.current[:gitaly_feature_stack] = nil if feature_stack.empty?
+
+            add_call_details(call_details.merge(feature: feature, duration: total_time))
           end
         end
       end
@@ -344,6 +355,22 @@ module Gitlab
       end
     end
 
+    def self.add_call_details(details)
+      id = details.delete(:id)
+
+      return unless id && RequestStore.active? && RequestStore.store[:peek_enabled]
+
+      RequestStore.store['gitaly_call_details'] ||= {}
+      RequestStore.store['gitaly_call_details'][id] ||= {}
+      RequestStore.store['gitaly_call_details'][id].merge!(details)
+    end
+
+    def self.list_call_details
+      return {} unless RequestStore.active? && RequestStore.store[:peek_enabled]
+
+      RequestStore.store['gitaly_call_details'] || {}
+    end
+
     def self.expected_server_version
       path = Rails.root.join(SERVER_VERSION_FILE)
       path.read.chomp

lib/gitlab/github_import/client.rb

@@ -197,10 +197,7 @@ module Gitlab
       end
 
       def github_omniauth_provider
-        @github_omniauth_provider ||=
-          Gitlab.config.omniauth.providers
-                .find { |provider| provider.name == 'github' }
-                .to_h
+        @github_omniauth_provider ||= Gitlab::Auth::OAuth::Provider.config_for('github').to_h
       end
 
       def rate_limit_counter

lib/gitlab/gitlab_import/client.rb

@@ -72,7 +72,7 @@ module Gitlab
       end
 
       def config
-        Gitlab.config.omniauth.providers.find {|provider| provider.name == "gitlab"}
+        Gitlab::Auth::OAuth::Provider.config_for('gitlab')
       end
 
       def gitlab_options

lib/gitlab/legacy_github_import/client.rb

@@ -83,7 +83,7 @@ module Gitlab
       end
 
       def config
-        Gitlab.config.omniauth.providers.find { |provider| provider.name == "github" }
+        Gitlab::Auth::OAuth::Provider.config_for('github')
       end
 
       def github_options

lib/google_api/auth.rb

@@ -32,7 +32,7 @@ module GoogleApi
     private
 
     def config
-      Gitlab.config.omniauth.providers.find { |provider| provider.name == "google_oauth2" }
+      Gitlab::Auth::OAuth::Provider.config_for('google_oauth2')
     end
 
     def client

lib/peek/views/gitaly.rb

@@ -10,11 +10,29 @@ module Peek
       end
 
       def results
-        { duration: formatted_duration, calls: calls }
+        {
+          duration: formatted_duration,
+          calls: calls,
+          details: details
+        }
       end
 
       private
 
+      def details
+        ::Gitlab::GitalyClient.list_call_details
+          .values
+          .sort { |a, b| b[:duration] <=> a[:duration] }
+          .map(&method(:format_call_details))
+      end
+
+      def format_call_details(call)
+        pretty_request = call[:request]&.reject { |k, v| v.blank? }.to_h.pretty_inspect
+
+        call.merge(duration: (call[:duration] * 1000).round(3),
+                   request: pretty_request || {})
+      end
+
       def formatted_duration
         ms = duration * 1000
         if ms >= 1000

locale/gitlab.pot

@@ -8,8 +8,8 @@ msgid ""
 msgstr ""
 "Project-Id-Version: gitlab 1.0.0\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2018-03-08 09:20+0100\n"
-"PO-Revision-Date: 2018-03-08 09:20+0100\n"
+"POT-Creation-Date: 2018-03-13 20:43+0100\n"
+"PO-Revision-Date: 2018-03-13 20:43+0100\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
 "Language: \n"
@@ -118,6 +118,9 @@ msgstr ""
 msgid "2FA enabled"
 msgstr ""
 
+msgid "<strong>Removes</strong> source branch"
+msgstr ""
+
 msgid "A collection of graphs regarding Continuous Integration"
 msgstr ""
 
@@ -127,6 +130,9 @@ msgstr ""
 msgid "A project is where you house your files (repository), plan your work (issues), and publish your documentation (wiki), %{among_other_things_link}."
 msgstr ""
 
+msgid "A user with write access to the source branch selected this option"
+msgstr ""
+
 msgid "About auto deploy"
 msgstr ""
 
@@ -241,7 +247,7 @@ msgstr ""
 msgid "All features are enabled for blank projects, from templates, or when importing, but you can disable them afterward in the project settings."
 msgstr ""
 
-msgid "Allow edits from maintainers"
+msgid "Allow edits from maintainers."
 msgstr ""
 
 msgid "Allows you to add and manage Kubernetes clusters."
@@ -1396,6 +1402,9 @@ msgstr ""
 msgid "Create file"
 msgstr ""
 
+msgid "Create group label"
+msgstr ""
+
 msgid "Create lists from labels. Issues with that label appear in that list."
 msgstr ""
 
@@ -1420,6 +1429,9 @@ msgstr ""
 msgid "Create new..."
 msgstr ""
 
+msgid "Create project label"
+msgstr ""
+
 msgid "CreateNewFork|Fork"
 msgstr ""
 
@@ -2387,9 +2399,15 @@ msgstr ""
 msgid "Make everyone on your team more productive regardless of their location. GitLab Geo creates read-only mirrors of your GitLab instance so you can reduce the time it takes to clone and fetch large repos."
 msgstr ""
 
+msgid "Manage group labels"
+msgstr ""
+
 msgid "Manage labels"
 msgstr ""
 
+msgid "Manage project labels"
+msgstr ""
+
 msgid "Mar"
 msgstr ""
 
@@ -2905,9 +2923,15 @@ msgstr ""
 msgid "Pipelines|Loading Pipelines"
 msgstr ""
 
+msgid "Pipelines|Project cache successfully reset."
+msgstr ""
+
 msgid "Pipelines|Run Pipeline"
 msgstr ""
 
+msgid "Pipelines|Something went wrong while cleaning runners cache."
+msgstr ""
+
 msgid "Pipelines|There are currently no %{scope} pipelines."
 msgstr ""
 
@@ -3040,9 +3064,6 @@ msgstr ""
 msgid "Project avatar in repository: %{link}"
 msgstr ""
 
-msgid "Project cache successfully reset."
-msgstr ""
-
 msgid "Project details"
 msgstr ""
 
@@ -4178,7 +4199,7 @@ msgstr ""
 msgid "Turn on Service Desk"
 msgstr ""
 
-msgid "Unable to reset project cache."
+msgid "Unable to load the diff."
 msgstr ""
 
 msgid "Unknown"
@@ -4247,12 +4268,18 @@ msgstr ""
 msgid "View file @ "
 msgstr ""
 
+msgid "View group labels"
+msgstr ""
+
 msgid "View labels"
 msgstr ""
 
 msgid "View open merge request"
 msgstr ""
 
+msgid "View project labels"
+msgstr ""
+
 msgid "View replaced file @ "
 msgstr ""
 

package.json

@@ -12,7 +12,7 @@
     "webpack-prod": "NODE_ENV=production webpack --config config/webpack.config.js"
   },
   "dependencies": {
-    "@gitlab-org/gitlab-svgs": "^1.13.0",
+    "@gitlab-org/gitlab-svgs": "^1.14.0",
     "autosize": "^4.0.0",
     "axios": "^0.17.1",
     "babel-core": "^6.26.0",

spec/helpers/import_helper_spec.rb

@@ -27,25 +27,48 @@ describe ImportHelper do
 
   describe '#provider_project_link' do
     context 'when provider is "github"' do
+      let(:github_server_url) { nil }
+
+      before do
+        setting = Settingslogic.new('name' => 'github')
+        setting['url'] = github_server_url if github_server_url
+
+        allow(Gitlab.config.omniauth).to receive(:providers).and_return([setting])
+      end
+
       context 'when provider does not specify a custom URL' do
         it 'uses default GitHub URL' do
-          allow(Gitlab.config.omniauth).to receive(:providers)
-          .and_return([Settingslogic.new('name' => 'github')])
-
           expect(helper.provider_project_link('github', 'octocat/Hello-World'))
           .to include('href="https://github.com/octocat/Hello-World"')
         end
       end
 
       context 'when provider specify a custom URL' do
+        let(:github_server_url) { 'https://github.company.com' }
+
         it 'uses custom URL' do
-          allow(Gitlab.config.omniauth).to receive(:providers)
-          .and_return([Settingslogic.new('name' => 'github', 'url' => 'https://github.company.com')])
+          expect(helper.provider_project_link('github', 'octocat/Hello-World'))
+          .to include('href="https://github.company.com/octocat/Hello-World"')
+        end
+      end
+
+      context "when custom URL contains a '/' char at the end" do
+        let(:github_server_url) { 'https://github.company.com/' }
 
+        it "doesn't render double slash" do
           expect(helper.provider_project_link('github', 'octocat/Hello-World'))
           .to include('href="https://github.company.com/octocat/Hello-World"')
         end
       end
+
+      context 'when provider is missing' do
+        it 'uses the default URL' do
+          allow(Gitlab.config.omniauth).to receive(:providers).and_return([])
+
+          expect(helper.provider_project_link('github', 'octocat/Hello-World'))
+          .to include('href="https://github.com/octocat/Hello-World"')
+        end
+      end
     end
 
     context 'when provider is "gitea"' do

spec/javascripts/notes/components/comment_form_spec.js

@@ -200,6 +200,20 @@ describe('issue_comment_form component', () => {
           done();
         });
       });
+
+      describe('when clicking close/reopen button', () => {
+        it('should disable button and show a loading spinner', (done) => {
+          const toggleStateButton = vm.$el.querySelector('.js-action-button');
+
+          toggleStateButton.click();
+          Vue.nextTick(() => {
+            expect(toggleStateButton.disabled).toEqual(true);
+            expect(toggleStateButton.querySelector('.js-loading-button-icon')).not.toBeNull();
+
+            done();
+          });
+        });
+      });
     });
 
     describe('issue is confidential', () => {

spec/javascripts/notes/stores/actions_spec.js

@@ -88,6 +88,7 @@ describe('Actions Notes Store', () => {
         store.dispatch('closeIssue', { notesData: { closeIssuePath: '' } })
           .then(() => {
             expect(store.state.noteableData.state).toEqual('closed');
+            expect(store.state.isToggleStateButtonLoading).toEqual(false);
             done();
           })
           .catch(done.fail);
@@ -99,6 +100,7 @@ describe('Actions Notes Store', () => {
         store.dispatch('reopenIssue', { notesData: { reopenIssuePath: '' } })
           .then(() => {
             expect(store.state.noteableData.state).toEqual('reopened');
+            expect(store.state.isToggleStateButtonLoading).toEqual(false);
             done();
           })
           .catch(done.fail);
@@ -117,6 +119,20 @@ describe('Actions Notes Store', () => {
     });
   });
 
+  describe('toggleStateButtonLoading', () => {
+    it('should set loading as true', (done) => {
+      testAction(actions.toggleStateButtonLoading, true, {}, [
+        { type: 'TOGGLE_STATE_BUTTON_LOADING', payload: true },
+      ], done);
+    });
+
+    it('should set loading as false', (done) => {
+      testAction(actions.toggleStateButtonLoading, false, {}, [
+        { type: 'TOGGLE_STATE_BUTTON_LOADING', payload: false },
+      ], done);
+    });
+  });
+
   describe('toggleIssueLocalState', () => {
     it('sets issue state as closed', (done) => {
       testAction(actions.toggleIssueLocalState, 'closed', {}, [

spec/javascripts/notes/stores/mutation_spec.js

@@ -228,4 +228,70 @@ describe('Notes Store mutations', () => {
       expect(state.notes[0].notes[0].note).toEqual('Foo');
     });
   });
+
+  describe('CLOSE_ISSUE', () => {
+    it('should set issue as closed', () => {
+      const state = {
+        notes: [],
+        targetNoteHash: null,
+        lastFetchedAt: null,
+        isToggleStateButtonLoading: false,
+        notesData: {},
+        userData: {},
+        noteableData: {},
+      };
+
+      mutations.CLOSE_ISSUE(state);
+      expect(state.noteableData.state).toEqual('closed');
+    });
+  });
+
+  describe('REOPEN_ISSUE', () => {
+    it('should set issue as closed', () => {
+      const state = {
+        notes: [],
+        targetNoteHash: null,
+        lastFetchedAt: null,
+        isToggleStateButtonLoading: false,
+        notesData: {},
+        userData: {},
+        noteableData: {},
+      };
+
+      mutations.REOPEN_ISSUE(state);
+      expect(state.noteableData.state).toEqual('reopened');
+    });
+  });
+
+  describe('TOGGLE_STATE_BUTTON_LOADING', () => {
+    it('should set isToggleStateButtonLoading as true', () => {
+      const state = {
+        notes: [],
+        targetNoteHash: null,
+        lastFetchedAt: null,
+        isToggleStateButtonLoading: false,
+        notesData: {},
+        userData: {},
+        noteableData: {},
+      };
+
+      mutations.TOGGLE_STATE_BUTTON_LOADING(state, true);
+      expect(state.isToggleStateButtonLoading).toEqual(true);
+    });
+
+    it('should set isToggleStateButtonLoading as false', () => {
+      const state = {
+        notes: [],
+        targetNoteHash: null,
+        lastFetchedAt: null,
+        isToggleStateButtonLoading: true,
+        notesData: {},
+        userData: {},
+        noteableData: {},
+      };
+
+      mutations.TOGGLE_STATE_BUTTON_LOADING(state, false);
+      expect(state.isToggleStateButtonLoading).toEqual(false);
+    });
+  });
 });

vendor/assets/javascripts/peek.js

 /*
- * This is a modified version of https://github.com/peek/peek/blob/master/app/assets/javascripts/peek.js
+ * this is a modified version of https://github.com/peek/peek/blob/master/app/assets/javascripts/peek.js
  *
  * - Removed the dependency on jquery.tipsy
  * - Removed the initializeTipsy and toggleBar functions
- * - Customized updatePerformanceBar to handle SQL queries report specificities
+ * - Customized updatePerformanceBar to handle SQL query and Gitaly call lists
  * - Changed /peek/results to /-/peek/results
  * - Removed the keypress, pjax:end, page:change, and turbolinks:load handlers
  */
 (function($) {
-  var fetchRequestResults, getRequestId, peekEnabled, updatePerformanceBar;
+  var fetchRequestResults, getRequestId, peekEnabled, updatePerformanceBar, createTable, createTableRow;
   getRequestId = function() {
     return $('#peek').data('requestId');
   };
@@ -16,39 +16,55 @@
     return $('#peek').length;
   };
   updatePerformanceBar = function(results) {
-    var key, label, data, table, html, tr, duration_td, sql_td, strong;
-
     Object.keys(results.data).forEach(function(key) {
       Object.keys(results.data[key]).forEach(function(label) {
-        data = results.data[key][label];
+        var data = results.data[key][label];
+        var table = createTable(key, label, data);
+        var target = $('[data-defer-to="' + key + '-' + label + '"]');
+
+        if (table) {
+          target.html(table);
+        } else {
+          target.text(data);
+        }
+      });
+    });
+    return $(document).trigger('peek:render', [getRequestId(), results]);
+  };
+  createTable = function(key, label, data) {
+    if (label !== 'queries' && label !== 'details') {
+      return;
+    }
 
-        if (label == 'queries') {
-          table = document.createElement('table');
+    var table = document.createElement('table');
 
-          for (var i = 0; i < data.length; i += 1) {
-            tr = document.createElement('tr');
-            duration_td = document.createElement('td');
-            sql_td = document.createElement('td');
-            strong = document.createElement('strong');
+    for (var i = 0; i < data.length; i += 1) {
+      table.appendChild(createTableRow(data[i]));
+    }
 
-            strong.append(data[i]['duration'] + 'ms');
-            duration_td.appendChild(strong);
-            tr.appendChild(duration_td);
+    table.className = 'table';
 
-            sql_td.appendChild(document.createTextNode(data[i]['sql']));
-            tr.appendChild(sql_td);
+    return table;
+  };
+  createTableRow = function(row) {
+    var tr = document.createElement('tr');
+    var durationTd = document.createElement('td');
+    var strong = document.createElement('strong');
 
-            table.appendChild(tr);
-          }
+    strong.append(row['duration'] + 'ms');
+    durationTd.appendChild(strong);
+    tr.appendChild(durationTd);
 
-          table.className = 'table';
-          $("[data-defer-to=" + key + "-" + label + "]").html(table);
-        } else {
-          $("[data-defer-to=" + key + "-" + label + "]").text(results.data[key][label]);
-        }
-      });
+    ['sql', 'feature', 'enabled', 'request'].forEach(function(key) {
+      if (!row[key]) { return; }
+
+      var td = document.createElement('td');
+
+      td.appendChild(document.createTextNode(row[key]));
+      tr.appendChild(td);
     });
-    return $(document).trigger('peek:render', [getRequestId(), results]);
+
+    return tr;
   };
   fetchRequestResults = function() {
     return $.ajax('/-/peek/results', {

yarn.lock

@@ -54,9 +54,9 @@
     lodash "^4.2.0"
     to-fast-properties "^2.0.0"
 
-"@gitlab-org/gitlab-svgs@^1.13.0":
-  version "1.13.0"
-  resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-svgs/-/gitlab-svgs-1.13.0.tgz#9e856ef9fa7bbe49b2dce9789187a89e11311215"
+"@gitlab-org/gitlab-svgs@^1.14.0":
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-svgs/-/gitlab-svgs-1.14.0.tgz#b4a5cca3106f33224c5486cf674ba3b70cee727e"
 
 "@types/jquery@^2.0.40":
   version "2.0.48"