Ability to read branch information from URL (#2867)

microsoft · Feb 22, 2024 · 352bd45 · 352bd45
1 parent 3396244
commit 352bd45
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 5 deletions.
diff --git a/web/features/package-lock.json b/web/features/package-lock.json
diff --git a/web/features/package.json b/web/features/package.json
@@ -17,6 +17,7 @@
         "gh-pages": "^6.1.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router-dom": "^6.22.1",
         "react-scripts": "^5.0.1",
         "typescript": "^4.9.5"
     },

diff --git a/web/features/src/app.tsx b/web/features/src/app.tsx
@@ -24,6 +24,7 @@ import {
 import Path from './components/path';
 import FeatureList from './components/featurelist';
 import { IWorkerMessage, IInitializeMessage, IInitializeResultMessage, ISearchMessage, ISearchResultMessage } from './worker/worker';
+import { useNavigate, useParams } from 'react-router-dom';
 
 const useStyles = makeStyles({
     root: {
@@ -57,7 +58,9 @@ const useStyles = makeStyles({
     },
     searchContainer: {
         display: 'flex',
-        width: '100%'
+        flexWrap: 'wrap',
+        width: '100%',
+        ...shorthands.gap('1em')
     },
     searchInput: {
         flexGrow: 5
@@ -121,8 +124,9 @@ function App() {
     const [worker, setWorker] = React.useState<Worker | null>(null);
     const [query, setQuery] = React.useState('');
 
+    const params = useParams();
     const branches = process.env.REACT_APP_BRANCHES!.split(',');
-    const defaultBranch = branches[0];
+    const defaultBranch = branches.includes(params.branch!) ? params.branch : branches[0];
     const [branch, setBranch] = React.useState(defaultBranch);
 
     const styles = useStyles();
@@ -189,11 +193,14 @@ function App() {
         setResultsTruncated(false);
     };
 
+    const navigate = useNavigate();
     const onBranchSelected = (
         ev: SelectionEvents,
         data: OptionOnSelectData
     ) => {
-        setBranch(data.optionValue ?? defaultBranch);
+        const branch = data.optionValue ?? defaultBranch;
+        setBranch(branch);
+        navigate(`/${branch}`, { replace: true });
     };
 
     return (
@@ -233,7 +240,7 @@ function App() {
                             )
                         }
                     />
-                    <Dropdown className={styles.searchBranch} value={branch} onOptionSelect={onBranchSelected}>
+                    <Dropdown size='large' className={styles.searchBranch} value={branch} onOptionSelect={onBranchSelected}>
                         {
                             branches.map((branch) => (
                                 <Option key={branch}>

diff --git a/web/features/src/index.tsx b/web/features/src/index.tsx
@@ -1,4 +1,5 @@
 import * as ReactDOM from 'react-dom/client';
+import { RouterProvider, createHashRouter } from 'react-router-dom';
 import { FluentProvider, createLightTheme } from '@fluentui/react-components';
 import '@fontsource/fira-sans';
 import App from './app';
@@ -32,14 +33,20 @@ const lightTheme = {
     ...coreTheme,
 };
 
+const router = createHashRouter([
+    {
+        path: '/:branch?',
+        element: <App />
+    }
+]);
 const root = ReactDOM.createRoot(
     document.getElementById('root') as HTMLElement
 );
 root.render(
     // https://github.com/microsoft/fluentui/issues/30450
     //<StrictMode>
     <FluentProvider theme={lightTheme}>
-        <App />
+        <RouterProvider router={router} />
     </FluentProvider>
     //</StrictMode>
 );