From 501ce156c0d9da177f297ab4150041846e213ffd Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Thu, 22 Dec 2022 11:33:10 -0500
Subject: [PATCH] Remove usages of legacy global navigation

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 .../error-boundary/error-boundary.tsx         | 19 +++++++++--
 src/renderer/components/layout/tab-layout.tsx | 32 +++++++++++++++++--
 src/renderer/navigation/index.ts              |  7 ----
 3 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/src/renderer/components/error-boundary/error-boundary.tsx b/src/renderer/components/error-boundary/error-boundary.tsx
index a5fd357ffa..75e5cf4689 100644
--- a/src/renderer/components/error-boundary/error-boundary.tsx
+++ b/src/renderer/components/error-boundary/error-boundary.tsx
@@ -9,9 +9,11 @@ import type { ErrorInfo } from "react";
 import React from "react";
 import { observer } from "mobx-react";
 import { Button } from "../button";
-import { navigation } from "../../navigation";
 import { issuesTrackerUrl, slackUrl } from "../../../common/vars";
 import type { SingleOrMany } from "../../utils";
+import type { ObservableHistory } from "mobx-observable-history";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import observableHistoryInjectable from "../../navigation/observable-history.injectable";
 
 export interface ErrorBoundaryProps {
   children?: SingleOrMany<React.ReactNode>;
@@ -22,8 +24,12 @@ interface State {
   errorInfo?: ErrorInfo;
 }
 
+interface Dependencies {
+  observableHistory: ObservableHistory<unknown>;
+}
+
 @observer
-export class ErrorBoundary extends React.Component<ErrorBoundaryProps, State> {
+class NonInjectedErrorBoundary extends React.Component<ErrorBoundaryProps & Dependencies, State> {
   public state: State = {};
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
@@ -32,7 +38,7 @@ export class ErrorBoundary extends React.Component<ErrorBoundaryProps, State> {
 
   back = () => {
     this.setState({ error: undefined, errorInfo: undefined });
-    navigation.goBack();
+    this.props.observableHistory.goBack();
   };
 
   render() {
@@ -88,3 +94,10 @@ export class ErrorBoundary extends React.Component<ErrorBoundaryProps, State> {
     return this.props.children;
   }
 }
+
+export const ErrorBoundary = withInjectables<Dependencies, ErrorBoundaryProps>(NonInjectedErrorBoundary, {
+  getProps: (di, props) => ({
+    ...props,
+    observableHistory: di.inject(observableHistoryInjectable),
+  }),
+});
diff --git a/src/renderer/components/layout/tab-layout.tsx b/src/renderer/components/layout/tab-layout.tsx
index e12cebd648..ddbbeea691 100644
--- a/src/renderer/components/layout/tab-layout.tsx
+++ b/src/renderer/components/layout/tab-layout.tsx
@@ -13,7 +13,11 @@ import type { IClassName } from "../../utils";
 import { cssNames } from "../../utils";
 import { Tab, Tabs } from "../tabs";
 import { ErrorBoundary } from "../error-boundary";
-import { navigate, navigation } from "../../navigation";
+import type { ObservableHistory } from "mobx-observable-history";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import observableHistoryInjectable from "../../navigation/observable-history.injectable";
+import type { Navigate } from "../../navigation/navigate.injectable";
+import navigateInjectable from "../../navigation/navigate.injectable";
 
 export interface TabLayoutProps {
   className?: IClassName;
@@ -32,8 +36,22 @@ export interface TabLayoutRoute {
   default?: boolean; // initial tab to open with provided `url, by default tabs[0] is used
 }
 
-export const TabLayout = observer(({ className, contentClass, tabs = [], scrollable, children }: TabLayoutProps) => {
-  const currentLocation = navigation.location.pathname;
+interface Dependencies {
+  observableHistory: ObservableHistory<unknown>;
+  navigate: Navigate;
+}
+
+const NonInjectedTabLayout = observer((props: TabLayoutProps & Dependencies) => {
+  const {
+    className,
+    contentClass,
+    tabs = [],
+    scrollable,
+    children,
+    observableHistory,
+    navigate,
+  } = props;
+  const currentLocation = observableHistory.location.pathname;
   const hasTabs = tabs.length > 0;
   const startTabUrl = hasTabs ? (tabs.find(tab => tab.default) || tabs[0])?.url : null;
 
@@ -72,3 +90,11 @@ export const TabLayout = observer(({ className, contentClass, tabs = [], scrolla
     </div>
   );
 });
+
+export const TabLayout = withInjectables<Dependencies, TabLayoutProps>(NonInjectedTabLayout, {
+  getProps: (di, props) => ({
+    ...props,
+    observableHistory: di.inject(observableHistoryInjectable),
+    navigate: di.inject(navigateInjectable),
+  }),
+});
diff --git a/src/renderer/navigation/index.ts b/src/renderer/navigation/index.ts
index efa63e34cf..39034f1fbf 100644
--- a/src/renderer/navigation/index.ts
+++ b/src/renderer/navigation/index.ts
@@ -4,17 +4,10 @@
  */
 
 import { asLegacyGlobalFunctionForExtensionApi } from "../../extensions/as-legacy-globals-for-extension-api/as-legacy-global-function-for-extension-api";
-import { asLegacyGlobalForExtensionApi } from "../../extensions/as-legacy-globals-for-extension-api/as-legacy-global-object-for-extension-api";
 import navigateInjectable from "./navigate.injectable";
-import observableHistoryInjectable from "./observable-history.injectable";
 
 export { searchParamsOptions } from "./search-params";
 
-/**
- * @deprecated use `di.inject(observableHistoryInjectable)` instead
- */
-export const navigation = asLegacyGlobalForExtensionApi(observableHistoryInjectable);
-
 /**
  * @deprecated use `di.inject(navigateInjectable)` instead
  */