fix: remove sort history entries + fix history entries order - fixed #1455

components/history/__tests__/History.spec.js

@@ -1,7 +1,6 @@
 import History from "../"
 import { fb } from "~/helpers/fb"
 import { shallowMount } from "@vue/test-utils"
-import HistoryRestCard from "../rest/Card"
 
 const restHistory = [
   {
@@ -141,7 +140,7 @@ describe("Clear History", () => {
     const wrapper = factory({
       page: "rest",
     })
-    expect(wrapper.vm.filteredHistory).toStrictEqual(restHistory)
+    expect(wrapper.vm.filteredHistory).toStrictEqual(restHistory.slice().reverse())
     await wrapper.find("button[data-testid='clear_history']").trigger("click")
     await wrapper.find("button[data-testid='confirm_clear_history']").trigger("click")
     expect(fb.clearHistory).not.toHaveBeenCalled()
@@ -152,7 +151,7 @@ describe("Clear History", () => {
     const wrapper = factory({
       page: "rest",
     })
-    expect(wrapper.vm.filteredHistory).toStrictEqual(restHistory)
+    expect(wrapper.vm.filteredHistory).toStrictEqual(restHistory.slice().reverse())
     await wrapper.find("button[data-testid='clear_history']").trigger("click")
     await wrapper.find("button[data-testid='confirm_clear_history']").trigger("click")
     expect(fb.clearHistory).toHaveBeenCalledTimes(1)
@@ -163,7 +162,7 @@ describe("Clear History", () => {
     const wrapper = factory({
       page: "rest",
     })
-    expect(wrapper.vm.filteredHistory).toStrictEqual(restHistory)
+    expect(wrapper.vm.filteredHistory).toStrictEqual(restHistory.slice().reverse())
     await wrapper.find("button[data-testid='clear_history']").trigger("click")
     await wrapper.find("button[data-testid='reject_clear_history']").trigger("click")
     expect(fb.clearHistory).not.toHaveBeenCalled()
@@ -175,7 +174,7 @@ describe("Clear History", () => {
     const wrapper = factory({
       page: "graphql",
     })
-    expect(wrapper.vm.filteredHistory).toStrictEqual(graphqlHistory)
+    expect(wrapper.vm.filteredHistory).toStrictEqual(graphqlHistory.slice().reverse())
     await wrapper.find("button[data-testid='clear_history']").trigger("click")
     await wrapper.find("button[data-testid='confirm_clear_history']").trigger("click")
     expect(fb.clearGraphqlHistory).not.toHaveBeenCalled()
@@ -186,7 +185,7 @@ describe("Clear History", () => {
     const wrapper = factory({
       page: "graphql",
     })
-    expect(wrapper.vm.filteredHistory).toStrictEqual(graphqlHistory)
+    expect(wrapper.vm.filteredHistory).toStrictEqual(graphqlHistory.slice().reverse())
     await wrapper.find("button[data-testid='clear_history']").trigger("click")
     await wrapper.find("button[data-testid='confirm_clear_history']").trigger("click")
     expect(fb.clearGraphqlHistory).toHaveBeenCalledTimes(1)
@@ -197,7 +196,7 @@ describe("Clear History", () => {
     const wrapper = factory({
       page: "graphql",
     })
-    expect(wrapper.vm.filteredHistory).toStrictEqual(graphqlHistory)
+    expect(wrapper.vm.filteredHistory).toStrictEqual(graphqlHistory.slice().reverse())
     await wrapper.find("button[data-testid='clear_history']").trigger("click")
     await wrapper.find("button[data-testid='reject_clear_history']").trigger("click")
     expect(window.localStorage.setItem).not.toHaveBeenCalledWith(
@@ -217,7 +216,7 @@ describe("Use History", () => {
     var index = restHistory.length - 1
     wrapper.findAll("div[data-testid='rest_card']").at(index).vm.$emit("use-entry")
     expect(wrapper.emitted("useHistory")).toBeTruthy()
-    expect(wrapper.emitted("useHistory")[0]).toStrictEqual([restHistory[index]])
+    expect(wrapper.emitted("useHistory")[0]).toStrictEqual([restHistory.slice().reverse()[index]])
   })
 
   test("use graphql history", async () => {
@@ -229,7 +228,9 @@ describe("Use History", () => {
     var index = restHistory.length - 1
     wrapper.findAll("div[data-testid='graphql_card']").at(index).vm.$emit("use-entry")
     expect(wrapper.emitted("useHistory")).toBeTruthy()
-    expect(wrapper.emitted("useHistory")[0]).toStrictEqual([graphqlHistory[index]])
+    expect(wrapper.emitted("useHistory")[0]).toStrictEqual([
+      graphqlHistory.slice().reverse()[index],
+    ])
   })
 })
 

components/history/graphql/Card.vue

@@ -99,12 +99,12 @@
             :aria-label="$t('duration')"
             type="text"
             readonly
-            :value="entry.duration"
+            :value="`Duration: ${entry.duration}ms`"
             :placeholder="$t('no_duration')"
             class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
           />
         </li>
-        <li>
+        <!-- <li>
           <input
             :aria-label="$t('prerequest_script')"
             type="text"
@@ -113,7 +113,7 @@
             :placeholder="$t('no_prerequest_script')"
             class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
           />
-        </li>
+        </li> -->
       </div>
     </transition>
   </div>
@@ -123,6 +123,14 @@
 .stared {
   color: #f8e81c !important;
 }
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.2s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
 </style>
 
 <script>

components/history/index.vue

@@ -50,57 +50,15 @@
           <i class="material-icons">clear_all</i>
           <span>{{ $t("clear_all") }}</span>
         </button>
-        <v-popover>
-          <button v-if="this.page == 'rest'" class="tooltip-target icon" v-tooltip="$t('sort')">
-            <i class="material-icons">sort</i>
-          </button>
-          <template slot="popover">
-            <div>
-              <button class="icon" @click="sort_by_label()" v-close-popover>
-                <i class="material-icons">sort_by_alpha</i>
-                <span>{{ $t("label") }}</span>
-              </button>
-            </div>
-            <div>
-              <button class="icon" @click="sort_by_time()" v-close-popover>
-                <i class="material-icons">access_time</i>
-                <span>{{ $t("time") }}</span>
-              </button>
-            </div>
-            <div>
-              <button class="icon" @click="sort_by_status_code()" v-close-popover>
-                <i class="material-icons">assistant</i>
-                <span>{{ $t("status") }}</span>
-              </button>
-            </div>
-            <div>
-              <button class="icon" @click="sort_by_url()" v-close-popover>
-                <i class="material-icons">language</i>
-                <span>{{ $t("url") }}</span>
-              </button>
-            </div>
-            <div>
-              <button class="icon" @click="sort_by_path()" v-close-popover>
-                <i class="material-icons">timeline</i>
-                <span>{{ $t("path") }}</span>
-              </button>
-            </div>
-            <div v-if="showMore">
-              <button class="icon" @click="sort_by_duration()" v-close-popover>
-                <i class="material-icons">timer</i>
-                <span>{{ $t("duration") }}</span>
-              </button>
-            </div>
-            <div>
-              <button class="icon" @click="toggleCollapse()">
-                <i class="material-icons">
-                  {{ !showMore ? "first_page" : "last_page" }}
-                </i>
-                <span>{{ !showMore ? $t("show_more") : $t("hide_more") }}</span>
-              </button>
-            </div>
-          </template>
-        </v-popover>
+        <button
+          v-tooltip="{ content: !showMore ? $t('show_more') : $t('hide_more') }"
+          class="icon"
+          @click="toggleCollapse()"
+        >
+          <i class="material-icons">
+            {{ !showMore ? "unfold_more" : "unfold_less" }}
+          </i>
+        </button>
       </div>
       <div class="row-wrapper" v-else>
         <p class="info"><i class="material-icons">help_outline</i> {{ $t("are_you_sure") }}</p>
@@ -134,14 +92,6 @@
     cursor: default;
   }
 }
-.fade-enter-active,
-.fade-leave-active {
-  transition: all 0.2s;
-}
-.fade-enter,
-.fade-leave-to {
-  opacity: 0;
-}
 ul,
 ol {
   flex-direction: column;
@@ -177,11 +127,6 @@ export default {
       filterText: "",
       showFilter: false,
       isClearingHistory: false,
-      reverse_sort_label: false,
-      reverse_sort_time: false,
-      reverse_sort_status_code: false,
-      reverse_sort_url: false,
-      reverse_sort_path: false,
       showMore: false,
     }
   },
@@ -195,14 +140,17 @@ export default {
           : JSON.parse(
               window.localStorage.getItem(this.page == "rest" ? "history" : "graphqlHistory")
             ) || []
-      return this.history.filter((entry) => {
-        const filterText = this.filterText.toLowerCase()
-        return Object.keys(entry).some((key) => {
-          let value = entry[key]
-          value = typeof value !== "string" ? value.toString() : value
-          return value.toLowerCase().includes(filterText)
+      return this.history
+        .slice()
+        .reverse()
+        .filter((entry) => {
+          const filterText = this.filterText.toLowerCase()
+          return Object.keys(entry).some((key) => {
+            let value = entry[key]
+            value = typeof value !== "string" ? value.toString() : value
+            return value.toLowerCase().includes(filterText)
+          })
         })
-      })
     },
   },
   methods: {
@@ -248,67 +196,6 @@ export default {
     disableHistoryClearing() {
       this.isClearingHistory = false
     },
-    sort_by_time() {
-      let byDate = this.history.slice(0)
-      byDate.sort((a, b) => {
-        let date_a = a.date.split("/")
-        let date_b = b.date.split("/")
-        let time_a = a.time.split(":")
-        let time_b = b.time.split(":")
-        let final_a = new Date(date_a[2], date_a[1], date_a[0], time_a[0], time_a[1], time_a[2])
-        let final_b = new Date(date_b[2], date_b[1], date_b[0], time_b[0], time_b[1], time_b[2])
-        if (this.reverse_sort_time) return final_b - final_a
-        else return final_a - final_b
-      })
-      this.history = byDate
-      this.reverse_sort_time = !this.reverse_sort_time
-    },
-    sort_by_status_code() {
-      let byCode = this.history.slice(0)
-      byCode.sort((a, b) => {
-        if (this.reverse_sort_status_code) return b.status - a.status
-        else return a.status - b.status
-      })
-      this.history = byCode
-      this.reverse_sort_status_code = !this.reverse_sort_status_code
-    },
-    sort_by_url() {
-      let byUrl = this.history.slice(0)
-      byUrl.sort((a, b) => {
-        if (this.reverse_sort_url) return a.url === b.url ? 0 : +(a.url < b.url) || -1
-        else return a.url === b.url ? 0 : +(a.url > b.url) || -1
-      })
-      this.history = byUrl
-      this.reverse_sort_url = !this.reverse_sort_url
-    },
-    sort_by_label() {
-      let byLabel = this.history.slice(0)
-      byLabel.sort((a, b) => {
-        if (this.reverse_sort_label) return a.label === b.label ? 0 : +(a.label < b.label) || -1
-        else return a.label === b.label ? 0 : +(a.label > b.label) || -1
-      })
-      this.history = byLabel
-      this.reverse_sort_label = !this.reverse_sort_label
-    },
-    sort_by_path() {
-      let byPath = this.history.slice(0)
-      byPath.sort((a, b) => {
-        if (this.reverse_sort_path) return a.path === b.path ? 0 : +(a.path < b.path) || -1
-        else return a.path === b.path ? 0 : +(a.path > b.path) || -1
-      })
-      this.history = byPath
-      this.reverse_sort_path = !this.reverse_sort_path
-    },
-    sort_by_duration() {
-      let byDuration = this.history.slice(0)
-      byDuration.sort((a, b) => {
-        if (this.reverse_sort_duration)
-          return a.duration === b.duration ? 0 : +(a.duration < b.duration) || -1
-        else return a.duration === b.duration ? 0 : +(a.duration > b.duration) || -1
-      })
-      this.history = byDuration
-      this.reverse_sort_duration = !this.reverse_sort_duration
-    },
     toggleCollapse() {
       this.showMore = !this.showMore
     },

components/history/rest/Card.vue

@@ -106,12 +106,12 @@
             :aria-label="$t('duration')"
             type="text"
             readonly
-            :value="entry.duration"
+            :value="`Duration: ${entry.duration}ms`"
             :placeholder="$t('no_duration')"
             class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
           />
         </li>
-        <li>
+        <!-- <li>
           <input
             :aria-label="$t('prerequest_script')"
             type="text"
@@ -120,7 +120,7 @@
             :placeholder="$t('no_prerequest_script')"
             class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
           />
-        </li>
+        </li> -->
       </div>
     </transition>
   </div>
@@ -130,6 +130,14 @@
 .stared {
   color: #f8e81c !important;
 }
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.2s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
 </style>
 
 <script>
@@ -148,7 +156,6 @@ export default {
   computed: {
     entryStatus() {
       const foundStatusGroup = findStatusGroup(this.entry.status)
-      console.log(foundStatusGroup)
       return (
         foundStatusGroup || {
           className: "",