Skip to content

fix: workspace icon flash and credits showing 0 while workspace is in… #8323

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
simula-r merged 2 commits into from
Jan 27, 2026
Merged

fix: workspace icon flash and credits showing 0 while workspace is in… #8323

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eb311ae
fix: workspace icon flash and credits showing 0 while workspace is in…
simula-r Jan 26, 2026
ab91dda
fix: unit tests
simula-r Jan 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 18 additions & 1 deletion src/components/topbar/CurrentUserButton.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,24 @@ vi.mock('firebase/auth', () => ({
}))

// Mock pinia
vi.mock('pinia')
vi.mock('pinia', () => ({
storeToRefs: vi.fn((store) => store)
}))

// Mock the useFeatureFlags composable
vi.mock('@/composables/useFeatureFlags', () => ({
useFeatureFlags: vi.fn(() => ({
flags: { teamWorkspacesEnabled: false }
}))
}))

// Mock the useTeamWorkspaceStore
vi.mock('@/platform/workspace/stores/teamWorkspaceStore', () => ({
useTeamWorkspaceStore: vi.fn(() => ({
workspaceName: { value: '' },
initState: { value: 'idle' }
}))
}))
Comment on lines +28 to +45
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

Consider using vi.hoisted() to enable per-test mock state manipulation.

The current mocks are static, making it impossible to test the component's behavior with different states (e.g., initState: 'ready' vs 'idle', or teamWorkspacesEnabled: true vs false). Per the coding guidelines, use vi.hoisted() to allow per-test Arrange phase manipulation of mock state.

Additionally, the PR objectives mention fixing "flash of wrong workspace icon (replaced with loader)" and "credits showing 0" behavior tied to initState, but no tests verify this new loading/state-driven behavior.

♻️ Suggested refactor to enable per-test state control 
+const mockFeatureFlags = vi.hoisted(() => ({
+  teamWorkspacesEnabled: false
+}))
+
+const mockWorkspaceStore = vi.hoisted(() => ({
+  workspaceName: { value: '' },
+  initState: { value: 'idle' }
+}))
+
 // Mock pinia
 vi.mock('pinia', () => ({
   storeToRefs: vi.fn((store) => store)
 }))

 // Mock the useFeatureFlags composable
 vi.mock('@/composables/useFeatureFlags', () => ({
-  useFeatureFlags: vi.fn(() => ({
-    flags: { teamWorkspacesEnabled: false }
-  }))
+  useFeatureFlags: vi.fn(() => ({
+    flags: mockFeatureFlags
+  }))
 }))

 // Mock the useTeamWorkspaceStore
 vi.mock('@/platform/workspace/stores/teamWorkspaceStore', () => ({
-  useTeamWorkspaceStore: vi.fn(() => ({
-    workspaceName: { value: '' },
-    initState: { value: 'idle' }
-  }))
+  useTeamWorkspaceStore: vi.fn(() => mockWorkspaceStore)
 }))

Then add tests for the new behavior:

it('shows loading state when initState is not ready', () => {
  mockWorkspaceStore.initState.value = 'loading'
  const wrapper = mountComponent()
  // Assert Skeleton is rendered or workspace icon is hidden
})

it('shows workspace content when initState is ready', () => {
  mockWorkspaceStore.initState.value = 'ready'
  const wrapper = mountComponent()
  // Assert workspace avatar/icon is rendered
})

Based on learnings, vi.hoisted() should be used when necessary to allow per-test Arrange phase manipulation of deeper mock state.

🤖 Prompt for AI Agents 
In `@src/components/topbar/CurrentUserButton.test.ts` around lines 28 - 45, The
mocks for storeToRefs, useFeatureFlags, and useTeamWorkspaceStore are static and
must be converted to hoisted factories so tests can mutate their return values
per-test; replace the current vi.mock bodies with vi.hoisted() factories that
return mutable mock objects (e.g., an exported/mock variable for flags and
mockWorkspaceStore with workspaceName and initState refs) so individual tests
can set mockWorkspaceStore.initState.value and flags.teamWorkspacesEnabled
before mounting; update tests to mutate these shared mock objects in Arrange and
add assertions for loading vs ready states (checking Skeleton/loader vs
workspace avatar) using the same symbols: storeToRefs, useFeatureFlags, and
useTeamWorkspaceStore.


// Mock the useCurrentUser composable
vi.mock('@/composables/auth/useCurrentUser', () => ({
Expand Down
34 changes: 26 additions & 8 deletions src/components/topbar/CurrentUserButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,18 @@
:class="
cn(
'flex items-center gap-1 rounded-full hover:bg-interface-button-hover-surface justify-center',
compact && 'size-full aspect-square'
compact && 'size-full '
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

Nit: Trailing space in class string.

'size-full ' has a trailing space. While cn() handles this gracefully, it appears unintentional.

🧹 Remove trailing space 
-            compact && 'size-full '
+            compact && 'size-full'
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
compact && 'size-full '
compact && 'size-full'
🤖 Prompt for AI Agents 
In `@src/components/topbar/CurrentUserButton.vue` at line 15, The class string in
CurrentUserButton.vue contains an unintended trailing space ('size-full ');
update the template expression that builds classes (where compact is used and
cn(...) is called) to use 'size-full' without the trailing space so the class
string is clean—locate the occurrence of 'size-full ' in the component (around
the compact && 'size-full ' expression) and remove the extra space.

)
"
>
<Skeleton
v-if="showWorkspaceSkeleton"
shape="circle"
width="32px"
height="32px"
/>
<WorkspaceProfilePic
v-if="showWorkspaceIcon"
v-else-if="showWorkspaceIcon"
:workspace-name="workspaceName"
:class="compact && 'size-full'"
/>
Expand All @@ -40,20 +46,24 @@
}
}"
>
<!-- Workspace mode: workspace-aware popover -->
<!-- Workspace mode: workspace-aware popover (only when ready) -->
<CurrentUserPopoverWorkspace
v-if="teamWorkspacesEnabled"
v-if="teamWorkspacesEnabled && initState === 'ready'"
@close="closePopover"
/>
<!-- Legacy mode: original popover -->
<CurrentUserPopover v-else @close="closePopover" />
<CurrentUserPopover
v-else-if="!teamWorkspacesEnabled"
@close="closePopover"
/>
Comment on lines +49 to +58
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Empty popover state during workspace loading.

When teamWorkspacesEnabled is true but initState !== 'ready', neither popover component renders. If a user clicks the button during the loading state, the popover opens but appears empty.

Consider either:

  1. Disabling the button click during loading
  2. Showing a skeleton/loading state inside the popover
🔧 Option 1: Disable popover toggle during loading 
       <Button
         v-if="isLoggedIn"
         class="p-1 hover:bg-transparent"
         variant="muted-textonly"
         :aria-label="$t('g.currentUser')"
-        `@click`="popover?.toggle($event)"
+        `@click`="!showWorkspaceSkeleton && popover?.toggle($event)"
       >
🤖 Prompt for AI Agents 
In `@src/components/topbar/CurrentUserButton.vue` around lines 49 - 58, The
popover is empty when teamWorkspacesEnabled is true but initState !== 'ready';
update CurrentUserButton.vue to prevent opening an empty popover by guarding the
toggle/open logic: in the method that opens the popover (e.g., openPopover or
togglePopover) check if teamWorkspacesEnabled && initState !== 'ready' and
either return early (disable click) or instead set a loading flag that renders a
skeleton variant of CurrentUserPopoverWorkspace; alternatively add a v-if/v-else
to render a new LoadingPopover component (or pass a loading prop to
CurrentUserPopoverWorkspace) when teamWorkspacesEnabled is true and initState
!== 'ready' so users see a loading state instead of an empty popover.

</Popover>
</div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import Popover from 'primevue/popover'
import Skeleton from 'primevue/skeleton'
import { computed, defineAsyncComponent, ref } from 'vue'

import UserAvatar from '@/components/common/UserAvatar.vue'
Expand Down Expand Up @@ -85,12 +95,20 @@ const photoURL = computed<string | undefined>(
() => userPhotoUrl.value ?? undefined
)

const showWorkspaceIcon = computed(() => isCloud && teamWorkspacesEnabled.value)
const { workspaceName: teamWorkspaceName, initState } = storeToRefs(
useTeamWorkspaceStore()
)

const showWorkspaceSkeleton = computed(
() => isCloud && teamWorkspacesEnabled.value && initState.value === 'loading'
)
const showWorkspaceIcon = computed(
() => isCloud && teamWorkspacesEnabled.value && initState.value === 'ready'
)

const workspaceName = computed(() => {
if (!showWorkspaceIcon.value) return ''
const { workspaceName } = storeToRefs(useTeamWorkspaceStore())
return workspaceName.value
return teamWorkspaceName.value
})

const popover = ref<InstanceType<typeof Popover> | null>(null)
Expand Down
16 changes: 11 additions & 5 deletions src/components/topbar/CurrentUserPopoverWorkspace.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,6 +217,7 @@ import { useDialogService } from '@/services/dialogService'

const workspaceStore = useTeamWorkspaceStore()
const {
initState,
workspaceName,
isInPersonalWorkspace: isPersonalWorkspace,
isWorkspaceSubscribed
Expand All @@ -234,15 +235,20 @@ const { userDisplayName, userEmail, userPhotoUrl, handleSignOut } =
useCurrentUser()
const authActions = useFirebaseAuthActions()
const dialogService = useDialogService()
const { isActiveSubscription } = useSubscription()
const { isActiveSubscription, subscriptionStatus } = useSubscription()
const { totalCredits, isLoadingBalance } = useSubscriptionCredits()
const subscriptionDialog = useSubscriptionDialog()

const displayedCredits = computed(() => {
const isSubscribed = isPersonalWorkspace.value
? isActiveSubscription.value
: isWorkspaceSubscribed.value
return isSubscribed ? totalCredits.value : '0'
if (initState.value !== 'ready') return ''
// Only personal workspaces have subscription status from useSubscription()
// Team workspaces don't have backend subscription data yet
if (isPersonalWorkspace.value) {
// Wait for subscription status to load
if (subscriptionStatus.value === null) return ''
return isActiveSubscription.value ? totalCredits.value : '0'
}
return '0'
})

const canUpgrade = computed(() => {
Expand Down