btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

refactor: update hopp-ui to be independent (#2927)

Browse Source 
Co-authored-by: Anwarul Islam <anwaarulislaam@gmail.com>
This commit is contained in:
Andrew Bastin
2023-02-24 13:20:12 +05:30
committed by GitHub
parent 82c6f6f6bc
commit cae1840506
165 changed files with 2134 additions and 2069 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/hoppscotch-common/src/components/environments/ChooseType.vue
View File

@@ -1,19 +1,19 @@
<template>
<div>
<SmartTabs
<HoppSmartTabs
:id="'environments_tab'"
v-model="selectedEnvironmentTab"
render-inactive-tabs
>
<SmartTab
<HoppSmartTab
:id="'my-environments'"
:label="`${t('environment.my_environments')}`"
/>
<SmartTab
<HoppSmartTab
:id="'team-environments'"
:label="`${t('environment.team_environments')}`"
>
<SmartIntersection @intersecting="onTeamSelectIntersect">
<HoppSmartIntersection @intersecting="onTeamSelectIntersect">
<tippy
interactive
trigger="click"
@@ -26,13 +26,13 @@
:title="`${t('collection.select_team')}`"
class="bg-transparent border-b border-dividerLight select-wrapper"
>
<ButtonSecondary
<HoppButtonSecondary
v-if="environmentType.selectedTeam"
:icon="IconUsers"
:label="environmentType.selectedTeam.name"
class="flex-1 !justify-start pr-8 rounded-none"
/>
<ButtonSecondary
<HoppButtonSecondary
v-else
:label="`${t('collection.select_team')}`"
class="flex-1 !justify-start pr-8 rounded-none"
@@ -45,7 +45,7 @@
tabindex="0"
@keyup.escape="hide()"
>
<SmartItem
<HoppSmartItem
v-for="(team, index) in myTeams"
:key="`team-${index}`"
:label="team.name"
@@ -68,9 +68,9 @@
</div>
</template>
</tippy>
</SmartIntersection>
</SmartTab>
</SmartTabs>
</HoppSmartIntersection>
</HoppSmartTab>
</HoppSmartTabs>
</div>
</template>

16
packages/hoppscotch-common/src/components/environments/ImportExport.vue
View File

@@ -1,5 +1,5 @@
<template>
<SmartModal
<HoppSmartModal
v-if="show"
dialog
:title="`${t('environment.title')}`"
@@ -14,7 +14,7 @@
theme="popover"
:on-shown="() => tippyActions!.focus()"
>
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="t('action.more')"
:icon="IconMoreVertical"
@@ -26,7 +26,7 @@
tabindex="0"
@keyup.escape="hide()"
>
<SmartItem
<HoppSmartItem
:icon="IconGithub"
:label="t('import.from_gist')"
@click="
@@ -46,7 +46,7 @@
: undefined
"
>
<SmartItem
<HoppSmartItem
:disabled="
!currentUser
? true
@@ -71,11 +71,11 @@
</template>
<template #body>
<div v-if="loading" class="flex flex-col items-center justify-center p-4">
<SmartSpinner class="my-4" />
<HoppSmartSpinner class="my-4" />
<span class="text-secondaryLight">{{ t("state.loading") }}</span>
</div>
<div v-else class="flex flex-col space-y-2">
<SmartItem
<HoppSmartItem
:icon="IconFolderPlus"
:label="t('import.from_json')"
@click="openDialogChooseFileToImportFrom"
@@ -88,7 +88,7 @@
@change="importFromJSON"
/>
<hr />
<SmartItem
<HoppSmartItem
v-tippy="{ theme: 'tooltip' }"
:title="t('action.download_file')"
:icon="IconDownload"
@@ -97,7 +97,7 @@
/>
</div>
</template>
</SmartModal>
</HoppSmartModal>
</template>
<script setup lang="ts">

18
packages/hoppscotch-common/src/components/environments/index.vue
View File

@@ -15,14 +15,14 @@
:title="`${t('environment.select')}`"
class="bg-transparent border-b border-dividerLight select-wrapper"
>
<ButtonSecondary
<HoppButtonSecondary
v-if="
selectedEnv.type === 'MY_ENV' && selectedEnv.index !== undefined
"
:label="myEnvironments[selectedEnv.index].name"
class="flex-1 !justify-start pr-8 rounded-none"
/>
<ButtonSecondary
<HoppButtonSecondary
v-else
:label="`${t('environment.select')}`"
class="flex-1 !justify-start pr-8 rounded-none"
@@ -36,7 +36,7 @@
tabindex="0"
@keyup.escape="hide()"
>
<SmartItem
<HoppSmartItem
:label="`${t('environment.no_environment')}`"
:info-icon="
selectedEnvironmentIndex.type !== 'MY_ENV'
@@ -52,7 +52,7 @@
"
/>
<hr v-if="myEnvironments.length > 0" />
<SmartItem
<HoppSmartItem
v-for="(gen, index) in myEnvironments"
:key="`gen-${index}`"
:label="gen.name"
@@ -74,12 +74,12 @@
:title="`${t('environment.select')}`"
class="bg-transparent border-b border-dividerLight select-wrapper"
>
<ButtonSecondary
<HoppButtonSecondary
v-if="selectedEnv.name"
:label="selectedEnv.name"
class="flex-1 !justify-start pr-8 rounded-none"
/>
<ButtonSecondary
<HoppButtonSecondary
v-else
:label="`${t('environment.select')}`"
class="flex-1 !justify-start pr-8 rounded-none"
@@ -92,7 +92,7 @@
tabindex="0"
@keyup.escape="hide()"
>
<SmartItem
<HoppSmartItem
:label="`${t('environment.no_environment')}`"
:info-icon="
selectedEnvironmentIndex.type !== 'TEAM_ENV'
@@ -111,7 +111,7 @@
v-if="loading"
class="flex flex-col items-center justify-center p-4"
>
<SmartSpinner class="my-4" />
<HoppSmartSpinner class="my-4" />
<span class="text-secondaryLight">{{ t("state.loading") }}</span>
</div>
<hr v-if="teamEnvironmentList.length > 0" />
@@ -119,7 +119,7 @@
v-if="environmentType.selectedTeam !== undefined"
class="flex flex-col"
>
<SmartItem
<HoppSmartItem
v-for="(gen, index) in teamEnvironmentList"
:key="`gen-team-${index}`"
:label="gen.environment.name"

16
packages/hoppscotch-common/src/components/environments/my/Details.vue
View File

@@ -1,5 +1,5 @@
<template>
<SmartModal
<HoppSmartModal
v-if="show"
dialog
:title="t(`environment.${action}`)"
@@ -28,13 +28,13 @@
{{ t("environment.variable_list") }}
</label>
<div class="flex">
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="t('action.clear_all')"
:icon="clearIcon"
@click="clearContent()"
/>
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:icon="IconPlus"
:title="t('add.new')"
@@ -69,7 +69,7 @@
:name="'value' + index"
/>
<div class="flex">
<ButtonSecondary
<HoppButtonSecondary
id="variable"
v-tippy="{ theme: 'tooltip' }"
:title="t('action.remove')"
@@ -92,7 +92,7 @@
<span class="pb-4 text-center">
{{ t("empty.environments") }}
</span>
<ButtonSecondary
<HoppButtonSecondary
:label="`${t('add.new')}`"
filled
class="mb-4"
@@ -104,12 +104,12 @@
</template>
<template #footer>
<span class="flex space-x-2">
<ButtonPrimary
<HoppButtonPrimary
:label="`${t('action.save')}`"
outline
@click="saveEnvironment"
/>
<ButtonSecondary
<HoppButtonSecondary
:label="`${t('action.cancel')}`"
outline
filled
@@ -117,7 +117,7 @@
/>
</span>
</template>
</SmartModal>
</HoppSmartModal>
</template>
<script setup lang="ts">

18
packages/hoppscotch-common/src/components/environments/my/Environment.vue
View File

@@ -33,7 +33,7 @@
theme="popover"
:on-shown="() => tippyActions!.focus()"
>
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="t('action.more')"
:icon="IconMoreVertical"
@@ -53,7 +53,7 @@
"
@keyup.escape="hide()"
>
<SmartItem
<HoppSmartItem
ref="edit"
:icon="IconEdit"
:label="`${t('action.edit')}`"
@@ -65,7 +65,7 @@
}
"
/>
<SmartItem
<HoppSmartItem
ref="duplicate"
:icon="IconCopy"
:label="`${t('action.duplicate')}`"
@@ -77,7 +77,7 @@
}
"
/>
<SmartItem
<HoppSmartItem
v-if="environmentIndex !== 'Global'"
ref="deleteAction"
:icon="IconTrash2"
@@ -94,7 +94,7 @@
</template>
</tippy>
</span>
<SmartConfirmModal
<HoppSmartConfirmModal
:show="confirmRemove"
:title="`${t('confirm.remove_environment')}`"
@hide-modal="confirmRemove = false"
@@ -122,7 +122,7 @@ import {
import { useI18n } from "@composables/i18n"
import { useToast } from "@composables/toast"
import { TippyComponent } from "vue-tippy"
import SmartItem from "@hoppscotch/ui/src/components/smart/Item.vue"
import { HoppSmartItem } from "@hoppscotch/ui"
const t = useI18n()
const toast = useToast()
@@ -140,9 +140,9 @@ const confirmRemove = ref(false)
const tippyActions = ref<TippyComponent | null>(null)
const options = ref<TippyComponent | null>(null)
const edit = ref<typeof SmartItem>()
const duplicate = ref<typeof SmartItem>()
const deleteAction = ref<typeof SmartItem>()
const edit = ref<typeof HoppSmartItem>()
const duplicate = ref<typeof HoppSmartItem>()
const deleteAction = ref<typeof HoppSmartItem>()
const removeEnvironment = () => {
if (props.environmentIndex === null) return

8
packages/hoppscotch-common/src/components/environments/my/index.vue
View File

@@ -3,21 +3,21 @@
<div
class="sticky z-10 flex justify-between flex-1 flex-shrink-0 overflow-x-auto border-b top-upperPrimaryStickyFold border-dividerLight bg-primary"
>
<ButtonSecondary
<HoppButtonSecondary
:icon="IconPlus"
:label="`${t('action.new')}`"
class="!rounded-none"
@click="displayModalAdd(true)"
/>
<div class="flex">
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io/features/environments"
blank
:title="t('app.wiki')"
:icon="IconHelpCircle"
/>
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:icon="IconArchive"
:title="t('modal.import_export')"
@@ -45,7 +45,7 @@
<span class="pb-4 text-center">
{{ t("empty.environments") }}
</span>
<ButtonSecondary
<HoppButtonSecondary
:label="`${t('add.new')}`"
filled
outline

18
packages/hoppscotch-common/src/components/environments/teams/Details.vue
View File

@@ -1,5 +1,5 @@
<template>
<SmartModal
<HoppSmartModal
v-if="show"
dialog
:title="t(`environment.${action}`)"
@@ -29,13 +29,13 @@
{{ t("environment.variable_list") }}
</label>
<div v-if="!isViewer" class="flex">
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="t('action.clear_all')"
:icon="clearIcon"
@click="clearContent()"
/>
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:icon="IconPlus"
:title="t('add.new')"
@@ -73,7 +73,7 @@
:readonly="isViewer"
/>
<div v-if="!isViewer" class="flex">
<ButtonSecondary
<HoppButtonSecondary
id="variable"
v-tippy="{ theme: 'tooltip' }"
:title="t('action.remove')"
@@ -96,14 +96,14 @@
<span class="pb-4 text-center">
{{ t("empty.environments") }}
</span>
<ButtonSecondary
<HoppButtonSecondary
v-if="isViewer"
disabled
:label="`${t('add.new')}`"
filled
class="mb-4"
/>
<ButtonSecondary
<HoppButtonSecondary
v-else
:label="`${t('add.new')}`"
filled
@@ -116,13 +116,13 @@
</template>
<template v-if="!isViewer" #footer>
<span class="flex space-x-2">
<ButtonPrimary
<HoppButtonPrimary
:label="`${t('action.save')}`"
:loading="isLoading"
outline
@click="saveEnvironment"
/>
<ButtonSecondary
<HoppButtonSecondary
:label="`${t('action.cancel')}`"
outline
filled
@@ -130,7 +130,7 @@
/>
</span>
</template>
</SmartModal>
</HoppSmartModal>
</template>
<script setup lang="ts">

18
packages/hoppscotch-common/src/components/environments/teams/Environment.vue
View File

@@ -26,7 +26,7 @@
theme="popover"
:on-shown="() => tippyActions!.focus()"
>
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="t('action.more')"
:icon="IconMoreVertical"
@@ -42,7 +42,7 @@
@keyup.delete="deleteAction!.$el.click()"
@keyup.escape="options!.tippy().hide()"
>
<SmartItem
<HoppSmartItem
ref="edit"
:icon="IconEdit"
:label="`${t('action.edit')}`"
@@ -54,7 +54,7 @@
}
"
/>
<SmartItem
<HoppSmartItem
ref="duplicate"
:icon="IconCopy"
:label="`${t('action.duplicate')}`"
@@ -66,7 +66,7 @@
}
"
/>
<SmartItem
<HoppSmartItem
ref="deleteAction"
:icon="IconTrash2"
:label="`${t('action.delete')}`"
@@ -82,7 +82,7 @@
</template>
</tippy>
</span>
<SmartConfirmModal
<HoppSmartConfirmModal
:show="confirmRemove"
:title="`${t('confirm.remove_environment')}`"
@hide-modal="confirmRemove = false"
@@ -108,7 +108,7 @@ import IconCopy from "~icons/lucide/copy"
import IconTrash2 from "~icons/lucide/trash-2"
import IconMoreVertical from "~icons/lucide/more-vertical"
import { TippyComponent } from "vue-tippy"
import SmartItem from "@hoppscotch/ui/src/components/smart/Item.vue"
import { HoppSmartItem } from "@hoppscotch/ui"
const t = useI18n()
const toast = useToast()
@@ -126,9 +126,9 @@ const confirmRemove = ref(false)
const tippyActions = ref<TippyComponent | null>(null)
const options = ref<TippyComponent | null>(null)
const edit = ref<typeof SmartItem>()
const duplicate = ref<typeof SmartItem>()
const deleteAction = ref<typeof SmartItem>()
const edit = ref<typeof HoppSmartItem>()
const duplicate = ref<typeof HoppSmartItem>()
const deleteAction = ref<typeof HoppSmartItem>()
const removeEnvironment = () => {
pipe(

16
packages/hoppscotch-common/src/components/environments/teams/index.vue
View File

@@ -3,7 +3,7 @@
<div
class="sticky z-10 flex justify-between flex-1 flex-shrink-0 overflow-x-auto border-b top-upperSecondaryStickyFold border-dividerLight bg-primary"
>
<ButtonSecondary
<HoppButtonSecondary
v-if="team === undefined || team.myRole === 'VIEWER'"
v-tippy="{ theme: 'tooltip' }"
disabled
@@ -12,7 +12,7 @@
:title="t('team.no_access')"
:label="t('action.new')"
/>
<ButtonSecondary
<HoppButtonSecondary
v-else
:icon="IconPlus"
:label="`${t('action.new')}`"
@@ -20,21 +20,21 @@
@click="displayModalAdd(true)"
/>
<div class="flex">
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io/features/environments"
blank
:title="t('app.wiki')"
:icon="IconHelpCircle"
/>
<ButtonSecondary
<HoppButtonSecondary
v-if="team !== undefined && team.myRole === 'VIEWER'"
v-tippy="{ theme: 'tooltip' }"
disabled
:icon="IconArchive"
:title="t('modal.import_export')"
/>
<ButtonSecondary
<HoppButtonSecondary
v-else
v-tippy="{ theme: 'tooltip' }"
:icon="IconArchive"
@@ -56,7 +56,7 @@
<span class="pb-4 text-center">
{{ t("empty.environments") }}
</span>
<ButtonSecondary
<HoppButtonSecondary
v-if="team === undefined || team.myRole === 'VIEWER'"
v-tippy="{ theme: 'tooltip' }"
disabled
@@ -66,7 +66,7 @@
:title="t('team.no_access')"
:label="t('action.new')"
/>
<ButtonSecondary
<HoppButtonSecondary
v-else
:label="`${t('add.new')}`"
filled
@@ -87,7 +87,7 @@
/>
</div>
<div v-if="loading" class="flex flex-col items-center justify-center p-4">
<SmartSpinner class="my-4" />
<HoppSmartSpinner class="my-4" />
<span class="text-secondaryLight">{{ t("state.loading") }}</span>
</div>
<div