From 16842c22d5dde843c22e1361754031638d0382cf Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 25 Feb 2025 00:11:49 +0000
Subject: [PATCH 1/2] refactor(common): convert routing to TypeScript

---
 .../common/routing/{index.js => index.js.flow}      |  0
 src/elements/common/routing/index.ts                |  1 +
 ...withRouterAndRef.js => withRouterAndRef.js.flow} |  0
 src/elements/common/routing/withRouterAndRef.tsx    | 13 +++++++++++++
 4 files changed, 14 insertions(+)
 rename src/elements/common/routing/{index.js => index.js.flow} (100%)
 create mode 100644 src/elements/common/routing/index.ts
 rename src/elements/common/routing/{withRouterAndRef.js => withRouterAndRef.js.flow} (100%)
 create mode 100644 src/elements/common/routing/withRouterAndRef.tsx

diff --git a/src/elements/common/routing/index.js b/src/elements/common/routing/index.js.flow
similarity index 100%
rename from src/elements/common/routing/index.js
rename to src/elements/common/routing/index.js.flow
diff --git a/src/elements/common/routing/index.ts b/src/elements/common/routing/index.ts
new file mode 100644
index 0000000000..2dfdd524f7
--- /dev/null
+++ b/src/elements/common/routing/index.ts
@@ -0,0 +1 @@
+export { default as withRouterAndRef } from './withRouterAndRef';
diff --git a/src/elements/common/routing/withRouterAndRef.js b/src/elements/common/routing/withRouterAndRef.js.flow
similarity index 100%
rename from src/elements/common/routing/withRouterAndRef.js
rename to src/elements/common/routing/withRouterAndRef.js.flow
diff --git a/src/elements/common/routing/withRouterAndRef.tsx b/src/elements/common/routing/withRouterAndRef.tsx
new file mode 100644
index 0000000000..41a848528c
--- /dev/null
+++ b/src/elements/common/routing/withRouterAndRef.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Route } from 'react-router-dom';
+
+// Basically a workaround for the fact that react-router's withRouter cannot forward ref's through
+// functional components. Use this instead to gain the benefits of withRouter but also ref forwarding
+export default function withRouterAndRef(Wrapped: React.ComponentType<Record<string, unknown>>) {
+    const WithRouterAndRef = React.forwardRef((props: Record<string, unknown>, ref: React.Ref<unknown>) => (
+        <Route>{routeProps => <Wrapped ref={ref} {...routeProps} {...props} />}</Route>
+    ));
+    const name = Wrapped.displayName || Wrapped.name || 'Component';
+    WithRouterAndRef.displayName = `withRouterAndRef(${name})`;
+    return WithRouterAndRef;
+}

From 32265ec078bda484190a2e1605446075f346e110 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 25 Feb 2025 00:32:28 +0000
Subject: [PATCH 2/2] fix(common): correct Flow type syntax in routing
 component

---
 src/elements/common/routing/withRouterAndRef.js.flow | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/elements/common/routing/withRouterAndRef.js.flow b/src/elements/common/routing/withRouterAndRef.js.flow
index 01df2dcfb5..c9ccf17d25 100644
--- a/src/elements/common/routing/withRouterAndRef.js.flow
+++ b/src/elements/common/routing/withRouterAndRef.js.flow
@@ -5,7 +5,7 @@ import { Route } from 'react-router-dom';
 // Basically a workaround for the fact that react-router's withRouter cannot forward ref's through
 // functional components. Use this instead to gain the benefits of withRouter but also ref forwarding
 export default function withRouterAndRef(Wrapped: React.ComponentType<any>) {
-    const WithRouterAndRef = React.forwardRef<Object, React.Ref<any>>((props, ref) => (
+    const WithRouterAndRef = React.forwardRef((props: any, ref: React.Ref<any>) => (
         <Route>{routeProps => <Wrapped ref={ref} {...routeProps} {...props} />}</Route>
     ));
     const name = Wrapped.displayName || Wrapped.name || 'Component';