Merge pull request #1305 from spotify/rugvip/sideroute

packages/core: fix base path being ignored + sidebar highlighting

packages/app/src/components/Root/Root.tsx

@@ -86,14 +86,14 @@ const Root: FC<{}> = ({ children }) => (
       <SidebarSearchField onSearch={handleSearch} />
       <SidebarDivider />
       {/* Global nav, not org-specific */}
-      <SidebarItem icon={HomeIcon} to="/" text="Home" />
-      <SidebarItem icon={ExploreIcon} to="/explore" text="Explore" />
-      <SidebarItem icon={CreateComponentIcon} to="/create" text="Create..." />
+      <SidebarItem icon={HomeIcon} to="./" text="Home" />
+      <SidebarItem icon={ExploreIcon} to="explore" text="Explore" />
+      <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
       {/* End global nav */}
       <SidebarDivider />
-      <SidebarItem icon={MapIcon} to="/tech-radar" text="Tech Radar" />
-      <SidebarItem icon={RuleIcon} to="/lighthouse" text="Lighthouse" />
-      <SidebarItem icon={BuildIcon} to="/circleci" text="CircleCI" />
+      <SidebarItem icon={MapIcon} to="tech-radar" text="Tech Radar" />
+      <SidebarItem icon={RuleIcon} to="lighthouse" text="Lighthouse" />
+      <SidebarItem icon={BuildIcon} to="circleci" text="CircleCI" />
       <SidebarSpace />
       <SidebarDivider />
       <SidebarThemeToggle />

packages/core-api/src/app/App.tsx

@@ -205,7 +205,11 @@ export class PrivateAppImpl implements BackstageApp {
         <ApiProvider apis={apis}>
           <AppContextProvider app={this}>
             <AppThemeProvider>
-              <Router>{children}</Router>
+              <Router>
+                <Routes>
+                  <Route path={`${pathname}/*`} element={<>{children}</>} />
+                </Routes>
+              </Router>
             </AppThemeProvider>
           </AppContextProvider>
         </ApiProvider>

packages/core/src/layout/Sidebar/Items.tsx

@@ -111,8 +111,8 @@ const useStyles = makeStyles<Theme>(theme => {
 type SidebarItemProps = {
   icon: IconComponent;
   text?: string;
+  // If 'to' is set the item will act as a nav link with highlight, otherwise it's just a button
   to?: string;
-  disableSelected?: boolean;
   hasNotifications?: boolean;
   onClick?: () => void;
 };
@@ -120,9 +120,7 @@ type SidebarItemProps = {
 export const SidebarItem: FC<SidebarItemProps> = ({
   icon: Icon,
   text,
-  to = '#',
-  // TODO: isActive is not in v6
-  // disableSelected = false,
+  to,
   hasNotifications = false,
   onClick,
   children,
@@ -144,27 +142,25 @@ export const SidebarItem: FC<SidebarItemProps> = ({
     </Badge>
   );
 
+  const childProps = {
+    onClick,
+    className: clsx(classes.root, isOpen ? classes.open : classes.closed),
+  };
+
   if (!isOpen) {
+    if (to === undefined) {
+      return <div {...childProps}>{itemIcon}</div>;
+    }
+
     return (
-      <NavLink
-        className={clsx(classes.root, classes.closed)}
-        activeClassName={classes.selected}
-        end
-        to={to}
-        onClick={onClick}
-      >
+      <NavLink {...childProps} activeClassName={classes.selected} to={to} end>
         {itemIcon}
       </NavLink>
     );
   }
-  return (
-    <NavLink
-      className={clsx(classes.root, classes.open)}
-      activeClassName={classes.selected}
-      end
-      to={to}
-      onClick={onClick}
-    >
+
+  const content = (
+    <>
       <div data-testid="login-button" className={classes.iconContainer}>
         {itemIcon}
       </div>
@@ -174,6 +170,16 @@ export const SidebarItem: FC<SidebarItemProps> = ({
         </Typography>
       )}
       <div className={classes.secondaryAction}>{children}</div>
+    </>
+  );
+
+  if (to === undefined) {
+    return <div {...childProps}>{content}</div>;
+  }
+
+  return (
+    <NavLink {...childProps} activeClassName={classes.selected} to={to} end>
+      {content}
     </NavLink>
   );
 };
@@ -198,7 +204,7 @@ export const SidebarSearchField: FC<SidebarSearchFieldProps> = props => {
 
   return (
     <div className={classes.searchRoot}>
-      <SidebarItem icon={SearchIcon} disableSelected>
+      <SidebarItem icon={SearchIcon}>
         <TextField
           placeholder="Search"
           onChange={handleInput}

packages/core/src/layout/Sidebar/Settings/ProviderSettingsItem.tsx

@@ -29,12 +29,7 @@ export const ProviderSettingsItem: FC<{
   signInHandler: Function;
 }> = ({ title, icon, signedIn, api, signInHandler }) => {
   return (
-    <SidebarItem
-      key={title}
-      text={title}
-      icon={icon ?? StarBorder}
-      disableSelected
-    >
+    <SidebarItem key={title} text={title} icon={icon ?? StarBorder}>
       <IconButton onClick={() => (signedIn ? api.logout() : signInHandler())}>
         <Tooltip
           placement="top"

packages/core/src/layout/Sidebar/Settings/UserProfile.tsx

@@ -103,7 +103,6 @@ export const UserProfile: FC<{ open: boolean; setOpen: Function }> = ({
         text={displayName}
         onClick={handleClick}
         icon={avatar || AccountCircleIcon}
-        disableSelected
       >
         {open ? <ExpandLess /> : <ExpandMore />}
       </SidebarItem>