chore: export comment display component props

Bumps the npm_and_yarn group with 1 update in the / directory: [@sentry/node](https://github.com/getsentry/sentry-javascript).


Updates `@sentry/node` from 10.24.0 to 10.27.0
- [Release notes](https://github.com/getsentry/sentry-javascript/releases)
- [Changelog](https://github.com/getsentry/sentry-javascript/blob/develop/CHANGELOG.md)
- [Commits](https://github.com/getsentry/sentry-javascript/compare/10.24.0...10.27.0)

---
updated-dependencies:
- dependency-name: "@sentry/node"
  dependency-version: 10.27.0
  dependency-type: direct:production
  dependency-group: npm_and_yarn
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.codespellrc

@@ -0,0 +1,7 @@
+[codespell]
+# Ref: https://github.com/codespell-project/codespell#using-a-config-file
+skip = .git*,*.svg,i18n,*-lock.yaml,*.css,.codespellrc,migrations,*.js,*.map,*.mjs
+check-hidden = true
+# ignore all CamelCase and camelCase
+ignore-regex = \b[A-Za-z][a-z]+[A-Z][a-zA-Z]+\b
+ignore-words-list = tread

.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

.env.example

@@ -29,10 +29,9 @@ AWS_S3_BUCKET_NAME="uploads"
 FILE_SIZE_LIMIT=5242880
 
 # GPT settings
-SILO_BASE_URL=
 OPENAI_API_BASE="https://api.openai.com/v1" # deprecated
 OPENAI_API_KEY="sk-" # deprecated
-GPT_ENGINE="gpt-4o-mini" # deprecated
+GPT_ENGINE="gpt-3.5-turbo" # deprecated
 
 # Settings related to Docker
 DOCKERIZED=1  # deprecated
@@ -53,16 +52,5 @@ CERT_ACME_DNS=
 # Force HTTPS for handling SSL Termination
 MINIO_ENDPOINT_SSL=0
 
-# Imports Config
-SILO_BASE_URL=
-
-# Force HTTPS for handling SSL Termination
-MINIO_ENDPOINT_SSL=0
-
 # API key rate limit
 API_KEY_RATE_LIMIT="60/minute"
-
-# Mongo DB
-MONGO_DB_URL="mongodb://plane-mongodb:27017/"
-SILO_DB=silo
-SILO_DB_URL=postgresql://plane:plane@plane-db/silo

.github/actions/build-push-cloud/action.yml

@@ -1,127 +0,0 @@
-name: "Build and Push Docker Image"
-description: "Reusable action for building and pushing Docker images"
-inputs:
-  docker-username:
-    description: "The Dockerhub username"
-    required: true
-  dockerhub-token:
-    description: "The Dockerhub Token"
-    required: true
-
-  # Docker Image Options
-  docker-image-owner:
-    description: "The owner of the Docker image"
-    required: true
-  docker-image-name:
-    description: "The name of the Docker image"
-    required: true
-  build-context:
-    description: "The build context"
-    required: true
-    default: "."
-  dockerfile-path:
-    description: "The path to the Dockerfile"
-    required: true
-  build-args:
-    description: "The build arguments"
-    required: false
-    default: ""
-
-  # Buildx Options
-  buildx-driver:
-    description: "Buildx driver"
-    required: true
-    default: "docker-container"
-  buildx-version:
-    description: "Buildx version"
-    required: true
-    default: "latest"
-  buildx-platforms:
-    description: "Buildx platforms"
-    required: true
-    default: "linux/amd64"
-  buildx-endpoint:
-    description: "Buildx endpoint"
-    required: true
-    default: "default"
-
-  # Release Build Options
-  build-release:
-    description: "Flag to publish release"
-    required: false
-    default: "false"
-  build-prerelease:
-    description: "Flag to publish prerelease"
-    required: false
-    default: "false"
-  release-version:
-    description: "The release version"
-    required: false
-    default: "latest"
-
-runs:
-  using: "composite"
-  steps:
-  - name: Set Docker Tag
-    shell: bash
-    env:
-      IMG_OWNER: ${{ inputs.docker-image-owner }}
-      IMG_NAME: ${{ inputs.docker-image-name }}
-      BUILD_RELEASE: ${{ inputs.build-release }}
-      IS_PRERELEASE: ${{ inputs.build-prerelease }}
-      REL_VERSION: ${{ inputs.release-version }}
-    run: |
-      FLAT_BRANCH_VERSION=$(echo "${{ github.ref_name }}" | sed 's/[^a-zA-Z0-9.-]//g')
-
-      if [ "${{ env.BUILD_RELEASE }}" == "true" ]; then
-        semver_regex="^v([0-9]+)\.([0-9]+)\.([0-9]+)(-[a-zA-Z0-9]+(-[a-zA-Z0-9]+)*)?$"
-        if [[ ! ${{ env.REL_VERSION }} =~ $semver_regex ]]; then
-          echo "Invalid Release Version Format : ${{ env.REL_VERSION }}"
-          echo "Please provide a valid SemVer version"
-          echo "e.g. v1.2.3 or v1.2.3-alpha-1"
-          echo "Exiting the build process"
-          exit 1  # Exit with status 1 to fail the step
-        fi
-
-        TAG=${{ env.IMG_OWNER }}/${{ env.IMG_NAME }}:${{ env.REL_VERSION }}
-
-        if [ "${{ env.IS_PRERELEASE }}" != "true" ]; then
-          TAG=${TAG},${{ env.IMG_OWNER }}/${{ env.IMG_NAME }}:stable
-        fi
-      elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-        TAG=${{ env.IMG_OWNER }}/${{ env.IMG_NAME }}:latest
-      else
-        TAG=${{ env.IMG_OWNER }}/${{ env.IMG_NAME }}:${FLAT_BRANCH_VERSION}
-      fi
-
-      echo "DOCKER_TAGS=${TAG}" >> $GITHUB_ENV
-
-  - name: Login to Docker Hub
-    uses: docker/login-action@v3
-    with:
-      username: ${{ inputs.docker-username }}
-      password: ${{ inputs.dockerhub-token}}
-
-  - name: Set up Docker Buildx
-    uses: docker/setup-buildx-action@v3
-    with:
-      driver: ${{ inputs.buildx-driver }}
-      version: ${{ inputs.buildx-version }}
-      endpoint: ${{ inputs.buildx-endpoint }}
-
-  - name: Check out the repo
-    uses: actions/checkout@v4
-
-  - name: Build and Push Docker Image
-    uses: docker/build-push-action@v5.1.0
-    with:
-      context: ${{ inputs.build-context }}
-      file: ${{ inputs.dockerfile-path }}
-      platforms: ${{ inputs.buildx-platforms }}
-      tags: ${{ env.DOCKER_TAGS }}
-      push: true
-      build-args: ${{ inputs.build-args }}
-    env:
-      DOCKER_BUILDKIT: 1
-      DOCKER_USERNAME: ${{ inputs.docker-username }}
-      DOCKER_PASSWORD: ${{ inputs.dockerhub-token }}

.github/actions/build-push-ee/action.yml

@@ -1,168 +0,0 @@
-name: "Build and Push Docker Image"
-description: "Reusable action for building and pushing Docker images"
-inputs:
-  docker-username:
-    description: "The Dockerhub username"
-    required: true
-  dockerhub-token:
-    description: "The Dockerhub Token"
-    required: true
-
-  # Harbor Options
-  harbor-push:
-    description: "Flag to push to Harbor"
-    required: false
-    default: "false"
-  harbor-username:
-    description: "The Harbor username"
-    required: false
-  harbor-token:
-    description: "The Harbor token"
-    required: false
-  harbor-registry:
-    description: "The Harbor registry"
-    required: false
-    default: "registry.plane.tools"
-  harbor-project:
-    description: "The Harbor project"
-    required: false
-
-  # Docker Image Options
-  docker-image-owner:
-    description: "The owner of the Docker image"
-    required: true
-  docker-image-name:
-    description: "The name of the Docker image"
-    required: true
-  build-context:
-    description: "The build context"
-    required: true
-    default: "."
-  dockerfile-path:
-    description: "The path to the Dockerfile"
-    required: true
-  build-args:
-    description: "The build arguments"
-    required: false
-    default: ""
-  
-  # Buildx Options
-  buildx-driver:
-    description: "Buildx driver"
-    required: true
-    default: "docker-container"
-  buildx-version:
-    description: "Buildx version"
-    required: true
-    default: "latest"
-  buildx-platforms:
-    description: "Buildx platforms"
-    required: true
-    default: "linux/amd64"
-  buildx-endpoint:
-    description: "Buildx endpoint"
-    required: true
-    default: "default"
-
-  # Release Build Options
-  build-release:
-    description: "Flag to publish release"
-    required: false
-    default: "false"
-  build-prerelease:
-    description: "Flag to publish prerelease"
-    required: false
-    default: "false"
-  release-version:
-    description: "The release version"
-    required: false
-    default: "latest"
-
-runs:
-  using: "composite"
-  steps:
-    - name: Set Docker Tag
-      shell: bash
-      env:
-        IMG_OWNER: ${{ inputs.docker-image-owner }}
-        IMG_NAME: ${{ inputs.docker-image-name }}
-        HARBOR_PUSH: ${{ inputs.harbor-push }}
-        HARBOR_REGISTRY: ${{ inputs.harbor-registry }}
-        HARBOR_PROJECT: ${{ inputs.harbor-project }}
-        BUILD_RELEASE: ${{ inputs.build-release }}
-        IS_PRERELEASE: ${{ inputs.build-prerelease }}
-        REL_VERSION: ${{ inputs.release-version }}
-      run: |
-        FLAT_BRANCH_VERSION=$(echo "${{ github.ref_name }}" | sed 's/[^a-zA-Z0-9.-]//g')
-
-        if [ "${{ env.BUILD_RELEASE }}" == "true" ]; then
-          semver_regex="^v([0-9]+)\.([0-9]+)\.([0-9]+)(-[a-zA-Z0-9]+(-[a-zA-Z0-9]+)*)?$"
-          if [[ ! ${{ env.REL_VERSION }} =~ $semver_regex ]]; then
-            echo "Invalid Release Version Format : ${{ env.REL_VERSION }}"
-            echo "Please provide a valid SemVer version"
-            echo "e.g. v1.2.3 or v1.2.3-alpha-1"
-            echo "Exiting the build process"
-            exit 1  # Exit with status 1 to fail the step
-          fi
-
-          TAG=${{ env.IMG_OWNER }}/${{ env.IMG_NAME }}:${{ env.REL_VERSION }}
-
-          if [ "${{ env.HARBOR_PUSH }}" == "true" ]; then
-            TAG=${TAG},${{ env.HARBOR_REGISTRY }}/${{ env.HARBOR_PROJECT }}/${{ env.IMG_NAME }}:${{ env.REL_VERSION }}
-          fi
-
-          if [ "${{ env.IS_PRERELEASE }}" != "true" ]; then
-            TAG=${TAG},${{ env.IMG_OWNER }}/${{ env.IMG_NAME }}:stable
-            if [ "${{ env.HARBOR_PUSH }}" == "true" ]; then
-              TAG=${TAG},${{ env.HARBOR_REGISTRY }}/${{ env.HARBOR_PROJECT }}/${{ env.IMG_NAME }}:stable
-            fi
-          fi
-        elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-          TAG=${{ env.IMG_OWNER }}/${{ env.IMG_NAME }}:latest
-          if [ "${{ env.HARBOR_PUSH }}" == "true" ]; then
-            TAG=${TAG},${{ env.HARBOR_REGISTRY }}/${{ env.HARBOR_PROJECT }}/${{ env.IMG_NAME }}:latest
-          fi
-        else
-          TAG=${{ env.IMG_OWNER }}/${{ env.IMG_NAME }}:${FLAT_BRANCH_VERSION}
-          if [ "${{ env.HARBOR_PUSH }}" == "true" ]; then
-            TAG=${TAG},${{ env.HARBOR_REGISTRY }}/${{ env.HARBOR_PROJECT }}/${{ env.IMG_NAME }}:${FLAT_BRANCH_VERSION}
-          fi
-        fi
-        
-        echo "DOCKER_TAGS=${TAG}" >> $GITHUB_ENV
-    - name: Login to Docker Hub
-      uses: docker/login-action@v3
-      with:
-        username: ${{ inputs.docker-username }}
-        password: ${{ inputs.dockerhub-token}}
-    - name: Login to Harbor
-      if: ${{ inputs.harbor-push }} == "true"
-      uses: docker/login-action@v3
-      with:
-        username: ${{ inputs.harbor-username }}
-        password: ${{ inputs.harbor-token }}
-        registry: ${{ inputs.harbor-registry }}
-
-    - name: Set up Docker Buildx
-      uses: docker/setup-buildx-action@v3
-      with:
-        driver: ${{ inputs.buildx-driver }}
-        version: ${{ inputs.buildx-version }}
-        endpoint: ${{ inputs.buildx-endpoint }}
-
-    - name: Check out the repo
-      uses: actions/checkout@v4
-
-    - name: Build and Push Docker Image
-      uses: docker/build-push-action@v5.1.0
-      with:
-        context: ${{ inputs.build-context }}
-        file: ${{ inputs.dockerfile-path }}
-        platforms: ${{ inputs.buildx-platforms }}
-        tags: ${{ env.DOCKER_TAGS }}
-        push: true
-        build-args: ${{ inputs.build-args }}
-      env:
-        DOCKER_BUILDKIT: 1
-        DOCKER_USERNAME: ${{ inputs.docker-username }}
-        DOCKER_PASSWORD: ${{ inputs.dockerhub-token }}

.github/instructions/bash.instructions.md

@@ -0,0 +1,48 @@
+---
+description: Guidelines for bash commands and tooling in the monorepo
+applyTo: "**/*.sh"
+---
+
+# Bash & Tooling Instructions
+
+This document outlines the standard tools and commands used in this monorepo.
+
+## Package Manager
+
+We use **pnpm** for package management.
+- **Do not use `npm` or `yarn`.**
+- Lockfile: `pnpm-lock.yaml`
+- Workspace configuration: `pnpm-workspace.yaml`
+
+### Common Commands
+- Install dependencies: `pnpm install`
+- Run a script in a specific package: `pnpm --filter <package_name> run <script>`
+- Run a script in all packages: `pnpm -r run <script>`
+
+## Monorepo Tooling
+
+We use **Turbo** for build system orchestration.
+- Configuration: `turbo.json`
+
+## Project Structure
+
+- `apps/`: Contains application services (admin, api, live, proxy, space, web).
+- `packages/`: Contains shared packages and libraries.
+- `deployments/`: Deployment configurations.
+
+## Running Tests
+
+- To run tests in a specific package (e.g., codemods):
+  ```bash
+  cd packages/codemods
+  pnpm run test
+  ```
+- Or from root:
+  ```bash
+  pnpm --filter @plane/codemods run test
+  ```
+
+## Docker
+
+- Local development uses `docker-compose-local.yml`.
+- Production/Staging uses `docker-compose.yml`.

.github/instructions/typescript.instructions.md

@@ -0,0 +1,129 @@
+---
+description: Guidelines for using modern TypeScript features (v5.0-v5.8)
+applyTo: "**/*.{ts,tsx,mts,cts}"
+---
+
+# TypeScript Coding Guidelines & Modern Features (v5.0 - v5.8)
+
+When writing TypeScript code, prioritize using modern features and best practices introduced in recent versions (up to 5.8).
+
+## Global Themes Across 5.x
+
+1. **Standard decorators are here; legacy decorators are legacy.**
+   New TC39-compliant decorators landed in 5.0 and were extended in 5.2 (metadata). Old `experimentalDecorators`-style behavior is still supported but should be treated as legacy.
+
+2. **Type system is more precise and less noisy.**
+   Major work went into narrowing, control flow analysis, error messages, and new helpers like `NoInfer`, inferred predicates, and better `undefined`/`never`/uninitialized checks.
+
+3. **Module / runtime interop has been modernized.**
+   Options like `--moduleResolution bundler`, `--module nodenext`/`node18`, `--rewriteRelativeImportExtensions`, `--erasableSyntaxOnly`, and `--verbatimModuleSyntax` are about playing nicely with ESM, Node 18+/22+, direct TypeScript execution, and bundlers.
+
+4. **The standard library keeps tracking modern JS.**
+   Support for new ES features (iterator helpers, `Object.groupBy`/`Map.groupBy`, new Set/ES2024 APIs) shows up as type declarations and sometimes extra checks (regex syntax checking, etc.).
+
+When generating or refactoring code, prefer these newer idioms, and avoid patterns that conflict with updated checks.
+
+## Modern Features to Utilize
+
+### Type System & Inference
+- **`const` Type Parameters (5.0)**: Use `const` type parameters for more precise literal inference.
+  ```typescript
+  declare function names<const T extends string[]>(...names: T): void;
+  ```
+- **`@satisfies` Operator (5.0)**: Use `satisfies` to validate types without widening them.
+- **Inferred Type Predicates (5.5)**: Allow TypeScript to infer type predicates for functions that filter arrays or check types, reducing the need for explicit `is` return types.
+- **`NoInfer` Utility (5.4)**: Use `NoInfer<T>` to block inference for specific type arguments when you want them to be determined by other arguments.
+- **Narrowing**:
+  - **Switch(true) (5.3)**: Utilize narrowing in `switch(true)` blocks.
+  - **Boolean Comparisons (5.3)**: Rely on narrowing from direct boolean comparisons.
+  - **Closures (5.4)**: Trust preserved narrowing in closures when variables aren't modified after the check.
+  - **Constant Indexed Access (5.5)**: Use constant indices to narrow object/array properties.
+
+### Syntax & Control Flow
+- **Decorators (5.0)**: Use standard ECMAScript decorators (Stage 3).
+- **`using` Declarations (5.2)**: Use `using` for explicit resource management (Disposable pattern) instead of manual cleanup.
+  ```typescript
+  using resource = new Resource();
+  ```
+- **Import Attributes (5.3/5.8)**: Use `with { type: "json" }` for import attributes. Avoid the deprecated `assert` syntax.
+- **`switch` Exhaustiveness**: Rely on TypeScript's exhaustiveness checking in switch statements.
+
+### Modules & Imports
+- **`verbatimModuleSyntax` (5.0)**: Respect this flag by using `import type` explicitly when importing types to ensure they are erased during compilation.
+- **Type-Only Imports with Extensions (5.2)**: You can use `.ts`, `.mts`, `.cts` extensions in `import type` statements.
+- **`resolution-mode` (5.3)**: Use `import type { Type } from "mod" with { "resolution-mode": "import" }` if needed for specific module resolution contexts.
+- **JSDoc `@import` (5.5)**: Use `@import` tags in JSDoc for cleaner type imports in JS files if working in a mixed codebase.
+
+### Standard Library & Built-ins
+- **Iterator Helpers (5.6)**: Use new iterator methods (map, filter, etc.) if targeting modern environments.
+- **Set Methods (5.5)**: Utilize new `Set` methods like `union`, `intersection`, etc., when available.
+- **`Object.groupBy` / `Map.groupBy` (5.4)**: Use these standard methods for grouping instead of external libraries like Lodash when appropriate.
+- **`Promise.withResolvers` (5.7)**: Use `Promise.withResolvers()` for creating promises with exposed resolve/reject functions.
+
+### Configuration & Tooling
+- **`--moduleResolution bundler` (5.0)**: Assume this resolution strategy for modern web projects (Vite, Next.js, etc.).
+- **`--erasableSyntaxOnly` (5.8)**: Be aware of this flag; avoid TypeScript-specific syntax that cannot be simply erased (like `enum`s or `namespaces`) if the project aims for maximum compatibility with tools like Node.js's `--strip-types`. Prefer `const` objects or unions over `enum`s if requested.
+
+## Specific Coding Patterns
+
+### Arrays & Collections
+- Use **Copying Array Methods (5.2)** (`toSorted`, `toSpliced`, `with`) for immutable array operations.
+- **TypedArrays (5.7)**: Be aware that TypedArrays are now generic over `ArrayBufferLike`.
+
+### Classes
+- **Parameter Decorators (5.0/5.2)**: Use modern standard decorators.
+- **`super` Property Access (5.3)**: Avoid accessing instance fields via `super`.
+
+### Error Handling
+- **Checks for Never-Initialized Variables (5.7)**: Ensure variables are initialized before use to avoid new errors.
+
+## Deprecations to Avoid
+- Avoid `import ... assert` (use `with`).
+- Avoid implicit `any` returns in `undefined`-returning functions (though 5.1 makes this easier, explicit is better).
+- Avoid `enum`s if the project prefers erasable syntax (5.8).
+
+## Version-Specific Highlights
+
+### TypeScript 5.0
+- **Decorators**: Use standard decorators unless `experimentalDecorators` is explicitly enabled.
+- **`const` Type Parameters**: Use for literal inference.
+- **Enums**: All enums are union enums.
+- **Modules**: `--moduleResolution bundler` and `--verbatimModuleSyntax` are key for modern bundlers.
+
+### TypeScript 5.1
+- **Returns**: `undefined`-returning functions don't need explicit returns.
+- **Getters/Setters**: Can have unrelated types with explicit annotations.
+
+### TypeScript 5.2
+- **Resource Management**: `using` declarations for `Symbol.dispose`.
+- **Decorator Metadata**: Use `context.metadata` for design-time metadata.
+
+### TypeScript 5.3
+- **Import Attributes**: Use `with { type: "json" }`.
+- **Switch(true)**: Narrowing works in `switch(true)`.
+
+### TypeScript 5.4
+- **Closures**: Narrowing preserved in closures if last assignment is before creation.
+- **`NoInfer`**: Block inference for specific arguments.
+- **Grouping**: `Object.groupBy` / `Map.groupBy`.
+
+### TypeScript 5.5
+- **Inferred Predicates**: Functions checking types often don't need explicit `is` return types.
+- **Constant Index Access**: Better narrowing for constant keys.
+- **Regex**: Syntax checking for regex literals.
+
+### TypeScript 5.6
+- **Truthiness Checks**: Errors on always-truthy/falsy conditions (e.g., `if (/regex/)`).
+- **Iterator Helpers**: `.map`, `.filter` on iterators.
+
+### TypeScript 5.7
+- **Uninitialized Variables**: Stricter checks for never-initialized variables.
+- **Relative Imports**: `--rewriteRelativeImportExtensions` for `.ts` imports in output.
+- **ES2024**: Support for `Promise.withResolvers`, `Atomics.waitAsync`.
+
+### TypeScript 5.8
+- **Return Checks**: Granular checks for conditional returns.
+- **Node Modules**: `--module node18` stable; `require()` of ESM allowed in `nodenext`.
+- **Erasable Syntax**: `--erasableSyntaxOnly` forbids enums, namespaces, etc.
+
+When generating code, always prefer the most modern, standard, and type-safe approach available in TypeScript 5.8.

.github/workflows/ami-build-aws.yml

@@ -1,305 +0,0 @@
-name: AMI Build - AWS
-
-on:
-  workflow_dispatch:
-    inputs:
-      ami_prefix:
-        description: 'AMI Prefix'
-        required: true
-        default: 'plane-commercial'
-      prime_host:
-        description: 'Prime Host'
-        required: true
-        default: 'https://prime.plane.so'
-      ami_publish_region:
-        description: 'AMI Publish Regions (comma separated)'
-        type: string
-        required: true
-        default: 'us-east-1'
-      mark_manifest_latest:
-        description: 'Mark manifest as latest'
-        type: boolean
-        required: false
-        default: false
-
-env:
-  # Inputs
-  AMI_PREFIX: ${{ inputs.ami_prefix || 'plane-commercial' }}
-  PRIME_HOST: ${{ inputs.prime_host || 'https://prime.plane.so' }}
-  AMI_PUBLISH_REGION: ${{ inputs.ami_publish_region || 'us-east-1' }}
-  # Inputs by Devops
-  AWS_MANIFEST_BUCKET: 'plane-terraform-marketplace'
-  AWS_VPC_CIDR: '10.34.0.0/16'
-  AWS_SUBNET_CIDR: '10.34.1.0/24'
-  AWS_VPC_REGION: 'us-east-1'
-  AWS_BASE_IMAGE_OWNER: '099720109477'
-  # Secrets
-  AWS_ACCESS_KEY: ${{ secrets.MARKETPLACE_AWS_ACCESS_KEY_ID }}
-  AWS_SECRET_KEY: ${{ secrets.MARKETPLACE_AWS_SECRET_ACCESS_KEY }}
-  # Constants
-  CURRENT_MANIFEST_FILE: 'ee-docker-aws-ami-manifest.json'
-  EE_PACKER_FILE: 'ee-docker-aws-ami.pkr.hcl'
-  CF_TEMPLATE_FILE: deployments/ami/commercial/ee-cloudformation-template.yaml
-  CF_OUTPUT_FILE: deployments/ami/commercial/plane-commercial-cloudformation.yaml
-  MARK_MANIFEST_LATEST: ${{ inputs.mark_manifest_latest || false }}
-
-jobs:
-
-  build_ami:
-    runs-on: ubuntu-22.04
-    steps:
-      - name: Checkout Repository
-        uses: actions/checkout@v4
-
-      - name: Configure AWS Credentials
-        uses: aws-actions/configure-aws-credentials@v4
-        with:
-          aws-access-key-id: ${{ env.AWS_ACCESS_KEY }}
-          aws-secret-access-key: ${{ env.AWS_SECRET_KEY }}
-          aws-region: ${{ env.AWS_VPC_REGION }}
-
-      - name: Setup `packer`
-        uses: hashicorp/setup-packer@main
-        id: setup
-        with:
-          version: latest
-      - name: Copy Upload Assets
-        run: |
-          mkdir -p plane-dist
-          cp deployments/ami/commercial/cloudinit-ee/* plane-dist/
-
-      - name: Run `packer init`
-        id: init
-        run: "packer init ./deployments/ami/commercial/${{ env.EE_PACKER_FILE }}"
-
-      - name: Run `packer validate`
-        id: validate
-        run: "packer validate ./deployments/ami/commercial/${{ env.EE_PACKER_FILE }}"
-
-      - name: Make Variables File
-        id: make_variables_file
-        run: |
-          touch variables.pkrvars.hcl
-          echo "aws_region = \"${AWS_VPC_REGION}\"" >> variables.pkrvars.hcl
-          echo "ami_name_prefix = \"${AMI_PREFIX}\"" >> variables.pkrvars.hcl
-          echo "vpc_cidr = \"${AWS_VPC_CIDR}\"" >> variables.pkrvars.hcl
-          echo "subnet_cidr = \"${AWS_SUBNET_CIDR}\"" >> variables.pkrvars.hcl
-          echo "base_image_owner = \"${AWS_BASE_IMAGE_OWNER}\"" >> variables.pkrvars.hcl
-          echo "prime_host = \"${PRIME_HOST}\"" >> variables.pkrvars.hcl
-          echo "instance_type = \"t3a.xlarge\"" >> variables.pkrvars.hcl
-          echo "manifest_file_name = \"${{ env.CURRENT_MANIFEST_FILE }}\"" >> variables.pkrvars.hcl
-
-          # split AMI_PUBLISH_REGION by comma and add to ami_regions
-          ami_regions=$(echo "${AMI_PUBLISH_REGION}" | sed 's/[[:space:]]*,[[:space:]]*/\n/g' | jq -R . | jq -s -c .)
-          echo "ami_regions = ${ami_regions}" >> variables.pkrvars.hcl
-
-          cat variables.pkrvars.hcl
-
-      - name: Run `packer build`
-        id: build
-        run: |
-          packer build \
-            -var "aws_access_key=${{ env.AWS_ACCESS_KEY }}" \
-            -var "aws_secret_key=${{ env.AWS_SECRET_KEY }}" \
-            -var-file=variables.pkrvars.hcl \
-            ./deployments/ami/commercial/${{ env.EE_PACKER_FILE }}
-
-      - name: Extract AMI Information and Create Summary
-        id: ami_info
-        run: |
-          # Extract AMI details from manifest
-          AMI_STRING=$(jq -r '.builds[-1].artifact_id' ${{env.CURRENT_MANIFEST_FILE}})
-          AMI_NAME=$(jq -r '.builds[-1].custom_data.ami_name' ${{env.CURRENT_MANIFEST_FILE}})
-          BUILD_TIME=$(jq -r '.builds[-1].custom_data.build_time' ${{env.CURRENT_MANIFEST_FILE}})
-          
-          # Create array of AMI information
-          declare -a AMI_INFO
-          IFS=',' read -ra AMI_ARRAY <<< "$AMI_STRING"
-          for ami in "${AMI_ARRAY[@]}"; do
-            REGION=$(echo "$ami" | cut -d ":" -f1)
-            AMI_ID=$(echo "$ami" | cut -d ":" -f2)
-            AMI_INFO+=("$REGION:$AMI_ID")
-          done
-          
-          # Add git information to manifest
-          jq --arg branch "${{ github.ref_name }}" \
-             --arg commit "${{ github.sha }}" \
-             --arg build_time "$(date -u +"%Y-%m-%dT%H:%M:%SZ")" \
-             '.builds[-1].custom_data += {git_branch: $branch, git_commit: $commit, build_timestamp: $build_time}' \
-             ${{env.CURRENT_MANIFEST_FILE}} > temp-manifest.json
-          mv temp-manifest.json ${{env.CURRENT_MANIFEST_FILE}}
-
-      - name: Store Manifest in S3
-        run: |
-          # Also store a versioned copy
-          aws s3 cp ${{env.CURRENT_MANIFEST_FILE}} "s3://${{ env.AWS_MANIFEST_BUCKET }}/plane-commercial/ami/manifests/plane-commercial-manifest-${{ github.sha }}.json"
-
-      - name: Store Manifest in S3 as latest
-        if: ${{ env.MARK_MANIFEST_LATEST == 'true' }}
-        run: |
-          # Store the current manifest as latest
-          aws s3 cp ${{env.CURRENT_MANIFEST_FILE}} s3://${{ env.AWS_MANIFEST_BUCKET }}/plane-commercial/ami/manifests/plane-commercial-manifest-latest.json || true
-
-      - name: Upload Build Manifest as Artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: ee-docker-aws-ami-manifest
-          path: ${{env.CURRENT_MANIFEST_FILE}}
-          retention-days: 30
-
-      - name: Tag AMIs
-        run: |
-          # Extract AMI string again
-          AMI_STRING=$(jq -r '.builds[-1].artifact_id' ${{env.CURRENT_MANIFEST_FILE}})
-          
-          # Process and tag each AMI in its respective region
-          IFS=',' read -ra AMI_ARRAY <<< "$AMI_STRING"
-          for ami in "${AMI_ARRAY[@]}"; do
-            REGION=$(echo "$ami" | cut -d ":" -f1)
-            AMI_ID=$(echo "$ami" | cut -d ":" -f2)
-            
-            echo "Tagging AMI ${AMI_ID} in region ${REGION}"
-            aws ec2 create-tags \
-              --region "$REGION" \
-              --resources "$AMI_ID" \
-              --tags \
-                Key=GitBranch,Value=${{ github.ref_name }} \
-                Key=GitCommit,Value=${{ github.sha }} \
-                Key=BuildTime,Value=$(date -u +"%Y-%m-%dT%H:%M:%SZ")
-          done
-
-      - name: Update CloudFormation Template
-        run: |
-          # Install yq if not present
-          if ! command -v yq &> /dev/null; then
-            echo "Installing yq..."
-            sudo wget -qO /usr/local/bin/yq https://github.com/mikefarah/yq/releases/latest/download/yq_linux_amd64
-            sudo chmod +x /usr/local/bin/yq
-          fi
-
-          if ! command -v jq &> /dev/null; then
-              echo "Error: jq is required but not installed. Please install jq to continue."
-              exit 1
-          fi
-
-          ARTIFACT_ID=$(jq -r '.builds[0].artifact_id' "${{ env.CURRENT_MANIFEST_FILE }}")
-
-          if [[ "$ARTIFACT_ID" == "null" || -z "$ARTIFACT_ID" ]]; then
-              echo "Error: Could not extract artifact_id from manifest file"
-              exit 1
-          fi
-
-          echo "Found artifact_id: $ARTIFACT_ID"
-
-          REGIONS=()
-          AMIS=()
-
-          # Split by comma and process each region:ami pair
-          IFS=',' read -ra PAIRS <<< "$ARTIFACT_ID"
-          for pair in "${PAIRS[@]}"; do
-              # Trim whitespace
-              pair=$(echo "$pair" | xargs)
-              
-              # Split by colon to get region and ami
-              IFS=':' read -ra REGION_AMI <<< "$pair"
-              if [[ ${#REGION_AMI[@]} -eq 2 ]]; then
-                  region="${REGION_AMI[0]}"
-                  ami="${REGION_AMI[1]}"
-                  REGIONS+=("$region")
-                  AMIS+=("$ami")
-                  echo "  $region -> $ami"
-              fi
-          done
-
-          # Check if we found any AMI mappings
-          if [[ ${#REGIONS[@]} -eq 0 ]]; then
-              echo "Error: No valid region:ami pairs found in artifact_id"
-              exit 1
-          fi
-
-          # Copy the original template to output file
-          cp "${{ env.CF_TEMPLATE_FILE }}" "${{ env.CF_OUTPUT_FILE }}"
-
-          echo "Regions: ${REGIONS[@]}"
-          echo "AMIs: ${AMIS[@]}"
-
-          echo "Updating AMI IDs in template..."
-
-          REGION_RESTRICTIONS=()
-          # Update AMI IDs for each region found in the manifest
-          REGIONS_STRING=""
-          for i in "${!REGIONS[@]}"; do
-              region="${REGIONS[$i]}"
-              ami_id="${AMIS[$i]}"
-              echo "  Updating $region with AMI: $ami_id"
-              REGIONS_STRING+="${region}, "
-              yq eval ".Parameters.AMIId.Default = \"${ami_id}\"" -i "${{ env.CF_OUTPUT_FILE }}"
-          done
-
-          cat "${{ env.CF_OUTPUT_FILE }}"
-
-          echo "Updated template saved as: ${{ env.CF_OUTPUT_FILE }}"  
-
-      - name: Store CloudFormation Template in S3
-        run: |
-          # Store the current manifest as latest
-          aws s3 cp ${{env.CF_OUTPUT_FILE}} s3://${{ env.AWS_MANIFEST_BUCKET }}/plane-commercial/cloudformation/plane-commercial-cloudformation-latest.yaml
-
-          date_string=$(date +%d%b%Y)
-          aws s3 cp ${{env.CF_OUTPUT_FILE}} s3://${{ env.AWS_MANIFEST_BUCKET }}/plane-commercial/cloudformation/plane-commercial-cloudformation-${date_string}.yaml
-
-      - name: Upload Updated CloudFormation Template
-        uses: actions/upload-artifact@v4
-        with:
-          name: cloudformation-template
-          path: ${{ env.CF_OUTPUT_FILE }}
-          retention-days: 30
-
-      - name: Print Build Summary
-        id: print_build_summary
-        run: |
-          # Extract AMI details from manifest
-          AMI_STRING=$(jq -r '.builds[-1].artifact_id' ${{env.CURRENT_MANIFEST_FILE}})
-          AMI_NAME=$(jq -r '.builds[-1].custom_data.ami_name' ${{env.CURRENT_MANIFEST_FILE}})
-          BUILD_TIME=$(jq -r '.builds[-1].custom_data.build_time' ${{env.CURRENT_MANIFEST_FILE}})
-          
-          # Create array of AMI information
-          declare -a AMI_INFO
-          IFS=',' read -ra AMI_ARRAY <<< "$AMI_STRING"
-          for ami in "${AMI_ARRAY[@]}"; do
-            REGION=$(echo "$ami" | cut -d ":" -f1)
-            AMI_ID=$(echo "$ami" | cut -d ":" -f2)
-            AMI_INFO+=("$REGION:$AMI_ID")
-          done
-          
-          # Create build summary with all AMIs
-          {
-            echo "### 🌎 Regional AMI Distribution"
-            echo "| Region | AMI ID |"
-            echo "| --- | --- |"
-            for ami_info in "${AMI_INFO[@]}"; do
-              region=${ami_info%:*}
-              ami_id=${ami_info#*:}
-              echo "| \`${region}\` | \`${ami_id}\` |"
-            done
-          } >> $GITHUB_STEP_SUMMARY
-
-          date_string=$(date +%d%b%Y)
-          {
-            echo "### 📁 S3 Files"
-            echo "| File | Path | "
-            echo "| --- | --- |"
-            echo "| Latest CF Template | \`s3://${{ env.AWS_MANIFEST_BUCKET }}/plane-commercial/cloudformation/plane-commercial-cloudformation-latest.yaml\` |"
-            echo "| CF Template | \`s3://${{ env.AWS_MANIFEST_BUCKET }}/plane-commercial/cloudformation/plane-commercial-cloudformation-${date_string}.yaml\` |"
-            echo "| Current Manifest | \`s3://${{ env.AWS_MANIFEST_BUCKET }}/plane-commercial/ami/manifests/plane-commercial-manifest-${{ github.sha }}.json\` |"
-            echo "| Latest Manifest | \`s3://${{ env.AWS_MANIFEST_BUCKET }}/plane-commercial/ami/manifests/plane-commercial-manifest-latest.json\` |"
-          } >> $GITHUB_STEP_SUMMARY
-          
-          # Console output for logs
-          echo "✅ AMI built successfully!"
-          echo "🔹 AMI Information:"
-          for ami_info in "${AMI_INFO[@]}"; do
-            region=${ami_info%:*}
-            ami_id=${ami_info#*:}
-            echo "   • Region: ${region}, AMI ID: ${ami_id}"
-          done

.github/workflows/ami-build-digitalocean.yml

@@ -1,180 +0,0 @@
-name: AMI Build - DigitalOcean
-
-on:
-  push:
-    branches:
-      - appliance-digitalocean
-
-  workflow_dispatch:
-    inputs:
-      ami_prefix:
-        description: 'AMI Prefix'
-        required: true
-        default: 'plane-commercial'
-      prime_host:
-        description: 'Prime Host'
-        required: true
-        default: 'https://prime.plane.so'
-      mark_manifest_latest:
-        description: 'Mark manifest as latest'
-        type: boolean
-        required: false
-        default: false
-
-env:
-  # Inputs
-  AMI_PREFIX: ${{ inputs.ami_prefix || 'plane-commercial' }}
-  PRIME_HOST: ${{ inputs.prime_host || 'https://prime.plane.so' }}
-  # Inputs by Devops
-  AWS_MANIFEST_BUCKET: 'plane-terraform-marketplace'
-  AWS_VPC_REGION: 'us-east-1'
-  # Secrets
-  AWS_ACCESS_KEY: ${{ secrets.MARKETPLACE_AWS_ACCESS_KEY_ID }}
-  AWS_SECRET_KEY: ${{ secrets.MARKETPLACE_AWS_SECRET_ACCESS_KEY }}
-  # Constants
-  CURRENT_MANIFEST_FILE: 'ee-docker-digital-ocean-manifest.json'
-  EE_PACKER_FILE: 'ee-docker-digital-ocean.pkr.hcl'
-  MARK_MANIFEST_LATEST: ${{ inputs.mark_manifest_latest || false }}
-
-jobs:
-
-  build_ami:
-    runs-on: ubuntu-22.04
-    steps:
-      - name: Checkout Repository
-        uses: actions/checkout@v4
-
-      - name: Configure AWS Credentials
-        uses: aws-actions/configure-aws-credentials@v4
-        with:
-          aws-access-key-id: ${{ env.AWS_ACCESS_KEY }}
-          aws-secret-access-key: ${{ env.AWS_SECRET_KEY }}
-          aws-region: ${{ env.AWS_VPC_REGION }}
-
-      - name: Setup `packer`
-        uses: hashicorp/setup-packer@main
-        id: setup
-        with:
-          version: latest
-      - name: Copy Upload Assets
-        run: |
-          mkdir -p plane-dist
-          cp deployments/ami/commercial/cloudinit-ee/* plane-dist/
-
-      - name: Run `packer init`
-        id: init
-        run: "packer init ./deployments/ami/commercial/${{ env.EE_PACKER_FILE }}"
-
-      - name: Run `packer validate`
-        id: validate
-        run: "packer validate ./deployments/ami/commercial/${{ env.EE_PACKER_FILE }}"
-
-      - name: Make Variables File
-        id: make_variables_file
-        run: |
-          touch variables.pkrvars.hcl
-          echo "ami_name_prefix = \"${AMI_PREFIX}\"" >> variables.pkrvars.hcl
-          echo "prime_host = \"${PRIME_HOST}\"" >> variables.pkrvars.hcl
-          echo "instance_type = \"s-2vcpu-4gb\"" >> variables.pkrvars.hcl
-          echo "manifest_file_name = \"${{ env.CURRENT_MANIFEST_FILE }}\"" >> variables.pkrvars.hcl
-
-          cat variables.pkrvars.hcl
-
-      - name: Run `packer build`
-        id: build
-        run: |
-          packer build \
-            -var "api_token=${{ secrets.MARKETPLACE_DIGITAL_OCEAN_API_TOKEN }}" \
-            -var-file=variables.pkrvars.hcl \
-            ./deployments/ami/commercial/${{ env.EE_PACKER_FILE }}
-
-      - name: Extract AMI Information and Create Summary
-        id: ami_info
-        run: |
-          # Extract AMI details from manifest
-          AMI_STRING=$(jq -r '.builds[-1].artifact_id' ${{env.CURRENT_MANIFEST_FILE}})
-          AMI_NAME=$(jq -r '.builds[-1].custom_data.ami_name' ${{env.CURRENT_MANIFEST_FILE}})
-          BUILD_TIME=$(jq -r '.builds[-1].custom_data.build_time' ${{env.CURRENT_MANIFEST_FILE}})
-          
-          # Create array of AMI information
-          declare -a AMI_INFO
-          IFS=',' read -ra AMI_ARRAY <<< "$AMI_STRING"
-          for ami in "${AMI_ARRAY[@]}"; do
-            REGION=$(echo "$ami" | cut -d ":" -f1)
-            AMI_ID=$(echo "$ami" | cut -d ":" -f2)
-            AMI_INFO+=("$REGION:$AMI_ID")
-          done
-          
-          # Add git information to manifest
-          jq --arg branch "${{ github.ref_name }}" \
-             --arg commit "${{ github.sha }}" \
-             --arg build_time "$(date -u +"%Y-%m-%dT%H:%M:%SZ")" \
-             '.builds[-1].custom_data += {git_branch: $branch, git_commit: $commit, build_timestamp: $build_time}' \
-             ${{env.CURRENT_MANIFEST_FILE}} > temp-manifest.json
-          mv temp-manifest.json ${{env.CURRENT_MANIFEST_FILE}}
-
-      - name: Store Manifest in S3
-        run: |
-          # Also store a versioned copy
-          aws s3 cp ${{env.CURRENT_MANIFEST_FILE}} "s3://${{ env.AWS_MANIFEST_BUCKET }}/plane-commercial/ami/manifests/plane-commercial-digitalocean-manifest-${{ github.sha }}.json"
-
-      - name: Store Manifest in S3 as latest
-        if: ${{ env.MARK_MANIFEST_LATEST == 'true' }}
-        run: |
-          # Store the current manifest as latest
-          aws s3 cp ${{env.CURRENT_MANIFEST_FILE}} s3://${{ env.AWS_MANIFEST_BUCKET }}/plane-commercial/ami/manifests/plane-commercial-digitalocean-manifest-latest.json || true
-
-      - name: Upload Build Manifest as Artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: ee-docker-digital-ocean-manifest
-          path: ${{env.CURRENT_MANIFEST_FILE}}
-          retention-days: 30
-
-
-      - name: Print Build Summary
-        id: print_build_summary
-        run: |
-          # Extract AMI details from manifest
-          AMI_STRING=$(jq -r '.builds[-1].artifact_id' ${{env.CURRENT_MANIFEST_FILE}})
-          AMI_NAME=$(jq -r '.builds[-1].custom_data.ami_name' ${{env.CURRENT_MANIFEST_FILE}})
-          BUILD_TIME=$(jq -r '.builds[-1].custom_data.build_time' ${{env.CURRENT_MANIFEST_FILE}})
-          
-          # Create array of AMI information
-          declare -a AMI_INFO
-          IFS=',' read -ra AMI_ARRAY <<< "$AMI_STRING"
-          for ami in "${AMI_ARRAY[@]}"; do
-            REGION=$(echo "$ami" | cut -d ":" -f1)
-            AMI_ID=$(echo "$ami" | cut -d ":" -f2)
-            AMI_INFO+=("$REGION:$AMI_ID")
-          done
-          
-          # Create build summary with all AMIs
-          {
-            echo "### 🌎 Regional AMI Distribution"
-            echo "| Region | AMI ID |"
-            echo "| --- | --- |"
-            for ami_info in "${AMI_INFO[@]}"; do
-              region=${ami_info%:*}
-              ami_id=${ami_info#*:}
-              echo "| \`${region}\` | \`${ami_id}\` |"
-            done
-          } >> $GITHUB_STEP_SUMMARY
-
-          date_string=$(date +%d%b%Y)
-          {
-            echo "### 📁 S3 Files"
-            echo "| File | Path | "
-            echo "| --- | --- |"
-            echo "| Current Manifest | \`s3://${{ env.AWS_MANIFEST_BUCKET }}/plane-commercial/ami/manifests/plane-commercial-manifest-${{ github.sha }}.json\` |"
-            echo "| Latest Manifest | \`s3://${{ env.AWS_MANIFEST_BUCKET }}/plane-commercial/ami/manifests/plane-commercial-manifest-latest.json\` |"
-          } >> $GITHUB_STEP_SUMMARY
-          
-          # Console output for logs
-          echo "✅ AMI built successfully!"
-          echo "🔹 AMI Information:"
-          for ami_info in "${AMI_INFO[@]}"; do
-            region=${ami_info%:*}
-            ami_id=${ami_info#*:}
-            echo "   • Region: ${region}, AMI ID: ${ami_id}"
-          done

.github/workflows/build-branch-cloud.yml

@@ -1,370 +0,0 @@
-name: Branch Build Cloud
-
-on:
-  workflow_dispatch:
-    inputs:
-      build_type:
-        description: "Type of build to run"
-        required: true
-        type: choice
-        default: "Build"
-        options:
-          - "Build"
-          - "Release"
-      releaseVersion:
-        description: "Release Version"
-        type: string
-        default: v0.0.0-cloud
-      useVaultSecrets:
-        description: "Use Vault Secrets"
-        type: boolean
-        default: false
-        required: true
-      isPrerelease:
-        description: "Is Pre-release"
-        type: boolean
-        default: false
-        required: true
-
-env:
-  TARGET_BRANCH: ${{ github.ref_name }}
-  VAULT_KP_PREFIX: plane-ee-cloud-builds
-  BUILD_TYPE: ${{ github.event.inputs.build_type }}
-  RELEASE_VERSION: ${{ github.event.inputs.releaseVersion }}
-  IS_PRERELEASE: ${{ github.event.inputs.isPrerelease }}
-
-jobs:
-  branch_build_setup:
-    name: Build Setup
-    runs-on: ubuntu-22.04
-    outputs:
-      gh_branch_name: ${{ steps.set_env_variables.outputs.TARGET_BRANCH }}
-      gh_buildx_driver: ${{ steps.set_env_variables.outputs.BUILDX_DRIVER }}
-      gh_buildx_version: ${{ steps.set_env_variables.outputs.BUILDX_VERSION }}
-      gh_buildx_platforms: ${{ steps.set_env_variables.outputs.BUILDX_PLATFORMS }}
-      gh_buildx_endpoint: ${{ steps.set_env_variables.outputs.BUILDX_ENDPOINT }}
-
-      dh_img_web: ${{ steps.set_env_variables.outputs.DH_IMG_WEB }}
-      dh_img_space: ${{ steps.set_env_variables.outputs.DH_IMG_SPACE }}
-      dh_img_admin: ${{ steps.set_env_variables.outputs.DH_IMG_ADMIN }}
-      dh_img_live: ${{ steps.set_env_variables.outputs.DH_IMG_LIVE }}
-      dh_img_silo: ${{ steps.set_env_variables.outputs.DH_IMG_SILO }}
-      dh_img_backend: ${{ steps.set_env_variables.outputs.DH_IMG_BACKEND }}
-      dh_img_email: ${{ steps.set_env_variables.outputs.DH_IMG_EMAIL }}
-      harbor_push: ${{ steps.set_env_variables.outputs.HARBOR_PUSH }}
-
-      build_type: ${{steps.set_env_variables.outputs.BUILD_TYPE}}
-      build_release: ${{ steps.set_env_variables.outputs.BUILD_RELEASE }}
-      build_prerelease: ${{ steps.set_env_variables.outputs.BUILD_PRERELEASE }}
-      release_version: ${{ steps.set_env_variables.outputs.RELEASE_VERSION }}
-      vault_secrets: ${{ steps.get_vault_secrets.outputs.VAULT_SECRETS }}
-      build_args: ${{ steps.prepare_build_args.outputs.BUILD_ARGS }}
-    steps:
-      - id: set_env_variables
-        name: Set Environment Variables
-        run: |
-          echo "BUILDX_DRIVER=docker-container" >> $GITHUB_OUTPUT
-          echo "BUILDX_VERSION=latest" >> $GITHUB_OUTPUT
-          echo "BUILDX_PLATFORMS=linux/amd64" >> $GITHUB_OUTPUT
-          echo "BUILDX_ENDPOINT=" >> $GITHUB_OUTPUT
-
-          BR_NAME=$( echo "${{ env.TARGET_BRANCH }}" | sed 's/[^a-zA-Z0-9.-]//g')
-          echo "TARGET_BRANCH=$BR_NAME" >> $GITHUB_OUTPUT
-
-          echo "DH_IMG_WEB=web-cloud" >> $GITHUB_OUTPUT
-          echo "DH_IMG_SPACE=space-cloud" >> $GITHUB_OUTPUT
-          echo "DH_IMG_ADMIN=admin-cloud" >> $GITHUB_OUTPUT
-          echo "DH_IMG_LIVE=live-cloud" >> $GITHUB_OUTPUT
-          echo "DH_IMG_SILO=silo-cloud" >> $GITHUB_OUTPUT
-          echo "DH_IMG_BACKEND=backend-cloud" >> $GITHUB_OUTPUT
-          echo "DH_IMG_EMAIL=email-cloud" >> $GITHUB_OUTPUT
-
-          echo "BUILD_TYPE=${{env.BUILD_TYPE}}" >> $GITHUB_OUTPUT
-          BUILD_RELEASE=false
-          BUILD_PRERELEASE=false
-          RELVERSION="latest"
-
-          if [ "${{ env.BUILD_TYPE }}" == "Release" ]; then
-            FLAT_RELEASE_VERSION=$(echo "${{ env.RELEASE_VERSION }}" | sed 's/[^a-zA-Z0-9.-]//g')
-            echo "FLAT_RELEASE_VERSION=${FLAT_RELEASE_VERSION}" >> $GITHUB_OUTPUT
-
-            semver_regex="^v([0-9]+)\.([0-9]+)\.([0-9]+)(-[a-zA-Z0-9]+(-[a-zA-Z0-9]+)*)?$"
-            if [[ ! $FLAT_RELEASE_VERSION =~ $semver_regex ]]; then
-              echo "Invalid Release Version Format : $FLAT_RELEASE_VERSION"
-              echo "Please provide a valid SemVer version"
-              echo "e.g. v1.2.3 or v1.2.3-alpha-1"
-              echo "Exiting the build process"
-              exit 1  # Exit with status 1 to fail the step
-            fi
-            BUILD_RELEASE=true
-            RELVERSION=$FLAT_RELEASE_VERSION
-
-            if [ "${{ env.IS_PRERELEASE }}" == "true" ]; then
-              BUILD_PRERELEASE=true
-            fi
-          fi
-          echo "BUILD_RELEASE=${BUILD_RELEASE}" >> $GITHUB_OUTPUT
-          echo "BUILD_PRERELEASE=${BUILD_PRERELEASE}" >> $GITHUB_OUTPUT
-          echo "RELEASE_VERSION=${RELVERSION}" >> $GITHUB_OUTPUT
-
-      - name: Tailscale
-        uses: tailscale/github-action@v2
-        if: ${{github.event.inputs.useVaultSecrets == 'true'}}
-        with:
-          oauth-client-id: ${{ secrets.TAILSCALE_OAUTH_CLIENT_ID }}
-          oauth-secret: ${{ secrets.TAILSCALE_OAUTH_CLIENT_SECRET }}
-          tags: tag:ci
-
-      - name: Get the ENV values from Vault
-        id: get_vault_secrets
-        if: ${{github.event.inputs.useVaultSecrets == 'true'}}
-        run: |
-          if [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            ENV_NAME="prod"
-          else
-            ENV_NAME="stage"
-          fi
-
-          curl -fsSL \
-            --header "X-Vault-Token: ${{ secrets.VAULT_TOKEN }}" \
-            --request GET \
-            ${{ vars.VAULT_HOST }}/v1/kv/git-builds/data/${{ env.VAULT_KP_PREFIX }}-${ENV_NAME} | jq .data.data > vault_secrets.json
-
-          if [ $? != 0 ]; then
-            echo "Failed to get the ENV values from Vault"
-            exit 1
-          fi
-
-          VAULT_SECRETS=$(cat vault_secrets.json | base64 -w 0)
-          echo "VAULT_SECRETS=${VAULT_SECRETS}" >> $GITHUB_OUTPUT
-
-      - name: Prepare Docker Build Args
-        id: prepare_build_args
-        if: ${{github.event.inputs.useVaultSecrets == 'true'}}
-        run: |
-          BUILD_ARGS=""
-          add_build_arg() {
-            if [ -n "$2" ]; then
-              BUILD_ARGS="$BUILD_ARGS $1=$2"
-            fi
-          }
-          add_build_arg "NEXT_PUBLIC_API_BASE_URL" "${{ env.NEXT_PUBLIC_API_BASE_URL }}"
-          add_build_arg "NEXT_PUBLIC_API_BASE_PATH" "${{ env.NEXT_PUBLIC_API_BASE_PATH }}"
-
-          add_build_arg "NEXT_PUBLIC_ADMIN_BASE_URL" "${{ env.NEXT_PUBLIC_ADMIN_BASE_URL }}"
-          add_build_arg "NEXT_PUBLIC_ADMIN_BASE_PATH" "${{ env.NEXT_PUBLIC_ADMIN_BASE_PATH }}"
-
-          add_build_arg "NEXT_PUBLIC_SPACE_BASE_URL" "${{ env.NEXT_PUBLIC_SPACE_BASE_URL }}"
-          add_build_arg "NEXT_PUBLIC_SPACE_BASE_PATH" "${{ env.NEXT_PUBLIC_SPACE_BASE_PATH }}"
-
-          add_build_arg "NEXT_PUBLIC_LIVE_BASE_URL" "${{ env.NEXT_PUBLIC_LIVE_BASE_URL }}"
-          add_build_arg "NEXT_PUBLIC_LIVE_BASE_PATH" "${{ env.NEXT_PUBLIC_LIVE_BASE_PATH }}"
-
-          add_build_arg "NEXT_PUBLIC_SILO_BASE_URL" "${{ env.NEXT_PUBLIC_SILO_BASE_URL }}"
-          add_build_arg "NEXT_PUBLIC_SILO_BASE_PATH" "${{ env.NEXT_PUBLIC_SILO_BASE_PATH }}"
-
-          add_build_arg "NEXT_PUBLIC_WEB_BASE_URL" "${{ env.NEXT_PUBLIC_WEB_BASE_URL }}"
-
-          add_build_arg "SENTRY_AUTH_TOKEN" "${{ secrets.SENTRY_AUTH_TOKEN }}"
-
-          echo "BUILD_ARGS=$BUILD_ARGS" >> $GITHUB_OUTPUT
-
-  branch_build_push_admin:
-    name: Build-Push Admin Docker Image
-    runs-on: ubuntu-22.04
-    needs: [branch_build_setup]
-    steps:
-      - name: Admin Build and Push
-        uses: makeplane/actions/build-push@v1.0.0
-        with:
-          build-release: ${{ needs.branch_build_setup.outputs.build_release }}
-          build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
-          release-version: ${{ needs.branch_build_setup.outputs.release_version }}
-          dockerhub-username: ${{ secrets.DOCKERHUB_USERNAME }}
-          dockerhub-token: ${{ secrets.DOCKERHUB_TOKEN }}
-          docker-image-owner: makeplane
-          docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_admin }}
-          build-context: .
-          dockerfile-path: ./apps/admin/Dockerfile.admin
-          buildx-driver: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
-          buildx-version: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
-          buildx-platforms: ${{ needs.branch_build_setup.outputs.gh_buildx_platforms }}
-          buildx-endpoint: ${{ needs.branch_build_setup.outputs.gh_buildx_endpoint }}
-          build-args: ${{ needs.branch_build_setup.outputs.build_args }}
-
-  branch_build_push_web:
-    name: Build-Push Web Docker Image
-    runs-on: ubuntu-22.04
-    needs: [branch_build_setup]
-    steps:
-      - name: Load Vault Secrets
-        run: |
-          echo ${{ needs.branch_build_setup.outputs.vault_secrets }} | base64 -d > vault_secrets.json
-          jq -r 'to_entries|map("\(.key)=\(.value|tostring)")|.[]' vault_secrets.json >> $GITHUB_ENV
-
-      - name: Web Build and Push
-        uses: makeplane/actions/build-push@v1.0.0
-        with:
-          build-release: ${{ needs.branch_build_setup.outputs.build_release }}
-          build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
-          release-version: ${{ needs.branch_build_setup.outputs.release_version }}
-          dockerhub-username: ${{ secrets.DOCKERHUB_USERNAME }}
-          dockerhub-token: ${{ secrets.DOCKERHUB_TOKEN }}
-          docker-image-owner: makeplane
-          docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_web }}
-          build-context: .
-          dockerfile-path: ./apps/web/Dockerfile.web
-          buildx-driver: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
-          buildx-version: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
-          buildx-platforms: ${{ needs.branch_build_setup.outputs.gh_buildx_platforms }}
-          buildx-endpoint: ${{ needs.branch_build_setup.outputs.gh_buildx_endpoint }}
-          build-args: ${{ needs.branch_build_setup.outputs.build_args }}
-
-  branch_build_push_space:
-    name: Build-Push Space Docker Image
-    runs-on: ubuntu-22.04
-    needs: [branch_build_setup]
-    steps:
-      - name: Load Vault Secrets
-        run: |
-          echo ${{ needs.branch_build_setup.outputs.vault_secrets }} | base64 -d > vault_secrets.json
-          jq -r 'to_entries|map("\(.key)=\(.value|tostring)")|.[]' vault_secrets.json >> $GITHUB_ENV
-
-      - name: Space Build and Push
-        uses: makeplane/actions/build-push@v1.0.0
-        with:
-          build-release: ${{ needs.branch_build_setup.outputs.build_release }}
-          build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
-          release-version: ${{ needs.branch_build_setup.outputs.release_version }}
-          dockerhub-username: ${{ secrets.DOCKERHUB_USERNAME }}
-          dockerhub-token: ${{ secrets.DOCKERHUB_TOKEN }}
-          docker-image-owner: makeplane
-          docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_space }}
-          build-context: .
-          dockerfile-path: ./apps/space/Dockerfile.space
-          buildx-driver: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
-          buildx-version: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
-          buildx-platforms: ${{ needs.branch_build_setup.outputs.gh_buildx_platforms }}
-          buildx-endpoint: ${{ needs.branch_build_setup.outputs.gh_buildx_endpoint }}
-          build-args: ${{ needs.branch_build_setup.outputs.build_args }}
-
-  branch_build_push_live:
-    name: Build-Push Live Collaboration Docker Image
-    runs-on: ubuntu-22.04
-    needs: [branch_build_setup]
-    steps:
-      - name: Live Build and Push
-        uses: makeplane/actions/build-push@v1.0.0
-        with:
-          build-release: ${{ needs.branch_build_setup.outputs.build_release }}
-          build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
-          release-version: ${{ needs.branch_build_setup.outputs.release_version }}
-          dockerhub-username: ${{ secrets.DOCKERHUB_USERNAME }}
-          dockerhub-token: ${{ secrets.DOCKERHUB_TOKEN }}
-          docker-image-owner: makeplane
-          docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_live }}
-          build-context: .
-          dockerfile-path: ./apps/live/Dockerfile.live
-          buildx-driver: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
-          buildx-version: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
-          buildx-platforms: ${{ needs.branch_build_setup.outputs.gh_buildx_platforms }}
-          buildx-endpoint: ${{ needs.branch_build_setup.outputs.gh_buildx_endpoint }}
-
-  branch_build_push_silo:
-    name: Build-Push Silo Docker Image
-    runs-on: ubuntu-22.04
-    needs: [branch_build_setup]
-    steps:
-      - name: Silo Build and Push
-        uses: makeplane/actions/build-push@v1.0.0
-        with:
-          build-release: ${{ needs.branch_build_setup.outputs.build_release }}
-          build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
-          release-version: ${{ needs.branch_build_setup.outputs.release_version }}
-          dockerhub-username: ${{ secrets.DOCKERHUB_USERNAME }}
-          dockerhub-token: ${{ secrets.DOCKERHUB_TOKEN }}
-          docker-image-owner: makeplane
-          docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_silo }}
-          build-context: .
-          dockerfile-path: ./apps/silo/Dockerfile.silo
-
-  branch_build_push_api:
-    name: Build-Push API Server Docker Image
-    runs-on: ubuntu-22.04
-    needs: [branch_build_setup]
-    steps:
-      - name: Backend Build and Push
-        uses: makeplane/actions/build-push@v1.0.0
-        with:
-          build-release: ${{ needs.branch_build_setup.outputs.build_release }}
-          build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
-          release-version: ${{ needs.branch_build_setup.outputs.release_version }}
-          dockerhub-username: ${{ secrets.DOCKERHUB_USERNAME }}
-          dockerhub-token: ${{ secrets.DOCKERHUB_TOKEN }}
-          docker-image-owner: makeplane
-          docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_backend }}
-          build-context: ./apps/api
-          dockerfile-path: ./apps/api/Dockerfile.api
-          buildx-driver: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
-          buildx-version: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
-          buildx-platforms: ${{ needs.branch_build_setup.outputs.gh_buildx_platforms }}
-          buildx-endpoint: ${{ needs.branch_build_setup.outputs.gh_buildx_endpoint }}
-
-  branch_build_push_email:
-    name: Build-Push Email Docker Image
-    runs-on: ubuntu-22.04
-    needs: [branch_build_setup]
-    steps:
-      - id: checkout_files
-        name: Checkout Files
-        uses: actions/checkout@v4
-
-      - name: Email Build and Push
-        uses: makeplane/actions/build-push@v1.0.0
-        with:
-          build-release: ${{ needs.branch_build_setup.outputs.build_release }}
-          build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
-          release-version: ${{ needs.branch_build_setup.outputs.release_version }}
-          dockerhub-username: ${{ secrets.DOCKERHUB_USERNAME }}
-          dockerhub-token: ${{ secrets.DOCKERHUB_TOKEN }}
-          docker-image-owner: makeplane
-          docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_email }}
-          build-context: ./apps/email
-          dockerfile-path: ./apps/email/Dockerfile
-          buildx-driver: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
-          buildx-version: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
-          buildx-platforms: ${{ needs.branch_build_setup.outputs.gh_buildx_platforms }}
-          buildx-endpoint: ${{ needs.branch_build_setup.outputs.gh_buildx_endpoint }}
-
-  publish_release:
-    if: ${{ needs.branch_build_setup.outputs.build_type == 'Release' }}
-    name: Build Release
-    runs-on: ubuntu-22.04
-    needs:
-      [
-        branch_build_setup,
-        branch_build_push_admin,
-        branch_build_push_web,
-        branch_build_push_space,
-        branch_build_push_live,
-        branch_build_push_silo,
-        branch_build_push_api,
-        branch_build_push_email,
-      ]
-    env:
-      REL_VERSION: ${{ needs.branch_build_setup.outputs.release_version }}
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Create Release
-        id: create_release
-        uses: softprops/action-gh-release@v2.0.8
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # This token is provided by Actions, you do not need to create your own token
-        with:
-          tag_name: ${{ env.REL_VERSION }}
-          name: ${{ env.REL_VERSION }}
-          draft: false
-          prerelease: ${{ env.IS_PRERELEASE }}
-          generate_release_notes: true

.github/workflows/codespell.yml

@@ -0,0 +1,25 @@
+# Codespell configuration is within .codespellrc
+---
+name: Codespell
+
+on:
+  push:
+    branches: [preview]
+  pull_request:
+    branches: [preview]
+
+permissions:
+  contents: read
+
+jobs:
+  codespell:
+    name: Check for spelling errors
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Annotate locations with typos
+        uses: codespell-project/codespell-problem-matcher@v1
+      - name: Codespell
+        uses: codespell-project/actions-codespell@v2

.github/workflows/pull-request-build-lint-web-apps.yml

@@ -49,5 +49,8 @@ jobs:
       - name: Check Affected format
         run: pnpm turbo run check:format --affected
 
-      # - name: Build Affected
-      #   run: pnpm turbo run build --affected
+      - name: Check Affected types
+        run: pnpm turbo run check:types --affected
+
+      - name: Build Affected
+        run: pnpm turbo run build --affected

.github/workflows/sync-community.yml

@@ -1,55 +0,0 @@
-name: Sync from Community Repo
-
-on:
-  #   schedule:
-  #     - cron: "*/30 * * * *" # Runs every 30 minutes
-  workflow_dispatch:
-    inputs:
-      source_branch:
-        description: "Source branch in Community repo"
-        required: true
-        default: "preview"
-      target_branch:
-        description: "Target branch in Enterprise repo"
-        required: true
-        default: "preview"
-
-jobs:
-  sync-from-community-repo:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout enterprise repository
-        uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
-
-      - name: Set branch names
-        run: |
-          echo "SOURCE_BRANCH=${{ github.event.inputs.source_branch || 'preview' }}" >> $GITHUB_ENV
-          echo "TARGET_BRANCH=${{ github.event.inputs.target_branch || 'preview' }}" >> $GITHUB_ENV
-          echo "SYNC_BRANCH=sync-${{ github.run_id }}" >> $GITHUB_ENV
-
-      - name: Create sync branch
-        run: git checkout -b ${{ env.SYNC_BRANCH }}
-
-      - name: Fetch from community repository
-        run: |
-          git config user.name github-actions
-          git config user.email github-actions@github.com
-          git remote add community https://github.com/makeplane/plane.git
-          git reset --hard community/${{ env.SOURCE_BRANCH }}
-
-      - name: Create Pull Request
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: |
-          PR_TITLE="Sync changes from community repo"
-          EXISTING_PR=$(gh pr list --base ${{ env.TARGET_BRANCH }} --head ${{ env.SYNC_BRANCH }} --json number --jq '.[0].number')
-          if [ -z "$EXISTING_PR" ]; then
-            pr_url=$(gh pr create --base ${{ env.TARGET_BRANCH }} --head ${{ env.SYNC_BRANCH }} --title "$PR_TITLE" --body "This PR syncs changes from the community repository's ${{ env.SOURCE_BRANCH }} branch.")
-            echo "New Pull Request created: $pr_url"
-          else
-            echo "Pull Request already exists with number: $EXISTING_PR"
-            gh pr edit $EXISTING_PR --title "$PR_TITLE" --body "This PR syncs changes from the community repository's ${{ env.SOURCE_BRANCH }} branch. (Updated)"
-            echo "Existing Pull Request updated"
-          fi

.github/workflows/sync-repo-pr.yml

@@ -41,16 +41,12 @@ jobs:
 
       - name: Create PR to Target Branch
         run: |
-          # Determine target branch based on current branch prefix
-          TARGET_BRANCH="preview"
-          PR_TITLE="${{vars.SYNC_PR_TITLE}}"
-
           # get all pull requests and check if there is already a PR
           PR_EXISTS=$(gh pr list --base $TARGET_BRANCH --head $CURRENT_BRANCH --state open --json number | jq '.[] | .number')
           if [ -n "$PR_EXISTS" ]; then
             echo "Pull Request already exists: $PR_EXISTS"
           else
             echo "Creating new pull request"
-            PR_URL=$(gh pr create --base $TARGET_BRANCH --head $CURRENT_BRANCH --title "$PR_TITLE" --body "")
+            PR_URL=$(gh pr create --base $TARGET_BRANCH --head $CURRENT_BRANCH --title "${{ vars.SYNC_PR_TITLE }}" --body "")
             echo "Pull Request created: $PR_URL"
           fi

.github/workflows/sync-repo.yml

@@ -36,8 +36,8 @@ jobs:
           GH_TOKEN: ${{ secrets.ACCESS_TOKEN }}
         run: |
           TARGET_REPO="${{ vars.SYNC_TARGET_REPO }}"
-          SOURCE_BRANCH="${{ env.SOURCE_BRANCH_NAME }}"
           TARGET_BRANCH="${{ vars.SYNC_TARGET_BRANCH_NAME }}"
+          SOURCE_BRANCH="${{ env.SOURCE_BRANCH_NAME }}"
 
           git checkout $SOURCE_BRANCH
           git remote add target-origin-a "https://$GH_TOKEN@github.com/$TARGET_REPO.git"

.gitignore

@@ -16,9 +16,10 @@ node_modules
 /out/
 
 # Production
-/build
 dist/
 out/
+build/
+.react-router/
 
 # Misc
 .DS_Store
@@ -86,7 +87,6 @@ tmp/
 
 ## packages
 dist
-.flatfile
 .temp/
 deploy/selfhost/plane-app/
 
@@ -100,12 +100,14 @@ dev-editor
 *.rdb.gz
 
 storybook-static
-# Monitor
-monitor/prime.key
-monitor/prime.key.pub
-monitor.db
 
-.cursorrules
-.cursor
-claude.md
-agents.md
+CLAUDE.md
+
+build/
+.react-router/
+AGENTS.md
+
+build/
+.react-router/
+AGENTS.md
+temp/

.mise.toml

@@ -0,0 +1,2 @@
+[tools]
+node = "22.18.0"

.prettierrc

@@ -1,5 +1,6 @@
 {
   "printWidth": 120,
   "tabWidth": 2,
-  "trailingComma": "es5"
+  "trailingComma": "es5",
+  "plugins": ["@prettier/plugin-oxc"]
 }

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/.env.example

@@ -1,12 +1,12 @@
-NEXT_PUBLIC_API_BASE_URL="http://localhost:8000"
+VITE_API_BASE_URL="http://localhost:8000"
 
-NEXT_PUBLIC_WEB_BASE_URL="http://localhost:3000"
+VITE_WEB_BASE_URL="http://localhost:3000"
 
-NEXT_PUBLIC_ADMIN_BASE_URL="http://localhost:3001"
-NEXT_PUBLIC_ADMIN_BASE_PATH="/god-mode"
+VITE_ADMIN_BASE_URL="http://localhost:3001"
+VITE_ADMIN_BASE_PATH="/god-mode"
 
-NEXT_PUBLIC_SPACE_BASE_URL="http://localhost:3002"
-NEXT_PUBLIC_SPACE_BASE_PATH="/spaces"
+VITE_SPACE_BASE_URL="http://localhost:3002"
+VITE_SPACE_BASE_PATH="/spaces"
 
-NEXT_PUBLIC_LIVE_BASE_URL="http://localhost:3100"
-NEXT_PUBLIC_LIVE_BASE_PATH="/live"
+VITE_LIVE_BASE_URL="http://localhost:3100"
+VITE_LIVE_BASE_PATH="/live"

apps/admin/.eslintignore

@@ -1,4 +1,6 @@
 .next/*
+.react-router/*
+.vite/*
 out/*
 public/*
 dist/*

apps/admin/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  extends: ["@plane/eslint-config/next.js"],
+  ignorePatterns: ["build/**", "dist/**", ".vite/**"],
+  rules: {
+    "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,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ["@plane/eslint-config/next.js"],
-};

apps/admin/.prettierignore

@@ -1,4 +1,6 @@
 .next
+.react-router
+.vite
 .vercel
 .tubro
 out/

apps/admin/.prettierrc

@@ -1,5 +1,6 @@
 {
   "printWidth": 120,
   "tabWidth": 2,
-  "trailingComma": "es5"
+  "trailingComma": "es5",
+  "plugins": ["@prettier/plugin-oxc"]
 }

apps/admin/Dockerfile.admin

@@ -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
+# 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 VITE_API_BASE_URL=""
+ENV VITE_API_BASE_URL=$VITE_API_BASE_URL
+ARG VITE_API_BASE_PATH="/api"
+ENV VITE_API_BASE_PATH=$VITE_API_BASE_PATH
+
+ARG VITE_ADMIN_BASE_URL=""
+ENV VITE_ADMIN_BASE_URL=$VITE_ADMIN_BASE_URL
+ARG VITE_ADMIN_BASE_PATH="/god-mode"
+ENV VITE_ADMIN_BASE_PATH=$VITE_ADMIN_BASE_PATH
+
+ARG VITE_SPACE_BASE_URL=""
+ENV VITE_SPACE_BASE_URL=$VITE_SPACE_BASE_URL
+ARG VITE_SPACE_BASE_PATH="/spaces"
+ENV VITE_SPACE_BASE_PATH=$VITE_SPACE_BASE_PATH
+
+ARG VITE_LIVE_BASE_URL=""
+ENV VITE_LIVE_BASE_URL=$VITE_LIVE_BASE_URL
+ARG VITE_LIVE_BASE_PATH="/live"
+ENV VITE_LIVE_BASE_PATH=$VITE_LIVE_BASE_PATH
+
+ARG VITE_WEB_BASE_URL=""
+ENV VITE_WEB_BASE_URL=$VITE_WEB_BASE_URL
+ARG VITE_WEB_BASE_PATH=""
+ENV VITE_WEB_BASE_PATH=$VITE_WEB_BASE_PATH
+
+ARG VITE_WEBSITE_URL="https://plane.so"
+ENV VITE_WEBSITE_URL=$VITE_WEBSITE_URL
+ARG VITE_SUPPORT_EMAIL="support@plane.so"
+ENV VITE_SUPPORT_EMAIL=$VITE_SUPPORT_EMAIL
 
 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
 
+# 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
-
-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
-
-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
+RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store CI=true pnpm install --offline --frozen-lockfile --store-dir=/pnpm/store --prod=false
 
+# Build only the admin package
 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
+FROM nginx:1.27-alpine AS production
 
-# 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
-
-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 apps/admin/nginx/nginx.conf /etc/nginx/nginx.conf
+COPY --from=installer /app/apps/admin/build/client /usr/share/nginx/html/god-mode
 
 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.dev

@@ -8,7 +8,7 @@ COPY . .
 RUN corepack enable pnpm && pnpm add -g turbo
 RUN pnpm install
 
-ENV NEXT_PUBLIC_ADMIN_BASE_PATH="/god-mode"
+ENV VITE_ADMIN_BASE_PATH="/god-mode"
 
 EXPOSE 3000
 

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

@@ -1,11 +1,11 @@
-"use client";
-import { FC } from "react";
 import { useForm } from "react-hook-form";
 import { Lightbulb } from "lucide-react";
-import { IFormattedInstanceConfiguration, TInstanceAIConfigurationKeys } from "@plane/types";
-import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+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";
 
@@ -15,7 +15,7 @@ type IInstanceAIForm = {
 
 type AIFormValues = Record<TInstanceAIConfigurationKeys, string>;
 
-export const InstanceAIForm: FC<IInstanceAIForm> = (props) => {
+export function InstanceAIForm(props: IInstanceAIForm) {
   const { config } = props;
   // store
   const { updateInstanceConfigurations } = useInstance();
@@ -131,4 +131,4 @@ export const InstanceAIForm: FC<IInstanceAIForm> = (props) => {
       </div>
     </div>
   );
-};
+}

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

@@ -1,10 +0,0 @@
-import { ReactNode } from "react";
-import { 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

@@ -1,14 +1,13 @@
-"use client";
-
 import { observer } from "mobx-react";
 import useSWR from "swr";
 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(function InstanceAIPage(_props: Route.ComponentProps) {
   // store
   const { fetchInstanceConfigurations, formattedConfig } = useInstance();
 
@@ -42,4 +41,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/form.tsx

@@ -0,0 +1,207 @@
+import { useState } from "react";
+import { isEmpty } from "lodash-es";
+import Link from "next/link";
+import { useForm } from "react-hook-form";
+// plane internal packages
+import { API_BASE_URL } from "@plane/constants";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IFormattedInstanceConfiguration, TInstanceGiteaAuthenticationConfigurationKeys } from "@plane/types";
+import { Button, getButtonStyling } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import { CodeBlock } from "@/components/common/code-block";
+import { ConfirmDiscardModal } from "@/components/common/confirm-discard-modal";
+import type { TControllerInputFormField } from "@/components/common/controller-input";
+import { ControllerInput } from "@/components/common/controller-input";
+import type { TCopyField } from "@/components/common/copy-field";
+import { CopyField } from "@/components/common/copy-field";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type Props = {
+  config: IFormattedInstanceConfiguration;
+};
+
+type GiteaConfigFormValues = Record<TInstanceGiteaAuthenticationConfigurationKeys, string>;
+
+export function InstanceGiteaConfigForm(props: Props) {
+  const { config } = props;
+  // states
+  const [isDiscardChangesModalOpen, setIsDiscardChangesModalOpen] = useState(false);
+  // store hooks
+  const { updateInstanceConfigurations } = useInstance();
+  // form data
+  const {
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors, isDirty, isSubmitting },
+  } = useForm<GiteaConfigFormValues>({
+    defaultValues: {
+      GITEA_HOST: config["GITEA_HOST"] || "https://gitea.com",
+      GITEA_CLIENT_ID: config["GITEA_CLIENT_ID"],
+      GITEA_CLIENT_SECRET: config["GITEA_CLIENT_SECRET"],
+    },
+  });
+
+  const originURL = !isEmpty(API_BASE_URL) ? API_BASE_URL : typeof window !== "undefined" ? window.location.origin : "";
+
+  const GITEA_FORM_FIELDS: TControllerInputFormField[] = [
+    {
+      key: "GITEA_HOST",
+      type: "text",
+      label: "Gitea Host",
+      description: (
+        <>Use the URL of your Gitea instance. For the official Gitea instance, use &quot;https://gitea.com&quot;.</>
+      ),
+      placeholder: "https://gitea.com",
+      error: Boolean(errors.GITEA_HOST),
+      required: true,
+    },
+    {
+      key: "GITEA_CLIENT_ID",
+      type: "text",
+      label: "Client ID",
+      description: (
+        <>
+          You will get this from your{" "}
+          <a
+            tabIndex={-1}
+            href="https://gitea.com/user/settings/applications"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            Gitea OAuth application settings.
+          </a>
+        </>
+      ),
+      placeholder: "70a44354520df8bd9bcd",
+      error: Boolean(errors.GITEA_CLIENT_ID),
+      required: true,
+    },
+    {
+      key: "GITEA_CLIENT_SECRET",
+      type: "password",
+      label: "Client secret",
+      description: (
+        <>
+          Your client secret is also found in your{" "}
+          <a
+            tabIndex={-1}
+            href="https://gitea.com/user/settings/applications"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            Gitea OAuth application settings.
+          </a>
+        </>
+      ),
+      placeholder: "9b0050f94ec1b744e32ce79ea4ffacd40d4119cb",
+      error: Boolean(errors.GITEA_CLIENT_SECRET),
+      required: true,
+    },
+  ];
+
+  const GITEA_SERVICE_FIELD: TCopyField[] = [
+    {
+      key: "Callback_URI",
+      label: "Callback URI",
+      url: `${originURL}/auth/gitea/callback/`,
+      description: (
+        <>
+          We will auto-generate this. Paste this into your <CodeBlock darkerShade>Authorized Callback URI</CodeBlock>{" "}
+          field{" "}
+          <a
+            tabIndex={-1}
+            href={`${control._formValues.GITEA_HOST || "https://gitea.com"}/user/settings/applications`}
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            here.
+          </a>
+        </>
+      ),
+    },
+  ];
+
+  const onSubmit = async (formData: GiteaConfigFormValues) => {
+    const payload: Partial<GiteaConfigFormValues> = { ...formData };
+
+    await updateInstanceConfigurations(payload)
+      .then((response = []) => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Done!",
+          message: "Your Gitea authentication is configured. You should test it now.",
+        });
+        reset({
+          GITEA_HOST: response.find((item) => item.key === "GITEA_HOST")?.value,
+          GITEA_CLIENT_ID: response.find((item) => item.key === "GITEA_CLIENT_ID")?.value,
+          GITEA_CLIENT_SECRET: response.find((item) => item.key === "GITEA_CLIENT_SECRET")?.value,
+        });
+      })
+      .catch((err) => console.error(err));
+  };
+
+  const handleGoBack = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+    if (isDirty) {
+      e.preventDefault();
+      setIsDiscardChangesModalOpen(true);
+    }
+  };
+
+  return (
+    <>
+      <ConfirmDiscardModal
+        isOpen={isDiscardChangesModalOpen}
+        onDiscardHref="/authentication"
+        handleClose={() => setIsDiscardChangesModalOpen(false)}
+      />
+      <div className="flex flex-col gap-8">
+        <div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
+          <div className="flex flex-col gap-y-4 col-span-2 md:col-span-1 pt-1">
+            <div className="pt-2.5 text-xl font-medium">Gitea-provided details for Plane</div>
+            {GITEA_FORM_FIELDS.map((field) => (
+              <ControllerInput
+                key={field.key}
+                control={control}
+                type={field.type}
+                name={field.key}
+                label={field.label}
+                description={field.description}
+                placeholder={field.placeholder}
+                error={field.error}
+                required={field.required}
+              />
+            ))}
+            <div className="flex flex-col gap-1 pt-4">
+              <div className="flex items-center gap-4">
+                <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isDirty}>
+                  {isSubmitting ? "Saving..." : "Save changes"}
+                </Button>
+                <Link
+                  href="/authentication"
+                  className={cn(getButtonStyling("neutral-primary", "md"), "font-medium")}
+                  onClick={handleGoBack}
+                >
+                  Go back
+                </Link>
+              </div>
+            </div>
+          </div>
+          <div className="col-span-2 md:col-span-1">
+            <div className="flex flex-col gap-y-4 px-6 pt-1.5 pb-4 bg-custom-background-80/60 rounded-lg">
+              <div className="pt-2 text-xl font-medium">Plane-provided details for Gitea</div>
+              {GITEA_SERVICE_FIELD.map((field) => (
+                <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,99 @@
+import { useState } from "react";
+import { observer } from "mobx-react";
+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";
+//local components
+import type { Route } from "./+types/page";
+import { InstanceGiteaConfigForm } from "./form";
+
+const InstanceGiteaAuthenticationPage = observer(function InstanceGiteaAuthenticationPage() {
+  // store
+  const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
+  // state
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  // config
+  const enableGiteaConfig = formattedConfig?.IS_GITEA_ENABLED ?? "";
+  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
+
+  const updateConfig = async (key: "IS_GITEA_ENABLED", value: string) => {
+    setIsSubmitting(true);
+
+    const payload = {
+      [key]: value,
+    };
+
+    const updateConfigPromise = updateInstanceConfigurations(payload);
+
+    setPromiseToast(updateConfigPromise, {
+      loading: "Saving Configuration...",
+      success: {
+        title: "Configuration saved",
+        message: () => `Gitea authentication is now ${value === "1" ? "active" : "disabled"}.`,
+      },
+      error: {
+        title: "Error",
+        message: () => "Failed to save configuration",
+      },
+    });
+
+    await updateConfigPromise
+      .then(() => {
+        setIsSubmitting(false);
+      })
+      .catch((err) => {
+        console.error(err);
+        setIsSubmitting(false);
+      });
+  };
+
+  const isGiteaEnabled = enableGiteaConfig === "1";
+
+  return (
+    <>
+      <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">
+          <AuthenticationMethodCard
+            name="Gitea"
+            description="Allow members to login or sign up to plane with their Gitea accounts."
+            icon={<img src={giteaLogo} height={24} width={24} alt="Gitea Logo" />}
+            config={
+              <ToggleSwitch
+                value={isGiteaEnabled}
+                onChange={() => {
+                  updateConfig("IS_GITEA_ENABLED", isGiteaEnabled ? "0" : "1");
+                }}
+                size="sm"
+                disabled={isSubmitting || !formattedConfig}
+              />
+            }
+            disabled={isSubmitting || !formattedConfig}
+            withBorder={false}
+          />
+        </div>
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+          {formattedConfig ? (
+            <InstanceGiteaConfigForm config={formattedConfig} />
+          ) : (
+            <Loader className="space-y-8">
+              <Loader.Item height="50px" width="25%" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" width="50%" />
+            </Loader>
+          )}
+        </div>
+      </div>
+    </>
+  );
+});
+export const meta: Route.MetaFunction = () => [{ title: "Gitea Authentication - God Mode" }];
+
+export default InstanceGiteaAuthenticationPage;

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

@@ -1,19 +1,22 @@
-"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";
+import { Monitor } from "lucide-react";
 // plane internal packages
 import { API_BASE_URL } from "@plane/constants";
-import { IFormattedInstanceConfiguration, TInstanceGithubAuthenticationConfigurationKeys } from "@plane/types";
-import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
+import { Button, getButtonStyling } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+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 type { TControllerInputFormField } from "@/components/common/controller-input";
+import { ControllerInput } from "@/components/common/controller-input";
+import type { TCopyField } from "@/components/common/copy-field";
+import { CopyField } from "@/components/common/copy-field";
 // hooks
 import { useInstance } from "@/hooks/store";
 
@@ -23,7 +26,7 @@ type Props = {
 
 type GithubConfigFormValues = Record<TInstanceGithubAuthenticationConfigurationKeys, string>;
 
-export const InstanceGithubConfigForm: FC<Props> = (props) => {
+export function InstanceGithubConfigForm(props: Props) {
   const { config } = props;
   // states
   const [isDiscardChangesModalOpen, setIsDiscardChangesModalOpen] = useState(false);
@@ -101,7 +104,7 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
     },
   ];
 
-  const GITHUB_SERVICE_FIELD: TCopyField[] = [
+  const GITHUB_COMMON_SERVICE_DETAILS: TCopyField[] = [
     {
       key: "Origin_URL",
       label: "Origin URL",
@@ -121,6 +124,9 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
         </>
       ),
     },
+  ];
+
+  const GITHUB_SERVICE_DETAILS: TCopyField[] = [
     {
       key: "Callback_URI",
       label: "Callback URI",
@@ -208,16 +214,33 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
               </div>
             </div>
           </div>
-          <div className="col-span-2 md:col-span-1">
-            <div className="flex flex-col gap-y-4 px-6 pt-1.5 pb-4 bg-custom-background-80/60 rounded-lg">
-              <div className="pt-2 text-xl font-medium">Plane-provided details for GitHub</div>
-              {GITHUB_SERVICE_FIELD.map((field) => (
-                <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
-              ))}
+          <div className="col-span-2 md:col-span-1 flex flex-col gap-y-6">
+            <div className="pt-2 text-xl font-medium">Plane-provided details for GitHub</div>
+
+            <div className="flex flex-col gap-y-4">
+              {/* common service details */}
+              <div className="flex flex-col gap-y-4 px-6 py-4 bg-custom-background-80 rounded-lg">
+                {GITHUB_COMMON_SERVICE_DETAILS.map((field) => (
+                  <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
+                ))}
+              </div>
+
+              {/* web service details */}
+              <div className="flex flex-col rounded-lg overflow-hidden">
+                <div className="px-6 py-3 bg-custom-background-80/60 font-medium text-xs uppercase flex items-center gap-x-3 text-custom-text-200">
+                  <Monitor className="w-3 h-3" />
+                  Web
+                </div>
+                <div className="px-6 py-4 flex flex-col gap-y-4 bg-custom-background-80">
+                  {GITHUB_SERVICE_DETAILS.map((field) => (
+                    <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
+                  ))}
+                </div>
+              </div>
             </div>
           </div>
         </div>
       </div>
     </>
   );
-};
+}

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

@@ -1,10 +0,0 @@
-import { ReactNode } from "react";
-import { 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

@@ -1,24 +1,25 @@
-"use client";
-
 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 { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
+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(function InstanceGithubAuthenticationPage(
+  _props: Route.ComponentProps
+) {
   // store
   const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
   // state
@@ -43,7 +44,7 @@ const InstanceGithubAuthenticationPage = observer(() => {
       loading: "Saving Configuration...",
       success: {
         title: "Configuration saved",
-        message: () => `GitHub authentication is now ${value ? "active" : "disabled"}.`,
+        message: () => `GitHub authentication is now ${value === "1" ? "active" : "disabled"}.`,
       },
       error: {
         title: "Error",
@@ -71,7 +72,7 @@ const InstanceGithubAuthenticationPage = observer(() => {
             name="GitHub"
             description="Allow members to login or sign up to plane with their GitHub accounts."
             icon={
-              <Image
+              <img
                 src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
                 height={24}
                 width={24}
@@ -110,4 +111,6 @@ const InstanceGithubAuthenticationPage = observer(() => {
   );
 });
 
+export const meta: Route.MetaFunction = () => [{ title: "GitHub Authentication - God Mode" }];
+
 export default InstanceGithubAuthenticationPage;

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

@@ -1,17 +1,20 @@
-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";
 // plane internal packages
 import { API_BASE_URL } from "@plane/constants";
-import { IFormattedInstanceConfiguration, TInstanceGitlabAuthenticationConfigurationKeys } from "@plane/types";
-import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
+import { Button, getButtonStyling } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IFormattedInstanceConfiguration, TInstanceGitlabAuthenticationConfigurationKeys } 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 type { TControllerInputFormField } from "@/components/common/controller-input";
+import { ControllerInput } from "@/components/common/controller-input";
+import type { TCopyField } from "@/components/common/copy-field";
+import { CopyField } from "@/components/common/copy-field";
 // hooks
 import { useInstance } from "@/hooks/store";
 
@@ -21,7 +24,7 @@ type Props = {
 
 type GitlabConfigFormValues = Record<TInstanceGitlabAuthenticationConfigurationKeys, string>;
 
-export const InstanceGitlabConfigForm: FC<Props> = (props) => {
+export function InstanceGitlabConfigForm(props: Props) {
   const { config } = props;
   // states
   const [isDiscardChangesModalOpen, setIsDiscardChangesModalOpen] = useState(false);
@@ -205,4 +208,4 @@ export const InstanceGitlabConfigForm: FC<Props> = (props) => {
       </div>
     </>
   );
-};
+}

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

@@ -1,10 +0,0 @@
-import { ReactNode } from "react";
-import { 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

@@ -1,20 +1,21 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
-import Image from "next/image";
 import useSWR from "swr";
-import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
+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(function InstanceGitlabAuthenticationPage(
+  _props: Route.ComponentProps
+) {
   // store
   const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
   // state
@@ -37,7 +38,7 @@ const InstanceGitlabAuthenticationPage = observer(() => {
       loading: "Saving Configuration...",
       success: {
         title: "Configuration saved",
-        message: () => `GitLab authentication is now ${value ? "active" : "disabled"}.`,
+        message: () => `GitLab authentication is now ${value === "1" ? "active" : "disabled"}.`,
       },
       error: {
         title: "Error",
@@ -61,7 +62,7 @@ const InstanceGitlabAuthenticationPage = observer(() => {
           <AuthenticationMethodCard
             name="GitLab"
             description="Allow members to login or sign up to plane with their GitLab accounts."
-            icon={<Image src={GitlabLogo} height={24} width={24} alt="GitLab Logo" />}
+            icon={<img src={GitlabLogo} height={24} width={24} alt="GitLab Logo" />}
             config={
               <ToggleSwitch
                 value={Boolean(parseInt(enableGitlabConfig))}
@@ -98,4 +99,6 @@ const InstanceGitlabAuthenticationPage = observer(() => {
   );
 });
 
+export const meta: Route.MetaFunction = () => [{ title: "GitLab Authentication - God Mode" }];
+
 export default InstanceGitlabAuthenticationPage;

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

@@ -1,18 +1,21 @@
-"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";
+import { Monitor } from "lucide-react";
 // plane internal packages
 import { API_BASE_URL } from "@plane/constants";
-import { IFormattedInstanceConfiguration, TInstanceGoogleAuthenticationConfigurationKeys } from "@plane/types";
-import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
+import { Button, getButtonStyling } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IFormattedInstanceConfiguration, TInstanceGoogleAuthenticationConfigurationKeys } 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 type { TControllerInputFormField } from "@/components/common/controller-input";
+import { ControllerInput } from "@/components/common/controller-input";
+import type { TCopyField } from "@/components/common/copy-field";
+import { CopyField } from "@/components/common/copy-field";
 // hooks
 import { useInstance } from "@/hooks/store";
 
@@ -22,7 +25,7 @@ type Props = {
 
 type GoogleConfigFormValues = Record<TInstanceGoogleAuthenticationConfigurationKeys, string>;
 
-export const InstanceGoogleConfigForm: FC<Props> = (props) => {
+export function InstanceGoogleConfigForm(props: Props) {
   const { config } = props;
   // states
   const [isDiscardChangesModalOpen, setIsDiscardChangesModalOpen] = useState(false);
@@ -90,7 +93,7 @@ export const InstanceGoogleConfigForm: FC<Props> = (props) => {
     },
   ];
 
-  const GOOGLE_SERVICE_DETAILS: TCopyField[] = [
+  const GOOGLE_COMMON_SERVICE_DETAILS: TCopyField[] = [
     {
       key: "Origin_URL",
       label: "Origin URL",
@@ -110,6 +113,9 @@ export const InstanceGoogleConfigForm: FC<Props> = (props) => {
         </p>
       ),
     },
+  ];
+
+  const GOOGLE_SERVICE_DETAILS: TCopyField[] = [
     {
       key: "Callback_URI",
       label: "Callback URI",
@@ -195,16 +201,33 @@ export const InstanceGoogleConfigForm: FC<Props> = (props) => {
               </div>
             </div>
           </div>
-          <div className="col-span-2 md:col-span-1">
-            <div className="flex flex-col gap-y-4 px-6 pt-1.5 pb-4 bg-custom-background-80/60 rounded-lg">
-              <div className="pt-2 text-xl font-medium">Plane-provided details for Google</div>
-              {GOOGLE_SERVICE_DETAILS.map((field) => (
-                <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
-              ))}
+          <div className="col-span-2 md:col-span-1 flex flex-col gap-y-6">
+            <div className="pt-2 text-xl font-medium">Plane-provided details for Google</div>
+
+            <div className="flex flex-col gap-y-4">
+              {/* common service details */}
+              <div className="flex flex-col gap-y-4 px-6 py-4 bg-custom-background-80 rounded-lg">
+                {GOOGLE_COMMON_SERVICE_DETAILS.map((field) => (
+                  <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
+                ))}
+              </div>
+
+              {/* web service details */}
+              <div className="flex flex-col rounded-lg overflow-hidden">
+                <div className="px-6 py-3 bg-custom-background-80/60 font-medium text-xs uppercase flex items-center gap-x-3 text-custom-text-200">
+                  <Monitor className="w-3 h-3" />
+                  Web
+                </div>
+                <div className="px-6 py-4 flex flex-col gap-y-4 bg-custom-background-80">
+                  {GOOGLE_SERVICE_DETAILS.map((field) => (
+                    <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
+                  ))}
+                </div>
+              </div>
             </div>
           </div>
         </div>
       </div>
     </>
   );
-};
+}

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

@@ -1,10 +0,0 @@
-import { ReactNode } from "react";
-import { 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

@@ -1,20 +1,21 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
-import Image from "next/image";
 import useSWR from "swr";
-import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
+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(function InstanceGoogleAuthenticationPage(
+  _props: Route.ComponentProps
+) {
   // store
   const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
   // state
@@ -37,7 +38,7 @@ const InstanceGoogleAuthenticationPage = observer(() => {
       loading: "Saving Configuration...",
       success: {
         title: "Configuration saved",
-        message: () => `Google authentication is now ${value ? "active" : "disabled"}.`,
+        message: () => `Google authentication is now ${value === "1" ? "active" : "disabled"}.`,
       },
       error: {
         title: "Error",
@@ -62,7 +63,7 @@ const InstanceGoogleAuthenticationPage = observer(() => {
             name="Google"
             description="Allow members to login or sign up to plane with their Google
             accounts."
-            icon={<Image src={GoogleLogo} height={24} width={24} alt="Google Logo" />}
+            icon={<img src={GoogleLogo} height={24} width={24} alt="Google Logo" />}
             config={
               <ToggleSwitch
                 value={Boolean(parseInt(enableGoogleConfig))}
@@ -99,4 +100,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 { ReactNode } from "react";
-import { 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

@@ -1,18 +1,18 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
 // plane internal packages
-import { TInstanceConfigurationKeys } from "@plane/types";
-import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
+import { setPromiseToast } from "@plane/propel/toast";
+import type { TInstanceConfigurationKeys } from "@plane/types";
+import { Loader, ToggleSwitch } from "@plane/ui";
 import { cn } from "@plane/utils";
 // hooks
 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(function InstanceAuthenticationPage(_props: Route.ComponentProps) {
   // store
   const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
 
@@ -110,4 +110,6 @@ const InstanceAuthenticationPage = observer(() => {
   );
 });
 
+export const meta: Route.MetaFunction = () => [{ title: "Authentication Settings - Plane Web" }];
+
 export default InstanceAuthenticationPage;

apps/admin/app/(all)/(dashboard)/email/email-config-form.tsx

@@ -1,13 +1,14 @@
-"use client";
-
-import React, { FC, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 // types
-import { IFormattedInstanceConfiguration, TInstanceEmailConfigurationKeys } from "@plane/types";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IFormattedInstanceConfiguration, TInstanceEmailConfigurationKeys } from "@plane/types";
 // ui
-import { Button, CustomSelect, TOAST_TYPE, setToast } from "@plane/ui";
+import { CustomSelect } from "@plane/ui";
 // 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";
 // local components
@@ -27,7 +28,7 @@ const EMAIL_SECURITY_OPTIONS: { [key in TEmailSecurityKeys]: string } = {
   NONE: "No email security",
 };
 
-export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
+export function InstanceEmailForm(props: IInstanceEmailForm) {
   const { config } = props;
   // states
   const [isSendTestEmailModalOpen, setIsSendTestEmailModalOpen] = useState(false);
@@ -221,4 +222,4 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
       </div>
     </div>
   );
-};
+}

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

@@ -1,14 +0,0 @@
-import { ReactNode } from "react";
-import { 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

@@ -1,15 +1,15 @@
-"use client";
-
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
-import { Loader, setToast, TOAST_TYPE, ToggleSwitch } from "@plane/ui";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+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(function InstanceEmailPage(_props: Route.ComponentProps) {
   // store
   const { fetchInstanceConfigurations, formattedConfig, disableEmail } = useInstance();
 
@@ -90,4 +90,6 @@ const InstanceEmailPage: React.FC = observer(() => {
   );
 });
 
+export const meta: Route.MetaFunction = () => [{ title: "Email Settings - God Mode" }];
+
 export default InstanceEmailPage;

apps/admin/app/(all)/(dashboard)/email/test-email-modal.tsx

@@ -1,9 +1,10 @@
-import React, { FC, useEffect, useState } from "react";
+import { useEffect, useState, Fragment } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 // plane imports
+import { Button } from "@plane/propel/button";
 import { InstanceService } from "@plane/services";
 // ui
-import { Button, Input } from "@plane/ui";
+import { Input } from "@plane/ui";
 
 type Props = {
   isOpen: boolean;
@@ -18,7 +19,7 @@ enum ESendEmailSteps {
 
 const instanceService = new InstanceService();
 
-export const SendTestEmailModal: FC<Props> = (props) => {
+export function SendTestEmailModal(props: Props) {
   const { isOpen, handleClose } = props;
 
   // state
@@ -60,10 +61,10 @@ export const SendTestEmailModal: FC<Props> = (props) => {
   };
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
+    <Transition.Root show={isOpen} as={Fragment}>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
         <Transition.Child
-          as={React.Fragment}
+          as={Fragment}
           enter="ease-out duration-300"
           enterFrom="opacity-0"
           enterTo="opacity-100"
@@ -76,7 +77,7 @@ export const SendTestEmailModal: FC<Props> = (props) => {
         <div className="fixed inset-0 z-20 overflow-y-auto">
           <div className="my-10 flex justify-center p-4 text-center sm:p-0 md:my-20">
             <Transition.Child
-              as={React.Fragment}
+              as={Fragment}
               enter="ease-out duration-300"
               enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
               enterTo="opacity-100 translate-y-0 sm:scale-100"
@@ -132,4 +133,4 @@ export const SendTestEmailModal: FC<Props> = (props) => {
       </Dialog>
     </Transition.Root>
   );
-};
+}

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

@@ -1,12 +1,12 @@
-"use client";
-import { FC } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 import { Telescope } from "lucide-react";
 // types
-import { IInstance, IInstanceAdmin } from "@plane/types";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IInstance, IInstanceAdmin } from "@plane/types";
 // ui
-import { Button, Input, TOAST_TYPE, ToggleSwitch, setToast } from "@plane/ui";
+import { Input, ToggleSwitch } from "@plane/ui";
 // components
 import { ControllerInput } from "@/components/common/controller-input";
 import { useInstance } from "@/hooks/store";
@@ -18,7 +18,7 @@ export interface IGeneralConfigurationForm {
   instanceAdmins: IInstanceAdmin[];
 }
 
-export const GeneralConfigurationForm: FC<IGeneralConfigurationForm> = observer((props) => {
+export const GeneralConfigurationForm = observer(function GeneralConfigurationForm(props: IGeneralConfigurationForm) {
   const { instance, instanceAdmins } = props;
   // hooks
   const { instanceConfigurations, updateInstanceInfo, updateInstanceConfigurations } = useInstance();

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

@@ -1,10 +1,8 @@
-"use client";
-
-import { FC, useState } from "react";
+import { useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
 import { MessageSquare } from "lucide-react";
-import { IFormattedInstanceConfiguration } from "@plane/types";
+import type { IFormattedInstanceConfiguration } from "@plane/types";
 import { ToggleSwitch } from "@plane/ui";
 // hooks
 import { useInstance } from "@/hooks/store";
@@ -13,7 +11,7 @@ type TIntercomConfig = {
   isTelemetryEnabled: boolean;
 };
 
-export const IntercomConfig: FC<TIntercomConfig> = observer((props) => {
+export const IntercomConfig = observer(function IntercomConfig(props: TIntercomConfig) {
   const { isTelemetryEnabled } = props;
   // hooks
   const { instanceConfigurations, updateInstanceConfigurations, fetchInstanceConfigurations } = useInstance();

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

@@ -1,10 +0,0 @@
-import { ReactNode } from "react";
-import { 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

@@ -1,8 +1,8 @@
-"use client";
 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 +28,6 @@ function GeneralPage() {
   );
 }
 
+export const meta: Route.MetaFunction = () => [{ title: "General Settings - God Mode" }];
+
 export default observer(GeneralPage);

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

@@ -1,6 +1,3 @@
-"use client";
-
-import { FC } from "react";
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
 import { Menu, Settings } from "lucide-react";
@@ -11,7 +8,7 @@ import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 // hooks
 import { useTheme } from "@/hooks/store";
 
-export const HamburgerToggle: FC = observer(() => {
+export const HamburgerToggle = observer(function HamburgerToggle() {
   const { isSidebarCollapsed, toggleSidebar } = useTheme();
   return (
     <div
@@ -23,7 +20,7 @@ export const HamburgerToggle: FC = observer(() => {
   );
 });
 
-export const AdminHeader: FC = observer(() => {
+export const AdminHeader = observer(function AdminHeader() {
   const pathName = usePathname();
 
   const getHeaderTitle = (pathName: string) => {
@@ -44,6 +41,8 @@ export const AdminHeader: FC = observer(() => {
         return "GitHub";
       case "gitlab":
         return "GitLab";
+      case "gitea":
+        return "Gitea";
       case "workspace":
         return "Workspace";
       case "create":
@@ -69,7 +68,7 @@ export const AdminHeader: FC = observer(() => {
     return breadcrumbItems;
   };
 
-  const breadcrumbItems = generateBreadcrumbItems(pathName || "");
+  const breadcrumbItems = generateBreadcrumbItems(pathName);
 
   return (
     <div className="relative z-10 flex h-header w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-sidebar-border-200 bg-custom-sidebar-background-100 p-4">

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

@@ -1,8 +1,7 @@
-"use client";
-import { FC } from "react";
 import { useForm } from "react-hook-form";
-import { IFormattedInstanceConfiguration, TInstanceImageConfigurationKeys } from "@plane/types";
-import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IFormattedInstanceConfiguration, TInstanceImageConfigurationKeys } from "@plane/types";
 // components
 import { ControllerInput } from "@/components/common/controller-input";
 // hooks
@@ -14,7 +13,7 @@ type IInstanceImageConfigForm = {
 
 type ImageConfigFormValues = Record<TInstanceImageConfigurationKeys, string>;
 
-export const InstanceImageConfigForm: FC<IInstanceImageConfigForm> = (props) => {
+export function InstanceImageConfigForm(props: IInstanceImageConfigForm) {
   const { config } = props;
   // store hooks
   const { updateInstanceConfigurations } = useInstance();
@@ -77,4 +76,4 @@ export const InstanceImageConfigForm: FC<IInstanceImageConfigForm> = (props) =>
       </div>
     </div>
   );
-};
+}

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

@@ -1,14 +0,0 @@
-import { ReactNode } from "react";
-import { 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

@@ -1,14 +1,13 @@
-"use client";
-
 import { observer } from "mobx-react";
 import useSWR from "swr";
 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(function InstanceImagePage(_props: Route.ComponentProps) {
   // store
   const { formattedConfig, fetchInstanceConfigurations } = useInstance();
 
@@ -38,4 +37,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,46 +1,28 @@
-"use client";
-
-import { FC, ReactNode, useEffect } from "react";
+import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";
-import useSWR from "swr";
+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";
-// plane admin hooks
-import { useInstanceFeatureFlags } from "@/plane-admin/hooks/store/use-instance-feature-flag";
 // 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;
+function AdminLayout(_props: Route.ComponentProps) {
   // router
-  const router = useRouter();
+  const { replace } = useRouter();
   // store hooks
   const { isUserLoggedIn } = useUser();
-  // plane admin hooks
-  const { fetchInstanceFeatureFlags } = useInstanceFeatureFlags();
-  // fetching instance feature flags
-  const { isLoading: flagsLoader, error: flagsError } = useSWR(
-    `INSTANCE_FEATURE_FLAGS`,
-    () => fetchInstanceFeatureFlags(),
-    { revalidateOnFocus: false, revalidateIfStale: false, errorRetryCount: 1 }
-  );
 
   useEffect(() => {
-    if (isUserLoggedIn === false) {
-      router.push("/");
-    }
-  }, [router, isUserLoggedIn]);
+    if (isUserLoggedIn === false) replace("/");
+  }, [replace, isUserLoggedIn]);
 
-  if ((flagsLoader && !flagsError) || isUserLoggedIn === undefined) {
+  if (isUserLoggedIn === undefined) {
     return (
       <div className="relative flex h-screen w-full items-center justify-center">
         <LogoSpinner />
@@ -54,7 +36,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>
@@ -62,6 +46,6 @@ const AdminLayout: FC<TAdminLayout> = (props) => {
   }
 
   return <></>;
-};
+}
 
 export default observer(AdminLayout);

apps/admin/app/(all)/(dashboard)/sidebar-dropdown.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { Fragment, useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useTheme as useNextTheme } from "next-themes";
@@ -16,7 +14,7 @@ import { useTheme, useUser } from "@/hooks/store";
 // service initialization
 const authService = new AuthService();
 
-export const AdminSidebarDropdown = observer(() => {
+export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
   // store hooks
   const { isSidebarCollapsed } = useTheme();
   const { currentUser, signOut } = useUser();

apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx

@@ -1,17 +1,15 @@
-"use client";
-
-import { FC, useState, useRef } from "react";
+import { useState, useRef } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { ExternalLink, FileText, HelpCircle, MoveLeft } from "lucide-react";
+import { ExternalLink, HelpCircle, MoveLeft } from "lucide-react";
 import { Transition } from "@headlessui/react";
 // plane internal packages
 import { WEB_BASE_URL } from "@plane/constants";
-import { DiscordIcon, GithubIcon } from "@plane/propel/icons";
+import { DiscordIcon, GithubIcon, PageIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import { cn } from "@plane/utils";
 // hooks
-import { useInstance, useTheme } from "@/hooks/store";
+import { useTheme } from "@/hooks/store";
 // assets
 // eslint-disable-next-line import/order
 import packageJson from "package.json";
@@ -20,7 +18,7 @@ const helpOptions = [
   {
     name: "Documentation",
     href: "https://docs.plane.so/",
-    Icon: FileText,
+    Icon: PageIcon,
   },
   {
     name: "Join our Discord",
@@ -34,11 +32,10 @@ const helpOptions = [
   },
 ];
 
-export const AdminSidebarHelpSection: FC = observer(() => {
+export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection() {
   // states
   const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
   // store
-  const { instance } = useInstance();
   const { isSidebarCollapsed, toggleSidebar } = useTheme();
   // refs
   const helpOptionsRef = useRef<HTMLDivElement | null>(null);
@@ -111,7 +108,7 @@ export const AdminSidebarHelpSection: FC = observer(() => {
                     <Link href={href} key={name} target="_blank">
                       <div className="flex items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80">
                         <div className="grid flex-shrink-0 place-items-center">
-                          <Icon className="h-3.5 w-3.5 text-custom-text-200" size={14} />
+                          <Icon className="h-3.5 w-3.5 text-custom-text-200" width={14} height={14} />
                         </div>
                         <span className="text-xs">{name}</span>
                       </div>
@@ -131,20 +128,8 @@ export const AdminSidebarHelpSection: FC = observer(() => {
                     </button>
                   );
               })}
-              {/* {instance?.latest_version && instance?.current_version != instance?.latest_version && (
-                <a
-                  href="https://docs.plane.so/docs/changelog"
-                  target="_blank"
-                  className="flex items-center gap-2 px-2 py-1 text-xs font-medium cursor-pointer transition-all border rounded border-custom-primary-100/30 bg-custom-primary-100/20 hover:bg-custom-primary-100/30 text-custom-text-100"
-                  referrerPolicy="no-referrer"
-                >
-                  <RefreshCcw className="flex-shrink-0 h-3 w-3 text-custom-text-100" />
-                  <div>Updates available</div>
-                  <div className="flex-shrink-0 ml-auto animate-pulse bg-custom-primary-100 !w-2 !h-2 rounded-full" />
-                </a>
-              )} */}
             </div>
-            <div className="px-2 pb-1 pt-2 text-[10px]">Version: v{instance?.current_version}</div>
+            <div className="px-2 pb-1 pt-2 text-[10px]">Version: v{packageJson.version}</div>
           </div>
         </Transition>
       </div>

apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
@@ -50,7 +48,7 @@ const INSTANCE_ADMIN_LINKS = [
   },
 ];
 
-export const AdminSidebarMenu = observer(() => {
+export const AdminSidebarMenu = observer(function AdminSidebarMenu() {
   // store hooks
   const { isSidebarCollapsed, toggleSidebar } = useTheme();
   // router
@@ -65,7 +63,7 @@ export const AdminSidebarMenu = observer(() => {
   return (
     <div className="flex h-full w-full flex-col gap-2.5 overflow-y-scroll vertical-scrollbar scrollbar-sm px-4 py-4">
       {INSTANCE_ADMIN_LINKS.map((item, index) => {
-        const isActive = item.href === pathName || pathName?.includes(item.href);
+        const isActive = item.href === pathName || pathName.includes(item.href);
         return (
           <Link key={index} href={item.href} onClick={handleItemClick}>
             <div>

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

@@ -1,6 +1,4 @@
-"use client";
-
-import { FC, useEffect, useRef } from "react";
+import { useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 // plane helpers
 import { useOutsideClickDetector } from "@plane/hooks";
@@ -11,7 +9,7 @@ import { AdminSidebarDropdown } from "./sidebar-dropdown";
 import { AdminSidebarHelpSection } from "./sidebar-help-section";
 import { AdminSidebarMenu } from "./sidebar-menu";
 
-export const AdminSidebar: FC = observer(() => {
+export const AdminSidebar = observer(function AdminSidebar() {
   // store
   const { isSidebarCollapsed, toggleSidebar } = useTheme();
 

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

@@ -4,16 +4,18 @@ import { useRouter } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
 // plane imports
 import { WEB_BASE_URL, ORGANIZATION_SIZE, RESTRICTED_URLS } from "@plane/constants";
+import { Button, getButtonStyling } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { InstanceWorkspaceService } from "@plane/services";
-import { IWorkspace } from "@plane/types";
+import type { IWorkspace } from "@plane/types";
 // components
-import { Button, CustomSelect, getButtonStyling, Input, setToast, TOAST_TYPE } from "@plane/ui";
+import { CustomSelect, Input } from "@plane/ui";
 // hooks
 import { useWorkspace } from "@/hooks/store";
 
 const instanceWorkspaceService = new InstanceWorkspaceService();
 
-export const WorkspaceCreateForm = () => {
+export function WorkspaceCreateForm() {
   // router
   const router = useRouter();
   // states
@@ -207,4 +209,4 @@ export const WorkspaceCreateForm = () => {
       </div>
     </div>
   );
-};
+}

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

@@ -1,21 +1,24 @@
-"use client";
-
 import { observer } from "mobx-react";
 // components
+import type { Route } from "./+types/page";
 import { WorkspaceCreateForm } from "./form";
 
-const WorkspaceCreatePage = observer(() => (
-  <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>
-      <div className="text-sm font-normal text-custom-text-300">
-        You will need to invite users from Workspace Settings after you create this workspace.
+const WorkspaceCreatePage = observer(function WorkspaceCreatePage(_props: Route.ComponentProps) {
+  return (
+    <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>
+        <div className="text-sm font-normal text-custom-text-300">
+          You will need to invite users from Workspace Settings after you create this workspace.
+        </div>
+      </div>
+      <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+        <WorkspaceCreateForm />
       </div>
     </div>
-    <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
-      <WorkspaceCreateForm />
-    </div>
-  </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 { ReactNode } from "react";
-import { 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

@@ -1,20 +1,22 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import useSWR from "swr";
 import { Loader as LoaderIcon } from "lucide-react";
 // types
-import { TInstanceConfigurationKeys } from "@plane/types";
-import { Button, getButtonStyling, Loader, setPromiseToast, ToggleSwitch } from "@plane/ui";
+import { Button, getButtonStyling } from "@plane/propel/button";
+import { setPromiseToast } from "@plane/propel/toast";
+import type { TInstanceConfigurationKeys } from "@plane/types";
+import { Loader, ToggleSwitch } from "@plane/ui";
+
 import { cn } from "@plane/utils";
 // components
 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(function WorkspaceManagementPage(_props: Route.ComponentProps) {
   // states
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
   // store
@@ -164,4 +166,6 @@ const WorkspaceManagementPage = observer(() => {
   );
 });
 
+export const meta: Route.MetaFunction = () => [{ title: "Workspace Management - God Mode" }];
+
 export default WorkspaceManagementPage;

apps/admin/app/(all)/(home)/auth-banner.tsx

@@ -1,14 +1,15 @@
-import { FC } from "react";
-import { Info, X } from "lucide-react";
+import { Info } from "lucide-react";
 // plane constants
-import { TAdminAuthErrorInfo } from "@plane/constants";
+import type { TAdminAuthErrorInfo } from "@plane/constants";
+// icons
+import { CloseIcon } from "@plane/propel/icons";
 
 type TAuthBanner = {
   bannerData: TAdminAuthErrorInfo | undefined;
   handleBannerData?: (bannerData: TAdminAuthErrorInfo | undefined) => void;
 };
 
-export const AuthBanner: FC<TAuthBanner> = (props) => {
+export function AuthBanner(props: TAuthBanner) {
   const { bannerData, handleBannerData } = props;
 
   if (!bannerData) return <></>;
@@ -22,8 +23,8 @@ export const AuthBanner: FC<TAuthBanner> = (props) => {
         className="relative ml-auto w-6 h-6 rounded-sm flex justify-center items-center transition-all cursor-pointer hover:bg-custom-primary-100/20 text-custom-primary-100/80"
         onClick={() => handleBannerData && handleBannerData(undefined)}
       >
-        <X className="w-4 h-4 flex-shrink-0" />
+        <CloseIcon className="w-4 h-4 flex-shrink-0" />
       </div>
     </div>
   );
-};
+}

apps/admin/app/(all)/(home)/auth-header.tsx

@@ -1,12 +1,12 @@
-"use client";
-
 import Link from "next/link";
 import { PlaneLockup } from "@plane/propel/icons";
 
-export const AuthHeader = () => (
-  <div className="flex items-center justify-between gap-6 w-full flex-shrink-0 sticky top-0">
-    <Link href="/">
-      <PlaneLockup height={20} width={95} className="text-custom-text-100" />
-    </Link>
-  </div>
-);
+export function AuthHeader() {
+  return (
+    <div className="flex items-center justify-between gap-6 w-full flex-shrink-0 sticky top-0">
+      <Link href="/">
+        <PlaneLockup height={20} width={95} className="text-custom-text-100" />
+      </Link>
+    </div>
+  );
+}

apps/admin/app/(all)/(home)/auth-helpers.tsx

@@ -1,22 +1,21 @@
-import { ReactNode } from "react";
-import Image from "next/image";
 import Link from "next/link";
 import { KeyRound, Mails } from "lucide-react";
 // plane packages
-import { SUPPORT_EMAIL, EAdminAuthErrorCodes, TAdminAuthErrorInfo } from "@plane/constants";
-import { TGetBaseAuthenticationModeProps, TInstanceAuthenticationModes } from "@plane/types";
+import type { TAdminAuthErrorInfo } from "@plane/constants";
+import { SUPPORT_EMAIL, EAdminAuthErrorCodes } from "@plane/constants";
+import type { TGetBaseAuthenticationModeProps, TInstanceAuthenticationModes } from "@plane/types";
 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 GitlabLogo from "@/app/assets/logos/gitlab-logo.svg?url";
+import GoogleLogo from "@/app/assets/logos/google-logo.svg?url";
 import { EmailCodesConfiguration } from "@/components/authentication/email-config-switch";
 import { GithubConfiguration } from "@/components/authentication/github-config";
 import { GitlabConfiguration } from "@/components/authentication/gitlab-config";
 import { GoogleConfiguration } from "@/components/authentication/google-config";
 import { PasswordLoginConfiguration } from "@/components/authentication/password-config-switch";
 // images
-import githubLightModeImage from "@/public/logos/github-black.png";
-import githubDarkModeImage from "@/public/logos/github-white.png";
-import GitlabLogo from "@/public/logos/gitlab-logo.svg";
-import GoogleLogo from "@/public/logos/google-logo.svg";
 
 export enum EErrorAlertType {
   BANNER_ALERT = "BANNER_ALERT",
@@ -27,7 +26,7 @@ export enum EErrorAlertType {
 }
 
 const errorCodeMessages: {
-  [key in EAdminAuthErrorCodes]: { title: string; message: (email?: string | undefined) => ReactNode };
+  [key in EAdminAuthErrorCodes]: { title: string; message: (email?: string | undefined) => React.ReactNode };
 } = {
   // admin
   [EAdminAuthErrorCodes.ADMIN_ALREADY_EXIST]: {
@@ -135,7 +134,7 @@ export const getBaseAuthenticationModes: (props: TGetBaseAuthenticationModeProps
     key: "google",
     name: "Google",
     description: "Allow members to log in or sign up for Plane with their Google accounts.",
-    icon: <Image src={GoogleLogo} height={20} width={20} alt="Google Logo" />,
+    icon: <img src={GoogleLogo} height={20} width={20} alt="Google Logo" />,
     config: <GoogleConfiguration disabled={disabled} updateConfig={updateConfig} />,
   },
   {
@@ -143,7 +142,7 @@ export const getBaseAuthenticationModes: (props: TGetBaseAuthenticationModeProps
     name: "GitHub",
     description: "Allow members to log in or sign up for Plane with their GitHub accounts.",
     icon: (
-      <Image
+      <img
         src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
         height={20}
         width={20}
@@ -156,7 +155,7 @@ export const getBaseAuthenticationModes: (props: TGetBaseAuthenticationModeProps
     key: "gitlab",
     name: "GitLab",
     description: "Allow members to log in or sign up to plane with their GitLab accounts.",
-    icon: <Image src={GitlabLogo} height={20} width={20} alt="GitLab Logo" />,
+    icon: <img src={GitlabLogo} height={20} width={20} alt="GitLab Logo" />,
     config: <GitlabConfiguration disabled={disabled} updateConfig={updateConfig} />,
   },
 ];

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

@@ -1,9 +1,25 @@
-"use client";
+import { useEffect } from "react";
+import { observer } from "mobx-react";
+import { useRouter } from "next/navigation";
+import { Outlet } from "react-router";
+// hooks
+import { useUser } from "@/hooks/store/use-user";
+
+function RootLayout() {
+  // router
+  const { replace } = useRouter();
+  // store hooks
+  const { isUserLoggedIn } = useUser();
+
+  useEffect(() => {
+    if (isUserLoggedIn === true) replace("/general");
+  }, [replace, isUserLoggedIn]);
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
-      {children}
+      <Outlet />
     </div>
   );
 }
+
+export default observer(RootLayout);

apps/admin/app/(all)/(home)/page.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // components
 import { LogoSpinner } from "@/components/common/logo-spinner";
@@ -8,9 +6,10 @@ import { InstanceSetupForm } from "@/components/instance/setup-form";
 // hooks
 import { useInstance } from "@/hooks/store";
 // components
+import type { Route } from "./+types/page";
 import { InstanceSignInForm } from "./sign-in-form";
 
-const HomePage = () => {
+function HomePage() {
   // store hooks
   const { instance, error } = useInstance();
 
@@ -35,6 +34,11 @@ const HomePage = () => {
 
   // if instance is fetched and setup is done, show sign in form
   return <InstanceSignInForm />;
-};
+}
 
 export default observer(HomePage);
+
+export const meta: Route.MetaFunction = () => [
+  { title: "Admin – Instance Setup & Sign-In" },
+  { name: "description", content: "Configure your Plane instance or sign in to the admin portal." },
+];

apps/admin/app/(all)/(home)/sign-in-form.tsx

@@ -1,12 +1,12 @@
-"use client";
-
-import { FC, useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useSearchParams } from "next/navigation";
 import { Eye, EyeOff } from "lucide-react";
 // plane internal packages
-import { API_BASE_URL, EAdminAuthErrorCodes, TAdminAuthErrorInfo } from "@plane/constants";
+import type { EAdminAuthErrorCodes, TAdminAuthErrorInfo } from "@plane/constants";
+import { API_BASE_URL } from "@plane/constants";
+import { Button } from "@plane/propel/button";
 import { AuthService } from "@plane/services";
-import { Button, Input, Spinner } from "@plane/ui";
+import { Input, Spinner } from "@plane/ui";
 // components
 import { Banner } from "@/components/common/banner";
 // local components
@@ -43,7 +43,7 @@ const defaultFromData: TFormData = {
   password: "",
 };
 
-export const InstanceSignInForm: FC = () => {
+export function InstanceSignInForm() {
   // search params
   const searchParams = useSearchParams();
   const emailParam = searchParams.get("email") || undefined;
@@ -190,4 +190,4 @@ export const InstanceSignInForm: FC = () => {
       </div>
     </>
   );
-};
+}

apps/admin/app/(all)/instance.provider.tsx

@@ -1,14 +1,9 @@
-import { FC, ReactNode } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
 // hooks
 import { useInstance } from "@/hooks/store";
 
-type InstanceProviderProps = {
-  children: ReactNode;
-};
-
-export const InstanceProvider: FC<InstanceProviderProps> = observer((props) => {
+export const InstanceProvider = observer(function InstanceProvider(props: React.PropsWithChildren) {
   const { children } = props;
   // store hooks
   const { fetchInstanceInfo } = useInstance();

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

@@ -1,33 +0,0 @@
-"use client";
-
-import { ThemeProvider } from "next-themes";
-import { SWRConfig } from "swr";
-// providers
-import { InstanceProvider } from "./instance.provider";
-import { StoreProvider } from "./store.provider";
-import { ToastWithTheme } from "./toast";
-import { UserProvider } from "./user.provider";
-
-const DEFAULT_SWR_CONFIG = {
-  refreshWhenHidden: false,
-  revalidateIfStale: false,
-  revalidateOnFocus: false,
-  revalidateOnMount: true,
-  refreshInterval: 600000,
-  errorRetryCount: 3,
-};
-
-export default function InstanceLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>
-      <ToastWithTheme />
-      <SWRConfig value={DEFAULT_SWR_CONFIG}>
-        <StoreProvider>
-          <InstanceProvider>
-            <UserProvider>{children}</UserProvider>
-          </InstanceProvider>
-        </StoreProvider>
-      </SWRConfig>
-    </ThemeProvider>
-  );
-}

apps/admin/app/(all)/store.provider.tsx

@@ -1,6 +1,4 @@
-"use client";
-
-import { ReactNode, createContext } from "react";
+import { createContext } from "react";
 // plane admin store
 import { RootStore } from "@/plane-admin/store/root.store";
 
@@ -23,12 +21,12 @@ function initializeStore(initialData = {}) {
 }
 
 export type StoreProviderProps = {
-  children: ReactNode;
+  children: React.ReactNode;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   initialState?: any;
 };
 
-export const StoreProvider = ({ children, initialState = {} }: StoreProviderProps) => {
+export function StoreProvider({ children, initialState = {} }: StoreProviderProps) {
   const store = initializeStore(initialState);
   return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
-};
+}

apps/admin/app/(all)/toast.tsx

@@ -1,10 +1,8 @@
-"use client";
-
 import { useTheme } from "next-themes";
-import { Toast } from "@plane/ui";
+import { Toast } from "@plane/propel/toast";
 import { resolveGeneralTheme } from "@plane/utils";
 
-export const ToastWithTheme = () => {
+export function ToastWithTheme() {
   const { resolvedTheme } = useTheme();
   return <Toast theme={resolveGeneralTheme(resolvedTheme)} />;
-};
+}

apps/admin/app/(all)/user.provider.tsx

@@ -1,16 +1,10 @@
-"use client";
-
-import { FC, ReactNode, useEffect } from "react";
+import { useEffect } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
 // hooks
 import { useInstance, useTheme, useUser } from "@/hooks/store";
 
-interface IUserProvider {
-  children: ReactNode;
-}
-
-export const UserProvider: FC<IUserProvider> = observer(({ children }) => {
+export const UserProvider = observer(function UserProvider({ children }: React.PropsWithChildren) {
   // hooks
   const { isSidebarCollapsed, toggleSidebar } = useTheme();
   const { currentUser, fetchCurrentUser } = useUser();

apps/admin/app/assets/logos/gitea-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 640 640" width="32" height="32"><path d="m395.9 484.2-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5 21.2-17.9 33.8-11.8 17.2 8.3 27.1 13 27.1 13l-.1-109.2 16.7-.1.1 117.1s57.4 24.2 83.1 40.1c3.7 2.3 10.2 6.8 12.9 14.4 2.1 6.1 2 13.1-1 19.3l-61 126.9c-6.2 12.7-21.4 18.1-33.9 12" style="fill:#fff"/><path d="M622.7 149.8c-4.1-4.1-9.6-4-9.6-4s-117.2 6.6-177.9 8c-13.3.3-26.5.6-39.6.7v117.2c-5.5-2.6-11.1-5.3-16.6-7.9 0-36.4-.1-109.2-.1-109.2-29 .4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5c-9.8-.6-22.5-2.1-39 1.5-8.7 1.8-33.5 7.4-53.8 26.9C-4.9 212.4 6.6 276.2 8 285.8c1.7 11.7 6.9 44.2 31.7 72.5 45.8 56.1 144.4 54.8 144.4 54.8s12.1 28.9 30.6 55.5c25 33.1 50.7 58.9 75.7 62 63 0 188.9-.1 188.9-.1s12 .1 28.3-10.3c14-8.5 26.5-23.4 26.5-23.4S547 483 565 451.5c5.5-9.7 10.1-19.1 14.1-28 0 0 55.2-117.1 55.2-231.1-1.1-34.5-9.6-40.6-11.6-42.6M125.6 353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6 321.8 60 295.4c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5 38.5-30c13.8-3.7 31-3.1 31-3.1s7.1 59.4 15.7 94.2c7.2 29.2 24.8 77.7 24.8 77.7s-26.1-3.1-43-9.1m300.3 107.6s-6.1 14.5-19.6 15.4c-5.8.4-10.3-1.2-10.3-1.2s-.3-.1-5.3-2.1l-112.9-55s-10.9-5.7-12.8-15.6c-2.2-8.1 2.7-18.1 2.7-18.1L322 273s4.8-9.7 12.2-13c.6-.3 2.3-1 4.5-1.5 8.1-2.1 18 2.8 18 2.8L467.4 315s12.6 5.7 15.3 16.2c1.9 7.4-.5 14-1.8 17.2-6.3 15.4-55 113.1-55 113.1" style="fill:#609926"/><path d="M326.8 380.1c-8.2.1-15.4 5.8-17.3 13.8s2 16.3 9.1 20c7.7 4 17.5 1.8 22.7-5.4 5.1-7.1 4.3-16.9-1.8-23.1l24-49.1c1.5.1 3.7.2 6.2-.5 4.1-.9 7.1-3.6 7.1-3.6 4.2 1.8 8.6 3.8 13.2 6.1 4.8 2.4 9.3 4.9 13.4 7.3.9.5 1.8 1.1 2.8 1.9 1.6 1.3 3.4 3.1 4.7 5.5 1.9 5.5-1.9 14.9-1.9 14.9-2.3 7.6-18.4 40.6-18.4 40.6-8.1-.2-15.3 5-17.7 12.5-2.6 8.1 1.1 17.3 8.9 21.3s17.4 1.7 22.5-5.3c5-6.8 4.6-16.3-1.1-22.6 1.9-3.7 3.7-7.4 5.6-11.3 5-10.4 13.5-30.4 13.5-30.4.9-1.7 5.7-10.3 2.7-21.3-2.5-11.4-12.6-16.7-12.6-16.7-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3 4.7-9.7 9.4-19.3 14.1-29-4.1-2-8.1-4-12.2-6.1-4.8 9.8-9.7 19.7-14.5 29.5-6.7-.1-12.9 3.5-16.1 9.4-3.4 6.3-2.7 14.1 1.9 19.8z" style="fill:#609926"/></svg>

apps/admin/app/authentication/oidc/form.tsx

@@ -1,236 +0,0 @@
-import { FC, useState } from "react";
-import Link from "next/link";
-import { useForm } from "react-hook-form";
-// plane internal packages
-import { IFormattedInstanceConfiguration, TInstanceOIDCAuthenticationConfigurationKeys } from "@plane/types";
-import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
-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 { TCopyField, CopyField } from "@/components/common/copy-field";
-// hooks
-import { useInstance } from "@/hooks/store";
-
-type Props = {
-  config: IFormattedInstanceConfiguration;
-};
-
-type OIDCConfigFormValues = Record<TInstanceOIDCAuthenticationConfigurationKeys, string>;
-
-export const InstanceOIDCConfigForm: FC<Props> = (props) => {
-  const { config } = props;
-  // states
-  const [isDiscardChangesModalOpen, setIsDiscardChangesModalOpen] = useState(false);
-  // store hooks
-  const { updateInstanceConfigurations } = useInstance();
-  // form data
-  const {
-    handleSubmit,
-    control,
-    reset,
-    formState: { errors, isDirty, isSubmitting },
-  } = useForm<OIDCConfigFormValues>({
-    defaultValues: {
-      OIDC_CLIENT_ID: config["OIDC_CLIENT_ID"],
-      OIDC_CLIENT_SECRET: config["OIDC_CLIENT_SECRET"],
-      OIDC_TOKEN_URL: config["OIDC_TOKEN_URL"],
-      OIDC_USERINFO_URL: config["OIDC_USERINFO_URL"],
-      OIDC_AUTHORIZE_URL: config["OIDC_AUTHORIZE_URL"],
-      OIDC_LOGOUT_URL: config["OIDC_LOGOUT_URL"],
-      OIDC_PROVIDER_NAME: config["OIDC_PROVIDER_NAME"],
-    },
-  });
-
-  const originURL = typeof window !== "undefined" ? window.location.origin : "";
-
-  const OIDC_FORM_FIELDS: TControllerInputFormField[] = [
-    {
-      key: "OIDC_CLIENT_ID",
-      type: "text",
-      label: "Client ID",
-      description: "A unique ID for this Plane app that you register on your IdP",
-      placeholder: "abc123xyz789",
-      error: Boolean(errors.OIDC_CLIENT_ID),
-      required: true,
-    },
-    {
-      key: "OIDC_CLIENT_SECRET",
-      type: "password",
-      label: "Client secret",
-      description: "The secret key that authenticates this Plane app to your IdP",
-      placeholder: "s3cr3tK3y123!",
-      error: Boolean(errors.OIDC_CLIENT_SECRET),
-      required: true,
-    },
-    {
-      key: "OIDC_AUTHORIZE_URL",
-      type: "text",
-      label: "Authorize URL",
-      description: (
-        <>
-          The URL that brings up your IdP{"'"}s authentication screen when your users click the{" "}
-          <CodeBlock>{"Continue with"}</CodeBlock>
-        </>
-      ),
-      placeholder: "https://example.com/",
-      error: Boolean(errors.OIDC_AUTHORIZE_URL),
-      required: true,
-    },
-    {
-      key: "OIDC_TOKEN_URL",
-      type: "text",
-      label: "Token URL",
-      description: "The URL that talks to the IdP and persists user authentication on Plane",
-      placeholder: "https://example.com/oauth/token",
-      error: Boolean(errors.OIDC_TOKEN_URL),
-      required: true,
-    },
-    {
-      key: "OIDC_USERINFO_URL",
-      type: "text",
-      label: "Users' info URL",
-      description: "The URL that fetches your users' info from your IdP",
-      placeholder: "https://example.com/userinfo",
-      error: Boolean(errors.OIDC_USERINFO_URL),
-      required: true,
-    },
-    {
-      key: "OIDC_LOGOUT_URL",
-      type: "text",
-      label: "Logout URL",
-      description: "Optional field that controls where your users go after they log out of Plane",
-      placeholder: "https://example.com/logout",
-      error: Boolean(errors.OIDC_LOGOUT_URL),
-      required: false,
-    },
-    {
-      key: "OIDC_PROVIDER_NAME",
-      type: "text",
-      label: "IdP's name",
-      description: (
-        <>
-          Optional field for the name that your users see on the <CodeBlock>Continue with</CodeBlock> button
-        </>
-      ),
-      placeholder: "Okta",
-      error: Boolean(errors.OIDC_PROVIDER_NAME),
-      required: false,
-    },
-  ];
-
-  const OIDC_SERVICE_DETAILS: TCopyField[] = [
-    {
-      key: "Origin_URI",
-      label: "Origin URI",
-      url: `${originURL}/auth/oidc/`,
-      description:
-        "We will generate this for this Plane app. Add this as a trusted origin on your IdP's corresponding field.",
-    },
-    {
-      key: "Callback_URI",
-      label: "Callback URI",
-      url: `${originURL}/auth/oidc/callback/`,
-      description: (
-        <>
-          We will generate this for you.Add this in the <CodeBlock darkerShade>Sign-in redirect URI</CodeBlock> field of
-          your IdP.
-        </>
-      ),
-    },
-    {
-      key: "Logout_URI",
-      label: "Logout URI",
-      url: `${originURL}/auth/oidc/logout/`,
-      description: (
-        <>
-          We will generate this for you. Add this in the <CodeBlock darkerShade>Logout redirect URI</CodeBlock> field of
-          your IdP.
-        </>
-      ),
-    },
-  ];
-
-  const onSubmit = async (formData: OIDCConfigFormValues) => {
-    const payload: Partial<OIDCConfigFormValues> = { ...formData };
-
-    await updateInstanceConfigurations(payload)
-      .then((response = []) => {
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Done!",
-          message: "Your OIDC-based authentication is configured. You should test it now.",
-        });
-        reset({
-          OIDC_CLIENT_ID: response.find((item) => item.key === "OIDC_CLIENT_ID")?.value,
-          OIDC_CLIENT_SECRET: response.find((item) => item.key === "OIDC_CLIENT_SECRET")?.value,
-          OIDC_AUTHORIZE_URL: response.find((item) => item.key === "OIDC_AUTHORIZE_URL")?.value,
-          OIDC_TOKEN_URL: response.find((item) => item.key === "OIDC_TOKEN_URL")?.value,
-          OIDC_USERINFO_URL: response.find((item) => item.key === "OIDC_USERINFO_URL")?.value,
-          OIDC_LOGOUT_URL: response.find((item) => item.key === "OIDC_LOGOUT_URL")?.value,
-          OIDC_PROVIDER_NAME: response.find((item) => item.key === "OIDC_PROVIDER_NAME")?.value,
-        });
-      })
-      .catch((err) => console.error(err));
-  };
-
-  const handleGoBack = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
-    if (isDirty) {
-      e.preventDefault();
-      setIsDiscardChangesModalOpen(true);
-    }
-  };
-
-  return (
-    <>
-      <ConfirmDiscardModal
-        isOpen={isDiscardChangesModalOpen}
-        onDiscardHref="/authentication"
-        handleClose={() => setIsDiscardChangesModalOpen(false)}
-      />
-      <div className="flex flex-col gap-8">
-        <div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
-          <div className="flex flex-col gap-y-4 col-span-2 md:col-span-1 pt-1">
-            <div className="pt-2.5 text-xl font-medium">IdP-provided details for Plane</div>
-            {OIDC_FORM_FIELDS.map((field) => (
-              <ControllerInput
-                key={field.key}
-                control={control}
-                type={field.type}
-                name={field.key}
-                label={field.label}
-                description={field.description}
-                placeholder={field.placeholder}
-                error={field.error}
-                required={field.required}
-              />
-            ))}
-            <div className="flex flex-col gap-1 pt-4">
-              <div className="flex items-center gap-4">
-                <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isDirty}>
-                  {isSubmitting ? "Saving..." : "Save changes"}
-                </Button>
-                <Link
-                  href="/authentication"
-                  className={cn(getButtonStyling("link-neutral", "md"), "font-medium")}
-                  onClick={handleGoBack}
-                >
-                  Go back
-                </Link>
-              </div>
-            </div>
-          </div>
-          <div className="col-span-2 md:col-span-1">
-            <div className="flex flex-col gap-y-4 px-6 pt-1.5 pb-4 bg-custom-background-80/60 rounded-lg">
-              <div className="pt-2 text-xl font-medium">Plane-provided details for your IdP</div>
-              {OIDC_SERVICE_DETAILS.map((field) => (
-                <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};

apps/admin/app/authentication/oidc/page.tsx

@@ -1,120 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { observer } from "mobx-react";
-import Image from "next/image";
-import useSWR from "swr";
-// ui
-import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
-// components
-import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
-import { PageHeader } from "@/components/common/page-header";
-// hooks
-import { useInstance } from "@/hooks/store";
-// icons
-import OIDCLogo from "/public/logos/oidc-logo.svg";
-// plane admin hooks
-import { useInstanceFlag } from "@/plane-admin/hooks/store/use-instance-flag";
-// local components
-import { InstanceOIDCConfigForm } from "./form";
-
-const InstanceOIDCAuthenticationPage = observer(() => {
-  // state
-  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
-  // store
-  const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
-  // plane admin store
-  const isOIDCEnabled = useInstanceFlag("OIDC_SAML_AUTH");
-  // config
-  const enableOIDCConfig = formattedConfig?.IS_OIDC_ENABLED ?? "";
-
-  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
-
-  const updateConfig = async (key: "IS_OIDC_ENABLED", value: string) => {
-    setIsSubmitting(true);
-
-    const payload = {
-      [key]: value,
-    };
-
-    const updateConfigPromise = updateInstanceConfigurations(payload);
-
-    setPromiseToast(updateConfigPromise, {
-      loading: "Saving Configuration...",
-      success: {
-        title: "Configuration saved",
-        message: () => `OIDC authentication is now ${value ? "active" : "disabled"}.`,
-      },
-      error: {
-        title: "Error",
-        message: () => "Failed to save configuration",
-      },
-    });
-
-    await updateConfigPromise
-      .then(() => {
-        setIsSubmitting(false);
-      })
-      .catch((err) => {
-        console.error(err);
-        setIsSubmitting(false);
-      });
-  };
-
-  if (isOIDCEnabled === false) {
-    return (
-      <div className="relative container mx-auto w-full h-full p-4 py-4 my-6 space-y-6 flex flex-col">
-        <PageHeader title="Authentication - God Mode" />
-        <div className="text-center text-lg text-gray-500">
-          <p>OpenID Connect (OIDC) authentication is not enabled for this instance.</p>
-          <p>Activate any of your workspace to get this feature.</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <PageHeader title="Authentication - God Mode" />
-      <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">
-          <AuthenticationMethodCard
-            name="OIDC"
-            description="Authenticate your users via the OpenID connect protocol."
-            icon={<Image src={OIDCLogo} height={24} width={24} alt="OIDC Logo" />}
-            config={
-              <ToggleSwitch
-                value={Boolean(parseInt(enableOIDCConfig))}
-                onChange={() => {
-                  Boolean(parseInt(enableOIDCConfig)) === true
-                    ? updateConfig("IS_OIDC_ENABLED", "0")
-                    : updateConfig("IS_OIDC_ENABLED", "1");
-                }}
-                size="sm"
-                disabled={isSubmitting || !formattedConfig}
-              />
-            }
-            disabled={isSubmitting || !formattedConfig}
-            withBorder={false}
-          />
-        </div>
-        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
-          {formattedConfig ? (
-            <InstanceOIDCConfigForm config={formattedConfig} />
-          ) : (
-            <Loader className="space-y-8">
-              <Loader.Item height="50px" width="25%" />
-              <Loader.Item height="50px" />
-              <Loader.Item height="50px" />
-              <Loader.Item height="50px" />
-              <Loader.Item height="50px" />
-              <Loader.Item height="50px" width="50%" />
-            </Loader>
-          )}
-        </div>
-      </div>
-    </>
-  );
-});
-
-export default InstanceOIDCAuthenticationPage;

apps/admin/app/authentication/saml/form.tsx

@@ -1,234 +0,0 @@
-import { FC, useState } from "react";
-import Link from "next/link";
-import { Controller, useForm } from "react-hook-form";
-// plane internal packages
-import { IFormattedInstanceConfiguration, TInstanceSAMLAuthenticationConfigurationKeys } from "@plane/types";
-import { Button, TOAST_TYPE, TextArea, getButtonStyling, setToast } from "@plane/ui";
-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";
-// hooks
-import { useInstance } from "@/hooks/store";
-import { SAMLAttributeMappingTable } from "@/plane-admin/components/authentication";
-
-type Props = {
-  config: IFormattedInstanceConfiguration;
-};
-
-type SAMLConfigFormValues = Record<TInstanceSAMLAuthenticationConfigurationKeys, string>;
-
-export const InstanceSAMLConfigForm: FC<Props> = (props) => {
-  const { config } = props;
-  // states
-  const [isDiscardChangesModalOpen, setIsDiscardChangesModalOpen] = useState(false);
-  // store hooks
-  const { updateInstanceConfigurations } = useInstance();
-  // form data
-  const {
-    handleSubmit,
-    control,
-    reset,
-    formState: { errors, isDirty, isSubmitting },
-  } = useForm<SAMLConfigFormValues>({
-    defaultValues: {
-      SAML_ENTITY_ID: config["SAML_ENTITY_ID"],
-      SAML_SSO_URL: config["SAML_SSO_URL"],
-      SAML_LOGOUT_URL: config["SAML_LOGOUT_URL"],
-      SAML_CERTIFICATE: config["SAML_CERTIFICATE"],
-      SAML_PROVIDER_NAME: config["SAML_PROVIDER_NAME"],
-    },
-  });
-
-  const originURL = typeof window !== "undefined" ? window.location.origin : "";
-
-  const SAML_FORM_FIELDS: TControllerInputFormField[] = [
-    {
-      key: "SAML_ENTITY_ID",
-      type: "text",
-      label: "Entity ID",
-      description: "A unique ID for this Plane app that you register on your IdP",
-      placeholder: "70a44354520df8bd9bcd",
-      error: Boolean(errors.SAML_ENTITY_ID),
-      required: true,
-    },
-    {
-      key: "SAML_SSO_URL",
-      type: "text",
-      label: "SSO URL",
-      description: (
-        <>
-          The URL that brings up your IdP{"'"}s authentication screen when your users click the{" "}
-          <CodeBlock>{"Continue with"}</CodeBlock> button
-        </>
-      ),
-      placeholder: "https://example.com/sso",
-      error: Boolean(errors.SAML_SSO_URL),
-      required: true,
-    },
-    {
-      key: "SAML_LOGOUT_URL",
-      type: "text",
-      label: "Logout URL",
-      description: "Optional field that tells your IdP your users have logged out of this Plane app",
-      placeholder: "https://example.com/logout",
-      error: Boolean(errors.SAML_LOGOUT_URL),
-      required: false,
-    },
-    {
-      key: "SAML_PROVIDER_NAME",
-      type: "text",
-      label: "IdP's name",
-      description: (
-        <>
-          Optional field for the name that your users see on the <CodeBlock>Continue with</CodeBlock> button
-        </>
-      ),
-      placeholder: "Okta",
-      error: Boolean(errors.SAML_PROVIDER_NAME),
-      required: false,
-    },
-  ];
-
-  const SAML_SERVICE_DETAILS: TCopyField[] = [
-    {
-      key: "Metadata_Information",
-      label: "Entity ID | Audience | Metadata information",
-      url: `${originURL}/auth/saml/metadata/`,
-      description:
-        "We will generate this bit of the metadata that identifies this Plane app as an authorized service on your IdP.",
-    },
-    {
-      key: "Callback_URI",
-      label: "Callback URI",
-      url: `${originURL}/auth/saml/callback/`,
-      description: (
-        <>
-          We will generate this <CodeBlock darkerShade>http-post request</CodeBlock> URL that you should paste into your{" "}
-          <CodeBlock darkerShade>ACS URL</CodeBlock> or <CodeBlock darkerShade>Sign-in call back URL</CodeBlock> field
-          on your IdP.
-        </>
-      ),
-    },
-    {
-      key: "Logout_URI",
-      label: "Logout URI",
-      url: `${originURL}/auth/saml/logout/`,
-      description: (
-        <>
-          We will generate this <CodeBlock darkerShade>http-redirect request</CodeBlock> URL that you should paste into
-          your <CodeBlock darkerShade>SLS URL</CodeBlock> or <CodeBlock darkerShade>Logout URL</CodeBlock>
-          field on your IdP.
-        </>
-      ),
-    },
-  ];
-
-  const onSubmit = async (formData: SAMLConfigFormValues) => {
-    const payload: Partial<SAMLConfigFormValues> = { ...formData };
-
-    await updateInstanceConfigurations(payload)
-      .then((response = []) => {
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Done!",
-          message: "Your SAML-based authentication is configured. You should test it now.",
-        });
-        reset({
-          SAML_ENTITY_ID: response.find((item) => item.key === "SAML_ENTITY_ID")?.value,
-          SAML_SSO_URL: response.find((item) => item.key === "SAML_SSO_URL")?.value,
-          SAML_LOGOUT_URL: response.find((item) => item.key === "SAML_LOGOUT_URL")?.value,
-          SAML_CERTIFICATE: response.find((item) => item.key === "SAML_CERTIFICATE")?.value,
-          SAML_PROVIDER_NAME: response.find((item) => item.key === "SAML_PROVIDER_NAME")?.value,
-        });
-      })
-      .catch((err) => console.error(err));
-  };
-
-  const handleGoBack = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
-    if (isDirty) {
-      e.preventDefault();
-      setIsDiscardChangesModalOpen(true);
-    }
-  };
-
-  return (
-    <>
-      <ConfirmDiscardModal
-        isOpen={isDiscardChangesModalOpen}
-        onDiscardHref="/authentication"
-        handleClose={() => setIsDiscardChangesModalOpen(false)}
-      />
-      <div className="flex flex-col gap-8">
-        <div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
-          <div className="flex flex-col gap-y-4 col-span-2 md:col-span-1 pt-1">
-            <div className="pt-2.5 text-xl font-medium">IdP-provided details for Plane</div>
-            {SAML_FORM_FIELDS.map((field) => (
-              <ControllerInput
-                key={field.key}
-                control={control}
-                type={field.type}
-                name={field.key}
-                label={field.label}
-                description={field.description}
-                placeholder={field.placeholder}
-                error={field.error}
-                required={field.required}
-              />
-            ))}
-            <div className="flex flex-col gap-1">
-              <h4 className="text-sm">SAML certificate</h4>
-              <Controller
-                control={control}
-                name="SAML_CERTIFICATE"
-                rules={{ required: "Certificate is required." }}
-                render={({ field: { value, onChange } }) => (
-                  <TextArea
-                    id="SAML_CERTIFICATE"
-                    name="SAML_CERTIFICATE"
-                    value={value}
-                    onChange={onChange}
-                    hasError={Boolean(errors.SAML_CERTIFICATE)}
-                    placeholder="---BEGIN CERTIFICATE---\n2yWn1gc7DhOFB9\nr0gbE+\n---END CERTIFICATE---"
-                    className="min-h-[102px] w-full rounded-md font-medium text-sm"
-                  />
-                )}
-              />
-              <p className="pt-0.5 text-xs text-custom-text-300">
-                IdP-generated certificate for signing this Plane app as an authorized service provider for your IdP
-              </p>
-            </div>
-            <div className="flex flex-col gap-1 pt-4">
-              <div className="flex items-center gap-4">
-                <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isDirty}>
-                  {isSubmitting ? "Saving..." : "Save changes"}
-                </Button>
-                <Link
-                  href="/authentication"
-                  className={cn(getButtonStyling("link-neutral", "md"), "font-medium")}
-                  onClick={handleGoBack}
-                >
-                  Go back
-                </Link>
-              </div>
-            </div>
-          </div>
-          <div className="col-span-2 md:col-span-1">
-            <div className="flex flex-col gap-y-4 px-6 pt-1.5 pb-4 bg-custom-background-80/60 rounded-lg">
-              <div className="pt-2 text-xl font-medium">Plane-provided details for your IdP</div>
-              {SAML_SERVICE_DETAILS.map((field) => (
-                <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
-              ))}
-              <div className="flex flex-col gap-1">
-                <h4 className="text-sm text-custom-text-200 font-medium">Mapping</h4>
-                <SAMLAttributeMappingTable />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};

apps/admin/app/authentication/saml/page.tsx

@@ -1,120 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { observer } from "mobx-react";
-import Image from "next/image";
-import useSWR from "swr";
-// ui
-import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
-// components
-import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
-import { PageHeader } from "@/components/common/page-header";
-// hooks
-import { useInstance } from "@/hooks/store";
-// icons
-import SAMLLogo from "/public/logos/saml-logo.svg";
-// plane admin hooks
-import { useInstanceFlag } from "@/plane-admin/hooks/store/use-instance-flag";
-// local components
-import { InstanceSAMLConfigForm } from "./form";
-
-const InstanceSAMLAuthenticationPage = observer(() => {
-  // state
-  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
-  // store
-  const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
-  // plane admin store
-  const isSAMLEnabled = useInstanceFlag("OIDC_SAML_AUTH");
-  // config
-  const enableSAMLConfig = formattedConfig?.IS_SAML_ENABLED ?? "";
-
-  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
-
-  const updateConfig = async (key: "IS_SAML_ENABLED", value: string) => {
-    setIsSubmitting(true);
-
-    const payload = {
-      [key]: value,
-    };
-
-    const updateConfigPromise = updateInstanceConfigurations(payload);
-
-    setPromiseToast(updateConfigPromise, {
-      loading: "Saving Configuration...",
-      success: {
-        title: "Configuration saved",
-        message: () => `SAML authentication is now ${value ? "active" : "disabled"}.`,
-      },
-      error: {
-        title: "Error",
-        message: () => "Failed to save configuration",
-      },
-    });
-
-    await updateConfigPromise
-      .then(() => {
-        setIsSubmitting(false);
-      })
-      .catch((err) => {
-        console.error(err);
-        setIsSubmitting(false);
-      });
-  };
-
-  if (isSAMLEnabled === false) {
-    return (
-      <div className="relative container mx-auto w-full h-full p-4 py-4 my-6 space-y-6 flex flex-col">
-        <PageHeader title="Authentication - God Mode" />
-        <div className="text-center text-lg text-gray-500">
-          <p>Security Assertion Markup Language (SAML) authentication is not enabled for this instance.</p>
-          <p>Activate any of your workspace to get this feature.</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <PageHeader title="Authentication - God Mode" />
-      <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">
-          <AuthenticationMethodCard
-            name="SAML"
-            description="Authenticate your users via Security Assertion Markup Language
-          protocol."
-            icon={<Image src={SAMLLogo} height={24} width={24} alt="SAML Logo" className="pl-0.5" />}
-            config={
-              <ToggleSwitch
-                value={Boolean(parseInt(enableSAMLConfig))}
-                onChange={() => {
-                  Boolean(parseInt(enableSAMLConfig)) === true
-                    ? updateConfig("IS_SAML_ENABLED", "0")
-                    : updateConfig("IS_SAML_ENABLED", "1");
-                }}
-                size="sm"
-                disabled={isSubmitting || !formattedConfig}
-              />
-            }
-            disabled={isSubmitting || !formattedConfig}
-            withBorder={false}
-          />
-        </div>
-        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
-          {formattedConfig ? (
-            <InstanceSAMLConfigForm config={formattedConfig} />
-          ) : (
-            <Loader className="space-y-8">
-              <Loader.Item height="50px" width="25%" />
-              <Loader.Item height="50px" />
-              <Loader.Item height="50px" />
-              <Loader.Item height="50px" />
-              <Loader.Item height="50px" width="50%" />
-            </Loader>
-          )}
-        </div>
-      </div>
-    </>
-  );
-});
-
-export default InstanceSAMLAuthenticationPage;

apps/admin/app/compat/next/helper.ts

@@ -0,0 +1,35 @@
+/**
+ * Ensures that a URL has a trailing slash while preserving query parameters and fragments
+ * @param url - The URL to process
+ * @returns The URL with a trailing slash added to the pathname (if not already present)
+ */
+export function ensureTrailingSlash(url: string): string {
+  try {
+    const fallbackBaseUrl =
+      typeof window !== "undefined" && window.location.origin ? window.location.origin : "http://dummy.com";
+    // Handle relative URLs by creating a URL object with a fallback base URL
+    const urlObj = new URL(url, fallbackBaseUrl);
+
+    // Don't modify root path
+    if (urlObj.pathname === "/") {
+      return url;
+    }
+
+    // Add trailing slash if it doesn't exist
+    if (!urlObj.pathname.endsWith("/")) {
+      urlObj.pathname += "/";
+    }
+
+    // For relative URLs, return just the path + search + hash
+    if (url.startsWith("/")) {
+      return urlObj.pathname + urlObj.search + urlObj.hash;
+    }
+
+    // For absolute URLs, return the full URL
+    return urlObj.toString();
+  } catch (error) {
+    // If URL parsing fails, return the original URL
+    console.warn("Failed to parse URL for trailing slash enforcement:", url, error);
+    return url;
+  }
+}