Tab bar fixes

app/components/RouteTabs.tsx

@@ -79,17 +79,24 @@ export function RouteTabs({
 
 export interface TabProps {
   to: string
+  /**
+   * Used in rare cases when a tab has sidebar tabs underneath and we want to be
+   * able to link directly to the first sidebar tab, but we of course also want
+   * this tab to appear active for all the sidebar tabs. See instance metrics.
+   */
+  toPrefix?: string
   children: ReactNode
 }
-export const Tab = ({ to, children }: TabProps) => {
-  const isActive = useIsActivePath({ to })
+export const Tab = ({ to, toPrefix, children }: TabProps) => {
+  const isActive = useIsActivePath({ to: toPrefix || to })
   return (
     <Link
       role="tab"
       to={to}
       className={cn('ox-tab', { 'is-selected': isActive })}
       tabIndex={isActive ? 0 : -1}
       aria-selected={isActive}
+      data-state={isActive ? 'active' : 'inactive'}
     >
       <div>{children}</div>
     </Link>

app/pages/project/instances/InstancePage.tsx

@@ -51,7 +51,7 @@ import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { Spinner } from '~/ui/lib/Spinner'
 import { Tooltip } from '~/ui/lib/Tooltip'
 import { truncate } from '~/ui/lib/Truncate'
-import { pb } from '~/util/path-builder'
+import { instanceMetricsBase, pb } from '~/util/path-builder'
 import { pluralize } from '~/util/str'
 import { GiB } from '~/util/units'
 
@@ -256,7 +256,12 @@ export default function InstancePage() {
       <RouteTabs fullWidth>
         <Tab to={pb.instanceStorage(instanceSelector)}>Storage</Tab>
         <Tab to={pb.instanceNetworking(instanceSelector)}>Networking</Tab>
-        <Tab to={pb.instanceCpuMetrics(instanceSelector)}>Metrics</Tab>
+        <Tab
+          to={pb.instanceCpuMetrics(instanceSelector)}
+          toPrefix={instanceMetricsBase(instanceSelector)}
+        >
+          Metrics
+        </Tab>
         <Tab to={pb.instanceConnect(instanceSelector)}>Connect</Tab>
         <Tab to={pb.instanceSettings(instanceSelector)}>Settings</Tab>
       </RouteTabs>

app/ui/styles/components/Tabs.css

@@ -36,25 +36,25 @@
 }
 
 /* Active states */
-.ox-tab.is-selected {
+.ox-tab[data-state='active'] {
   @apply text-accent border-accent;
 }
 
-.ox-tab.is-selected:hover > * {
-  @apply !bg-accent-secondary;
+.ox-tabs-list .ox-tab[data-state='active']:hover > * {
+  @apply bg-accent-secondary;
 }
 
 /* Badge styles */
 .ox-tab > .ox-badge {
   @apply -mt-1 select-none text-current;
 }
 
-.ox-tab:not(.is-selected) > .ox-badge {
+.ox-tab[data-state='inactive'] > .ox-badge {
   @apply bg-disabled;
 }
 
-.ox-tab.is-selected > .ox-badge {
-  @apply bg-accent-secondary;
+.ox-tab[data-state='active'] > .ox-badge {
+  @apply bg-accent-secondary-hover;
 }
 
 /* Full width variants */
@@ -81,7 +81,7 @@
   border-bottom: none;
 }
 
-.ox-side-tabs .ox-tab.is-selected {
+.ox-side-tabs-list .ox-tab[data-state='active'] {
   @apply text-accent bg-accent-secondary;
   border: none;
 }
@@ -90,6 +90,10 @@
   @apply mx-0 ml-4;
 }
 
-.ox-side-tabs-list .ox-tab:not(.is-selected):hover {
+.ox-side-tabs-list .ox-tab[data-state='active']:hover {
+  @apply bg-accent-secondary-hover;
+}
+
+.ox-side-tabs-list .ox-tab:not([data-state='active']):hover {
   @apply text-default bg-hover;
 }

app/util/path-builder.ts

@@ -14,7 +14,9 @@ const projectBase = ({ project }: PP.Project) => `${pb.projects()}/${project}`
 const instanceBase = ({ project, instance }: PP.Instance) =>
   `${pb.instances({ project })}/${instance}`
 const vpcBase = ({ project, vpc }: PP.Vpc) => `${pb.vpcs({ project })}/${vpc}`
-const instanceMetricsBase = ({ project, instance }: PP.Instance) =>
+
+/** Don't use this for links. only exported for use as toPrefix on metrics tab */
+export const instanceMetricsBase = ({ project, instance }: PP.Instance) =>
   `${instanceBase({ project, instance })}/metrics`
 
 export const pb = {