Merge branch 'add_mr_info_to_issues_list' of gitlab.com:blackst0ne/gitlab-ce...

Merge branch 'add_mr_info_to_issues_list' of gitlab.com:blackst0ne/gitlab-ce into add_mr_info_to_issues_list

app/assets/javascripts/commit/pipelines/pipelines_bundle.js.es6

@@ -20,7 +20,10 @@ $(() => {
     gl.commits.PipelinesTableBundle.$destroy(true);
   }
 
-  gl.commits.pipelines.PipelinesTableBundle = new gl.commits.pipelines.PipelinesTableView({
-    el: document.querySelector('#commit-pipeline-table-view'),
-  });
+  const pipelineTableViewEl = document.querySelector('#commit-pipeline-table-view');
+  gl.commits.pipelines.PipelinesTableBundle = new gl.commits.pipelines.PipelinesTableView();
+
+  if (pipelineTableViewEl && pipelineTableViewEl.dataset.disableInitialization === undefined) {
+    gl.commits.pipelines.PipelinesTableBundle.$mount(pipelineTableViewEl);
+  }
 });

app/assets/javascripts/commit/pipelines/pipelines_store.js.es6

@@ -4,6 +4,7 @@
  *
  * Used to store the Pipelines rendered in the commit view in the pipelines table.
  */
+require('../../vue_realtime_listener');
 
 class PipelinesStore {
   constructor() {
@@ -24,7 +25,7 @@ class PipelinesStore {
    * update the time to show how long as passed.
    *
    */
-  startTimeAgoLoops() {
+  static startTimeAgoLoops() {
     const startTimeLoops = () => {
       this.timeLoopInterval = setInterval(() => {
         this.$children[0].$children.reduce((acc, component) => {
@@ -44,7 +45,4 @@ class PipelinesStore {
   }
 }
 
-window.gl = window.gl || {};
-gl.commits = gl.commits || {};
-gl.commits.pipelines = gl.commits.pipelines || {};
-gl.commits.pipelines.PipelinesStore = PipelinesStore;
+module.exports = PipelinesStore;

app/assets/javascripts/commit/pipelines/pipelines_table.js.es6

@@ -6,9 +6,8 @@ window.Vue.use(require('vue-resource'));
 require('../../lib/utils/common_utils');
 require('../../vue_shared/vue_resource_interceptor');
 require('../../vue_shared/components/pipelines_table');
-require('../../vue_realtime_listener/index');
 require('./pipelines_service');
-require('./pipelines_store');
+const PipelineStore = require('./pipelines_store');
 
 /**
  *
@@ -41,7 +40,7 @@ require('./pipelines_store');
     data() {
       const pipelinesTableData = document.querySelector('#commit-pipeline-table-view').dataset;
       const svgsData = document.querySelector('.pipeline-svgs').dataset;
-      const store = new gl.commits.pipelines.PipelinesStore();
+      const store = new PipelineStore();
 
       // Transform svgs DOMStringMap to a plain Object.
       const svgsObject = gl.utils.DOMStringMapToObject(svgsData);
@@ -56,15 +55,14 @@ require('./pipelines_store');
     },
 
     /**
-     * When the component is created the service to fetch the data will be
-     * initialized with the correct endpoint.
+     * When the component is about to be mounted, tell the service to fetch the data
      *
      * A request to fetch the pipelines will be made.
      * In case of a successfull response we will store the data in the provided
      * store, in case of a failed response we need to warn the user.
      *
      */
-    created() {
+    beforeMount() {
       const pipelinesService = new gl.commits.pipelines.PipelinesService(this.endpoint);
 
       this.isLoading = true;
@@ -72,7 +70,6 @@ require('./pipelines_store');
         .then(response => response.json())
         .then((json) => {
           this.store.storePipelines(json);
-          this.store.startTimeAgoLoops.call(this, Vue);
           this.isLoading = false;
         })
         .catch(() => {
@@ -81,9 +78,15 @@ require('./pipelines_store');
         });
     },
 
+    beforeUpdate() {
+      if (this.state.pipelines.length && this.$children) {
+        PipelineStore.startTimeAgoLoops.call(this, Vue);
+      }
+    },
+
     template: `
-      <div>
-        <div class="pipelines realtime-loading" v-if="isLoading">
+      <div class="pipelines">
+        <div class="realtime-loading" v-if="isLoading">
           <i class="fa fa-spinner fa-spin"></i>
         </div>
 

app/assets/javascripts/due_date_select.js.es6

@@ -48,7 +48,7 @@
       const calendar = new Pikaday({
         field: $dueDateInput.get(0),
         theme: 'gitlab-theme',
-        format: 'YYYY-MM-DD',
+        format: 'yyyy-mm-dd',
         onSelect: (dateText) => {
           const formattedDate = dateFormat(new Date(dateText), 'yyyy-mm-dd');
 
@@ -63,6 +63,7 @@
         }
       });
 
+      calendar.setDate(new Date($dueDateInput.val()));
       this.$datePicker.append(calendar.el);
       this.$datePicker.data('pikaday', calendar);
     }
@@ -169,11 +170,12 @@
         const calendar = new Pikaday({
           field: $datePicker.get(0),
           theme: 'gitlab-theme',
-          format: 'YYYY-MM-DD',
+          format: 'yyyy-mm-dd',
           onSelect(dateText) {
             $datePicker.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
           }
         });
+        calendar.setDate(new Date($datePicker.val()));
 
         $datePicker.data('pikaday', calendar);
       });

app/assets/javascripts/environments/components/environment_actions.js.es6

-/* global Vue */
-
-window.Vue = require('vue');
-
-(() => {
-  window.gl = window.gl || {};
-  window.gl.environmentsList = window.gl.environmentsList || {};
-
-  gl.environmentsList.ActionsComponent = Vue.component('actions-component', {
-    props: {
-      actions: {
-        type: Array,
-        required: false,
-        default: () => [],
-      },
-
-      playIconSvg: {
-        type: String,
-        required: false,
-      },
+const Vue = require('vue');
+
+module.exports = Vue.component('actions-component', {
+  props: {
+    actions: {
+      type: Array,
+      required: false,
+      default: () => [],
     },
 
-    template: `
-      <div class="inline">
-        <div class="dropdown">
-          <a class="dropdown-new btn btn-default" data-toggle="dropdown">
-            <span class="js-dropdown-play-icon-container" v-html="playIconSvg"></span>
-            <i class="fa fa-caret-down"></i>
-          </a>
-
-          <ul class="dropdown-menu dropdown-menu-align-right">
-            <li v-for="action in actions">
-              <a :href="action.play_path"
-                data-method="post"
-                rel="nofollow"
-                class="js-manual-action-link">
-
-                <span class="js-action-play-icon-container" v-html="playIconSvg"></span>
-
-                <span>
-                  {{action.name}}
-                </span>
-              </a>
-            </li>
-          </ul>
-        </div>
+    playIconSvg: {
+      type: String,
+      required: false,
+    },
+  },
+
+  template: `
+    <div class="inline">
+      <div class="dropdown">
+        <a class="dropdown-new btn btn-default" data-toggle="dropdown">
+          <span class="js-dropdown-play-icon-container" v-html="playIconSvg"></span>
+          <i class="fa fa-caret-down"></i>
+        </a>
+
+        <ul class="dropdown-menu dropdown-menu-align-right">
+          <li v-for="action in actions">
+            <a :href="action.play_path"
+              data-method="post"
+              rel="nofollow"
+              class="js-manual-action-link">
+
+              <span class="js-action-play-icon-container" v-html="playIconSvg"></span>
+
+              <span>
+                {{action.name}}
+              </span>
+            </a>
+          </li>
+        </ul>
       </div>
-    `,
-  });
-})();
+    </div>
+  `,
+});

app/assets/javascripts/environments/components/environment_external_url.js.es6

-/* global Vue */
+/**
+ * Renders the external url link in environments table.
+ */
+const Vue = require('vue');
 
-window.Vue = require('vue');
-
-(() => {
-  window.gl = window.gl || {};
-  window.gl.environmentsList = window.gl.environmentsList || {};
-
-  gl.environmentsList.ExternalUrlComponent = Vue.component('external-url-component', {
-    props: {
-      externalUrl: {
-        type: String,
-        default: '',
-      },
+module.exports = Vue.component('external-url-component', {
+  props: {
+    externalUrl: {
+      type: String,
+      default: '',
     },
+  },
 
-    template: `
-      <a class="btn external_url" :href="externalUrl" target="_blank">
-        <i class="fa fa-external-link"></i>
-      </a>
-    `,
-  });
-})();
+  template: `
+    <a class="btn external_url" :href="externalUrl" target="_blank">
+      <i class="fa fa-external-link"></i>
+    </a>
+  `,
+});

app/assets/javascripts/environments/components/environment_rollback.js.es6

-/* global Vue */
+/**
+ * Renders Rollback or Re deploy button in environments table depending
+ * of the provided property `isLastDeployment`
+ */
+const Vue = require('vue');
 
-window.Vue = require('vue');
-
-(() => {
-  window.gl = window.gl || {};
-  window.gl.environmentsList = window.gl.environmentsList || {};
-
-  gl.environmentsList.RollbackComponent = Vue.component('rollback-component', {
-    props: {
-      retryUrl: {
-        type: String,
-        default: '',
-      },
+module.exports = Vue.component('rollback-component', {
+  props: {
+    retryUrl: {
+      type: String,
+      default: '',
+    },
 
-      isLastDeployment: {
-        type: Boolean,
-        default: true,
-      },
+    isLastDeployment: {
+      type: Boolean,
+      default: true,
     },
+  },
 
-    template: `
-      <a class="btn" :href="retryUrl" data-method="post" rel="nofollow">
-        <span v-if="isLastDeployment">
-          Re-deploy
-        </span>
-        <span v-else>
-          Rollback
-        </span>
-      </a>
-    `,
-  });
-})();
+  template: `
+    <a class="btn" :href="retryUrl" data-method="post" rel="nofollow">
+      <span v-if="isLastDeployment">
+        Re-deploy
+      </span>
+      <span v-else>
+        Rollback
+      </span>
+    </a>
+  `,
+});

app/assets/javascripts/environments/components/environment_stop.js.es6

-/* global Vue */
+/**
+ * Renders the stop "button" that allows stop an environment.
+ * Used in environments table.
+ */
+const Vue = require('vue');
 
-window.Vue = require('vue');
-
-(() => {
-  window.gl = window.gl || {};
-  window.gl.environmentsList = window.gl.environmentsList || {};
-
-  gl.environmentsList.StopComponent = Vue.component('stop-component', {
-    props: {
-      stopUrl: {
-        type: String,
-        default: '',
-      },
+module.exports = Vue.component('stop-component', {
+  props: {
+    stopUrl: {
+      type: String,
+      default: '',
     },
+  },
 
-    template: `
-      <a class="btn stop-env-link"
-        :href="stopUrl"
-        data-confirm="Are you sure you want to stop this environment?"
-        data-method="post"
-        rel="nofollow">
-        <i class="fa fa-stop stop-env-icon"></i>
-      </a>
-    `,
-  });
-})();
+  template: `
+    <a class="btn stop-env-link"
+      :href="stopUrl"
+      data-confirm="Are you sure you want to stop this environment?"
+      data-method="post"
+      rel="nofollow">
+      <i class="fa fa-stop stop-env-icon" aria-hidden="true"></i>
+    </a>
+  `,
+});

app/assets/javascripts/environments/components/environment_terminal_button.js.es6

-/* global Vue */
+/**
+ * Renders a terminal button to open a web terminal.
+ * Used in environments table.
+ */
+const Vue = require('vue');
 
-window.Vue = require('vue');
-
-(() => {
-  window.gl = window.gl || {};
-  window.gl.environmentsList = window.gl.environmentsList || {};
-
-  gl.environmentsList.TerminalButtonComponent = Vue.component('terminal-button-component', {
-    props: {
-      terminalPath: {
-        type: String,
-        default: '',
-      },
-      terminalIconSvg: {
-        type: String,
-        default: '',
-      },
+module.exports = Vue.component('terminal-button-component', {
+  props: {
+    terminalPath: {
+      type: String,
+      default: '',
+    },
+    terminalIconSvg: {
+      type: String,
+      default: '',
     },
+  },
 
-    template: `
-      <a class="btn terminal-button"
-        :href="terminalPath">
-        <span class="js-terminal-icon-container" v-html="terminalIconSvg"></span>
-      </a>
-    `,
-  });
-})();
+  template: `
+    <a class="btn terminal-button"
+      :href="terminalPath">
+      <span class="js-terminal-icon-container" v-html="terminalIconSvg"></span>
+    </a>
+  `,
+});

app/assets/javascripts/environments/components/environments_table.js.es6

+/**
+ * Render environments table.
+ */
+const Vue = require('vue');
+const EnvironmentItem = require('./environment_item');
+
+module.exports = Vue.component('environment-table-component', {
+
+  components: {
+    'environment-item': EnvironmentItem,
+  },
+
+  props: {
+    environments: {
+      type: Array,
+      required: true,
+      default: () => ([]),
+    },
+
+    canReadEnvironment: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+
+    canCreateDeployment: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+
+    commitIconSvg: {
+      type: String,
+      required: false,
+    },
+
+    playIconSvg: {
+      type: String,
+      required: false,
+    },
+
+    terminalIconSvg: {
+      type: String,
+      required: false,
+    },
+  },
+
+  template: `
+    <table class="table ci-table environments">
+      <thead>
+        <tr>
+          <th class="environments-name">Environment</th>
+          <th class="environments-deploy">Last deployment</th>
+          <th class="environments-build">Job</th>
+          <th class="environments-commit">Commit</th>
+          <th class="environments-date">Updated</th>
+          <th class="hidden-xs environments-actions"></th>
+        </tr>
+      </thead>
+      <tbody>
+        <template v-for="model in environments"
+          v-bind:model="model">
+          <tr is="environment-item"
+            :model="model"
+            :can-create-deployment="canCreateDeployment"
+            :can-read-environment="canReadEnvironment"
+            :play-icon-svg="playIconSvg"
+            :terminal-icon-svg="terminalIconSvg"
+            :commit-icon-svg="commitIconSvg"></tr>
+        </template>
+      </tbody>
+    </table>
+  `,
+});

app/assets/javascripts/environments/environments_bundle.js.es6

-window.Vue = require('vue');
-require('./stores/environments_store');
-require('./components/environment');
+const EnvironmentsComponent = require('./components/environment');
 require('../vue_shared/vue_resource_interceptor');
 
 $(() => {
@@ -9,14 +7,8 @@ $(() => {
   if (gl.EnvironmentsListApp) {
     gl.EnvironmentsListApp.$destroy(true);
   }
-  const Store = gl.environmentsList.EnvironmentsStore;
 
-  gl.EnvironmentsListApp = new gl.environmentsList.EnvironmentsComponent({
+  gl.EnvironmentsListApp = new EnvironmentsComponent({
     el: document.querySelector('#environments-list-view'),
-
-    propsData: {
-      store: Store.create(),
-    },
-
   });
 });

app/assets/javascripts/environments/folder/environments_folder_bundle.js.es6

+const EnvironmentsFolderComponent = require('./environments_folder_view');
+require('../../vue_shared/vue_resource_interceptor');
+
+$(() => {
+  window.gl = window.gl || {};
+
+  if (gl.EnvironmentsListFolderApp) {
+    gl.EnvironmentsListFolderApp.$destroy(true);
+  }
+
+  gl.EnvironmentsListFolderApp = new EnvironmentsFolderComponent({
+    el: document.querySelector('#environments-folder-list-view'),
+  });
+});

app/assets/javascripts/environments/folder/environments_folder_view.js.es6

+/* eslint-disable no-param-reassign, no-new */
+/* global Flash */
+
+const Vue = require('vue');
+Vue.use(require('vue-resource'));
+const EnvironmentsService = require('../services/environments_service');
+const EnvironmentTable = require('../components/environments_table');
+const EnvironmentsStore = require('../stores/environments_store');
+require('../../vue_shared/components/table_pagination');
+require('../../lib/utils/common_utils');
+
+module.exports = Vue.component('environment-folder-view', {
+
+  components: {
+    'environment-table': EnvironmentTable,
+    'table-pagination': gl.VueGlPagination,
+  },
+
+  data() {
+    const environmentsData = document.querySelector('#environments-folder-list-view').dataset;
+    const store = new EnvironmentsStore();
+    const pathname = window.location.pathname;
+    const endpoint = `${pathname}.json`;
+    const folderName = pathname.substr(pathname.lastIndexOf('/') + 1);
+
+    return {
+      store,
+      folderName,
+      endpoint,
+      state: store.state,
+      visibility: 'available',
+      isLoading: false,
+      cssContainerClass: environmentsData.cssClass,
+      canCreateDeployment: environmentsData.canCreateDeployment,
+      canReadEnvironment: environmentsData.canReadEnvironment,
+
+      // svgs
+      commitIconSvg: environmentsData.commitIconSvg,
+      playIconSvg: environmentsData.playIconSvg,
+      terminalIconSvg: environmentsData.terminalIconSvg,
+
+      // Pagination Properties,
+      paginationInformation: {},
+      pageNumber: 1,
+    };
+  },
+
+  computed: {
+    scope() {
+      return gl.utils.getParameterByName('scope');
+    },
+
+    canReadEnvironmentParsed() {
+      return gl.utils.convertPermissionToBoolean(this.canReadEnvironment);
+    },
+
+    canCreateDeploymentParsed() {
+      return gl.utils.convertPermissionToBoolean(this.canCreateDeployment);
+    },
+
+    /**
+     * URL to link in the stopped tab.
+     *
+     * @return {String}
+     */
+    stoppedPath() {
+      return `${window.location.pathname}?scope=stopped`;
+    },
+
+    /**
+     * URL to link in the available tab.
+     *
+     * @return {String}
+     */
+    availablePath() {
+      return window.location.pathname;
+    },
+  },
+
+  /**
+   * Fetches all the environments and stores them.
+   * Toggles loading property.
+   */
+  created() {
+    const scope = gl.utils.getParameterByName('scope') || this.visibility;
+    const pageNumber = gl.utils.getParameterByName('page') || this.pageNumber;
+
+    const endpoint = `${this.endpoint}?scope=${scope}&page=${pageNumber}`;
+
+    const service = new EnvironmentsService(endpoint);
+
+    this.isLoading = true;
+
+    return service.all()
+      .then(resp => ({
+        headers: resp.headers,
+        body: resp.json(),
+      }))
+      .then((response) => {
+        this.store.storeAvailableCount(response.body.available_count);
+        this.store.storeStoppedCount(response.body.stopped_count);
+        this.store.storeEnvironments(response.body.environments);
+        this.store.setPagination(response.headers);
+      })
+      .then(() => {
+        this.isLoading = false;
+      })
+      .catch(() => {
+        this.isLoading = false;
+        new Flash('An error occurred while fetching the environments.', 'alert');
+      });
+  },
+
+  methods: {
+    /**
+     * Will change the page number and update the URL.
+     *
+     * @param  {Number} pageNumber desired page to go to.
+     */
+    changePage(pageNumber) {
+      const param = gl.utils.setParamInURL('page', pageNumber);
+
+      gl.utils.visitUrl(param);
+      return param;
+    },
+  },
+
+  template: `
+    <div :class="cssContainerClass">
+      <div class="top-area" v-if="!isLoading">
+
+        <h4 class="js-folder-name environments-folder-name">
+          Environments / <b>{{folderName}}</b>
+        </h4>
+
+        <ul class="nav-links">
+          <li v-bind:class="{ 'active': scope === null || scope === 'available' }">
+            <a :href="availablePath" class="js-available-environments-folder-tab">
+              Available
+              <span class="badge js-available-environments-count">
+                {{state.availableCounter}}
+              </span>
+            </a>
+          </li>
+          <li v-bind:class="{ 'active' : scope === 'stopped' }">
+            <a :href="stoppedPath" class="js-stopped-environments-folder-tab">
+              Stopped
+              <span class="badge js-stopped-environments-count">
+                {{state.stoppedCounter}}
+              </span>
+            </a>
+          </li>
+        </ul>
+      </div>
+
+      <div class="environments-container">
+        <div class="environments-list-loading text-center" v-if="isLoading">
+          <i class="fa fa-spinner fa-spin"></i>
+        </div>
+
+        <div class="table-holder"
+          v-if="!isLoading && state.environments.length > 0">
+
+          <environment-table
+            :environments="state.environments"
+            :can-create-deployment="canCreateDeploymentParsed"
+            :can-read-environment="canReadEnvironmentParsed"
+            :play-icon-svg="playIconSvg"
+            :terminal-icon-svg="terminalIconSvg"
+            :commit-icon-svg="commitIconSvg">
+          </environment-table>
+
+          <table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
+            :change="changePage"
+            :pageInfo="state.paginationInformation">
+          </table-pagination>
+        </div>
+      </div>
+    </div>
+  `,
+});

app/assets/javascripts/environments/services/environments_service.js.es6

-/* globals Vue */
-/* eslint-disable no-unused-vars, no-param-reassign */
+const Vue = require('vue');
 
 class EnvironmentsService {
-
-  constructor(root) {
-    Vue.http.options.root = root;
-
-    this.environments = Vue.resource(root);
-
-    Vue.http.interceptors.push((request, next) => {
-      // needed in order to not break the tests.
-      if ($.rails) {
-        request.headers['X-CSRF-Token'] = $.rails.csrfToken();
-      }
-      next();
-    });
+  constructor(endpoint) {
+    this.environments = Vue.resource(endpoint);
   }
 
   all() {
@@ -22,4 +10,4 @@ class EnvironmentsService {
   }
 }
 
-window.EnvironmentsService = EnvironmentsService;
+module.exports = EnvironmentsService;

app/assets/javascripts/environments/stores/environments_store.js.es6

-/* eslint-disable no-param-reassign */
-(() => {
-  window.gl = window.gl || {};
-  window.gl.environmentsList = window.gl.environmentsList || {};
-
-  gl.environmentsList.EnvironmentsStore = {
-    state: {},
-
-    create() {
-      this.state.environments = [];
-      this.state.stoppedCounter = 0;
-      this.state.availableCounter = 0;
-      this.state.visibility = 'available';
-      this.state.filteredEnvironments = [];
-
-      return this;
-    },
-
-    /**
-     * In order to display a tree view we need to modify the received
-     * data in to a tree structure based on `environment_type`
-     * sorted alphabetically.
-     * In each children a `vue-` property will be added. This property will be
-     * used to know if an item is a children mostly for css purposes. This is
-     * needed because the children row is a fragment instance and therfore does
-     * not accept non-prop attributes.
-     *
-     *
-     * @example
-     * it will transform this:
-     * [
-     *   { name: "environment", environment_type: "review" },
-     *   { name: "environment_1", environment_type: null }
-     *   { name: "environment_2, environment_type: "review" }
-     * ]
-     * into this:
-     * [
-     *   { name: "review", children:
-     *      [
-     *        { name: "environment", environment_type: "review", vue-isChildren: true},
-     *        { name: "environment_2", environment_type: "review", vue-isChildren: true}
-     *      ]
-     *   },
-     *  {name: "environment_1", environment_type: null}
-     * ]
-     *
-     *
-     * @param  {Array} environments List of environments.
-     * @returns {Array} Tree structured array with the received environments.
-     */
-    storeEnvironments(environments = []) {
-      this.state.stoppedCounter = this.countByState(environments, 'stopped');
-      this.state.availableCounter = this.countByState(environments, 'available');
-
-      const environmentsTree = environments.reduce((acc, environment) => {
-        if (environment.environment_type !== null) {
-          const occurs = acc.filter(element => element.children &&
-             element.name === environment.environment_type);
-
-          environment['vue-isChildren'] = true;
-
-          if (occurs.length) {
-            acc[acc.indexOf(occurs[0])].children.push(environment);
-            acc[acc.indexOf(occurs[0])].children.slice().sort(this.sortByName);
-          } else {
-            acc.push({
-              name: environment.environment_type,
-              children: [environment],
-              isOpen: false,
-              'vue-isChildren': environment['vue-isChildren'],
-            });
-          }
-        } else {
-          acc.push(environment);
-        }
-
-        return acc;
-      }, []).slice().sort(this.sortByName);
-
-      this.state.environments = environmentsTree;
-
-      this.filterEnvironmentsByVisibility(this.state.environments);
-
-      return environmentsTree;
-    },
-
-    storeVisibility(visibility) {
-      this.state.visibility = visibility;
-    },
-    /**
-     * Given the visibility prop provided by the url query parameter and which
-     * changes according to the active tab we need to filter which environments
-     * should be visible.
-     *
-     * The environments array is a recursive tree structure and we need to filter
-     * both root level environments and children environments.
-     *
-     * In order to acomplish that, both `filterState` and `filterEnvironmentsByVisibility`
-     * functions work together.
-     * The first one works as the filter that verifies if the given environment matches
-     * the given state.
-     * The second guarantees both root level and children elements are filtered as well.
-     *
-     * Given array of environments will return only
-     * the environments that match the state stored.
-     *
-     * @param {Array} array
-     * @return {Array}
-     */
-    filterEnvironmentsByVisibility(arr) {
-      const filteredEnvironments = arr.map((item) => {
-        if (item.children) {
-          const filteredChildren = this.filterEnvironmentsByVisibility(
-            item.children,
-          ).filter(Boolean);
-
-          if (filteredChildren.length) {
-            item.children = filteredChildren;
-            return item;
-          }
-        }
-
-        return this.filterState(this.state.visibility, item);
-      }).filter(Boolean);
-
-      this.state.filteredEnvironments = filteredEnvironments;
-      return filteredEnvironments;
-    },
-
-    /**
-     * Given the state and the environment,
-     * returns only if the environment state matches the one provided.
-     *
-     * @param  {String} state
-     * @param  {Object} environment
-     * @return {Object}
-     */
-    filterState(state, environment) {
-      return environment.state === state && environment;
-    },
-
-    /**
-     * Toggles folder open property given the environment type.
-     *
-     * @param  {String} envType
-     * @return {Array}
-     */
-    toggleFolder(envType) {
-      const environments = this.state.environments;
-
-      const environmentsCopy = environments.map((env) => {
-        if (env['vue-isChildren'] && env.name === envType) {
-          env.isOpen = !env.isOpen;
-        }
-
-        return env;
-      });
-
-      this.state.environments = environmentsCopy;
-
-      return environmentsCopy;
-    },
-
-    /**
-     * Given an array of environments, returns the number of environments
-     * that have the given state.
-     *
-     * @param  {Array} environments
-     * @param  {String} state
-     * @returns {Number}
-     */
-    countByState(environments, state) {
-      return environments.filter(env => env.state === state).length;
-    },
-
-    /**
-     * Sorts the two objects provided by their name.
-     *
-     * @param  {Object} a
-     * @param  {Object} b
-     * @returns {Number}
-     */
-    sortByName(a, b) {
-      const nameA = a.name.toUpperCase();
-      const nameB = b.name.toUpperCase();
-
-      return nameA < nameB ? -1 : nameA > nameB ? 1 : 0; // eslint-disable-line
-    },
-  };
-})();
+require('~/lib/utils/common_utils');
+/**
+ * Environments Store.
+ *
+ * Stores received environments, count of stopped environments and count of
+ * available environments.
+ */
+class EnvironmentsStore {
+  constructor() {
+    this.state = {};
+    this.state.environments = [];
+    this.state.stoppedCounter = 0;
+    this.state.availableCounter = 0;
+    this.state.paginationInformation = {};
+
+    return this;
+  }
+
+  /**
+   *
+   * Stores the received environments.
+   *
+   * In the main environments endpoint, each environment has the following schema
+   * { name: String, size: Number, latest: Object }
+   * In the endpoint to retrieve environments from each folder, the environment does
+   * not have the `latest` key and the data is all in the root level.
+   * To avoid doing this check in the view, we store both cases the same by extracting
+   * what is inside the `latest` key.
+   *
+   * If the `size` is bigger than 1, it means it should be rendered as a folder.
+   * In those cases we add `isFolder` key in order to render it properly.
+   *
+   * @param  {Array} environments
+   * @returns {Array}
+   */
+  storeEnvironments(environments = []) {
+    const filteredEnvironments = environments.map((env) => {
+      let filtered = {};
+
+      if (env.size > 1) {
+        filtered = Object.assign({}, env, { isFolder: true, folderName: env.name });
+      }
+
+      if (env.latest) {
+        filtered = Object.assign(filtered, env, env.latest);
+        delete filtered.latest;
+      } else {
+        filtered = Object.assign(filtered, env);
+      }
+
+      return filtered;
+    });
+
+    this.state.environments = filteredEnvironments;
+
+    return filteredEnvironments;
+  }
+
+  setPagination(pagination = {}) {
+    const normalizedHeaders = gl.utils.normalizeHeaders(pagination);
+    const paginationInformation = gl.utils.parseIntPagination(normalizedHeaders);
+
+    this.state.paginationInformation = paginationInformation;
+    return paginationInformation;
+  }
+
+  /**
+   * Stores the number of available environments.
+   *
+   * @param  {Number} count = 0
+   * @return {Number}
+   */
+  storeAvailableCount(count = 0) {
+    this.state.availableCounter = count;
+    return count;
+  }
+
+  /**
+   * Stores the number of closed environments.
+   *
+   * @param  {Number} count = 0
+   * @return {Number}
+   */
+  storeStoppedCount(count = 0) {
+    this.state.stoppedCounter = count;
+    return count;
+  }
+}
+
+module.exports = EnvironmentsStore;

app/assets/javascripts/issuable_form.js

@@ -40,11 +40,12 @@
         calendar = new Pikaday({
           field: $issuableDueDate.get(0),
           theme: 'gitlab-theme',
-          format: 'YYYY-MM-DD',
+          format: 'yyyy-mm-dd',
           onSelect: function(dateText) {
             $issuableDueDate.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
           }
         });
+        calendar.setDate(new Date($issuableDueDate.val()));
       }
     }
 

app/assets/javascripts/issue.js

@@ -54,16 +54,19 @@ require('vendor/task_list');
           success: function(data, textStatus, jqXHR) {
             if ('id' in data) {
               $(document).trigger('issuable:change');
+              const currentTotal = Number($('.issue_counter').text());
               if (isClose) {
                 $('a.btn-close').addClass('hidden');
                 $('a.btn-reopen').removeClass('hidden');
                 $('div.status-box-closed').removeClass('hidden');
                 $('div.status-box-open').addClass('hidden');
+                $('.issue_counter').text(currentTotal - 1);
               } else {
                 $('a.btn-reopen').addClass('hidden');
                 $('a.btn-close').removeClass('hidden');
                 $('div.status-box-closed').addClass('hidden');
                 $('div.status-box-open').removeClass('hidden');
+                $('.issue_counter').text(currentTotal + 1);
               }
             } else {
               new Flash(issueFailMessage, 'alert');

app/assets/javascripts/lib/utils/common_utils.js.es6

@@ -231,6 +231,21 @@
       return upperCaseHeaders;
     };
 
+    /**
+     * Parses pagination object string values into numbers.
+     *
+     * @param {Object} paginationInformation
+     * @returns {Object}
+     */
+    w.gl.utils.parseIntPagination = paginationInformation => ({
+      perPage: parseInt(paginationInformation['X-PER-PAGE'], 10),
+      page: parseInt(paginationInformation['X-PAGE'], 10),
+      total: parseInt(paginationInformation['X-TOTAL'], 10),
+      totalPages: parseInt(paginationInformation['X-TOTAL-PAGES'], 10),
+      nextPage: parseInt(paginationInformation['X-NEXT-PAGE'], 10),
+      previousPage: parseInt(paginationInformation['X-PREV-PAGE'], 10),
+    });
+
     /**
      * Transforms a DOMStringMap into a plain object.
      *
@@ -241,5 +256,45 @@
       acc[element] = DOMStringMapObject[element];
       return acc;
     }, {});
+
+    /**
+     * Updates the search parameter of a URL given the parameter and values provided.
+     *
+     * If no search params are present we'll add it.
+     * If param for page is already present, we'll update it
+     * If there are params but not for the given one, we'll add it at the end.
+     * Returns the new search parameters.
+     *
+     * @param {String} param
+     * @param {Number|String|Undefined|Null} value
+     * @return {String}
+     */
+    w.gl.utils.setParamInURL = (param, value) => {
+      let search;
+      const locationSearch = window.location.search;
+
+      if (locationSearch.length === 0) {
+        search = `?${param}=${value}`;
+      }
+
+      if (locationSearch.indexOf(param) !== -1) {
+        const regex = new RegExp(param + '=\\d');
+        search = locationSearch.replace(regex, `${param}=${value}`);
+      }
+
+      if (locationSearch.length && locationSearch.indexOf(param) === -1) {
+        search = `${locationSearch}&${param}=${value}`;
+      }
+
+      return search;
+    };
+
+    /**
+     * Converts permission provided as strings to booleans.
+     *
+     * @param  {String} string
+     * @returns {Boolean}
+     */
+    w.gl.utils.convertPermissionToBoolean = permission => permission === 'true';
   })(window);
 }).call(this);

app/assets/javascripts/member_expiration_date.js.es6

@@ -19,7 +19,7 @@
       const calendar = new Pikaday({
         field: $input.get(0),
         theme: 'gitlab-theme',
-        format: 'YYYY-MM-DD',
+        format: 'yyyy-mm-dd',
         minDate: new Date(),
         onSelect(dateText) {
           $input.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
@@ -30,6 +30,7 @@
         },
       });
 
+      calendar.setDate(new Date($input.val()));
       $input.data('pikaday', calendar);
     });
 

app/assets/javascripts/merge_request_tabs.js.es6

@@ -61,6 +61,7 @@ require('./flash');
 
     constructor({ action, setUrl, stubLocation } = {}) {
       this.diffsLoaded = false;
+      this.pipelinesLoaded = false;
       this.commitsLoaded = false;
       this.fixedLayoutPref = null;
 
@@ -102,9 +103,10 @@ require('./flash');
     }
 
     clickTab(e) {
-      if (e.target && gl.utils.isMetaClick(e)) {
-        const targetLink = e.target.getAttribute('href');
+      if (e.currentTarget && gl.utils.isMetaClick(e)) {
+        const targetLink = e.currentTarget.getAttribute('href');
         e.stopImmediatePropagation();
+        e.preventDefault();
         window.open(targetLink, '_blank');
       }
     }
@@ -128,6 +130,13 @@ require('./flash');
         $.scrollTo('.merge-request-details .merge-request-tabs', {
           offset: 0,
         });
+      } else if (action === 'pipelines') {
+        if (this.pipelinesLoaded) {
+          return;
+        }
+        const pipelineTableViewEl = document.querySelector('#commit-pipeline-table-view');
+        gl.commits.pipelines.PipelinesTableBundle.$mount(pipelineTableViewEl);
+        this.pipelinesLoaded = true;
       } else {
         this.expandView();
         this.resetViewContainer();

app/assets/javascripts/merge_request_widget.js.es6

@@ -110,7 +110,7 @@ require('./smart_interval');
               urlSuffix = deleteSourceBranch ? '?deleted_source_branch=true' : '';
               return window.location.href = window.location.pathname + urlSuffix;
             } else if (data.merge_error) {
-              return _this.$widgetBody.html("<h4>" + data.merge_error + "</h4>");
+              return $('.mr-widget-body').html("<h4>" + data.merge_error + "</h4>");
             } else {
               callback = function() {
                 return merge_request_widget.mergeInProgress(deleteSourceBranch);

app/assets/javascripts/namespace_select.js

@@ -29,7 +29,7 @@
           if (selected.id == null) {
             return selected.text;
           } else {
-            return selected.kind + ": " + selected.path;
+            return selected.kind + ": " + selected.full_path;
           }
         },
         data: function(term, dataCallback) {
@@ -50,7 +50,7 @@
           if (namespace.id == null) {
             return namespace.text;
           } else {
-            return namespace.kind + ": " + namespace.path;
+            return namespace.kind + ": " + namespace.full_path;
           }
         },
         renderRow: this.renderRow,

app/assets/javascripts/notes.js

@@ -923,9 +923,10 @@ require('vendor/task_list');
     };
 
     Notes.prototype.toggleCommitList = function(e) {
-      const $element = $(e.target);
+      const $element = $(e.currentTarget);
       const $closestSystemCommitList = $element.siblings('.system-note-commit-list');
 
+      $element.find('.fa').toggleClass('fa-angle-down').toggleClass('fa-angle-up');
       $closestSystemCommitList.toggleClass('hide-shade');
     };
 

app/assets/javascripts/todos.js.es6

@@ -147,24 +147,21 @@
 
     goToTodoUrl(e) {
       const todoLink = this.dataset.url;
-      let targetLink = e.target.getAttribute('href');
-
-      if (e.target.tagName === 'IMG') { // See if clicked target was Avatar
-        targetLink = e.target.parentElement.getAttribute('href'); // Parent of Avatar is link
-      }
 
       if (!todoLink) {
         return;
       }
 
       if (gl.utils.isMetaClick(e)) {
+        const windowTarget = '_blank';
+        const selected = e.target;
         e.preventDefault();
-        // Meta-Click on username leads to different URL than todoLink.
-        // Turbolinks can resolve that URL, but window.open requires URL manually.
-        if (targetLink !== todoLink) {
-          return window.open(targetLink, '_blank');
+
+        if (selected.tagName === 'IMG') {
+          const avatarUrl = selected.parentElement.getAttribute('href');
+          return window.open(avatarUrl, windowTarget);
         } else {
-          return window.open(todoLink, '_blank');
+          return window.open(todoLink, windowTarget);
         }
       } else {
         return gl.utils.visitUrl(todoLink);

app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6

@@ -62,6 +62,7 @@
                 <li v-for='artifact in pipeline.details.artifacts'>
                   <a
                     rel="nofollow"
+                    download
                     :href='artifact.path'
                   >
                     <i class="fa fa-download" aria-hidden="true"></i>

app/assets/javascripts/vue_pipelines_index/pipelines.js.es6

@@ -5,6 +5,7 @@ window.Vue = require('vue');
 require('../vue_shared/components/table_pagination');
 require('./store');
 require('../vue_shared/components/pipelines_table');
+const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_store');
 
 ((gl) => {
   gl.VuePipelines = Vue.extend({
@@ -32,10 +33,30 @@ require('../vue_shared/components/pipelines_table');
       const scope = gl.utils.getParameterByName('scope');
       if (pagenum) this.pagenum = pagenum;
       if (scope) this.apiScope = scope;
+
       this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope, this.apiScope);
     },
+
+    beforeUpdate() {
+      if (this.pipelines.length && this.$children) {
+        CommitPipelinesStoreWithTimeAgo.startTimeAgoLoops.call(this, Vue);
+      }
+    },
+
     methods: {
+
+      /**
+       * Changes the URL according to the pagination component.
+       *
+       * If no scope is provided, 'all' is assumed.
+       *
+       * Pagination component sends "null" when no scope is provided.
+       *
+       * @param  {Number} pagenum
+       * @param  {String} apiScope = 'all'
+       */
       change(pagenum, apiScope) {
+        if (!apiScope) apiScope = 'all';
         gl.utils.visitUrl(`?scope=${apiScope}&p=${pagenum}`);
       },
     },

app/assets/javascripts/vue_pipelines_index/store.js.es6

 /* global gl, Flash */
-/* eslint-disable no-param-reassign, no-underscore-dangle */
-require('../vue_realtime_listener');
+/* eslint-disable no-param-reassign */
 
 ((gl) => {
   const pageValues = (headers) => {
     const normalized = gl.utils.normalizeHeaders(headers);
-
-    const paginationInfo = {
-      perPage: +normalized['X-PER-PAGE'],
-      page: +normalized['X-PAGE'],
-      total: +normalized['X-TOTAL'],
-      totalPages: +normalized['X-TOTAL-PAGES'],
-      nextPage: +normalized['X-NEXT-PAGE'],
-      previousPage: +normalized['X-PREV-PAGE'],
-    };
-
+    const paginationInfo = gl.utils.parseIntPagination(normalized);
     return paginationInfo;
   };
 
   gl.PipelineStore = class {
     fetchDataLoop(Vue, pageNum, url, apiScope) {
       this.pageRequest = true;
-      const updatePipelineNums = (count) => {
-        const { all } = count;
-        const running = count.running_or_pending;
-        document.querySelector('.js-totalbuilds-count').innerHTML = all;
-        document.querySelector('.js-running-count').innerHTML = running;
-      };
-
-      const goFetch = () =>
-        this.$http.get(`${url}?scope=${apiScope}&page=${pageNum}`)
-          .then((response) => {
-            const pageInfo = pageValues(response.headers);
-            this.pageInfo = Object.assign({}, this.pageInfo, pageInfo);
-
-            const res = JSON.parse(response.body);
-            this.count = Object.assign({}, this.count, res.count);
-            this.pipelines = Object.assign([], this.pipelines, res.pipelines);
-
-            updatePipelineNums(this.count);
-            this.pageRequest = false;
-          }, () => {
-            this.pageRequest = false;
-            return new Flash('An error occurred while fetching the pipelines, please reload the page again.');
-          });
-
-      goFetch();
-
-      const startTimeLoops = () => {
-        this.timeLoopInterval = setInterval(() => {
-          this.$children[0].$children.reduce((acc, component) => {
-            const timeAgoComponent = component.$children.filter(el => el.$options._componentTag === 'time-ago')[0];
-            acc.push(timeAgoComponent);
-            return acc;
-          }, []).forEach(e => e.changeTime());
-        }, 10000);
-      };
 
-      startTimeLoops();
+      return this.$http.get(`${url}?scope=${apiScope}&page=${pageNum}`)
+      .then((response) => {
+        const pageInfo = pageValues(response.headers);
+        this.pageInfo = Object.assign({}, this.pageInfo, pageInfo);
 
-      const removeIntervals = () => clearInterval(this.timeLoopInterval);
-      const startIntervals = () => startTimeLoops();
+        const res = JSON.parse(response.body);
+        this.count = Object.assign({}, this.count, res.count);
+        this.pipelines = Object.assign([], this.pipelines, res.pipelines);
 
-      gl.VueRealtimeListener(removeIntervals, startIntervals);
+        this.pageRequest = false;
+      }, () => {
+        this.pageRequest = false;
+        return new Flash('An error occurred while fetching the pipelines, please reload the page again.');
+      });
     }
   };
 })(window.gl || (window.gl = {}));

app/assets/javascripts/vue_shared/components/commit.js.es6

 /* global Vue */
+window.Vue = require('vue');
 
 (() => {
   window.gl = window.gl || {};

app/assets/javascripts/vue_shared/components/table_pagination.js.es6

@@ -57,9 +57,7 @@ window.Vue = require('vue');
     },
     methods: {
       changePage(e) {
-        let apiScope = gl.utils.getParameterByName('scope');
-
-        if (!apiScope) apiScope = 'all';
+        const apiScope = gl.utils.getParameterByName('scope');
 
         const text = e.target.innerText;
         const { totalPages, nextPage, previousPage } = this.pageInfo;

app/assets/stylesheets/pages/builds.scss

@@ -91,7 +91,7 @@
     }
 
     &.scroll-top {
-      top: 110px;
+      top: 10px;
     }
 
     &.scroll-bottom {

app/assets/stylesheets/pages/environments.scss

@@ -10,6 +10,11 @@
   font-size: 34px;
 }
 
+.environments-folder-name {
+  font-weight: normal;
+  padding-top: 20px;
+}
+
 @media (max-width: $screen-xs-max) {
   .environments-container {
     width: 100%;
@@ -110,17 +115,20 @@
     }
   }
 
-  .children-row .environment-name {
-    margin-left: 17px;
-    margin-right: -17px;
-  }
-
   .folder-icon {
-    padding: 0 5px 0 0;
+    margin-right: 3px;
+    color: $gl-text-color-secondary;
+    display: inline-block;
+
+    .fa:nth-child(1) {
+      margin-right: 3px;
+    }
   }
 
   .folder-name {
     cursor: pointer;
+    color: $gl-text-color-secondary;
+    display: inline-block;
   }
 }
 
@@ -135,4 +143,4 @@
       margin-right: 0;
     }
   }
-}
\ No newline at end of file
+}

app/assets/stylesheets/pages/notes.scss

@@ -72,6 +72,7 @@ ul.notes {
       overflow: hidden;
 
       .system-note-commit-list-toggler {
+        color: $gl-link-color;
         display: none;
         padding: 10px 0 0;
         cursor: pointer;
@@ -107,16 +108,6 @@ ul.notes {
             display: none;
           }
 
-          p:last-child {
-            a {
-              color: $gl-text-color;
-
-              &:hover {
-                color: $gl-link-color;
-              }
-            }
-          }
-
           &::after {
             content: '';
             width: 100%;

app/assets/stylesheets/pages/projects.scss

@@ -35,12 +35,8 @@
     margin-bottom: 10px;
   }
 
-  .project-path {
-    padding-right: 0;
-
-    .form-control {
-      border-radius: $border-radius-base;
-    }
+  .project-path .form-control {
+    border-radius: $border-radius-base;
   }
 
   .input-group > div {
@@ -106,6 +102,7 @@
     font-size: 24px;
     font-weight: 400;
     line-height: 1;
+    word-wrap: break-word;
 
     .fa {
       margin-left: 2px;

app/controllers/projects/environments_controller.rb

@@ -9,15 +9,40 @@ class Projects::EnvironmentsController < Projects::ApplicationController
   before_action :verify_api_request!, only: :terminal_websocket_authorize
 
   def index
-    @scope = params[:scope]
-    @environments = project.environments.includes(:last_deployment)
+    @environments = project.environments
+      .with_state(params[:scope] || :available)
 
     respond_to do |format|
       format.html
       format.json do
-        render json: EnvironmentSerializer
-          .new(project: @project, user: current_user)
-          .represent(@environments)
+        render json: {
+          environments: EnvironmentSerializer
+            .new(project: @project, user: @current_user)
+            .with_pagination(request, response)
+            .within_folders
+            .represent(@environments),
+          available_count: project.environments.available.count,
+          stopped_count: project.environments.stopped.count
+        }
+      end
+    end
+  end
+
+  def folder
+    folder_environments = project.environments.where(environment_type: params[:id])
+    @environments = folder_environments.with_state(params[:scope] || :available)
+
+    respond_to do |format|
+      format.html
+      format.json do
+        render json: {
+          environments: EnvironmentSerializer
+            .new(project: @project, user: @current_user)
+            .with_pagination(request, response)
+            .represent(@environments),
+          available_count: folder_environments.available.count,
+          stopped_count: folder_environments.stopped.count
+        }
       end
     end
   end

app/controllers/projects/merge_requests_controller.rb

@@ -369,10 +369,13 @@ class Projects::MergeRequestsController < Projects::ApplicationController
   end
 
   def merge_widget_refresh
-    if merge_request.in_progress_merge_commit_sha || merge_request.state == 'merged'
-      @status = :success
-    elsif merge_request.merge_when_build_succeeds
+    if merge_request.merge_when_build_succeeds
       @status = :merge_when_build_succeeds
+    else
+      # Only MRs that can be merged end in this action
+      # MR can be already picked up for merge / merged already or can be waiting for worker to be picked up
+      # in last case it does not have any special status. Possible error is handled inside widget js function
+      @status = :success
     end
 
     render 'merge'

app/controllers/projects/tags_controller.rb

@@ -27,7 +27,7 @@ class Projects::TagsController < Projects::ApplicationController
   end
 
   def create
-    result = CreateTagService.new(@project, current_user).
+    result = Tags::CreateService.new(@project, current_user).
       execute(params[:tag_name], params[:ref], params[:message], params[:release_description])
 
     if result[:status] == :success
@@ -41,7 +41,7 @@ class Projects::TagsController < Projects::ApplicationController
   end
 
   def destroy
-    DeleteTagService.new(project, current_user).execute(params[:id])
+    Tags::DestroyService.new(project, current_user).execute(params[:id])
 
     respond_to do |format|
       format.html do

app/helpers/application_helper.rb

@@ -296,4 +296,13 @@ module ApplicationHelper
   def page_class
     "issue-boards-page" if current_controller?(:boards)
   end
+
+  # Returns active css class when condition returns true
+  # otherwise returns nil.
+  #
+  # Example:
+  #   %li{ class: active_when(params[:filter] == '1') }
+  def active_when(condition)
+    'active' if condition
+  end
 end

app/helpers/merge_requests_helper.rb

@@ -75,10 +75,10 @@ module MergeRequestsHelper
     new_namespace_project_merge_request_path(
       @project.namespace, @project,
       merge_request: {
-        source_project_id: @merge_request.source_project_id,
-        target_project_id: @merge_request.target_project_id,
-        source_branch: @merge_request.source_branch,
-        target_branch: @merge_request.target_branch,
+        source_project_id: merge_request.source_project_id,
+        target_project_id: merge_request.target_project_id,
+        source_branch: merge_request.source_branch,
+        target_branch: merge_request.target_branch,
       },
       change_branches: true
     )

app/helpers/namespaces_helper.rb

@@ -10,7 +10,7 @@ module NamespacesHelper
     data_attr_users = { 'data-options-parent' => 'users' }
 
     group_opts = [
-      "Groups", groups.sort_by(&:human_name).map { |g| [display_path ? g.path : g.human_name, g.id, data_attr_group] }
+      "Groups", groups.sort_by(&:human_name).map { |g| [display_path ? g.full_path : g.human_name, g.id, data_attr_group] }
     ]
 
     users_opts = [

app/helpers/page_layout_helper.rb

@@ -34,6 +34,10 @@ module PageLayoutHelper
     end
   end
 
+  def favicon
+    Rails.env.development? ? 'favicon-blue.ico' : 'favicon.ico'
+  end
+
   def page_image
     default = image_url('gitlab_logo.png')
 

app/helpers/submodule_helper.rb

@@ -63,7 +63,7 @@ module SubmoduleHelper
     namespace = components.pop.gsub(/^\.\.$/, '')
 
     if namespace.empty?
-      namespace = @project.namespace.path
+      namespace = @project.namespace.full_path
     end
 
     [

app/models/merge_request.rb

@@ -598,7 +598,7 @@ class MergeRequest < ActiveRecord::Base
 
   def source_project_namespace
     if source_project && source_project.namespace
-      source_project.namespace.path
+      source_project.namespace.full_path
     else
       "(removed)"
     end
@@ -606,7 +606,7 @@ class MergeRequest < ActiveRecord::Base
 
   def target_project_namespace
     if target_project && target_project.namespace
-      target_project.namespace.path
+      target_project.namespace.full_path
     else
       "(removed)"
     end

app/models/namespace.rb

@@ -42,7 +42,7 @@ class Namespace < ActiveRecord::Base
   after_commit :refresh_access_of_projects_invited_groups, on: :update, if: -> { previous_changes.key?('share_with_group_lock') }
 
   # Save the storage paths before the projects are destroyed to use them on after destroy
-  before_destroy(prepend: true) { @old_repository_storage_paths = repository_storage_paths }
+  before_destroy(prepend: true) { prepare_for_destroy }
   after_destroy :rm_dir
 
   scope :root, -> { where('type IS NULL') }
@@ -211,6 +211,14 @@ class Namespace < ActiveRecord::Base
     parent_id_changed?
   end
 
+  def prepare_for_destroy
+    old_repository_storage_paths
+  end
+
+  def old_repository_storage_paths
+    @old_repository_storage_paths ||= repository_storage_paths
+  end
+
   private
 
   def repository_storage_paths
@@ -224,7 +232,7 @@ class Namespace < ActiveRecord::Base
 
   def rm_dir
     # Remove the namespace directory in all storages paths used by member projects
-    @old_repository_storage_paths.each do |repository_storage_path|
+    old_repository_storage_paths.each do |repository_storage_path|
       # Move namespace directory into trash.
       # We will remove it later async
       new_path = "#{path}+#{id}+deleted"

app/models/project.rb

@@ -214,6 +214,8 @@ class Project < ActiveRecord::Base
   # Scopes
   default_scope { where(pending_delete: false) }
 
+  scope :with_deleted, -> { unscope(where: :pending_delete) }
+
   scope :sorted_by_activity, -> { reorder(last_activity_at: :desc) }
   scope :sorted_by_stars, -> { reorder('projects.star_count DESC') }
 
@@ -454,7 +456,7 @@ class Project < ActiveRecord::Base
     if forked?
       job_id = RepositoryForkWorker.perform_async(id, forked_from_project.repository_storage_path,
                                                   forked_from_project.path_with_namespace,
-                                                  self.namespace.path)
+                                                  self.namespace.full_path)
     else
       job_id = RepositoryImportWorker.perform_async(self.id)
     end
@@ -942,8 +944,8 @@ class Project < ActiveRecord::Base
 
     Gitlab::AppLogger.info "Project was renamed: #{old_path_with_namespace} -> #{new_path_with_namespace}"
 
-    Gitlab::UploadsTransfer.new.rename_project(path_was, path, namespace.path)
-    Gitlab::PagesTransfer.new.rename_project(path_was, path, namespace.path)
+    Gitlab::UploadsTransfer.new.rename_project(path_was, path, namespace.full_path)
+    Gitlab::PagesTransfer.new.rename_project(path_was, path, namespace.full_path)
   end
 
   # Expires various caches before a project is renamed.
@@ -1150,19 +1152,25 @@ class Project < ActiveRecord::Base
   end
 
   def pages_url
+    subdomain, _, url_path = full_path.partition('/')
+
     # The hostname always needs to be in downcased
     # All web servers convert hostname to lowercase
-    host = "#{namespace.path}.#{Settings.pages.host}".downcase
+    host = "#{subdomain}.#{Settings.pages.host}".downcase
 
     # The host in URL always needs to be downcased
     url = Gitlab.config.pages.url.sub(/^https?:\/\//) do |prefix|
-      "#{prefix}#{namespace.path}."
+      "#{prefix}#{subdomain}."
     end.downcase
 
     # If the project path is the same as host, we serve it as group page
-    return url if host == path
+    return url if host == url_path
+
+    "#{url}/#{url_path}"
+  end
 
-    "#{url}/#{path}"
+  def pages_subdomain
+    full_path.partition('/').first
   end
 
   def pages_path
@@ -1179,8 +1187,8 @@ class Project < ActiveRecord::Base
     # 3. We asynchronously remove pages with force
     temp_path = "#{path}.#{SecureRandom.hex}.deleted"
 
-    if Gitlab::PagesTransfer.new.rename_project(path, temp_path, namespace.path)
-      PagesWorker.perform_in(5.minutes, :remove, namespace.path, temp_path)
+    if Gitlab::PagesTransfer.new.rename_project(path, temp_path, namespace.full_path)
+      PagesWorker.perform_in(5.minutes, :remove, namespace.full_path, temp_path)
     end
   end
 
@@ -1230,7 +1238,7 @@ class Project < ActiveRecord::Base
   end
 
   def ensure_dir_exist
-    gitlab_shell.add_namespace(repository_storage_path, namespace.path)
+    gitlab_shell.add_namespace(repository_storage_path, namespace.full_path)
   end
 
   def predefined_variables
@@ -1238,7 +1246,7 @@ class Project < ActiveRecord::Base
       { key: 'CI_PROJECT_ID', value: id.to_s, public: true },
       { key: 'CI_PROJECT_NAME', value: path, public: true },
       { key: 'CI_PROJECT_PATH', value: path_with_namespace, public: true },
-      { key: 'CI_PROJECT_NAMESPACE', value: namespace.path, public: true },
+      { key: 'CI_PROJECT_NAMESPACE', value: namespace.full_path, public: true },
       { key: 'CI_PROJECT_URL', value: web_url, public: true }
     ]
   end

app/models/project_services/drone_ci_service.rb

@@ -12,7 +12,7 @@ class DroneCiService < CiService
   def compose_service_hook
     hook = service_hook || build_service_hook
     # If using a service template, project may not be available
-    hook.url = [drone_url, "/api/hook", "?owner=#{project.namespace.path}", "&name=#{project.path}", "&access_token=#{token}"].join if project
+    hook.url = [drone_url, "/api/hook", "?owner=#{project.namespace.full_path}", "&name=#{project.path}", "&access_token=#{token}"].join if project
     hook.enable_ssl_verification = !!enable_ssl_verification
     hook.save
   end
@@ -38,7 +38,7 @@ class DroneCiService < CiService
 
   def commit_status_path(sha, ref)
     url = [drone_url,
-           "gitlab/#{project.namespace.path}/#{project.path}/commits/#{sha}",
+           "gitlab/#{project.full_path}/commits/#{sha}",
            "?branch=#{URI::encode(ref.to_s)}&access_token=#{token}"]
 
     URI.join(*url).to_s
@@ -73,7 +73,7 @@ class DroneCiService < CiService
 
   def build_page(sha, ref)
     url = [drone_url,
-           "gitlab/#{project.namespace.path}/#{project.path}/redirect/commits/#{sha}",
+           "gitlab/#{project.full_path}/redirect/commits/#{sha}",
            "?branch=#{URI::encode(ref.to_s)}"]
 
     URI.join(*url).to_s

app/models/project_services/gitlab_ci_service.rb

-# TODO(ayufan): The GitLabCiService is deprecated and the type should be removed when the database entries are removed
-class GitlabCiService < CiService
-  # We override the active accessor to always make GitLabCiService disabled
-  # Otherwise the GitLabCiService can be picked, but should never be since it's deprecated
-  def active
-    false
-  end
-end

app/models/project_wiki.rb

@@ -160,6 +160,10 @@ class ProjectWiki
     }
   end
 
+  def repository_storage_path
+    project.repository_storage_path
+  end
+
   private
 
   def init_repo(path_with_namespace)

app/models/service.rb

@@ -27,7 +27,7 @@ class Service < ActiveRecord::Base
 
   validates :project_id, presence: true, unless: Proc.new { |service| service.template? }
 
-  scope :visible, -> { where.not(type: ['GitlabIssueTrackerService', 'GitlabCiService']) }
+  scope :visible, -> { where.not(type: 'GitlabIssueTrackerService') }
   scope :issue_trackers, -> { where(category: 'issue_tracker') }
   scope :external_wikis, -> { where(type: 'ExternalWikiService').active }
   scope :active, -> { where(active: true) }

app/serializers/environment_serializer.rb

@@ -20,8 +20,6 @@ class EnvironmentSerializer < BaseSerializer
   end
 
   def represent(resource, opts = {})
-    resource = @paginator.paginate(resource) if paginated?
-
     if itemized?
       itemize(resource).map do |item|
         { name: item.name,
@@ -29,6 +27,8 @@ class EnvironmentSerializer < BaseSerializer
           latest: super(item.latest, opts) }
       end
     else
+      resource = @paginator.paginate(resource) if paginated?
+
       super(resource, opts)
     end
   end
@@ -36,15 +36,20 @@ class EnvironmentSerializer < BaseSerializer
   private
 
   def itemize(resource)
-    items = resource.group(:item_name).order('item_name ASC')
-      .pluck('COALESCE(environment_type, name) AS item_name',
-             'COUNT(*) AS environments_count',
-             'MAX(id) AS last_environment_id')
+    items = resource.order('folder_name ASC')
+      .group('COALESCE(environment_type, name)')
+      .select('COALESCE(environment_type, name) AS folder_name',
+              'COUNT(*) AS size', 'MAX(id) AS last_id')
+
+    # It makes a difference when you call `paginate` method, because
+    # although `page` is effective at the end, it calls counting methods
+    # immediately.
+    items = @paginator.paginate(items) if paginated?
 
-    environments = resource.where(id: items.map(&:last)).index_by(&:id)
+    environments = resource.where(id: items.map(&:last_id)).index_by(&:id)
 
-    items.map do |name, size, id|
-      Item.new(name, size, environments[id])
+    items.map do |item|
+      Item.new(item.folder_name, item.size, environments[item.last_id])
     end
   end
 end

app/services/create_tag_service.rb

-class CreateTagService < BaseService
-  def execute(tag_name, target, message, release_description = nil)
-    valid_tag = Gitlab::GitRefValidator.validate(tag_name)
-    return error('Tag name invalid') unless valid_tag
-
-    repository = project.repository
-    message&.strip!
-
-    new_tag = nil
-
-    begin
-      new_tag = repository.add_tag(current_user, tag_name, target, message)
-    rescue Rugged::TagError
-      return error("Tag #{tag_name} already exists")
-    rescue GitHooksService::PreReceiveError => ex
-      return error(ex.message)
-    end
-
-    if new_tag
-      if release_description
-        CreateReleaseService.new(@project, @current_user).
-          execute(tag_name, release_description)
-      end
-      
-      success.merge(tag: new_tag)
-    else
-      error("Target #{target} is invalid")
-    end
-  end
-end

app/services/delete_tag_service.rb

-class DeleteTagService < BaseService
-  def execute(tag_name)
-    repository = project.repository
-    tag = repository.find_tag(tag_name)
-
-    unless tag
-      return error('No such tag', 404)
-    end
-
-    if repository.rm_tag(current_user, tag_name)
-      release = project.releases.find_by(tag: tag_name)
-      release&.destroy
-
-      push_data = build_push_data(tag)
-      EventCreateService.new.push(project, current_user, push_data)
-      project.execute_hooks(push_data.dup, :tag_push_hooks)
-      project.execute_services(push_data.dup, :tag_push_hooks)
-
-      success('Tag was removed')
-    else
-      error('Failed to remove tag')
-    end
-  end
-
-  def error(message, return_code = 400)
-    super(message).merge(return_code: return_code)
-  end
-
-  def success(message)
-    super().merge(message: message)
-  end
-
-  def build_push_data(tag)
-    Gitlab::DataBuilder::Push.build(
-      project,
-      current_user,
-      tag.dereferenced_target.sha,
-      Gitlab::Git::BLANK_SHA,
-      "#{Gitlab::Git::TAG_REF_PREFIX}#{tag.name}",
-      [])
-  end
-end

app/services/groups/destroy_service.rb

@@ -8,7 +8,9 @@ module Groups
     end
 
     def execute
-      group.projects.each do |project|
+      group.prepare_for_destroy
+
+      group.projects.with_deleted.each do |project|
         # Execute the destruction of the models immediately to ensure atomic cleanup.
         # Skip repository removal because we remove directory with namespace
         # that contain all these repositories

app/services/merge_requests/merge_service.rb

@@ -11,18 +11,20 @@ module MergeRequests
     def execute(merge_request)
       @merge_request = merge_request
 
-      return log_merge_error('Merge request is not mergeable', true) unless @merge_request.mergeable?
+      unless @merge_request.mergeable?
+        return log_merge_error('Merge request is not mergeable', save_message_on_model: true)
+      end
 
       @source = find_merge_source
 
-      return log_merge_error('No source for merge', true) unless @source
+      unless @source
+        log_merge_error('No source for merge', save_message_on_model: true)
+      end
 
       merge_request.in_locked_state do
         if commit
           after_merge
           success
-        else
-          log_merge_error('Can not merge changes', true)
         end
       end
     end
@@ -43,11 +45,11 @@ module MergeRequests
       if commit_id
         merge_request.update(merge_commit_sha: commit_id)
       else
-        merge_request.update(merge_error: 'Conflicts detected during merge')
+        log_merge_error('Conflicts detected during merge', save_message_on_model: true)
         false
       end
     rescue GitHooksService::PreReceiveError => e
-      merge_request.update(merge_error: e.message)
+      log_merge_error(e.message, save_message_on_model: true)
       false
     rescue StandardError => e
       merge_request.update(merge_error: "Something went wrong during merge: #{e.message}")
@@ -70,10 +72,10 @@ module MergeRequests
       @merge_request.force_remove_source_branch? ? @merge_request.author : current_user
     end
 
-    def log_merge_error(message, http_error = false)
+    def log_merge_error(message, save_message_on_model: false)
       Rails.logger.error("MergeService ERROR: #{merge_request_info} - #{message}")
 
-      error(message) if http_error
+      @merge_request.update(merge_error: message) if save_message_on_model
     end
 
     def merge_request_info

app/services/projects/transfer_service.rb

@@ -30,7 +30,7 @@ module Projects
       Project.transaction do
         old_path = project.path_with_namespace
         old_group = project.group
-        new_path = File.join(new_namespace.try(:path) || '', project.path)
+        new_path = File.join(new_namespace.try(:full_path) || '', project.path)
 
         if Project.where(path: project.path, namespace_id: new_namespace.try(:id)).present?
           raise TransferError.new("Project with same path in target namespace already exists")
@@ -63,10 +63,10 @@ module Projects
         Labels::TransferService.new(current_user, old_group, project).execute
 
         # Move uploads
-        Gitlab::UploadsTransfer.new.move_project(project.path, old_namespace.path, new_namespace.path)
+        Gitlab::UploadsTransfer.new.move_project(project.path, old_namespace.full_path, new_namespace.full_path)
 
         # Move pages
-        Gitlab::PagesTransfer.new.move_project(project.path, old_namespace.path, new_namespace.path)
+        Gitlab::PagesTransfer.new.move_project(project.path, old_namespace.full_path, new_namespace.full_path)
 
         project.old_path_with_namespace = old_path
 

app/services/tags/create_service.rb

+module Tags
+  class CreateService < BaseService
+    def execute(tag_name, target, message, release_description = nil)
+      valid_tag = Gitlab::GitRefValidator.validate(tag_name)
+      return error('Tag name invalid') unless valid_tag
+
+      repository = project.repository
+      message&.strip!
+
+      new_tag = nil
+
+      begin
+        new_tag = repository.add_tag(current_user, tag_name, target, message)
+      rescue Rugged::TagError
+        return error("Tag #{tag_name} already exists")
+      rescue GitHooksService::PreReceiveError => ex
+        return error(ex.message)
+      end
+
+      if new_tag
+        if release_description
+          CreateReleaseService.new(@project, @current_user).
+            execute(tag_name, release_description)
+        end
+
+        success.merge(tag: new_tag)
+      else
+        error("Target #{target} is invalid")
+      end
+    end
+  end
+end

app/services/tags/destroy_service.rb

+module Tags
+  class DestroyService < BaseService
+    def execute(tag_name)
+      repository = project.repository
+      tag = repository.find_tag(tag_name)
+
+      unless tag
+        return error('No such tag', 404)
+      end
+
+      if repository.rm_tag(current_user, tag_name)
+        release = project.releases.find_by(tag: tag_name)
+        release&.destroy
+
+        push_data = build_push_data(tag)
+        EventCreateService.new.push(project, current_user, push_data)
+        project.execute_hooks(push_data.dup, :tag_push_hooks)
+        project.execute_services(push_data.dup, :tag_push_hooks)
+
+        success('Tag was removed')
+      else
+        error('Failed to remove tag')
+      end
+    end
+
+    def error(message, return_code = 400)
+      super(message).merge(return_code: return_code)
+    end
+
+    def success(message)
+      super().merge(message: message)
+    end
+
+    def build_push_data(tag)
+      Gitlab::DataBuilder::Push.build(
+        project,
+        current_user,
+        tag.dereferenced_target.sha,
+        Gitlab::Git::BLANK_SHA,
+        "#{Gitlab::Git::TAG_REF_PREFIX}#{tag.name}",
+        [])
+    end
+  end
+end

app/uploaders/file_uploader.rb

@@ -36,7 +36,7 @@ class FileUploader < GitlabUploader
     escaped_filename = filename.gsub("]", "\\]")
 
     markdown = "[#{escaped_filename}](#{self.secure_url})"
-    markdown.prepend("!") if image_or_video?
+    markdown.prepend("!") if image_or_video? || dangerous?
 
     {
       alt:      filename,

app/uploaders/uploader_helper.rb

 # Extra methods for uploader
 module UploaderHelper
-  IMAGE_EXT = %w[png jpg jpeg gif bmp tiff svg]
+  IMAGE_EXT = %w[png jpg jpeg gif bmp tiff]
   # We recommend using the .mp4 format over .mov. Videos in .mov format can
   # still be used but you really need to make sure they are served with the
   # proper MIME type video/mp4 and not video/quicktime or your videos won't play
   # on IE >= 9.
   # http://archive.sublimevideo.info/20150912/docs.sublimevideo.net/troubleshooting.html
   VIDEO_EXT = %w[mp4 m4v mov webm ogv]
+  # These extension types can contain dangerous code and should only be embedded inline with
+  # proper filtering. They should always be tagged as "Content-Disposition: attachment", not "inline".
+  DANGEROUS_EXT = %w[svg]
 
   def image?
     extension_match?(IMAGE_EXT)
@@ -20,6 +23,10 @@ module UploaderHelper
     image? || video?
   end
 
+  def dangerous?
+    extension_match?(DANGEROUS_EXT)
+  end
+
   def extension_match?(extensions)
     return false unless file
 

app/views/admin/dashboard/index.html.haml

@@ -163,6 +163,6 @@
         - @groups.each do |group|
           %p
             = link_to [:admin, group], class: 'str-truncated-60' do
-              = group.name
+              = group.full_name
             %span.light.pull-right
               #{time_ago_with_tooltip(group.created_at)}

app/views/admin/logs/show.html.haml

@@ -8,15 +8,14 @@
 %div{ class: container_class }
   %ul.nav-links.log-tabs
     - loggers.each do |klass|
-      %li{ class: (klass == Gitlab::GitLogger ? 'active' : '') }>
+      %li{ class: active_when(klass == Gitlab::GitLogger) }>
         = link_to klass::file_name, "##{klass::file_name_noext}",
             'data-toggle' => 'tab'
   .row-content-block
     To prevent performance issues admin logs output the last 2000 lines
   .tab-content
     - loggers.each do |klass|
-      .tab-pane{ class: (klass == Gitlab::GitLogger ? 'active' : ''),
-          id: klass::file_name_noext }
+      .tab-pane{ class: active_when(klass == Gitlab::GitLogger), id: klass::file_name_noext }
         .file-holder#README
           .js-file-title.file-title
             %i.fa.fa-file

app/views/admin/projects/index.html.haml

@@ -30,7 +30,7 @@
             - toggle_text = 'Namespace'
             - if params[:namespace_id].present?
               - namespace = Namespace.find(params[:namespace_id])
-              - toggle_text = "#{namespace.kind}: #{namespace.path}"
+              - toggle_text = "#{namespace.kind}: #{namespace.full_path}"
             = dropdown_toggle(toggle_text, { toggle: 'dropdown' }, { toggle_class: 'js-namespace-select large' })
             .dropdown-menu.dropdown-select.dropdown-menu-align-right
               = dropdown_title('Namespaces')
@@ -48,13 +48,13 @@
         = link_to admin_projects_path do
           All
 
-      = nav_link(html_options: { class: params[:visibility_level] == Gitlab::VisibilityLevel::PRIVATE.to_s ? 'active' : '' }) do
+      = nav_link(html_options: { class: active_when(params[:visibility_level] == Gitlab::VisibilityLevel::PRIVATE.to_s) }) do
         = link_to admin_projects_path(visibility_level: Gitlab::VisibilityLevel::PRIVATE) do
           Private
-      = nav_link(html_options: { class: params[:visibility_level] == Gitlab::VisibilityLevel::INTERNAL.to_s ? 'active' : '' }) do
+      = nav_link(html_options: { class: active_when(params[:visibility_level] == Gitlab::VisibilityLevel::INTERNAL.to_s) }) do
         = link_to admin_projects_path(visibility_level: Gitlab::VisibilityLevel::INTERNAL) do
           Internal
-      = nav_link(html_options: { class: params[:visibility_level] == Gitlab::VisibilityLevel::PUBLIC.to_s ? 'active' : '' }) do
+      = nav_link(html_options: { class: active_when(params[:visibility_level] == Gitlab::VisibilityLevel::PUBLIC.to_s) }) do
         = link_to admin_projects_path(visibility_level: Gitlab::VisibilityLevel::PUBLIC) do
           Public
 

app/views/admin/runners/_runner.html.haml

@@ -22,7 +22,7 @@
   %td
     #{runner.builds.count(:all)}
   %td
-    - runner.tag_list.each do |tag|
+    - runner.tag_list.sort.each do |tag|
       %span.label.label-primary
         = tag
   %td

app/views/admin/users/index.html.haml

@@ -38,31 +38,31 @@
     .nav-block
       %ul.nav-links.wide.scrolling-tabs.white.scrolling-tabs
         .fade-left
-        = nav_link(html_options: { class: ('active' unless params[:filter]) }) do
+        = nav_link(html_options: { class: active_when(params[:filter].nil?) }) do
           = link_to admin_users_path do
             Active
             %small.badge= number_with_delimiter(User.active.count)
-        = nav_link(html_options: { class: ('active' if params[:filter] == 'admins') }) do
+        = nav_link(html_options: { class: active_when(params[:filter] == 'admins') }) do
           = link_to admin_users_path(filter: "admins") do
             Admins
             %small.badge= number_with_delimiter(User.admins.count)
-        = nav_link(html_options: { class: "#{'active' if params[:filter] == 'two_factor_enabled'} filter-two-factor-enabled" }) do
+        = nav_link(html_options: { class: "#{active_when(params[:filter] == 'two_factor_enabled')} filter-two-factor-enabled" }) do
           = link_to admin_users_path(filter: 'two_factor_enabled') do
             2FA Enabled
             %small.badge= number_with_delimiter(User.with_two_factor.count)
-        = nav_link(html_options: { class: "#{'active' if params[:filter] == 'two_factor_disabled'} filter-two-factor-disabled" }) do
+        = nav_link(html_options: { class: "#{active_when(params[:filter] == 'two_factor_disabled')} filter-two-factor-disabled" }) do
           = link_to admin_users_path(filter: 'two_factor_disabled') do
             2FA Disabled
             %small.badge= number_with_delimiter(User.without_two_factor.count)
-        = nav_link(html_options: { class: ('active' if params[:filter] == 'external') }) do
+        = nav_link(html_options: { class: active_when(params[:filter] == 'external') }) do
           = link_to admin_users_path(filter: 'external') do
             External
             %small.badge= number_with_delimiter(User.external.count)
-        = nav_link(html_options: { class: ('active' if params[:filter] == 'blocked') }) do
+        = nav_link(html_options: { class: active_when(params[:filter] == 'blocked') }) do
           = link_to admin_users_path(filter: "blocked") do
             Blocked
             %small.badge= number_with_delimiter(User.blocked.count)
-        = nav_link(html_options: { class: ('active' if params[:filter] == 'wop') }) do
+        = nav_link(html_options: { class: active_when(params[:filter] == 'wop') }) do
           = link_to admin_users_path(filter: "wop") do
             Without projects
             %small.badge= number_with_delimiter(User.without_projects.count)

app/views/dashboard/_activity_head.html.haml

 .top-area
   %ul.nav-links
-    %li{ class: ("active" unless params[:filter]) }>
+    %li{ class: active_when(params[:filter].nil?) }>
       = link_to activity_dashboard_path, class: 'shortcuts-activity', data: {placement: 'right'} do
         Your Projects
-    %li{ class: ("active" if params[:filter] == 'starred') }>
+    %li{ class: active_when(params[:filter] == 'starred') }>
       = link_to activity_dashboard_path(filter: 'starred'), data: {placement: 'right'} do
         Starred Projects

app/views/dashboard/todos/index.html.haml

@@ -4,15 +4,13 @@
 - if current_user.todos.any?
   .top-area
     %ul.nav-links
-      - todo_pending_active = ('active' if params[:state].blank? || params[:state] == 'pending')
-      %li{ class: "todos-pending #{todo_pending_active}" }>
+      %li.todos-pending{ class: active_when(params[:state].blank? || params[:state] == 'pending') }>
         = link_to todos_filter_path(state: 'pending') do
           %span
             To do
           %span.badge
             = number_with_delimiter(todos_pending_count)
-      - todo_done_active = ('active' if params[:state] == 'done')
-      %li{ class: "todos-done #{todo_done_active}" }>
+      %li.todos-done{ class: active_when(params[:state] == 'done') }>
         = link_to todos_filter_path(state: 'done') do
           %span
             Done

app/views/devise/shared/_signin_box.html.haml

@@ -4,7 +4,7 @@
       .login-body
         = render 'devise/sessions/new_crowd'
   - @ldap_servers.each_with_index do |server, i|
-    .login-box.tab-pane{ id: "#{server['provider_name']}", role: 'tabpanel', class: (:active if i.zero? && !crowd_enabled?) }
+    .login-box.tab-pane{ id: "#{server['provider_name']}", role: 'tabpanel', class: active_when(i.zero? && !crowd_enabled?) }
       .login-body
         = render 'devise/sessions/new_ldap', server: server
   - if signin_enabled?

app/views/devise/shared/_tabs_ldap.html.haml

@@ -3,7 +3,7 @@
     %li.active
       = link_to "Crowd", "#crowd", 'data-toggle' => 'tab'
   - @ldap_servers.each_with_index do |server, i|
-    %li{ class: (:active if i.zero? && !crowd_enabled?) }
+    %li{ class: active_when(i.zero? && !crowd_enabled?) }
       = link_to server['label'], "##{server['provider_name']}",  'data-toggle' => 'tab'
   - if signin_enabled?
     %li

app/views/explore/projects/_filter.html.haml

@@ -13,7 +13,7 @@
         = link_to filter_projects_path(visibility_level: nil) do
           Any
       - Gitlab::VisibilityLevel.values.each do |level|
-        %li{ class: (level.to_s == params[:visibility_level]) ? 'active' : 'light' }
+        %li{ class: active_when(level.to_s == params[:visibility_level]) || 'light' }
           = link_to filter_projects_path(visibility_level: level) do
             = visibility_level_icon(level)
             = visibility_level_label(level)
@@ -34,7 +34,7 @@
           Any
 
       - @tags.each do |tag|
-        %li{ class: (tag.name == params[:tag]) ? 'active' : 'light' }
+        %li{ class: active_when(tag.name == params[:tag]) || 'light' }
           = link_to filter_projects_path(tag: tag.name) do
             = icon('tag')
             = tag.name

app/views/import/base/unauthorized.js.haml

@@ -4,7 +4,7 @@
   import_button = tr.find(".btn-import")
   origin_target = target_field.text()
   project_name = "#{@project_name}"
-  origin_namespace = "#{@target_namespace.path}"
+  origin_namespace = "#{@target_namespace.full_path}"
   target_field.empty()
   target_field.append("<p class='alert alert-danger'>This namespace has already been taken! Please choose another one.</p>")
   target_field.append("<input type='text' name='target_namespace' />")

app/views/kaminari/gitlab/_page.html.haml

@@ -6,5 +6,5 @@
 -#    total_pages:   total number of pages
 -#    per_page:      number of items to fetch per page
 -#    remote:        data-remote
-%li{ class: "page#{' active' if page.current?}#{' sibling' if page.next? || page.prev?}" }
+%li.page{ class: [active_when(page.current?), ('sibling' if page.next? || page.prev?)] }
   = link_to page, url, { remote: remote, rel: page.next? ? 'next' : page.prev? ? 'prev' : nil }

app/views/layouts/_head.html.haml

@@ -23,7 +23,7 @@
   %title= page_title(site_name)
   %meta{ name: "description", content: page_description }
 
-  = favicon_link_tag 'favicon.ico'
+  = favicon_link_tag favicon
 
   = stylesheet_link_tag "application", media: "all"
   = stylesheet_link_tag "print",       media: "print"

app/views/profiles/personal_access_tokens/index.html.haml

@@ -91,7 +91,7 @@
   new Pikaday({
     field: $dateField.get(0),
     theme: 'gitlab-theme',
-    format: 'YYYY-MM-DD',
+    format: 'yyyy-mm-dd',
     minDate: new Date(),
     onSelect: function(dateText) {
       $dateField.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));

app/views/projects/_home_panel.html.haml

@@ -28,9 +28,11 @@
           .project-clone-holder
             = render "shared/clone_panel"
 
-        - if current_user && can?(current_user, :download_code, @project)
-          = render 'projects/buttons/download', project: @project, ref: @ref
-          = render 'projects/buttons/dropdown'
+        - if current_user
+          - if can?(current_user, :download_code, @project)
+            = render 'projects/buttons/download', project: @project, ref: @ref
+            = render 'projects/buttons/dropdown'
+            = render 'projects/buttons/koding'
+
           = render 'shared/notifications/button', notification_setting: @notification_setting
-          = render 'projects/buttons/koding'
           = render 'shared/members/access_request_buttons', source: @project

app/views/projects/buttons/_download.html.haml

@@ -8,19 +8,19 @@
     %ul.dropdown-menu.dropdown-menu-align-right{ role: 'menu' }
       %li.dropdown-header Source code
       %li
-        = link_to archive_namespace_project_repository_path(project.namespace, project, ref: ref, format: 'zip'), rel: 'nofollow' do
+        = link_to archive_namespace_project_repository_path(project.namespace, project, ref: ref, format: 'zip'), rel: 'nofollow', download: '' do
           %i.fa.fa-download
           %span Download zip
       %li
-        = link_to archive_namespace_project_repository_path(project.namespace, project, ref: ref, format: 'tar.gz'), rel: 'nofollow' do
+        = link_to archive_namespace_project_repository_path(project.namespace, project, ref: ref, format: 'tar.gz'), rel: 'nofollow', download: '' do
           %i.fa.fa-download
           %span Download tar.gz
       %li
-        = link_to archive_namespace_project_repository_path(project.namespace, project, ref: ref, format: 'tar.bz2'), rel: 'nofollow' do
+        = link_to archive_namespace_project_repository_path(project.namespace, project, ref: ref, format: 'tar.bz2'), rel: 'nofollow', download: '' do
           %i.fa.fa-download
           %span Download tar.bz2
       %li
-        = link_to archive_namespace_project_repository_path(project.namespace, project, ref: ref, format: 'tar'), rel: 'nofollow' do
+        = link_to archive_namespace_project_repository_path(project.namespace, project, ref: ref, format: 'tar'), rel: 'nofollow', download: '' do
           %i.fa.fa-download
           %span Download tar
 
@@ -36,6 +36,6 @@
             %li.dropdown-header Previous Artifacts
           - artifacts.each do |job|
             %li
-              = link_to latest_succeeded_namespace_project_artifacts_path(project.namespace, project, "#{ref}/download", job: job.name), rel: 'nofollow' do
+              = link_to latest_succeeded_namespace_project_artifacts_path(project.namespace, project, "#{ref}/download", job: job.name), rel: 'nofollow', download: '' do
                 %i.fa.fa-download
                 %span Download '#{job.name}'

app/views/projects/ci/pipelines/_pipeline.html.haml

@@ -78,7 +78,7 @@
               %ul.dropdown-menu.dropdown-menu-align-right
                 - artifacts.each do |build|
                   %li
-                    = link_to download_namespace_project_build_artifacts_path(pipeline.project.namespace, pipeline.project, build), rel: 'nofollow' do
+                    = link_to download_namespace_project_build_artifacts_path(pipeline.project.namespace, pipeline.project, build), rel: 'nofollow', download: '' do
                       = icon("download")
                       %span Download '#{build.name}' artifacts
 

app/views/projects/commit/_pipelines_list.haml

-#commit-pipeline-table-view{ data: { endpoint: endpoint } }
+- disable_initialization = local_assigns.fetch(:disable_initialization, false)
+#commit-pipeline-table-view{ data: { disable_initialization: disable_initialization,
+  endpoint: endpoint,
+} }
 .pipeline-svgs{ data: { "commit_icon_svg" => custom_icon("icon_commit"),
   "icon_status_canceled" => custom_icon("icon_status_canceled"),
   "icon_status_running" => custom_icon("icon_status_running"),

app/views/projects/edit.html.haml

@@ -6,7 +6,7 @@
     .col-lg-9
       .project-edit-errors
       = form_for [@project.namespace.becomes(Namespace), @project], remote: true, html: { multipart: true, class: "edit-project" }, authenticity_token: true do |f|
-        %fieldset.append-bottom-0
+        %fieldset
           .row
             .form-group.col-md-9
               = f.label :name, class: 'label-light', for: 'project_name_edit' do
@@ -33,7 +33,7 @@
           = f.text_field :tag_list, value: @project.tag_list.to_s, maxlength: 2000, class: "form-control"
           %p.help-block Separate tags with commas.
         %hr
-        %fieldset.append-bottom-0
+        %fieldset
           %h5.prepend-top-0
             Sharing & Permissions
           .form_group.prepend-top-20.sharing-and-permissions
@@ -232,7 +232,7 @@
           .form-group
             .input-group
               .input-group-addon
-                #{URI.join(root_url, @project.namespace.path)}/
+                #{URI.join(root_url, @project.namespace.full_path)}/
               = f.text_field :path, class: 'form-control'
           %ul
             %li Be careful. Renaming a project's repository can have unintended side effects.

app/views/projects/environments/folder.html.haml

+- @no_container = true
+- page_title "Environments"
+= render "projects/pipelines/head"
+
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag("environments_folder")
+
+#environments-folder-list-view{ data: { "can-create-deployment" => can?(current_user, :create_deployment, @project).to_s,
+  "can-read-environment" => can?(current_user, :read_environment, @project).to_s,
+  "css-class" => container_class,
+  "commit-icon-svg" => custom_icon("icon_commit"),
+  "terminal-icon-svg" => custom_icon("icon_terminal"),
+  "play-icon-svg" => custom_icon("icon_play") } }

app/views/projects/group_links/_index.html.haml

@@ -39,7 +39,7 @@
               = icon("folder-open-o", class: "settings-list-icon")
             .pull-left
               = link_to group do
-                = group.name
+                = group.full_name
               %br
               up to #{group_link.human_access}
               - if group_link.expires?

app/views/projects/merge_requests/_show.html.haml

@@ -94,7 +94,7 @@
         -# This tab is always loaded via AJAX
       #pipelines.pipelines.tab-pane
         - if @pipelines.any?
-          = render 'projects/commit/pipelines_list', endpoint: pipelines_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)
+          = render 'projects/commit/pipelines_list', disable_initialization: true, endpoint: pipelines_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)
       #diffs.diffs.tab-pane
         -# This tab is always loaded via AJAX
 

app/views/projects/merge_requests/widget/_heading.html.haml

@@ -28,7 +28,7 @@
         %span
           CI job
           = ci_label_for_status(status)
-        for
+          for
         - commit = @merge_request.diff_head_commit
         = succeed "." do
           = link_to commit.short_id, namespace_project_commit_path(@merge_request.source_project.namespace, @merge_request.source_project, commit), class: "monospace"

app/views/projects/new.html.haml

@@ -12,7 +12,7 @@
         Create or Import your project from popular Git services
     .col-lg-9
       = form_for @project, html: { class: 'new_project' } do |f|
-        %fieldset.append-bottom-0
+        .row
           .form-group.col-xs-12.col-sm-6
             = f.label :namespace_id, class: 'label-light' do
               %span

app/views/projects/notes/_hints.html.haml

 - supports_slash_commands = local_assigns.fetch(:supports_slash_commands, false)
 .comment-toolbar.clearfix
   .toolbar-text
-    Styling with
     = link_to 'Markdown', help_page_path('user/markdown'), target: '_blank', tabindex: -1
     - if supports_slash_commands
       and

app/views/projects/notes/_note.html.haml

@@ -78,6 +78,7 @@
         - if note.system
           .system-note-commit-list-toggler
             Toggle commit list
+            %i.fa.fa-angle-down
       - if note.attachment.url
         .note-attachment
           - if note.attachment.image?

app/views/projects/pages_domains/show.html.haml

@@ -17,7 +17,7 @@
         %p
           To access the domain create a new DNS record:
         %pre
-          #{@domain.domain} CNAME #{@domain.project.namespace.path}.#{Settings.pages.host}.
+          #{@domain.domain} CNAME #{@domain.project.pages_subdomain}.#{Settings.pages.host}.
     %tr
       %td
         Certificate

app/views/projects/pipelines/index.html.haml

@@ -5,23 +5,23 @@
 %div{ class: container_class }
   .top-area
     %ul.nav-links
-      %li{ class: ('active' if @scope.nil?) }>
+      %li{ class: active_when(@scope.nil?) }>
         = link_to project_pipelines_path(@project) do
           All
           %span.badge.js-totalbuilds-count
             = number_with_delimiter(@pipelines_count)
 
-      %li{ class: ('active' if @scope == 'running') }>
+      %li{ class: active_when(@scope == 'running') }>
         = link_to project_pipelines_path(@project, scope: :running) do
           Running
           %span.badge.js-running-count
             = number_with_delimiter(@running_or_pending_count)
 
-      %li{ class: ('active' if @scope == 'branches') }>
+      %li{ class: active_when(@scope == 'branches') }>
         = link_to project_pipelines_path(@project, scope: :branches) do
           Branches
 
-      %li{ class: ('active' if @scope == 'tags') }>
+      %li{ class: active_when(@scope == 'tags') }>
         = link_to project_pipelines_path(@project, scope: :tags) do
           Tags
 

app/views/projects/runners/_form.html.haml

@@ -32,7 +32,7 @@
     = label_tag :tag_list, class: 'control-label' do
       Tags
     .col-sm-10
-      = f.text_field :tag_list, value: runner.tag_list.to_s, class: 'form-control'
+      = f.text_field :tag_list, value: runner.tag_list.sort.join(', '), class: 'form-control'
       .help-block You can setup jobs to only use Runners with specific tags
   .form-actions
     = f.submit 'Save changes', class: 'btn btn-save'

app/views/projects/runners/_runner.html.haml

@@ -31,6 +31,6 @@
       = runner.description
   - if runner.tag_list.present?
     %p
-      - runner.tag_list.each do |tag|
+      - runner.tag_list.sort.each do |tag|
         %span.label.label-primary
           = tag

app/views/projects/runners/show.html.haml

@@ -28,7 +28,7 @@
     %tr
       %td Tags
       %td
-        - @runner.tag_list.each do |tag|
+        - @runner.tag_list.sort.each do |tag|
           %span.label.label-primary
             = tag
     %tr

app/views/projects/wikis/_sidebar_wiki_page.html.haml

-%li{ class: params[:id] == wiki_page.slug ? 'active' : '' }
+%li{ class: active_when(params[:id] == wiki_page.slug) }
   = link_to namespace_project_wiki_path(@project.namespace, @project, wiki_page) do
     = wiki_page.title.capitalize

app/views/search/_category.html.haml

 %ul.nav-links.search-filter
   - if @project
-    %li{ class: ("active" if @scope == 'blobs') }
+    %li{ class: active_when(@scope == 'blobs') }
       = link_to search_filter_path(scope: 'blobs') do
         Code
         %span.badge
           = @search_results.blobs_count
-    %li{ class: ("active" if @scope == 'issues') }
+    %li{ class: active_when(@scope == 'issues') }
       = link_to search_filter_path(scope: 'issues') do
         Issues
         %span.badge
           = @search_results.issues_count
-    %li{ class: ("active" if @scope == 'merge_requests') }
+    %li{ class: active_when(@scope == 'merge_requests') }
       = link_to search_filter_path(scope: 'merge_requests') do
         Merge requests
         %span.badge
           = @search_results.merge_requests_count
-    %li{ class: ("active" if @scope == 'milestones') }
+    %li{ class: active_when(@scope == 'milestones') }
       = link_to search_filter_path(scope: 'milestones') do
         Milestones
         %span.badge
           = @search_results.milestones_count
-    %li{ class: ("active" if @scope == 'notes') }
+    %li{ class: active_when(@scope == 'notes') }
       = link_to search_filter_path(scope: 'notes') do
         Comments
         %span.badge
           = @search_results.notes_count
-    %li{ class: ("active" if @scope == 'wiki_blobs') }
+    %li{ class: active_when(@scope == 'wiki_blobs') }
       = link_to search_filter_path(scope: 'wiki_blobs') do
         Wiki
         %span.badge
           = @search_results.wiki_blobs_count
-    %li{ class: ("active" if @scope == 'commits') }
+    %li{ class: active_when(@scope == 'commits') }
       = link_to search_filter_path(scope: 'commits') do
         Commits
         %span.badge
           = @search_results.commits_count
 
   - elsif @show_snippets
-    %li{ class: ("active" if @scope == 'snippet_blobs') }
+    %li{ class: active_when(@scope == 'snippet_blobs') }
       = link_to search_filter_path(scope: 'snippet_blobs', snippets: true, group_id: nil, project_id: nil) do
         Snippet Contents
         %span.badge
           = @search_results.snippet_blobs_count
-    %li{ class: ("active" if @scope == 'snippet_titles') }
+    %li{ class: active_when(@scope == 'snippet_titles') }
       = link_to search_filter_path(scope: 'snippet_titles', snippets: true, group_id: nil, project_id: nil) do
         Titles and Filenames
         %span.badge
           = @search_results.snippet_titles_count
 
   - else
-    %li{ class: ("active" if @scope == 'projects') }
+    %li{ class: active_when(@scope == 'projects') }
       = link_to search_filter_path(scope: 'projects') do
         Projects
         %span.badge
           = @search_results.projects_count
-    %li{ class: ("active" if @scope == 'issues') }
+    %li{ class: active_when(@scope == 'issues') }
       = link_to search_filter_path(scope: 'issues') do
         Issues
         %span.badge
           = @search_results.issues_count
-    %li{ class: ("active" if @scope == 'merge_requests') }
+    %li{ class: active_when(@scope == 'merge_requests') }
       = link_to search_filter_path(scope: 'merge_requests') do
         Merge requests
         %span.badge
           = @search_results.merge_requests_count
-    %li{ class: ("active" if @scope == 'milestones') }
+    %li{ class: active_when(@scope == 'milestones') }
       = link_to search_filter_path(scope: 'milestones') do
         Milestones
         %span.badge

app/views/search/results/_snippet_blob.html.haml

@@ -7,7 +7,7 @@
     = snippet.title
     by
     = link_to user_snippets_path(snippet.author) do
-      = image_tag avatar_icon(snippet.author_email), class: "avatar avatar-inline s16", alt: ''
+      = image_tag avatar_icon(snippet.author), class: "avatar avatar-inline s16", alt: ''
       = snippet.author_name
     %span.light= time_ago_with_tooltip(snippet.created_at)
   %h4.snippet-title

app/views/search/results/_snippet_title.html.haml

@@ -18,6 +18,6 @@
     %span
       by
       = link_to user_snippets_path(snippet_title.author) do
-        = image_tag avatar_icon(snippet_title.author_email), class: "avatar avatar-inline s16", alt: ''
+        = image_tag avatar_icon(snippet_title.author), class: "avatar avatar-inline s16", alt: ''
         = snippet_title.author_name
       %span.light= time_ago_with_tooltip(snippet_title.created_at)

app/views/shared/builds/_tabs.html.haml

 %ul.nav-links
-  %li{ class: ('active' if scope.nil?) }>
+  %li{ class: active_when(scope.nil?) }>
     = link_to build_path_proc.call(nil) do
       All
       %span.badge.js-totalbuilds-count
         = number_with_delimiter(all_builds.count(:id))
 
-  %li{ class: ('active' if scope == 'pending') }>
+  %li{ class: active_when(scope == 'pending') }>
     = link_to build_path_proc.call('pending') do
       Pending
       %span.badge
         = number_with_delimiter(all_builds.pending.count(:id))
 
-  %li{ class: ('active' if scope == 'running') }>
+  %li{ class: active_when(scope == 'running') }>
     = link_to build_path_proc.call('running') do
       Running
       %span.badge
         = number_with_delimiter(all_builds.running.count(:id))
 
-  %li{ class: ('active' if scope == 'finished') }>
+  %li{ class: active_when(scope == 'finished') }>
     = link_to build_path_proc.call('finished') do
       Finished
       %span.badge

app/views/shared/issuable/_nav.html.haml

@@ -3,23 +3,23 @@
 - issuables = @issues || @merge_requests
 
 %ul.nav-links.issues-state-filters
-  %li{ class: ("active" if params[:state] == 'opened') }>
+  %li{ class: active_when(params[:state] == 'opened') }>
     = link_to page_filter_path(state: 'opened', label: true), id: 'state-opened', title: "Filter by #{page_context_word} that are currently opened." do
       #{issuables_state_counter_text(type, :opened)}
 
   - if type == :merge_requests
-    %li{ class: ("active" if params[:state] == 'merged') }>
+    %li{ class: active_when(params[:state] == 'merged') }>
       = link_to page_filter_path(state: 'merged', label: true), id: 'state-merged', title: 'Filter by merge requests that are currently merged.' do
         #{issuables_state_counter_text(type, :merged)}
 
-    %li{ class: ("active" if params[:state] == 'closed') }>
+    %li{ class: active_when(params[:state] == 'closed') }>
       = link_to page_filter_path(state: 'closed', label: true), id: 'state-closed', title: 'Filter by merge requests that are currently closed and unmerged.' do
         #{issuables_state_counter_text(type, :closed)}
   - else
-    %li{ class: ("active" if params[:state] == 'closed') }>
+    %li{ class: active_when(params[:state] == 'closed') }>
       = link_to page_filter_path(state: 'closed', label: true), id: 'state-all', title: 'Filter by issues that are currently closed.' do
         #{issuables_state_counter_text(type, :closed)}
 
-  %li{ class: ("active" if params[:state] == 'all') }>
+  %li{ class: active_when(params[:state] == 'all') }>
     = link_to page_filter_path(state: 'all', label: true), id: 'state-all', title: "Show all #{page_context_word}." do
       #{issuables_state_counter_text(type, :all)}

app/views/shared/members/_group.html.haml

@@ -6,7 +6,7 @@
   %span.list-item-name
     = image_tag group_icon(group), class: "avatar s40", alt: ''
     %strong
-      = link_to group.name, group_path(group)
+      = link_to group.full_name, group_path(group)
     .cgray
       Joined #{time_ago_with_tooltip(group.created_at)}
       - if group_link.expires?

app/views/snippets/_snippets_scope_menu.html.haml

@@ -2,7 +2,7 @@
 - include_private = local_assigns.fetch(:include_private, false)
 
 .nav-links.snippet-scope-menu
-  %li{ class: ("active" unless params[:scope]) }
+  %li{ class: active_when(params[:scope].nil?) }
     = link_to subject_snippets_path(subject) do
       All
       %span.badge
@@ -12,19 +12,19 @@
           = subject.snippets.public_and_internal.count
 
   - if include_private
-    %li{ class: ("active" if params[:scope] == "are_private") }
+    %li{ class: active_when(params[:scope] == "are_private") }
       = link_to subject_snippets_path(subject, scope: 'are_private') do
         Private
         %span.badge
           = subject.snippets.are_private.count
 
-  %li{ class: ("active" if params[:scope] == "are_internal") }
+  %li{ class: active_when(params[:scope] == "are_internal") }
     = link_to subject_snippets_path(subject, scope: 'are_internal') do
       Internal
       %span.badge
         = subject.snippets.are_internal.count
 
-  %li{ class: ("active" if params[:scope] == "are_public") }
+  %li{ class: active_when(params[:scope] == "are_public") }
     = link_to subject_snippets_path(subject, scope: 'are_public') do
       Public
       %span.badge