feat: admin react-router migration

Author: lifeiscontent

.dockerignore

@@ -66,4 +66,4 @@ temp/
 .react-router/
 build/
 node_modules/
-README.md
+README.md

.gitignore

@@ -102,3 +102,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

@@ -1,103 +1,86 @@
-# syntax=docker/dockerfile:1.7
 FROM node:22-alpine AS base
 
-# Setup pnpm package manager with corepack and configure global bin directory for caching
+WORKDIR /app
+
+ENV TURBO_TELEMETRY_DISABLED=1
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
-RUN corepack enable
+ENV CI=1
+
+RUN corepack enable pnpm
+
+# =========================================================================== #
 
-# *****************************************************************************
-# STAGE 1: Build the project
-# *****************************************************************************
 FROM base AS builder
-RUN apk add --no-cache libc6-compat
-WORKDIR /app
 
-ARG TURBO_VERSION=2.5.6
-RUN corepack enable pnpm && pnpm add -g turbo@${TURBO_VERSION}
+RUN pnpm add -g turbo@2.5.8
+
 COPY . .
 
+# Create a pruned workspace for just the admin app
 RUN turbo prune --scope=admin --docker
 
-# *****************************************************************************
-# STAGE 2: Install dependencies & build the project
-# *****************************************************************************
-FROM base AS installer
-
-RUN apk add --no-cache libc6-compat
-WORKDIR /app
+# =========================================================================== #
 
-COPY .gitignore .gitignore
-COPY --from=builder /app/out/json/ .
-COPY --from=builder /app/out/pnpm-lock.yaml ./pnpm-lock.yaml
-RUN corepack enable pnpm
-RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store pnpm fetch --store-dir=/pnpm/store
+FROM base AS installer
 
-COPY --from=builder /app/out/full/ .
-COPY turbo.json turbo.json
-RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store pnpm install --offline --frozen-lockfile --store-dir=/pnpm/store
+# Build in production mode; we still install dev deps explicitly below
+ENV NODE_ENV=production
 
+# Public envs required at build time (pick up via process.env)
 ARG NEXT_PUBLIC_API_BASE_URL=""
 ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
+ARG NEXT_PUBLIC_API_BASE_PATH="/api"
+ENV NEXT_PUBLIC_API_BASE_PATH=$NEXT_PUBLIC_API_BASE_PATH
 
 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
 
 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_LIVE_BASE_URL=""
+ENV NEXT_PUBLIC_LIVE_BASE_URL=$NEXT_PUBLIC_LIVE_BASE_URL
+ARG NEXT_PUBLIC_LIVE_BASE_PATH="/live"
+ENV NEXT_PUBLIC_LIVE_BASE_PATH=$NEXT_PUBLIC_LIVE_BASE_PATH
+
 ARG NEXT_PUBLIC_WEB_BASE_URL=""
 ENV NEXT_PUBLIC_WEB_BASE_URL=$NEXT_PUBLIC_WEB_BASE_URL
+ARG NEXT_PUBLIC_WEB_BASE_PATH=""
+ENV NEXT_PUBLIC_WEB_BASE_PATH=$NEXT_PUBLIC_WEB_BASE_PATH
 
-ENV NEXT_TELEMETRY_DISABLED=1
-ENV TURBO_TELEMETRY_DISABLED=1
-
-RUN pnpm turbo run build --filter=admin
+ARG NEXT_PUBLIC_WEBSITE_URL="https://plane.so"
+ENV NEXT_PUBLIC_WEBSITE_URL=$NEXT_PUBLIC_WEBSITE_URL
+ARG NEXT_PUBLIC_SUPPORT_EMAIL="[email protected]"
+ENV NEXT_PUBLIC_SUPPORT_EMAIL=$NEXT_PUBLIC_SUPPORT_EMAIL
 
-# *****************************************************************************
-# 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
+COPY .gitignore .gitignore
+COPY --from=builder /app/out/json/ .
+COPY --from=builder /app/out/pnpm-lock.yaml ./pnpm-lock.yaml
 
-ARG NEXT_PUBLIC_ADMIN_BASE_PATH="/god-mode"
-ENV NEXT_PUBLIC_ADMIN_BASE_PATH=$NEXT_PUBLIC_ADMIN_BASE_PATH
+# Fetch dependencies to cache store, then install offline with dev deps
+RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store pnpm fetch --store-dir=/pnpm/store
+COPY --from=builder /app/out/full/ .
+COPY turbo.json turbo.json
+RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store pnpm install --offline --frozen-lockfile --store-dir=/pnpm/store --prod=false
 
-ARG NEXT_PUBLIC_SPACE_BASE_URL=""
-ENV NEXT_PUBLIC_SPACE_BASE_URL=$NEXT_PUBLIC_SPACE_BASE_URL
+# Build only the admin package
+RUN pnpm turbo run build --filter=admin
 
-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
+FROM nginx:1.27-alpine AS production
 
-ENV NEXT_TELEMETRY_DISABLED=1
-ENV TURBO_TELEMETRY_DISABLED=1
+COPY apps/admin/nginx/nginx.conf /etc/nginx/nginx.conf
+COPY --from=installer /app/apps/admin/build/client /usr/share/nginx/html
 
 EXPOSE 3000
 
-CMD ["node", "apps/admin/server.js"]
+HEALTHCHECK --interval=30s --timeout=5s --start-period=10s --retries=3 \
+  CMD curl -fsS http://127.0.0.1:3000/ >/dev/null || exit 1
+
+CMD ["nginx", "-g", "daemon off;"]

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);