Add latest changes from gitlab-org/gitlab@master

1 files changed, 139 insertions, 99 deletions

diff --git a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
index 8e2128ac713..1042029b6db 100644
--- a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
+++ b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
@@ -25,10 +25,33 @@ export default {
   PREV_PAGE: 1,
   NEXT_PAGE: 2,
   fields: [
-    { key: 'error', label: __('Open errors'), thClass: 'w-70p' },
-    { key: 'events', label: __('Events') },
-    { key: 'users', label: __('Users') },
-    { key: 'lastSeen', label: __('Last seen'), thClass: 'w-15p' },
+    {
+      key: 'error',
+      label: __('Error'),
+      thClass: 'w-70p',
+      tdClass: 'table-col d-flex align-items-center d-sm-table-cell',
+    },
+    {
+      key: 'events',
+      label: __('Events'),
+      tdClass: 'table-col d-flex align-items-center d-sm-table-cell',
+    },
+    {
+      key: 'users',
+      label: __('Users'),
+      tdClass: 'table-col d-flex align-items-center d-sm-table-cell',
+    },
+    {
+      key: 'lastSeen',
+      label: __('Last seen'),
+      thClass: 'w-15p',
+      tdClass: 'table-col d-flex align-items-center d-sm-table-cell',
+    },
+    {
+      key: 'details',
+      tdClass: 'table-col d-sm-none d-flex align-items-center',
+      thClass: 'invisible w-0',
+    },
   ],
   sortFields: {
     last_seen: __('Last Seen'),
@@ -149,61 +172,63 @@ export default {
   <div class="error-list">
     <div v-if="errorTrackingEnabled">
       <div
-        class="d-flex flex-row justify-content-around align-items-center bg-secondary border mt-2"
+        class="row flex-column flex-sm-row align-items-sm-center row-top m-0 mt-sm-2 mx-sm-1 p-0 p-sm-3"
       >
-        <div class="filtered-search-box flex-grow-1 my-3 ml-3 mr-2">
-          <gl-dropdown
-            :text="__('Recent searches')"
-            class="filtered-search-history-dropdown-wrapper d-none d-md-block"
-            toggle-class="filtered-search-history-dropdown-toggle-button"
-            :disabled="loading"
-          >
-            <div v-if="!$options.hasLocalStorage" class="px-3">
-              {{ __('This feature requires local storage to be enabled') }}
-            </div>
-            <template v-else-if="recentSearches.length > 0">
-              <gl-dropdown-item
-                v-for="searchQuery in recentSearches"
-                :key="searchQuery"
-                @click="setSearchText(searchQuery)"
-                >{{ searchQuery }}</gl-dropdown-item
-              >
-              <gl-dropdown-divider />
-              <gl-dropdown-item ref="clearRecentSearches" @click="clearRecentSearches">{{
-                __('Clear recent searches')
-              }}</gl-dropdown-item>
-            </template>
-            <div v-else class="px-3">{{ __("You don't have any recent searches") }}</div>
-          </gl-dropdown>
-          <div class="filtered-search-input-container flex-fill">
-            <gl-form-input
-              v-model="errorSearchQuery"
-              class="pl-2 filtered-search"
+        <div class="search-box flex-fill mr-sm-2 my-3 m-sm-0 p-3 p-sm-0">
+          <div class="filtered-search-box mb-0">
+            <gl-dropdown
+              :text="__('Recent searches')"
+              class="filtered-search-history-dropdown-wrapper"
+              toggle-class="filtered-search-history-dropdown-toggle-button"
               :disabled="loading"
-              :placeholder="__('Search or filter results…')"
-              autofocus
-              @keyup.enter.native="searchByQuery(errorSearchQuery)"
-            />
-          </div>
-          <div class="gl-search-box-by-type-right-icons">
-            <gl-button
-              v-if="errorSearchQuery.length > 0"
-              v-gl-tooltip.hover
-              :title="__('Clear')"
-              class="clear-search text-secondary"
-              name="clear"
-              @click="errorSearchQuery = ''"
             >
-              <gl-icon name="close" :size="12" />
-            </gl-button>
+              <div v-if="!$options.hasLocalStorage" class="px-3">
+                {{ __('This feature requires local storage to be enabled') }}
+              </div>
+              <template v-else-if="recentSearches.length > 0">
+                <gl-dropdown-item
+                  v-for="searchQuery in recentSearches"
+                  :key="searchQuery"
+                  @click="setSearchText(searchQuery)"
+                  >{{ searchQuery }}
+                </gl-dropdown-item>
+                <gl-dropdown-divider />
+                <gl-dropdown-item ref="clearRecentSearches" @click="clearRecentSearches"
+                  >{{ __('Clear recent searches') }}
+                </gl-dropdown-item>
+              </template>
+              <div v-else class="px-3">{{ __("You don't have any recent searches") }}</div>
+            </gl-dropdown>
+            <div class="filtered-search-input-container flex-fill">
+              <gl-form-input
+                v-model="errorSearchQuery"
+                class="pl-2 filtered-search"
+                :disabled="loading"
+                :placeholder="__('Search or filter results…')"
+                autofocus
+                @keyup.enter.native="searchByQuery(errorSearchQuery)"
+              />
+            </div>
+            <div class="gl-search-box-by-type-right-icons">
+              <gl-button
+                v-if="errorSearchQuery.length > 0"
+                v-gl-tooltip.hover
+                :title="__('Clear')"
+                class="clear-search text-secondary"
+                name="clear"
+                @click="errorSearchQuery = ''"
+              >
+                <gl-icon name="close" :size="12" />
+              </gl-button>
+            </div>
           </div>
         </div>
 
         <gl-dropdown
+          class="sort-control"
           :text="$options.sortFields[sortField]"
           left
           :disabled="loading"
-          class="mr-3"
           menu-class="sort-dropdown"
         >
           <gl-dropdown-item
@@ -227,62 +252,77 @@ export default {
         <gl-loading-icon size="md" />
       </div>
 
-      <gl-table
-        v-else
-        class="mt-3"
-        :items="errors"
-        :fields="$options.fields"
-        :show-empty="true"
-        fixed
-        stacked="sm"
-      >
-        <template slot="HEAD_events" slot-scope="data">
-          <div class="text-md-right">{{ data.label }}</div>
-        </template>
-        <template slot="HEAD_users" slot-scope="data">
-          <div class="text-md-right">{{ data.label }}</div>
-        </template>
-        <template slot="error" slot-scope="errors">
-          <div class="d-flex flex-column">
-            <gl-link class="d-flex text-dark" :href="getDetailsLink(errors.item.id)">
-              <strong class="text-truncate">{{ errors.item.title.trim() }}</strong>
-            </gl-link>
-            <span class="text-secondary text-truncate">
-              {{ errors.item.culprit }}
-            </span>
-          </div>
-        </template>
-        <template slot="events" slot-scope="errors">
-          <div class="text-md-right">{{ errors.item.count }}</div>
-        </template>
+      <template v-else>
+        <h4 class="d-block d-sm-none my-3">{{ __('Open errors') }}</h4>
 
-        <template slot="users" slot-scope="errors">
-          <div class="text-md-right">{{ errors.item.userCount }}</div>
-        </template>
+        <gl-table
+          class="mt-3"
+          :items="errors"
+          :fields="$options.fields"
+          :show-empty="true"
+          fixed
+          stacked="sm"
+          tbody-tr-class="table-row mb-4"
+        >
+          <template v-slot:head(error)>
+            <div class="d-none d-sm-block">{{ __('Open errors') }}</div>
+          </template>
+          <template v-slot:head(events)="data">
+            <div class="text-sm-right">{{ data.label }}</div>
+          </template>
+          <template v-slot:head(users)="data">
+            <div class="text-sm-right">{{ data.label }}</div>
+          </template>
 
-        <template slot="lastSeen" slot-scope="errors">
-          <div class="d-flex align-items-center">
-            <time-ago :time="errors.item.lastSeen" class="text-secondary" />
-          </div>
-        </template>
-        <template slot="empty">
-          <div ref="empty">
+          <template v-slot:error="errors">
+            <div class="d-flex flex-column">
+              <gl-link class="d-flex mw-100 text-dark" :href="getDetailsLink(errors.item.id)">
+                <strong class="text-truncate">{{ errors.item.title.trim() }}</strong>
+              </gl-link>
+              <span class="text-secondary text-truncate mw-100">
+                {{ errors.item.culprit }}
+              </span>
+            </div>
+          </template>
+          <template v-slot:events="errors">
+            <div class="text-right">{{ errors.item.count }}</div>
+          </template>
+
+          <template v-slot:users="errors">
+            <div class="text-right">{{ errors.item.userCount }}</div>
+          </template>
+
+          <template v-slot:lastSeen="errors">
+            <div class="text-md-left text-right">
+              <time-ago :time="errors.item.lastSeen" class="text-secondary" />
+            </div>
+          </template>
+          <template v-slot:details="errors">
+            <gl-button
+              :href="getDetailsLink(errors.item.id)"
+              variant="outline-info"
+              class="d-block"
+            >
+              {{ __('More details') }}
+            </gl-button>
+          </template>
+          <template v-slot:empty>
             {{ __('No errors to display.') }}
             <gl-link class="js-try-again" @click="restartPolling">
               {{ __('Check again') }}
             </gl-link>
-          </div>
-        </template>
-      </gl-table>
-      <gl-pagination
-        v-show="!loading"
-        v-if="paginationRequired"
-        :prev-page="$options.PREV_PAGE"
-        :next-page="$options.NEXT_PAGE"
-        :value="pageValue"
-        align="center"
-        @input="goToPage"
-      />
+          </template>
+        </gl-table>
+        <gl-pagination
+          v-show="!loading"
+          v-if="paginationRequired"
+          :prev-page="$options.PREV_PAGE"
+          :next-page="$options.NEXT_PAGE"
+          :value="pageValue"
+          align="center"
+          @input="goToPage"
+        />
+      </template>
     </div>
     <div v-else-if="userCanEnableErrorTracking">
       <gl-empty-state