Add latest changes from gitlab-org/gitlab@15-2-stable-eev15.2.0-rc42

8 files changed, 75 insertions, 27 deletions

diff --git a/app/assets/javascripts/vue_shared/issuable/create/components/issuable_form.vue b/app/assets/javascripts/vue_shared/issuable/create/components/issuable_form.vue
index 89eecea5239..25799171905 100644
--- a/app/assets/javascripts/vue_shared/issuable/create/components/issuable_form.vue
+++ b/app/assets/javascripts/vue_shared/issuable/create/components/issuable_form.vue
@@ -81,7 +81,8 @@ export default {
               ref="textarea"
               v-model="issuableDescription"
               dir="auto"
-              class="note-textarea qa-issuable-form-description rspec-issuable-form-description js-gfm-input js-autosize markdown-area"
+              class="note-textarea rspec-issuable-form-description js-gfm-input js-autosize markdown-area"
+              data-qa-selector="issuable_form_description_field"
               :aria-label="__('Description')"
               :placeholder="__('Write a comment or drag your files here…')"
             ></textarea>
diff --git a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue
index a9f8caa3e1f..b616b390032 100644
--- a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue
+++ b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue
@@ -86,7 +86,18 @@ export default {
     createdAt() {
       return getTimeago().format(this.issuable.createdAt);
     },
-    updatedAt() {
+    timestamp() {
+      if (this.issuable.state === 'closed' && this.issuable.closedAt) {
+        return this.issuable.closedAt;
+      }
+      return this.issuable.updatedAt;
+    },
+    formattedTimestamp() {
+      if (this.issuable.state === 'closed' && this.issuable.closedAt) {
+        return sprintf(__('closed %{timeago}'), {
+          timeago: getTimeago().format(this.issuable.closedAt),
+        });
+      }
       return sprintf(__('updated %{timeAgo}'), {
         timeAgo: getTimeago().format(this.issuable.updatedAt),
       });
@@ -134,6 +145,7 @@ export default {
   },
   methods: {
     hasSlotContents(slotName) {
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return Boolean(this.$slots[slotName]);
     },
     scopedLabel(label) {
@@ -311,10 +323,10 @@ export default {
       <div
         v-gl-tooltip.bottom
         class="gl-text-gray-500 gl-display-none gl-sm-display-inline-block"
-        :title="tooltipTitle(issuable.updatedAt)"
-        data-testid="issuable-updated-at"
+        :title="tooltipTitle(timestamp)"
+        data-testid="issuable-timestamp"
       >
-        {{ updatedAt }}
+        {{ formattedTimestamp }}
       </div>
     </div>
   </li>
diff --git a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_list_root.vue b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_list_root.vue
index 8fbf0bb10a0..189bbb56432 100644
--- a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_list_root.vue
+++ b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_list_root.vue
@@ -1,11 +1,13 @@
 <script>
 import { GlAlert, GlKeysetPagination, GlSkeletonLoader, GlPagination } from '@gitlab/ui';
 import { uniqueId } from 'lodash';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
+import PageSizeSelector from '~/vue_shared/components/page_size_selector.vue';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { updateHistory, setUrlParams } from '~/lib/utils/url_utility';
 import FilteredSearchBar from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
 
-import { DEFAULT_SKELETON_COUNT } from '../constants';
+import { DEFAULT_SKELETON_COUNT, PAGE_SIZE_STORAGE_KEY } from '../constants';
 import IssuableBulkEditSidebar from './issuable_bulk_edit_sidebar.vue';
 import IssuableItem from './issuable_item.vue';
 import IssuableTabs from './issuable_tabs.vue';
@@ -29,6 +31,8 @@ export default {
     IssuableBulkEditSidebar,
     GlPagination,
     VueDraggable,
+    PageSizeSelector,
+    LocalStorageSync,
   },
   props: {
     namespace: {
@@ -173,6 +177,11 @@ export default {
       required: false,
       default: false,
     },
+    showPageSizeChangeControls: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -262,7 +271,11 @@ export default {
     handleVueDraggableUpdate({ newIndex, oldIndex }) {
       this.$emit('reorder', { newIndex, oldIndex });
     },
+    handlePageSizeChange(newPageSize) {
+      this.$emit('page-size-change', newPageSize);
+    },
   },
+  PAGE_SIZE_STORAGE_KEY,
 };
 </script>
 
@@ -353,24 +366,38 @@ export default {
       <slot v-else name="empty-state"></slot>
     </template>
 
-    <div v-if="showPaginationControls && useKeysetPagination" class="gl-text-center gl-mt-3">
+    <div class="gl-text-center gl-mt-6 gl-relative">
       <gl-keyset-pagination
+        v-if="showPaginationControls && useKeysetPagination"
         :has-next-page="hasNextPage"
         :has-previous-page="hasPreviousPage"
         @next="$emit('next-page')"
         @prev="$emit('previous-page')"
       />
+      <gl-pagination
+        v-else-if="showPaginationControls"
+        :per-page="defaultPageSize"
+        :total-items="totalItems"
+        :value="currentPage"
+        :prev-page="previousPage"
+        :next-page="nextPage"
+        align="center"
+        class="gl-pagination gl-mt-3"
+        @input="$emit('page-change', $event)"
+      />
+
+      <local-storage-sync
+        v-if="showPageSizeChangeControls"
+        :value="defaultPageSize"
+        :storage-key="$options.PAGE_SIZE_STORAGE_KEY"
+        @input="handlePageSizeChange"
+      >
+        <page-size-selector
+          :value="defaultPageSize"
+          class="gl-absolute gl-right-0"
+          @input="handlePageSizeChange"
+        />
+      </local-storage-sync>
     </div>
-    <gl-pagination
-      v-else-if="showPaginationControls"
-      :per-page="defaultPageSize"
-      :total-items="totalItems"
-      :value="currentPage"
-      :prev-page="previousPage"
-      :next-page="nextPage"
-      align="center"
-      class="gl-pagination gl-mt-3"
-      @input="$emit('page-change', $event)"
-    />
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/issuable/list/constants.js b/app/assets/javascripts/vue_shared/issuable/list/constants.js
index be9afc0610d..507f333a34e 100644
--- a/app/assets/javascripts/vue_shared/issuable/list/constants.js
+++ b/app/assets/javascripts/vue_shared/issuable/list/constants.js
@@ -56,3 +56,5 @@ export const IssuableTypes = {
 export const DEFAULT_PAGE_SIZE = 20;
 
 export const DEFAULT_SKELETON_COUNT = 5;
+
+export const PAGE_SIZE_STORAGE_KEY = 'issuable_list_page_size';
diff --git a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_description.vue b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_description.vue
index f57b5b2deb4..d4e9120ff17 100644
--- a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_description.vue
+++ b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_description.vue
@@ -37,7 +37,11 @@ export default {
 </script>
 
 <template>
-  <div class="description" :class="{ 'js-task-list-container': canEdit && enableTaskList }">
+  <div
+    class="description"
+    :class="{ 'js-task-list-container': canEdit && enableTaskList }"
+    data-qa-selector="description_content"
+  >
     <div ref="gfmContainer" v-safe-html="issuable.descriptionHtml" class="md"></div>
     <textarea
       v-if="issuable.description && enableTaskList"
diff --git a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_edit_form.vue b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_edit_form.vue
index 33dca3e9332..2fc1f935501 100644
--- a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_edit_form.vue
+++ b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_edit_form.vue
@@ -123,7 +123,6 @@ export default {
         :placeholder="__('Title')"
         :aria-label="__('Title')"
         :autofocus="true"
-        class="qa-title-input"
         @keydown="handleKeydown($event, 'title')"
       />
     </gl-form-group>
@@ -149,7 +148,7 @@ export default {
             :data-supports-quick-actions="enableAutocomplete"
             :aria-label="__('Description')"
             :placeholder="__('Write a comment or drag your files here…')"
-            class="note-textarea js-gfm-input js-autosize markdown-area qa-description-textarea"
+            class="note-textarea js-gfm-input js-autosize markdown-area"
             dir="auto"
             @keydown="handleKeydown($event, 'description')"
           ></textarea>
diff --git a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_header.vue b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_header.vue
index f035795a045..cdc5903b934 100644
--- a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_header.vue
+++ b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_header.vue
@@ -112,7 +112,7 @@ export default {
         <gl-icon v-if="statusIcon" :name="statusIcon" :class="statusIconClass" />
         <span class="gl-display-none gl-sm-display-block"><slot name="status-badge"></slot></span>
       </gl-badge>
-      <div class="issuable-meta gl-display-flex gl-align-items-center d-md-inline-block">
+      <div class="issuable-meta gl-display-flex! gl-align-items-center">
         <div v-if="blocked || confidential" class="gl-display-inline-block">
           <div v-if="blocked" data-testid="blocked" class="issuable-warning-icon inline">
             <gl-icon name="lock" :aria-label="__('Blocked')" />
@@ -139,13 +139,15 @@ export default {
             :size="24"
             :src="author.avatarUrl"
             :label="author.name"
-            class="d-none d-sm-inline-flex gl-mx-1"
+            :class="[{ 'gl-display-none': !isAuthorExternal }, 'gl-sm-display-inline-flex gl-mx-1']"
           >
             <template #meta>
-              <gl-icon v-if="isAuthorExternal" name="external-link" />
+              <gl-icon v-if="isAuthorExternal" name="external-link" class="gl-ml-1" />
             </template>
           </gl-avatar-labeled>
-          <strong class="author d-sm-none d-inline">@{{ author.username }}</strong>
+          <strong v-if="author.username" class="author gl-display-inline gl-sm-display-none!"
+            >@{{ author.username }}</strong
+          >
         </gl-avatar-link>
         <span
           v-if="taskCompletionStatus && hasTasks"
diff --git a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_title.vue b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_title.vue
index 3d7c71ce974..35124bd15d2 100644
--- a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_title.vue
+++ b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_title.vue
@@ -64,8 +64,9 @@ export default {
     <div class="title-container">
       <h1
         v-safe-html="issuable.titleHtml || issuable.title"
-        class="title qa-title gl-font-size-h-display"
+        class="title gl-font-size-h-display"
         dir="auto"
+        data-qa-selector="title_content"
         data-testid="title"
       ></h1>
       <gl-button
@@ -74,7 +75,7 @@ export default {
         :title="$options.i18n.editTitleAndDescription"
         :aria-label="$options.i18n.editTitleAndDescription"
         icon="pencil"
-        class="btn-edit js-issuable-edit qa-edit-button"
+        class="btn-edit js-issuable-edit"
         @click="$emit('edit-issuable', $event)"
       />
     </div>