feat: migrate admin to react-router

Author: lifeiscontent

.dockerignore

@@ -61,3 +61,9 @@ temp/
 # Misc
 *.pem
 *.key
+
+# React Router - https://github.com/remix-run/react-router-templates/blob/dc79b1a065f59f3bfd840d4ef75cc27689b611e6/default/.dockerignore
+.react-router/
+build/
+node_modules/
+README.md

.gitignore

@@ -101,3 +101,6 @@ dev-editor
 storybook-static
 
 CLAUDE.md
+
+build/
+.react-router/

apps/admin/.dockerignore

@@ -0,0 +1,5 @@
+# React Router - https://github.com/remix-run/react-router-templates/blob/dc79b1a065f59f3bfd840d4ef75cc27689b611e6/default/.dockerignore
+.react-router/
+build/
+node_modules/
+README.md

apps/admin/.eslintrc.cjs

@@ -0,0 +1,25 @@
+module.exports = {
+  root: true,
+  extends: ["@plane/eslint-config/next.js"],
+  ignorePatterns: [
+    "build/**",
+    "dist/**",
+    ".vite/**",
+  ],
+  rules: {
+    "no-duplicate-imports": "off",
+    "import/no-duplicates": ["error", {"prefer-inline": false}],
+    "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
+    "@typescript-eslint/no-import-type-side-effects": "error",
+    "@typescript-eslint/consistent-type-imports": [
+      "error",
+      {
+        prefer: "type-imports",
+        fixStyle: "separate-type-imports",
+        disallowTypeAnnotations: false,
+      },
+    ],
+  },
+};
+
+

apps/admin/.eslintrc.js

@@ -63,41 +63,11 @@ RUN pnpm turbo run build --filter=admin
 # *****************************************************************************
 # STAGE 3: Copy the project and start it
 # *****************************************************************************
-FROM base AS runner
-WORKDIR /app
-
-# Don't run production as root
-RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 nextjs
-USER nextjs
-
-# Automatically leverage output traces to reduce image size
-# https://nextjs.org/docs/advanced-features/output-file-tracing
-COPY --from=installer /app/apps/admin/.next/standalone ./
-COPY --from=installer /app/apps/admin/.next/static ./apps/admin/.next/static
-COPY --from=installer /app/apps/admin/public ./apps/admin/public
-
-ARG NEXT_PUBLIC_API_BASE_URL=""
-ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
-
-ARG NEXT_PUBLIC_ADMIN_BASE_URL=""
-ENV NEXT_PUBLIC_ADMIN_BASE_URL=$NEXT_PUBLIC_ADMIN_BASE_URL
-
-ARG NEXT_PUBLIC_ADMIN_BASE_PATH="/god-mode"
-ENV NEXT_PUBLIC_ADMIN_BASE_PATH=$NEXT_PUBLIC_ADMIN_BASE_PATH
+FROM nginx:1.27-alpine AS runner
 
-ARG NEXT_PUBLIC_SPACE_BASE_URL=""
-ENV NEXT_PUBLIC_SPACE_BASE_URL=$NEXT_PUBLIC_SPACE_BASE_URL
-
-ARG NEXT_PUBLIC_SPACE_BASE_PATH="/spaces"
-ENV NEXT_PUBLIC_SPACE_BASE_PATH=$NEXT_PUBLIC_SPACE_BASE_PATH
-
-ARG NEXT_PUBLIC_WEB_BASE_URL=""
-ENV NEXT_PUBLIC_WEB_BASE_URL=$NEXT_PUBLIC_WEB_BASE_URL
-
-ENV NEXT_TELEMETRY_DISABLED=1
-ENV TURBO_TELEMETRY_DISABLED=1
+COPY --from=installer /app/apps/admin/build/client /usr/share/nginx/html
+COPY apps/admin/deploy/nginx.default.conf.template /etc/nginx/templates/default.conf.template
 
 EXPOSE 3000
 
-CMD ["node", "apps/admin/server.js"]
+# default nginx entrypoint/cmd

apps/admin/Dockerfile.admin

@@ -1,12 +1,12 @@
 "use client";
-import { FC } from "react";
 import { useForm } from "react-hook-form";
 import { Lightbulb } from "lucide-react";
 import { Button } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { IFormattedInstanceConfiguration, TInstanceAIConfigurationKeys } from "@plane/types";
+import type { IFormattedInstanceConfiguration, TInstanceAIConfigurationKeys } from "@plane/types";
 // components
-import { ControllerInput, TControllerInputFormField } from "@/components/common/controller-input";
+import type { TControllerInputFormField } from "@/components/common/controller-input";
+import { ControllerInput } from "@/components/common/controller-input";
 // hooks
 import { useInstance } from "@/hooks/store";
 
@@ -16,7 +16,7 @@ type IInstanceAIForm = {
 
 type AIFormValues = Record<TInstanceAIConfigurationKeys, string>;
 
-export const InstanceAIForm: FC<IInstanceAIForm> = (props) => {
+export const InstanceAIForm: React.FC<IInstanceAIForm> = (props) => {
   const { config } = props;
   // store
   const { updateInstanceConfigurations } = useInstance();

apps/admin/app/(all)/(dashboard)/ai/form.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)/ai/layout.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { FC, useState } from "react";
+import { useState } from "react";
 import { isEmpty } from "lodash-es";
 import Link from "next/link";
 import { useForm } from "react-hook-form";
@@ -9,14 +9,16 @@ import { Monitor } from "lucide-react";
 import { API_BASE_URL } from "@plane/constants";
 import { Button, getButtonStyling } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { IFormattedInstanceConfiguration, TInstanceGithubAuthenticationConfigurationKeys } from "@plane/types";
+import type { IFormattedInstanceConfiguration, TInstanceGithubAuthenticationConfigurationKeys } from "@plane/types";
 
 import { cn } from "@plane/utils";
 // components
 import { CodeBlock } from "@/components/common/code-block";
 import { ConfirmDiscardModal } from "@/components/common/confirm-discard-modal";
-import { ControllerInput, TControllerInputFormField } from "@/components/common/controller-input";
-import { CopyField, TCopyField } from "@/components/common/copy-field";
+import { ControllerInput } from "@/components/common/controller-input";
+import type { TControllerInputFormField } from "@/components/common/controller-input";
+import { CopyField } from "@/components/common/copy-field";
+import type { TCopyField } from "@/components/common/copy-field";
 // hooks
 import { useInstance } from "@/hooks/store";
 
@@ -26,7 +28,7 @@ type Props = {
 
 type GithubConfigFormValues = Record<TInstanceGithubAuthenticationConfigurationKeys, string>;
 
-export const InstanceGithubConfigForm: FC<Props> = (props) => {
+export const InstanceGithubConfigForm: React.FC<Props> = (props) => {
   const { config } = props;
   // states
   const [isDiscardChangesModalOpen, setIsDiscardChangesModalOpen] = useState(false);