Compare commits
1 Commits
fix/sync-p
...
fix/pretti
| Author | SHA1 | Date | |
|---|---|---|---|
|
ca54c8498c |
@@ -51,7 +51,7 @@ VITE_ADMIN_URL=http://localhost:3100
|
||||
|
||||
# Backend URLs
|
||||
VITE_BACKEND_GQL_URL=http://localhost:3170/graphql
|
||||
VITE_BACKEND_WS_URL=ws://localhost:3170/graphql
|
||||
VITE_BACKEND_WS_URL=wss://localhost:3170/graphql
|
||||
VITE_BACKEND_API_URL=http://localhost:3170/v1
|
||||
|
||||
# Terms Of Service And Privacy Policy Links (Optional)
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
"dev": "pnpm -r do-dev",
|
||||
"gen-gql": "cross-env GQL_SCHEMA_EMIT_LOCATION='../../../gql-gen/backend-schema.gql' pnpm -r generate-gql-sdl",
|
||||
"generate": "pnpm -r do-build-prod",
|
||||
"start": "http-server packages/hoppscotch-selfhost-web/dist -p 3000",
|
||||
"start": "http-server packages/hoppscotch-web/dist -p 3000",
|
||||
"lint": "pnpm -r do-lint",
|
||||
"typecheck": "pnpm -r do-typecheck",
|
||||
"lintfix": "pnpm -r do-lintfix",
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
"edit": "编辑",
|
||||
"filter": "过滤",
|
||||
"go_back": "返回",
|
||||
"go_forward": "前进",
|
||||
"go_forward": "Go forward",
|
||||
"group_by": "分组方式",
|
||||
"label": "标签",
|
||||
"learn_more": "了解更多",
|
||||
@@ -40,9 +40,9 @@
|
||||
"start": "开始",
|
||||
"starting": "正在开始",
|
||||
"stop": "停止",
|
||||
"to_close": "关闭",
|
||||
"to_navigate": "定位",
|
||||
"to_select": "选择",
|
||||
"to_close": "以关闭",
|
||||
"to_navigate": "以定位",
|
||||
"to_select": "以选择",
|
||||
"turn_off": "关闭",
|
||||
"turn_on": "开启",
|
||||
"undo": "撤消",
|
||||
@@ -118,16 +118,16 @@
|
||||
},
|
||||
"collection": {
|
||||
"created": "集合已创建",
|
||||
"different_parent": "不能用不同的父类来重新排序集合",
|
||||
"different_parent": "Cannot reorder collection with different parent",
|
||||
"edit": "编辑集合",
|
||||
"invalid_name": "请提供有效的集合名称",
|
||||
"invalid_root_move": "该集合已经在根级了",
|
||||
"moved": "移动完成",
|
||||
"invalid_root_move": "Collection already in the root",
|
||||
"moved": "Moved Successfully",
|
||||
"my_collections": "我的集合",
|
||||
"name": "我的新集合",
|
||||
"name_length_insufficient": "集合名字至少需要 3 个字符",
|
||||
"new": "新建集合",
|
||||
"order_changed": "集合顺序已更新",
|
||||
"order_changed": "Collection Order Updated",
|
||||
"renamed": "集合已更名",
|
||||
"request_in_use": "请求正在使用中",
|
||||
"save_as": "另存为",
|
||||
@@ -147,7 +147,7 @@
|
||||
"remove_team": "你确定要删除该团队吗？",
|
||||
"remove_telemetry": "你确定要退出遥测服务吗？",
|
||||
"request_change": "你确定你要放弃当前的请求，未保存的修改将被丢失。",
|
||||
"save_unsaved_tab": "你想保存在此标签页中所作的修改吗？",
|
||||
"save_unsaved_tab": "Do you want to save changes made in this tab?",
|
||||
"sync": "您确定要同步该工作区吗？"
|
||||
},
|
||||
"count": {
|
||||
@@ -177,7 +177,7 @@
|
||||
"members": "团队为空",
|
||||
"parameters": "该请求没有任何参数",
|
||||
"pending_invites": "此团队无待办邀请",
|
||||
"profile": "登录以查看你的个人资料",
|
||||
"profile": "登录以查看你的个人档案",
|
||||
"protocols": "协议为空",
|
||||
"schema": "连接至 GraphQL 端点",
|
||||
"shortcodes": "Shortcodes 为空",
|
||||
@@ -209,7 +209,7 @@
|
||||
"browser_support_sse": "该浏览器似乎不支持 SSE。",
|
||||
"check_console_details": "检查控制台日志以获悉详情",
|
||||
"curl_invalid_format": "cURL 格式不正确",
|
||||
"danger_zone": "危险区域",
|
||||
"danger_zone": "Danger zone",
|
||||
"delete_account": "您的帐号目前为这些团队的拥有者：",
|
||||
"delete_account_description": "您在删除帐号前必须先将您自己从团队中移除、转移拥有权，或是删除团队。",
|
||||
"empty_req_name": "空请求名称",
|
||||
@@ -219,7 +219,7 @@
|
||||
"incorrect_email": "电子邮箱错误",
|
||||
"invalid_link": "无效链接",
|
||||
"invalid_link_description": "你点击的链接无效或已过期。",
|
||||
"json_parsing_failed": "不合法的 JSON",
|
||||
"json_parsing_failed": "Invalid JSON",
|
||||
"json_prettify_invalid_body": "无法美化无效的请求头，处理 JSON 语法错误并重试",
|
||||
"network_error": "好像发生了网络错误，请重试。",
|
||||
"network_fail": "无法发送请求",
|
||||
@@ -316,14 +316,14 @@
|
||||
"zen_mode": "ZEN 模式"
|
||||
},
|
||||
"modal": {
|
||||
"close_unsaved_tab": "有未保存的变更",
|
||||
"close_unsaved_tab": "You have unsaved changes",
|
||||
"collections": "集合",
|
||||
"confirm": "确认",
|
||||
"edit_request": "编辑请求",
|
||||
"import_export": "导入/导出"
|
||||
},
|
||||
"mqtt": {
|
||||
"already_subscribed": "您已经订阅了此主题。",
|
||||
"already_subscribed": "您已经订阅了此主題。",
|
||||
"clean_session": "清除会话",
|
||||
"clear_input": "清除输入",
|
||||
"clear_input_on_send": "发送后清除输入",
|
||||
@@ -355,7 +355,7 @@
|
||||
"navigation": {
|
||||
"doc": "文档",
|
||||
"graphql": "GraphQL",
|
||||
"profile": "个人资料",
|
||||
"profile": "个人档案",
|
||||
"realtime": "实时",
|
||||
"rest": "REST",
|
||||
"settings": "设置"
|
||||
@@ -377,7 +377,7 @@
|
||||
"owner_description": "所有者可以添加、编辑和删除请求、集合及团队成员。",
|
||||
"roles": "角色",
|
||||
"roles_description": "角色用以控制共享集合的访问权限。",
|
||||
"updated": "已更新",
|
||||
"updated": "档案已更新",
|
||||
"viewer": "查看者",
|
||||
"viewer_description": "查看者只可查看与使用请求。"
|
||||
},
|
||||
@@ -396,8 +396,8 @@
|
||||
"text": "文字"
|
||||
},
|
||||
"copy_link": "复制链接",
|
||||
"different_collection": "不能对来自不同集合的请求进行重新排序",
|
||||
"duplicated": "重复的请求",
|
||||
"different_collection": "Cannot reorder requests from different collections",
|
||||
"duplicated": "Request duplicated",
|
||||
"duration": "持续时间",
|
||||
"enter_curl": "输入 cURL",
|
||||
"generate_code": "生成代码",
|
||||
@@ -405,10 +405,10 @@
|
||||
"header_list": "请求头列表",
|
||||
"invalid_name": "请提供请求名称",
|
||||
"method": "方法",
|
||||
"moved": "请求移动完成",
|
||||
"moved": "Request moved",
|
||||
"name": "请求名称",
|
||||
"new": "新请求",
|
||||
"order_changed": "请求顺序更新完成",
|
||||
"order_changed": "Request Order Updated",
|
||||
"override": "覆盖",
|
||||
"override_help": "设置 <kbd>Content-Type</kbd> 头",
|
||||
"overriden": "覆盖",
|
||||
@@ -479,10 +479,10 @@
|
||||
"language": "语言",
|
||||
"light_mode": "亮色",
|
||||
"official_proxy_hosting": "官方代理由 Hoppscotch 托管。",
|
||||
"profile": "个人资料",
|
||||
"profile_description": "更新你的资料",
|
||||
"profile": "个人档案",
|
||||
"profile_description": "更新你的档案详情",
|
||||
"profile_email": "电子邮箱地址",
|
||||
"profile_name": "名称",
|
||||
"profile_name": "档案名称",
|
||||
"proxy": "网络代理",
|
||||
"proxy_url": "代理网址",
|
||||
"proxy_use_toggle": "使用代理中间件发送请求",
|
||||
@@ -532,7 +532,7 @@
|
||||
"documentation": "前往文档页面",
|
||||
"forward": "前往下一页面",
|
||||
"graphql": "前往 GraphQL 页面",
|
||||
"profile": "前往个人资料页面",
|
||||
"profile": "前往个人档案页面",
|
||||
"realtime": "前往实时页面",
|
||||
"rest": "前往 REST 页面",
|
||||
"settings": "前往设置页面",
|
||||
@@ -574,7 +574,7 @@
|
||||
},
|
||||
"socketio": {
|
||||
"communication": "通讯",
|
||||
"connection_not_authorized": "此 SocketIO 连接未使用任何验证。",
|
||||
"connection_not_authorized": "此SocketIO连接未使用任何验证。",
|
||||
"event_name": "事件名称",
|
||||
"events": "事件",
|
||||
"log": "日志",
|
||||
@@ -614,12 +614,12 @@
|
||||
"none": "无",
|
||||
"nothing_found": "没有找到",
|
||||
"published_error": "将信息：{topic}发布至主题：{message}时发生错误",
|
||||
"published_message": "已将此信息：{message} 发布至主题：{topic}",
|
||||
"published_message": "已将此信息：{message}发布至主题：{topic}",
|
||||
"reconnection_error": "重连失败",
|
||||
"subscribed_failed": "无法订阅此主题：{topic}",
|
||||
"subscribed_success": "成功订阅此主题：{topic}",
|
||||
"unsubscribed_failed": "无法取消订阅此主题：{topic}",
|
||||
"unsubscribed_success": "成功取消订阅此主题：{topic}",
|
||||
"subscribed_failed": "无法订阅此主題：{topic}",
|
||||
"subscribed_success": "成功订阅此主題：{topic}",
|
||||
"unsubscribed_failed": "无法取消订阅此主題：{topic}",
|
||||
"unsubscribed_success": "成功取消订阅此主題：{topic}",
|
||||
"waiting_send_request": "等待发送请求"
|
||||
},
|
||||
"support": {
|
||||
@@ -639,7 +639,7 @@
|
||||
"body": "请求体",
|
||||
"collections": "集合",
|
||||
"documentation": "帮助文档",
|
||||
"environments": "环境",
|
||||
"environments": "Environments",
|
||||
"headers": "请求头",
|
||||
"history": "历史记录",
|
||||
"mqtt": "MQTT",
|
||||
@@ -664,7 +664,7 @@
|
||||
"email_do_not_match": "邮箱无法与你的帐户信息匹配。请联系你的团队者。",
|
||||
"exit": "退出团队",
|
||||
"exit_disabled": "团队所有者无法退出团队",
|
||||
"invalid_coll_id": "无效的集合 ID",
|
||||
"invalid_coll_id": "Invalid collection ID",
|
||||
"invalid_email_format": "电子邮箱格式无效",
|
||||
"invalid_id": "无效的团队 ID，请联系你的团队者。",
|
||||
"invalid_invite_link": "无效的邀请链接",
|
||||
@@ -688,7 +688,7 @@
|
||||
"member_removed": "用户已移除",
|
||||
"member_role_updated": "用户角色已更新",
|
||||
"members": "成员",
|
||||
"more_members": "+{count} 更多",
|
||||
"more_members": "+{count} more",
|
||||
"name_length_insufficient": "团队名称至少为 6 个字符",
|
||||
"name_updated": "团队名称已更新",
|
||||
"new": "新团队",
|
||||
@@ -696,13 +696,13 @@
|
||||
"new_name": "我的新团队",
|
||||
"no_access": "你没有编辑集合的权限",
|
||||
"no_invite_found": "未找到邀请。请联系你的团队者。",
|
||||
"no_request_found": "请求不存在",
|
||||
"no_request_found": "Request not found.",
|
||||
"not_found": "没有找到团队，请联系您的团队所有者。",
|
||||
"not_valid_viewer": "你不是有效的查看者。请联系你的团队者。",
|
||||
"parent_coll_move": "不能将集合移动到一个子集合",
|
||||
"parent_coll_move": "Cannot move collection to a child collection",
|
||||
"pending_invites": "待办邀请",
|
||||
"permissions": "权限",
|
||||
"same_target_destination": "目标相同",
|
||||
"same_target_destination": "Same target and destination",
|
||||
"saved": "团队已保存",
|
||||
"select_a_team": "选择团队",
|
||||
"title": "团队",
|
||||
@@ -732,9 +732,9 @@
|
||||
"url": "URL"
|
||||
},
|
||||
"workspace": {
|
||||
"change": "切换工作空间",
|
||||
"personal": "我的工作空间",
|
||||
"team": "团队工作空间",
|
||||
"title": "工作空间"
|
||||
"change": "Change workspace",
|
||||
"personal": "My Workspace",
|
||||
"team": "Team Workspace",
|
||||
"title": "Workspaces"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -46,138 +46,93 @@
|
||||
}
|
||||
"
|
||||
/>
|
||||
<HoppSmartTabs
|
||||
v-model="selectedEnvTab"
|
||||
styles="sticky overflow-x-auto my-2 border border-divider rounded flex-shrink-0 z-0 top-0 bg-primary"
|
||||
render-inactive-tabs
|
||||
>
|
||||
<HoppSmartTab
|
||||
:id="'my-environments'"
|
||||
:label="`${t('environment.my_environments')}`"
|
||||
<div v-if="environmentType === 'my-environments'" class="flex flex-col">
|
||||
<hr v-if="myEnvironments.length > 0" />
|
||||
<HoppSmartItem
|
||||
v-for="(gen, index) in myEnvironments"
|
||||
:key="`gen-${index}`"
|
||||
:label="gen.name"
|
||||
:info-icon="index === selectedEnv.index ? IconCheck : undefined"
|
||||
:active-info-icon="index === selectedEnv.index"
|
||||
@click="
|
||||
() => {
|
||||
selectedEnvironmentIndex = { type: 'MY_ENV', index: index }
|
||||
hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="flex flex-col">
|
||||
<div
|
||||
v-if="teamEnvLoading"
|
||||
class="flex flex-col items-center justify-center p-4"
|
||||
>
|
||||
<HoppSmartSpinner class="my-4" />
|
||||
<span class="text-secondaryLight">{{ t("state.loading") }}</span>
|
||||
</div>
|
||||
<hr v-if="teamEnvironmentList.length > 0" />
|
||||
<div v-if="isTeamSelected" class="flex flex-col">
|
||||
<HoppSmartItem
|
||||
v-for="(gen, index) in myEnvironments"
|
||||
:key="`gen-${index}`"
|
||||
:label="gen.name"
|
||||
:info-icon="index === selectedEnv.index ? IconCheck : undefined"
|
||||
:active-info-icon="index === selectedEnv.index"
|
||||
v-for="(gen, index) in teamEnvironmentList"
|
||||
:key="`gen-team-${index}`"
|
||||
:label="gen.environment.name"
|
||||
:info-icon="
|
||||
gen.id === selectedEnv.teamEnvID ? IconCheck : undefined
|
||||
"
|
||||
:active-info-icon="gen.id === selectedEnv.teamEnvID"
|
||||
@click="
|
||||
() => {
|
||||
selectedEnvironmentIndex = { type: 'MY_ENV', index: index }
|
||||
selectedEnvironmentIndex = {
|
||||
type: 'TEAM_ENV',
|
||||
teamEnvID: gen.id,
|
||||
teamID: gen.teamID,
|
||||
environment: gen.environment,
|
||||
}
|
||||
hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<div
|
||||
v-if="myEnvironments.length === 0"
|
||||
class="flex flex-col items-center justify-center text-secondaryLight"
|
||||
>
|
||||
<img
|
||||
:src="`/images/states/${colorMode.value}/blockchain.svg`"
|
||||
loading="lazy"
|
||||
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-2"
|
||||
:alt="`${t('empty.environments')}`"
|
||||
/>
|
||||
<span class="pb-2 text-center">
|
||||
{{ t("empty.environments") }}
|
||||
</span>
|
||||
</div>
|
||||
</HoppSmartTab>
|
||||
<HoppSmartTab
|
||||
:id="'team-environments'"
|
||||
:label="`${t('environment.team_environments')}`"
|
||||
:disabled="!isTeamSelected || workspace.type === 'personal'"
|
||||
</div>
|
||||
<div
|
||||
v-if="!teamEnvLoading && isAdapterError"
|
||||
class="flex flex-col items-center py-4"
|
||||
>
|
||||
<div
|
||||
v-if="teamListLoading"
|
||||
class="flex flex-col items-center justify-center p-4"
|
||||
>
|
||||
<HoppSmartSpinner class="my-4" />
|
||||
<span class="text-secondaryLight">{{ t("state.loading") }}</span>
|
||||
</div>
|
||||
<div v-if="isTeamSelected" class="flex flex-col">
|
||||
<HoppSmartItem
|
||||
v-for="(gen, index) in teamEnvironmentList"
|
||||
:key="`gen-team-${index}`"
|
||||
:label="gen.environment.name"
|
||||
:info-icon="
|
||||
gen.id === selectedEnv.teamEnvID ? IconCheck : undefined
|
||||
"
|
||||
:active-info-icon="gen.id === selectedEnv.teamEnvID"
|
||||
@click="
|
||||
() => {
|
||||
selectedEnvironmentIndex = {
|
||||
type: 'TEAM_ENV',
|
||||
teamEnvID: gen.id,
|
||||
teamID: gen.teamID,
|
||||
environment: gen.environment,
|
||||
}
|
||||
hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<div
|
||||
v-if="teamEnvironmentList.length === 0"
|
||||
class="flex flex-col items-center justify-center text-secondaryLight"
|
||||
>
|
||||
<img
|
||||
:src="`/images/states/${colorMode.value}/blockchain.svg`"
|
||||
loading="lazy"
|
||||
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-2"
|
||||
:alt="`${t('empty.environments')}`"
|
||||
/>
|
||||
<span class="pb-2 text-center">
|
||||
{{ t("empty.environments") }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="!teamListLoading && teamAdapterError"
|
||||
class="flex flex-col items-center py-4"
|
||||
>
|
||||
<icon-lucide-help-circle class="mb-4 svg-icons" />
|
||||
{{ getErrorMessage(teamAdapterError) }}
|
||||
</div>
|
||||
</HoppSmartTab>
|
||||
</HoppSmartTabs>
|
||||
<icon-lucide-help-circle class="mb-4 svg-icons" />
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</tippy>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, watch } from "vue"
|
||||
import { computed, ref } from "vue"
|
||||
import IconCheck from "~icons/lucide/check"
|
||||
import { TippyComponent } from "vue-tippy"
|
||||
import { useI18n } from "~/composables/i18n"
|
||||
import { GQLError } from "~/helpers/backend/GQLClient"
|
||||
import { useReadonlyStream, useStream } from "~/composables/stream"
|
||||
import { Environment } from "@hoppscotch/data"
|
||||
import { TeamEnvironment } from "~/helpers/teams/TeamEnvironment"
|
||||
import { useStream } from "~/composables/stream"
|
||||
import {
|
||||
environments$,
|
||||
selectedEnvironmentIndex$,
|
||||
setSelectedEnvironmentIndex,
|
||||
} from "~/newstore/environments"
|
||||
import { workspaceStatus$ } from "~/newstore/workspace"
|
||||
import TeamEnvironmentAdapter from "~/helpers/teams/TeamEnvironmentAdapter"
|
||||
import { useColorMode } from "@composables/theming"
|
||||
|
||||
const t = useI18n()
|
||||
|
||||
const colorMode = useColorMode()
|
||||
|
||||
type EnvironmentType = "my-environments" | "team-environments"
|
||||
|
||||
const myEnvironments = useReadonlyStream(environments$, [])
|
||||
|
||||
const workspace = useReadonlyStream(workspaceStatus$, { type: "personal" })
|
||||
|
||||
const teamEnvListAdapter = new TeamEnvironmentAdapter(undefined)
|
||||
const teamListLoading = useReadonlyStream(teamEnvListAdapter.loading$, false)
|
||||
const teamAdapterError = useReadonlyStream(teamEnvListAdapter.error$, null)
|
||||
const teamEnvironmentList = useReadonlyStream(
|
||||
teamEnvListAdapter.teamEnvironmentList$,
|
||||
[]
|
||||
)
|
||||
const props = defineProps<{
|
||||
environmentType: EnvironmentType
|
||||
myEnvironments: Environment[]
|
||||
teamEnvironmentList: TeamEnvironment[]
|
||||
teamEnvLoading: boolean
|
||||
isAdapterError: boolean
|
||||
errorMessage: GQLError<string>
|
||||
isTeamSelected: boolean
|
||||
}>()
|
||||
|
||||
const selectedEnvironmentIndex = useStream(
|
||||
selectedEnvironmentIndex$,
|
||||
@@ -185,35 +140,15 @@ const selectedEnvironmentIndex = useStream(
|
||||
setSelectedEnvironmentIndex
|
||||
)
|
||||
|
||||
const isTeamSelected = computed(
|
||||
() => workspace.value.type === "team" && workspace.value.teamID !== undefined
|
||||
)
|
||||
|
||||
const selectedEnvTab = ref<EnvironmentType>("my-environments")
|
||||
|
||||
watch(
|
||||
() => workspace.value,
|
||||
(newVal) => {
|
||||
if (newVal.type === "personal") {
|
||||
selectedEnvTab.value = "my-environments"
|
||||
} else {
|
||||
selectedEnvTab.value = "team-environments"
|
||||
if (newVal.teamID) {
|
||||
teamEnvListAdapter.changeTeamID(newVal.teamID)
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const selectedEnv = computed(() => {
|
||||
if (selectedEnvironmentIndex.value.type === "MY_ENV") {
|
||||
return {
|
||||
type: "MY_ENV",
|
||||
index: selectedEnvironmentIndex.value.index,
|
||||
name: myEnvironments.value[selectedEnvironmentIndex.value.index].name,
|
||||
name: props.myEnvironments[selectedEnvironmentIndex.value.index].name,
|
||||
}
|
||||
} else if (selectedEnvironmentIndex.value.type === "TEAM_ENV") {
|
||||
const teamEnv = teamEnvironmentList.value.find(
|
||||
const teamEnv = props.teamEnvironmentList.find(
|
||||
(env) =>
|
||||
env.id ===
|
||||
(selectedEnvironmentIndex.value.type === "TEAM_ENV" &&
|
||||
@@ -235,17 +170,4 @@ const selectedEnv = computed(() => {
|
||||
|
||||
// Template refs
|
||||
const tippyActions = ref<TippyComponent | null>(null)
|
||||
|
||||
const getErrorMessage = (err: GQLError<string>) => {
|
||||
if (err.type === "network_error") {
|
||||
return t("error.network_error")
|
||||
} else {
|
||||
switch (err.error) {
|
||||
case "team_environment/not_found":
|
||||
return t("team_environment.not_found")
|
||||
default:
|
||||
return t("error.something_went_wrong")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -4,6 +4,15 @@
|
||||
class="sticky top-0 z-10 flex flex-col flex-shrink-0 overflow-x-auto bg-primary"
|
||||
>
|
||||
<WorkspaceCurrent :section="t('tab.environments')" />
|
||||
<EnvironmentsSelector
|
||||
:environment-type="environmentType.type"
|
||||
:my-environments="myEnvironments"
|
||||
:team-env-loading="loading"
|
||||
:team-environment-list="teamEnvironmentList"
|
||||
:is-adapter-error="adapterError !== null"
|
||||
:error-message="adapterError ? getErrorMessage(adapterError) : ''"
|
||||
:is-team-selected="environmentType.selectedTeam !== undefined"
|
||||
/>
|
||||
<EnvironmentsMyEnvironment
|
||||
environment-index="Global"
|
||||
:environment="globalEnvironment"
|
||||
@@ -37,11 +46,13 @@ import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
|
||||
import { useReadonlyStream, useStream } from "@composables/stream"
|
||||
import { useI18n } from "~/composables/i18n"
|
||||
import {
|
||||
environments$,
|
||||
globalEnv$,
|
||||
selectedEnvironmentIndex$,
|
||||
setSelectedEnvironmentIndex,
|
||||
} from "~/newstore/environments"
|
||||
import TeamEnvironmentAdapter from "~/helpers/teams/TeamEnvironmentAdapter"
|
||||
import { GQLError } from "~/helpers/backend/GQLClient"
|
||||
import { defineActionHandler } from "~/helpers/actions"
|
||||
import { workspaceStatus$ } from "~/newstore/workspace"
|
||||
import TeamListAdapter from "~/helpers/teams/TeamListAdapter"
|
||||
@@ -136,19 +147,24 @@ onLoggedIn(() => {
|
||||
|
||||
const workspace = useReadonlyStream(workspaceStatus$, { type: "personal" })
|
||||
|
||||
// Switch to my environments if workspace is personal and to team environments if workspace is team
|
||||
// also resets selected environment if workspace is personal and the previous selected environment was a team environment
|
||||
// Used to switch environment type and team when user switch workspace in the global workspace switcher
|
||||
// Check if there is a teamID in the workspace, if yes, switch to team environment and select the team
|
||||
// If there is no teamID, switch to my environment
|
||||
watch(workspace, (newWorkspace) => {
|
||||
if (newWorkspace.type === "personal") {
|
||||
switchToMyEnvironments()
|
||||
setSelectedEnvironmentIndex({
|
||||
type: "NO_ENV_SELECTED",
|
||||
})
|
||||
} else if (newWorkspace.type === "team") {
|
||||
const team = myTeams.value?.find((t) => t.id === newWorkspace.teamID)
|
||||
updateSelectedTeam(team)
|
||||
|
||||
if (selectedEnvironmentIndex.value.type !== "MY_ENV") {
|
||||
setSelectedEnvironmentIndex({
|
||||
type: "NO_ENV_SELECTED",
|
||||
})
|
||||
}
|
||||
} else if (newWorkspace.type === "team") {
|
||||
const team = myTeams.value?.find((t) => t.id === newWorkspace.teamID)
|
||||
updateSelectedTeam(team)
|
||||
}
|
||||
})
|
||||
|
||||
@@ -191,6 +207,8 @@ defineActionHandler(
|
||||
}
|
||||
)
|
||||
|
||||
const myEnvironments = useReadonlyStream(environments$, [])
|
||||
|
||||
const selectedEnvironmentIndex = useStream(
|
||||
selectedEnvironmentIndex$,
|
||||
{ type: "NO_ENV_SELECTED" },
|
||||
@@ -233,4 +251,17 @@ watch(
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
const getErrorMessage = (err: GQLError<string>) => {
|
||||
if (err.type === "network_error") {
|
||||
return t("error.network_error")
|
||||
} else {
|
||||
switch (err.error) {
|
||||
case "team_environment/not_found":
|
||||
return t("team_environment.not_found")
|
||||
default:
|
||||
return t("error.something_went_wrong")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -165,8 +165,8 @@ const props = withDefaults(
|
||||
defineProps<{
|
||||
show: boolean
|
||||
action: "edit" | "new"
|
||||
editingEnvironmentIndex?: number | "Global" | null
|
||||
editingVariableName?: string | null
|
||||
editingEnvironmentIndex: number | "Global" | null
|
||||
editingVariableName: string | null
|
||||
envVars?: () => Environment["variables"]
|
||||
}>(),
|
||||
{
|
||||
|
||||
@@ -140,7 +140,7 @@ import * as A from "fp-ts/Array"
|
||||
import * as O from "fp-ts/Option"
|
||||
import * as TE from "fp-ts/TaskEither"
|
||||
import { flow, pipe } from "fp-ts/function"
|
||||
import { Environment, parseTemplateStringE } from "@hoppscotch/data"
|
||||
import { parseTemplateStringE } from "@hoppscotch/data"
|
||||
import { refAutoReset } from "@vueuse/core"
|
||||
import { clone } from "lodash-es"
|
||||
import { useToast } from "@composables/toast"
|
||||
@@ -173,20 +173,16 @@ const props = withDefaults(
|
||||
defineProps<{
|
||||
show: boolean
|
||||
action: "edit" | "new"
|
||||
editingEnvironment?: TeamEnvironment | null
|
||||
editingEnvironment: TeamEnvironment | null
|
||||
editingTeamId: string | undefined
|
||||
editingVariableName?: string | null
|
||||
isViewer?: boolean
|
||||
envVars?: () => Environment["variables"]
|
||||
editingVariableName: string | null
|
||||
isViewer: boolean
|
||||
}>(),
|
||||
{
|
||||
show: false,
|
||||
action: "edit",
|
||||
editingEnvironment: null,
|
||||
editingTeamId: "",
|
||||
editingVariableName: null,
|
||||
isViewer: false,
|
||||
envVars: () => [],
|
||||
}
|
||||
)
|
||||
|
||||
@@ -230,16 +226,10 @@ watch(
|
||||
() => props.show,
|
||||
(show) => {
|
||||
if (show) {
|
||||
if (props.action === "new") {
|
||||
if (props.editingEnvironment === null) {
|
||||
name.value = null
|
||||
vars.value = pipe(
|
||||
props.envVars() ?? [],
|
||||
A.map((e: { key: string; value: string }) => ({
|
||||
id: idTicker.value++,
|
||||
env: clone(e),
|
||||
}))
|
||||
)
|
||||
} else if (props.editingEnvironment !== null) {
|
||||
vars.value = []
|
||||
} else {
|
||||
name.value = props.editingEnvironment.environment.name ?? null
|
||||
vars.value = pipe(
|
||||
props.editingEnvironment.environment.variables ?? [],
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
class="sticky z-10 flex justify-between flex-1 flex-shrink-0 overflow-x-auto border-b top-upperPrimaryStickyFold border-dividerLight bg-primary"
|
||||
class="sticky z-10 flex justify-between flex-1 flex-shrink-0 overflow-x-auto border-b top-upperSecondaryStickyFold border-dividerLight bg-primary"
|
||||
>
|
||||
<HoppButtonSecondary
|
||||
v-if="team === undefined || team.myRole === 'VIEWER'"
|
||||
|
||||
@@ -197,20 +197,11 @@
|
||||
/>
|
||||
</div>
|
||||
<EnvironmentsMyDetails
|
||||
:show="showMyEnvironmentDetailsModal"
|
||||
:show="showModalDetails"
|
||||
action="new"
|
||||
:env-vars="getAdditionVars"
|
||||
@hide-modal="displayModalAdd(false)"
|
||||
/>
|
||||
<EnvironmentsTeamsDetails
|
||||
:show="showTeamEnvironmentDetailsModal"
|
||||
action="new"
|
||||
:env-vars="getAdditionVars"
|
||||
:editing-team-id="
|
||||
workspace.type === 'team' ? workspace.teamID : undefined
|
||||
"
|
||||
@hide-modal="displayModalAdd(false)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -234,7 +225,6 @@ import IconClose from "~icons/lucide/x"
|
||||
|
||||
import { useColorMode } from "~/composables/theming"
|
||||
import { useVModel } from "@vueuse/core"
|
||||
import { workspaceStatus$ } from "~/newstore/workspace"
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: HoppTestResult | null | undefined
|
||||
@@ -249,15 +239,10 @@ const testResults = useVModel(props, "modelValue", emit)
|
||||
const t = useI18n()
|
||||
const colorMode = useColorMode()
|
||||
|
||||
const workspace = useReadonlyStream(workspaceStatus$, { type: "personal" })
|
||||
|
||||
const showMyEnvironmentDetailsModal = ref(false)
|
||||
const showTeamEnvironmentDetailsModal = ref(false)
|
||||
const showModalDetails = ref(false)
|
||||
|
||||
const displayModalAdd = (shouldDisplay: boolean) => {
|
||||
if (workspace.value.type === "personal")
|
||||
showMyEnvironmentDetailsModal.value = shouldDisplay
|
||||
else showTeamEnvironmentDetailsModal.value = shouldDisplay
|
||||
showModalDetails.value = shouldDisplay
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,40 +0,0 @@
|
||||
import { distinctUntilChanged, pluck } from "rxjs"
|
||||
import DispatchingStore, { defineDispatchers } from "./DispatchingStore"
|
||||
|
||||
type SyncState = {
|
||||
isInitialSync: boolean
|
||||
shouldSync: boolean
|
||||
}
|
||||
|
||||
type CurrentSyncingState = {
|
||||
currentSyncingItem: SyncState
|
||||
}
|
||||
|
||||
const initialState: CurrentSyncingState = {
|
||||
currentSyncingItem: {
|
||||
isInitialSync: false,
|
||||
shouldSync: false,
|
||||
},
|
||||
}
|
||||
|
||||
const dispatchers = defineDispatchers({
|
||||
changeCurrentSyncStatus(_, { syncItem }: { syncItem: SyncState }) {
|
||||
return {
|
||||
currentSyncingItem: syncItem,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
export const currentSyncStore = new DispatchingStore(initialState, dispatchers)
|
||||
|
||||
export const currentSyncingStatus$ = currentSyncStore.subject$.pipe(
|
||||
pluck("currentSyncingItem"),
|
||||
distinctUntilChanged()
|
||||
)
|
||||
|
||||
export function changeCurrentSyncStatus(syncItem: SyncState) {
|
||||
currentSyncStore.dispatch({
|
||||
dispatcher: "changeCurrentSyncStatus",
|
||||
payload: { syncItem },
|
||||
})
|
||||
}
|
||||
@@ -56,9 +56,6 @@
|
||||
@update:model-value="onTabUpdate"
|
||||
/>
|
||||
</HoppSmartWindow>
|
||||
<template #actions>
|
||||
<EnvironmentsSelector class="h-full" />
|
||||
</template>
|
||||
</HoppSmartWindows>
|
||||
</template>
|
||||
<template #sidebar>
|
||||
@@ -87,7 +84,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onBeforeUnmount, onBeforeMount } from "vue"
|
||||
import { ref, onMounted, onBeforeUnmount, watch, onBeforeMount } from "vue"
|
||||
import { safelyExtractRESTRequest } from "@hoppscotch/data"
|
||||
import { translateExtURLParams } from "~/helpers/RESTExtURLParams"
|
||||
import { useRoute } from "vue-router"
|
||||
@@ -123,11 +120,6 @@ import { useToast } from "~/composables/toast"
|
||||
import { PersistableRESTTabState } from "~/helpers/rest/tab"
|
||||
import { watchDebounced } from "@vueuse/core"
|
||||
import { oauthRedirect } from "~/helpers/oauth"
|
||||
import { useReadonlyStream } from "~/composables/stream"
|
||||
import {
|
||||
changeCurrentSyncStatus,
|
||||
currentSyncingStatus$,
|
||||
} from "~/newstore/syncing"
|
||||
|
||||
const savingRequest = ref(false)
|
||||
const confirmingCloseForTabID = ref<string | null>(null)
|
||||
@@ -139,10 +131,7 @@ const toast = useToast()
|
||||
|
||||
const tabs = getActiveTabs()
|
||||
|
||||
const confirmSync = useReadonlyStream(currentSyncingStatus$, {
|
||||
isInitialSync: false,
|
||||
shouldSync: true,
|
||||
})
|
||||
const confirmSync = ref(false)
|
||||
const tabStateForSync = ref<PersistableRESTTabState | null>(null)
|
||||
|
||||
function bindRequestToURLParams() {
|
||||
@@ -237,6 +226,29 @@ const onSaveModalClose = () => {
|
||||
}
|
||||
}
|
||||
|
||||
watch(confirmSync, (newValue) => {
|
||||
if (newValue) {
|
||||
toast.show(t("confirm.sync"), {
|
||||
duration: 0,
|
||||
action: [
|
||||
{
|
||||
text: `${t("action.yes")}`,
|
||||
onClick: (_, toastObject) => {
|
||||
syncTabState()
|
||||
toastObject.goAway(0)
|
||||
},
|
||||
},
|
||||
{
|
||||
text: `${t("action.no")}`,
|
||||
onClick: (_, toastObject) => {
|
||||
toastObject.goAway(0)
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const syncTabState = () => {
|
||||
if (tabStateForSync.value) loadTabsFromPersistedState(tabStateForSync.value)
|
||||
}
|
||||
@@ -275,35 +287,6 @@ function startTabStateSync(): Subscription {
|
||||
return sub
|
||||
}
|
||||
|
||||
const showSyncToast = () => {
|
||||
toast.show(t("confirm.sync"), {
|
||||
duration: 0,
|
||||
action: [
|
||||
{
|
||||
text: `${t("action.yes")}`,
|
||||
onClick: (_, toastObject) => {
|
||||
syncTabState()
|
||||
changeCurrentSyncStatus({
|
||||
isInitialSync: true,
|
||||
shouldSync: true,
|
||||
})
|
||||
toastObject.goAway(0)
|
||||
},
|
||||
},
|
||||
{
|
||||
text: `${t("action.no")}`,
|
||||
onClick: (_, toastObject) => {
|
||||
changeCurrentSyncStatus({
|
||||
isInitialSync: true,
|
||||
shouldSync: false,
|
||||
})
|
||||
toastObject.goAway(0)
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
|
||||
function setupTabStateSync() {
|
||||
const route = useRoute()
|
||||
|
||||
@@ -319,15 +302,9 @@ function setupTabStateSync() {
|
||||
const tabStateFromSync =
|
||||
await platform.sync.tabState.loadTabStateFromSync()
|
||||
|
||||
if (tabStateFromSync && !confirmSync.value.isInitialSync) {
|
||||
if (tabStateFromSync) {
|
||||
tabStateForSync.value = tabStateFromSync
|
||||
showSyncToast()
|
||||
// Have to set isInitialSync to true here because the toast is shown
|
||||
// and the user does not click on any of the actions
|
||||
changeCurrentSyncStatus({
|
||||
isInitialSync: true,
|
||||
shouldSync: false,
|
||||
})
|
||||
confirmSync.value = true
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -100,9 +100,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="hasActions" class="w-64">
|
||||
<slot name="actions" />
|
||||
</div>
|
||||
<slot name="actions" />
|
||||
|
||||
<input
|
||||
type="range"
|
||||
@@ -113,10 +111,10 @@
|
||||
:class="{
|
||||
'!block': scrollThumb.show,
|
||||
}"
|
||||
:style="[
|
||||
`--thumb-width: ${scrollThumb.width}px`,
|
||||
`width: calc(100% - ${hasActions ? '19rem' : '3rem'})`,
|
||||
]"
|
||||
:style="{
|
||||
'--thumb-width': scrollThumb.width + 'px',
|
||||
}"
|
||||
style="width: calc(100% - 3rem)"
|
||||
id="myRange"
|
||||
/>
|
||||
</div>
|
||||
@@ -142,7 +140,6 @@ import {
|
||||
inject,
|
||||
watch,
|
||||
nextTick,
|
||||
useSlots,
|
||||
} from "vue"
|
||||
import { useElementSize } from "@vueuse/core"
|
||||
import type { Slot } from "vue"
|
||||
@@ -194,12 +191,6 @@ const emit = defineEmits<{
|
||||
(e: "addTab"): void
|
||||
}>()
|
||||
|
||||
const slots = useSlots()
|
||||
|
||||
const hasActions = computed(() => {
|
||||
return !!slots.actions
|
||||
})
|
||||
|
||||
const throwError = (message: string): never => {
|
||||
throw new Error(message)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user