From 22772ac10fa0bb24cb311418b49246539a4a3874 Mon Sep 17 00:00:00 2001 From: liyasthomas Date: Wed, 21 Jul 2021 10:50:20 +0530 Subject: [PATCH] feat: migrate pre-request script, test script, settings to nuxt composition --- assets/scss/themes.scss | 2 +- components/http/ImportCurl.vue | 1 + components/http/PreRequestScript.vue | 53 ++++++++++ components/http/Tests.vue | 92 +++++++++++++++++ helpers/types/HoppRESTRequest.ts | 3 + helpers/utils/composables.ts | 60 ++++++++++++ lang/en-US.json | 1 + layouts/default.vue | 24 +++-- newstore/RESTSession.ts | 75 +++++++++----- newstore/settings.ts | 22 +++++ pages/index.vue | 141 +-------------------------- pages/settings.vue | 77 ++++++--------- 12 files changed, 333 insertions(+), 218 deletions(-) create mode 100644 components/http/PreRequestScript.vue create mode 100644 components/http/Tests.vue create mode 100644 helpers/utils/composables.ts diff --git a/assets/scss/themes.scss b/assets/scss/themes.scss index 78d11dc37..092bd4fbe 100644 --- a/assets/scss/themes.scss +++ b/assets/scss/themes.scss @@ -14,7 +14,7 @@ // Text color --secondary-color: theme("colors.true-gray.400"); // Light Text color - --secondary-light-color: theme("colors.true-gray.200"); + --secondary-light-color: theme("colors.true-gray.500"); // Dark Text color --secondary-dark-color: theme("colors.white"); // Border color diff --git a/components/http/ImportCurl.vue b/components/http/ImportCurl.vue index 5a5954688..701880ff4 100644 --- a/components/http/ImportCurl.vue +++ b/components/http/ImportCurl.vue @@ -107,6 +107,7 @@ export default defineComponent({ params, headers, preRequestScript: "", + testScript: "", }) ) } catch (error) { diff --git a/components/http/PreRequestScript.vue b/components/http/PreRequestScript.vue new file mode 100644 index 000000000..45f5fc06c --- /dev/null +++ b/components/http/PreRequestScript.vue @@ -0,0 +1,53 @@ + + + diff --git a/components/http/Tests.vue b/components/http/Tests.vue new file mode 100644 index 000000000..7493d3a13 --- /dev/null +++ b/components/http/Tests.vue @@ -0,0 +1,92 @@ + + + diff --git a/helpers/types/HoppRESTRequest.ts b/helpers/types/HoppRESTRequest.ts index 951e4a9fd..f7c78d44f 100644 --- a/helpers/types/HoppRESTRequest.ts +++ b/helpers/types/HoppRESTRequest.ts @@ -20,6 +20,7 @@ export interface HoppRESTRequest { params: HoppRESTParam[] headers: HoppRESTHeader[] preRequestScript: string + testScript: string } export function makeRESTRequest( @@ -56,6 +57,7 @@ export function translateToNewRequest(x: any): HoppRESTRequest { const method = x.method const preRequestScript = x.preRequestScript + const testScript = x.testScript const result: HoppRESTRequest = { endpoint, @@ -63,6 +65,7 @@ export function translateToNewRequest(x: any): HoppRESTRequest { params, method, preRequestScript, + testScript, v: RESTReqSchemaVersion, } diff --git a/helpers/utils/composables.ts b/helpers/utils/composables.ts new file mode 100644 index 000000000..772b627ca --- /dev/null +++ b/helpers/utils/composables.ts @@ -0,0 +1,60 @@ +import { + customRef, + onBeforeUnmount, + readonly, + Ref, + ref, +} from "@nuxtjs/composition-api" +import { Observable, Subscription } from "rxjs" + +export function useReadonlyStream(stream$: Observable, initialValue: T) { + let sub: Subscription | null = null + + onBeforeUnmount(() => { + if (sub) { + sub.unsubscribe() + } + }) + + const targetRef = ref(initialValue) as Ref + + sub = stream$.subscribe((value) => { + targetRef.value = value + }) + + return readonly(targetRef) +} + +export function useStream( + stream$: Observable, + initialValue: T, + setter: (val: T) => void +) { + let sub: Subscription | null = null + + onBeforeUnmount(() => { + if (sub) { + sub.unsubscribe() + } + }) + + return customRef((track, trigger) => { + let value = initialValue + + sub = stream$.subscribe((val) => { + value = val + trigger() + }) + + return { + get() { + track() + return value + }, + set(value: T) { + trigger() + setter(value) + }, + } + }) +} diff --git a/lang/en-US.json b/lang/en-US.json index 2fee11acd..9d8d6a325 100644 --- a/lang/en-US.json +++ b/lang/en-US.json @@ -340,6 +340,7 @@ "we_sent_magic_link_description": "Check your inbox - we sent an email to {email}. It contains a magic link that will log you in.", "hide_sidebar": "Hide sidebar", "show_sidebar": "Show sidebar", + "navigation_sidebar": "Navigation sidebar", "protocols": "Protocols", "protocol_count": "Protocol {count}", "share": "Share", diff --git a/layouts/default.vue b/layouts/default.vue index b1d62ac7a..e1e7267a0 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -4,7 +4,7 @@ @@ -28,12 +28,10 @@
diff --git a/newstore/RESTSession.ts b/newstore/RESTSession.ts index 41ee08e71..bec77c637 100644 --- a/newstore/RESTSession.ts +++ b/newstore/RESTSession.ts @@ -1,6 +1,5 @@ import { pluck, distinctUntilChanged, map, filter } from "rxjs/operators" -import { customRef, onBeforeUnmount, Ref } from "@nuxtjs/composition-api" -import { Subscription } from "rxjs" +import { Ref } from "@nuxtjs/composition-api" import DispatchingStore, { defineDispatchers } from "./DispatchingStore" import { HoppRESTHeader, @@ -9,6 +8,7 @@ import { RESTReqSchemaVersion, } from "~/helpers/types/HoppRESTRequest" import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse" +import { useStream } from "~/helpers/utils/composables" function getParamsInURL(url: string): { key: string; value: string }[] { const result: { key: string; value: string }[] = [] @@ -124,6 +124,7 @@ const defaultRESTSession: RESTSession = { headers: [], method: "GET", preRequestScript: "// pw.env.set('variable', 'value');", + testScript: "// pw.expect('variable').toBe('value');", }, response: null, } @@ -298,6 +299,14 @@ const dispatchers = defineDispatchers({ }, } }, + setTestScript(curr: RESTSession, { newScript }: { newScript: string }) { + return { + request: { + ...curr.request, + testScript: newScript, + }, + } + }, updateResponse( _curr: RESTSession, { updatedRes }: { updatedRes: HoppRESTResponse | null } @@ -416,7 +425,7 @@ export function deleteAllRESTHeaders() { }) } -export function setPreRequestScript(newScript: string) { +export function setRESTPreRequestScript(newScript: string) { restSessionStore.dispatch({ dispatcher: "setPreRequestScript", payload: { @@ -425,6 +434,15 @@ export function setPreRequestScript(newScript: string) { }) } +export function setRESTTestScript(newScript: string) { + restSessionStore.dispatch({ + dispatcher: "setTestScript", + payload: { + newScript, + }, + }) +} + export function updateRESTResponse(updatedRes: HoppRESTResponse | null) { restSessionStore.dispatch({ dispatcher: "updateResponse", @@ -479,6 +497,11 @@ export const restPreRequestScript$ = restSessionStore.subject$.pipe( distinctUntilChanged() ) +export const restTestScript$ = restSessionStore.subject$.pipe( + pluck("request", "testScript"), + distinctUntilChanged() +) + export const restResponse$ = restSessionStore.subject$.pipe( pluck("response"), distinctUntilChanged() @@ -499,28 +522,28 @@ export const completedRESTResponse$ = restResponse$.pipe( * dispatches. */ export function usePreRequestScript(): Ref { - let sub: Subscription | null = null - - onBeforeUnmount(() => { - if (sub) { - sub.unsubscribe() + return useStream( + restPreRequestScript$, + restSessionStore.value.request.preRequestScript, + (value) => { + setRESTPreRequestScript(value) } - }) - - return customRef((track, trigger) => { - sub = restPreRequestScript$.subscribe(() => { - trigger() - }) - - return { - get() { - track() - return restSessionStore.value.request.preRequestScript - }, - set(value: string) { - trigger() - setPreRequestScript(value) - }, - } - }) + ) +} + +/** + * A Vue 3 composable function that gives access to a ref + * which is updated to the testScript value in the store. + * The ref value is kept in sync with the store and all writes + * to the ref are dispatched to the store as `setTestScript` + * dispatches. + */ +export function useTestScript(): Ref { + return useStream( + restTestScript$, + restSessionStore.value.request.testScript, + (value) => { + setRESTTestScript(value) + } + ) } diff --git a/newstore/settings.ts b/newstore/settings.ts index 36add6d75..ab8aa0fa4 100644 --- a/newstore/settings.ts +++ b/newstore/settings.ts @@ -1,8 +1,10 @@ import { pluck, distinctUntilChanged } from "rxjs/operators" import has from "lodash/has" import { Observable } from "rxjs" +import { Ref } from "@nuxtjs/composition-api" import DispatchingStore, { defineDispatchers } from "./DispatchingStore" import type { KeysMatching } from "~/types/ts-utils" +import { useStream } from "~/helpers/utils/composables" export const HoppBgColors = ["system", "light", "dark", "black"] as const @@ -43,6 +45,7 @@ export type SettingsType = { BG_COLOR: HoppBgColor TELEMETRY_ENABLED: boolean SHORTCUTS_INDICATOR_ENABLED: boolean + HIDE_NAVBAR: boolean } export const defaultSettings: SettingsType = { @@ -66,6 +69,7 @@ export const defaultSettings: SettingsType = { BG_COLOR: "system", TELEMETRY_ENABLED: true, SHORTCUTS_INDICATOR_ENABLED: false, + HIDE_NAVBAR: false, } const validKeys = Object.keys(defaultSettings) @@ -152,3 +156,21 @@ export function applySetting( }, }) } + +export function useSetting( + settingKey: K +): Ref { + return useStream( + settingsStore.subject$.pipe(pluck(settingKey), distinctUntilChanged()), + settingsStore.value[settingKey], + (value: SettingsType[K]) => { + settingsStore.dispatch({ + dispatcher: "applySetting", + payload: { + settingKey, + value, + }, + }) + } + ) +} diff --git a/pages/index.vue b/pages/index.vue index 3fd0d07f1..9babf5aa7 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -31,19 +31,7 @@ @@ -319,128 +307,11 @@ :id="'pre_request_script'" :label="$t('pre_request_script')" > - -
- - -
- - + - -
- - -
- -
-
- - -
-
-
-
-

- {{ testReport.startBlock }} -

-
-

- - - {{ testReport.styles.icon }} - -  {{ testReport.result }} - - - - -

-
-
-
- + @@ -615,8 +486,6 @@ export default defineComponent({ return { showCurlImportModal: false, showPreRequestScript: true, - testsEnabled: true, - testScript: "// pw.expect('variable').toBe('value');", testReports: [], copyButton: 'content_copy', downloadButton: 'save_alt', @@ -731,7 +600,6 @@ export default defineComponent({ this.preRequestScript = newValue.preRequestScript } if (newValue.testScript) { - this.testsEnabled = true this.testScript = newValue.testScript } this.name = newValue.name @@ -1333,7 +1201,6 @@ export default defineComponent({ contentType: this.contentType, requestType: this.requestType, testScript: this.testScript, - usesPostScripts: this.testsEnabled, } if ( @@ -1678,7 +1545,7 @@ export default defineComponent({ requestType: this.requestType, preRequestScript: this.showPreRequestScript == true ? this.preRequestScript : null, - testScript: this.testsEnabled == true ? this.testScript : null, + testScript: this.testScript, name: this.requestName, } this.showSaveRequestModal = true diff --git a/pages/settings.vue b/pages/settings.vue index f38c6254f..cfa97b15a 100644 --- a/pages/settings.vue +++ b/pages/settings.vue @@ -182,6 +182,15 @@ }}
+
+ + {{ $t("navigation_sidebar") }} + {{ HIDE_NAVBAR ? $t("enabled") : $t("disabled") }} + +
@@ -302,21 +311,39 @@