[PR #5890] [MERGED] feat(common): add foundational support for dropdown-based organization switcher #5396

New issue

Closed

opened 2026-03-17 02:50:57 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 02:50:57 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/5890
Author: @jamesgeorge007
Created: 2/19/2026
Status: ✅ Merged
Merged: 2/23/2026
Merged by: @jamesgeorge007

Base: next ← Head: feat/org-switcher-dropdown-support

📝 Commits (1)

0a91f4d feat(common): add foundational support for dropdown-based organization switcher

📊 Changes

5 files changed (+52 additions, -44 deletions)

View changed files

📝 packages/hoppscotch-common/locales/en.json (+2 -3)
📝 packages/hoppscotch-common/src/components/app/Header.vue (+46 -0)
📝 packages/hoppscotch-common/src/components/workspace/Selector.vue (+0 -14)
📝 packages/hoppscotch-common/src/layouts/default.vue (+0 -18)
📝 packages/hoppscotch-common/src/platform/organization.ts (+4 -9)

📄 Description

Related to FE-1125.

Currently, Cloud for Orgs instances hosted at subdomain.hoppscotch.io display an organization membership switcher in the left sidebar (#5708), allowing users to switch between organisations with ease. However, this switcher is not available on hoppscotch.io, which will be addressed with the proposed update.

This PR relocates the organization switcher from the left sidebar to a header dropdown (using a Tippy popover), aligning it with the established Desktop App pattern for switching between SH instances. It also enables platforms to inject a custom switcher component via customOrganizationSwitcherComponent.

What's changed

Add organization switcher Tippy dropdown in Header.vue with three-state logic: instance switcher (Desktop) → org switcher (Cloud) → plain link (fallback).
Gate the org switcher dropdown on customOrganizationSwitcherComponent presence alone — consistent with how other optional platform UI components are handled (no separate boolean flag needed).
Apply scrollbar-gutter: stable on the popover to prevent content width shift when the list overflows.
Remove the old sidebar-based organization panel from default.vue layout.
Rename customOrganizationSidebarComponent → customOrganizationSwitcherComponent in OrganizationPlatformDef.
Remove "Create an organization" CTA from Selector.vue (now handled within the org switcher).
Clean up unused i18n keys (instances, no_orgs_title, no_orgs_description).

Notes to reviewers

scrollbar-gutter: stable is applied imperatively via Tippy's onCreate callback since the popover theme styles live in a global CSS layer.
The org switcher is shown when platform.organization.customOrganizationSwitcherComponent is provided, and no additional boolean flag is required. This follows the same pattern as other injectable platform components in UIPlatformDef.

Summary by cubic

Moves organization switching from the sidebar to a header dropdown and adds a platform-injectable custom switcher component. Enables org switching on hoppscotch.io and aligns with the Desktop pattern (Linear FE-1125).

New Features
- Header dropdown with three states: Desktop instance switcher → Cloud org switcher → fallback link.
- Supports platform.organization.customOrganizationSwitcherComponent (emits "close-dropdown"); popover width stays stable via scrollbar gutter.
- Removed the old sidebar-based organization panel.
- i18n updates: add "no_orgs_found" and "organizations_for"; remove unused keys.
Migration
- Remove OrganizationPlatformDef.organizationSwitchingEnabled; the dropdown shows when customOrganizationSwitcherComponent is provided.
- Rename OrganizationPlatformDef.customOrganizationSidebarComponent to customOrganizationSwitcherComponent.
- Ensure the injected component emits "close-dropdown" to close the popover.
- "Create an organization" CTA moved out of workspace Selector; handle it within the switcher component if needed.

^{Written for commit 0a91f4d10f. Summary will update on new commits.}

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/5890 **Author:** [@jamesgeorge007](https://github.com/jamesgeorge007) **Created:** 2/19/2026 **Status:** ✅ Merged **Merged:** 2/23/2026 **Merged by:** [@jamesgeorge007](https://github.com/jamesgeorge007) **Base:** `next` ← **Head:** `feat/org-switcher-dropdown-support` --- ### 📝 Commits (1) - [`0a91f4d`](https://github.com/hoppscotch/hoppscotch/commit/0a91f4d10ffef9765c9a9e5e5a313ceac91ba9f3) feat(common): add foundational support for dropdown-based organization switcher ### 📊 Changes **5 files changed** (+52 additions, -44 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/locales/en.json` (+2 -3) 📝 `packages/hoppscotch-common/src/components/app/Header.vue` (+46 -0) 📝 `packages/hoppscotch-common/src/components/workspace/Selector.vue` (+0 -14) 📝 `packages/hoppscotch-common/src/layouts/default.vue` (+0 -18) 📝 `packages/hoppscotch-common/src/platform/organization.ts` (+4 -9) </details> ### 📄 Description Related to FE-1125. Currently, Cloud for Orgs instances hosted at `subdomain.hoppscotch.io` display an organization membership switcher in the left sidebar (#5708), allowing users to switch between organisations with ease. However, this switcher is not available on `hoppscotch.io`, which will be addressed with the proposed update. This PR relocates the organization switcher from the left sidebar to a header dropdown (using a Tippy popover), aligning it with the established Desktop App pattern for switching between SH instances. It also enables platforms to inject a custom switcher component via customOrganizationSwitcherComponent. ### What's changed - Add organization switcher Tippy dropdown in `Header.vue` with three-state logic: instance switcher (Desktop) → org switcher (Cloud) → plain link (fallback). - Gate the org switcher dropdown on customOrganizationSwitcherComponent presence alone — consistent with how other optional platform UI components are handled (no separate boolean flag needed). - Apply `scrollbar-gutter: stable` on the popover to prevent content width shift when the list overflows. - Remove the old sidebar-based organization panel from `default.vue` layout. - Rename `customOrganizationSidebarComponent` → `customOrganizationSwitcherComponent` in `OrganizationPlatformDef`. - Remove "Create an organization" CTA from `Selector.vue` (now handled within the org switcher). - Clean up unused i18n keys (`instances`, `no_orgs_title`, `no_orgs_description`). ### Notes to reviewers - `scrollbar-gutter: stable` is applied imperatively via Tippy's `onCreate` callback since the popover theme styles live in a global CSS layer. - The org switcher is shown when `platform.organization.customOrganizationSwitcherComponent` is provided, and no additional boolean flag is required. This follows the same pattern as other injectable platform components in `UIPlatformDef`.  --- ## Summary by cubic Moves organization switching from the sidebar to a header dropdown and adds a platform-injectable custom switcher component. Enables org switching on hoppscotch.io and aligns with the Desktop pattern (Linear FE-1125). - **New Features** - Header dropdown with three states: Desktop instance switcher → Cloud org switcher → fallback link. - Supports platform.organization.customOrganizationSwitcherComponent (emits "close-dropdown"); popover width stays stable via scrollbar gutter. - Removed the old sidebar-based organization panel. - i18n updates: add "no_orgs_found" and "organizations_for"; remove unused keys. - **Migration** - Remove OrganizationPlatformDef.organizationSwitchingEnabled; the dropdown shows when customOrganizationSwitcherComponent is provided. - Rename OrganizationPlatformDef.customOrganizationSidebarComponent to customOrganizationSwitcherComponent. - Ensure the injected component emits "close-dropdown" to close the popover. - "Create an organization" CTA moved out of workspace Selector; handle it within the switcher component if needed. <sup>Written for commit 0a91f4d10ffef9765c9a9e5e5a313ceac91ba9f3. Summary will update on new commits.</sup>  --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>