Persist and restore selected project and environment across page reloads
- Add refreshOrganization/refreshProject/refreshEnvironment to context store — update value and localStorage without clearing child selections - OrgSelector: use refreshOrganization when same org is already stored, preventing the chain that was clearing project and environment - ProjectSelector: watch org ID (not object ref) so refresh doesn't retrigger; add autoSelectProject to restore stored project or auto-select single project - EnvironmentTabBar: watch project ID; skip env-clear on initial mount; add autoSelectEnvironment to restore stored env or fall back to first - Fix test fixtures missing isPrimary field; update EnvironmentTabBar tests to match v-select implementation; add tests for restore behavior Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -29,7 +29,7 @@
|
||||
</v-tabs>
|
||||
<v-divider />
|
||||
|
||||
<v-card-text class="pa-0" style="height: 480px; overflow-y: auto;">
|
||||
<v-card-text class="pa-0" style="height: 580px; overflow-y: auto;">
|
||||
<v-tabs-window v-model="activeTab">
|
||||
<!-- ── Value tab ─────────────────────────────────────────────── -->
|
||||
<v-tabs-window-item value="value" class="pa-6">
|
||||
|
||||
@@ -33,6 +33,7 @@
|
||||
<v-form ref="createFormRef" @submit.prevent="onCreateTag">
|
||||
<div class="d-flex align-center ga-2">
|
||||
<v-text-field
|
||||
ref="tagLabelInputRef"
|
||||
v-model="newTagLabel"
|
||||
label="Tag name"
|
||||
variant="outlined"
|
||||
@@ -47,6 +48,7 @@
|
||||
style="width:36px;height:36px;border:none;padding:2px;cursor:pointer;border-radius:4px"
|
||||
title="Tag colour"
|
||||
data-testid="new-tag-color-input"
|
||||
@blur="focusTagLabel"
|
||||
/>
|
||||
<v-btn
|
||||
icon="ri-check-line"
|
||||
@@ -99,7 +101,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ref, onMounted, watch, nextTick } from 'vue';
|
||||
import { listTags, createTag, deleteTag } from '@/api/tags';
|
||||
import { useContextStore } from '@/stores/context';
|
||||
import type { TagResponse } from '@/types/api';
|
||||
@@ -114,6 +116,15 @@ const newTagLabel = ref('');
|
||||
const newTagColor = ref('#1565C0');
|
||||
const errorMessage = ref<string | null>(null);
|
||||
const createFormRef = ref<{ validate: () => Promise<{ valid: boolean }> } | null>(null);
|
||||
const tagLabelInputRef = ref<{ focus: () => void } | null>(null);
|
||||
|
||||
function focusTagLabel(): void {
|
||||
nextTick(() => tagLabelInputRef.value?.focus());
|
||||
}
|
||||
|
||||
watch(showCreateForm, (open) => {
|
||||
if (open) focusTagLabel();
|
||||
});
|
||||
|
||||
const rules = {
|
||||
required: (v: string) => !!v || 'Tag name is required',
|
||||
|
||||
@@ -86,14 +86,25 @@ async function fetchEnvironments(projectId: number): Promise<void> {
|
||||
isLoading.value = true;
|
||||
try {
|
||||
environments.value = await listEnvironments(projectId);
|
||||
if (environments.value.length > 0 && !contextStore.currentEnvironment) {
|
||||
contextStore.setEnvironment(environments.value[0]);
|
||||
}
|
||||
autoSelectEnvironment();
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function autoSelectEnvironment(): void {
|
||||
if (contextStore.currentEnvironment) {
|
||||
const fresh = environments.value.find(e => e.id === contextStore.currentEnvironment!.id);
|
||||
if (fresh) {
|
||||
contextStore.refreshEnvironment(fresh);
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (environments.value.length > 0) {
|
||||
contextStore.setEnvironment(environments.value[0]);
|
||||
}
|
||||
}
|
||||
|
||||
function onEnvironmentSelected(env: EnvironmentResponse | null): void {
|
||||
if (env) contextStore.setEnvironment(env);
|
||||
}
|
||||
@@ -127,11 +138,12 @@ async function onCreateConfirm(): Promise<void> {
|
||||
}
|
||||
|
||||
watch(
|
||||
() => contextStore.currentProject,
|
||||
(project) => {
|
||||
() => contextStore.currentProject?.id,
|
||||
(projectId, oldProjectId) => {
|
||||
if (projectId === oldProjectId) return;
|
||||
environments.value = [];
|
||||
contextStore.setEnvironment(null);
|
||||
if (project) fetchEnvironments(project.id);
|
||||
if (oldProjectId !== undefined) contextStore.setEnvironment(null);
|
||||
if (projectId) fetchEnvironments(projectId);
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
@@ -96,7 +96,7 @@ function autoSelectOrganization(): void {
|
||||
if (contextStore.currentOrganization) {
|
||||
// Refresh stored org with latest data from API (name may have changed)
|
||||
const fresh = organizations.value.find(o => o.id === contextStore.currentOrganization!.id);
|
||||
if (fresh) contextStore.setOrganization(fresh);
|
||||
if (fresh) contextStore.refreshOrganization(fresh);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -86,11 +86,27 @@ async function fetchProjects(organizationId: number): Promise<void> {
|
||||
isLoading.value = true;
|
||||
try {
|
||||
projects.value = await listProjects(organizationId);
|
||||
autoSelectProject();
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function autoSelectProject(): void {
|
||||
if (contextStore.currentProject) {
|
||||
const fresh = projects.value.find(p => p.id === contextStore.currentProject!.id);
|
||||
if (fresh) {
|
||||
contextStore.refreshProject(fresh);
|
||||
return;
|
||||
}
|
||||
contextStore.setProject(null);
|
||||
return;
|
||||
}
|
||||
if (projects.value.length === 1) {
|
||||
contextStore.setProject(projects.value[0]);
|
||||
}
|
||||
}
|
||||
|
||||
function onProjectSelected(project: ProjectResponse | null): void {
|
||||
contextStore.setProject(project);
|
||||
}
|
||||
@@ -124,12 +140,11 @@ async function onCreateConfirm(): Promise<void> {
|
||||
}
|
||||
|
||||
watch(
|
||||
() => contextStore.currentOrganization,
|
||||
(org) => {
|
||||
() => contextStore.currentOrganization?.id,
|
||||
(orgId, oldOrgId) => {
|
||||
if (orgId === oldOrgId) return;
|
||||
projects.value = [];
|
||||
if (org) {
|
||||
fetchProjects(org.id);
|
||||
}
|
||||
if (orgId) fetchProjects(orgId);
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
@@ -46,6 +46,21 @@ export const useContextStore = defineStore('context', () => {
|
||||
}
|
||||
}
|
||||
|
||||
function refreshOrganization(org: OrganizationResponse): void {
|
||||
currentOrganization.value = org;
|
||||
localStorage.setItem(STORAGE_KEYS.organization, JSON.stringify(org));
|
||||
}
|
||||
|
||||
function refreshProject(project: ProjectResponse): void {
|
||||
currentProject.value = project;
|
||||
localStorage.setItem(STORAGE_KEYS.project, JSON.stringify(project));
|
||||
}
|
||||
|
||||
function refreshEnvironment(environment: EnvironmentResponse): void {
|
||||
currentEnvironment.value = environment;
|
||||
localStorage.setItem(STORAGE_KEYS.environment, JSON.stringify(environment));
|
||||
}
|
||||
|
||||
function loadFromStorage(): void {
|
||||
try {
|
||||
const orgRaw = localStorage.getItem(STORAGE_KEYS.organization);
|
||||
@@ -79,6 +94,9 @@ export const useContextStore = defineStore('context', () => {
|
||||
setOrganization,
|
||||
setProject,
|
||||
setEnvironment,
|
||||
refreshOrganization,
|
||||
refreshProject,
|
||||
refreshEnvironment,
|
||||
loadFromStorage,
|
||||
clearContext,
|
||||
};
|
||||
|
||||
@@ -56,13 +56,6 @@ describe('EnvironmentTabBar', () => {
|
||||
expect(envApi.listEnvironments).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('ThenNoProjectMessageIsShown', async () => {
|
||||
const wrapper = mountComponent();
|
||||
await flushPromises();
|
||||
|
||||
expect(wrapper.find('[data-testid="env-no-project-message"]').exists()).toBe(true);
|
||||
});
|
||||
|
||||
it('ThenCreateEnvironmentButtonIsDisabled', async () => {
|
||||
const wrapper = mountComponent();
|
||||
await flushPromises();
|
||||
@@ -84,7 +77,7 @@ describe('EnvironmentTabBar', () => {
|
||||
expect(envApi.listEnvironments).toHaveBeenCalledWith(mockProject.id);
|
||||
});
|
||||
|
||||
it('ThenEnvironmentChipsAreRendered', async () => {
|
||||
it('ThenEnvironmentSelectIsEnabled', async () => {
|
||||
jest.mocked(envApi.listEnvironments).mockResolvedValue(mockEnvironments);
|
||||
|
||||
const contextStore = useContextStore();
|
||||
@@ -93,8 +86,7 @@ describe('EnvironmentTabBar', () => {
|
||||
contextStore.setProject(mockProject);
|
||||
await flushPromises();
|
||||
|
||||
expect(wrapper.find('[data-testid="env-chip-development"]').exists()).toBe(true);
|
||||
expect(wrapper.find('[data-testid="env-chip-production"]').exists()).toBe(true);
|
||||
expect(wrapper.find('[data-testid="env-select"]').attributes('disabled')).toBeUndefined();
|
||||
});
|
||||
|
||||
it('ThenFirstEnvironmentIsAutoSelected', async () => {
|
||||
@@ -122,7 +114,7 @@ describe('EnvironmentTabBar', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('WhenEnvironmentChipIsClicked', () => {
|
||||
describe('WhenEnvironmentIsSelected', () => {
|
||||
it('ThenContextStoreIsUpdatedWithSelectedEnvironment', async () => {
|
||||
jest.mocked(envApi.listEnvironments).mockResolvedValue(mockEnvironments);
|
||||
|
||||
@@ -132,7 +124,7 @@ describe('EnvironmentTabBar', () => {
|
||||
contextStore.setProject(mockProject);
|
||||
await flushPromises();
|
||||
|
||||
await wrapper.findComponent({ name: 'VChipGroup' }).vm.$emit('update:modelValue', 1);
|
||||
await wrapper.findComponent({ name: 'VSelect' }).vm.$emit('update:modelValue', mockEnvironments[1]);
|
||||
|
||||
expect(contextStore.currentEnvironment).toEqual(mockEnvironments[1]);
|
||||
});
|
||||
@@ -158,16 +150,49 @@ describe('EnvironmentTabBar', () => {
|
||||
});
|
||||
|
||||
describe('WhenApiReturnsNoEnvironments', () => {
|
||||
it('ThenEmptyMessageIsDisplayed', async () => {
|
||||
it('ThenNoEnvironmentIsAutoSelected', async () => {
|
||||
jest.mocked(envApi.listEnvironments).mockResolvedValue([]);
|
||||
|
||||
const contextStore = useContextStore();
|
||||
const wrapper = mountComponent();
|
||||
mountComponent();
|
||||
|
||||
contextStore.setProject(mockProject);
|
||||
await flushPromises();
|
||||
|
||||
expect(wrapper.find('[data-testid="env-empty-message"]').exists()).toBe(true);
|
||||
expect(contextStore.currentEnvironment).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('WhenStoredEnvironmentExistsInContextStore', () => {
|
||||
it('ThenStoredEnvironmentIsRestoredAfterFetch', async () => {
|
||||
jest.mocked(envApi.listEnvironments).mockResolvedValue(mockEnvironments);
|
||||
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setProject(mockProject);
|
||||
contextStore.setEnvironment(mockEnvironments[1]);
|
||||
|
||||
mountComponent();
|
||||
await flushPromises();
|
||||
|
||||
expect(contextStore.currentEnvironment).toEqual(mockEnvironments[1]);
|
||||
});
|
||||
|
||||
it('ThenEnvironmentIsClearedWhenProjectChanges', async () => {
|
||||
jest.mocked(envApi.listEnvironments).mockResolvedValue(mockEnvironments);
|
||||
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setProject(mockProject);
|
||||
contextStore.setEnvironment(mockEnvironments[0]);
|
||||
|
||||
mountComponent();
|
||||
await flushPromises();
|
||||
|
||||
const newProject: ProjectResponse = { ...mockProject, id: 20, name: 'Mobile' };
|
||||
jest.mocked(envApi.listEnvironments).mockResolvedValue([]);
|
||||
contextStore.setProject(newProject);
|
||||
await flushPromises();
|
||||
|
||||
expect(contextStore.currentEnvironment).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -18,8 +18,8 @@ import * as orgsApi from '@/api/organizations';
|
||||
const dialogStub = { template: '<div><slot /></div>' };
|
||||
|
||||
const mockOrgs: OrganizationResponse[] = [
|
||||
{ id: 1, name: 'Acme Corp', createdAt: '2026-01-01T00:00:00Z' },
|
||||
{ id: 2, name: 'Globex', createdAt: '2026-01-01T00:00:00Z' },
|
||||
{ id: 1, name: 'Acme Corp', createdAt: '2026-01-01T00:00:00Z', isPrimary: false },
|
||||
{ id: 2, name: 'Globex', createdAt: '2026-01-01T00:00:00Z', isPrimary: false },
|
||||
];
|
||||
|
||||
function mountComponent() {
|
||||
@@ -132,7 +132,7 @@ describe('OrgSelector', () => {
|
||||
});
|
||||
|
||||
describe('WhenCreateOrganizationIsConfirmed', () => {
|
||||
const newOrg: OrganizationResponse = { id: 3, name: 'New Org', createdAt: '2026-04-13T00:00:00Z' };
|
||||
const newOrg: OrganizationResponse = { id: 3, name: 'New Org', createdAt: '2026-04-13T00:00:00Z', isPrimary: false };
|
||||
|
||||
it('ThenCreateOrganizationApiIsCalled', async () => {
|
||||
jest.mocked(orgsApi.listOrganizations).mockResolvedValue([]);
|
||||
|
||||
@@ -17,7 +17,7 @@ import * as projectsApi from '@/api/projects';
|
||||
|
||||
const dialogStub = { template: '<div><slot /></div>' };
|
||||
|
||||
const mockOrg: OrganizationResponse = { id: 1, name: 'Acme', createdAt: '2026-01-01T00:00:00Z' };
|
||||
const mockOrg: OrganizationResponse = { id: 1, name: 'Acme', createdAt: '2026-01-01T00:00:00Z', isPrimary: false };
|
||||
const mockProjects: ProjectResponse[] = [
|
||||
{ id: 10, name: 'Website', organizationId: 1, hideDisabledFlags: false, createdAt: '2026-01-01T00:00:00Z' },
|
||||
{ id: 11, name: 'Mobile App', organizationId: 1, hideDisabledFlags: false, createdAt: '2026-01-01T00:00:00Z' },
|
||||
@@ -104,6 +104,54 @@ describe('ProjectSelector', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('WhenStoredProjectExistsInContextStore', () => {
|
||||
it('ThenStoredProjectIsRestoredAfterFetch', async () => {
|
||||
jest.mocked(projectsApi.listProjects).mockResolvedValue(mockProjects);
|
||||
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setOrganization(mockOrg);
|
||||
contextStore.setProject(mockProjects[1]);
|
||||
|
||||
mountComponent();
|
||||
await flushPromises();
|
||||
|
||||
expect(contextStore.currentProject).toEqual(mockProjects[1]);
|
||||
});
|
||||
|
||||
it('ThenProjectIsClearedWhenNotFoundInNewOrg', async () => {
|
||||
jest.mocked(projectsApi.listProjects).mockResolvedValue(mockProjects);
|
||||
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setOrganization(mockOrg);
|
||||
contextStore.setProject(mockProjects[0]);
|
||||
|
||||
mountComponent();
|
||||
await flushPromises();
|
||||
|
||||
const newOrg: OrganizationResponse = { id: 2, name: 'Globex', createdAt: '2026-01-01T00:00:00Z', isPrimary: false };
|
||||
jest.mocked(projectsApi.listProjects).mockResolvedValue([]);
|
||||
contextStore.setOrganization(newOrg);
|
||||
await flushPromises();
|
||||
|
||||
expect(contextStore.currentProject).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('WhenSingleProjectIsAvailable', () => {
|
||||
it('ThenItIsAutoSelected', async () => {
|
||||
const singleProject = mockProjects[0];
|
||||
jest.mocked(projectsApi.listProjects).mockResolvedValue([singleProject]);
|
||||
|
||||
const contextStore = useContextStore();
|
||||
mountComponent();
|
||||
|
||||
contextStore.setOrganization(mockOrg);
|
||||
await flushPromises();
|
||||
|
||||
expect(contextStore.currentProject).toEqual(singleProject);
|
||||
});
|
||||
});
|
||||
|
||||
describe('WhenOrganizationChanges', () => {
|
||||
it('ThenProjectsAreReloaded', async () => {
|
||||
jest.mocked(projectsApi.listProjects).mockResolvedValue(mockProjects);
|
||||
@@ -114,7 +162,7 @@ describe('ProjectSelector', () => {
|
||||
contextStore.setOrganization(mockOrg);
|
||||
await flushPromises();
|
||||
|
||||
const newOrg: OrganizationResponse = { id: 2, name: 'Globex', createdAt: '2026-01-01T00:00:00Z' };
|
||||
const newOrg: OrganizationResponse = { id: 2, name: 'Globex', createdAt: '2026-01-01T00:00:00Z', isPrimary: false };
|
||||
contextStore.setOrganization(newOrg);
|
||||
await flushPromises();
|
||||
|
||||
|
||||
@@ -46,7 +46,7 @@ describe('FeatureDetail', () => {
|
||||
setActivePinia(createPinia());
|
||||
jest.clearAllMocks();
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '' });
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '', isPrimary: false });
|
||||
contextStore.setProject(mockProject);
|
||||
contextStore.setEnvironment({ id: 100, name: 'Development', apiKey: 'env-dev', projectId: 10, createdAt: '' });
|
||||
});
|
||||
|
||||
@@ -39,7 +39,7 @@ describe('FeatureDialog', () => {
|
||||
setActivePinia(createPinia());
|
||||
jest.clearAllMocks();
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '' });
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '', isPrimary: false });
|
||||
contextStore.setProject(mockProject);
|
||||
});
|
||||
|
||||
|
||||
@@ -33,7 +33,7 @@ describe('TagsChipInput', () => {
|
||||
setActivePinia(createPinia());
|
||||
jest.clearAllMocks();
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '' });
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '', isPrimary: false });
|
||||
contextStore.setProject(mockProject);
|
||||
});
|
||||
|
||||
|
||||
@@ -60,7 +60,7 @@ describe('IdentityDetail', () => {
|
||||
setActivePinia(createPinia());
|
||||
jest.clearAllMocks();
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '' });
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '', isPrimary: false });
|
||||
contextStore.setProject(mockProject);
|
||||
contextStore.setEnvironment(mockEnv);
|
||||
|
||||
|
||||
@@ -42,7 +42,7 @@ describe('SegmentEditor', () => {
|
||||
setActivePinia(createPinia());
|
||||
jest.clearAllMocks();
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '' });
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '', isPrimary: false });
|
||||
contextStore.setProject(mockProject);
|
||||
});
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@ import { setActivePinia, createPinia } from 'pinia';
|
||||
import { useContextStore } from '@/stores/context';
|
||||
import type { OrganizationResponse, ProjectResponse, EnvironmentResponse } from '@/types/api';
|
||||
|
||||
const mockOrg: OrganizationResponse = { id: 1, name: 'Acme', createdAt: '2026-01-01T00:00:00Z' };
|
||||
const mockOrg: OrganizationResponse = { id: 1, name: 'Acme', createdAt: '2026-01-01T00:00:00Z', isPrimary: false };
|
||||
const mockProject: ProjectResponse = {
|
||||
id: 10,
|
||||
name: 'Website',
|
||||
@@ -119,6 +119,57 @@ describe('useContextStore', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('WhenRefreshOrganizationIsCalled', () => {
|
||||
it('ThenOrgIsUpdatedWithoutClearingProjectOrEnvironment', () => {
|
||||
const store = useContextStore();
|
||||
store.setOrganization(mockOrg);
|
||||
store.setProject(mockProject);
|
||||
store.setEnvironment(mockEnv);
|
||||
|
||||
const updatedOrg = { ...mockOrg, name: 'Acme Updated' };
|
||||
store.refreshOrganization(updatedOrg);
|
||||
|
||||
expect(store.currentOrganization).toEqual(updatedOrg);
|
||||
expect(store.currentProject).toEqual(mockProject);
|
||||
expect(store.currentEnvironment).toEqual(mockEnv);
|
||||
});
|
||||
|
||||
it('ThenOrgIsPersistedToLocalStorage', () => {
|
||||
const store = useContextStore();
|
||||
const updatedOrg = { ...mockOrg, name: 'Acme Updated' };
|
||||
store.refreshOrganization(updatedOrg);
|
||||
|
||||
const stored = JSON.parse(localStorage.getItem('mic_ctx_organization')!);
|
||||
expect(stored).toEqual(updatedOrg);
|
||||
});
|
||||
});
|
||||
|
||||
describe('WhenRefreshProjectIsCalled', () => {
|
||||
it('ThenProjectIsUpdatedWithoutClearingEnvironment', () => {
|
||||
const store = useContextStore();
|
||||
store.setProject(mockProject);
|
||||
store.setEnvironment(mockEnv);
|
||||
|
||||
const updatedProject = { ...mockProject, name: 'Website Updated' };
|
||||
store.refreshProject(updatedProject);
|
||||
|
||||
expect(store.currentProject).toEqual(updatedProject);
|
||||
expect(store.currentEnvironment).toEqual(mockEnv);
|
||||
});
|
||||
});
|
||||
|
||||
describe('WhenRefreshEnvironmentIsCalled', () => {
|
||||
it('ThenEnvironmentIsUpdatedAndPersisted', () => {
|
||||
const store = useContextStore();
|
||||
const updatedEnv = { ...mockEnv, name: 'Production Updated' };
|
||||
store.refreshEnvironment(updatedEnv);
|
||||
|
||||
expect(store.currentEnvironment).toEqual(updatedEnv);
|
||||
const stored = JSON.parse(localStorage.getItem('mic_ctx_environment')!);
|
||||
expect(stored).toEqual(updatedEnv);
|
||||
});
|
||||
});
|
||||
|
||||
describe('WhenClearContextIsCalled', () => {
|
||||
it('ThenAllContextIsRemovedFromStateAndStorage', () => {
|
||||
const store = useContextStore();
|
||||
|
||||
@@ -23,12 +23,12 @@ const mockLogs: AuditLogResponse[] = [
|
||||
{
|
||||
id: 1, resourceType: 'Feature', resourceId: '42', action: 'Created',
|
||||
changes: null, organizationId: 1, projectId: 10, environmentId: null,
|
||||
actorUserId: 5, createdAt: '2026-01-10T10:00:00Z',
|
||||
actorUserId: 5, actorUserName: 'Alice', createdAt: '2026-01-10T10:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 2, resourceType: 'FeatureState', resourceId: '99', action: 'Updated',
|
||||
changes: '{"enabled":true}', organizationId: 1, projectId: 10, environmentId: 100,
|
||||
actorUserId: 5, createdAt: '2026-01-11T11:00:00Z',
|
||||
actorUserId: 5, actorUserName: 'Alice', createdAt: '2026-01-11T11:00:00Z',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -58,7 +58,7 @@ describe('AuditLogsView', () => {
|
||||
});
|
||||
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '' });
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '', isPrimary: false });
|
||||
contextStore.setProject(mockProject);
|
||||
|
||||
mountView();
|
||||
@@ -76,7 +76,7 @@ describe('AuditLogsView', () => {
|
||||
});
|
||||
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '' });
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '', isPrimary: false });
|
||||
contextStore.setProject(mockProject);
|
||||
|
||||
const wrapper = mountView();
|
||||
@@ -95,7 +95,7 @@ describe('AuditLogsView', () => {
|
||||
});
|
||||
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '' });
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '', isPrimary: false });
|
||||
contextStore.setProject(mockProject);
|
||||
|
||||
const wrapper = mountView();
|
||||
@@ -120,7 +120,7 @@ describe('AuditLogsView', () => {
|
||||
});
|
||||
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '' });
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '', isPrimary: false });
|
||||
contextStore.setProject(mockProject);
|
||||
|
||||
const wrapper = mountView();
|
||||
@@ -145,7 +145,7 @@ describe('AuditLogsView', () => {
|
||||
});
|
||||
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '' });
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '', isPrimary: false });
|
||||
contextStore.setProject(mockProject);
|
||||
|
||||
const wrapper = mountView();
|
||||
@@ -170,7 +170,7 @@ describe('AuditLogsView', () => {
|
||||
});
|
||||
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '' });
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '', isPrimary: false });
|
||||
contextStore.setProject(mockProject);
|
||||
|
||||
const wrapper = mountView();
|
||||
@@ -195,7 +195,7 @@ describe('AuditLogsView', () => {
|
||||
});
|
||||
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '' });
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '', isPrimary: false });
|
||||
contextStore.setProject(mockProject);
|
||||
|
||||
const wrapper = mountView();
|
||||
|
||||
@@ -58,7 +58,7 @@ describe('FeaturesView', () => {
|
||||
jest.mocked(featureStatesApi.listFeatureStates).mockResolvedValue(mockStates);
|
||||
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '' });
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '', isPrimary: false });
|
||||
contextStore.setProject(mockProject);
|
||||
contextStore.setEnvironment(mockEnv);
|
||||
|
||||
@@ -74,7 +74,7 @@ describe('FeaturesView', () => {
|
||||
jest.mocked(featureStatesApi.listFeatureStates).mockResolvedValue(mockStates);
|
||||
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '' });
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '', isPrimary: false });
|
||||
contextStore.setProject(mockProject);
|
||||
|
||||
const wrapper = mountView();
|
||||
@@ -92,7 +92,7 @@ describe('FeaturesView', () => {
|
||||
jest.mocked(featureStatesApi.patchFeatureState).mockResolvedValue({ ...mockStates[0], enabled: true });
|
||||
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '' });
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '', isPrimary: false });
|
||||
contextStore.setProject(mockProject);
|
||||
contextStore.setEnvironment(mockEnv);
|
||||
|
||||
@@ -115,7 +115,7 @@ describe('FeaturesView', () => {
|
||||
jest.mocked(featureStatesApi.listFeatureStates).mockResolvedValue([]);
|
||||
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '' });
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '', isPrimary: false });
|
||||
contextStore.setProject(mockProject);
|
||||
|
||||
const wrapper = mountView();
|
||||
|
||||
@@ -57,7 +57,7 @@ describe('IdentitiesView', () => {
|
||||
});
|
||||
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '' });
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '', isPrimary: false });
|
||||
contextStore.setProject(mockProject);
|
||||
contextStore.setEnvironment(mockEnv);
|
||||
|
||||
@@ -73,7 +73,7 @@ describe('IdentitiesView', () => {
|
||||
});
|
||||
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '' });
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '', isPrimary: false });
|
||||
contextStore.setProject(mockProject);
|
||||
contextStore.setEnvironment(mockEnv);
|
||||
|
||||
@@ -91,7 +91,7 @@ describe('IdentitiesView', () => {
|
||||
});
|
||||
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '' });
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '', isPrimary: false });
|
||||
contextStore.setProject(mockProject);
|
||||
contextStore.setEnvironment(mockEnv);
|
||||
|
||||
@@ -115,7 +115,7 @@ describe('IdentitiesView', () => {
|
||||
});
|
||||
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '' });
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '', isPrimary: false });
|
||||
contextStore.setProject(mockProject);
|
||||
contextStore.setEnvironment(mockEnv);
|
||||
|
||||
@@ -137,7 +137,7 @@ describe('IdentitiesView', () => {
|
||||
});
|
||||
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '' });
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '', isPrimary: false });
|
||||
contextStore.setProject(mockProject);
|
||||
contextStore.setEnvironment(mockEnv);
|
||||
|
||||
@@ -163,7 +163,7 @@ describe('IdentitiesView', () => {
|
||||
});
|
||||
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '' });
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '', isPrimary: false });
|
||||
contextStore.setProject(mockProject);
|
||||
contextStore.setEnvironment(mockEnv);
|
||||
|
||||
|
||||
@@ -44,7 +44,7 @@ describe('ProfileView', () => {
|
||||
it('ThenOrgNameIsDisplayedWhenSelected', () => {
|
||||
const { wrapper } = mountView();
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme Corp', createdAt: '' });
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme Corp', createdAt: '', isPrimary: false });
|
||||
|
||||
expect(wrapper.find('[data-testid="profile-org-name"]').exists()).toBe(false); // org name shown in v-if block
|
||||
});
|
||||
|
||||
@@ -61,7 +61,7 @@ describe('SegmentsView', () => {
|
||||
jest.mocked(segmentsApi.listSegments).mockResolvedValue(mockSegments);
|
||||
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '' });
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '', isPrimary: false });
|
||||
contextStore.setProject(mockProject);
|
||||
|
||||
mountView();
|
||||
@@ -74,7 +74,7 @@ describe('SegmentsView', () => {
|
||||
jest.mocked(segmentsApi.listSegments).mockResolvedValue(mockSegments);
|
||||
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '' });
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '', isPrimary: false });
|
||||
contextStore.setProject(mockProject);
|
||||
|
||||
const wrapper = mountView();
|
||||
@@ -88,7 +88,7 @@ describe('SegmentsView', () => {
|
||||
jest.mocked(segmentsApi.listSegments).mockResolvedValue(mockSegments);
|
||||
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '' });
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '', isPrimary: false });
|
||||
contextStore.setProject(mockProject);
|
||||
|
||||
const wrapper = mountView();
|
||||
@@ -104,7 +104,7 @@ describe('SegmentsView', () => {
|
||||
jest.mocked(segmentsApi.listSegments).mockResolvedValue([]);
|
||||
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '' });
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '', isPrimary: false });
|
||||
contextStore.setProject(mockProject);
|
||||
|
||||
const wrapper = mountView();
|
||||
@@ -123,7 +123,7 @@ describe('SegmentsView', () => {
|
||||
jest.mocked(segmentsApi.listSegments).mockResolvedValue(mockSegments);
|
||||
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '' });
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '', isPrimary: false });
|
||||
contextStore.setProject(mockProject);
|
||||
|
||||
const wrapper = mountView();
|
||||
@@ -143,7 +143,7 @@ describe('SegmentsView', () => {
|
||||
jest.mocked(segmentsApi.deleteSegment).mockResolvedValue(undefined);
|
||||
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '' });
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '', isPrimary: false });
|
||||
contextStore.setProject(mockProject);
|
||||
|
||||
const wrapper = mountView();
|
||||
@@ -172,7 +172,7 @@ describe('SegmentsView', () => {
|
||||
jest.mocked(segmentsApi.deleteSegment).mockResolvedValue(undefined);
|
||||
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '' });
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '', isPrimary: false });
|
||||
contextStore.setProject(mockProject);
|
||||
|
||||
const wrapper = mountView();
|
||||
@@ -196,7 +196,7 @@ describe('SegmentsView', () => {
|
||||
jest.mocked(segmentsApi.listSegments).mockResolvedValue([]);
|
||||
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '' });
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '', isPrimary: false });
|
||||
contextStore.setProject(mockProject);
|
||||
|
||||
const wrapper = mountView();
|
||||
@@ -214,7 +214,7 @@ describe('SegmentsView', () => {
|
||||
jest.mocked(segmentsApi.listSegments).mockResolvedValue([...mockSegments]);
|
||||
|
||||
const contextStore = useContextStore();
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '' });
|
||||
contextStore.setOrganization({ id: 1, name: 'Acme', createdAt: '', isPrimary: false });
|
||||
contextStore.setProject(mockProject);
|
||||
|
||||
const wrapper = mountView();
|
||||
|
||||
@@ -26,7 +26,7 @@ import * as environmentsApi from '@/api/environments';
|
||||
import * as apiKeysApi from '@/api/apiKeys';
|
||||
import * as webhooksApi from '@/api/webhooks';
|
||||
|
||||
const mockOrg: OrganizationResponse = { id: 1, name: 'Acme', createdAt: '2026-01-01T00:00:00Z' };
|
||||
const mockOrg: OrganizationResponse = { id: 1, name: 'Acme', createdAt: '2026-01-01T00:00:00Z', isPrimary: false };
|
||||
const mockProject: ProjectResponse = { id: 10, name: 'Website', organizationId: 1, hideDisabledFlags: false, createdAt: '2026-01-01T00:00:00Z' };
|
||||
const mockEnvs: EnvironmentResponse[] = [
|
||||
{ id: 100, name: 'Development', apiKey: 'env-dev', projectId: 10, createdAt: '2026-01-01T00:00:00Z' },
|
||||
|
||||
Reference in New Issue
Block a user