fix: branch selector (stoplightio#2518)

* fix: branch selector * chore: release
jpmorganchase · Feb 18, 2025 · 8148ba6 · 8148ba6
1 parent 0a24c51
commit 8148ba6
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 46 deletions.
diff --git a/packages/elements-dev-portal/src/__fixtures__/branches.json b/packages/elements-dev-portal/src/__fixtures__/branches.json
@@ -1,26 +1,28 @@
-[
-  {
-    "id": "YnI6NDc4MDUy",
-    "name": null,
-    "slug": "master",
-    "is_default": true,
-    "is_published": true,
-    "project_id": "cHJqOjM1ODEw"
-  },
-  {
-    "id": "YnI6OTYwNDM4",
-    "name": null,
-    "slug": "v2",
-    "is_default": false,
-    "is_published": true,
-    "project_id": "cHJqOjM1ODEw"
-  },
-  {
-    "id": "YnI6OTYwNDM5",
-    "name": null,
-    "slug": "feat/toc-file",
-    "is_default": false,
-    "is_published": true,
-    "project_id": "cHJqOjM1ODEw"
-  }
-]
+{
+  "items": [
+    {
+      "id": "YnI6NDc4MDUy",
+      "name": null,
+      "slug": "master",
+      "is_default": true,
+      "is_published": true,
+      "project_id": "cHJqOjM1ODEw"
+    },
+    {
+      "id": "YnI6OTYwNDM4",
+      "name": null,
+      "slug": "v2",
+      "is_default": false,
+      "is_published": true,
+      "project_id": "cHJqOjM1ODEw"
+    },
+    {
+      "id": "YnI6OTYwNDM5",
+      "name": null,
+      "slug": "feat/toc-file",
+      "is_default": false,
+      "is_published": true,
+      "project_id": "cHJqOjM1ODEw"
+    }
+  ]
+}
diff --git a/packages/elements-dev-portal/src/components/BranchSelector/BranchSelector.spec.tsx b/packages/elements-dev-portal/src/components/BranchSelector/BranchSelector.spec.tsx
@@ -4,30 +4,28 @@ import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 
+import { Branch } from '../../types';
 import { BranchSelector } from './BranchSelector';
 
-export const branches = [
+export const branches: Branch[] = [
   {
     id: 0,
     slug: 'main',
     is_default: true,
     is_published: false,
-    projectId: 123,
     name: 'main-name',
   },
   {
     id: 1,
     slug: 'beta',
     is_default: false,
     is_published: false,
-    projectId: 123,
   },
   {
     id: 2,
     slug: 'feature-branch',
     is_default: false,
     is_published: false,
-    projectId: 123,
   },
 ];
 

diff --git a/packages/elements-dev-portal/src/components/BranchSelector/BranchSelector.stories.tsx b/packages/elements-dev-portal/src/components/BranchSelector/BranchSelector.stories.tsx
@@ -13,7 +13,7 @@ const BranchSelectorWrapper = ({ projectId }: { projectId: string }) => {
   if (data) {
     return (
       <Box mt={10} w={40}>
-        <BranchSelector branchSlug={branchSlug} branches={data} onChange={branch => setBranchSlug(branch.slug)} />
+        <BranchSelector branchSlug={branchSlug} branches={data.items} onChange={branch => setBranchSlug(branch.slug)} />
       </Box>
     );
   }

diff --git a/packages/elements-dev-portal/src/containers/StoplightProject.tsx b/packages/elements-dev-portal/src/containers/StoplightProject.tsx
@@ -11,7 +11,7 @@ import {
 } from '@jpmorganchase/elemental-core';
 import { Box, Button, Icon, useModalState } from '@stoplight/mosaic';
 import * as React from 'react';
-import { Link, Redirect, Route, useHistory, useParams } from 'react-router-dom';
+import { Link, Redirect, Route, Switch, useHistory, useParams } from 'react-router-dom';
 
 import { BranchSelector } from '../components/BranchSelector';
 import { DevPortalProvider } from '../components/DevPortalProvider';
@@ -198,10 +198,10 @@ const StoplightProjectImpl: React.FC<StoplightProjectProps> = ({
       ref={container}
       sidebar={
         <>
-          {branches && branches.length > 1 ? (
+          {branches && branches.items.length > 1 ? (
             <BranchSelector
               branchSlug={branchSlug}
-              branches={branches}
+              branches={branches.items}
               onChange={branch => {
                 const encodedBranchSlug = encodeURIComponent(branch.slug);
                 history.push(branch.is_default ? `/${nodeSlug}` : `/branches/${encodedBranchSlug}/${nodeSlug}`);
@@ -238,17 +238,19 @@ const StoplightProjectRouter = ({
     <DevPortalProvider platformUrl={platformUrl}>
       <RouterTypeContext.Provider value={router}>
         <Router {...routerProps} key={basePath}>
-          <Route path="/branches/:branchSlug/:nodeSlug+" exact>
-            <StoplightProjectImpl {...props} />
-          </Route>
+          <Switch>
+            <Route path="/branches/:branchSlug/:nodeSlug+" exact>
+              <StoplightProjectImpl {...props} />
+            </Route>
 
-          <Route path="/:nodeSlug+" exact>
-            <StoplightProjectImpl {...props} />
-          </Route>
+            <Route path="/:nodeSlug+" exact>
+              <StoplightProjectImpl {...props} />
+            </Route>
 
-          <Route path="/" exact>
-            <StoplightProjectImpl {...props} />
-          </Route>
+            <Route path="/" exact>
+              <StoplightProjectImpl {...props} />
+            </Route>
+          </Switch>
         </Router>
       </RouterTypeContext.Provider>
     </DevPortalProvider>

diff --git a/packages/elements-dev-portal/src/handlers/getBranches.ts b/packages/elements-dev-portal/src/handlers/getBranches.ts
@@ -1,4 +1,4 @@
-import { Branch } from '../types';
+import { Branches } from '../types';
 import { appVersion } from '../version';
 
 export const getBranches = async ({
@@ -9,7 +9,7 @@ export const getBranches = async ({
   projectId: string;
   platformUrl?: string;
   platformAuthToken?: string;
-}): Promise<Branch[]> => {
+}): Promise<Branches> => {
   const encodedProjectId = encodeURIComponent(projectId);
   const response = await fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}/branches`, {
     headers: {

diff --git a/packages/elements-dev-portal/src/types.ts b/packages/elements-dev-portal/src/types.ts
@@ -5,10 +5,13 @@ export type Branch = {
   slug: string;
   is_default: boolean;
   is_published: boolean;
-  projectId: number;
   name?: string;
 };
 
+export type Branches = {
+  items: Branch[];
+};
+
 export type ProjectTableOfContents = {
   items: TableOfContentsItem[];
   hide_powered_by?: boolean;