Add latest changes from gitlab-org/gitlab@master

9 files changed, 317 insertions, 7 deletions

diff --git a/app/assets/javascripts/ci/pipeline_new/graphql/queries/ci_config_variables.graphql b/app/assets/javascripts/ci/pipeline_new/graphql/queries/ci_config_variables.graphql
index 648cd8b66b5..f93f5ad4f11 100644
--- a/app/assets/javascripts/ci/pipeline_new/graphql/queries/ci_config_variables.graphql
+++ b/app/assets/javascripts/ci/pipeline_new/graphql/queries/ci_config_variables.graphql
@@ -1,7 +1,7 @@
 query ciConfigVariables($fullPath: ID!, $ref: String!) {
   project(fullPath: $fullPath) {
     id
-    ciConfigVariables(sha: $ref) {
+    ciConfigVariables(ref: $ref) {
       description
       key
       value
diff --git a/app/assets/javascripts/projects/default_project_templates.js b/app/assets/javascripts/projects/default_project_templates.js
index a44855c14d5..fb201576e85 100644
--- a/app/assets/javascripts/projects/default_project_templates.js
+++ b/app/assets/javascripts/projects/default_project_templates.js
@@ -121,4 +121,8 @@ export default {
     text: s__('ProjectTemplates|TYPO3 Distribution'),
     icon: '.template-option .icon-typo3',
   },
+  laravel: {
+    text: s__('ProjectTemplates|Laravel Framework'),
+    icon: '.template-option .icon-laravel',
+  },
 };
diff --git a/app/assets/javascripts/super_sidebar/components/nav_item.vue b/app/assets/javascripts/super_sidebar/components/nav_item.vue
index c3bd3b9b5d1..8248e11da33 100644
--- a/app/assets/javascripts/super_sidebar/components/nav_item.vue
+++ b/app/assets/javascripts/super_sidebar/components/nav_item.vue
@@ -1,16 +1,36 @@
 <script>
 import { kebabCase } from 'lodash';
-import { GlCollapse, GlIcon, GlBadge } from '@gitlab/ui';
+import { GlButton, GlCollapse, GlIcon, GlBadge } from '@gitlab/ui';
+import { s__ } from '~/locale';
 import { CLICK_MENU_ITEM_ACTION, TRACKING_UNKNOWN_ID } from '~/super_sidebar/constants';
 
 export default {
+  i18n: {
+    pinItem: s__('Navigation|Pin item'),
+    unpinItem: s__('Navigation|Unpin item'),
+  },
   name: 'NavItem',
   components: {
+    GlButton,
     GlCollapse,
     GlIcon,
     GlBadge,
   },
+  inject: {
+    pinnedItemIds: { default: { ids: [] } },
+    panelSupportsPins: { default: false },
+  },
   props: {
+    draggable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isStatic: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     item: {
       type: Object,
       required: true,
@@ -54,6 +74,12 @@ export default {
       }
       return this.item.is_active;
     },
+    isPinnable() {
+      return this.panelSupportsPins && !this.isSection && !this.isStatic;
+    },
+    isPinned() {
+      return this.pinnedItemIds.ids.includes(this.item.id);
+    },
     trackingProps() {
       if (!this.item.id) {
         return {
@@ -87,7 +113,10 @@ export default {
         // Reset user agent styles on <button>
         'gl-appearance-none gl-border-0 gl-bg-transparent gl-text-left': this.isSection,
         'gl-w-full gl-focus--focus': this.isSection,
+        'nav-item-link': !this.isSection,
         'gl-bg-t-gray-a-08': this.isActive,
+        'gl-py-2': this.isPinnable,
+        'gl-py-3': !this.isPinnable,
         ...this.linkClasses,
       };
     },
@@ -108,7 +137,7 @@ export default {
     <component
       :is="elem"
       v-bind="linkProps"
-      class="gl-rounded-base gl-relative gl-display-flex gl-align-items-center gl-py-3 gl-px-0 gl-line-height-normal gl-text-black-normal! gl-hover-bg-t-gray-a-08 gl-text-decoration-none!"
+      class="gl-rounded-base gl-relative gl-display-flex gl-align-items-center gl-px-0 gl-line-height-normal gl-text-black-normal! gl-hover-bg-t-gray-a-08 gl-text-decoration-none!"
       :class="computedLinkClasses"
       data-qa-selector="sidebar_menu_link"
       data-testid="nav-item-link"
@@ -124,6 +153,11 @@ export default {
       <div class="gl-flex-shrink-0 gl-w-6 gl-mx-3">
         <slot name="icon">
           <gl-icon v-if="item.icon" :name="item.icon" class="gl-ml-2" />
+          <gl-icon
+            v-else-if="draggable"
+            name="grip"
+            class="gl-text-gray-400 gl-ml-2 draggable-icon"
+          />
         </slot>
       </div>
       <div class="gl-pr-3 gl-text-gray-900 gl-truncate-end">
@@ -133,11 +167,27 @@ export default {
         </div>
       </div>
       <slot name="actions"></slot>
-      <span v-if="isSection || hasPill" class="gl-flex-grow-1 gl-text-right gl-mr-3">
+      <span v-if="isSection || hasPill || isPinnable" class="gl-flex-grow-1 gl-text-right gl-mr-3">
         <gl-badge v-if="hasPill" size="sm" variant="info">
           {{ pillData }}
         </gl-badge>
         <gl-icon v-else-if="isSection" :name="collapseIcon" />
+        <gl-button
+          v-else-if="isPinnable && !isPinned"
+          size="small"
+          category="tertiary"
+          icon="thumbtack"
+          :aria-label="$options.i18n.pinItem"
+          @click.prevent="$emit('pin-add', item.id)"
+        />
+        <gl-button
+          v-else-if="isPinnable && isPinned"
+          size="small"
+          category="tertiary"
+          :aria-label="$options.i18n.unpinItem"
+          icon="thumbtack-solid"
+          @click.prevent="$emit('pin-remove', item.id)"
+        />
       </span>
     </component>
     <gl-collapse
@@ -152,6 +202,8 @@ export default {
         v-for="subItem of item.items"
         :key="`${item.title}-${subItem.title}`"
         :item="subItem"
+        @pin-add="(itemId) => $emit('pin-add', itemId)"
+        @pin-remove="(itemId) => $emit('pin-remove', itemId)"
       />
     </gl-collapse>
   </li>
diff --git a/app/assets/javascripts/super_sidebar/components/pinned_section.vue b/app/assets/javascripts/super_sidebar/components/pinned_section.vue
new file mode 100644
index 00000000000..34aeae26d1f
--- /dev/null
+++ b/app/assets/javascripts/super_sidebar/components/pinned_section.vue
@@ -0,0 +1,97 @@
+<script>
+import { GlCollapse, GlIcon } from '@gitlab/ui';
+import Draggable from 'vuedraggable';
+import { s__ } from '~/locale';
+import NavItem from './nav_item.vue';
+
+export default {
+  i18n: {
+    pinned: s__('Navigation|Pinned'),
+    emptyHint: s__('Navigation|Your pinned items appear here.'),
+  },
+  name: 'PinnedSection',
+  components: {
+    Draggable,
+    GlCollapse,
+    GlIcon,
+    NavItem,
+  },
+  props: {
+    items: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      expanded: true,
+      draggableItems: this.items,
+    };
+  },
+  computed: {
+    collapseIcon() {
+      return this.expanded ? 'chevron-up' : 'chevron-down';
+    },
+    itemIds() {
+      return this.draggableItems.map((item) => item.id);
+    },
+  },
+  watch: {
+    items(newItems) {
+      this.draggableItems = newItems;
+    },
+  },
+  methods: {
+    handleDrag(event) {
+      if (event.oldIndex === event.newIndex) return;
+      this.$emit(
+        'pin-reorder',
+        this.items[event.oldIndex].id,
+        this.items[event.newIndex].id,
+        event.oldIndex < event.newIndex,
+      );
+    },
+  },
+};
+</script>
+
+<template>
+  <section class="gl-mx-2">
+    <a
+      href="#"
+      class="gl-rounded-base gl-relative gl-display-flex gl-align-items-center gl-py-3 gl-px-0 gl-line-height-normal gl-text-black-normal! gl-hover-bg-t-gray-a-08 gl-text-decoration-none!"
+      @click="expanded = !expanded"
+    >
+      <div class="gl-flex-shrink-0 gl-w-6 gl-mx-3">
+        <gl-icon name="thumbtack" class="gl-ml-2" />
+      </div>
+
+      <span class="gl-font-weight-bold gl-font-sm gl-flex-grow-1">{{ $options.i18n.pinned }}</span>
+      <gl-icon :name="collapseIcon" class="gl-mr-3" />
+    </a>
+    <gl-collapse v-model="expanded">
+      <draggable
+        v-if="items.length > 0"
+        v-model="draggableItems"
+        class="gl-p-0 gl-m-0"
+        data-testid="pinned-nav-items"
+        handle=".draggable-icon"
+        tag="ul"
+        @end="handleDrag"
+      >
+        <nav-item
+          v-for="item of draggableItems"
+          :key="item.id"
+          draggable
+          :item="item"
+          @pin-remove="(itemId) => $emit('pin-remove', itemId)"
+        />
+      </draggable>
+      <div v-else class="gl-text-secondary gl-font-sm gl-py-3" style="margin-left: 2.5rem">
+        {{ $options.i18n.emptyHint }}
+      </div>
+    </gl-collapse>
+    <hr class="gl-my-2" />
+  </section>
+</template>
diff --git a/app/assets/javascripts/super_sidebar/components/sidebar_menu.vue b/app/assets/javascripts/super_sidebar/components/sidebar_menu.vue
index fc8968c50ea..843db691816 100644
--- a/app/assets/javascripts/super_sidebar/components/sidebar_menu.vue
+++ b/app/assets/javascripts/super_sidebar/components/sidebar_menu.vue
@@ -1,24 +1,156 @@
 <script>
+import * as Sentry from '@sentry/browser';
+import axios from '~/lib/utils/axios_utils';
+import { PANELS_WITH_PINS } from '../constants';
 import NavItem from './nav_item.vue';
+import PinnedSection from './pinned_section.vue';
 
 export default {
   name: 'SidebarMenu',
   components: {
     NavItem,
+    PinnedSection,
+  },
+
+  provide() {
+    return {
+      pinnedItemIds: this.changedPinnedItemIds,
+      panelSupportsPins: this.supportsPins,
+    };
   },
   props: {
     items: {
       type: Array,
       required: true,
     },
+    pinnedItemIds: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    panelType: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    updatePinsUrl: {
+      type: String,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      // This is used as a provide and injected into the nav items.
+      // Note: It has to be an object to be reactive.
+      changedPinnedItemIds: { ids: this.pinnedItemIds },
+    };
+  },
+
+  computed: {
+    // Returns the list of items that we want to have static at the top.
+    // Only sidebars that support pins also support a static section.
+    staticItems() {
+      if (!this.supportsPins) return [];
+      return this.items.filter((item) => !item.items || item.items.length === 0);
+    },
+
+    // Returns only the items that aren't static at the top and makes sure no
+    // section shows as active (and expanded) when one of its items is pinned.
+    nonStaticItems() {
+      if (!this.supportsPins) return this.items;
+
+      return this.items
+        .filter((item) => item.items && item.items.length > 0)
+        .map((item) => {
+          const hasActivePinnedChild = item.items.some((childItem) => {
+            return childItem.is_active && this.changedPinnedItemIds.ids.includes(childItem.id);
+          });
+          const showAsActive = item.is_active && !hasActivePinnedChild;
+
+          return { ...item, is_active: showAsActive };
+        });
+    },
+
+    // Returns a flat list of all items that are in sections, but not the sections.
+    // Only items from sections (item.items) can be pinned.
+    flatPinnableItems() {
+      return this.nonStaticItems.flatMap((item) => item.items).filter(Boolean);
+    },
+
+    pinnedItems() {
+      return this.changedPinnedItemIds.ids
+        .map((id) => this.flatPinnableItems.find((item) => item.id === id))
+        .filter(Boolean);
+    },
+    supportsPins() {
+      return PANELS_WITH_PINS.includes(this.panelType);
+    },
+  },
+  methods: {
+    createPin(itemId) {
+      this.changedPinnedItemIds.ids.push(itemId);
+      this.updatePins();
+    },
+    destroyPin(itemId) {
+      this.changedPinnedItemIds.ids = this.changedPinnedItemIds.ids.filter((id) => id !== itemId);
+      this.updatePins();
+    },
+    movePin(fromId, toId, isDownwards) {
+      const fromIndex = this.changedPinnedItemIds.ids.indexOf(fromId);
+      this.changedPinnedItemIds.ids.splice(fromIndex, 1);
+
+      let toIndex = this.changedPinnedItemIds.ids.indexOf(toId);
+
+      // If the item was moved downwards, we insert it *after* the item it was dragged on to.
+      // This matches how vuedraggable previews the change while still dragging.
+      if (isDownwards) toIndex += 1;
+
+      this.changedPinnedItemIds.ids.splice(toIndex, 0, fromId);
+
+      this.updatePins();
+    },
+    updatePins() {
+      axios
+        .put(this.updatePinsUrl, {
+          panel: this.panelType,
+          menu_item_ids: this.changedPinnedItemIds.ids,
+        })
+        .then((response) => {
+          this.changedPinnedItemIds.ids = response.data;
+        })
+        .catch((e) => {
+          Sentry.captureException(e);
+        });
+    },
   },
 };
 </script>
 
 <template>
   <nav class="gl-py-2 gl-relative">
+    <section v-if="staticItems.length > 0" class="gl-mx-2">
+      <ul class="gl-p-0 gl-m-0">
+        <nav-item v-for="item in staticItems" :key="item.id" :item="item" is-static />
+      </ul>
+      <hr class="gl-my-2" />
+    </section>
+
+    <pinned-section
+      v-if="supportsPins"
+      :items="pinnedItems"
+      @pin-remove="destroyPin"
+      @pin-reorder="movePin"
+    />
+
     <ul class="gl-px-2 gl-list-style-none">
-      <nav-item v-for="item in items" :key="`menu-${item.title}`" :item="item" />
+      <nav-item
+        v-for="item in nonStaticItems"
+        :key="item.id"
+        :item="item"
+        @pin-add="createPin"
+        @pin-remove="destroyPin"
+      />
     </ul>
   </nav>
 </template>
diff --git a/app/assets/javascripts/super_sidebar/components/super_sidebar.vue b/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
index b7a9583cae9..6807b4b2c7e 100644
--- a/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
+++ b/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
@@ -92,7 +92,12 @@ export default {
             />
           </gl-collapse>
           <gl-collapse :visible="!contextSwitcherOpen">
-            <sidebar-menu :items="menuItems" />
+            <sidebar-menu
+              :items="menuItems"
+              :panel-type="sidebarData.panel_type"
+              :pinned-item-ids="sidebarData.pinned_items"
+              :update-pins-url="sidebarData.update_pins_url"
+            />
             <sidebar-portal-target />
           </gl-collapse>
         </div>
diff --git a/app/assets/javascripts/super_sidebar/constants.js b/app/assets/javascripts/super_sidebar/constants.js
index ad9d4bc43f2..8290c4f533f 100644
--- a/app/assets/javascripts/super_sidebar/constants.js
+++ b/app/assets/javascripts/super_sidebar/constants.js
@@ -15,3 +15,5 @@ export const MAX_FREQUENT_GROUPS_COUNT = 3;
 
 export const TRACKING_UNKNOWN_ID = 'item_without_id';
 export const CLICK_MENU_ITEM_ACTION = 'click_menu_item';
+
+export const PANELS_WITH_PINS = ['group', 'project'];
diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss
index 48c87682897..1431d8ed154 100644
--- a/app/assets/stylesheets/framework/super_sidebar.scss
+++ b/app/assets/stylesheets/framework/super_sidebar.scss
@@ -144,6 +144,24 @@
       @include active-toggle;
     }
   }
+
+  .nav-item-link {
+    button,
+    .draggable-icon {
+      opacity: 0;
+    }
+
+    .draggable-icon {
+      cursor: grab;
+    }
+
+    &:hover {
+      button,
+      .draggable-icon {
+        opacity: 1;
+      }
+    }
+  }
 }
 
 .super-sidebar-skip-to {
diff --git a/app/assets/stylesheets/page_bundles/escalation_policies.scss b/app/assets/stylesheets/page_bundles/escalation_policies.scss
index 84c62ba93dd..5ca3dbcbcef 100644
--- a/app/assets/stylesheets/page_bundles/escalation_policies.scss
+++ b/app/assets/stylesheets/page_bundles/escalation_policies.scss
@@ -28,7 +28,7 @@ $stroke-size: 1px;
 
 .escalation-rule-row {
   @media (max-width: $breakpoint-lg) {
-    @include gl-flex-wrap;
+    @include gl-flex-wrap-wrap;
   }
 }