[WEB-5040] feat: admin react-router migration (#7922)

apps/admin/app/(all)/(dashboard)/ai/layout.tsx

@@ -1,10 +0,0 @@
-import type { ReactNode } from "react";
-import type { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Artificial Intelligence Settings - God Mode",
-};
-
-export default function AILayout({ children }: { children: ReactNode }) {
-  return <>{children}</>;
-}

apps/admin/app/(all)/(dashboard)/ai/page.tsx

@@ -6,9 +6,10 @@ import { Loader } from "@plane/ui";
 // hooks
 import { useInstance } from "@/hooks/store";
 // components
+import type { Route } from "./+types/page";
 import { InstanceAIForm } from "./form";
 
-const InstanceAIPage = observer(() => {
+const InstanceAIPage = observer<React.FC<Route.ComponentProps>>(() => {
   // store
   const { fetchInstanceConfigurations, formattedConfig } = useInstance();
 
@@ -42,4 +43,6 @@ const InstanceAIPage = observer(() => {
   );
 });
 
+export const meta: Route.MetaFunction = () => [{ title: "Artificial Intelligence Settings - God Mode" }];
+
 export default InstanceAIPage;

apps/admin/app/(all)/(dashboard)/authentication/gitea/layout.tsx

@@ -1,10 +0,0 @@
-import type { ReactNode } from "react";
-import type { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Gitea Authentication - God Mode",
-};
-
-export default function GiteaAuthenticationLayout({ children }: { children: ReactNode }) {
-  return <>{children}</>;
-}

apps/admin/app/(all)/(dashboard)/authentication/gitea/page.tsx

@@ -3,18 +3,17 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 import Image from "next/image";
-import { useTheme } from "next-themes";
 import useSWR from "swr";
 // plane internal packages
 import { setPromiseToast } from "@plane/propel/toast";
 import { Loader, ToggleSwitch } from "@plane/ui";
 // components
+import giteaLogo from "@/app/assets/logos/gitea-logo.svg?url";
 import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
 // hooks
 import { useInstance } from "@/hooks/store";
-// icons
-import giteaLogo from "@/public/logos/gitea-logo.svg";
 //local components
+import type { Route } from "./+types/page";
 import { InstanceGiteaConfigForm } from "./form";
 
 const InstanceGiteaAuthenticationPage = observer(() => {
@@ -22,8 +21,6 @@ const InstanceGiteaAuthenticationPage = observer(() => {
   const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
   // state
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
-  // theme
-  const { resolvedTheme } = useTheme();
   // config
   const enableGiteaConfig = formattedConfig?.IS_GITEA_ENABLED ?? "";
   useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
@@ -100,5 +97,6 @@ const InstanceGiteaAuthenticationPage = observer(() => {
     </>
   );
 });
+export const meta: Route.MetaFunction = () => [{ title: "Gitea Authentication - God Mode" }];
 
 export default InstanceGiteaAuthenticationPage;

apps/admin/app/(all)/(dashboard)/authentication/github/layout.tsx

@@ -1,10 +0,0 @@
-import type { ReactNode } from "react";
-import type { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "GitHub Authentication - God Mode",
-};
-
-export default function GitHubAuthenticationLayout({ children }: { children: ReactNode }) {
-  return <>{children}</>;
-}

apps/admin/app/(all)/(dashboard)/authentication/github/page.tsx

@@ -10,16 +10,17 @@ import { setPromiseToast } from "@plane/propel/toast";
 import { Loader, ToggleSwitch } from "@plane/ui";
 import { resolveGeneralTheme } from "@plane/utils";
 // components
+import githubLightModeImage from "@/app/assets/logos/github-black.png?url";
+import githubDarkModeImage from "@/app/assets/logos/github-white.png?url";
 import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
 // hooks
 import { useInstance } from "@/hooks/store";
 // icons
-import githubLightModeImage from "@/public/logos/github-black.png";
-import githubDarkModeImage from "@/public/logos/github-white.png";
 // local components
+import type { Route } from "./+types/page";
 import { InstanceGithubConfigForm } from "./form";
 
-const InstanceGithubAuthenticationPage = observer(() => {
+const InstanceGithubAuthenticationPage = observer<React.FC<Route.ComponentProps>>(() => {
   // store
   const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
   // state
@@ -111,4 +112,6 @@ const InstanceGithubAuthenticationPage = observer(() => {
   );
 });
 
+export const meta: Route.MetaFunction = () => [{ title: "GitHub Authentication - God Mode" }];
+
 export default InstanceGithubAuthenticationPage;

apps/admin/app/(all)/(dashboard)/authentication/gitlab/layout.tsx

@@ -1,10 +0,0 @@
-import type { ReactNode } from "react";
-import type { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "GitLab Authentication - God Mode",
-};
-
-export default function GitlabAuthenticationLayout({ children }: { children: ReactNode }) {
-  return <>{children}</>;
-}

apps/admin/app/(all)/(dashboard)/authentication/gitlab/page.tsx

@@ -7,15 +7,16 @@ import useSWR from "swr";
 import { setPromiseToast } from "@plane/propel/toast";
 import { Loader, ToggleSwitch } from "@plane/ui";
 // components
+import GitlabLogo from "@/app/assets/logos/gitlab-logo.svg?url";
 import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
 // hooks
 import { useInstance } from "@/hooks/store";
 // icons
-import GitlabLogo from "@/public/logos/gitlab-logo.svg";
 // local components
+import type { Route } from "./+types/page";
 import { InstanceGitlabConfigForm } from "./form";
 
-const InstanceGitlabAuthenticationPage = observer(() => {
+const InstanceGitlabAuthenticationPage = observer<React.FC<Route.ComponentProps>>(() => {
   // store
   const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
   // state
@@ -99,4 +100,6 @@ const InstanceGitlabAuthenticationPage = observer(() => {
   );
 });
 
+export const meta: Route.MetaFunction = () => [{ title: "GitLab Authentication - God Mode" }];
+
 export default InstanceGitlabAuthenticationPage;

apps/admin/app/(all)/(dashboard)/authentication/google/layout.tsx

@@ -1,10 +0,0 @@
-import type { ReactNode } from "react";
-import type { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Google Authentication - God Mode",
-};
-
-export default function GoogleAuthenticationLayout({ children }: { children: ReactNode }) {
-  return <>{children}</>;
-}

apps/admin/app/(all)/(dashboard)/authentication/google/page.tsx

@@ -7,15 +7,16 @@ import useSWR from "swr";
 import { setPromiseToast } from "@plane/propel/toast";
 import { Loader, ToggleSwitch } from "@plane/ui";
 // components
+import GoogleLogo from "@/app/assets/logos/google-logo.svg?url";
 import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
 // hooks
 import { useInstance } from "@/hooks/store";
 // icons
-import GoogleLogo from "@/public/logos/google-logo.svg";
 // local components
+import type { Route } from "./+types/page";
 import { InstanceGoogleConfigForm } from "./form";
 
-const InstanceGoogleAuthenticationPage = observer(() => {
+const InstanceGoogleAuthenticationPage = observer<React.FC<Route.ComponentProps>>(() => {
   // store
   const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
   // state
@@ -100,4 +101,6 @@ const InstanceGoogleAuthenticationPage = observer(() => {
   );
 });
 
+export const meta: Route.MetaFunction = () => [{ title: "Google Authentication - God Mode" }];
+
 export default InstanceGoogleAuthenticationPage;

apps/admin/app/(all)/(dashboard)/authentication/layout.tsx

@@ -1,10 +0,0 @@
-import type { ReactNode } from "react";
-import type { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Authentication Settings - Plane Web",
-};
-
-export default function AuthenticationLayout({ children }: { children: ReactNode }) {
-  return <>{children}</>;
-}

apps/admin/app/(all)/(dashboard)/authentication/page.tsx

@@ -12,8 +12,9 @@ import { cn } from "@plane/utils";
 import { useInstance } from "@/hooks/store";
 // plane admin components
 import { AuthenticationModes } from "@/plane-admin/components/authentication";
+import type { Route } from "./+types/page";
 
-const InstanceAuthenticationPage = observer(() => {
+const InstanceAuthenticationPage = observer<React.FC<Route.ComponentProps>>(() => {
   // store
   const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
 
@@ -111,4 +112,6 @@ const InstanceAuthenticationPage = observer(() => {
   );
 });
 
+export const meta: Route.MetaFunction = () => [{ title: "Authentication Settings - Plane Web" }];
+
 export default InstanceAuthenticationPage;

apps/admin/app/(all)/(dashboard)/email/layout.tsx

@@ -1,14 +0,0 @@
-import type { ReactNode } from "react";
-import type { Metadata } from "next";
-
-interface EmailLayoutProps {
-  children: ReactNode;
-}
-
-export const metadata: Metadata = {
-  title: "Email Settings - God Mode",
-};
-
-export default function EmailLayout({ children }: EmailLayoutProps) {
-  return <>{children}</>;
-}

apps/admin/app/(all)/(dashboard)/email/page.tsx

@@ -8,9 +8,10 @@ import { Loader, ToggleSwitch } from "@plane/ui";
 // hooks
 import { useInstance } from "@/hooks/store";
 // components
+import type { Route } from "./+types/page";
 import { InstanceEmailForm } from "./email-config-form";
 
-const InstanceEmailPage: React.FC = observer(() => {
+const InstanceEmailPage = observer<React.FC<Route.ComponentProps>>(() => {
   // store
   const { fetchInstanceConfigurations, formattedConfig, disableEmail } = useInstance();
 
@@ -91,4 +92,6 @@ const InstanceEmailPage: React.FC = observer(() => {
   );
 });
 
+export const meta: Route.MetaFunction = () => [{ title: "Email Settings - God Mode" }];
+
 export default InstanceEmailPage;

apps/admin/app/(all)/(dashboard)/general/layout.tsx

@@ -1,10 +0,0 @@
-import type { ReactNode } from "react";
-import type { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "General Settings - God Mode",
-};
-
-export default function GeneralLayout({ children }: { children: ReactNode }) {
-  return <>{children}</>;
-}

apps/admin/app/(all)/(dashboard)/general/page.tsx

@@ -3,6 +3,7 @@ import { observer } from "mobx-react";
 // hooks
 import { useInstance } from "@/hooks/store";
 // components
+import type { Route } from "./+types/page";
 import { GeneralConfigurationForm } from "./form";
 
 function GeneralPage() {
@@ -28,4 +29,6 @@ function GeneralPage() {
   );
 }
 
+export const meta: Route.MetaFunction = () => [{ title: "General Settings - God Mode" }];
+
 export default observer(GeneralPage);

apps/admin/app/(all)/(dashboard)/header.tsx

@@ -44,6 +44,8 @@ export const AdminHeader: FC = observer(() => {
         return "GitHub";
       case "gitlab":
         return "GitLab";
+      case "gitea":
+        return "Gitea";
       case "workspace":
         return "Workspace";
       case "create":

apps/admin/app/(all)/(dashboard)/image/layout.tsx

@@ -1,14 +0,0 @@
-import type { ReactNode } from "react";
-import type { Metadata } from "next";
-
-interface ImageLayoutProps {
-  children: ReactNode;
-}
-
-export const metadata: Metadata = {
-  title: "Images Settings - God Mode",
-};
-
-export default function ImageLayout({ children }: ImageLayoutProps) {
-  return <>{children}</>;
-}

apps/admin/app/(all)/(dashboard)/image/page.tsx

@@ -6,9 +6,10 @@ import { Loader } from "@plane/ui";
 // hooks
 import { useInstance } from "@/hooks/store";
 // local
+import type { Route } from "./+types/page";
 import { InstanceImageConfigForm } from "./form";
 
-const InstanceImagePage = observer(() => {
+const InstanceImagePage = observer<React.FC<Route.ComponentProps>>(() => {
   // store
   const { formattedConfig, fetchInstanceConfigurations } = useInstance();
 
@@ -38,4 +39,6 @@ const InstanceImagePage = observer(() => {
   );
 });
 
+export const meta: Route.MetaFunction = () => [{ title: "Images Settings - God Mode" }];
+
 export default InstanceImagePage;

apps/admin/app/(all)/(dashboard)/layout.tsx

@@ -1,34 +1,28 @@
 "use client";
 
-import type { FC, ReactNode } from "react";
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";
+import { Outlet } from "react-router";
 // components
 import { LogoSpinner } from "@/components/common/logo-spinner";
 import { NewUserPopup } from "@/components/new-user-popup";
 // hooks
 import { useUser } from "@/hooks/store";
 // local components
+import type { Route } from "./+types/layout";
 import { AdminHeader } from "./header";
 import { AdminSidebar } from "./sidebar";
 
-type TAdminLayout = {
-  children: ReactNode;
-};
-
-const AdminLayout: FC<TAdminLayout> = (props) => {
-  const { children } = props;
+const AdminLayout: React.FC<Route.ComponentProps> = () => {
   // router
-  const router = useRouter();
+  const { replace } = useRouter();
   // store hooks
   const { isUserLoggedIn } = useUser();
 
   useEffect(() => {
-    if (isUserLoggedIn === false) {
-      router.push("/");
-    }
-  }, [router, isUserLoggedIn]);
+    if (isUserLoggedIn === false) replace("/");
+  }, [replace, isUserLoggedIn]);
 
   if (isUserLoggedIn === undefined) {
     return (
@@ -44,7 +38,9 @@ const AdminLayout: FC<TAdminLayout> = (props) => {
         <AdminSidebar />
         <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
           <AdminHeader />
-          <div className="h-full w-full overflow-hidden">{children}</div>
+          <div className="h-full w-full overflow-hidden">
+            <Outlet />
+          </div>
         </main>
         <NewUserPopup />
       </div>

apps/admin/app/(all)/(dashboard)/workspace/create/page.tsx

@@ -2,9 +2,10 @@
 
 import { observer } from "mobx-react";
 // components
+import type { Route } from "./+types/page";
 import { WorkspaceCreateForm } from "./form";
 
-const WorkspaceCreatePage = observer(() => (
+const WorkspaceCreatePage = observer<React.FC<Route.ComponentProps>>(() => (
   <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
     <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
       <div className="text-xl font-medium text-custom-text-100">Create a new workspace on this instance.</div>
@@ -18,4 +19,6 @@ const WorkspaceCreatePage = observer(() => (
   </div>
 ));
 
+export const meta: Route.MetaFunction = () => [{ title: "Create Workspace - God Mode" }];
+
 export default WorkspaceCreatePage;

apps/admin/app/(all)/(dashboard)/workspace/layout.tsx

@@ -1,10 +0,0 @@
-import type { ReactNode } from "react";
-import type { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Workspace Management - God Mode",
-};
-
-export default function WorkspaceManagementLayout({ children }: { children: ReactNode }) {
-  return <>{children}</>;
-}

apps/admin/app/(all)/(dashboard)/workspace/page.tsx

@@ -16,8 +16,9 @@ import { cn } from "@plane/utils";
 import { WorkspaceListItem } from "@/components/workspace/list-item";
 // hooks
 import { useInstance, useWorkspace } from "@/hooks/store";
+import type { Route } from "./+types/page";
 
-const WorkspaceManagementPage = observer(() => {
+const WorkspaceManagementPage = observer<React.FC<Route.ComponentProps>>(() => {
   // states
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
   // store
@@ -167,4 +168,6 @@ const WorkspaceManagementPage = observer(() => {
   );
 });
 
+export const meta: Route.MetaFunction = () => [{ title: "Workspace Management - God Mode" }];
+
 export default WorkspaceManagementPage;