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:
Joel Jacob Stephen
2023-02-28 13:13:27 +05:30
committed by GitHub
parent 2ba05a46ee
commit 3f59597864
219 changed files with 6737 additions and 1967 deletions

View File

@@ -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"

View File

@@ -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>

View File

@@ -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')}: ${

View File

@@ -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="
() => {

View File

@@ -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>