Fix type errors

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/features/preferences/renderer/preference-navigation/navigate-to-preference-tab/navigate-to-preference-tab.injectable.ts

@@ -6,14 +6,16 @@ import { getInjectable } from "@ogre-tools/injectable";
 import { navigateToRouteInjectionToken } from "../../../../../common/front-end-routing/navigate-to-route-injection-token";
 import preferencesRouteInjectable from "../../../common/preferences-route.injectable";
 
-const navigateToPreferenceTabInjectable = getInjectable({
-  id: "navigate-to-preference-tab-2",
+export type NavigateToPreferenceTab = (tabId: string) => void;
 
-  instantiate: (di) => {
+const navigateToPreferenceTabInjectable = getInjectable({
+  id: "navigate-to-preference-tab",
+
+  instantiate: (di): NavigateToPreferenceTab => {
     const navigateToRoute = di.inject(navigateToRouteInjectionToken);
     const route = di.inject(preferencesRouteInjectable);
 
-    return (preferenceTabId: string) => {
+    return (preferenceTabId) => {
       navigateToRoute(route, {
         withoutAffectingBackButton: true,
         parameters: { preferenceTabId },

src/features/preferences/renderer/preference-navigation/preferences-navigation-tab.tsx

@@ -3,7 +3,6 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { Tab } from "../../../../renderer/components/tabs";
-import navigateToPreferenceTabInjectable from "./navigate-to-preference-tab/navigate-to-preference-tab.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import { observer } from "mobx-react";
 import type { PreferenceTab } from "../preference-items/preference-item-injection-token";
@@ -12,7 +11,6 @@ import preferenceTabIsActiveInjectable from "./navigate-to-preference-tab/prefer
 import React from "react";
 
 interface Dependencies {
-  navigateToTab: (tabId: string) => void;
   tabIsActive: IComputedValue<boolean>;
 }
 
@@ -20,23 +18,21 @@ interface PreferenceNavigationTabProps {
   tab: PreferenceTab;
 }
 
-const NonInjectedPreferencesNavigationTab = observer(({ navigateToTab, tabIsActive, tab } : Dependencies & PreferenceNavigationTabProps) => (
+const NonInjectedPreferencesNavigationTab = observer(({
+  tabIsActive,
+  tab,
+}: Dependencies & PreferenceNavigationTabProps) => (
   <Tab
-    onClick={() => navigateToTab(tab.pathId)}
     active={tabIsActive.get()}
     label={tab.label}
     data-preference-tab-link-test={tab.pathId}
+    value={tab.pathId}
   />
 ));
 
-export const PreferencesNavigationTab = withInjectables<Dependencies, PreferenceNavigationTabProps>(
-  NonInjectedPreferencesNavigationTab,
-
-  {
-    getProps: (di, props) => ({
-      navigateToTab: di.inject(navigateToPreferenceTabInjectable),
-      tabIsActive: di.inject(preferenceTabIsActiveInjectable, props.tab.pathId),
-      ...props,
-    }),
-  },
-);
+export const PreferencesNavigationTab = withInjectables<Dependencies, PreferenceNavigationTabProps>(NonInjectedPreferencesNavigationTab, {
+  getProps: (di, props) => ({
+    ...props,
+    tabIsActive: di.inject(preferenceTabIsActiveInjectable, props.tab.pathId),
+  }),
+});

src/features/preferences/renderer/preference-navigation/preferences-navigation.tsx

@@ -16,26 +16,33 @@ import { compositeHasDescendant } from "../../../../common/utils/composite/compo
 import type { PreferenceTabsRoot } from "../preference-items/preference-tab-root";
 import { Icon } from "../../../../renderer/components/icon";
 import { checkThatAllDiscriminablesAreExhausted } from "../../../../common/utils/composable-responsibilities/discriminable/discriminable";
+import type { NavigateToPreferenceTab } from "./navigate-to-preference-tab/navigate-to-preference-tab.injectable";
+import navigateToPreferenceTabInjectable from "./navigate-to-preference-tab/navigate-to-preference-tab.injectable";
 
 interface Dependencies {
   composite: IComputedValue<Composite<PreferenceItemTypes | PreferenceTabsRoot>>;
+  navigateToPreferenceTab: NavigateToPreferenceTab;
 }
 
-const NonInjectedPreferencesNavigation = observer(({ composite }: Dependencies) => (
-  <Tabs className="flex column" scrollable={false}>
+const NonInjectedPreferencesNavigation = observer(({
+  composite,
+  navigateToPreferenceTab,
+}: Dependencies) => (
+  <Tabs<string>
+    className="flex column"
+    scrollable={false}
+    onChange={navigateToPreferenceTab}
+  >
     {toNavigationHierarchy(composite.get())}
   </Tabs>
 ));
 
-export const PreferencesNavigation = withInjectables<Dependencies>(
-  NonInjectedPreferencesNavigation,
-
-  {
-    getProps: (di) => ({
-      composite: di.inject(preferencesCompositeInjectable),
-    }),
-  },
-);
+export const PreferencesNavigation = withInjectables<Dependencies>(NonInjectedPreferencesNavigation, {
+  getProps: (di) => ({
+    composite: di.inject(preferencesCompositeInjectable),
+    navigateToPreferenceTab: di.inject(navigateToPreferenceTabInjectable),
+  }),
+});
 
 const toNavigationHierarchy = (composite: Composite<PreferenceItemTypes | PreferenceTabsRoot>) => {
   const value = composite.value;

src/renderer/components/layout/tab-layout-2.tsx

@@ -43,6 +43,7 @@ export const TabLayout = observer(
                   active={active}
                   data-is-active-test={active}
                   data-testid={`tab-link-for-${registration.id}`}
+                  value={undefined}
                 />
               );
             })}

src/renderer/components/layout/tab-layout.tsx

@@ -39,7 +39,7 @@ export const TabLayout = observer(({ className, contentClass, tabs = [], childre
   return (
     <div className={cssNames("TabLayout", className)}>
       {hasTabs && (
-        <Tabs center onChange={(url) => navigate(url)}>
+        <Tabs<string> center onChange={(url) => navigate(url)}>
           {tabs.map(({ title, routePath, url = routePath, exact }) => (
             <Tab
               key={url}