Merge remote-tracking branch 'central/main'

This commit is contained in:
Andrew Bastin
2023-02-08 18:43:40 +05:30
25 changed files with 4727 additions and 5515 deletions

View File

@@ -54,7 +54,7 @@
"io-ts": "^2.2.16",
"jest": "^27.5.1",
"lodash": "^4.17.21",
"prettier": "^2.6.2",
"prettier": "^2.8.4",
"qs": "^6.10.3",
"ts-jest": "^27.1.4",
"tsup": "^5.12.7",

View File

@@ -34,7 +34,7 @@ input::placeholder,
textarea::placeholder,
.cm-placeholder {
@apply text-secondary;
@apply opacity-35;
@apply opacity-50;
}
input,
@@ -416,7 +416,6 @@ pre.ace_editor {
.smart-splitter .splitpanes__splitter {
@apply relative;
@apply bg-primaryLight;
@apply before:absolute;
@apply before:inset-0;
@apply before:bg-accentLight;
@@ -424,48 +423,39 @@ pre.ace_editor {
@apply before:z-20;
@apply before:transition;
@apply before:content-DEFAULT;
@apply after:absolute;
@apply after:inset-0;
@apply after:z-20;
@apply after:transition;
@apply after:flex;
@apply after:items-center;
@apply after:justify-center;
@apply after:text-dividerDark;
@apply after:font-icon;
@apply hover:before:opacity-100;
@apply hover:after:text-accentDark;
}
.no-splitter .splitpanes__splitter {
@apply relative;
@apply bg-primaryLight;
}
.smart-splitter.splitpanes--vertical > .splitpanes__splitter {
@apply w-1;
@apply w-0;
@apply before:-left-0.5;
@apply before:-right-0.5;
@apply before:h-full;
@apply after:content-["\e5d4"];
@apply bg-divider;
}
.smart-splitter.splitpanes--horizontal > .splitpanes__splitter {
@apply h-1;
@apply h-0;
@apply before:-top-0.5;
@apply before:-bottom-0.5;
@apply before:w-full;
@apply after:content-["\e5d3"];
@apply bg-divider;
}
.no-splitter.splitpanes--vertical > .splitpanes__splitter {
@apply w-0.5;
@apply w-0;
@apply pointer-events-none;
@apply bg-dividerLight;
}
.no-splitter.splitpanes--horizontal > .splitpanes__splitter {
@apply h-0.5;
@apply h-0;
@apply pointer-events-none;
@apply bg-dividerLight;
}
.cm-focused {

View File

@@ -6,16 +6,19 @@
}
@mixin dark-theme {
--primary-color: theme("colors.neutral.900");
--primary-color: theme("colors.dark.800");
--primary-light-color: theme("colors.dark.600");
--primary-dark-color: theme("colors.neutral.800");
--primary-contrast-color: #161616;
--primary-contrast-color: theme("colors.neutral.900");
--secondary-color: theme("colors.neutral.400");
--secondary-light-color: theme("colors.neutral.500");
--secondary-dark-color: theme("colors.neutral.100");
--secondary-dark-color: theme("colors.neutral.50");
--divider-color: theme("colors.neutral.800");
--divider-light-color: theme("colors.dark.500");
--divider-dark-color: theme("colors.dark.300");
--error-color: theme("colors.stone.800");
--tooltip-color: theme("colors.neutral.100");
--popover-color: theme("colors.dark.700");
@@ -24,15 +27,18 @@
@mixin light-theme {
--primary-color: theme("colors.white");
--primary-light-color: theme("colors.neutral.50");
--primary-dark-color: theme("colors.neutral.100");
--primary-contrast-color: #fefefe;
--secondary-color: theme("colors.neutral.500");
--secondary-light-color: theme("colors.neutral.400");
--secondary-dark-color: theme("colors.neutral.900");
--primary-light-color: theme("colors.gray.50");
--primary-dark-color: theme("colors.gray.100");
--primary-contrast-color: theme("colors.light.50");
--secondary-color: theme("colors.gray.500");
--secondary-light-color: theme("colors.gray.400");
--secondary-dark-color: theme("colors.gray.900");
--divider-color: theme("colors.gray.100");
--divider-light-color: theme("colors.neutral.100");
--divider-dark-color: theme("colors.neutral.300");
--divider-light-color: theme("colors.gray.100");
--divider-dark-color: theme("colors.gray.300");
--error-color: theme("colors.yellow.100");
--tooltip-color: theme("colors.neutral.800");
--popover-color: theme("colors.white");
@@ -43,16 +49,19 @@
--primary-color: theme("colors.dark.900");
--primary-light-color: theme("colors.neutral.900");
--primary-dark-color: theme("colors.dark.800");
--primary-contrast-color: #0e0e0e;
--primary-contrast-color: theme("colors.dark.900");
--secondary-color: theme("colors.neutral.400");
--secondary-light-color: theme("colors.neutral.500");
--secondary-dark-color: theme("colors.neutral.100");
--divider-color: theme("colors.neutral.800");
--divider-color: theme("colors.dark.600");
--divider-light-color: theme("colors.dark.800");
--divider-dark-color: theme("colors.dark.300");
--divider-dark-color: theme("colors.dark.200");
--error-color: theme("colors.stone.900");
--tooltip-color: theme("colors.neutral.100");
--popover-color: theme("colors.dark.600");
--popover-color: theme("colors.dark.900");
--editor-theme: "twilight";
}

View File

@@ -126,7 +126,7 @@
"@vue/runtime-core": "^3.2.39",
"cross-env": "^7.0.3",
"eslint": "^8.24.0",
"eslint-plugin-prettier": "^4.2.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.5.1",
"npm-run-all": "^4.1.5",
"openapi-types": "^12.0.0",

View File

@@ -69,7 +69,7 @@ const interceptors = computed(() => [
},
])
type InterceptorMode = typeof interceptors["value"][number]["value"]
type InterceptorMode = (typeof interceptors)["value"][number]["value"]
const interceptorSelection = computed<InterceptorMode>({
get() {

View File

@@ -135,7 +135,7 @@
</div>
<div v-if="showChildren || isFiltered" class="flex">
<div
class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-1 hover:bg-dividerDark hover:scale-x-125"
class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-0.5 hover:bg-dividerDark hover:scale-x-125"
@click="toggleShowChildren()"
></div>
<div class="flex flex-col flex-1 truncate">

View File

@@ -123,7 +123,7 @@
</div>
<div v-if="showChildren || isFiltered" class="flex">
<div
class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-1 hover:bg-dividerDark hover:scale-x-125"
class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-0.5 hover:bg-dividerDark hover:scale-x-125"
@click="toggleShowChildren()"
></div>
<div class="flex flex-col flex-1 truncate">

View File

@@ -284,7 +284,7 @@ const filters = computed(() => [
{ value: "STARRED" as const, label: t("filter.starred") },
])
type FilterMode = typeof filters["value"][number]["value"]
type FilterMode = (typeof filters)["value"][number]["value"]
const filterSelection = ref<FilterMode>("ALL")
@@ -293,7 +293,7 @@ const groups = computed(() => [
{ value: "URL" as const, label: t("group.url") },
])
type GroupMode = typeof groups["value"][number]["value"]
type GroupMode = (typeof groups)["value"][number]["value"]
const groupSelection = ref<GroupMode>("TIME")

View File

@@ -130,9 +130,7 @@
</template>
</tippy>
</span>
<span
class="flex ml-2 transition border rounded border-dividerLight hover:border-dividerDark"
>
<span class="flex ml-2 transition border rounded border-divider">
<ButtonSecondary
v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
:title="`${t(

View File

@@ -3,40 +3,32 @@
<HttpResponseMeta :response="response" />
<LensesResponseBodyRenderer
v-if="!loading && hasResponse"
v-model:selected-tab-preference="selectedTabPreference"
:response="response"
/>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, watch } from "vue"
<script setup lang="ts">
import { ref, computed, watch } from "vue"
import { startPageProgress, completePageProgress } from "@modules/loadingbar"
import { useReadonlyStream } from "@composables/stream"
import { restResponse$ } from "~/newstore/RESTSession"
export default defineComponent({
setup() {
const response = useReadonlyStream(restResponse$, null)
const selectedTabPreference = ref<string | null>(null)
const hasResponse = computed(
() =>
response.value?.type === "success" || response.value?.type === "fail"
)
const response = useReadonlyStream(restResponse$, null)
const loading = computed(
() => response.value === null || response.value.type === "loading"
)
const hasResponse = computed(
() => response.value?.type === "success" || response.value?.type === "fail"
)
watch(response, () => {
if (response.value?.type === "loading") startPageProgress()
else completePageProgress()
})
const loading = computed(
() => response.value === null || response.value.type === "loading"
)
return {
hasResponse,
response,
loading,
}
},
watch(response, () => {
if (response.value?.type === "loading") startPageProgress()
else completePageProgress()
})
</script>

View File

@@ -107,7 +107,7 @@ const t = useI18n()
const colorMode = useColorMode()
const props = defineProps<{
response: HoppRESTResponse
response: HoppRESTResponse | null
}>()
/**
@@ -118,6 +118,7 @@ const props = defineProps<{
*/
const readableResponseSize = computed(() => {
if (
props.response === null ||
props.response.type === "loading" ||
props.response.type === "network_fail" ||
props.response.type === "script_fail" ||
@@ -135,6 +136,7 @@ const readableResponseSize = computed(() => {
const statusCategory = computed(() => {
if (
props.response === null ||
props.response.type === "loading" ||
props.response.type === "network_fail" ||
props.response.type === "script_fail" ||

View File

@@ -27,18 +27,18 @@
<script setup lang="ts">
import IconCopy from "~icons/lucide/copy"
import IconCheck from "~icons/lucide/check"
import { HoppRESTHeader } from "@hoppscotch/data"
import { refAutoReset } from "@vueuse/core"
import { copyToClipboard } from "~/helpers/utils/clipboard"
import { useI18n } from "@composables/i18n"
import { useToast } from "@composables/toast"
import type { HoppRESTResponseHeader } from "~/helpers/types/HoppRESTResponse"
const t = useI18n()
const toast = useToast()
const props = defineProps<{
headers: Array<HoppRESTHeader>
headers: HoppRESTResponseHeader[]
}>()
const copyIcon = refAutoReset<typeof IconCopy | typeof IconCheck>(

View File

@@ -30,7 +30,7 @@
import IconCopy from "~icons/lucide/copy"
import IconCheck from "~icons/lucide/check"
import { refAutoReset } from "@vueuse/core"
import type { HoppRESTHeader } from "@hoppscotch/data"
import type { HoppRESTResponseHeader } from "~/helpers/types/HoppRESTResponse"
import { copyToClipboard } from "~/helpers/utils/clipboard"
import { useI18n } from "@composables/i18n"
import { useToast } from "@composables/toast"
@@ -40,7 +40,7 @@ const t = useI18n()
const toast = useToast()
defineProps<{
header: HoppRESTHeader
header: HoppRESTResponseHeader
}>()
const copyIcon = refAutoReset<typeof IconCopy | typeof IconCheck>(

View File

@@ -11,16 +11,16 @@
:label="t(lens.lensName)"
class="flex flex-col flex-1 w-full h-full"
>
<component :is="lens.renderer" :response="response" />
<component :is="lensRendererFor(lens.renderer)" :response="response" />
</SmartTab>
<SmartTab
v-if="headerLength"
v-if="maybeHeaders"
id="headers"
:label="t('response.headers')"
:info="`${headerLength}`"
:info="`${maybeHeaders.length}`"
class="flex flex-col flex-1"
>
<LensesHeadersRenderer :headers="response.headers" />
<LensesHeadersRenderer :headers="maybeHeaders" />
</SmartTab>
<SmartTab
id="results"
@@ -42,54 +42,77 @@
</SmartTabs>
</template>
<script lang="ts">
import { defineComponent } from "vue"
import { getSuitableLenses, getLensRenderers } from "~/helpers/lenses/lenses"
<script setup lang="ts">
import { computed, ref, watch } from "vue"
import {
getSuitableLenses,
getLensRenderers,
Lens,
} from "~/helpers/lenses/lenses"
import { useReadonlyStream } from "@composables/stream"
import { useI18n } from "@composables/i18n"
import type { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
import { restTestResults$ } from "~/newstore/RESTSession"
export default defineComponent({
components: {
// Lens Renderers
...getLensRenderers(),
},
props: {
response: { type: Object, default: () => ({}) },
},
setup() {
const testResults = useReadonlyStream(restTestResults$, null)
const props = defineProps<{
response: HoppRESTResponse | null
selectedTabPreference: string | null
}>()
return {
testResults,
t: useI18n(),
const emit = defineEmits<{
(e: "update:selectedTabPreference", newTab: string): void
}>()
const allLensRenderers = getLensRenderers()
function lensRendererFor(name: string) {
return allLensRenderers[name]
}
const testResults = useReadonlyStream(restTestResults$, null)
const t = useI18n()
const selectedLensTab = ref("")
const maybeHeaders = computed(() => {
if (
!props.response ||
!(props.response.type === "success" || props.response.type === "fail")
)
return null
return props.response.headers
})
const validLenses = computed(() => {
if (!props.response) return []
return getSuitableLenses(props.response)
})
watch(
validLenses,
(newLenses: Lens[]) => {
if (newLenses.length === 0) return
const validRenderers = [
...newLenses.map((x) => x.renderer),
"headers",
"results",
]
if (
props.selectedTabPreference &&
validRenderers.includes(props.selectedTabPreference)
) {
selectedLensTab.value = props.selectedTabPreference
} else {
selectedLensTab.value = newLenses[0].renderer
}
},
data() {
return {
selectedLensTab: "",
}
},
computed: {
headerLength() {
if (!this.response || !this.response.headers) return 0
{ immediate: true }
)
return Object.keys(this.response.headers).length
},
validLenses() {
if (!this.response) return []
return getSuitableLenses(this.response)
},
},
watch: {
validLenses: {
handler(newValue) {
if (newValue.length === 0) return
this.selectedLensTab = newValue[0].renderer
},
immediate: true,
},
},
watch(selectedLensTab, (newLensID) => {
emit("update:selectedTabPreference", newLensID)
})
</script>

View File

@@ -112,7 +112,7 @@ const emit = defineEmits<{
(e: "submit", body: MQTTTopic): void
}>()
const QoS = ref<typeof QOS_VALUES[number]>(2)
const QoS = ref<(typeof QOS_VALUES)[number]>(2)
const name = ref("")
const color = ref("#f58290")

View File

@@ -14,7 +14,7 @@
-->
<div v-if="childrenRendered" v-show="showChildren" class="flex">
<div
class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-1 hover:bg-dividerDark hover:scale-x-125"
class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-0.5 hover:bg-dividerDark hover:scale-x-125"
@click="toggleNodeChildren"
></div>
<div

View File

@@ -185,7 +185,7 @@ export const CodegenDefinitions = [
/**
* A type which defines all the valid code generators
*/
export type CodegenName = typeof CodegenDefinitions[number]["name"]
export type CodegenName = (typeof CodegenDefinitions)[number]["name"]
/**
* Generates Source Code for the given codgen

View File

@@ -1,10 +1,12 @@
import { HoppRESTRequest } from "@hoppscotch/data"
export type HoppRESTResponseHeader = { key: string; value: string }
export type HoppRESTResponse =
| { type: "loading"; req: HoppRESTRequest }
| {
type: "fail"
headers: { key: string; value: string }[]
headers: HoppRESTResponseHeader[]
body: ArrayBuffer
statusCode: number
@@ -27,7 +29,7 @@ export type HoppRESTResponse =
}
| {
type: "success"
headers: { key: string; value: string }[]
headers: HoppRESTResponseHeader[]
body: ArrayBuffer
statusCode: number
meta: {

View File

@@ -7,7 +7,7 @@ import type { KeysMatching } from "~/types/ts-utils"
export const HoppBgColors = ["system", "light", "dark", "black"] as const
export type HoppBgColor = typeof HoppBgColors[number]
export type HoppBgColor = (typeof HoppBgColors)[number]
export const HoppAccentColors = [
"green",
@@ -21,11 +21,11 @@ export const HoppAccentColors = [
"pink",
] as const
export type HoppAccentColor = typeof HoppAccentColors[number]
export type HoppAccentColor = (typeof HoppAccentColors)[number]
export const HoppFontSizes = ["small", "medium", "large"] as const
export type HoppFontSize = typeof HoppFontSizes[number]
export type HoppFontSize = (typeof HoppFontSizes)[number]
export type SettingsType = {
syncCollections: boolean

View File

@@ -44,7 +44,7 @@ const REALTIME_NAVIGATION = [
},
] as const
type RealtimeNavTab = typeof REALTIME_NAVIGATION[number]["target"]
type RealtimeNavTab = (typeof REALTIME_NAVIGATION)[number]["target"]
const currentTab = ref<RealtimeNavTab>("websocket")

View File

@@ -55,11 +55,11 @@
"@typescript-eslint/eslint-plugin": "^5.19.0",
"@typescript-eslint/parser": "^5.19.0",
"eslint": "^8.13.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-prettier": "^4.2.1",
"io-ts": "^2.2.16",
"jest": "^27.5.1",
"prettier": "^2.6.2",
"prettier": "^2.8.4",
"ts-jest": "^27.1.4",
"typescript": "^4.6.3"
}

View File

@@ -53,7 +53,7 @@
"@vue/runtime-core": "^3.2.39",
"cross-env": "^7.0.3",
"eslint": "^8.24.0",
"eslint-plugin-prettier": "^4.2.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.5.1",
"histoire": "^0.12.4",
"npm-run-all": "^4.1.5",

View File

@@ -34,7 +34,7 @@ input::placeholder,
textarea::placeholder,
.cm-placeholder {
@apply text-secondary;
@apply opacity-35;
@apply opacity-50;
}
input,
@@ -135,7 +135,7 @@ a {
@apply shadow-none;
@apply fixed;
@apply inline-flex;
@apply -mt-6;
@apply -mt-8;
}
}
@@ -416,7 +416,6 @@ pre.ace_editor {
.smart-splitter .splitpanes__splitter {
@apply relative;
@apply bg-primaryLight;
@apply before:absolute;
@apply before:inset-0;
@apply before:bg-accentLight;
@@ -424,48 +423,39 @@ pre.ace_editor {
@apply before:z-20;
@apply before:transition;
@apply before:content-DEFAULT;
@apply after:absolute;
@apply after:inset-0;
@apply after:z-20;
@apply after:transition;
@apply after:flex;
@apply after:items-center;
@apply after:justify-center;
@apply after:text-dividerDark;
@apply after:font-icon;
@apply hover:before:opacity-100;
@apply hover:after:text-accentDark;
}
.no-splitter .splitpanes__splitter {
@apply relative;
@apply bg-primaryLight;
}
.smart-splitter.splitpanes--vertical > .splitpanes__splitter {
@apply w-1;
@apply w-0;
@apply before:-left-0.5;
@apply before:-right-0.5;
@apply before:h-full;
@apply after:content-["\e5d4"];
@apply bg-divider;
}
.smart-splitter.splitpanes--horizontal > .splitpanes__splitter {
@apply h-1;
@apply h-0;
@apply before:-top-0.5;
@apply before:-bottom-0.5;
@apply before:w-full;
@apply after:content-["\e5d3"];
@apply bg-divider;
}
.no-splitter.splitpanes--vertical > .splitpanes__splitter {
@apply w-0.5;
@apply w-0;
@apply pointer-events-none;
@apply bg-dividerLight;
}
.no-splitter.splitpanes--horizontal > .splitpanes__splitter {
@apply h-0.5;
@apply h-0;
@apply pointer-events-none;
@apply bg-dividerLight;
}
.cm-focused {
@@ -538,8 +528,16 @@ details[open] summary .indicator {
}
.env-highlight {
* {
@apply text-accentContrast;
@apply text-accentContrast;
&.env-found {
@apply bg-accentDark;
@apply hover:bg-accent;
}
&.env-not-found {
@apply bg-red-500;
@apply hover:bg-red-600;
}
}

View File

@@ -6,16 +6,19 @@
}
@mixin dark-theme {
--primary-color: theme("colors.neutral.900");
--primary-color: theme("colors.dark.800");
--primary-light-color: theme("colors.dark.600");
--primary-dark-color: theme("colors.neutral.800");
--primary-contrast-color: #161616;
--primary-contrast-color: theme("colors.neutral.900");
--secondary-color: theme("colors.neutral.400");
--secondary-light-color: theme("colors.neutral.500");
--secondary-dark-color: theme("colors.neutral.100");
--secondary-dark-color: theme("colors.neutral.50");
--divider-color: theme("colors.neutral.800");
--divider-light-color: theme("colors.dark.500");
--divider-dark-color: theme("colors.dark.300");
--error-color: theme("colors.stone.800");
--tooltip-color: theme("colors.neutral.100");
--popover-color: theme("colors.dark.700");
@@ -24,15 +27,18 @@
@mixin light-theme {
--primary-color: theme("colors.white");
--primary-light-color: theme("colors.neutral.50");
--primary-dark-color: theme("colors.neutral.100");
--primary-contrast-color: #fefefe;
--secondary-color: theme("colors.neutral.500");
--secondary-light-color: theme("colors.neutral.400");
--secondary-dark-color: theme("colors.neutral.900");
--primary-light-color: theme("colors.gray.50");
--primary-dark-color: theme("colors.gray.100");
--primary-contrast-color: theme("colors.light.50");
--secondary-color: theme("colors.gray.500");
--secondary-light-color: theme("colors.gray.400");
--secondary-dark-color: theme("colors.gray.900");
--divider-color: theme("colors.gray.100");
--divider-light-color: theme("colors.neutral.100");
--divider-dark-color: theme("colors.neutral.300");
--divider-light-color: theme("colors.gray.100");
--divider-dark-color: theme("colors.gray.300");
--error-color: theme("colors.yellow.100");
--tooltip-color: theme("colors.neutral.800");
--popover-color: theme("colors.white");
@@ -43,16 +49,19 @@
--primary-color: theme("colors.dark.900");
--primary-light-color: theme("colors.neutral.900");
--primary-dark-color: theme("colors.dark.800");
--primary-contrast-color: #0e0e0e;
--primary-contrast-color: theme("colors.dark.900");
--secondary-color: theme("colors.neutral.400");
--secondary-light-color: theme("colors.neutral.500");
--secondary-dark-color: theme("colors.neutral.100");
--divider-color: theme("colors.neutral.800");
--divider-color: theme("colors.dark.600");
--divider-light-color: theme("colors.dark.800");
--divider-dark-color: theme("colors.dark.300");
--divider-dark-color: theme("colors.dark.200");
--error-color: theme("colors.stone.900");
--tooltip-color: theme("colors.neutral.100");
--popover-color: theme("colors.dark.600");
--popover-color: theme("colors.dark.900");
--editor-theme: "twilight";
}
@@ -305,7 +314,3 @@
:root[data-font-size="large"] {
@include font-large;
}
.generic {
@apply text-primary text-primaryLight bg-primary;
}