feat(organizations): add Organization tab + rename General route to tab-addressable (#4184)

* refactor(organizations): rename General child path to 'general' + bare-path redirect

* feat(organizations): add 'Organization' tab descriptor (alongside Billing)

* test(organizations): assert SurfaceTabBar receives both Organization + Billing tabs

* test(organizations): tighten resolveSurfaceTabs assertion to expect both tabs (CR feedback)

Author: PierreBrisorgueil

src/modules/organizations/config/organizations.development.config.js

@@ -5,6 +5,7 @@ export default {
     // Each entry: { value, label, icon?, route, action?, subject? }
     // action + subject are the CASL pair filtered by resolveSurfaceTabs.
     tabs: [
+      { value: 'organization', label: 'Organization', icon: 'fa-solid fa-building', route: 'general', action: 'read', subject: 'Organization' },
       { value: 'billing', label: 'Billing', icon: 'fa-solid fa-credit-card', route: 'billing', action: 'manage', subject: 'Organization' },
     ],
   },

src/modules/organizations/router/organizations.router.js

@@ -52,7 +52,13 @@ export default [
     // are injected via organizationChildModules in app.router.js.
     children: [
       {
+        // Redirect bare /users/organizations/:id → :id/general so SurfaceTabBar
+        // descriptors with `route: 'general'` resolve correctly.
         path: '',
+        redirect: { name: 'Account Organization General' },
+      },
+      {
+        path: 'general',
         name: 'Account Organization General',
         component: organizationGeneralTab,
         props: (route) => ({ organizationId: route.params.organizationId }),

src/modules/organizations/tests/organizations.config.unit.tests.js

@@ -49,16 +49,35 @@ describe('organizations module config — organizations.tabs', () => {
     expect(isValidTab(billingTab)).toBe(true);
   });
 
-  it('resolveSurfaceTabs returns billing tab when can("manage","Organization") is true', () => {
+  it('resolveSurfaceTabs returns both Organization + Billing tabs when can() is true', () => {
     const tabs = organizationsDefaultConfig.organizations.tabs;
     const result = resolveSurfaceTabs(tabs, () => true);
-    expect(result).toHaveLength(1);
-    expect(result[0].value).toBe('billing');
+    expect(result).toHaveLength(2);
+    expect(result.find((t) => t.value === 'organization')).toBeDefined();
+    expect(result.find((t) => t.value === 'billing')).toBeDefined();
   });
 
   it('resolveSurfaceTabs filters out billing tab when can("manage","Organization") is false', () => {
     const tabs = organizationsDefaultConfig.organizations.tabs;
+    // can() = false filters out all CASL-gated tabs; organization tab has action:'read' so also filtered
     const result = resolveSurfaceTabs(tabs, () => false);
     expect(result).toHaveLength(0);
   });
+
+  test('organizations.tabs has the "organization" tab as the first entry', () => {
+    expect(organizationsDefaultConfig.organizations.tabs[0]).toEqual({
+      value: 'organization',
+      label: 'Organization',
+      icon: 'fa-solid fa-building',
+      route: 'general',
+      action: 'read',
+      subject: 'Organization',
+    });
+  });
+
+  test('organizations.tabs still has the "billing" tab (preserved)', () => {
+    const billing = organizationsDefaultConfig.organizations.tabs.find((t) => t.value === 'billing');
+    expect(billing).toBeTruthy();
+    expect(billing.route).toBe('billing');
+  });
 });

src/modules/organizations/tests/organizations.detail.layout.unit.tests.js

@@ -42,6 +42,14 @@ vi.mock('../../../lib/services/config', () => ({
     vuetify: { theme: { flat: true, rounded: 'rounded-lg' } },
     organizations: {
       tabs: [
+        {
+          value: 'organization',
+          label: 'Organization',
+          icon: 'fa-solid fa-building',
+          route: 'general',
+          action: 'read',
+          subject: 'Organization',
+        },
         {
           value: 'billing',
           label: 'Billing',
@@ -103,6 +111,14 @@ function mountLayout(orgId = 'abc123', routePath = null) {
           vuetify: { theme: { flat: true, rounded: 'rounded-lg' } },
           organizations: {
             tabs: [
+              {
+                value: 'organization',
+                label: 'Organization',
+                icon: 'fa-solid fa-building',
+                route: 'general',
+                action: 'read',
+                subject: 'Organization',
+              },
               {
                 value: 'billing',
                 label: 'Billing',
@@ -193,6 +209,14 @@ describe('organization.detail.component.vue — tabbed parent layout (C3)', () =
     expect(tabs.find((t) => t.value === 'billing')).toBeDefined();
   });
 
+  it('passes both Organization + Billing tabs to CoreSurfaceTabBar', () => {
+    const wrapper = mountLayout();
+    const tabBar = wrapper.findComponent({ name: 'CoreSurfaceTabBar' });
+    expect(tabBar.exists()).toBe(true);
+    const tabs = tabBar.props('tabs');
+    expect(tabs.map((t) => t.value)).toEqual(['organization', 'billing']);
+  });
+
   it('passes a function as the `can` prop to CoreSurfaceTabBar', () => {
     const wrapper = mountLayout();
     const tabBar = wrapper.findComponent({ name: 'CoreSurfaceTabBar' });
@@ -481,15 +505,15 @@ describe('organizations router — nested route structure (C3)', () => {
     expect(Array.isArray(orgParent.children)).toBe(true);
   });
 
-  it('default child (path="") passes organizationId as props function', async () => {
+  it('general child (path="general") passes organizationId as props function', async () => {
     const { default: orgRoutes, ORG_PARENT_PATH } = await import('../router/organizations.router.js');
     const orgParent = orgRoutes.find((r) => r.path === ORG_PARENT_PATH);
-    const defaultChild = orgParent.children.find((c) => c.path === '');
-    expect(defaultChild).toBeDefined();
+    const generalChild = orgParent.children.find((c) => c.path === 'general');
+    expect(generalChild).toBeDefined();
     // props must be a function (not static object) so it maps route.params → component props
-    expect(typeof defaultChild.props).toBe('function');
+    expect(typeof generalChild.props).toBe('function');
     // Verify the function maps organizationId correctly
-    const result = defaultChild.props({ params: { organizationId: 'test-id' } });
+    const result = generalChild.props({ params: { organizationId: 'test-id' } });
     expect(result).toEqual({ organizationId: 'test-id' });
   });
 });

src/modules/organizations/tests/organizations.router.unit.tests.js

@@ -0,0 +1,19 @@
+import { describe, test, expect } from 'vitest';
+import routes from '../router/organizations.router';
+
+describe('organizations router', () => {
+  test('Account Organization General child path is "general" not ""', () => {
+    const parent = routes.find((r) => r.name === 'Account Organization');
+    expect(parent).toBeTruthy();
+    const general = parent.children?.find((c) => c.name === 'Account Organization General');
+    expect(general).toBeTruthy();
+    expect(general.path).toBe('general');
+  });
+
+  test('Account Organization has a redirect from "" to General', () => {
+    const parent = routes.find((r) => r.name === 'Account Organization');
+    const redirect = parent.children?.find((c) => c.path === '' && c.redirect);
+    expect(redirect).toBeTruthy();
+    expect(redirect.redirect).toEqual({ name: 'Account Organization General' });
+  });
+});