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>

packages/hoppscotch-cli/README.md

@@ -1,4 +1,17 @@
-# Hoppscotch CLI <sup>ALPHA</sup>
+<div align="center">
+  <a href="https://hoppscotch.io">
+    <img
+      src="https://avatars.githubusercontent.com/u/56705483"
+      alt="Hoppscotch Logo"
+      height="64"
+    />
+  </a>
+</div>
+<div align="center">
+
+# Hoppscotch CLI <font size=2><sup>ALPHA</sup></font>
+
+</div>
 
 A CLI to run Hoppscotch test scripts in CI environments.
 
@@ -33,7 +46,7 @@ hopp [options or commands] arguments
 
     #### Options:
     ##### `-e <file_path>` / `--env <file_path>`
-    - Accepts path to env.json with contents in below format:   
+    - Accepts path to env.json with contents in below format:
         ```json
         {
             "ENV1":"value1",
@@ -41,7 +54,7 @@ hopp [options or commands] arguments
         }
         ```
     - You can now access those variables using `pw.env.get('<var_name>')`
-			
+
 			Taking the above example, `pw.env.get("ENV1")` will return `"value1"`
 
 ## Install

packages/hoppscotch-common/package.json

@@ -90,7 +90,7 @@
     "vue-pdf-embed": "^1.1.4",
     "vue-router": "^4.0.16",
     "vue-tippy": "6.0.0-alpha.58",
-    "vuedraggable": "^4.1.0",
+    "vuedraggable-es": "^4.1.1",
     "wonka": "^4.0.15",
     "workbox-window": "^6.5.4",
     "yargs-parser": "^21.1.1"

packages/hoppscotch-common/src/App.vue

@@ -4,7 +4,7 @@
       v-if="isLoadingInitialRoute"
       class="flex flex-col items-center justify-center min-h-screen"
     >
-      <SmartSpinner />
+      <HoppSmartSpinner />
     </div>
     <ErrorPage v-if="errorInfo !== null" :error="errorInfo" />
     <RouterView v-else />

packages/hoppscotch-common/src/components.d.ts

@@ -97,18 +97,6 @@ declare module '@vue/runtime-core' {
     HttpTestResultReport: typeof import('./components/http/TestResultReport.vue')['default']
     HttpTests: typeof import('./components/http/Tests.vue')['default']
     HttpURLEncodedParams: typeof import('./components/http/URLEncodedParams.vue')['default']
-    IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
-    IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
-    IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
-    IconLucideGlobe: typeof import('~icons/lucide/globe')['default']
-    IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
-    IconLucideInfo: typeof import('~icons/lucide/info')['default']
-    IconLucideLayers: typeof import('~icons/lucide/layers')['default']
-    IconLucideLoader: typeof import('~icons/lucide/loader')['default']
-    IconLucideMinus: typeof import('~icons/lucide/minus')['default']
-    IconLucideSearch: typeof import('~icons/lucide/search')['default']
-    IconLucideUser: typeof import('~icons/lucide/user')['default']
-    IconLucideUsers: typeof import('~icons/lucide/users')['default']
     LensesHeadersRenderer: typeof import('./components/lenses/HeadersRenderer.vue')['default']
     LensesHeadersRendererEntry: typeof import('./components/lenses/HeadersRendererEntry.vue')['default']
     LensesRenderersHTMLLensRenderer: typeof import('./components/lenses/renderers/HTMLLensRenderer.vue')['default']

packages/hoppscotch-common/src/components/app/DeveloperOptions.vue

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="t('app.developer_option')"
@@ -10,7 +10,7 @@
         {{ t("app.developer_option_description") }}
       </p>
       <div class="flex flex-1">
-        <ButtonSecondary
+        <HoppButtonSecondary
           outline
           filled
           :icon="copyIcon"
@@ -19,7 +19,7 @@
         />
       </div>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">

packages/hoppscotch-common/src/components/app/Footer.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="flex justify-between bg-primary">
       <div class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="EXPAND_NAVIGATION ? t('hide.sidebar') : t('show.sidebar')"
           :icon="IconSidebar"
@@ -10,7 +10,7 @@
           :class="{ '-rotate-180': !EXPAND_NAVIGATION }"
           @click="EXPAND_NAVIGATION = !EXPAND_NAVIGATION"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="`${ZEN_MODE ? t('action.turn_off') : t('action.turn_on')} ${t(
             'layout.zen_mode'
@@ -23,7 +23,7 @@
           @click="ZEN_MODE = !ZEN_MODE"
         />
         <tippy interactive trigger="click" theme="popover">
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="t('settings.interceptor')"
             :icon="IconShieldCheck"
@@ -40,7 +40,7 @@
           theme="popover"
           :on-shown="() => tippyActions!.focus()"
         >
-          <ButtonSecondary
+          <HoppButtonSecondary
             :icon="IconHelpCircle"
             class="!rounded-none"
             :label="`${t('app.help')}`"
@@ -55,7 +55,7 @@
               @keyup.c="chat!.$el.click()"
               @keyup.escape="hide()"
             >
-              <SmartItem
+              <HoppSmartItem
                 ref="documentation"
                 :icon="IconBook"
                 :label="`${t('app.documentation')}`"
@@ -64,7 +64,7 @@
                 :shortcut="['D']"
                 @click="hide()"
               />
-              <SmartItem
+              <HoppSmartItem
                 ref="shortcuts"
                 :icon="IconZap"
                 :label="`${t('app.keyboard_shortcuts')}`"
@@ -76,7 +76,7 @@
                   }
                 "
               />
-              <SmartItem
+              <HoppSmartItem
                 ref="chat"
                 :icon="IconMessageCircle"
                 :label="`${t('app.chat_with_us')}`"
@@ -88,14 +88,14 @@
                   }
                 "
               />
-              <SmartItem
+              <HoppSmartItem
                 :icon="IconGift"
                 :label="`${t('app.whats_new')}`"
                 to="https://docs.hoppscotch.io/changelog"
                 blank
                 @click="hide()"
               />
-              <SmartItem
+              <HoppSmartItem
                 :icon="IconActivity"
                 :label="t('app.status')"
                 to="https://status.hoppscotch.io"
@@ -103,21 +103,21 @@
                 @click="hide()"
               />
               <hr />
-              <SmartItem
+              <HoppSmartItem
                 :icon="IconGithub"
                 :label="`${t('app.github')}`"
                 to="https://github.com/hoppscotch/hoppscotch"
                 blank
                 @click="hide()"
               />
-              <SmartItem
+              <HoppSmartItem
                 :icon="IconTwitter"
                 :label="`${t('app.twitter')}`"
                 to="https://hoppscotch.io/twitter"
                 blank
                 @click="hide()"
               />
-              <SmartItem
+              <HoppSmartItem
                 :icon="IconUserPlus"
                 :label="`${t('app.invite')}`"
                 @click="
@@ -127,7 +127,7 @@
                   }
                 "
               />
-              <SmartItem
+              <HoppSmartItem
                 :icon="IconLock"
                 :label="`${t('app.terms_and_privacy')}`"
                 to="https://docs.hoppscotch.io/privacy"
@@ -148,7 +148,7 @@
             </div>
           </template>
         </tippy>
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip', allowHTML: true }"
           :title="`${t(
             'app.shortcuts'
@@ -156,14 +156,14 @@
           :icon="IconZap"
           @click="invokeAction('flyouts.keybinds.toggle')"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="navigatorShare"
           v-tippy="{ theme: 'tooltip' }"
           :icon="IconShare2"
           :title="t('request.share')"
           @click="nativeShare()"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="COLUMN_LAYOUT ? t('layout.row') : t('layout.column')"
           :icon="IconColumns"
@@ -177,7 +177,7 @@
             'rotate-180': SIDEBAR_ON_LEFT,
           }"
         >
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="SIDEBAR ? t('hide.sidebar') : t('show.sidebar')"
             :icon="IconSidebarOpen"
@@ -223,7 +223,7 @@ import { platform } from "~/platform"
 import { TippyComponent } from "vue-tippy"
 import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
 import { invokeAction } from "@helpers/actions"
-import SmartItem from "@hoppscotch/ui/src/components/smart/Item.vue"
+import { HoppSmartItem } from "@hoppscotch/ui"
 
 const t = useI18n()
 const showDeveloperOptions = ref(false)
@@ -274,7 +274,7 @@ const showDeveloperOptionModal = () => {
 
 // Template refs
 const tippyActions = ref<TippyComponent | null>(null)
-const documentation = ref<typeof SmartItem>()
-const shortcuts = ref<typeof SmartItem>()
-const chat = ref<typeof SmartItem>()
+const documentation = ref<typeof HoppSmartItem>()
+const shortcuts = ref<typeof HoppSmartItem>()
+const chat = ref<typeof HoppSmartItem>()
 </script>

packages/hoppscotch-common/src/components/app/Header.vue

@@ -10,7 +10,7 @@
           paddingLeft: platform.ui?.appHeader?.paddingLeft?.value,
         }"
       >
-        <ButtonSecondary
+        <HoppButtonSecondary
           class="tracking-wide !font-bold !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark uppercase"
           :label="t('app.name')"
           to="/"
@@ -18,7 +18,7 @@
         <AppGitHubStarButton class="mt-1.5 transition <sm:hidden" />
       </div>
       <div class="inline-flex items-center space-x-2">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="showInstallButton"
           v-tippy="{ theme: 'tooltip' }"
           :title="t('header.install_pwa')"
@@ -26,14 +26,14 @@
           class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
           @click="installPWA()"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip', allowHTML: true }"
           :title="`${t('app.search')} <kbd>/</kbd>`"
           :icon="IconSearch"
           class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
           @click="invokeAction('modals.search.toggle')"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip', allowHTML: true }"
           :title="`${
             mdAndLarger ? t('support.title') : t('app.options')
@@ -42,7 +42,7 @@
           class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
           @click="invokeAction('modals.support.toggle')"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="currentUser === null"
           :icon="IconUploadCloud"
           :label="t('header.save_workspace')"
@@ -50,13 +50,13 @@
           class="hidden md:flex"
           @click="invokeAction('modals.login.toggle')"
         />
-        <ButtonPrimary
+        <HoppButtonPrimary
           v-if="currentUser === null"
           :label="t('header.login')"
           @click="invokeAction('modals.login.toggle')"
         />
         <div v-else class="inline-flex items-center space-x-2">
-          <ButtonPrimary
+          <HoppButtonPrimary
             v-tippy="{ theme: 'tooltip' }"
             :title="t('team.invite_tooltip')"
             :label="t('team.invite')"
@@ -127,7 +127,7 @@
                     </span>
                   </div>
                   <hr />
-                  <SmartItem
+                  <HoppSmartItem
                     ref="profile"
                     to="/profile"
                     :icon="IconUser"
@@ -135,7 +135,7 @@
                     :shortcut="['P']"
                     @click="hide()"
                   />
-                  <SmartItem
+                  <HoppSmartItem
                     ref="settings"
                     to="/settings"
                     :icon="IconSettings"

packages/hoppscotch-common/src/components/app/Interceptor.vue

@@ -8,12 +8,15 @@
         {{ t("settings.interceptor_description") }}
       </p>
     </div>
-    <SmartRadioGroup v-model="interceptorSelection" :radios="interceptors" />
+    <HoppSmartRadioGroup
+      v-model="interceptorSelection"
+      :radios="interceptors"
+    />
     <div
       v-if="interceptorSelection == 'EXTENSIONS_ENABLED' && !extensionVersion"
       class="flex space-x-2"
     >
-      <ButtonSecondary
+      <HoppButtonSecondary
         to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
         blank
         :icon="IconChrome"
@@ -21,7 +24,7 @@
         outline
         class="!flex-1"
       />
-      <ButtonSecondary
+      <HoppButtonSecondary
         to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
         blank
         :icon="IconFirefox"

packages/hoppscotch-common/src/components/app/Options.vue

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="t('app.options')"
@@ -11,7 +11,7 @@
         <h2 class="p-4 font-semibold font-bold text-secondaryDark">
           {{ t("layout.name") }}
         </h2>
-        <SmartItem
+        <HoppSmartItem
           :icon="IconSidebar"
           :label="EXPAND_NAVIGATION ? t('hide.sidebar') : t('show.sidebar')"
           :description="t('layout.collapse_sidebar')"
@@ -19,7 +19,7 @@
           active
           @click="expandNavigation"
         />
-        <SmartItem
+        <HoppSmartItem
           :icon="IconSidebarOpen"
           :label="SIDEBAR ? t('hide.collection') : t('show.collection')"
           :description="t('layout.collapse_collection')"
@@ -30,7 +30,7 @@
         <h2 class="p-4 font-semibold font-bold text-secondaryDark">
           {{ t("support.title") }}
         </h2>
-        <SmartItem
+        <HoppSmartItem
           :icon="IconBook"
           :label="t('app.documentation')"
           to="https://docs.hoppscotch.io"
@@ -40,7 +40,7 @@
           blank
           @click="hideModal()"
         />
-        <SmartItem
+        <HoppSmartItem
           :icon="IconGift"
           :label="t('app.whats_new')"
           to="https://docs.hoppscotch.io/changelog"
@@ -50,7 +50,7 @@
           blank
           @click="hideModal()"
         />
-        <SmartItem
+        <HoppSmartItem
           :icon="IconActivity"
           :label="t('app.status')"
           to="https://status.hoppscotch.io"
@@ -60,7 +60,7 @@
           active
           @click="hideModal()"
         />
-        <SmartItem
+        <HoppSmartItem
           :icon="IconLock"
           :label="`${t('app.terms_and_privacy')}`"
           to="https://docs.hoppscotch.io/privacy"
@@ -73,7 +73,7 @@
         <h2 class="p-4 font-semibold font-bold text-secondaryDark">
           {{ t("settings.follow") }}
         </h2>
-        <SmartItem
+        <HoppSmartItem
           :icon="IconDiscord"
           :label="t('app.discord')"
           to="https://hoppscotch.io/discord"
@@ -83,7 +83,7 @@
           active
           @click="hideModal()"
         />
-        <SmartItem
+        <HoppSmartItem
           :icon="IconTwitter"
           :label="t('app.twitter')"
           to="https://hoppscotch.io/twitter"
@@ -93,7 +93,7 @@
           active
           @click="hideModal()"
         />
-        <SmartItem
+        <HoppSmartItem
           :icon="IconGithub"
           :label="`${t('app.github')}`"
           to="https://github.com/hoppscotch/hoppscotch"
@@ -103,7 +103,7 @@
           active
           @click="hideModal()"
         />
-        <SmartItem
+        <HoppSmartItem
           :icon="IconMessageCircle"
           :label="t('app.chat_with_us')"
           :description="t('support.chat')"
@@ -111,7 +111,7 @@
           active
           @click="chatWithUs()"
         />
-        <SmartItem
+        <HoppSmartItem
           :icon="IconUserPlus"
           :label="`${t('app.invite')}`"
           :description="t('shortcut.miscellaneous.invite')"
@@ -119,7 +119,7 @@
           active
           @click="expandInvite()"
         />
-        <SmartItem
+        <HoppSmartItem
           v-if="navigatorShare"
           v-tippy="{ theme: 'tooltip' }"
           :icon="IconShare2"
@@ -132,7 +132,7 @@
       </div>
       <AppShare :show="showShare" @hide-modal="showShare = false" />
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">

packages/hoppscotch-common/src/components/app/PowerSearch.vue

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     styles="sm:max-w-lg"
     full-width
@@ -68,7 +68,7 @@
         </div>
       </div>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">