+
+
+
+
+
+
-
-
-
-
-
-
-
+ {
- environmentType.value.selectedTeam = newSelectedTeam
-}
-const updateEnvironmentType = (newEnvironmentType: EnvironmentType) => {
- environmentType.value.type = newEnvironmentType
-}
+// TeamList-Adapter
+const teamListAdapter = new TeamListAdapter(true)
+const myTeams = useReadonlyStream(teamListAdapter.teamList$, null)
+const teamListFetched = ref(false)
+const REMEMBERED_TEAM_ID = useLocalState("REMEMBERED_TEAM_ID")
const adapter = new TeamEnvironmentAdapter(undefined)
const adapterLoading = useReadonlyStream(adapter.loading$, false)
@@ -243,6 +242,45 @@ const loading = computed(
() => adapterLoading.value && teamEnvironmentList.value.length === 0
)
+watch(
+ () => myTeams.value,
+ (newTeams) => {
+ if (newTeams && !teamListFetched.value) {
+ teamListFetched.value = true
+ if (REMEMBERED_TEAM_ID.value && currentUser.value) {
+ const team = newTeams.find((t) => t.id === REMEMBERED_TEAM_ID.value)
+ if (team) updateSelectedTeam(team)
+ }
+ }
+ }
+)
+
+watch(
+ () => environmentType.value.selectedTeam,
+ (newTeam) => {
+ if (newTeam) {
+ adapter.changeTeamID(newTeam.id)
+ }
+ }
+)
+
+const switchToMyEnvironments = () => {
+ environmentType.value.selectedTeam = undefined
+ updateEnvironmentType("my-environments")
+ adapter.changeTeamID(undefined)
+}
+
+const updateSelectedTeam = (newSelectedTeam: SelectedTeam) => {
+ if (newSelectedTeam) {
+ environmentType.value.selectedTeam = newSelectedTeam
+ REMEMBERED_TEAM_ID.value = newSelectedTeam.id
+ updateEnvironmentType("team-environments")
+ }
+}
+const updateEnvironmentType = (newEnvironmentType: EnvironmentType) => {
+ environmentType.value.type = newEnvironmentType
+}
+
watch(
() => environmentType.value.selectedTeam?.id,
(newTeamID) => {
@@ -254,7 +292,30 @@ watch(
() => currentUser.value,
(newValue) => {
if (!newValue) {
- updateEnvironmentType("my-environments")
+ switchToMyEnvironments()
+ }
+ }
+)
+
+onLoggedIn(() => {
+ !teamListAdapter.isInitialized && teamListAdapter.initialize()
+})
+
+const workspace = useReadonlyStream(workspaceStatus$, { type: "personal" })
+
+// 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.value.teamID,
+ (teamID) => {
+ if (!teamID) {
+ switchToMyEnvironments()
+ } else if (teamID) {
+ const team = myTeams.value?.find((t) => t.id === teamID)
+ if (team) {
+ updateSelectedTeam(team)
+ }
}
}
)
diff --git a/packages/hoppscotch-common/src/components/environments/teams/index.vue b/packages/hoppscotch-common/src/components/environments/teams/index.vue
index 3e77f7218..3d281c408 100644
--- a/packages/hoppscotch-common/src/components/environments/teams/index.vue
+++ b/packages/hoppscotch-common/src/components/environments/teams/index.vue
@@ -94,7 +94,7 @@
v-if="!loading && adapterError"
class="flex flex-col items-center py-4"
>
- help_outline
+
-
+
+
+
+
diff --git a/packages/hoppscotch-common/src/components/app/Navigation.vue b/packages/hoppscotch-common/src/components/app/Navigation.vue
new file mode 100644
index 000000000..8eaae3a99
--- /dev/null
+++ b/packages/hoppscotch-common/src/components/app/Navigation.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/hoppscotch-common/src/components/collections/TeamCollections.vue b/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
index 984a5477f..2b694d7fe 100644
--- a/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
+++ b/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
@@ -4,8 +4,8 @@
class="sticky z-10 flex justify-between flex-1 border-b bg-primary border-dividerLight"
:style="
saveRequest
- ? 'top: calc(var(--upper-secondary-sticky-fold) - var(--line-height-body))'
- : 'top: var(--upper-secondary-sticky-fold)'
+ ? 'top: calc(var(--upper-primary-sticky-fold) - var(--line-height-body))'
+ : 'top: var(--upper-primary-sticky-fold)'
"
>
-
-
-
-
-
-
-
-
-
diff --git a/packages/hoppscotch-common/src/components/collections/index.vue b/packages/hoppscotch-common/src/components/collections/index.vue
index 02268b9dd..57d0144e6 100644
--- a/packages/hoppscotch-common/src/components/collections/index.vue
+++ b/packages/hoppscotch-common/src/components/collections/index.vue
@@ -10,11 +10,13 @@
@dragend="draggingToRoot = false"
>
-
-
-
-
-
-
-
- -
- ![]()
-
- {{ t("empty.teams") }}
-
-
-
+
-
-
-
diff --git a/packages/hoppscotch-common/src/components/environments/index.vue b/packages/hoppscotch-common/src/components/environments/index.vue
index 8afe7d2ee..f868390b5 100644
--- a/packages/hoppscotch-common/src/components/environments/index.vue
+++ b/packages/hoppscotch-common/src/components/environments/index.vue
@@ -1,8 +1,9 @@
@@ -156,11 +157,6 @@
class="border-b border-dividerLight"
@edit-environment="editEnvironment('Global')"
/>
-
+
- help_outline
+
-
+
-
+
-
- {{ t("action.filter") }}
+
+
-
-
-
-
+
+
-
+ {{ t("action.filter") }}
+
+ +
+ {{ t("action.group_by") }}
+
+ -
- {{ t("action.group_by") }}
-
-
diff --git a/packages/hoppscotch-common/src/components/http/CodegenModal.vue b/packages/hoppscotch-common/src/components/http/CodegenModal.vue
index 43f6afe58..d3186aabc 100644
--- a/packages/hoppscotch-common/src/components/http/CodegenModal.vue
+++ b/packages/hoppscotch-common/src/components/http/CodegenModal.vue
@@ -28,7 +28,7 @@
-
+
![]()
-
+
diff --git a/packages/hoppscotch-common/src/components/teams/Team.vue b/packages/hoppscotch-common/src/components/teams/Team.vue
index 3a0d6b5e0..990b04b25 100644
--- a/packages/hoppscotch-common/src/components/teams/Team.vue
+++ b/packages/hoppscotch-common/src/components/teams/Team.vue
@@ -27,31 +27,7 @@
>
{{ team.name || t("state.nothing_found") }}
-
-
+
-
-
@@ -171,7 +147,7 @@
import { ref } from "vue"
import { pipe } from "fp-ts/function"
import * as TE from "fp-ts/TaskEither"
-import { TeamMemberRole } from "~/helpers/backend/graphql"
+import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
import {
deleteTeam as backendDeleteTeam,
leaveTeam,
@@ -189,18 +165,7 @@ import IconTrash2 from "~icons/lucide/trash-2"
const t = useI18n()
const props = defineProps<{
- team: {
- name: string
- myRole: TeamMemberRole
- ownersCount: number
- teamMembers: Array<{
- user: {
- displayName: string
- photoURL: string | null
- email: string | null
- }
- }>
- }
+ team: GetMyTeamsQuery["myTeams"][number]
teamID: string
compact: boolean
}>()
diff --git a/packages/hoppscotch-common/src/components/workspace/Current.vue b/packages/hoppscotch-common/src/components/workspace/Current.vue
new file mode 100644
index 000000000..517143b8e
--- /dev/null
+++ b/packages/hoppscotch-common/src/components/workspace/Current.vue
@@ -0,0 +1,38 @@
+
+ | null>
loading$: BehaviorSubject
teamEnvironmentList$: BehaviorSubject
+ /**
+ * Stores the entity (environments) ids of all the loaded entities.
+ * Used for preventing duplication of data which definitely is not possible (duplication due to network problems etc.)
+ */
+ private entityIDs: Set
+
private isDispose: boolean
private teamEnvironmentCreated$: Subscription | null
@@ -32,6 +40,8 @@ export default class TeamEnvironmentAdapter {
this.teamEnvironmentList$ = new BehaviorSubject([])
this.isDispose = true
+ this.entityIDs = new Set()
+
this.teamEnvironmentCreated$ = null
this.teamEnvironmentDeleted$ = null
this.teamEnvironmentUpdated$ = null
@@ -56,6 +66,8 @@ export default class TeamEnvironmentAdapter {
this.teamEnvironmentList$.next([])
this.loading$.next(false)
+ this.entityIDs.clear()
+
this.unsubscribeSubscriptions()
if (this.teamID) this.initialize()
@@ -112,16 +124,25 @@ export default class TeamEnvironmentAdapter {
)
}
+ // Add all the environments to the entity ids list
+ results.forEach((env) => this.entityIDs.add(`environment-${env.id}`))
+
this.teamEnvironmentList$.next(results)
this.loading$.next(false)
}
private createNewTeamEnvironment(newEnvironment: TeamEnvironment) {
+ // Check if we have it already in the entity tree, if so, we don't need it again
+ if (this.entityIDs.has(`environment-${newEnvironment.id}`)) return
+
const teamEnvironments = this.teamEnvironmentList$.value
teamEnvironments.push(newEnvironment)
+ // Add to entity ids set
+ this.entityIDs.add(`environment-${newEnvironment.id}`)
+
this.teamEnvironmentList$.next(teamEnvironments)
}
@@ -129,7 +150,7 @@ export default class TeamEnvironmentAdapter {
const teamEnvironments = this.teamEnvironmentList$.value.filter(
({ id }) => id !== envId
)
-
+ this.entityIDs.delete(`environment-${envId}`)
this.teamEnvironmentList$.next(teamEnvironments)
}
diff --git a/packages/hoppscotch-common/src/helpers/teams/TeamListAdapter.ts b/packages/hoppscotch-common/src/helpers/teams/TeamListAdapter.ts
index 35ffb2a4b..9acdf4eda 100644
--- a/packages/hoppscotch-common/src/helpers/teams/TeamListAdapter.ts
+++ b/packages/hoppscotch-common/src/helpers/teams/TeamListAdapter.ts
@@ -15,6 +15,8 @@ export default class TeamListAdapter {
private timeoutHandle: ReturnType | null
private isDispose: boolean
+ public isInitialized: boolean
+
constructor(deferInit = false) {
this.error$ = new BehaviorSubject | null>(null)
this.loading$ = new BehaviorSubject(false)
@@ -22,6 +24,8 @@ export default class TeamListAdapter {
this.timeoutHandle = null
this.isDispose = false
+ this.isInitialized = false
+
if (!deferInit) this.initialize()
}
@@ -29,6 +33,8 @@ export default class TeamListAdapter {
if (this.timeoutHandle) throw new Error(`Adapter already initialized`)
if (this.isDispose) throw new Error(`Adapter has been disposed`)
+ this.isInitialized = true
+
const func = async () => {
await this.fetchList()
@@ -44,6 +50,7 @@ export default class TeamListAdapter {
this.isDispose = true
clearTimeout(this.timeoutHandle as any)
this.timeoutHandle = null
+ this.isInitialized = false
}
async fetchList() {
diff --git a/packages/hoppscotch-common/src/newstore/workspace.ts b/packages/hoppscotch-common/src/newstore/workspace.ts
new file mode 100644
index 000000000..944b3d843
--- /dev/null
+++ b/packages/hoppscotch-common/src/newstore/workspace.ts
@@ -0,0 +1,67 @@
+import { distinctUntilChanged, pluck } from "rxjs"
+import DispatchingStore, { defineDispatchers } from "./DispatchingStore"
+
+type Workspace =
+ | { type: "personal" }
+ | { type: "team"; teamID: string; teamName: string }
+
+type WorkspaceState = {
+ workspace: Workspace
+}
+
+const initialState: WorkspaceState = {
+ workspace: {
+ type: "personal",
+ },
+}
+
+const dispatchers = defineDispatchers({
+ changeWorkspace(_, { workspace }: { workspace: Workspace }) {
+ return {
+ workspace,
+ }
+ },
+ updateWorkspaceTeamName(
+ _,
+ { workspace, newTeamName }: { workspace: Workspace; newTeamName: string }
+ ) {
+ if (workspace.type === "team") {
+ return {
+ workspace: {
+ ...workspace,
+ teamName: newTeamName,
+ },
+ }
+ }
+ return {
+ workspace,
+ }
+ },
+})
+
+export const hoppWorkspaceStore = new DispatchingStore(
+ initialState,
+ dispatchers
+)
+
+export const workspaceStatus$ = hoppWorkspaceStore.subject$.pipe(
+ pluck("workspace"),
+ distinctUntilChanged()
+)
+
+export function changeWorkspace(workspace: Workspace) {
+ hoppWorkspaceStore.dispatch({
+ dispatcher: "changeWorkspace",
+ payload: { workspace },
+ })
+}
+
+export function updateWorkspaceTeamName(
+ workspace: Workspace,
+ newTeamName: string
+) {
+ hoppWorkspaceStore.dispatch({
+ dispatcher: "updateWorkspaceTeamName",
+ payload: { workspace, newTeamName },
+ })
+}
diff --git a/packages/hoppscotch-common/src/pages/join-team.vue b/packages/hoppscotch-common/src/pages/join-team.vue
index 7ff7ba577..0a5d3f48e 100644
--- a/packages/hoppscotch-common/src/pages/join-team.vue
+++ b/packages/hoppscotch-common/src/pages/join-team.vue
@@ -4,7 +4,7 @@
v-if="invalidLink"
class="flex flex-col items-center justify-center flex-1"
>
- error_outline
+
+
+ {{
+ workspace.type === "personal"
+ ? t("workspace.personal")
+ : teamWorkspaceName
+ }}
+
+
+
+
+
diff --git a/packages/hoppscotch-common/src/components/workspace/Selector.vue b/packages/hoppscotch-common/src/components/workspace/Selector.vue
new file mode 100644
index 000000000..733d4d49d
--- /dev/null
+++ b/packages/hoppscotch-common/src/components/workspace/Selector.vue
@@ -0,0 +1,164 @@
+
+
+
+
+
diff --git a/packages/hoppscotch-common/src/helpers/teams/TeamCollectionAdapter.ts b/packages/hoppscotch-common/src/helpers/teams/TeamCollectionAdapter.ts
index 8fa716f4b..ee9617d31 100644
--- a/packages/hoppscotch-common/src/helpers/teams/TeamCollectionAdapter.ts
+++ b/packages/hoppscotch-common/src/helpers/teams/TeamCollectionAdapter.ts
@@ -307,6 +307,9 @@ export default class NewTeamCollectionAdapter {
collection: TeamCollection,
parentCollectionID: string | null
) {
+ // Check if we have it already in the entity tree, if so, we don't need it again
+ if (this.entityIDs.has(`collection-${collection.id}`)) return
+
const tree = this.collections$.value
if (!parentCollectionID) {
diff --git a/packages/hoppscotch-common/src/helpers/teams/TeamEnvironmentAdapter.ts b/packages/hoppscotch-common/src/helpers/teams/TeamEnvironmentAdapter.ts
index 55ab6b57c..7ed676625 100644
--- a/packages/hoppscotch-common/src/helpers/teams/TeamEnvironmentAdapter.ts
+++ b/packages/hoppscotch-common/src/helpers/teams/TeamEnvironmentAdapter.ts
@@ -11,11 +11,19 @@ import {
} from "../backend/graphql"
import { TeamEnvironment } from "./TeamEnvironment"
+type EntityType = "environment"
+type EntityID = `${EntityType}-${string}`
export default class TeamEnvironmentAdapter {
error$: BehaviorSubject
+
+
+
+
+ +
+
+
+ ![]()
+
+ {{ t("empty.teams") }}
+
+
+
+
+
+
+
+ {{ t("team.title") }}
+
+
+ help_outline
+ {{ t("error.something_went_wrong") }}
+
+ {{ t("team.invalid_invite_link") }}
@@ -42,7 +42,7 @@ v-if="!inviteDetails.loading && E.isLeft(inviteDetails.data)" class="flex flex-col items-center p-4" > - error_outline +{{ getErrorMessage(inviteDetails.data.left) }}
diff --git a/packages/hoppscotch-common/src/pages/r/_id.vue b/packages/hoppscotch-common/src/pages/r/_id.vue index 89710cf9f..d1faa769f 100644 --- a/packages/hoppscotch-common/src/pages/r/_id.vue +++ b/packages/hoppscotch-common/src/pages/r/_id.vue @@ -4,7 +4,7 @@ v-if="invalidLink" class="flex flex-col items-center justify-center flex-1" > - error_outline +{{ t("error.invalid_link") }}
@@ -24,7 +24,7 @@ v-if="!shortcodeDetails.loading && E.isLeft(shortcodeDetails.data)" class="flex flex-col items-center p-4" > - error_outline +{{ t("error.invalid_link") }}
diff --git a/packages/hoppscotch-ui/src/components/button/Primary.vue b/packages/hoppscotch-ui/src/components/button/Primary.vue index 89656dace..f4513d7b7 100644 --- a/packages/hoppscotch-ui/src/components/button/Primary.vue +++ b/packages/hoppscotch-ui/src/components/button/Primary.vue @@ -19,14 +19,27 @@ 'border border-accent hover:border-accentDark focus-visible:border-accentDark': outline, }, - ]" :disabled="disabled" :tabindex="loading ? '-1' : '0'" role="button"> - -
+ {{ label }}
+
diff --git a/packages/hoppscotch-ui/src/components/button/Secondary.vue b/packages/hoppscotch-ui/src/components/button/Secondary.vue
index 5151424f2..9b3b0782e 100644
--- a/packages/hoppscotch-ui/src/components/button/Secondary.vue
+++ b/packages/hoppscotch-ui/src/components/button/Secondary.vue
@@ -19,14 +19,28 @@
'bg-primaryLight hover:bg-primaryDark focus-visible:bg-primaryDark':
filled,
},
- ]" :disabled="disabled" :tabindex="loading ? '-1' : '0'" role="button">
-
-
+ {{ label }}
+
{{ key }}
diff --git a/packages/hoppscotch-ui/src/components/smart/FileChip.vue b/packages/hoppscotch-ui/src/components/smart/FileChip.vue
index 34b508d8f..9ad855a6e 100644
--- a/packages/hoppscotch-ui/src/components/smart/FileChip.vue
+++ b/packages/hoppscotch-ui/src/components/smart/FileChip.vue
@@ -1,7 +1,7 @@
-
+
-
{{ label }}
{{ description }}
{{ key }}
diff --git a/packages/hoppscotch-ui/vite.config.ts b/packages/hoppscotch-ui/vite.config.ts
index cd5a15099..86ff5fb15 100644
--- a/packages/hoppscotch-ui/vite.config.ts
+++ b/packages/hoppscotch-ui/vite.config.ts
@@ -4,6 +4,7 @@ import path from "path"
import Icons from "unplugin-icons/vite"
import { defineConfig } from "vite"
import WindiCSS from "vite-plugin-windicss"
+import { VitePluginFonts } from "vite-plugin-fonts"
export default defineConfig({
plugins: [
@@ -19,6 +20,15 @@ export default defineConfig({
Icons({
compiler: "vue3"
}),
+ VitePluginFonts({
+ google: {
+ families: [
+ "Inter:wght@400;500;600;700;800",
+ "Roboto+Mono:wght@400;500",
+ "Material+Icons",
+ ],
+ },
+ }),
], // to process SFC
build: {
sourcemap: true,
diff --git a/packages/hoppscotch-ui/windi.config.ts b/packages/hoppscotch-ui/windi.config.ts
index 8e391aecb..34716006a 100644
--- a/packages/hoppscotch-ui/windi.config.ts
+++ b/packages/hoppscotch-ui/windi.config.ts
@@ -20,6 +20,7 @@ export default defineConfig({
lowerSecondaryStickyFold: "var(--lower-secondary-sticky-fold)",
lowerTertiaryStickyFold: "var(--lower-tertiary-sticky-fold)",
sidebarPrimaryStickyFold: "var(--sidebar-primary-sticky-fold)",
+ sidebarSecondaryStickyFold: "var(--line-height-body)",
},
colors: {
primary: "var(--primary-color)",