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
-          <button v-if="this.page == 'rest'" class="tooltip-target icon" v-tooltip="$t('sort')">
+          v-tooltip="{ content: !showMore ? $t('show_more') : $t('hide_more') }"
-            <i class="material-icons">sort</i>
+          class="icon"
-          </button>
+          @click="toggleCollapse()"
-          <template slot="popover">
+        >
-            <div>
+          <i class="material-icons">
-              <button class="icon" @click="sort_by_label()" v-close-popover>
+            {{ !showMore ? "unfold_more" : "unfold_less" }}
-                <i class="material-icons">sort_by_alpha</i>
+          </i>
-                <span>{{ $t("label") }}</span>
+        </button>
-              </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>
       </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) => {
+      return this.history
-        const filterText = this.filterText.toLowerCase()
+        .slice()
-        return Object.keys(entry).some((key) => {
+        .reverse()
-          let value = entry[key]
+        .filter((entry) => {
-          value = typeof value !== "string" ? value.toString() : value
+          const filterText = this.filterText.toLowerCase()
-          return value.toLowerCase().includes(filterText)
+          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: "",

helpers/__tests__/fb.spec.js

@@ -49,32 +49,39 @@ beforeEach(async () => {
   })
 
   // Test History Entry
-  await mocksdk.firestore().collection("users").doc(testuser.uid).collection("history").doc().set({
+  await mocksdk
-    auth: "None",
+    .firestore()
-    bearerToken: "",
+    .collection("users")
-    bodyParams: [],
+    .doc(testuser.uid)
-    contentType: "",
+    .collection("history")
-    date: "8/29/2020",
+    .doc()
-    duration: 708,
+    .set({
-    headers: [],
+      auth: "None",
-    httpPassword: "",
+      bearerToken: "",
-    httpUser: "",
+      bodyParams: [],
-    label: "",
+      contentType: "",
-    method: "GET",
+      updatedOn: new Date(1598703948000),
-    params: [],
+      date: "8/29/2020",
-    path: "/status/200",
+      duration: 708,
-    preRequestScript: "// pw.env.set('variable', 'value');",
+      headers: [],
-    rawInput: true,
+      httpPassword: "",
-    rawParams: "",
+      httpUser: "",
-    requestType: "",
+      label: "",
-    star: false,
+      method: "GET",
-    status: 200,
+      params: [],
-    testScript: "// pw.expect('variable').toBe('value');",
+      path: "/status/200",
-    time: "12:12:27 PM",
+      preRequestScript: "// pw.env.set('variable', 'value');",
-    url: "https://postman-echo.com",
+      rawInput: true,
-    usesPostScripts: true,
+      rawParams: "",
-    usesPreScripts: true,
+      requestType: "",
-  })
+      star: false,
+      status: 200,
+      testScript: "// pw.expect('variable').toBe('value');",
+      time: "12:12:27 PM",
+      url: "https://postman-echo.com",
+      usesPostScripts: true,
+      usesPreScripts: true,
+    })
 
   await mocksdk
     .firestore()
@@ -740,6 +747,7 @@ describe("FirebaseInstance", () => {
       bearerToken: "",
       bodyParams: [],
       contentType: "",
+      updatedOn: new Date(1598703948000),
       date: "8/29/2021",
       duration: 708,
       headers: [],
@@ -910,6 +918,7 @@ describe("FirebaseInstance", () => {
         bearerToken: "",
         bodyParams: [],
         contentType: "",
+        updatedOn: new Date(1598703948000),
         date: "8/29/2021",
         duration: 708,
         headers: [],
@@ -954,6 +963,7 @@ describe("FirebaseInstance", () => {
       bearerToken: "",
       bodyParams: [],
       contentType: "",
+      updatedOn: new Date(1598703948000),
       date: "8/29/2021",
       duration: 708,
       headers: [],

pages/graphql.vue

@@ -744,6 +744,8 @@ export default {
           response: this.response,
           date: new Date().toLocaleDateString(),
           time: new Date().toLocaleTimeString(),
+          updatedOn: new Date(),
+          duration,
         }
 
         this.$refs.graphqlHistoryComponent.addEntry(entry)

pages/index.vue

@@ -1365,6 +1365,7 @@ export default {
             status: this.response.status,
             date: new Date().toLocaleDateString(),
             time: new Date().toLocaleTimeString(),
+            updatedOn: new Date(),
             method: this.method,
             url: this.url,
             path: this.path,
@@ -1422,6 +1423,7 @@ export default {
               status: this.response.status,
               date: new Date().toLocaleDateString(),
               time: new Date().toLocaleTimeString(),
+              updatedOn: new Date(),
               method: this.method,
               url: this.url,
               path: this.path,