feat: introducing self hosted admin dashboard package (#12)
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com> Co-authored-by: Anwarul Islam <anwaarulislaam@gmail.com>
This commit is contained in:
committed by
GitHub
parent
2ba05a46ee
commit
3f59597864
@@ -31,7 +31,7 @@
|
||||
:on-shown="() => tippyActions.focus()"
|
||||
>
|
||||
<span class="select-wrapper">
|
||||
<ButtonSecondary
|
||||
<HoppButtonSecondary
|
||||
:label="contentType || t('state.none').toLowerCase()"
|
||||
class="pr-8 ml-2 rounded-none"
|
||||
/>
|
||||
@@ -43,7 +43,7 @@
|
||||
tabindex="0"
|
||||
@keyup.escape="hide()"
|
||||
>
|
||||
<SmartItem
|
||||
<HoppSmartItem
|
||||
v-for="(contentTypeItem, index) in validContentTypes"
|
||||
:key="`contentTypeItem-${index}`"
|
||||
:label="contentTypeItem"
|
||||
@@ -63,7 +63,7 @@
|
||||
</tippy>
|
||||
</span>
|
||||
<div class="flex">
|
||||
<ButtonSecondary
|
||||
<HoppButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
|
||||
:title="`${t(
|
||||
'request.run'
|
||||
@@ -74,7 +74,7 @@
|
||||
class="rounded-none !text-accent !hover:text-accentDark"
|
||||
@click="sendMessage()"
|
||||
/>
|
||||
<SmartCheckbox
|
||||
<HoppSmartCheckbox
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:on="clearInputOnSend"
|
||||
class="px-2"
|
||||
@@ -82,28 +82,28 @@
|
||||
@change="clearInputOnSend = !clearInputOnSend"
|
||||
>
|
||||
{{ t("mqtt.clear_input") }}
|
||||
</SmartCheckbox>
|
||||
<ButtonSecondary
|
||||
</HoppSmartCheckbox>
|
||||
<HoppButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
to="https://docs.hoppscotch.io/realtime"
|
||||
blank
|
||||
:title="t('app.wiki')"
|
||||
:icon="IconHelpCircle"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
<HoppButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('action.clear')"
|
||||
:icon="IconTrash2"
|
||||
@click="clearContent"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
<HoppButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('state.linewrap')"
|
||||
:class="{ '!text-accent': linewrapEnabled }"
|
||||
:icon="IconWrapText"
|
||||
@click.prevent="linewrapEnabled = !linewrapEnabled"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
<HoppButtonSecondary
|
||||
v-if="contentType && contentType == 'JSON'"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('action.prettify')"
|
||||
@@ -111,7 +111,7 @@
|
||||
@click="prettifyRequestBody"
|
||||
/>
|
||||
<label for="payload">
|
||||
<ButtonSecondary
|
||||
<HoppButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('import.title')"
|
||||
:icon="IconFilePlus"
|
||||
|
||||
@@ -9,12 +9,12 @@
|
||||
</label>
|
||||
</span>
|
||||
<div class="flex">
|
||||
<SmartCheckbox
|
||||
<HoppSmartCheckbox
|
||||
:on="config.cleanSession"
|
||||
class="px-2"
|
||||
@change="config.cleanSession = !config.cleanSession"
|
||||
>{{ t("mqtt.clean_session") }}
|
||||
</SmartCheckbox>
|
||||
</HoppSmartCheckbox>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-1 h-full border-dividerLight">
|
||||
@@ -63,14 +63,14 @@
|
||||
</label>
|
||||
<tippy interactive trigger="click" theme="popover">
|
||||
<span class="select-wrapper">
|
||||
<ButtonSecondary
|
||||
<HoppButtonSecondary
|
||||
class="pr-8 ml-2 rounded-none"
|
||||
:label="`${config.lwQos}`"
|
||||
/>
|
||||
</span>
|
||||
<template #content="{ hide }">
|
||||
<div class="flex flex-col" role="menu">
|
||||
<SmartItem
|
||||
<HoppSmartItem
|
||||
v-for="item in QOS_VALUES"
|
||||
:key="`qos-${item}`"
|
||||
:label="`${item}`"
|
||||
@@ -87,12 +87,12 @@
|
||||
</template>
|
||||
</tippy>
|
||||
</div>
|
||||
<SmartCheckbox
|
||||
<HoppSmartCheckbox
|
||||
:on="config.lwRetain"
|
||||
class="py-2"
|
||||
@change="config.lwRetain = !config.lwRetain"
|
||||
>{{ t("mqtt.lw_retain") }}
|
||||
</SmartCheckbox>
|
||||
</HoppSmartCheckbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,27 +8,27 @@
|
||||
{{ title }}
|
||||
</label>
|
||||
<div class="flex">
|
||||
<ButtonSecondary
|
||||
<HoppButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('action.delete')"
|
||||
:icon="IconTrash"
|
||||
@click="emit('delete')"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
<HoppButtonSecondary
|
||||
id="bottompage"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('action.scroll_to_top')"
|
||||
:icon="IconArrowUp"
|
||||
@click="scrollTo('top')"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
<HoppButtonSecondary
|
||||
id="bottompage"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('action.scroll_to_bottom')"
|
||||
:icon="IconArrowDown"
|
||||
@click="scrollTo('bottom')"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
<HoppButtonSecondary
|
||||
id="bottompage"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="`${t('action.autoscroll')}: ${
|
||||
|
||||
@@ -34,14 +34,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ButtonSecondary
|
||||
<HoppButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('action.copy')"
|
||||
:icon="copyQueryIcon"
|
||||
class="hidden group-hover:inline-flex"
|
||||
@click="copyQuery(entry.payload)"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
<HoppButtonSecondary
|
||||
:icon="IconChevronDown"
|
||||
class="transform"
|
||||
:class="{ 'rotate-180': !minimized }"
|
||||
@@ -50,14 +50,14 @@
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!minimized" class="overflow-hidden bg-primaryContrast">
|
||||
<SmartTabs
|
||||
<HoppSmartTabs
|
||||
v-model="selectedTab"
|
||||
styles="bg-primaryLight"
|
||||
render-inactive-tabs
|
||||
>
|
||||
<SmartTab v-if="isJSON(entry.payload)" id="json" label="JSON" />
|
||||
<SmartTab id="raw" label="Raw" />
|
||||
</SmartTabs>
|
||||
<HoppSmartTab v-if="isJSON(entry.payload)" id="json" label="JSON" />
|
||||
<HoppSmartTab id="raw" label="Raw" />
|
||||
</HoppSmartTabs>
|
||||
<div
|
||||
class="z-10 flex items-center justify-between pl-4 border-b border-dividerLight top-lowerSecondaryStickyFold"
|
||||
>
|
||||
@@ -65,20 +65,20 @@
|
||||
{{ t("response.body") }}
|
||||
</label>
|
||||
<div class="flex">
|
||||
<ButtonSecondary
|
||||
<HoppButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('state.linewrap')"
|
||||
:class="{ '!text-accent': linewrapEnabled }"
|
||||
:icon="IconWrapText"
|
||||
@click.prevent="linewrapEnabled = !linewrapEnabled"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
<HoppButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('action.download_file')"
|
||||
:icon="downloadIcon"
|
||||
@click="downloadResponse"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
<HoppButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('action.copy')"
|
||||
:icon="copyIcon"
|
||||
@@ -123,7 +123,7 @@
|
||||
tabindex="0"
|
||||
@keyup.escape="hide()"
|
||||
>
|
||||
<SmartItem
|
||||
<HoppSmartItem
|
||||
v-for="(arrayMember, astIndex) in item.astParent.values"
|
||||
:key="`ast-${astIndex}`"
|
||||
:label="`${astIndex}`"
|
||||
@@ -142,7 +142,7 @@
|
||||
tabindex="0"
|
||||
@keyup.escape="hide()"
|
||||
>
|
||||
<SmartItem
|
||||
<HoppSmartItem
|
||||
v-for="(objectMember, astIndex) in item.astParent.members"
|
||||
:key="`ast-${astIndex}`"
|
||||
:label="objectMember.key.value"
|
||||
@@ -160,7 +160,7 @@
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
>
|
||||
<SmartItem
|
||||
<HoppSmartItem
|
||||
label="{}"
|
||||
@click="
|
||||
() => {
|
||||
@@ -175,7 +175,7 @@
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
>
|
||||
<SmartItem
|
||||
<HoppSmartItem
|
||||
label="[]"
|
||||
@click="
|
||||
() => {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<SmartModal v-if="show" dialog :title="t('mqtt.new')" @close="hideModal">
|
||||
<HoppSmartModal v-if="show" dialog :title="t('mqtt.new')" @close="hideModal">
|
||||
<template #body>
|
||||
<div class="flex justify-between mb-4">
|
||||
<div
|
||||
@@ -10,11 +10,11 @@
|
||||
</label>
|
||||
<tippy interactive trigger="click" theme="popover">
|
||||
<span class="select-wrapper">
|
||||
<ButtonSecondary class="pr-8" :label="`${QoS}`" />
|
||||
<HoppButtonSecondary class="pr-8" :label="`${QoS}`" />
|
||||
</span>
|
||||
<template #content="{ hide }">
|
||||
<div class="flex flex-col" role="menu">
|
||||
<SmartItem
|
||||
<HoppSmartItem
|
||||
v-for="item in QOS_VALUES"
|
||||
:key="`qos-${item}`"
|
||||
:label="`${item}`"
|
||||
@@ -68,13 +68,13 @@
|
||||
</template>
|
||||
<template #footer>
|
||||
<span class="flex space-x-2">
|
||||
<ButtonPrimary
|
||||
<HoppButtonPrimary
|
||||
:label="t('mqtt.subscribe')"
|
||||
:loading="loadingState"
|
||||
outline
|
||||
@click="addNewSubscription"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
<HoppButtonSecondary
|
||||
:label="t('action.cancel')"
|
||||
outline
|
||||
filled
|
||||
@@ -82,7 +82,7 @@
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
</HoppSmartModal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
Reference in New Issue
Block a user