dev: fix space authentication

.eslintrc-staged.js

@@ -1,59 +0,0 @@
-/**
- * Adds three new lint plugins over the existing configuration:
- * This is used to lint staged files only.
- * We should remove this file once the entire codebase follows these rules.
- */
-module.exports = {
-  root: true,
-  extends: [
-    "custom",
-  ],
-  parser: "@typescript-eslint/parser",
-  settings: {
-    "import/resolver": {
-      typescript: {},
-      node: {
-        moduleDirectory: ["node_modules", "."],
-      },
-    },
-  },
-  rules: {
-    "import/order": [
-      "error",
-      {
-        groups: ["builtin", "external", "internal", "parent", "sibling"],
-        pathGroups: [
-          {
-            pattern: "react",
-            group: "external",
-            position: "before",
-          },
-          {
-            pattern: "lucide-react",
-            group: "external",
-            position: "after",
-          },
-          {
-            pattern: "@headlessui/**",
-            group: "external",
-            position: "after",
-          },
-          {
-            pattern: "@plane/**",
-            group: "external",
-            position: "after",
-          },
-          {
-            pattern: "@/**",
-            group: "internal",
-          },
-        ],
-        pathGroupsExcludedImportTypes: ["builtin", "internal", "react"],
-        alphabetize: {
-          order: "asc",
-          caseInsensitive: true,
-        },
-      },
-    ],
-  },
-};

.github/ISSUE_TEMPLATE/--bug-report.yaml

@@ -2,7 +2,7 @@ name: Bug report
 description: Create a bug report to help us improve Plane
 title: "[bug]: "
 labels: [🐛bug]
-assignees: [vihar, pushya22]
+assignees: [srinivaspendem, pushya22]
 body:
 - type: markdown
   attributes:

.github/ISSUE_TEMPLATE/--feature-request.yaml

@@ -2,7 +2,7 @@ name: Feature request
 description: Suggest a feature to improve Plane
 title: "[feature]: "
 labels: [✨feature]
-assignees: [vihar, pushya22]
+assignees: [srinivaspendem, pushya22]
 body:
 - type: markdown
   attributes:

.github/workflows/build-aio-base.yml

@@ -1,139 +0,0 @@
-name: Build AIO Base Image
-
-on:
-  workflow_dispatch:
-    inputs:
-      base_tag_name:
-        description: 'Base Tag Name'
-        required: false
-        default: ''
-
-env:
-  TARGET_BRANCH: ${{ github.ref_name }}
-
-jobs:
-  base_build_setup:
-    name: Build Preparation
-    runs-on: ubuntu-latest
-    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 }}
-      image_tag: ${{ steps.set_env_variables.outputs.IMAGE_TAG }}
-
-    steps:
-      - id: set_env_variables
-        name: Set Environment Variables
-        run: |
-          echo "TARGET_BRANCH=${{ env.TARGET_BRANCH }}" >> $GITHUB_OUTPUT
-
-          if [ "${{ github.event.inputs.base_tag_name }}" != "" ]; then
-            echo "IMAGE_TAG=${{ github.event.inputs.base_tag_name }}" >> $GITHUB_OUTPUT
-          elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            echo "IMAGE_TAG=latest" >> $GITHUB_OUTPUT
-          elif [ "${{ env.TARGET_BRANCH }}" == "preview" ]; then
-              echo "IMAGE_TAG=preview" >> $GITHUB_OUTPUT
-          else
-            echo "IMAGE_TAG=develop" >> $GITHUB_OUTPUT
-          fi
-
-
-          if [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            echo "BUILDX_DRIVER=cloud" >> $GITHUB_OUTPUT
-            echo "BUILDX_VERSION=lab:latest" >> $GITHUB_OUTPUT
-            echo "BUILDX_PLATFORMS=linux/amd64,linux/arm64" >> $GITHUB_OUTPUT
-            echo "BUILDX_ENDPOINT=makeplane/plane-dev" >> $GITHUB_OUTPUT
-          else
-            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
-          fi
-
-      - id: checkout_files
-        name: Checkout Files
-        uses: actions/checkout@v4
-
-  full_base_build_push:
-    runs-on: ubuntu-latest
-    needs: [base_build_setup]
-    env:
-      BASE_IMG_TAG: makeplane/plane-aio-base:full-${{ needs.base_build_setup.outputs.image_tag }}
-      BUILDX_DRIVER: ${{ needs.base_build_setup.outputs.gh_buildx_driver }}
-      BUILDX_VERSION: ${{ needs.base_build_setup.outputs.gh_buildx_version }}
-      BUILDX_PLATFORMS: ${{ needs.base_build_setup.outputs.gh_buildx_platforms }}
-      BUILDX_ENDPOINT: ${{ needs.base_build_setup.outputs.gh_buildx_endpoint }}
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v4
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-        with:
-          driver: ${{ env.BUILDX_DRIVER }}
-          version: ${{ env.BUILDX_VERSION }}
-          endpoint: ${{ env.BUILDX_ENDPOINT }}
-
-      - name: Build and Push to Docker Hub
-        uses: docker/build-push-action@v5.1.0
-        with:
-          context: ./aio
-          file: ./aio/Dockerfile-base-full
-          platforms: ${{ env.BUILDX_PLATFORMS }}
-          tags: ${{ env.BASE_IMG_TAG }}
-          push: true
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-        env:
-          DOCKER_BUILDKIT: 1
-          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
-          DOCKER_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
-
-  slim_base_build_push:
-    runs-on: ubuntu-latest
-    needs: [base_build_setup]
-    env:
-      BASE_IMG_TAG: makeplane/plane-aio-base:slim-${{ needs.base_build_setup.outputs.image_tag }}
-      BUILDX_DRIVER: ${{ needs.base_build_setup.outputs.gh_buildx_driver }}
-      BUILDX_VERSION: ${{ needs.base_build_setup.outputs.gh_buildx_version }}
-      BUILDX_PLATFORMS: ${{ needs.base_build_setup.outputs.gh_buildx_platforms }}
-      BUILDX_ENDPOINT: ${{ needs.base_build_setup.outputs.gh_buildx_endpoint }}
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v4
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-        with:
-          driver: ${{ env.BUILDX_DRIVER }}
-          version: ${{ env.BUILDX_VERSION }}
-          endpoint: ${{ env.BUILDX_ENDPOINT }}
-
-      - name: Build and Push to Docker Hub
-        uses: docker/build-push-action@v5.1.0
-        with:
-          context: ./aio
-          file: ./aio/Dockerfile-base-slim
-          platforms: ${{ env.BUILDX_PLATFORMS }}
-          tags: ${{ env.BASE_IMG_TAG }}
-          push: true
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-        env:
-          DOCKER_BUILDKIT: 1
-          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
-          DOCKER_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}

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

@@ -1,207 +0,0 @@
-name: Branch Build AIO
-
-on:
-  workflow_dispatch:
-    inputs:
-      full:
-        description: 'Run full build'
-        type: boolean
-        required: false
-        default: false
-      slim:
-        description: 'Run slim build'
-        type: boolean
-        required: false
-        default: false
-      base_tag_name:
-        description: 'Base Tag Name'
-        required: false
-        default: ''
-  release:
-    types: [released, prereleased]
-
-env:
-  TARGET_BRANCH: ${{ github.ref_name || github.event.release.target_commitish }}
-  FULL_BUILD_INPUT: ${{ github.event.inputs.full }}
-  SLIM_BUILD_INPUT: ${{ github.event.inputs.slim }}
-
-jobs:
-  branch_build_setup:
-    name: Build Setup
-    runs-on: ubuntu-latest
-    outputs:
-      gh_branch_name: ${{ steps.set_env_variables.outputs.TARGET_BRANCH }}
-      flat_branch_name: ${{ steps.set_env_variables.outputs.FLAT_BRANCH_NAME }}
-      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 }}
-      aio_base_tag: ${{ steps.set_env_variables.outputs.AIO_BASE_TAG }}
-      do_full_build: ${{ steps.set_env_variables.outputs.DO_FULL_BUILD }}
-      do_slim_build: ${{ steps.set_env_variables.outputs.DO_SLIM_BUILD }}
-
-    steps:
-      - id: set_env_variables
-        name: Set Environment Variables
-        run: |
-          if [ "${{ env.TARGET_BRANCH }}" == "master" ] || [ "${{ github.event_name }}" == "release" ]; then
-            echo "BUILDX_DRIVER=cloud" >> $GITHUB_OUTPUT
-            echo "BUILDX_VERSION=lab:latest" >> $GITHUB_OUTPUT
-            echo "BUILDX_PLATFORMS=linux/amd64,linux/arm64" >> $GITHUB_OUTPUT
-            echo "BUILDX_ENDPOINT=makeplane/plane-dev" >> $GITHUB_OUTPUT
-
-            echo "AIO_BASE_TAG=latest" >> $GITHUB_OUTPUT
-          else
-            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
-
-            if [ "${{ github.event_name}}" == "workflow_dispatch" ] && [ "${{ github.event.inputs.base_tag_name }}" != "" ]; then
-              echo "AIO_BASE_TAG=${{ github.event.inputs.base_tag_name }}" >> $GITHUB_OUTPUT
-            elif [ "${{ env.TARGET_BRANCH }}" == "preview" ]; then
-              echo "AIO_BASE_TAG=preview" >> $GITHUB_OUTPUT
-            else
-              echo "AIO_BASE_TAG=develop" >> $GITHUB_OUTPUT
-            fi
-          fi
-          echo "TARGET_BRANCH=${{ env.TARGET_BRANCH }}" >> $GITHUB_OUTPUT
-
-          if [ "${{ env.FULL_BUILD_INPUT }}" == "true" ] || [ "${{github.event_name}}" == "push" ] || [ "${{github.event_name}}" == "release" ]; then
-            echo "DO_FULL_BUILD=true" >> $GITHUB_OUTPUT
-          else
-            echo "DO_FULL_BUILD=false" >> $GITHUB_OUTPUT
-          fi
-
-          if [ "${{ env.SLIM_BUILD_INPUT }}" == "true" ] || [ "${{github.event_name}}" == "push" ] || [ "${{github.event_name}}" == "release" ]; then
-            echo "DO_SLIM_BUILD=true" >> $GITHUB_OUTPUT
-          else
-            echo "DO_SLIM_BUILD=false" >> $GITHUB_OUTPUT
-          fi
-
-          FLAT_BRANCH_NAME=$(echo "${{ env.TARGET_BRANCH }}" | sed 's/[^a-zA-Z0-9]/-/g')
-          echo "FLAT_BRANCH_NAME=$FLAT_BRANCH_NAME" >> $GITHUB_OUTPUT
-
-      - id: checkout_files
-        name: Checkout Files
-        uses: actions/checkout@v4
-
-  full_build_push:
-    if: ${{ needs.branch_build_setup.outputs.do_full_build == 'true' }}
-    runs-on: ubuntu-20.04
-    needs: [branch_build_setup]
-    env:
-      BUILD_TYPE: full
-      AIO_BASE_TAG: ${{ needs.branch_build_setup.outputs.aio_base_tag }}
-      AIO_IMAGE_TAGS: makeplane/plane-aio:full-${{ needs.branch_build_setup.outputs.flat_branch_name }}
-      TARGET_BRANCH: ${{ needs.branch_build_setup.outputs.gh_branch_name }}
-      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 }}
-    steps:
-      - name: Set Docker Tag
-        run: |
-          if [ "${{ github.event_name }}" == "release" ]; then
-            TAG=makeplane/plane-aio:${{env.BUILD_TYPE}}-stable,makeplane/plane-aio:${{env.BUILD_TYPE}}-${{ github.event.release.tag_name }}
-          elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            TAG=makeplane/plane-aio:${{env.BUILD_TYPE}}-latest
-          else
-            TAG=${{ env.AIO_IMAGE_TAGS }}
-          fi
-          echo "AIO_IMAGE_TAGS=${TAG}" >> $GITHUB_ENV
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-        with:
-          driver: ${{ env.BUILDX_DRIVER }}
-          version: ${{ env.BUILDX_VERSION }}
-          endpoint: ${{ env.BUILDX_ENDPOINT }}
-
-      - name: Check out the repo
-        uses: actions/checkout@v4
-
-      - name: Build and Push to Docker Hub
-        uses: docker/build-push-action@v5.1.0
-        with:
-          context: .
-          file: ./aio/Dockerfile-app
-          platforms: ${{ env.BUILDX_PLATFORMS }}
-          tags: ${{ env.AIO_IMAGE_TAGS }}
-          push: true
-          build-args: |
-            BASE_TAG=${{ env.AIO_BASE_TAG }}
-            BUILD_TYPE=${{env.BUILD_TYPE}}
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-
-        env:
-          DOCKER_BUILDKIT: 1
-          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
-          DOCKER_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
-
-  slim_build_push:
-    if: ${{ needs.branch_build_setup.outputs.do_slim_build == 'true' }}
-    runs-on: ubuntu-20.04
-    needs: [branch_build_setup]
-    env:
-      BUILD_TYPE: slim
-      AIO_BASE_TAG: ${{ needs.branch_build_setup.outputs.aio_base_tag }}
-      AIO_IMAGE_TAGS: makeplane/plane-aio:slim-${{ needs.branch_build_setup.outputs.flat_branch_name }}
-      TARGET_BRANCH: ${{ needs.branch_build_setup.outputs.gh_branch_name }}
-      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 }}
-    steps:
-      - name: Set Docker Tag
-        run: |
-          if [ "${{ github.event_name }}" == "release" ]; then
-            TAG=makeplane/plane-aio:${{env.BUILD_TYPE}}-stable,makeplane/plane-aio:${{env.BUILD_TYPE}}-${{ github.event.release.tag_name }}
-          elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            TAG=makeplane/plane-aio:${{env.BUILD_TYPE}}-latest
-          else
-            TAG=${{ env.AIO_IMAGE_TAGS }}
-          fi
-          echo "AIO_IMAGE_TAGS=${TAG}" >> $GITHUB_ENV
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-        with:
-          driver: ${{ env.BUILDX_DRIVER }}
-          version: ${{ env.BUILDX_VERSION }}
-          endpoint: ${{ env.BUILDX_ENDPOINT }}
-
-      - name: Check out the repo
-        uses: actions/checkout@v4
-
-      - name: Build and Push to Docker Hub
-        uses: docker/build-push-action@v5.1.0
-        with:
-          context: .
-          file: ./aio/Dockerfile-app
-          platforms: ${{ env.BUILDX_PLATFORMS }}
-          tags: ${{ env.AIO_IMAGE_TAGS }}
-          push: true
-          build-args: |
-            BASE_TAG=${{ env.AIO_BASE_TAG }}
-            BUILD_TYPE=${{env.BUILD_TYPE}}
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-
-        env:
-          DOCKER_BUILDKIT: 1
-          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
-          DOCKER_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}

.github/workflows/build-branch.yml

@@ -14,7 +14,7 @@ env:
 
 jobs:
   branch_build_setup:
-    name: Build Setup
+    name: Build-Push Web/Space/API/Proxy Docker Image
     runs-on: ubuntu-latest
     outputs:
       gh_branch_name: ${{ steps.set_env_variables.outputs.TARGET_BRANCH }}
@@ -85,7 +85,7 @@ jobs:
     runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     env:
-      FRONTEND_TAG: makeplane/plane-frontend:${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      FRONTEND_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:${{ needs.branch_build_setup.outputs.gh_branch_name }}
       TARGET_BRANCH: ${{ needs.branch_build_setup.outputs.gh_branch_name }}
       BUILDX_DRIVER: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
       BUILDX_VERSION: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
@@ -95,9 +95,9 @@ jobs:
       - name: Set Frontend Docker Tag
         run: |
           if [ "${{ github.event_name }}" == "release" ]; then
-            TAG=makeplane/plane-frontend:stable,makeplane/plane-frontend:${{ github.event.release.tag_name }}
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:stable,${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:${{ github.event.release.tag_name }}
           elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            TAG=makeplane/plane-frontend:latest
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:latest
           else
             TAG=${{ env.FRONTEND_TAG }}
           fi
@@ -137,7 +137,7 @@ jobs:
     runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     env:
-      ADMIN_TAG: makeplane/plane-admin:${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      ADMIN_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-admin:${{ needs.branch_build_setup.outputs.gh_branch_name }}
       TARGET_BRANCH: ${{ needs.branch_build_setup.outputs.gh_branch_name }}
       BUILDX_DRIVER: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
       BUILDX_VERSION: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
@@ -147,9 +147,9 @@ jobs:
       - name: Set Admin Docker Tag
         run: |
           if [ "${{ github.event_name }}" == "release" ]; then
-            TAG=makeplane/plane-admin:stable,makeplane/plane-admin:${{ github.event.release.tag_name }}
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-admin:stable,${{ secrets.DOCKERHUB_USERNAME }}/plane-admin:${{ github.event.release.tag_name }}
           elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            TAG=makeplane/plane-admin:latest
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-admin:latest
           else
             TAG=${{ env.ADMIN_TAG }}
           fi
@@ -189,7 +189,7 @@ jobs:
     runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     env:
-      SPACE_TAG: makeplane/plane-space:${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      SPACE_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-space:${{ needs.branch_build_setup.outputs.gh_branch_name }}
       TARGET_BRANCH: ${{ needs.branch_build_setup.outputs.gh_branch_name }}
       BUILDX_DRIVER: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
       BUILDX_VERSION: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
@@ -199,9 +199,9 @@ jobs:
       - name: Set Space Docker Tag
         run: |
           if [ "${{ github.event_name }}" == "release" ]; then
-            TAG=makeplane/plane-space:stable,makeplane/plane-space:${{ github.event.release.tag_name }}
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-space:stable,${{ secrets.DOCKERHUB_USERNAME }}/plane-space:${{ github.event.release.tag_name }}
           elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            TAG=makeplane/plane-space:latest
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-space:latest
           else
             TAG=${{ env.SPACE_TAG }}
           fi
@@ -241,7 +241,7 @@ jobs:
     runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     env:
-      BACKEND_TAG: makeplane/plane-backend:${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      BACKEND_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:${{ needs.branch_build_setup.outputs.gh_branch_name }}
       TARGET_BRANCH: ${{ needs.branch_build_setup.outputs.gh_branch_name }}
       BUILDX_DRIVER: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
       BUILDX_VERSION: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
@@ -251,9 +251,9 @@ jobs:
       - name: Set Backend Docker Tag
         run: |
           if [ "${{ github.event_name }}" == "release" ]; then
-            TAG=makeplane/plane-backend:stable,makeplane/plane-backend:${{ github.event.release.tag_name }}
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:stable,${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:${{ github.event.release.tag_name }}
           elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            TAG=makeplane/plane-backend:latest
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:latest
           else
             TAG=${{ env.BACKEND_TAG }}
           fi
@@ -293,7 +293,7 @@ jobs:
     runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     env:
-      PROXY_TAG: makeplane/plane-proxy:${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      PROXY_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:${{ needs.branch_build_setup.outputs.gh_branch_name }}
       TARGET_BRANCH: ${{ needs.branch_build_setup.outputs.gh_branch_name }}
       BUILDX_DRIVER: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
       BUILDX_VERSION: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
@@ -303,9 +303,9 @@ jobs:
       - name: Set Proxy Docker Tag
         run: |
           if [ "${{ github.event_name }}" == "release" ]; then
-            TAG=makeplane/plane-proxy:stable,makeplane/plane-proxy:${{ github.event.release.tag_name }}
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:stable,${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:${{ github.event.release.tag_name }}
           elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            TAG=makeplane/plane-proxy:latest
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:latest
           else
             TAG=${{ env.PROXY_TAG }}
           fi

.github/workflows/build-test-pull-request.yml

@@ -3,11 +3,10 @@ name: Build and Lint on Pull Request
 on:
   workflow_dispatch:
   pull_request:
-    types: ["opened", "synchronize", "ready_for_review"]
+    types: ["opened", "synchronize"]
 
 jobs:
   get-changed-files:
-    if: github.event.pull_request.draft == false
     runs-on: ubuntu-latest
     outputs:
       apiserver_changed: ${{ steps.changed-files.outputs.apiserver_any_changed }}
@@ -15,10 +14,10 @@ jobs:
       space_changed: ${{ steps.changed-files.outputs.space_any_changed }}
       web_changed: ${{ steps.changed-files.outputs.web_any_changed }}
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
       - name: Get changed files
         id: changed-files
-        uses: tj-actions/changed-files@v44
+        uses: tj-actions/changed-files@v41
         with:
           files_yaml: |
             apiserver:
@@ -50,9 +49,9 @@ jobs:
     runs-on: ubuntu-latest
     if: needs.get-changed-files.outputs.apiserver_changed == 'true'
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
       - name: Set up Python
-        uses: actions/setup-python@v5
+        uses: actions/setup-python@v4
         with:
           python-version: "3.x" # Specify the Python version you need
       - name: Install Pylint
@@ -67,9 +66,9 @@ jobs:
     if: needs.get-changed-files.outputs.admin_changed == 'true'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v2
         with:
           node-version: 18.x
       - run: yarn install
@@ -80,9 +79,9 @@ jobs:
     if: needs.get-changed-files.outputs.space_changed == 'true'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v2
         with:
           node-version: 18.x
       - run: yarn install
@@ -93,9 +92,9 @@ jobs:
     if: needs.get-changed-files.outputs.web_changed == 'true'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v2
         with:
           node-version: 18.x
       - run: yarn install
@@ -105,9 +104,9 @@ jobs:
     needs: lint-admin
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v2
         with:
           node-version: 18.x
       - run: yarn install
@@ -117,9 +116,9 @@ jobs:
     needs: lint-space
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v2
         with:
           node-version: 18.x
       - run: yarn install
@@ -129,9 +128,9 @@ jobs:
     needs: lint-web
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v2
         with:
           node-version: 18.x
       - run: yarn install

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

@@ -29,7 +29,7 @@ jobs:
           else
             echo "MATCH=false" >> $GITHUB_OUTPUT
           fi
-  Create_PR:
+  Auto_Merge:
     if: ${{ needs.Check_Branch.outputs.BRANCH_MATCH == 'true' }}
     needs: [Check_Branch]
     runs-on: ubuntu-latest
@@ -64,6 +64,6 @@ jobs:
             echo "Pull Request already exists: $PR_EXISTS"
           else
             echo "Creating new pull request"
-            PR_URL=$(gh pr create --base $TARGET_BRANCH --head $SOURCE_BRANCH --title "sync: community changes" --body "")
+            PR_URL=$(gh pr create --base $TARGET_BRANCH --head $SOURCE_BRANCH --title "sync: merge conflicts need to be resolved" --body "")
             echo "Pull Request created: $PR_URL"
           fi

.github/workflows/feature-deployment.yml

@@ -3,108 +3,189 @@ name: Feature Preview
 on:
   workflow_dispatch:
     inputs:
-      base_tag_name:
-        description: 'Base Tag Name'
+      web-build:
         required: false
-        default: 'preview'
+        description: "Build Web"
+        type: boolean
+        default: true
+      space-build:
+        required: false
+        description: "Build Space"
+        type: boolean
+        default: false
+      admin-build:
+        required: false
+        description: "Build Admin"
+        type: boolean
+        default: false
 
 env:
-  TARGET_BRANCH: ${{ github.ref_name }}
+  BUILD_WEB: ${{ github.event.inputs.web-build }}
+  BUILD_SPACE: ${{ github.event.inputs.space-build }}
+  BUILD_ADMIN: ${{ github.event.inputs.admin-build }}
 
 jobs:
-  branch_build_setup:
-    name: Build Setup
+  setup-feature-build:
+    name: Feature Build Setup
     runs-on: ubuntu-latest
-    outputs:
-      gh_branch_name: ${{ steps.set_env_variables.outputs.TARGET_BRANCH }}
-      flat_branch_name: ${{ steps.set_env_variables.outputs.FLAT_BRANCH_NAME }}
-      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 }}
-      aio_base_tag: ${{ steps.set_env_variables.outputs.AIO_BASE_TAG }}
-      do_full_build: ${{ steps.set_env_variables.outputs.DO_FULL_BUILD }}
-      do_slim_build: ${{ steps.set_env_variables.outputs.DO_SLIM_BUILD }}
-
     steps:
-      - id: set_env_variables
-        name: Set Environment Variables
+      - name: Checkout
         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
-
-          if [ "${{ github.event.inputs.base_tag_name }}" != "" ]; then
-            echo "AIO_BASE_TAG=${{ github.event.inputs.base_tag_name }}" >> $GITHUB_OUTPUT
-          else
-            echo "AIO_BASE_TAG=develop" >> $GITHUB_OUTPUT
-          fi
-
-          echo "TARGET_BRANCH=${{ env.TARGET_BRANCH }}" >> $GITHUB_OUTPUT
-
-          FLAT_BRANCH_NAME=$(echo "${{ env.TARGET_BRANCH }}" | sed 's/[^a-zA-Z0-9]/-/g')
-          echo "FLAT_BRANCH_NAME=$FLAT_BRANCH_NAME" >> $GITHUB_OUTPUT
-
-      - id: checkout_files
-        name: Checkout Files
-        uses: actions/checkout@v4
-
-  full_build_push:
-    runs-on: ubuntu-20.04
-    needs: [branch_build_setup]
-    env:
-      BUILD_TYPE: full
-      AIO_BASE_TAG: ${{ needs.branch_build_setup.outputs.aio_base_tag }}
-      AIO_IMAGE_TAGS: makeplane/plane-aio-feature:${{ needs.branch_build_setup.outputs.flat_branch_name }}
-      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 }}
-    steps:
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-        with:
-          driver: ${{ env.BUILDX_DRIVER }}
-          version: ${{ env.BUILDX_VERSION }}
-          endpoint: ${{ env.BUILDX_ENDPOINT }}
-
-      - name: Check out the repo
-        uses: actions/checkout@v4
-
-      - name: Build and Push to Docker Hub
-        uses: docker/build-push-action@v5.1.0
-        with:
-          context: .
-          file: ./aio/Dockerfile-app
-          platforms: ${{ env.BUILDX_PLATFORMS }}
-          tags: ${{ env.AIO_IMAGE_TAGS }}
-          push: true
-          build-args: 
-            BUILD_TAG=${{ env.AIO_BASE_TAG }}
-            BUILD_TYPE=${{env.BUILD_TYPE}}
-          # cache-from: type=gha
-          # cache-to: type=gha,mode=max
-        env:
-          DOCKER_BUILDKIT: 1
-          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
-          DOCKER_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
+          echo "BUILD_WEB=$BUILD_WEB" 
+          echo "BUILD_SPACE=$BUILD_SPACE"
+          echo "BUILD_ADMIN=$BUILD_ADMIN"
     outputs:
-      AIO_IMAGE_TAGS: ${{ env.AIO_IMAGE_TAGS }}
+      web-build: ${{ env.BUILD_WEB}}
+      space-build: ${{env.BUILD_SPACE}}
+      admin-build: ${{env.BUILD_ADMIN}}
+
+  feature-build-web:
+    if: ${{ needs.setup-feature-build.outputs.web-build == 'true' }}
+    needs: setup-feature-build
+    name: Feature Build Web
+    runs-on: ubuntu-latest
+    env:
+      AWS_ACCESS_KEY_ID: ${{ vars.FEATURE_PREVIEW_AWS_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.FEATURE_PREVIEW_AWS_SECRET_ACCESS_KEY }}
+      AWS_BUCKET: ${{ vars.FEATURE_PREVIEW_AWS_BUCKET }}
+      NEXT_PUBLIC_API_BASE_URL: ${{ vars.FEATURE_PREVIEW_NEXT_PUBLIC_API_BASE_URL }}
+    steps:
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "18"
+      - name: Install AWS cli
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y python3-pip
+          pip3 install awscli
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          path: plane
+      - name: Install Dependencies
+        run: |
+          cd $GITHUB_WORKSPACE/plane
+          yarn install
+      - name: Build Web
+        id: build-web
+        run: |
+          cd $GITHUB_WORKSPACE/plane
+          yarn build --filter=web
+          cd $GITHUB_WORKSPACE
+
+          TAR_NAME="web.tar.gz"
+          tar -czf $TAR_NAME ./plane
+
+          FILE_EXPIRY=$(date -u -d "+2 days" +"%Y-%m-%dT%H:%M:%SZ")
+          aws s3 cp $TAR_NAME s3://${{ env.AWS_BUCKET }}/${{github.sha}}/$TAR_NAME --expires $FILE_EXPIRY
+
+  feature-build-space:
+    if: ${{ needs.setup-feature-build.outputs.space-build == 'true' }}
+    needs: setup-feature-build
+    name: Feature Build Space
+    runs-on: ubuntu-latest
+    env:
+      AWS_ACCESS_KEY_ID: ${{ vars.FEATURE_PREVIEW_AWS_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.FEATURE_PREVIEW_AWS_SECRET_ACCESS_KEY }}
+      AWS_BUCKET: ${{ vars.FEATURE_PREVIEW_AWS_BUCKET }}
+      NEXT_PUBLIC_SPACE_BASE_PATH: "/spaces"
+      NEXT_PUBLIC_API_BASE_URL: ${{ vars.FEATURE_PREVIEW_NEXT_PUBLIC_API_BASE_URL }}
+    outputs:
+      do-build: ${{ needs.setup-feature-build.outputs.space-build }}
+      s3-url: ${{ steps.build-space.outputs.S3_PRESIGNED_URL }}
+    steps:
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "18"
+      - name: Install AWS cli
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y python3-pip
+          pip3 install awscli
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          path: plane
+      - name: Install Dependencies
+        run: |
+          cd $GITHUB_WORKSPACE/plane
+          yarn install
+      - name: Build Space
+        id: build-space
+        run: |
+          cd $GITHUB_WORKSPACE/plane
+          yarn build --filter=space
+          cd $GITHUB_WORKSPACE
+
+          TAR_NAME="space.tar.gz"
+          tar -czf $TAR_NAME ./plane
+
+          FILE_EXPIRY=$(date -u -d "+2 days" +"%Y-%m-%dT%H:%M:%SZ")
+          aws s3 cp $TAR_NAME s3://${{ env.AWS_BUCKET }}/${{github.sha}}/$TAR_NAME --expires $FILE_EXPIRY
+
+  feature-build-admin:
+    if: ${{ needs.setup-feature-build.outputs.admin-build == 'true' }}
+    needs: setup-feature-build
+    name: Feature Build Admin
+    runs-on: ubuntu-latest
+    env:
+      AWS_ACCESS_KEY_ID: ${{ vars.FEATURE_PREVIEW_AWS_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.FEATURE_PREVIEW_AWS_SECRET_ACCESS_KEY }}
+      AWS_BUCKET: ${{ vars.FEATURE_PREVIEW_AWS_BUCKET }}
+      NEXT_PUBLIC_ADMIN_BASE_PATH: "/god-mode"
+      NEXT_PUBLIC_API_BASE_URL: ${{ vars.FEATURE_PREVIEW_NEXT_PUBLIC_API_BASE_URL }}
+    outputs:
+      do-build: ${{ needs.setup-feature-build.outputs.admin-build }}
+      s3-url: ${{ steps.build-admin.outputs.S3_PRESIGNED_URL }}
+    steps:
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "18"
+      - name: Install AWS cli
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y python3-pip
+          pip3 install awscli
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          path: plane
+      - name: Install Dependencies
+        run: |
+          cd $GITHUB_WORKSPACE/plane
+          yarn install
+      - name: Build Admin
+        id: build-admin
+        run: |
+          cd $GITHUB_WORKSPACE/plane
+          yarn build --filter=admin
+          cd $GITHUB_WORKSPACE
+
+          TAR_NAME="admin.tar.gz"
+          tar -czf $TAR_NAME ./plane
+
+          FILE_EXPIRY=$(date -u -d "+2 days" +"%Y-%m-%dT%H:%M:%SZ")
+          aws s3 cp $TAR_NAME s3://${{ env.AWS_BUCKET }}/${{github.sha}}/$TAR_NAME --expires $FILE_EXPIRY
 
   feature-deploy:
-    needs: [branch_build_setup, full_build_push]
+    if: ${{ always() && (needs.setup-feature-build.outputs.web-build == 'true' || needs.setup-feature-build.outputs.space-build == 'true' || needs.setup-feature-build.outputs.admin-build == 'true') }}
+    needs:
+      [
+        setup-feature-build,
+        feature-build-web,
+        feature-build-space,
+        feature-build-admin,
+      ]
     name: Feature Deploy
     runs-on: ubuntu-latest
     env:
+      AWS_ACCESS_KEY_ID: ${{ vars.FEATURE_PREVIEW_AWS_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.FEATURE_PREVIEW_AWS_SECRET_ACCESS_KEY }}
+      AWS_BUCKET: ${{ vars.FEATURE_PREVIEW_AWS_BUCKET }}
       KUBE_CONFIG_FILE: ${{ secrets.FEATURE_PREVIEW_KUBE_CONFIG }}
-      DEPLOYMENT_NAME: ${{ needs.branch_build_setup.outputs.flat_branch_name }}
     steps:
       - name: Install AWS cli
         run: |
@@ -132,37 +213,54 @@ jobs:
           ./get_helm.sh
       - name: App Deploy
         run: |
-          helm --kube-insecure-skip-tls-verify repo add feature-preview ${{ vars.FEATURE_PREVIEW_HELM_CHART_URL }} 
+          WEB_S3_URL=""
+          if [ ${{ env.BUILD_WEB }} == true ]; then
+            WEB_S3_URL=$(aws s3 presign s3://${{ vars.FEATURE_PREVIEW_AWS_BUCKET }}/${{github.sha}}/web.tar.gz --expires-in 3600)
+          fi
 
-          APP_NAMESPACE="${{ vars.FEATURE_PREVIEW_NAMESPACE }}"
+          SPACE_S3_URL=""
+          if [ ${{ env.BUILD_SPACE }} == true ]; then
+            SPACE_S3_URL=$(aws s3 presign s3://${{ vars.FEATURE_PREVIEW_AWS_BUCKET }}/${{github.sha}}/space.tar.gz --expires-in 3600)
+          fi
 
-          helm --kube-insecure-skip-tls-verify  uninstall \
-            ${{ env.DEPLOYMENT_NAME }} \
-            --namespace $APP_NAMESPACE \
-            --timeout 10m0s \
-            --wait \
-            --ignore-not-found
+          ADMIN_S3_URL=""
+          if [ ${{ env.BUILD_ADMIN }} == true ]; then
+            ADMIN_S3_URL=$(aws s3 presign s3://${{ vars.FEATURE_PREVIEW_AWS_BUCKET }}/${{github.sha}}/admin.tar.gz --expires-in 3600)
+          fi
 
-          METADATA=$(helm --kube-insecure-skip-tls-verify upgrade \
-              --install=true \
-              --namespace $APP_NAMESPACE \
-              --set dockerhub.loginid=${{ secrets.DOCKERHUB_USERNAME }} \
-              --set dockerhub.password=${{ secrets.DOCKERHUB_TOKEN_RO}} \
-              --set config.feature_branch=${{ env.DEPLOYMENT_NAME }} \
-              --set ingress.primaryDomain=${{vars.FEATURE_PREVIEW_PRIMARY_DOMAIN || 'feature.plane.tools' }} \
-              --set ingress.tls_secret=${{vars.FEATURE_PREVIEW_INGRESS_TLS_SECRET || '' }} \
-              --output json \
-              --timeout 10m0s \
-              --wait \
-              ${{ env.DEPLOYMENT_NAME }}  feature-preview/${{ vars.FEATURE_PREVIEW_HELM_CHART_NAME }} )
+          if [ ${{ env.BUILD_WEB }} == true ] || [ ${{ env.BUILD_SPACE }} == true ] || [ ${{ env.BUILD_ADMIN }} == true ]; then
 
-          APP_NAME=$(echo $METADATA | jq -r '.name')
+            helm --kube-insecure-skip-tls-verify repo add feature-preview ${{ vars.FEATURE_PREVIEW_HELM_CHART_URL }} 
 
-          INGRESS_HOSTNAME=$(kubectl get ingress -n $APP_NAMESPACE --insecure-skip-tls-verify \
-              -o jsonpath='{.items[?(@.metadata.annotations.meta\.helm\.sh\/release-name=="'$APP_NAME'")]}' | \
-              jq -r '.spec.rules[0].host')
+            APP_NAMESPACE="${{ vars.FEATURE_PREVIEW_NAMESPACE }}"
+            DEPLOY_SCRIPT_URL="${{ vars.FEATURE_PREVIEW_DEPLOY_SCRIPT_URL }}"
 
-          echo "****************************************"
-          echo "APP NAME ::: $APP_NAME"
-          echo "INGRESS HOSTNAME ::: $INGRESS_HOSTNAME"
-          echo "****************************************"
+            METADATA=$(helm --kube-insecure-skip-tls-verify install feature-preview/${{ vars.FEATURE_PREVIEW_HELM_CHART_NAME }} \
+                --generate-name \
+                --namespace $APP_NAMESPACE \
+                --set ingress.primaryDomain=${{vars.FEATURE_PREVIEW_PRIMARY_DOMAIN || 'feature.plane.tools' }} \
+                --set web.image=${{vars.FEATURE_PREVIEW_DOCKER_BASE}} \
+                --set web.enabled=${{ env.BUILD_WEB || false }} \
+                --set web.artifact_url=$WEB_S3_URL \
+                --set space.image=${{vars.FEATURE_PREVIEW_DOCKER_BASE}} \
+                --set space.enabled=${{ env.BUILD_SPACE || false }} \
+                --set space.artifact_url=$SPACE_S3_URL \
+                --set admin.image=${{vars.FEATURE_PREVIEW_DOCKER_BASE}} \
+                --set admin.enabled=${{ env.BUILD_ADMIN || false }} \
+                --set admin.artifact_url=$ADMIN_S3_URL \
+                --set shared_config.deploy_script_url=$DEPLOY_SCRIPT_URL \
+                --set shared_config.api_base_url=${{vars.FEATURE_PREVIEW_NEXT_PUBLIC_API_BASE_URL}} \
+                --output json \
+                --timeout 1000s)
+
+            APP_NAME=$(echo $METADATA | jq -r '.name')
+
+            INGRESS_HOSTNAME=$(kubectl get ingress -n feature-builds --insecure-skip-tls-verify \
+                -o jsonpath='{.items[?(@.metadata.annotations.meta\.helm\.sh\/release-name=="'$APP_NAME'")]}' | \
+                jq -r '.spec.rules[0].host')
+
+            echo "****************************************"
+            echo "APP NAME ::: $APP_NAME"
+            echo "INGRESS HOSTNAME ::: $INGRESS_HOSTNAME"
+            echo "****************************************"
+          fi

.gitignore

@@ -81,7 +81,4 @@ tmp/
 ## packages
 dist
 .temp/
-deploy/selfhost/plane-app/
-## Storybook
-*storybook.log
-output.css
+deploy/selfhost/plane-app/

.lintstagedrc.json

@@ -1,3 +0,0 @@
-{
-  "*.{ts,tsx,js,jsx}": ["eslint -c ./.eslintrc-staged.js", "prettier --check"]
-}

Dockerfile

@@ -0,0 +1,124 @@
+FROM node:18-alpine AS builder
+RUN apk add --no-cache libc6-compat
+# Set working directory
+WORKDIR /app
+ENV NEXT_PUBLIC_API_BASE_URL=http://NEXT_PUBLIC_API_BASE_URL_PLACEHOLDER
+
+RUN yarn global add turbo
+RUN apk add tree
+COPY . .
+
+RUN turbo prune --scope=app --scope=plane-deploy --docker
+CMD tree -I node_modules/
+
+# Add lockfile and package.json's of isolated subworkspace
+FROM node:18-alpine AS installer
+
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+ARG NEXT_PUBLIC_API_BASE_URL=http://localhost:8000
+# First install the dependencies (as they change less often)
+COPY .gitignore .gitignore
+COPY --from=builder /app/out/json/ .
+COPY --from=builder /app/out/yarn.lock ./yarn.lock
+RUN yarn install
+
+# # Build the project
+COPY --from=builder /app/out/full/ .
+COPY turbo.json turbo.json
+COPY replace-env-vars.sh /usr/local/bin/
+
+RUN chmod +x /usr/local/bin/replace-env-vars.sh
+
+RUN yarn turbo run build
+
+ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL \
+    BUILT_NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
+
+RUN /usr/local/bin/replace-env-vars.sh http://NEXT_PUBLIC_WEBAPP_URL_PLACEHOLDER ${NEXT_PUBLIC_API_BASE_URL}
+
+FROM python:3.11.1-alpine3.17 AS backend
+
+# set environment variables
+ENV PYTHONDONTWRITEBYTECODE 1
+ENV PYTHONUNBUFFERED 1
+ENV PIP_DISABLE_PIP_VERSION_CHECK=1 
+
+WORKDIR /code
+
+RUN apk --no-cache add \
+    "libpq~=15" \
+    "libxslt~=1.1" \
+    "nodejs-current~=19" \
+    "xmlsec~=1.2" \
+    "nginx" \
+    "nodejs" \
+    "npm" \
+    "supervisor"
+
+COPY apiserver/requirements.txt ./
+COPY apiserver/requirements ./requirements
+RUN apk add --no-cache libffi-dev
+RUN apk add --no-cache --virtual .build-deps \
+    "bash~=5.2" \
+    "g++~=12.2" \
+    "gcc~=12.2" \
+    "cargo~=1.64" \
+    "git~=2" \
+    "make~=4.3" \
+    "postgresql13-dev~=13" \
+    "libc-dev" \
+    "linux-headers" \
+    && \
+    pip install -r requirements.txt --compile --no-cache-dir \
+    && \
+    apk del .build-deps
+
+# Add in Django deps and generate Django's static files
+COPY apiserver/manage.py manage.py
+COPY apiserver/plane plane/
+COPY apiserver/templates templates/
+
+RUN apk --no-cache add "bash~=5.2"
+COPY apiserver/bin ./bin/
+
+RUN chmod +x ./bin/takeoff ./bin/worker
+RUN chmod -R 777 /code
+
+# Expose container port and run entry point script
+
+WORKDIR /app
+
+COPY --from=installer /app/apps/app/next.config.js .
+COPY --from=installer /app/apps/app/package.json .
+COPY --from=installer /app/apps/space/next.config.js .
+COPY --from=installer /app/apps/space/package.json .
+
+COPY --from=installer /app/apps/app/.next/standalone ./
+
+COPY --from=installer /app/apps/app/.next/static ./apps/app/.next/static
+
+COPY --from=installer /app/apps/space/.next/standalone ./
+COPY --from=installer /app/apps/space/.next ./apps/space/.next
+
+ENV NEXT_TELEMETRY_DISABLED 1
+
+# RUN rm /etc/nginx/conf.d/default.conf
+#######################################################################
+COPY nginx/nginx-single-docker-image.conf /etc/nginx/http.d/default.conf
+#######################################################################
+
+COPY nginx/supervisor.conf /code/supervisor.conf
+
+ARG NEXT_PUBLIC_API_BASE_URL=http://localhost:8000
+ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL \
+    BUILT_NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
+
+COPY replace-env-vars.sh /usr/local/bin/
+COPY start.sh /usr/local/bin/
+RUN chmod +x /usr/local/bin/replace-env-vars.sh
+RUN chmod +x /usr/local/bin/start.sh
+
+EXPOSE 80
+
+CMD ["supervisord","-c","/code/supervisor.conf"]

ENV_SETUP.md

@@ -1,5 +1,6 @@
 # Environment Variables
 
+​
 Environment variables are distributed in various files. Please refer them carefully.
 
 ## {PROJECT_FOLDER}/.env
@@ -8,13 +9,17 @@ File is available in the project root folder​
 
 ```
 # Database Settings
-POSTGRES_USER="plane"
-POSTGRES_PASSWORD="plane"
-POSTGRES_DB="plane"
-PGDATA="/var/lib/postgresql/data"
+PGUSER="plane"
+PGPASSWORD="plane"
+PGHOST="plane-db"
+PGDATABASE="plane"
+DATABASE_URL=postgresql://${PGUSER}:${PGPASSWORD}@${PGHOST}/${PGDATABASE}
+​
 # Redis Settings
 REDIS_HOST="plane-redis"
 REDIS_PORT="6379"
+REDIS_URL="redis://${REDIS_HOST}:6379/"
+​
 # AWS Settings
 AWS_REGION=""
 AWS_ACCESS_KEY_ID="access-key"
@@ -24,39 +29,63 @@ AWS_S3_ENDPOINT_URL="http://plane-minio:9000"
 AWS_S3_BUCKET_NAME="uploads"
 # Maximum file upload limit
 FILE_SIZE_LIMIT=5242880
+​
 # GPT settings
 OPENAI_API_BASE="https://api.openai.com/v1" # deprecated
 OPENAI_API_KEY="sk-" # deprecated
 GPT_ENGINE="gpt-3.5-turbo" # deprecated
-# Settings related to Docker
-DOCKERIZED=1  # deprecated
+​
 # set to 1 If using the pre-configured minio setup
 USE_MINIO=1
+​
 # Nginx Configuration
 NGINX_PORT=80
 ```
 
+​
+
+## {PROJECT_FOLDER}/web/.env.example
+
+​
+
+```
+# Public boards deploy URL
+NEXT_PUBLIC_DEPLOY_URL="http://localhost/spaces"
+```
+
 ## {PROJECT_FOLDER}/apiserver/.env
 
+​
+
 ```
 # Backend
 # Debug value for api server use it as 0 for production use
 DEBUG=0
-CORS_ALLOWED_ORIGINS="http://localhost"
+​
 # Error logs
 SENTRY_DSN=""
-SENTRY_ENVIRONMENT="development"
+​
 # Database Settings
-POSTGRES_USER="plane"
-POSTGRES_PASSWORD="plane"
-POSTGRES_HOST="plane-db"
-POSTGRES_DB="plane"
-POSTGRES_PORT=5432
-DATABASE_URL=postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_HOST}:${POSTGRES_PORT}/${POSTGRES_DB}
+PGUSER="plane"
+PGPASSWORD="plane"
+PGHOST="plane-db"
+PGDATABASE="plane"
+DATABASE_URL=postgresql://${PGUSER}:${PGPASSWORD}@${PGHOST}/${PGDATABASE}
+​
 # Redis Settings
 REDIS_HOST="plane-redis"
 REDIS_PORT="6379"
 REDIS_URL="redis://${REDIS_HOST}:6379/"
+​
+# Email Settings
+EMAIL_HOST=""
+EMAIL_HOST_USER=""
+EMAIL_HOST_PASSWORD=""
+EMAIL_PORT=587
+EMAIL_FROM="Team Plane <team@mailer.plane.so>"
+EMAIL_USE_TLS="1"
+EMAIL_USE_SSL="0"
+​
 # AWS Settings
 AWS_REGION=""
 AWS_ACCESS_KEY_ID="access-key"
@@ -66,25 +95,35 @@ AWS_S3_ENDPOINT_URL="http://plane-minio:9000"
 AWS_S3_BUCKET_NAME="uploads"
 # Maximum file upload limit
 FILE_SIZE_LIMIT=5242880
+​
+# GPT settings
+OPENAI_API_BASE="https://api.openai.com/v1" # deprecated
+OPENAI_API_KEY="sk-" # deprecated
+GPT_ENGINE="gpt-3.5-turbo" # deprecated
+​
 # Settings related to Docker
-DOCKERIZED=1 # deprecated
+DOCKERIZED=1  # Deprecated
+
+# Github
+GITHUB_CLIENT_SECRET="" # For fetching release notes
+​
 # set to 1 If using the pre-configured minio setup
 USE_MINIO=1
+​
 # Nginx Configuration
 NGINX_PORT=80
-# Email redirections and minio domain settings
+​
+​
+# SignUps
+ENABLE_SIGNUP="1"
+​
+# Email Redirection URL
 WEB_URL="http://localhost"
-# Gunicorn Workers
-GUNICORN_WORKERS=2
-# Base URLs
-ADMIN_BASE_URL=
-SPACE_BASE_URL=
-APP_BASE_URL=
-SECRET_KEY="gxoytl7dmnc1y37zahah820z5iq3iozu38cnfjtu3yaau9cd9z"
 ```
 
 ## Updates​
 
+- The environment variable NEXT_PUBLIC_API_BASE_URL has been removed from both the web and space projects.
 - The naming convention for containers and images has been updated.
 - The plane-worker image will no longer be maintained, as it has been merged with plane-backend.
 - The Tiptap pro-extension dependency has been removed, eliminating the need for Tiptap API keys.

admin/.eslintrc.js

@@ -10,43 +10,5 @@ module.exports = {
       },
     },
   },
-  rules: {
-    "import/order": [
-      "error",
-      {
-        groups: ["builtin", "external", "internal", "parent", "sibling",],
-        pathGroups: [
-          {
-            pattern: "react",
-            group: "external",
-            position: "before",
-          },
-          {
-            pattern: "lucide-react",
-            group: "external",
-            position: "after",
-          },
-          {
-            pattern: "@headlessui/**",
-            group: "external",
-            position: "after",
-          },
-          {
-            pattern: "@plane/**",
-            group: "external",
-            position: "after",
-          },
-          {
-            pattern: "@/**",
-            group: "internal",
-          }
-        ],
-        pathGroupsExcludedImportTypes: ["builtin", "internal", "react"],
-        alphabetize: {
-          order: "asc",
-          caseInsensitive: true,
-        },
-      },
-    ],
-  },
+  rules: {}
 }

admin/Dockerfile.admin

@@ -29,21 +29,15 @@ COPY turbo.json turbo.json
 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_WEB_BASE_URL=""
+ENV NEXT_PUBLIC_WEB_BASE_URL=$NEXT_PUBLIC_WEB_BASE_URL
+
+ARG NEXT_PUBLIC_SPACE_BASE_URL="/spaces"
+ENV NEXT_PUBLIC_SPACE_BASE_URL=$NEXT_PUBLIC_SPACE_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
 
@@ -65,21 +59,15 @@ COPY --from=installer /app/admin/public ./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_WEB_BASE_URL=""
+ENV NEXT_PUBLIC_WEB_BASE_URL=$NEXT_PUBLIC_WEB_BASE_URL
+
+ARG NEXT_PUBLIC_SPACE_BASE_URL="/spaces"
+ENV NEXT_PUBLIC_SPACE_BASE_URL=$NEXT_PUBLIC_SPACE_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
 

admin/app/ai/components/ai-config-form.tsx

@@ -0,0 +1,128 @@
+import { FC } from "react";
+import { useForm } from "react-hook-form";
+import { Lightbulb } from "lucide-react";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+import { IFormattedInstanceConfiguration, TInstanceAIConfigurationKeys } from "@plane/types";
+// components
+import { ControllerInput, TControllerInputFormField } from "components/common";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type IInstanceAIForm = {
+  config: IFormattedInstanceConfiguration;
+};
+
+type AIFormValues = Record<TInstanceAIConfigurationKeys, string>;
+
+export const InstanceAIForm: FC<IInstanceAIForm> = (props) => {
+  const { config } = props;
+  // store
+  const { updateInstanceConfigurations } = useInstance();
+  // form data
+  const {
+    handleSubmit,
+    control,
+    formState: { errors, isSubmitting },
+  } = useForm<AIFormValues>({
+    defaultValues: {
+      OPENAI_API_KEY: config["OPENAI_API_KEY"],
+      GPT_ENGINE: config["GPT_ENGINE"],
+    },
+  });
+
+  const aiFormFields: TControllerInputFormField[] = [
+    {
+      key: "GPT_ENGINE",
+      type: "text",
+      label: "GPT_ENGINE",
+      description: (
+        <>
+          Choose an OpenAI engine.{" "}
+          <a
+            href="https://platform.openai.com/docs/models/overview"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            Learn more
+          </a>
+        </>
+      ),
+      placeholder: "gpt-3.5-turbo",
+      error: Boolean(errors.GPT_ENGINE),
+      required: false,
+    },
+    {
+      key: "OPENAI_API_KEY",
+      type: "password",
+      label: "API key",
+      description: (
+        <>
+          You will find your API key{" "}
+          <a
+            href="https://platform.openai.com/api-keys"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            here.
+          </a>
+        </>
+      ),
+      placeholder: "sk-asddassdfasdefqsdfasd23das3dasdcasd",
+      error: Boolean(errors.OPENAI_API_KEY),
+      required: false,
+    },
+  ];
+
+  const onSubmit = async (formData: AIFormValues) => {
+    const payload: Partial<AIFormValues> = { ...formData };
+
+    await updateInstanceConfigurations(payload)
+      .then(() =>
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success",
+          message: "AI Settings updated successfully",
+        })
+      )
+      .catch((err) => console.error(err));
+  };
+
+  return (
+    <div className="space-y-8">
+      <div className="space-y-3">
+        <div>
+          <div className="pb-1 text-xl font-medium text-custom-text-100">OpenAI</div>
+          <div className="text-sm font-normal text-custom-text-300">If you use ChatGPT, this is for you.</div>
+        </div>
+        <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-x-12 gap-y-8 lg:grid-cols-3">
+          {aiFormFields.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>
+      </div>
+
+      <div className="space-y-4">
+        <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+          {isSubmitting ? "Saving..." : "Save changes"}
+        </Button>
+
+        <div className="relative inline-flex items-center gap-2 rounded border border-custom-primary-100/20 bg-custom-primary-100/10 px-4 py-2 text-xs text-custom-primary-200">
+          <Lightbulb height="14" width="14" />
+          <div>If you have a preferred AI models vendor, please get in touch with us.</div>
+        </div>
+      </div>
+    </div>
+  );
+};

admin/app/ai/components/index.ts

@@ -0,0 +1 @@
+export * from "./ai-config-form";

admin/app/ai/form.tsx

@@ -1,129 +0,0 @@
-"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";
-// components
-import { ControllerInput, TControllerInputFormField } from "@/components/common";
-// hooks
-import { useInstance } from "@/hooks/store";
-
-type IInstanceAIForm = {
-  config: IFormattedInstanceConfiguration;
-};
-
-type AIFormValues = Record<TInstanceAIConfigurationKeys, string>;
-
-export const InstanceAIForm: FC<IInstanceAIForm> = (props) => {
-  const { config } = props;
-  // store
-  const { updateInstanceConfigurations } = useInstance();
-  // form data
-  const {
-    handleSubmit,
-    control,
-    formState: { errors, isSubmitting },
-  } = useForm<AIFormValues>({
-    defaultValues: {
-      OPENAI_API_KEY: config["OPENAI_API_KEY"],
-      GPT_ENGINE: config["GPT_ENGINE"],
-    },
-  });
-
-  const aiFormFields: TControllerInputFormField[] = [
-    {
-      key: "GPT_ENGINE",
-      type: "text",
-      label: "GPT_ENGINE",
-      description: (
-        <>
-          Choose an OpenAI engine.{" "}
-          <a
-            href="https://platform.openai.com/docs/models/overview"
-            target="_blank"
-            className="text-custom-primary-100 hover:underline"
-            rel="noreferrer"
-          >
-            Learn more
-          </a>
-        </>
-      ),
-      placeholder: "gpt-3.5-turbo",
-      error: Boolean(errors.GPT_ENGINE),
-      required: false,
-    },
-    {
-      key: "OPENAI_API_KEY",
-      type: "password",
-      label: "API key",
-      description: (
-        <>
-          You will find your API key{" "}
-          <a
-            href="https://platform.openai.com/api-keys"
-            target="_blank"
-            className="text-custom-primary-100 hover:underline"
-            rel="noreferrer"
-          >
-            here.
-          </a>
-        </>
-      ),
-      placeholder: "sk-asddassdfasdefqsdfasd23das3dasdcasd",
-      error: Boolean(errors.OPENAI_API_KEY),
-      required: false,
-    },
-  ];
-
-  const onSubmit = async (formData: AIFormValues) => {
-    const payload: Partial<AIFormValues> = { ...formData };
-
-    await updateInstanceConfigurations(payload)
-      .then(() =>
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Success",
-          message: "AI Settings updated successfully",
-        })
-      )
-      .catch((err) => console.error(err));
-  };
-
-  return (
-    <div className="space-y-8">
-      <div className="space-y-3">
-        <div>
-          <div className="pb-1 text-xl font-medium text-custom-text-100">OpenAI</div>
-          <div className="text-sm font-normal text-custom-text-300">If you use ChatGPT, this is for you.</div>
-        </div>
-        <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-x-12 gap-y-8 lg:grid-cols-3">
-          {aiFormFields.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>
-      </div>
-
-      <div className="space-y-4">
-        <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
-          {isSubmitting ? "Saving..." : "Save changes"}
-        </Button>
-
-        <div className="relative inline-flex items-center gap-2 rounded border border-custom-primary-100/20 bg-custom-primary-100/10 px-4 py-2 text-xs text-custom-primary-200">
-          <Lightbulb height="14" width="14" />
-          <div>If you have a preferred AI models vendor, please get in touch with us.</div>
-        </div>
-      </div>
-    </div>
-  );
-};

admin/app/ai/layout.tsx

@@ -1,11 +1,21 @@
+"use client";
+
 import { ReactNode } from "react";
-import { Metadata } from "next";
-import { AdminLayout } from "@/layouts/admin-layout";
+// layouts
+import { AdminLayout } from "@/layouts";
+// lib
+import { AuthWrapper, InstanceWrapper } from "@/lib/wrappers";
 
-export const metadata: Metadata = {
-  title: "Artificial Intelligence Settings - Plane Web",
-};
-
-export default function AILayout({ children }: { children: ReactNode }) {
-  return <AdminLayout>{children}</AdminLayout>;
+interface AILayoutProps {
+  children: ReactNode;
 }
+
+const AILayout = ({ children }: AILayoutProps) => (
+  <InstanceWrapper>
+    <AuthWrapper>
+      <AdminLayout>{children}</AdminLayout>
+    </AuthWrapper>
+  </InstanceWrapper>
+);
+
+export default AILayout;

admin/app/ai/page.tsx

@@ -1,12 +1,13 @@
 "use client";
 
-import { observer } from "mobx-react";
 import useSWR from "swr";
+import { observer } from "mobx-react-lite";
 import { Loader } from "@plane/ui";
+// components
+import { PageHeader } from "@/components/core";
+import { InstanceAIForm } from "./components";
 // hooks
 import { useInstance } from "@/hooks/store";
-// components
-import { InstanceAIForm } from "./form";
 
 const InstanceAIPage = observer(() => {
   // store
@@ -16,14 +17,15 @@ const InstanceAIPage = observer(() => {
 
   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">
+      <PageHeader title="Artificial Intelligence - God Mode" />
+      <div className="relative container mx-auto w-full h-full p-8 py-4 space-y-6 flex flex-col">
+        <div className="border-b border-custom-border-100 pb-3 space-y-1 flex-shrink-0">
           <div className="text-xl font-medium text-custom-text-100">AI features for all your workspaces</div>
           <div className="text-sm font-normal text-custom-text-300">
             Configure your AI API credentials so Plane AI features are turned on for all your workspaces.
           </div>
         </div>
-        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+        <div className="flex-grow overflow-hidden overflow-y-auto">
           {formattedConfig ? (
             <InstanceAIForm config={formattedConfig} />
           ) : (

admin/app/authentication/components/common/authentication-method-card.tsx

@@ -11,11 +11,10 @@ type Props = {
   config: JSX.Element;
   disabled?: boolean;
   withBorder?: boolean;
-  unavailable?: boolean;
 };
 
 export const AuthenticationMethodCard: FC<Props> = (props) => {
-  const { name, description, icon, config, disabled = false, withBorder = true, unavailable = false } = props;
+  const { name, description, icon, config, disabled = false, withBorder = true } = props;
 
   return (
     <div
@@ -23,11 +22,7 @@ export const AuthenticationMethodCard: FC<Props> = (props) => {
         "px-4 py-3 border border-custom-border-200": withBorder,
       })}
     >
-      <div
-        className={cn("flex grow items-center gap-4", {
-          "opacity-50": unavailable,
-        })}
-      >
+      <div className="flex grow items-center gap-4">
         <div className="shrink-0">
           <div className="flex h-10 w-10 items-center justify-center rounded-full bg-custom-background-80">{icon}</div>
         </div>

admin/app/authentication/components/common/index.ts

@@ -0,0 +1 @@
+export * from "./authentication-method-card";

admin/app/authentication/components/email-config-switch.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 import React from "react";
-import { observer } from "mobx-react";
+import { observer } from "mobx-react-lite";
 // hooks
-import { TInstanceAuthenticationMethodKeys } from "@plane/types";
-import { ToggleSwitch } from "@plane/ui";
 import { useInstance } from "@/hooks/store";
 // ui
+import { ToggleSwitch } from "@plane/ui";
 // types
+import { TInstanceAuthenticationMethodKeys } from "@plane/types";
 
 type Props = {
   disabled: boolean;

admin/app/authentication/components/index.ts

@@ -0,0 +1,3 @@
+export * from "./common";
+export * from "./email-config-switch";
+export * from "./password-config-switch";

admin/app/authentication/components/password-config-switch.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 import React from "react";
-import { observer } from "mobx-react";
+import { observer } from "mobx-react-lite";
 // hooks
-import { TInstanceAuthenticationMethodKeys } from "@plane/types";
-import { ToggleSwitch } from "@plane/ui";
 import { useInstance } from "@/hooks/store";
 // ui
+import { ToggleSwitch } from "@plane/ui";
 // types
+import { TInstanceAuthenticationMethodKeys } from "@plane/types";
 
 type Props = {
   disabled: boolean;

admin/app/authentication/github/components/github-config-form.tsx

@@ -0,0 +1,206 @@
+import { FC, useState } from "react";
+import { useForm } from "react-hook-form";
+import Link from "next/link";
+// hooks
+import { useInstance } from "@/hooks/store";
+// ui
+import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
+// components
+import {
+  ConfirmDiscardModal,
+  ControllerInput,
+  CopyField,
+  TControllerInputFormField,
+  TCopyField,
+} from "components/common";
+// types
+import { IFormattedInstanceConfiguration, TInstanceGithubAuthenticationConfigurationKeys } from "@plane/types";
+// helpers
+import { API_BASE_URL, cn } from "helpers/common.helper";
+import isEmpty from "lodash/isEmpty";
+
+type Props = {
+  config: IFormattedInstanceConfiguration;
+};
+
+type GithubConfigFormValues = Record<TInstanceGithubAuthenticationConfigurationKeys, string>;
+
+export const InstanceGithubConfigForm: 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<GithubConfigFormValues>({
+    defaultValues: {
+      GITHUB_CLIENT_ID: config["GITHUB_CLIENT_ID"],
+      GITHUB_CLIENT_SECRET: config["GITHUB_CLIENT_SECRET"],
+    },
+  });
+
+  const originURL = !isEmpty(API_BASE_URL) ? API_BASE_URL : typeof window !== "undefined" ? window.location.origin : "";
+
+  const githubFormFields: TControllerInputFormField[] = [
+    {
+      key: "GITHUB_CLIENT_ID",
+      type: "text",
+      label: "Client ID",
+      description: (
+        <>
+          You will get this from your{" "}
+          <a
+            href="https://github.com/settings/applications/new"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            GitHub OAuth application settings.
+          </a>
+        </>
+      ),
+      placeholder: "70a44354520df8bd9bcd",
+      error: Boolean(errors.GITHUB_CLIENT_ID),
+      required: true,
+    },
+    {
+      key: "GITHUB_CLIENT_SECRET",
+      type: "password",
+      label: "Client secret",
+      description: (
+        <>
+          Your client secret is also found in your{" "}
+          <a
+            href="https://github.com/settings/applications/new"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            GitHub OAuth application settings.
+          </a>
+        </>
+      ),
+      placeholder: "9b0050f94ec1b744e32ce79ea4ffacd40d4119cb",
+      error: Boolean(errors.GITHUB_CLIENT_SECRET),
+      required: true,
+    },
+  ];
+
+  const githubCopyFields: TCopyField[] = [
+    {
+      key: "Origin_URL",
+      label: "Origin URL",
+      url: originURL,
+      description: (
+        <>
+          We will auto-generate this. Paste this into the Authorized origin URL field{" "}
+          <a
+            href="https://github.com/settings/applications/new"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            here.
+          </a>
+        </>
+      ),
+    },
+    {
+      key: "Callback_URI",
+      label: "Callback URI",
+      url: `${originURL}/auth/github/callback/`,
+      description: (
+        <>
+          We will auto-generate this. Paste this into your Authorized Callback URI field{" "}
+          <a
+            href="https://github.com/settings/applications/new"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            here.
+          </a>
+        </>
+      ),
+    },
+  ];
+
+  const onSubmit = async (formData: GithubConfigFormValues) => {
+    const payload: Partial<GithubConfigFormValues> = { ...formData };
+
+    await updateInstanceConfigurations(payload)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success",
+          message: "Github Configuration Settings updated successfully",
+        });
+        reset();
+      })
+      .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">
+            <div className="pt-2 text-xl font-medium">Configuration</div>
+            {githubFormFields.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 py-4 my-2 bg-custom-background-80/60 rounded-lg">
+              <div className="pt-2 text-xl font-medium">Service provider details</div>
+              {githubCopyFields.map((field) => (
+                <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

admin/app/authentication/github/components/index.ts

@@ -0,0 +1,2 @@
+export * from "./root";
+export * from "./github-config-form";

admin/app/authentication/github/components/root.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useInstance } from "@/hooks/store";
+// ui
+import { ToggleSwitch, getButtonStyling } from "@plane/ui";
+// icons
+import { Settings2 } from "lucide-react";
+// types
+import { TInstanceAuthenticationMethodKeys } from "@plane/types";
+// helpers
+import { cn } from "helpers/common.helper";
+
+type Props = {
+  disabled: boolean;
+  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
+};
+
+export const GithubConfiguration: React.FC<Props> = observer((props) => {
+  const { disabled, updateConfig } = props;
+  // store
+  const { formattedConfig } = useInstance();
+  // derived values
+  const enableGithubConfig = formattedConfig?.IS_GITHUB_ENABLED ?? "";
+  const isGithubConfigured = !!formattedConfig?.GITHUB_CLIENT_ID && !!formattedConfig?.GITHUB_CLIENT_SECRET;
+
+  return (
+    <>
+      {isGithubConfigured ? (
+        <div className="flex items-center gap-4">
+          <Link href="/authentication/github" className={cn(getButtonStyling("link-primary", "md"), "font-medium")}>
+            Edit
+          </Link>
+          <ToggleSwitch
+            value={Boolean(parseInt(enableGithubConfig))}
+            onChange={() => {
+              Boolean(parseInt(enableGithubConfig)) === true
+                ? updateConfig("IS_GITHUB_ENABLED", "0")
+                : updateConfig("IS_GITHUB_ENABLED", "1");
+            }}
+            size="sm"
+            disabled={disabled}
+          />
+        </div>
+      ) : (
+        <Link
+          href="/authentication/github"
+          className={cn(getButtonStyling("neutral-primary", "sm"), "text-custom-text-300")}
+        >
+          <Settings2 className="h-4 w-4 p-0.5 text-custom-text-300/80" />
+          Configure
+        </Link>
+      )}
+    </>
+  );
+});

admin/app/authentication/github/form.tsx

@@ -1,218 +0,0 @@
-"use client";
-
-import { FC, useState } from "react";
-import isEmpty from "lodash/isEmpty";
-import Link from "next/link";
-import { useForm } from "react-hook-form";
-// types
-import { IFormattedInstanceConfiguration, TInstanceGithubAuthenticationConfigurationKeys } from "@plane/types";
-// ui
-import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
-// components
-import {
-  CodeBlock,
-  ConfirmDiscardModal,
-  ControllerInput,
-  CopyField,
-  TControllerInputFormField,
-  TCopyField,
-} from "@/components/common";
-// helpers
-import { API_BASE_URL, cn } from "@/helpers/common.helper";
-// hooks
-import { useInstance } from "@/hooks/store";
-
-type Props = {
-  config: IFormattedInstanceConfiguration;
-};
-
-type GithubConfigFormValues = Record<TInstanceGithubAuthenticationConfigurationKeys, string>;
-
-export const InstanceGithubConfigForm: 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<GithubConfigFormValues>({
-    defaultValues: {
-      GITHUB_CLIENT_ID: config["GITHUB_CLIENT_ID"],
-      GITHUB_CLIENT_SECRET: config["GITHUB_CLIENT_SECRET"],
-    },
-  });
-
-  const originURL = !isEmpty(API_BASE_URL) ? API_BASE_URL : typeof window !== "undefined" ? window.location.origin : "";
-
-  const GITHUB_FORM_FIELDS: TControllerInputFormField[] = [
-    {
-      key: "GITHUB_CLIENT_ID",
-      type: "text",
-      label: "Client ID",
-      description: (
-        <>
-          You will get this from your{" "}
-          <a
-            tabIndex={-1}
-            href="https://github.com/settings/applications/new"
-            target="_blank"
-            className="text-custom-primary-100 hover:underline"
-            rel="noreferrer"
-          >
-            GitHub OAuth application settings.
-          </a>
-        </>
-      ),
-      placeholder: "70a44354520df8bd9bcd",
-      error: Boolean(errors.GITHUB_CLIENT_ID),
-      required: true,
-    },
-    {
-      key: "GITHUB_CLIENT_SECRET",
-      type: "password",
-      label: "Client secret",
-      description: (
-        <>
-          Your client secret is also found in your{" "}
-          <a
-            tabIndex={-1}
-            href="https://github.com/settings/applications/new"
-            target="_blank"
-            className="text-custom-primary-100 hover:underline"
-            rel="noreferrer"
-          >
-            GitHub OAuth application settings.
-          </a>
-        </>
-      ),
-      placeholder: "9b0050f94ec1b744e32ce79ea4ffacd40d4119cb",
-      error: Boolean(errors.GITHUB_CLIENT_SECRET),
-      required: true,
-    },
-  ];
-
-  const GITHUB_SERVICE_FIELD: TCopyField[] = [
-    {
-      key: "Origin_URL",
-      label: "Origin URL",
-      url: originURL,
-      description: (
-        <>
-          We will auto-generate this. Paste this into the{" "}
-          <CodeBlock darkerShade>Authorized origin URL</CodeBlock> field{" "}
-          <a
-            tabIndex={-1}
-            href="https://github.com/settings/applications/new"
-            target="_blank"
-            className="text-custom-primary-100 hover:underline"
-            rel="noreferrer"
-          >
-            here.
-          </a>
-        </>
-      ),
-    },
-    {
-      key: "Callback_URI",
-      label: "Callback URI",
-      url: `${originURL}/auth/github/callback/`,
-      description: (
-        <>
-          We will auto-generate this. Paste this into your{" "}
-          <CodeBlock darkerShade>Authorized Callback URI</CodeBlock> field{" "}
-          <a
-            tabIndex={-1}
-            href="https://github.com/settings/applications/new"
-            target="_blank"
-            className="text-custom-primary-100 hover:underline"
-            rel="noreferrer"
-          >
-            here.
-          </a>
-        </>
-      ),
-    },
-  ];
-
-  const onSubmit = async (formData: GithubConfigFormValues) => {
-    const payload: Partial<GithubConfigFormValues> = { ...formData };
-
-    await updateInstanceConfigurations(payload)
-      .then((response = []) => {
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Done!",
-          message: "Your GitHub authentication is configured. You should test it now.",
-        });
-        reset({
-          GITHUB_CLIENT_ID: response.find((item) => item.key === "GITHUB_CLIENT_ID")?.value,
-          GITHUB_CLIENT_SECRET: response.find((item) => item.key === "GITHUB_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">GitHub-provided details for Plane</div>
-            {GITHUB_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 GitHub</div>
-              {GITHUB_SERVICE_FIELD.map((field) => (
-                <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};

admin/app/authentication/github/page.tsx

@@ -1,23 +1,22 @@
 "use client";
 
 import { useState } from "react";
-import { observer } from "mobx-react";
 import Image from "next/image";
 import { useTheme } from "next-themes";
+import { observer } from "mobx-react-lite";
 import useSWR from "swr";
 import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
 // components
-import { AuthenticationMethodCard } from "@/components/authentication";
-import { PageHeader } from "@/components/common";
-// helpers
-import { resolveGeneralTheme } from "@/helpers/common.helper";
+import { PageHeader } from "@/components/core";
+import { AuthenticationMethodCard } from "../components";
+import { InstanceGithubConfigForm } from "./components";
 // hooks
 import { useInstance } from "@/hooks/store";
+// helpers
+import { resolveGeneralTheme } from "@/helpers/common.helper";
 // icons
 import githubLightModeImage from "@/public/logos/github-black.png";
 import githubDarkModeImage from "@/public/logos/github-white.png";
-// local components
-import { InstanceGithubConfigForm } from "./form";
 
 const InstanceGithubAuthenticationPage = observer(() => {
   // store
@@ -63,9 +62,9 @@ const InstanceGithubAuthenticationPage = observer(() => {
   };
   return (
     <>
-      <PageHeader title="GitHub Authentication - Plane Web" />
-      <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">
+      <PageHeader title="Authentication - God Mode" />
+      <div className="relative container mx-auto w-full h-full p-8 py-4 space-y-6 flex flex-col">
+        <div className="border-b border-custom-border-100 pb-3 space-y-1 flex-shrink-0">
           <AuthenticationMethodCard
             name="Github"
             description="Allow members to login or sign up to plane with their Github accounts."
@@ -93,7 +92,7 @@ const InstanceGithubAuthenticationPage = observer(() => {
             withBorder={false}
           />
         </div>
-        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+        <div className="flex-grow overflow-hidden overflow-y-auto">
           {formattedConfig ? (
             <InstanceGithubConfigForm config={formattedConfig} />
           ) : (

admin/app/authentication/gitlab/form.tsx

@@ -1,214 +0,0 @@
-import { FC, useState } from "react";
-import isEmpty from "lodash/isEmpty";
-import Link from "next/link";
-import { useForm } from "react-hook-form";
-// types
-import { IFormattedInstanceConfiguration, TInstanceGitlabAuthenticationConfigurationKeys } from "@plane/types";
-// ui
-import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
-// components
-import {
-  CodeBlock,
-  ConfirmDiscardModal,
-  ControllerInput,
-  CopyField,
-  TControllerInputFormField,
-  TCopyField,
-} from "@/components/common";
-// helpers
-import { API_BASE_URL, cn } from "@/helpers/common.helper";
-// hooks
-import { useInstance } from "@/hooks/store";
-
-type Props = {
-  config: IFormattedInstanceConfiguration;
-};
-
-type GitlabConfigFormValues = Record<TInstanceGitlabAuthenticationConfigurationKeys, string>;
-
-export const InstanceGitlabConfigForm: 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<GitlabConfigFormValues>({
-    defaultValues: {
-      GITLAB_HOST: config["GITLAB_HOST"],
-      GITLAB_CLIENT_ID: config["GITLAB_CLIENT_ID"],
-      GITLAB_CLIENT_SECRET: config["GITLAB_CLIENT_SECRET"],
-    },
-  });
-
-  const originURL = !isEmpty(API_BASE_URL) ? API_BASE_URL : typeof window !== "undefined" ? window.location.origin : "";
-
-  const GITLAB_FORM_FIELDS: TControllerInputFormField[] = [
-    {
-      key: "GITLAB_HOST",
-      type: "text",
-      label: "Host",
-      description: (
-        <>
-          This is either https://gitlab.com or the <CodeBlock>domain.tld</CodeBlock> where you host GitLab.
-        </>
-      ),
-      placeholder: "https://gitlab.com",
-      error: Boolean(errors.GITLAB_HOST),
-      required: true,
-    },
-    {
-      key: "GITLAB_CLIENT_ID",
-      type: "text",
-      label: "Application ID",
-      description: (
-        <>
-          Get this from your{" "}
-          <a
-            tabIndex={-1}
-            href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
-            target="_blank"
-            className="text-custom-primary-100 hover:underline"
-            rel="noreferrer"
-          >
-            GitLab OAuth application settings
-          </a>
-          .
-        </>
-      ),
-      placeholder: "c2ef2e7fc4e9d15aa7630f5637d59e8e4a27ff01dceebdb26b0d267b9adcf3c3",
-      error: Boolean(errors.GITLAB_CLIENT_ID),
-      required: true,
-    },
-    {
-      key: "GITLAB_CLIENT_SECRET",
-      type: "password",
-      label: "Secret",
-      description: (
-        <>
-          The client secret is also found in your{" "}
-          <a
-            tabIndex={-1}
-            href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
-            target="_blank"
-            className="text-custom-primary-100 hover:underline"
-            rel="noreferrer"
-          >
-            GitLab OAuth application settings
-          </a>
-          .
-        </>
-      ),
-      placeholder: "gloas-f79cfa9a03c97f6ffab303177a5a6778a53c61e3914ba093412f68a9298a1b28",
-      error: Boolean(errors.GITLAB_CLIENT_SECRET),
-      required: true,
-    },
-  ];
-
-  const GITLAB_SERVICE_FIELD: TCopyField[] = [
-    {
-      key: "Callback_URL",
-      label: "Callback URL",
-      url: `${originURL}/auth/gitlab/callback/`,
-      description: (
-        <>
-          We will auto-generate this. Paste this into the{" "}
-          <CodeBlock darkerShade>Redirect URI</CodeBlock> field of your{" "}
-          <a
-            tabIndex={-1}
-            href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
-            target="_blank"
-            className="text-custom-primary-100 hover:underline"
-            rel="noreferrer"
-          >
-            GitLab OAuth application
-          </a>
-          .
-        </>
-      ),
-    },
-  ];
-
-  const onSubmit = async (formData: GitlabConfigFormValues) => {
-    const payload: Partial<GitlabConfigFormValues> = { ...formData };
-
-    await updateInstanceConfigurations(payload)
-      .then((response = []) => {
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Done!",
-          message: "Your GitLab authentication is configured. You should test it now.",
-        });
-        reset({
-          GITLAB_HOST: response.find((item) => item.key === "GITLAB_HOST")?.value,
-          GITLAB_CLIENT_ID: response.find((item) => item.key === "GITLAB_CLIENT_ID")?.value,
-          GITLAB_CLIENT_SECRET: response.find((item) => item.key === "GITLAB_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">GitLab-provided details for Plane</div>
-            {GITLAB_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 GitLab</div>
-              {GITLAB_SERVICE_FIELD.map((field) => (
-                <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};

admin/app/authentication/gitlab/page.tsx

@@ -1,101 +0,0 @@
-"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";
-// components
-import { AuthenticationMethodCard } from "@/components/authentication";
-import { PageHeader } from "@/components/common";
-// hooks
-import { useInstance } from "@/hooks/store";
-// icons
-import GitlabLogo from "@/public/logos/gitlab-logo.svg";
-// local components
-import { InstanceGitlabConfigForm } from "./form";
-
-const InstanceGitlabAuthenticationPage = observer(() => {
-  // store
-  const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
-  // state
-  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
-  // config
-  const enableGitlabConfig = formattedConfig?.IS_GITLAB_ENABLED ?? "";
-
-  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
-
-  const updateConfig = async (key: "IS_GITLAB_ENABLED", value: string) => {
-    setIsSubmitting(true);
-
-    const payload = {
-      [key]: value,
-    };
-
-    const updateConfigPromise = updateInstanceConfigurations(payload);
-
-    setPromiseToast(updateConfigPromise, {
-      loading: "Saving Configuration...",
-      success: {
-        title: "Configuration saved",
-        message: () => `GitLab 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);
-      });
-  };
-  return (
-    <>
-      <PageHeader title="GitLab Authentication - Plane Web" />
-      <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="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" />}
-            config={
-              <ToggleSwitch
-                value={Boolean(parseInt(enableGitlabConfig))}
-                onChange={() => {
-                  Boolean(parseInt(enableGitlabConfig)) === true
-                    ? updateConfig("IS_GITLAB_ENABLED", "0")
-                    : updateConfig("IS_GITLAB_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 ? (
-            <InstanceGitlabConfigForm 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 InstanceGitlabAuthenticationPage;

admin/app/authentication/google/components/google-config-form.tsx

@@ -0,0 +1,206 @@
+import { FC, useState } from "react";
+import { useForm } from "react-hook-form";
+import Link from "next/link";
+// hooks
+import { useInstance } from "@/hooks/store";
+// ui
+import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
+// components
+import {
+  ConfirmDiscardModal,
+  ControllerInput,
+  CopyField,
+  TControllerInputFormField,
+  TCopyField,
+} from "components/common";
+// types
+import { IFormattedInstanceConfiguration, TInstanceGoogleAuthenticationConfigurationKeys } from "@plane/types";
+// helpers
+import { API_BASE_URL, cn } from "helpers/common.helper";
+import isEmpty from "lodash/isEmpty";
+
+type Props = {
+  config: IFormattedInstanceConfiguration;
+};
+
+type GoogleConfigFormValues = Record<TInstanceGoogleAuthenticationConfigurationKeys, string>;
+
+export const InstanceGoogleConfigForm: 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<GoogleConfigFormValues>({
+    defaultValues: {
+      GOOGLE_CLIENT_ID: config["GOOGLE_CLIENT_ID"],
+      GOOGLE_CLIENT_SECRET: config["GOOGLE_CLIENT_SECRET"],
+    },
+  });
+
+  const originURL = !isEmpty(API_BASE_URL) ? API_BASE_URL : typeof window !== "undefined" ? window.location.origin : "";
+
+  const googleFormFields: TControllerInputFormField[] = [
+    {
+      key: "GOOGLE_CLIENT_ID",
+      type: "text",
+      label: "Client ID",
+      description: (
+        <>
+          Your client ID lives in your Google API Console.{" "}
+          <a
+            href="https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow#creatingcred"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            Learn more
+          </a>
+        </>
+      ),
+      placeholder: "840195096245-0p2tstej9j5nc4l8o1ah2dqondscqc1g.apps.googleusercontent.com",
+      error: Boolean(errors.GOOGLE_CLIENT_ID),
+      required: true,
+    },
+    {
+      key: "GOOGLE_CLIENT_SECRET",
+      type: "password",
+      label: "Client secret",
+      description: (
+        <>
+          Your client secret should also be in your Google API Console.{" "}
+          <a
+            href="https://developers.google.com/identity/oauth2/web/guides/get-google-api-clientid"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            Learn more
+          </a>
+        </>
+      ),
+      placeholder: "GOCShX-ADp4cI0kPqav1gGCBg5bE02E",
+      error: Boolean(errors.GOOGLE_CLIENT_SECRET),
+      required: true,
+    },
+  ];
+
+  const googleCopyFeilds: TCopyField[] = [
+    {
+      key: "Origin_URL",
+      label: "Origin URL",
+      url: originURL,
+      description: (
+        <p>
+          We will auto-generate this. Paste this into your Authorized JavaScript origins field. For this OAuth client{" "}
+          <a
+            href="https://console.cloud.google.com/apis/credentials/oauthclient"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            here.
+          </a>
+        </p>
+      ),
+    },
+    {
+      key: "Callback_URI",
+      label: "Callback URI",
+      url: `${originURL}/auth/google/callback/`,
+      description: (
+        <p>
+          We will auto-generate this. Paste this into your Authorized Redirect URI field. For this OAuth client{" "}
+          <a
+            href="https://console.cloud.google.com/apis/credentials/oauthclient"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            here.
+          </a>
+        </p>
+      ),
+    },
+  ];
+
+  const onSubmit = async (formData: GoogleConfigFormValues) => {
+    const payload: Partial<GoogleConfigFormValues> = { ...formData };
+
+    await updateInstanceConfigurations(payload)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success",
+          message: "Google Configuration Settings updated successfully",
+        });
+        reset();
+      })
+      .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">
+            <div className="pt-2 text-xl font-medium">Configuration</div>
+            {googleFormFields.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 py-4 my-2 bg-custom-background-80/60 rounded-lg">
+              <div className="pt-2 text-xl font-medium">Service provider details</div>
+              {googleCopyFeilds.map((field) => (
+                <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

admin/app/authentication/google/components/index.ts

@@ -0,0 +1,2 @@
+export * from "./root";
+export * from "./google-config-form";

admin/app/authentication/google/components/root.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useInstance } from "@/hooks/store";
+// ui
+import { ToggleSwitch, getButtonStyling } from "@plane/ui";
+// icons
+import { Settings2 } from "lucide-react";
+// types
+import { TInstanceAuthenticationMethodKeys } from "@plane/types";
+// helpers
+import { cn } from "helpers/common.helper";
+
+type Props = {
+  disabled: boolean;
+  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
+};
+
+export const GoogleConfiguration: React.FC<Props> = observer((props) => {
+  const { disabled, updateConfig } = props;
+  // store
+  const { formattedConfig } = useInstance();
+  // derived values
+  const enableGoogleConfig = formattedConfig?.IS_GOOGLE_ENABLED ?? "";
+  const isGoogleConfigured = !!formattedConfig?.GOOGLE_CLIENT_ID && !!formattedConfig?.GOOGLE_CLIENT_SECRET;
+
+  return (
+    <>
+      {isGoogleConfigured ? (
+        <div className="flex items-center gap-4">
+          <Link href="/authentication/google" className={cn(getButtonStyling("link-primary", "md"), "font-medium")}>
+            Edit
+          </Link>
+          <ToggleSwitch
+            value={Boolean(parseInt(enableGoogleConfig))}
+            onChange={() => {
+              Boolean(parseInt(enableGoogleConfig)) === true
+                ? updateConfig("IS_GOOGLE_ENABLED", "0")
+                : updateConfig("IS_GOOGLE_ENABLED", "1");
+            }}
+            size="sm"
+            disabled={disabled}
+          />
+        </div>
+      ) : (
+        <Link
+          href="/authentication/google"
+          className={cn(getButtonStyling("neutral-primary", "sm"), "text-custom-text-300")}
+        >
+          <Settings2 className="h-4 w-4 p-0.5 text-custom-text-300/80" />
+          Configure
+        </Link>
+      )}
+    </>
+  );
+});

admin/app/authentication/google/form.tsx

@@ -1,215 +0,0 @@
-"use client";
-import { FC, useState } from "react";
-import isEmpty from "lodash/isEmpty";
-import Link from "next/link";
-import { useForm } from "react-hook-form";
-// types
-import { IFormattedInstanceConfiguration, TInstanceGoogleAuthenticationConfigurationKeys } from "@plane/types";
-// ui
-import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
-// components
-import {
-  CodeBlock,
-  ConfirmDiscardModal,
-  ControllerInput,
-  CopyField,
-  TControllerInputFormField,
-  TCopyField,
-} from "@/components/common";
-// helpers
-import { API_BASE_URL, cn } from "@/helpers/common.helper";
-// hooks
-import { useInstance } from "@/hooks/store";
-
-type Props = {
-  config: IFormattedInstanceConfiguration;
-};
-
-type GoogleConfigFormValues = Record<TInstanceGoogleAuthenticationConfigurationKeys, string>;
-
-export const InstanceGoogleConfigForm: 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<GoogleConfigFormValues>({
-    defaultValues: {
-      GOOGLE_CLIENT_ID: config["GOOGLE_CLIENT_ID"],
-      GOOGLE_CLIENT_SECRET: config["GOOGLE_CLIENT_SECRET"],
-    },
-  });
-
-  const originURL = !isEmpty(API_BASE_URL) ? API_BASE_URL : typeof window !== "undefined" ? window.location.origin : "";
-
-  const GOOGLE_FORM_FIELDS: TControllerInputFormField[] = [
-    {
-      key: "GOOGLE_CLIENT_ID",
-      type: "text",
-      label: "Client ID",
-      description: (
-        <>
-          Your client ID lives in your Google API Console.{" "}
-          <a
-            tabIndex={-1}
-            href="https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow#creatingcred"
-            target="_blank"
-            className="text-custom-primary-100 hover:underline"
-            rel="noreferrer"
-          >
-            Learn more
-          </a>
-        </>
-      ),
-      placeholder: "840195096245-0p2tstej9j5nc4l8o1ah2dqondscqc1g.apps.googleusercontent.com",
-      error: Boolean(errors.GOOGLE_CLIENT_ID),
-      required: true,
-    },
-    {
-      key: "GOOGLE_CLIENT_SECRET",
-      type: "password",
-      label: "Client secret",
-      description: (
-        <>
-          Your client secret should also be in your Google API Console.{" "}
-          <a
-            tabIndex={-1}
-            href="https://developers.google.com/identity/oauth2/web/guides/get-google-api-clientid"
-            target="_blank"
-            className="text-custom-primary-100 hover:underline"
-            rel="noreferrer"
-          >
-            Learn more
-          </a>
-        </>
-      ),
-      placeholder: "GOCShX-ADp4cI0kPqav1gGCBg5bE02E",
-      error: Boolean(errors.GOOGLE_CLIENT_SECRET),
-      required: true,
-    },
-  ];
-
-  const GOOGLE_SERVICE_DETAILS: TCopyField[] = [
-    {
-      key: "Origin_URL",
-      label: "Origin URL",
-      url: originURL,
-      description: (
-        <p>
-          We will auto-generate this. Paste this into your{" "}
-          <CodeBlock darkerShade>Authorized JavaScript origins</CodeBlock> field. For this OAuth client{" "}
-          <a
-            href="https://console.cloud.google.com/apis/credentials/oauthclient"
-            target="_blank"
-            className="text-custom-primary-100 hover:underline"
-            rel="noreferrer"
-          >
-            here.
-          </a>
-        </p>
-      ),
-    },
-    {
-      key: "Callback_URI",
-      label: "Callback URI",
-      url: `${originURL}/auth/google/callback/`,
-      description: (
-        <p>
-          We will auto-generate this. Paste this into your <CodeBlock darkerShade>Authorized Redirect URI</CodeBlock>{" "}
-          field. For this OAuth client{" "}
-          <a
-            href="https://console.cloud.google.com/apis/credentials/oauthclient"
-            target="_blank"
-            className="text-custom-primary-100 hover:underline"
-            rel="noreferrer"
-          >
-            here.
-          </a>
-        </p>
-      ),
-    },
-  ];
-
-  const onSubmit = async (formData: GoogleConfigFormValues) => {
-    const payload: Partial<GoogleConfigFormValues> = { ...formData };
-
-    await updateInstanceConfigurations(payload)
-      .then((response = []) => {
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Done!",
-          message: "Your Google authentication is configured. You should test it now.",
-        });
-        reset({
-          GOOGLE_CLIENT_ID: response.find((item) => item.key === "GOOGLE_CLIENT_ID")?.value,
-          GOOGLE_CLIENT_SECRET: response.find((item) => item.key === "GOOGLE_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">Google-provided details for Plane</div>
-            {GOOGLE_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 Google</div>
-              {GOOGLE_SERVICE_DETAILS.map((field) => (
-                <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};

admin/app/authentication/google/page.tsx

@@ -1,19 +1,18 @@
 "use client";
 
 import { useState } from "react";
-import { observer } from "mobx-react";
 import Image from "next/image";
+import { observer } from "mobx-react-lite";
 import useSWR from "swr";
 import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
 // components
-import { AuthenticationMethodCard } from "@/components/authentication";
-import { PageHeader } from "@/components/common";
+import { PageHeader } from "@/components/core";
+import { AuthenticationMethodCard } from "../components";
+import { InstanceGoogleConfigForm } from "./components";
 // hooks
 import { useInstance } from "@/hooks/store";
 // icons
 import GoogleLogo from "@/public/logos/google-logo.svg";
-// local components
-import { InstanceGoogleConfigForm } from "./form";
 
 const InstanceGoogleAuthenticationPage = observer(() => {
   // store
@@ -57,9 +56,9 @@ const InstanceGoogleAuthenticationPage = observer(() => {
   };
   return (
     <>
-      <PageHeader title="Google Authentication - Plane Web" />
-      <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">
+      <PageHeader title="Authentication - God Mode" />
+      <div className="relative container mx-auto w-full h-full p-8 py-4 space-y-6 flex flex-col">
+        <div className="border-b border-custom-border-100 pb-3 space-y-1 flex-shrink-0">
           <AuthenticationMethodCard
             name="Google"
             description="Allow members to login or sign up to plane with their Google
@@ -81,7 +80,7 @@ const InstanceGoogleAuthenticationPage = observer(() => {
             withBorder={false}
           />
         </div>
-        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+        <div className="flex-grow overflow-hidden overflow-y-auto">
           {formattedConfig ? (
             <InstanceGoogleConfigForm config={formattedConfig} />
           ) : (

admin/app/authentication/layout.tsx

@@ -1,11 +1,21 @@
+"use client";
+
 import { ReactNode } from "react";
-import { Metadata } from "next";
-import { AdminLayout } from "@/layouts/admin-layout";
+// layouts
+import { AdminLayout } from "@/layouts";
+// lib
+import { AuthWrapper, InstanceWrapper } from "@/lib/wrappers";
 
-export const metadata: Metadata = {
-  title: "Authentication Settings - Plane Web",
-};
-
-export default function AuthenticationLayout({ children }: { children: ReactNode }) {
-  return <AdminLayout>{children}</AdminLayout>;
+interface AuthenticationLayoutProps {
+  children: ReactNode;
 }
+
+const AuthenticationLayout = ({ children }: AuthenticationLayoutProps) => (
+  <InstanceWrapper>
+    <AuthWrapper>
+      <AdminLayout>{children}</AdminLayout>
+    </AuthWrapper>
+  </InstanceWrapper>
+);
+
+export default AuthenticationLayout;

admin/app/authentication/page.tsx

@@ -1,16 +1,34 @@
 "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";
+import { observer } from "mobx-react-lite";
+import { Mails, KeyRound } from "lucide-react";
+import { Loader, setPromiseToast } from "@plane/ui";
 import { TInstanceConfigurationKeys } from "@plane/types";
-import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
-// helpers
-import { cn } from "@/helpers/common.helper";
+// components
+import { AuthenticationMethodCard, EmailCodesConfiguration, PasswordLoginConfiguration } from "./components";
+import { GoogleConfiguration } from "./google/components";
+import { GithubConfiguration } from "./github/components";
+import { PageHeader } from "@/components/core";
 // hooks
 import { useInstance } from "@/hooks/store";
-// plane admin components
-import { AuthenticationModes } from "@/plane-admin/components/authentication";
+// helpers
+import { resolveGeneralTheme } from "@/helpers/common.helper";
+// images
+import GoogleLogo from "@/public/logos/google-logo.svg";
+import githubLightModeImage from "@/public/logos/github-black.png";
+import githubDarkModeImage from "@/public/logos/github-white.png";
+
+type TInstanceAuthenticationMethodCard = {
+  key: string;
+  name: string;
+  description: string;
+  icon: JSX.Element;
+  config: JSX.Element;
+};
 
 const InstanceAuthenticationPage = observer(() => {
   // store
@@ -20,8 +38,8 @@ const InstanceAuthenticationPage = observer(() => {
 
   // state
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
-  // derived values
-  const enableSignUpConfig = formattedConfig?.ENABLE_SIGNUP ?? "";
+  // theme
+  const { resolvedTheme } = useTheme();
 
   const updateConfig = async (key: TInstanceConfigurationKeys, value: string) => {
     setIsSubmitting(true);
@@ -33,7 +51,7 @@ const InstanceAuthenticationPage = observer(() => {
     const updateConfigPromise = updateInstanceConfigurations(payload);
 
     setPromiseToast(updateConfigPromise, {
-      loading: "Saving configuration",
+      loading: "Saving Configuration...",
       success: {
         title: "Success",
         message: () => "Configuration saved successfully",
@@ -54,44 +72,69 @@ const InstanceAuthenticationPage = observer(() => {
       });
   };
 
+  // Authentication methods
+  const authenticationMethodsCard: TInstanceAuthenticationMethodCard[] = [
+    {
+      key: "email-codes",
+      name: "Email codes",
+      description: "Login or sign up using codes sent via emails. You need to have email setup here and enabled.",
+      icon: <Mails className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
+      config: <EmailCodesConfiguration disabled={isSubmitting} updateConfig={updateConfig} />,
+    },
+    {
+      key: "password-login",
+      name: "Password based login",
+      description: "Allow members to create accounts with passwords for emails to sign in.",
+      icon: <KeyRound className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
+      config: <PasswordLoginConfiguration disabled={isSubmitting} updateConfig={updateConfig} />,
+    },
+    {
+      key: "google",
+      name: "Google",
+      description: "Allow members to login or sign up to plane with their Google accounts.",
+      icon: <Image src={GoogleLogo} height={20} width={20} alt="Google Logo" />,
+      config: <GoogleConfiguration disabled={isSubmitting} updateConfig={updateConfig} />,
+    },
+    {
+      key: "github",
+      name: "Github",
+      description: "Allow members to login or sign up to plane with their Github accounts.",
+      icon: (
+        <Image
+          src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
+          height={20}
+          width={20}
+          alt="GitHub Logo"
+        />
+      ),
+      config: <GithubConfiguration disabled={isSubmitting} updateConfig={updateConfig} />,
+    },
+  ];
+
   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">Manage authentication modes for your instance</div>
+      <PageHeader title="Authentication - God Mode" />
+      <div className="relative container mx-auto w-full h-full p-8 py-4 space-y-6 flex flex-col">
+        <div className="border-b border-custom-border-100 pb-3 space-y-1 flex-shrink-0">
+          <div className="text-xl font-medium text-custom-text-100">Manage authentication for your instance</div>
           <div className="text-sm font-normal text-custom-text-300">
             Configure authentication modes for your team and restrict sign ups to be invite only.
           </div>
         </div>
-        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+        <div className="flex-grow overflow-hidden overflow-y-auto">
           {formattedConfig ? (
             <div className="space-y-3">
-              <div className={cn("w-full flex items-center gap-14 rounded")}>
-                <div className="flex grow items-center gap-4">
-                  <div className="grow">
-                    <div className="text-lg font-medium pb-1">Allow anyone to sign up even without an invite</div>
-                    <div className={cn("font-normal leading-5 text-custom-text-300 text-xs")}>
-                      Toggling this off will only let users sign up when they are invited.
-                    </div>
-                  </div>
-                </div>
-                <div className={`shrink-0 pr-4 ${isSubmitting && "opacity-70"}`}>
-                  <div className="flex items-center gap-4">
-                    <ToggleSwitch
-                      value={Boolean(parseInt(enableSignUpConfig))}
-                      onChange={() => {
-                        Boolean(parseInt(enableSignUpConfig)) === true
-                          ? updateConfig("ENABLE_SIGNUP", "0")
-                          : updateConfig("ENABLE_SIGNUP", "1");
-                      }}
-                      size="sm"
-                      disabled={isSubmitting}
-                    />
-                  </div>
-                </div>
-              </div>
-              <div className="text-lg font-medium pt-6">Authentication modes</div>
-              <AuthenticationModes disabled={isSubmitting} updateConfig={updateConfig} />
+              <div className="text-lg font-medium">Authentication modes</div>
+              {authenticationMethodsCard.map((method) => (
+                <AuthenticationMethodCard
+                  key={method.key}
+                  name={method.name}
+                  description={method.description}
+                  icon={method.icon}
+                  config={method.config}
+                  disabled={isSubmitting}
+                />
+              ))}
             </div>
           ) : (
             <Loader className="space-y-10">

admin/app/email/components/email-config-form.tsx

@@ -1,17 +1,14 @@
-"use client";
-
 import React, { FC, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
-// types
-import { IFormattedInstanceConfiguration, TInstanceEmailConfigurationKeys } from "@plane/types";
+// hooks
+import { useInstance } from "@/hooks/store";
 // ui
 import { Button, CustomSelect, TOAST_TYPE, setToast } from "@plane/ui";
 // components
-import { ControllerInput, TControllerInputFormField } from "@/components/common";
-// hooks
-import { useInstance } from "@/hooks/store";
-// local components
+import { ControllerInput, TControllerInputFormField } from "components/common";
 import { SendTestEmailModal } from "./test-email-modal";
+// types
+import { IFormattedInstanceConfiguration, TInstanceEmailConfigurationKeys } from "@plane/types";
 
 type IInstanceEmailForm = {
   config: IFormattedInstanceConfiguration;

admin/app/email/components/index.ts

@@ -0,0 +1,2 @@
+export * from "./email-config-form";
+export * from "./test-email-modal";

admin/app/email/components/test-email-modal.tsx

@@ -3,7 +3,7 @@ import { Dialog, Transition } from "@headlessui/react";
 // ui
 import { Button, Input } from "@plane/ui";
 // services
-import { InstanceService } from "@/services/instance.service";
+import { InstanceService } from "services/instance.service";
 
 type Props = {
   isOpen: boolean;
@@ -51,7 +51,7 @@ export const SendTestEmailModal: FC<Props> = (props) => {
         setSendEmailStep(ESendEmailSteps.SUCCESS);
       })
       .catch((error) => {
-        setError(error?.error || "Failed to send email");
+        setError(error?.message || "Failed to send email");
         setSendEmailStep(ESendEmailSteps.FAILED);
       })
       .finally(() => {

admin/app/email/layout.tsx

@@ -1,15 +1,21 @@
+"use client";
+
 import { ReactNode } from "react";
-import { Metadata } from "next";
-import { AdminLayout } from "@/layouts/admin-layout";
+// layouts
+import { AdminLayout } from "@/layouts";
+// lib
+import { AuthWrapper, InstanceWrapper } from "@/lib/wrappers";
 
 interface EmailLayoutProps {
   children: ReactNode;
 }
 
-export const metadata: Metadata = {
-  title: "Email Settings - Plane Web",
-};
+const EmailLayout = ({ children }: EmailLayoutProps) => (
+  <InstanceWrapper>
+    <AuthWrapper>
+      <AdminLayout>{children}</AdminLayout>
+    </AuthWrapper>
+  </InstanceWrapper>
+);
 
-export default function EmailLayout({ children }: EmailLayoutProps) {
-  return <AdminLayout>{children}</AdminLayout>;
-}
+export default EmailLayout;

admin/app/email/page.tsx

@@ -1,12 +1,13 @@
 "use client";
 
-import { observer } from "mobx-react";
 import useSWR from "swr";
+import { observer } from "mobx-react-lite";
 import { Loader } from "@plane/ui";
+// components
+import { PageHeader } from "@/components/core";
+import { InstanceEmailForm } from "./components";
 // hooks
 import { useInstance } from "@/hooks/store";
-// components
-import { InstanceEmailForm } from "./email-config-form";
 
 const InstanceEmailPage = observer(() => {
   // store
@@ -16,8 +17,9 @@ const InstanceEmailPage = observer(() => {
 
   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">
+      <PageHeader title="Email - God Mode" />
+      <div className="relative container mx-auto w-full h-full p-8 py-4 space-y-6 flex flex-col">
+        <div className="border-b border-custom-border-100 pb-3 space-y-1 flex-shrink-0">
           <div className="text-xl font-medium text-custom-text-100">Secure emails from your own instance</div>
           <div className="text-sm font-normal text-custom-text-300">
             Plane can send useful emails to you and your users from your own instance without talking to the Internet.
@@ -27,7 +29,7 @@ const InstanceEmailPage = observer(() => {
             </div>
           </div>
         </div>
-        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+        <div className="flex-grow overflow-hidden overflow-y-auto">
           {formattedConfig ? (
             <InstanceEmailForm config={formattedConfig} />
           ) : (

admin/app/error.tsx

@@ -1,9 +0,0 @@
-"use client";
-
-export default function RootErrorPage() {
-  return (
-    <div>
-      <p>Something went wrong.</p>
-    </div>
-  );
-}

admin/app/general/components/general-config-form.tsx

@@ -0,0 +1,136 @@
+import { FC } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { Telescope } from "lucide-react";
+import { IInstance, IInstanceAdmin } from "@plane/types";
+import { Button, Input, TOAST_TYPE, ToggleSwitch, setToast } from "@plane/ui";
+// components
+import { ControllerInput } from "components/common";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+export interface IGeneralConfigurationForm {
+  instance: IInstance["instance"];
+  instanceAdmins: IInstanceAdmin[];
+}
+
+export const GeneralConfigurationForm: FC<IGeneralConfigurationForm> = (props) => {
+  const { instance, instanceAdmins } = props;
+  // hooks
+  const { updateInstanceInfo } = useInstance();
+  // form data
+  const {
+    handleSubmit,
+    control,
+    formState: { errors, isSubmitting },
+  } = useForm<Partial<IInstance["instance"]>>({
+    defaultValues: {
+      instance_name: instance.instance_name,
+      is_telemetry_enabled: instance.is_telemetry_enabled,
+    },
+  });
+
+  const onSubmit = async (formData: Partial<IInstance["instance"]>) => {
+    const payload: Partial<IInstance["instance"]> = { ...formData };
+
+    console.log("payload", payload);
+
+    await updateInstanceInfo(payload)
+      .then(() =>
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success",
+          message: "Settings updated successfully",
+        })
+      )
+      .catch((err) => console.error(err));
+  };
+
+  return (
+    <div className="space-y-8">
+      <div className="space-y-3">
+        <div className="text-lg font-medium">Instance details</div>
+        <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-8 md:grid-cols-2 lg:grid-cols-3">
+          <ControllerInput
+            key="instance_name"
+            name="instance_name"
+            control={control}
+            type="text"
+            label="Name of instance"
+            placeholder="Instance name"
+            error={Boolean(errors.instance_name)}
+            required
+          />
+
+          <div className="flex flex-col gap-1">
+            <h4 className="text-sm text-custom-text-300">Email</h4>
+            <Input
+              id="email"
+              name="email"
+              type="email"
+              value={instanceAdmins[0]?.user_detail?.email ?? ""}
+              placeholder="Admin email"
+              className="w-full cursor-not-allowed !text-custom-text-400"
+              disabled
+            />
+          </div>
+
+          <div className="flex flex-col gap-1">
+            <h4 className="text-sm text-custom-text-300">Instance ID</h4>
+            <Input
+              id="instance_id"
+              name="instance_id"
+              type="text"
+              value={instance.instance_id}
+              className="w-full cursor-not-allowed rounded-md font-medium !text-custom-text-400"
+              disabled
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-3">
+        <div className="text-lg font-medium">Telemetry</div>
+        <div className="flex items-center gap-14 px-4 py-3 border border-custom-border-200 rounded">
+          <div className="grow flex items-center gap-4">
+            <div className="shrink-0">
+              <div className="flex items-center justify-center w-10 h-10 bg-custom-background-80 rounded-full">
+                <Telescope className="w-6 h-6 text-custom-text-300/80 p-0.5" />
+              </div>
+            </div>
+            <div className="grow">
+              <div className="text-sm font-medium text-custom-text-100 leading-5">
+                Allow Plane to collect anonymous usage events
+              </div>
+              <div className="text-xs font-normal text-custom-text-300 leading-5">
+                We collect usage events without any PII to analyse and improve Plane.{" "}
+                <a
+                  href="https://docs.plane.so/self-hosting/telemetry"
+                  target="_blank"
+                  className="text-custom-primary-100 hover:underline"
+                  rel="noreferrer"
+                >
+                  Know more.
+                </a>
+              </div>
+            </div>
+          </div>
+          <div className={`shrink-0 ${isSubmitting && "opacity-70"}`}>
+            <Controller
+              control={control}
+              name="is_telemetry_enabled"
+              render={({ field: { value, onChange } }) => (
+                <ToggleSwitch value={value ?? false} onChange={onChange} size="sm" disabled={isSubmitting} />
+              )}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+          {isSubmitting ? "Saving..." : "Save changes"}
+        </Button>
+      </div>
+    </div>
+  );
+};

admin/app/general/components/index.ts

@@ -0,0 +1 @@
+export * from "./general-config-form";

admin/app/general/form.tsx

@@ -1,154 +0,0 @@
-"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";
-// ui
-import { Button, Input, TOAST_TYPE, ToggleSwitch, setToast } from "@plane/ui";
-// components
-import { ControllerInput } from "@/components/common";
-import { useInstance } from "@/hooks/store";
-import { IntercomConfig } from "./intercom";
-// hooks
-
-export interface IGeneralConfigurationForm {
-  instance: IInstance;
-  instanceAdmins: IInstanceAdmin[];
-}
-
-export const GeneralConfigurationForm: FC<IGeneralConfigurationForm> = observer((props) => {
-  const { instance, instanceAdmins } = props;
-  // hooks
-  const { instanceConfigurations, updateInstanceInfo, updateInstanceConfigurations } = useInstance();
-
-  // form data
-  const {
-    handleSubmit,
-    control,
-    watch,
-    formState: { errors, isSubmitting },
-  } = useForm<Partial<IInstance>>({
-    defaultValues: {
-      instance_name: instance?.instance_name,
-      is_telemetry_enabled: instance?.is_telemetry_enabled,
-    },
-  });
-
-  const onSubmit = async (formData: Partial<IInstance>) => {
-    const payload: Partial<IInstance> = { ...formData };
-
-    // update the intercom configuration
-    const isIntercomEnabled =
-      instanceConfigurations?.find((config) => config.key === "IS_INTERCOM_ENABLED")?.value === "1";
-    if (!payload.is_telemetry_enabled && isIntercomEnabled) {
-      try {
-        await updateInstanceConfigurations({ IS_INTERCOM_ENABLED: "0" });
-      } catch (error) {
-        console.error(error);
-      }
-    }
-
-    await updateInstanceInfo(payload)
-      .then(() =>
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Success",
-          message: "Settings updated successfully",
-        })
-      )
-      .catch((err) => console.error(err));
-  };
-
-  return (
-    <div className="space-y-8">
-      <div className="space-y-3">
-        <div className="text-lg font-medium">Instance details</div>
-        <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-8 md:grid-cols-2 lg:grid-cols-3">
-          <ControllerInput
-            key="instance_name"
-            name="instance_name"
-            control={control}
-            type="text"
-            label="Name of instance"
-            placeholder="Instance name"
-            error={Boolean(errors.instance_name)}
-            required
-          />
-
-          <div className="flex flex-col gap-1">
-            <h4 className="text-sm text-custom-text-300">Email</h4>
-            <Input
-              id="email"
-              name="email"
-              type="email"
-              value={instanceAdmins[0]?.user_detail?.email ?? ""}
-              placeholder="Admin email"
-              className="w-full cursor-not-allowed !text-custom-text-400"
-              autoComplete="on"
-              disabled
-            />
-          </div>
-
-          <div className="flex flex-col gap-1">
-            <h4 className="text-sm text-custom-text-300">Instance ID</h4>
-            <Input
-              id="instance_id"
-              name="instance_id"
-              type="text"
-              value={instance.instance_id}
-              className="w-full cursor-not-allowed rounded-md font-medium !text-custom-text-400"
-              disabled
-            />
-          </div>
-        </div>
-      </div>
-
-      <div className="space-y-3">
-        <div className="text-lg font-medium">Chat + telemetry</div>
-        <IntercomConfig isTelemetryEnabled={watch("is_telemetry_enabled") ?? false} />
-        <div className="flex items-center gap-14 px-4 py-3 border border-custom-border-200 rounded">
-          <div className="grow flex items-center gap-4">
-            <div className="shrink-0">
-              <div className="flex items-center justify-center w-10 h-10 bg-custom-background-80 rounded-full">
-                <Telescope className="w-6 h-6 text-custom-text-300/80 p-0.5" />
-              </div>
-            </div>
-            <div className="grow">
-              <div className="text-sm font-medium text-custom-text-100 leading-5">
-                Allow Plane to collect anonymous usage events
-              </div>
-              <div className="text-xs font-normal text-custom-text-300 leading-5">
-                We collect usage events without any PII to analyse and improve Plane.{" "}
-                <a
-                  href="https://docs.plane.so/self-hosting/telemetry"
-                  target="_blank"
-                  className="text-custom-primary-100 hover:underline"
-                  rel="noreferrer"
-                >
-                  Know more.
-                </a>
-              </div>
-            </div>
-          </div>
-          <div className={`shrink-0 ${isSubmitting && "opacity-70"}`}>
-            <Controller
-              control={control}
-              name="is_telemetry_enabled"
-              render={({ field: { value, onChange } }) => (
-                <ToggleSwitch value={value ?? false} onChange={onChange} size="sm" disabled={isSubmitting} />
-              )}
-            />
-          </div>
-        </div>
-      </div>
-
-      <div>
-        <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
-          {isSubmitting ? "Saving..." : "Save changes"}
-        </Button>
-      </div>
-    </div>
-  );
-});

admin/app/general/intercom.tsx

@@ -1,82 +0,0 @@
-"use client";
-
-import { FC, useState } from "react";
-import { observer } from "mobx-react";
-import useSWR from "swr";
-import { MessageSquare } from "lucide-react";
-import { IFormattedInstanceConfiguration } from "@plane/types";
-import { ToggleSwitch } from "@plane/ui";
-// hooks
-import { useInstance } from "@/hooks/store";
-
-type TIntercomConfig = {
-  isTelemetryEnabled: boolean;
-};
-
-export const IntercomConfig: FC<TIntercomConfig> = observer((props) => {
-  const { isTelemetryEnabled } = props;
-  // hooks
-  const { instanceConfigurations, updateInstanceConfigurations, fetchInstanceConfigurations } = useInstance();
-  // states
-  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
-
-  // derived values
-  const isIntercomEnabled = isTelemetryEnabled
-    ? instanceConfigurations
-      ? instanceConfigurations?.find((config) => config.key === "IS_INTERCOM_ENABLED")?.value === "1"
-        ? true
-        : false
-      : undefined
-    : false;
-
-  const { isLoading } = useSWR(isTelemetryEnabled ? "INSTANCE_CONFIGURATIONS" : null, () =>
-    isTelemetryEnabled ? fetchInstanceConfigurations() : null
-  );
-
-  const initialLoader = isLoading && isIntercomEnabled === undefined;
-
-  const submitInstanceConfigurations = async (payload: Partial<IFormattedInstanceConfiguration>) => {
-    try {
-      await updateInstanceConfigurations(payload);
-    } catch (error) {
-      console.error(error);
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  const enableIntercomConfig = () => {
-    submitInstanceConfigurations({ IS_INTERCOM_ENABLED: isIntercomEnabled ? "0" : "1" });
-  };
-
-  return (
-    <>
-      <div className="flex items-center gap-14 px-4 py-3 border border-custom-border-200 rounded">
-        <div className="grow flex items-center gap-4">
-          <div className="shrink-0">
-            <div className="flex items-center justify-center w-10 h-10 bg-custom-background-80 rounded-full">
-              <MessageSquare className="w-6 h-6 text-custom-text-300/80 p-0.5" />
-            </div>
-          </div>
-
-          <div className="grow">
-            <div className="text-sm font-medium text-custom-text-100 leading-5">Talk to Plane</div>
-            <div className="text-xs font-normal text-custom-text-300 leading-5">
-              Let your members chat with us via Intercom or another service. Toggling Telemetry off turns this off
-              automatically.
-            </div>
-          </div>
-
-          <div className="ml-auto">
-            <ToggleSwitch
-              value={isIntercomEnabled ? true : false}
-              onChange={enableIntercomConfig}
-              size="sm"
-              disabled={!isTelemetryEnabled || isSubmitting || initialLoader}
-            />
-          </div>
-        </div>
-      </div>
-    </>
-  );
-});

admin/app/general/layout.tsx

@@ -1,11 +1,21 @@
+"use client";
+
 import { ReactNode } from "react";
-import { Metadata } from "next";
-import { AdminLayout } from "@/layouts/admin-layout";
+// layouts
+import { AdminLayout } from "@/layouts";
+// lib
+import { AuthWrapper, InstanceWrapper } from "@/lib/wrappers";
 
-export const metadata: Metadata = {
-  title: "General Settings - Plane Web",
-};
-
-export default function GeneralLayout({ children }: { children: ReactNode }) {
-  return <AdminLayout>{children}</AdminLayout>;
+interface GeneralLayoutProps {
+  children: ReactNode;
 }
+
+const GeneralLayout = ({ children }: GeneralLayoutProps) => (
+  <InstanceWrapper>
+    <AuthWrapper>
+      <AdminLayout>{children}</AdminLayout>
+    </AuthWrapper>
+  </InstanceWrapper>
+);
+
+export default GeneralLayout;

admin/app/general/page.tsx

@@ -1,31 +1,34 @@
 "use client";
-import { observer } from "mobx-react";
+
+import { observer } from "mobx-react-lite";
+// components
+import { PageHeader } from "@/components/core";
+import { GeneralConfigurationForm } from "./components";
 // hooks
 import { useInstance } from "@/hooks/store";
-// components
-import { GeneralConfigurationForm } from "./form";
 
-function GeneralPage() {
+const GeneralPage = observer(() => {
   const { instance, instanceAdmins } = useInstance();
 
   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">
+      <PageHeader title="General Settings - God Mode" />
+      <div className="relative container mx-auto w-full h-full p-8 py-4 space-y-6 flex flex-col">
+        <div className="border-b border-custom-border-100 pb-3 space-y-1 flex-shrink-0">
           <div className="text-xl font-medium text-custom-text-100">General settings</div>
           <div className="text-sm font-normal text-custom-text-300">
             Change the name of your instance and instance admin e-mail addresses. Enable or disable telemetry in your
             instance.
           </div>
         </div>
-        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
-          {instance && instanceAdmins && (
-            <GeneralConfigurationForm instance={instance} instanceAdmins={instanceAdmins} />
+        <div className="flex-grow overflow-hidden overflow-y-auto">
+          {instance?.instance && instanceAdmins && instanceAdmins?.length > 0 && (
+            <GeneralConfigurationForm instance={instance?.instance} instanceAdmins={instanceAdmins} />
           )}
         </div>
       </div>
     </>
   );
-}
+});
 
-export default observer(GeneralPage);
+export default GeneralPage;

admin/app/globals.css

@@ -45,8 +45,8 @@
     --color-primary-900: 13, 24, 51;
 
     --color-background-100: 255, 255, 255; /* primary bg */
-    --color-background-90: 247, 247, 247; /* secondary bg */
-    --color-background-80: 232, 232, 232; /* tertiary bg */
+    --color-background-90: 250, 250, 250; /* secondary bg */
+    --color-background-80: 245, 245, 245; /* tertiary bg */
 
     --color-text-100: 23, 23, 23; /* primary text */
     --color-text-200: 58, 58, 58; /* secondary text */
@@ -60,39 +60,66 @@
     --color-border-300: 212, 212, 212; /* strong border- 1 */
     --color-border-400: 185, 185, 185; /* strong border- 2 */
 
-    --color-shadow-2xs: 0px 0px 1px 0px rgba(23, 23, 23, 0.06), 0px 1px 2px 0px rgba(23, 23, 23, 0.06),
+    --color-shadow-2xs: 0px 0px 1px 0px rgba(23, 23, 23, 0.06),
+      0px 1px 2px 0px rgba(23, 23, 23, 0.06),
       0px 1px 2px 0px rgba(23, 23, 23, 0.14);
-    --color-shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(16, 24, 40, 0.12),
+    --color-shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.16),
+      0px 2px 4px 0px rgba(16, 24, 40, 0.12),
       0px 1px 8px -1px rgba(16, 24, 40, 0.1);
-    --color-shadow-sm: 0px 1px 4px 0px rgba(0, 0, 0, 0.01), 0px 4px 8px 0px rgba(0, 0, 0, 0.02),
-      0px 1px 12px 0px rgba(0, 0, 0, 0.12);
-    --color-shadow-rg: 0px 3px 6px 0px rgba(0, 0, 0, 0.1), 0px 4px 4px 0px rgba(16, 24, 40, 0.08),
+    --color-shadow-sm: 0px 1px 4px 0px rgba(0, 0, 0, 0.01),
+      0px 4px 8px 0px rgba(0, 0, 0, 0.02), 0px 1px 12px 0px rgba(0, 0, 0, 0.12);
+    --color-shadow-rg: 0px 3px 6px 0px rgba(0, 0, 0, 0.1),
+      0px 4px 4px 0px rgba(16, 24, 40, 0.08),
       0px 1px 12px 0px rgba(16, 24, 40, 0.04);
-    --color-shadow-md: 0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12),
+    --color-shadow-md: 0px 4px 8px 0px rgba(0, 0, 0, 0.12),
+      0px 6px 12px 0px rgba(16, 24, 40, 0.12),
       0px 1px 16px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-lg: 0px 6px 12px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.12),
+    --color-shadow-lg: 0px 6px 12px 0px rgba(0, 0, 0, 0.12),
+      0px 8px 16px 0px rgba(0, 0, 0, 0.12),
       0px 1px 24px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.16), 0px 0px 24px 0px rgba(16, 24, 40, 0.16),
+    --color-shadow-xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.16),
+      0px 0px 24px 0px rgba(16, 24, 40, 0.16),
       0px 0px 52px 0px rgba(16, 24, 40, 0.16);
-    --color-shadow-2xl: 0px 8px 16px 0px rgba(0, 0, 0, 0.12), 0px 12px 24px 0px rgba(16, 24, 40, 0.12),
+    --color-shadow-2xl: 0px 8px 16px 0px rgba(0, 0, 0, 0.12),
+      0px 12px 24px 0px rgba(16, 24, 40, 0.12),
       0px 1px 32px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-3xl: 0px 12px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 32px 0px rgba(0, 0, 0, 0.12),
+    --color-shadow-3xl: 0px 12px 24px 0px rgba(0, 0, 0, 0.12),
+      0px 16px 32px 0px rgba(0, 0, 0, 0.12),
       0px 1px 48px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-4xl: 0px 8px 40px 0px rgba(0, 0, 61, 0.05), 0px 12px 32px -16px rgba(0, 0, 0, 0.05);
+    --color-shadow-4xl: 0px 8px 40px 0px rgba(0, 0, 61, 0.05),
+      0px 12px 32px -16px rgba(0, 0, 0, 0.05);
 
-    --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
-    --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
-    --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
+    --color-sidebar-background-100: var(
+      --color-background-100
+    ); /* primary sidebar bg */
+    --color-sidebar-background-90: var(
+      --color-background-90
+    ); /* secondary sidebar bg */
+    --color-sidebar-background-80: var(
+      --color-background-80
+    ); /* tertiary sidebar bg */
 
     --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
-    --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
+    --color-sidebar-text-200: var(
+      --color-text-200
+    ); /* secondary sidebar text */
     --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
-    --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
+    --color-sidebar-text-400: var(
+      --color-text-400
+    ); /* sidebar placeholder text */
 
-    --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
-    --color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
-    --color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
-    --color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
+    --color-sidebar-border-100: var(
+      --color-border-100
+    ); /* subtle sidebar border= 1 */
+    --color-sidebar-border-200: var(
+      --color-border-100
+    ); /* subtle sidebar border- 2 */
+    --color-sidebar-border-300: var(
+      --color-border-100
+    ); /* strong sidebar border- 1 */
+    --color-sidebar-border-400: var(
+      --color-border-100
+    ); /* strong sidebar border- 2 */
 
     --color-sidebar-shadow-2xs: var(--color-shadow-2xs);
     --color-sidebar-shadow-xs: var(--color-shadow-xs);
@@ -111,8 +138,8 @@
     color-scheme: light !important;
 
     --color-background-100: 255, 255, 255; /* primary bg */
-    --color-background-90: 247, 247, 247; /* secondary bg */
-    --color-background-80: 232, 232, 232; /* tertiary bg */
+    --color-background-90: 250, 250, 250; /* secondary bg */
+    --color-background-80: 245, 245, 245; /* tertiary bg */
   }
 
   [data-theme="light"] {
@@ -129,10 +156,26 @@
     --color-border-400: 185, 185, 185; /* strong border- 2 */
 
     /* onboarding colors */
-    --gradient-onboarding-100: linear-gradient(106deg, #f2f6ff 29.8%, #e1eaff 99.34%);
-    --gradient-onboarding-200: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%);
-    --gradient-onboarding-300: linear-gradient(164deg, #fff 4.25%, rgba(255, 255, 255, 0.06) 93.5%);
-    --gradient-onboarding-400: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%);
+    --gradient-onboarding-100: linear-gradient(
+      106deg,
+      #f2f6ff 29.8%,
+      #e1eaff 99.34%
+    );
+    --gradient-onboarding-200: linear-gradient(
+      129deg,
+      rgba(255, 255, 255, 0) -22.23%,
+      rgba(255, 255, 255, 0.8) 62.98%
+    );
+    --gradient-onboarding-300: linear-gradient(
+      164deg,
+      #fff 4.25%,
+      rgba(255, 255, 255, 0.06) 93.5%
+    );
+    --gradient-onboarding-400: linear-gradient(
+      129deg,
+      rgba(255, 255, 255, 0) -22.23%,
+      rgba(255, 255, 255, 0.8) 62.98%
+    );
 
     --color-onboarding-text-100: 23, 23, 23;
     --color-onboarding-text-200: 58, 58, 58;
@@ -190,19 +233,28 @@
   [data-theme="dark-contrast"] {
     color-scheme: dark !important;
 
-    --color-background-100: 25, 25, 25; /* primary bg */
-    --color-background-90: 32, 32, 32; /* secondary bg */
-    --color-background-80: 44, 44, 44; /* tertiary bg */
+    --color-background-100: 7, 7, 7; /* primary bg */
+    --color-background-90: 11, 11, 11; /* secondary bg */
+    --color-background-80: 23, 23, 23; /* tertiary bg */
 
-    --color-shadow-2xs: 0px 0px 1px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-xs: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-sm: 0px 0px 4px 0px rgba(0, 0, 0, 0.2), 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-rg: 0px 0px 6px 0px rgba(0, 0, 0, 0.2), 0px 4px 6px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-md: 0px 2px 8px 0px rgba(0, 0, 0, 0.2), 0px 4px 8px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-lg: 0px 4px 12px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.55);
-    --color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25), 0px 6px 10px 0px rgba(0, 0, 0, 0.55);
-    --color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25), 0px 8px 12px 0px rgba(0, 0, 0, 0.6);
-    --color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3), 0px 12px 40px 0px rgba(0, 0, 0, 0.65);
+    --color-shadow-2xs: 0px 0px 1px 0px rgba(0, 0, 0, 0.15),
+      0px 1px 3px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-xs: 0px 0px 2px 0px rgba(0, 0, 0, 0.2),
+      0px 2px 4px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-sm: 0px 0px 4px 0px rgba(0, 0, 0, 0.2),
+      0px 2px 6px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-rg: 0px 0px 6px 0px rgba(0, 0, 0, 0.2),
+      0px 4px 6px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-md: 0px 2px 8px 0px rgba(0, 0, 0, 0.2),
+      0px 4px 8px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-lg: 0px 4px 12px 0px rgba(0, 0, 0, 0.25),
+      0px 4px 10px 0px rgba(0, 0, 0, 0.55);
+    --color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25),
+      0px 6px 10px 0px rgba(0, 0, 0, 0.55);
+    --color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25),
+      0px 8px 12px 0px rgba(0, 0, 0, 0.6);
+    --color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3),
+      0px 12px 40px 0px rgba(0, 0, 0, 0.65);
   }
 
   [data-theme="dark"] {
@@ -219,9 +271,21 @@
     --color-border-400: 58, 58, 58; /* strong border- 2 */
 
     /* onboarding colors */
-    --gradient-onboarding-100: linear-gradient(106deg, #18191b 25.17%, #18191b 99.34%);
-    --gradient-onboarding-200: linear-gradient(129deg, rgba(47, 49, 53, 0.8) -22.23%, rgba(33, 34, 37, 0.8) 62.98%);
-    --gradient-onboarding-300: linear-gradient(167deg, rgba(47, 49, 53, 0.45) 19.22%, #212225 98.48%);
+    --gradient-onboarding-100: linear-gradient(
+      106deg,
+      #18191b 25.17%,
+      #18191b 99.34%
+    );
+    --gradient-onboarding-200: linear-gradient(
+      129deg,
+      rgba(47, 49, 53, 0.8) -22.23%,
+      rgba(33, 34, 37, 0.8) 62.98%
+    );
+    --gradient-onboarding-300: linear-gradient(
+      167deg,
+      rgba(47, 49, 53, 0.45) 19.22%,
+      #212225 98.48%
+    );
 
     --color-onboarding-text-100: 237, 238, 240;
     --color-onboarding-text-200: 176, 180, 187;
@@ -298,19 +362,37 @@
     --color-primary-800: 19, 35, 76;
     --color-primary-900: 13, 24, 51;
 
-    --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
-    --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
-    --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
+    --color-sidebar-background-100: var(
+      --color-background-100
+    ); /* primary sidebar bg */
+    --color-sidebar-background-90: var(
+      --color-background-90
+    ); /* secondary sidebar bg */
+    --color-sidebar-background-80: var(
+      --color-background-80
+    ); /* tertiary sidebar bg */
 
     --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
-    --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
+    --color-sidebar-text-200: var(
+      --color-text-200
+    ); /* secondary sidebar text */
     --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
-    --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
+    --color-sidebar-text-400: var(
+      --color-text-400
+    ); /* sidebar placeholder text */
 
-    --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
-    --color-sidebar-border-200: var(--color-border-200); /* subtle sidebar border- 2 */
-    --color-sidebar-border-300: var(--color-border-300); /* strong sidebar border- 1 */
-    --color-sidebar-border-400: var(--color-border-400); /* strong sidebar border- 2 */
+    --color-sidebar-border-100: var(
+      --color-border-100
+    ); /* subtle sidebar border= 1 */
+    --color-sidebar-border-200: var(
+      --color-border-200
+    ); /* subtle sidebar border- 2 */
+    --color-sidebar-border-300: var(
+      --color-border-300
+    ); /* strong sidebar border- 1 */
+    --color-sidebar-border-400: var(
+      --color-border-400
+    ); /* strong sidebar border- 2 */
   }
 }
 
@@ -332,90 +414,42 @@ body {
 }
 
 /* scrollbar style */
-@-moz-document url-prefix() {
-  * {
-    scrollbar-width: none;
-  }
-  .vertical-scrollbar,
-  .horizontal-scrollbar {
-    scrollbar-width: initial;
-    scrollbar-color: rgba(96, 100, 108, 0.1) transparent;
-  }
-  .vertical-scrollbar:hover,
-  .horizontal-scrollbar:hover {
-    scrollbar-color: rgba(96, 100, 108, 0.25) transparent;
-  }
-  .vertical-scrollbar:active,
-  .horizontal-scrollbar:active {
-    scrollbar-color: rgba(96, 100, 108, 0.7) transparent;
-  }
+::-webkit-scrollbar {
+  display: none;
 }
 
-.vertical-scrollbar {
-  overflow-y: auto;
+.horizontal-scroll-enable {
+  overflow-x: scroll;
 }
-.horizontal-scrollbar {
-  overflow-x: auto;
-}
-.vertical-scrollbar::-webkit-scrollbar,
-.horizontal-scrollbar::-webkit-scrollbar {
+
+.horizontal-scroll-enable::-webkit-scrollbar {
   display: block;
-}
-.vertical-scrollbar::-webkit-scrollbar-track,
-.horizontal-scrollbar::-webkit-scrollbar-track {
-  background-color: transparent;
-  border-radius: 9999px;
-}
-.vertical-scrollbar::-webkit-scrollbar-thumb,
-.horizontal-scrollbar::-webkit-scrollbar-thumb {
-  background-clip: padding-box;
-  background-color: rgba(96, 100, 108, 0.1);
-  border-radius: 9999px;
-}
-.vertical-scrollbar:hover::-webkit-scrollbar-thumb,
-.horizontal-scrollbar:hover::-webkit-scrollbar-thumb {
-  background-color: rgba(96, 100, 108, 0.25);
-}
-.vertical-scrollbar::-webkit-scrollbar-thumb:hover,
-.horizontal-scrollbar::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(96, 100, 108, 0.5);
-}
-.vertical-scrollbar::-webkit-scrollbar-thumb:active,
-.horizontal-scrollbar::-webkit-scrollbar-thumb:active {
-  background-color: rgba(96, 100, 108, 0.7);
-}
-.vertical-scrollbar::-webkit-scrollbar-corner,
-.horizontal-scrollbar::-webkit-scrollbar-corner {
-  background-color: transparent;
-}
-.vertical-scrollbar-margin-top-md::-webkit-scrollbar-track {
-  margin-top: 44px;
+  height: 7px;
+  width: 0;
 }
 
-/* scrollbar sm size */
-.scrollbar-sm::-webkit-scrollbar {
-  height: 12px;
-  width: 12px;
+.horizontal-scroll-enable::-webkit-scrollbar-track {
+  height: 7px;
+  background-color: rgba(var(--color-background-100));
 }
-.scrollbar-sm::-webkit-scrollbar-thumb {
-  border: 3px solid rgba(0, 0, 0, 0);
-}
-/* scrollbar md size */
-.scrollbar-md::-webkit-scrollbar {
-  height: 14px;
-  width: 14px;
-}
-.scrollbar-md::-webkit-scrollbar-thumb {
-  border: 3px solid rgba(0, 0, 0, 0);
-}
-/* scrollbar lg size */
 
-.scrollbar-lg::-webkit-scrollbar {
-  height: 16px;
-  width: 16px;
+.horizontal-scroll-enable::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background-color: rgba(var(--color-scrollbar));
 }
-.scrollbar-lg::-webkit-scrollbar-thumb {
-  border: 4px solid rgba(0, 0, 0, 0);
+
+.vertical-scroll-enable::-webkit-scrollbar {
+  display: block;
+  width: 5px;
+}
+
+.vertical-scroll-enable::-webkit-scrollbar-track {
+  width: 5px;
+}
+
+.vertical-scroll-enable::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background-color: rgba(var(--color-background-90));
 }
 /* end scrollbar style */
 

admin/app/image/components/image-config-form.tsx

@@ -0,0 +1,79 @@
+import { FC } from "react";
+import { useForm } from "react-hook-form";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+import { IFormattedInstanceConfiguration, TInstanceImageConfigurationKeys } from "@plane/types";
+// components
+import { ControllerInput } from "components/common";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type IInstanceImageConfigForm = {
+  config: IFormattedInstanceConfiguration;
+};
+
+type ImageConfigFormValues = Record<TInstanceImageConfigurationKeys, string>;
+
+export const InstanceImageConfigForm: FC<IInstanceImageConfigForm> = (props) => {
+  const { config } = props;
+  // store hooks
+  const { updateInstanceConfigurations } = useInstance();
+  // form data
+  const {
+    handleSubmit,
+    control,
+    formState: { errors, isSubmitting },
+  } = useForm<ImageConfigFormValues>({
+    defaultValues: {
+      UNSPLASH_ACCESS_KEY: config["UNSPLASH_ACCESS_KEY"],
+    },
+  });
+
+  const onSubmit = async (formData: ImageConfigFormValues) => {
+    const payload: Partial<ImageConfigFormValues> = { ...formData };
+
+    await updateInstanceConfigurations(payload)
+      .then(() =>
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success",
+          message: "Image Configuration Settings updated successfully",
+        })
+      )
+      .catch((err) => console.error(err));
+  };
+
+  return (
+    <div className="space-y-8">
+      <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-x-16 gap-y-8 lg:grid-cols-2">
+        <ControllerInput
+          control={control}
+          type="password"
+          name="UNSPLASH_ACCESS_KEY"
+          label="Access key from your Unsplash account"
+          description={
+            <>
+              You will find your access key in your Unsplash developer console.&nbsp;
+              <a
+                href="https://unsplash.com/documentation#creating-a-developer-account"
+                target="_blank"
+                className="text-custom-primary-100 hover:underline"
+                rel="noreferrer"
+              >
+                Learn more.
+              </a>
+            </>
+          }
+          placeholder="oXgq-sdfadsaeweqasdfasdf3234234rassd"
+          error={Boolean(errors.UNSPLASH_ACCESS_KEY)}
+          required
+        />
+      </div>
+
+      <div>
+        <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+          {isSubmitting ? "Saving..." : "Save changes"}
+        </Button>
+      </div>
+    </div>
+  );
+};

admin/app/image/components/index.ts

@@ -0,0 +1 @@
+export * from "./image-config-form";

admin/app/image/form.tsx

@@ -1,80 +0,0 @@
-"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";
-// components
-import { ControllerInput } from "@/components/common";
-// hooks
-import { useInstance } from "@/hooks/store";
-
-type IInstanceImageConfigForm = {
-  config: IFormattedInstanceConfiguration;
-};
-
-type ImageConfigFormValues = Record<TInstanceImageConfigurationKeys, string>;
-
-export const InstanceImageConfigForm: FC<IInstanceImageConfigForm> = (props) => {
-  const { config } = props;
-  // store hooks
-  const { updateInstanceConfigurations } = useInstance();
-  // form data
-  const {
-    handleSubmit,
-    control,
-    formState: { errors, isSubmitting },
-  } = useForm<ImageConfigFormValues>({
-    defaultValues: {
-      UNSPLASH_ACCESS_KEY: config["UNSPLASH_ACCESS_KEY"],
-    },
-  });
-
-  const onSubmit = async (formData: ImageConfigFormValues) => {
-    const payload: Partial<ImageConfigFormValues> = { ...formData };
-
-    await updateInstanceConfigurations(payload)
-      .then(() =>
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Success",
-          message: "Image Configuration Settings updated successfully",
-        })
-      )
-      .catch((err) => console.error(err));
-  };
-
-  return (
-    <div className="space-y-8">
-      <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-x-16 gap-y-8 lg:grid-cols-2">
-        <ControllerInput
-          control={control}
-          type="password"
-          name="UNSPLASH_ACCESS_KEY"
-          label="Access key from your Unsplash account"
-          description={
-            <>
-              You will find your access key in your Unsplash developer console.&nbsp;
-              <a
-                href="https://unsplash.com/documentation#creating-a-developer-account"
-                target="_blank"
-                className="text-custom-primary-100 hover:underline"
-                rel="noreferrer"
-              >
-                Learn more.
-              </a>
-            </>
-          }
-          placeholder="oXgq-sdfadsaeweqasdfasdf3234234rassd"
-          error={Boolean(errors.UNSPLASH_ACCESS_KEY)}
-          required
-        />
-      </div>
-
-      <div>
-        <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
-          {isSubmitting ? "Saving..." : "Save changes"}
-        </Button>
-      </div>
-    </div>
-  );
-};

admin/app/image/layout.tsx

@@ -1,15 +1,21 @@
+"use client";
+
 import { ReactNode } from "react";
-import { Metadata } from "next";
-import { AdminLayout } from "@/layouts/admin-layout";
+// layouts
+import { AdminLayout } from "@/layouts";
+// lib
+import { AuthWrapper, InstanceWrapper } from "@/lib/wrappers";
 
 interface ImageLayoutProps {
   children: ReactNode;
 }
 
-export const metadata: Metadata = {
-  title: "Images Settings - Plane Web",
-};
+const ImageLayout = ({ children }: ImageLayoutProps) => (
+  <InstanceWrapper>
+    <AuthWrapper>
+      <AdminLayout>{children}</AdminLayout>
+    </AuthWrapper>
+  </InstanceWrapper>
+);
 
-export default function ImageLayout({ children }: ImageLayoutProps) {
-  return <AdminLayout>{children}</AdminLayout>;
-}
+export default ImageLayout;

admin/app/image/page.tsx

@@ -1,12 +1,13 @@
 "use client";
 
-import { observer } from "mobx-react";
 import useSWR from "swr";
+import { observer } from "mobx-react-lite";
 import { Loader } from "@plane/ui";
+// components
+import { PageHeader } from "@/components/core";
+import { InstanceImageConfigForm } from "./components";
 // hooks
 import { useInstance } from "@/hooks/store";
-// local
-import { InstanceImageConfigForm } from "./form";
 
 const InstanceImagePage = observer(() => {
   // store
@@ -16,14 +17,15 @@ const InstanceImagePage = observer(() => {
 
   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">
+      <PageHeader title="Image - God Mode" />
+      <div className="relative container mx-auto w-full h-full p-8 py-4 space-y-6 flex flex-col">
+        <div className="border-b border-custom-border-100 pb-3 space-y-1 flex-shrink-0">
           <div className="text-xl font-medium text-custom-text-100">Third-party image libraries</div>
           <div className="text-sm font-normal text-custom-text-300">
             Let your users search and choose images from third-party libraries
           </div>
         </div>
-        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+        <div className="flex-grow overflow-hidden overflow-y-auto">
           {formattedConfig ? (
             <InstanceImageConfigForm config={formattedConfig} />
           ) : (

admin/app/layout.tsx

@@ -1,48 +1,46 @@
 "use client";
 
 import { ReactNode } from "react";
-import { ThemeProvider, useTheme } from "next-themes";
-import { SWRConfig } from "swr";
-// ui
-import { Toast } from "@plane/ui";
-// constants
-import { SWR_CONFIG } from "@/constants/swr-config";
-// helpers
-import { ASSET_PREFIX, resolveGeneralTheme } from "@/helpers/common.helper";
+import { ThemeProvider } from "next-themes";
 // lib
-import { InstanceProvider } from "@/lib/instance-provider";
-import { StoreProvider } from "@/lib/store-provider";
-import { UserProvider } from "@/lib/user-provider";
+import { StoreProvider } from "@/lib/store-context";
+import { AppWrapper } from "@/lib/wrappers";
+// constants
+import { SITE_NAME, SITE_DESCRIPTION, SITE_URL, TWITTER_USER_NAME, SITE_KEYWORDS, SITE_TITLE } from "@/constants/seo";
+// helpers
+import { ASSET_PREFIX } from "@/helpers/common.helper";
 // styles
 import "./globals.css";
 
-const ToastWithTheme = () => {
-  const { resolvedTheme } = useTheme();
-  return <Toast theme={resolveGeneralTheme(resolvedTheme)} />;
-};
-
-export default function RootLayout({ children }: { children: ReactNode }) {
-  return (
-    <html lang="en">
-      <head>
-        <link rel="apple-touch-icon" sizes="180x180" href={`${ASSET_PREFIX}/favicon/apple-touch-icon.png`} />
-        <link rel="icon" type="image/png" sizes="32x32" href={`${ASSET_PREFIX}/favicon/favicon-32x32.png`} />
-        <link rel="icon" type="image/png" sizes="16x16" href={`${ASSET_PREFIX}/favicon/favicon-16x16.png`} />
-        <link rel="manifest" href={`${ASSET_PREFIX}/site.webmanifest.json`} />
-        <link rel="shortcut icon" href={`${ASSET_PREFIX}/favicon/favicon.ico`} />
-      </head>
-      <body className={`antialiased`}>
-        <ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>
-          <ToastWithTheme />
-          <SWRConfig value={SWR_CONFIG}>
-            <StoreProvider>
-              <InstanceProvider>
-                <UserProvider>{children}</UserProvider>
-              </InstanceProvider>
-            </StoreProvider>
-          </SWRConfig>
-        </ThemeProvider>
-      </body>
-    </html>
-  );
+interface RootLayoutProps {
+  children: ReactNode;
 }
+
+const RootLayout = ({ children, ...pageProps }: RootLayoutProps) => (
+  <html lang="en">
+    <head>
+      <title>{SITE_TITLE}</title>
+      <meta property="og:site_name" content={SITE_NAME} />
+      <meta property="og:title" content={SITE_TITLE} />
+      <meta property="og:url" content={SITE_URL} />
+      <meta name="description" content={SITE_DESCRIPTION} />
+      <meta property="og:description" content={SITE_DESCRIPTION} />
+      <meta name="keywords" content={SITE_KEYWORDS} />
+      <meta name="twitter:site" content={`@${TWITTER_USER_NAME}`} />
+      <link rel="apple-touch-icon" sizes="180x180" href={`${ASSET_PREFIX}/favicon/apple-touch-icon.png`} />
+      <link rel="icon" type="image/png" sizes="32x32" href={`${ASSET_PREFIX}/favicon/favicon-32x32.png`} />
+      <link rel="icon" type="image/png" sizes="16x16" href={`${ASSET_PREFIX}/favicon/favicon-16x16.png`} />
+      <link rel="manifest" href={`${ASSET_PREFIX}/site.webmanifest.json`} />
+      <link rel="shortcut icon" href={`${ASSET_PREFIX}/favicon/favicon.ico`} />
+    </head>
+    <body className={`antialiased`}>
+      <StoreProvider {...pageProps}>
+        <ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>
+          <AppWrapper>{children}</AppWrapper>
+        </ThemeProvider>
+      </StoreProvider>
+    </body>
+  </html>
+);
+
+export default RootLayout;

admin/app/page.tsx

@@ -1,30 +1,26 @@
-import { Metadata } from "next";
-// components
-import { InstanceSignInForm } from "@/components/login";
+"use client";
+
 // layouts
-import { DefaultLayout } from "@/layouts/default-layout";
+import { DefaultLayout } from "@/layouts";
+// components
+import { PageHeader } from "@/components/core";
+import { InstanceSignInForm } from "@/components/login";
+// lib
+import { AuthWrapper, InstanceWrapper } from "@/lib/wrappers";
+// helpers
+import { EAuthenticationPageType, EInstancePageType } from "@/helpers";
 
-export const metadata: Metadata = {
-  title: "Plane | Simple, extensible, open-source project management tool.",
-  description:
-    "Open-source project management tool to manage issues, sprints, and product roadmaps with peace of mind.",
-  openGraph: {
-    title: "Plane | Simple, extensible, open-source project management tool.",
-    description:
-      "Open-source project management tool to manage issues, sprints, and product roadmaps with peace of mind.",
-    url: "https://plane.so/",
-  },
-  keywords:
-    "software development, customer feedback, software, accelerate, code management, release management, project management, issue tracking, agile, scrum, kanban, collaboration",
-  twitter: {
-    site: "@planepowers",
-  },
-};
+const LoginPage = () => (
+  <>
+    <PageHeader title="Login - God Mode" />
+    <InstanceWrapper pageType={EInstancePageType.POST_SETUP}>
+      <AuthWrapper authType={EAuthenticationPageType.NOT_AUTHENTICATED}>
+        <DefaultLayout>
+          <InstanceSignInForm />
+        </DefaultLayout>
+      </AuthWrapper>
+    </InstanceWrapper>
+  </>
+);
 
-export default async function LoginPage() {
-  return (
-    <DefaultLayout>
-      <InstanceSignInForm />
-    </DefaultLayout>
-  );
-}
+export default LoginPage;

admin/app/setup/components/index.ts

@@ -0,0 +1 @@
+export * from "./sign-up-form";

admin/app/setup/components/sign-up-form.tsx

@@ -0,0 +1,331 @@
+"use client";
+
+import { FC, useEffect, useMemo, useState } from "react";
+import { useSearchParams } from "next/navigation";
+// services
+import { AuthService } from "@/services/auth.service";
+// ui
+import { Button, Checkbox, Input, Spinner } from "@plane/ui";
+// components
+import { Banner, PasswordStrengthMeter } from "components/common";
+// icons
+import { Eye, EyeOff } from "lucide-react";
+// helpers
+import { API_BASE_URL } from "@/helpers/common.helper";
+import { getPasswordStrength } from "@/helpers/password.helper";
+
+// service initialization
+const authService = new AuthService();
+
+// error codes
+enum EErrorCodes {
+  INSTANCE_NOT_CONFIGURED = "INSTANCE_NOT_CONFIGURED",
+  ADMIN_ALREADY_EXIST = "ADMIN_ALREADY_EXIST",
+  REQUIRED_EMAIL_PASSWORD_FIRST_NAME = "REQUIRED_EMAIL_PASSWORD_FIRST_NAME",
+  INVALID_EMAIL = "INVALID_EMAIL",
+  INVALID_PASSWORD = "INVALID_PASSWORD",
+  USER_ALREADY_EXISTS = "USER_ALREADY_EXISTS",
+}
+
+type TError = {
+  type: EErrorCodes | undefined;
+  message: string | undefined;
+};
+
+// form data
+type TFormData = {
+  first_name: string;
+  last_name: string;
+  email: string;
+  company_name: string;
+  password: string;
+  confirm_password?: string;
+  is_telemetry_enabled: boolean;
+};
+
+const defaultFromData: TFormData = {
+  first_name: "",
+  last_name: "",
+  email: "",
+  company_name: "",
+  password: "",
+  is_telemetry_enabled: true,
+};
+
+export const InstanceSignUpForm: FC = (props) => {
+  const {} = props;
+  // search params
+  const searchParams = useSearchParams();
+  const firstNameParam = searchParams.get("first_name") || undefined;
+  const lastNameParam = searchParams.get("last_name") || undefined;
+  const companyParam = searchParams.get("company") || undefined;
+  const emailParam = searchParams.get("email") || undefined;
+  const isTelemetryEnabledParam = (searchParams.get("is_telemetry_enabled") === "True" ? true : false) || true;
+  const errorCode = searchParams.get("error_code") || undefined;
+  const errorMessage = searchParams.get("error_message") || undefined;
+  // state
+  const [showPassword, setShowPassword] = useState(false);
+  const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
+  const [formData, setFormData] = useState<TFormData>(defaultFromData);
+  const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleFormChange = (key: keyof TFormData, value: string | boolean) =>
+    setFormData((prev) => ({ ...prev, [key]: value }));
+
+  useEffect(() => {
+    if (csrfToken === undefined)
+      authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
+  }, [csrfToken]);
+
+  useEffect(() => {
+    if (firstNameParam) setFormData((prev) => ({ ...prev, first_name: firstNameParam }));
+    if (lastNameParam) setFormData((prev) => ({ ...prev, last_name: lastNameParam }));
+    if (companyParam) setFormData((prev) => ({ ...prev, company_name: companyParam }));
+    if (emailParam) setFormData((prev) => ({ ...prev, email: emailParam }));
+    if (isTelemetryEnabledParam) setFormData((prev) => ({ ...prev, is_telemetry_enabled: isTelemetryEnabledParam }));
+  }, [firstNameParam, lastNameParam, companyParam, emailParam, isTelemetryEnabledParam]);
+
+  // derived values
+  const errorData: TError = useMemo(() => {
+    if (errorCode && errorMessage) {
+      switch (errorCode) {
+        case EErrorCodes.INSTANCE_NOT_CONFIGURED:
+          return { type: EErrorCodes.INSTANCE_NOT_CONFIGURED, message: errorMessage };
+        case EErrorCodes.ADMIN_ALREADY_EXIST:
+          return { type: EErrorCodes.ADMIN_ALREADY_EXIST, message: errorMessage };
+        case EErrorCodes.REQUIRED_EMAIL_PASSWORD_FIRST_NAME:
+          return { type: EErrorCodes.REQUIRED_EMAIL_PASSWORD_FIRST_NAME, message: errorMessage };
+        case EErrorCodes.INVALID_EMAIL:
+          return { type: EErrorCodes.INVALID_EMAIL, message: errorMessage };
+        case EErrorCodes.INVALID_PASSWORD:
+          return { type: EErrorCodes.INVALID_PASSWORD, message: errorMessage };
+        case EErrorCodes.USER_ALREADY_EXISTS:
+          return { type: EErrorCodes.USER_ALREADY_EXISTS, message: errorMessage };
+        default:
+          return { type: undefined, message: undefined };
+      }
+    } else return { type: undefined, message: undefined };
+  }, [errorCode, errorMessage]);
+
+  const isButtonDisabled = useMemo(
+    () =>
+      !isSubmitting &&
+      formData.first_name &&
+      formData.email &&
+      formData.password &&
+      getPasswordStrength(formData.password) >= 3 &&
+      formData.password === formData.confirm_password
+        ? false
+        : true,
+    [formData.confirm_password, formData.email, formData.first_name, formData.password, isSubmitting]
+  );
+
+  return (
+    <div className="relative w-full h-full overflow-hidden container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 flex flex-col justify-center items-center">
+      <div className="relative flex flex-col space-y-6">
+        <div className="text-center space-y-1">
+          <h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">
+            Setup your Plane Instance
+          </h3>
+          <p className="font-medium text-onboarding-text-400">
+            Post setup you will be able to manage this Plane instance.
+          </p>
+        </div>
+
+        {errorData.type &&
+          errorData?.message &&
+          ![EErrorCodes.INVALID_EMAIL, EErrorCodes.INVALID_PASSWORD].includes(errorData.type) && (
+            <Banner type="error" message={errorData?.message} />
+          )}
+
+        <form
+          className="space-y-4"
+          method="POST"
+          action={`${API_BASE_URL}/api/instances/admins/sign-up/`}
+          onSubmit={() => setIsSubmitting(true)}
+          onError={() => setIsSubmitting(false)}
+        >
+          <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
+
+          <div className="flex items-center gap-4">
+            <div className="w-full space-y-1">
+              <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="first_name">
+                First name <span className="text-red-500">*</span>
+              </label>
+              <Input
+                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+                id="first_name"
+                name="first_name"
+                type="text"
+                inputSize="md"
+                placeholder="Wilber"
+                value={formData.first_name}
+                onChange={(e) => handleFormChange("first_name", e.target.value)}
+                autoFocus
+              />
+            </div>
+            <div className="w-full space-y-1">
+              <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="last_name">
+                Last name
+              </label>
+              <Input
+                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+                id="last_name"
+                name="last_name"
+                type="text"
+                inputSize="md"
+                placeholder="Wright"
+                value={formData.last_name}
+                onChange={(e) => handleFormChange("last_name", e.target.value)}
+              />
+            </div>
+          </div>
+
+          <div className="w-full space-y-1">
+            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
+              Email <span className="text-red-500">*</span>
+            </label>
+            <Input
+              className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+              id="email"
+              name="email"
+              type="email"
+              inputSize="md"
+              placeholder="name@company.com"
+              value={formData.email}
+              onChange={(e) => handleFormChange("email", e.target.value)}
+              hasError={errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL ? true : false}
+            />
+            {errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL && errorData.message && (
+              <p className="px-1 text-xs text-red-500">{errorData.message}</p>
+            )}
+          </div>
+
+          <div className="w-full space-y-1">
+            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="company_name">
+              Company name
+            </label>
+            <Input
+              className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+              id="company_name"
+              name="company_name"
+              type="text"
+              inputSize="md"
+              placeholder="Company name"
+              value={formData.company_name}
+              onChange={(e) => handleFormChange("company_name", e.target.value)}
+            />
+          </div>
+
+          <div className="w-full space-y-1">
+            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="password">
+              Set a password <span className="text-red-500">*</span>
+            </label>
+            <div className="relative">
+              <Input
+                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+                id="password"
+                name="password"
+                type={showPassword ? "text" : "password"}
+                inputSize="md"
+                placeholder="New password..."
+                value={formData.password}
+                onChange={(e) => handleFormChange("password", e.target.value)}
+                hasError={errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD ? true : false}
+                onFocus={() => setIsPasswordInputFocused(true)}
+                onBlur={() => setIsPasswordInputFocused(false)}
+              />
+              {showPassword ? (
+                <button
+                  type="button"
+                  className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                  onClick={() => setShowPassword(false)}
+                >
+                  <EyeOff className="h-4 w-4" />
+                </button>
+              ) : (
+                <button
+                  type="button"
+                  className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                  onClick={() => setShowPassword(true)}
+                >
+                  <Eye className="h-4 w-4" />
+                </button>
+              )}
+            </div>
+            {errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD && errorData.message && (
+              <p className="px-1 text-xs text-red-500">{errorData.message}</p>
+            )}
+            {isPasswordInputFocused && <PasswordStrengthMeter password={formData.password} />}
+          </div>
+
+          <div className="w-full space-y-1">
+            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
+              Confirm password
+            </label>
+            <div className="relative">
+              <Input
+                type={showPassword ? "text" : "password"}
+                id="confirm_password"
+                name="confirm_password"
+                inputSize="md"
+                value={formData.confirm_password}
+                onChange={(e) => handleFormChange("confirm_password", e.target.value)}
+                placeholder="Confirm password"
+                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+              />
+              {showPassword ? (
+                <button
+                  type="button"
+                  className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                  onClick={() => setShowPassword(false)}
+                >
+                  <EyeOff className="h-4 w-4" />
+                </button>
+              ) : (
+                <button
+                  type="button"
+                  className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                  onClick={() => setShowPassword(true)}
+                >
+                  <Eye className="h-4 w-4" />
+                </button>
+              )}
+            </div>
+            {!!formData.confirm_password && formData.password !== formData.confirm_password && (
+              <span className="text-sm text-red-500">Passwords don{"'"}t match</span>
+            )}
+          </div>
+
+          <div className="relative flex items-center pt-2 gap-2">
+            <div>
+              <Checkbox
+                id="is_telemetry_enabled"
+                name="is_telemetry_enabled"
+                value={formData.is_telemetry_enabled ? "True" : "False"}
+                onChange={() => handleFormChange("is_telemetry_enabled", !formData.is_telemetry_enabled)}
+                checked={formData.is_telemetry_enabled}
+              />
+            </div>
+            <label
+              className="text-sm text-onboarding-text-300 font-medium cursor-pointer"
+              htmlFor="is_telemetry_enabled"
+            >
+              Allow Plane to anonymously collect usage events.
+            </label>
+            <a href="https://docs.plane.so/telemetry" className="text-sm font-medium text-blue-500 hover:text-blue-600">
+              See More
+            </a>
+          </div>
+
+          <div className="py-2">
+            <Button type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
+              {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};

admin/app/setup/layout.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { ReactNode } from "react";
+// lib
+import { AuthWrapper, InstanceWrapper } from "@/lib/wrappers";
+// helpers
+import { EAuthenticationPageType, EInstancePageType } from "@/helpers";
+
+interface SetupLayoutProps {
+  children: ReactNode;
+}
+
+const SetupLayout = ({ children }: SetupLayoutProps) => (
+  <InstanceWrapper pageType={EInstancePageType.PRE_SETUP}>
+    <AuthWrapper authType={EAuthenticationPageType.NOT_AUTHENTICATED}>{children}</AuthWrapper>
+  </InstanceWrapper>
+);
+
+export default SetupLayout;

admin/app/setup/page.tsx

@@ -0,0 +1,16 @@
+// layouts
+import { DefaultLayout } from "@/layouts";
+// components
+import { PageHeader } from "@/components/core";
+import { InstanceSignUpForm } from "./components";
+
+const SetupPage = () => (
+  <>
+    <PageHeader title="Setup - God Mode" />
+    <DefaultLayout>
+      <InstanceSignUpForm />
+    </DefaultLayout>
+  </>
+);
+
+export default SetupPage;

admin/ce/components/authentication/authentication-modes.tsx

@@ -1,69 +0,0 @@
-import { observer } from "mobx-react";
-import Image from "next/image";
-import { useTheme } from "next-themes";
-// types
-import {
-  TGetBaseAuthenticationModeProps,
-  TInstanceAuthenticationMethodKeys,
-  TInstanceAuthenticationModes,
-} from "@plane/types";
-// components
-import { AuthenticationMethodCard } from "@/components/authentication";
-// helpers
-import { UpgradeButton } from "@/components/common/upgrade-button";
-import { getBaseAuthenticationModes } from "@/helpers/authentication.helper";
-// images
-import OIDCLogo from "@/public/logos/oidc-logo.svg";
-import SAMLLogo from "@/public/logos/saml-logo.svg";
-
-export type TAuthenticationModeProps = {
-  disabled: boolean;
-  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
-};
-
-// Authentication methods
-export const getAuthenticationModes: (props: TGetBaseAuthenticationModeProps) => TInstanceAuthenticationModes[] = ({
-  disabled,
-  updateConfig,
-  resolvedTheme,
-}) => [
-    ...getBaseAuthenticationModes({ disabled, updateConfig, resolvedTheme }),
-    {
-      key: "oidc",
-      name: "OIDC",
-      description: "Authenticate your users via the OpenID Connect protocol.",
-      icon: <Image src={OIDCLogo} height={22} width={22} alt="OIDC Logo" />,
-      config: <UpgradeButton />,
-      unavailable: true,
-    },
-    {
-      key: "saml",
-      name: "SAML",
-      description: "Authenticate your users via the Security Assertion Markup Language protocol.",
-      icon: <Image src={SAMLLogo} height={22} width={22} alt="SAML Logo" className="pl-0.5" />,
-      config: <UpgradeButton />,
-      unavailable: true,
-    },
-  ];
-
-export const AuthenticationModes: React.FC<TAuthenticationModeProps> = observer((props) => {
-  const { disabled, updateConfig } = props;
-  // next-themes
-  const { resolvedTheme } = useTheme();
-
-  return (
-    <>
-      {getAuthenticationModes({ disabled, updateConfig, resolvedTheme }).map((method) => (
-        <AuthenticationMethodCard
-          key={method.key}
-          name={method.name}
-          description={method.description}
-          icon={method.icon}
-          config={method.config}
-          disabled={disabled}
-          unavailable={method.unavailable}
-        />
-      ))}
-    </>
-  );
-});

admin/ce/components/authentication/index.ts

@@ -1 +0,0 @@
-export * from "./authentication-modes";

admin/components/admin-sidebar/help-section.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { FC, useState, useRef } from "react";
+import Link from "next/link";
+import { observer } from "mobx-react-lite";
+import { Transition } from "@headlessui/react";
+import { ExternalLink, FileText, HelpCircle, MoveLeft } from "lucide-react";
+import { DiscordIcon, GithubIcon, Tooltip } from "@plane/ui";
+// hooks
+import { useInstance, useTheme } from "@/hooks/store";
+// assets
+import packageJson from "package.json";
+
+const helpOptions = [
+  {
+    name: "Documentation",
+    href: "https://docs.plane.so/",
+    Icon: FileText,
+  },
+  {
+    name: "Join our Discord",
+    href: "https://discord.com/invite/A92xrEGCge",
+    Icon: DiscordIcon,
+  },
+  {
+    name: "Report a bug",
+    href: "https://github.com/makeplane/plane/issues/new/choose",
+    Icon: GithubIcon,
+  },
+];
+
+export const HelpSection: FC = observer(() => {
+  // hooks
+  const { instance } = useInstance();
+  // states
+  const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
+  // store
+  const { isSidebarCollapsed, toggleSidebar } = useTheme();
+  // refs
+  const helpOptionsRef = useRef<HTMLDivElement | null>(null);
+
+  const redirectionLink = `${instance?.config?.app_base_url ? `${instance?.config?.app_base_url}/create-workspace` : `/god-mode/`}`;
+
+  return (
+    <div
+      className={`flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-4 py-2 ${
+        isSidebarCollapsed ? "flex-col" : ""
+      }`}
+    >
+      <div className={`flex items-center gap-1 ${isSidebarCollapsed ? "flex-col justify-center" : "w-full"}`}>
+        <Tooltip tooltipContent="Redirect to plane" position="right" className="ml-4" disabled={!isSidebarCollapsed}>
+          <a
+            href={redirectionLink}
+            className={`relative px-2 py-1.5 flex items-center gap-2 font-medium rounded border border-custom-primary-100/20 bg-custom-primary-100/10 text-xs text-custom-primary-200 whitespace-nowrap`}
+          >
+            <ExternalLink size={14} />
+            {!isSidebarCollapsed && "Redirect to plane"}
+          </a>
+        </Tooltip>
+        <Tooltip tooltipContent="Help" position={isSidebarCollapsed ? "right" : "top"} className="ml-4">
+          <button
+            type="button"
+            className={`ml-auto grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
+              isSidebarCollapsed ? "w-full" : ""
+            }`}
+            onClick={() => setIsNeedHelpOpen((prev) => !prev)}
+          >
+            <HelpCircle className="h-3.5 w-3.5" />
+          </button>
+        </Tooltip>
+        <Tooltip tooltipContent="Toggle sidebar" position={isSidebarCollapsed ? "right" : "top"} className="ml-4">
+          <button
+            type="button"
+            className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
+              isSidebarCollapsed ? "w-full" : ""
+            }`}
+            onClick={() => toggleSidebar(!isSidebarCollapsed)}
+          >
+            <MoveLeft className={`h-3.5 w-3.5 duration-300 ${isSidebarCollapsed ? "rotate-180" : ""}`} />
+          </button>
+        </Tooltip>
+      </div>
+
+      <div className="relative">
+        <Transition
+          show={isNeedHelpOpen}
+          enter="transition ease-out duration-100"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-75"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          <div
+            className={`absolute bottom-2 min-w-[10rem] ${
+              isSidebarCollapsed ? "left-full" : "-left-[75px]"
+            } divide-y divide-custom-border-200 whitespace-nowrap rounded bg-custom-background-100 p-1 shadow-custom-shadow-xs`}
+            ref={helpOptionsRef}
+          >
+            <div className="space-y-1 pb-2">
+              {helpOptions.map(({ name, Icon, href }) => {
+                if (href)
+                  return (
+                    <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} />
+                        </div>
+                        <span className="text-xs">{name}</span>
+                      </div>
+                    </Link>
+                  );
+                else
+                  return (
+                    <button
+                      key={name}
+                      type="button"
+                      className="flex w-full 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" />
+                      </div>
+                      <span className="text-xs">{name}</span>
+                    </button>
+                  );
+              })}
+            </div>
+            <div className="px-2 pb-1 pt-2 text-[10px]">Version: v{packageJson.version}</div>
+          </div>
+        </Transition>
+      </div>
+    </div>
+  );
+});

admin/components/admin-sidebar/root.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { FC, useEffect, useRef } from "react";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useTheme } from "@/hooks/store";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+// components
+import { HelpSection, SidebarMenu, SidebarDropdown } from "@/components/admin-sidebar";
+
+export interface IInstanceSidebar {}
+
+export const InstanceSidebar: FC<IInstanceSidebar> = observer(() => {
+  // store
+  const { isSidebarCollapsed, toggleSidebar } = useTheme();
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  useOutsideClickDetector(ref, () => {
+    if (isSidebarCollapsed === false) {
+      if (window.innerWidth < 768) {
+        toggleSidebar(!isSidebarCollapsed);
+      }
+    }
+  });
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth <= 768) {
+        toggleSidebar(true);
+      }
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [toggleSidebar]);
+
+  return (
+    <div
+      className={`inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300
+        fixed md:relative
+        ${isSidebarCollapsed ? "-ml-[280px]" : ""}
+        sm:${isSidebarCollapsed ? "-ml-[280px]" : ""}
+        md:ml-0 ${isSidebarCollapsed ? "w-[80px]" : "w-[280px]"}
+        lg:ml-0 ${isSidebarCollapsed ? "w-[80px]" : "w-[280px]"}
+      `}
+    >
+      <div ref={ref} className="flex h-full w-full flex-1 flex-col">
+        <SidebarDropdown />
+        <SidebarMenu />
+        <HelpSection />
+      </div>
+    </div>
+  );
+});

admin/components/admin-sidebar/sidebar-dropdown.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import { Fragment, useEffect, useState } from "react";
+import { useTheme as useNextTheme } from "next-themes";
+import { observer } from "mobx-react-lite";
+import { LogOut, UserCog2, Palette } from "lucide-react";
+import { Menu, Transition } from "@headlessui/react";
+import { Avatar } from "@plane/ui";
+// hooks
+import { useTheme, useUser } from "@/hooks/store";
+// helpers
+import { API_BASE_URL, cn } from "@/helpers/common.helper";
+// services
+import { AuthService } from "@/services";
+
+// service initialization
+const authService = new AuthService();
+
+export const SidebarDropdown = observer(() => {
+  // store hooks
+  const { isSidebarCollapsed } = useTheme();
+  const { currentUser, signOut } = useUser();
+  // hooks
+  const { resolvedTheme, setTheme } = useNextTheme();
+  // state
+  const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
+
+  const handleThemeSwitch = () => {
+    const newTheme = resolvedTheme === "dark" ? "light" : "dark";
+    setTheme(newTheme);
+  };
+
+  const handleSignOut = () => signOut();
+
+  const getSidebarMenuItems = () => (
+    <Menu.Items
+      className={cn(
+        "absolute left-0 z-20 mt-1.5 flex w-52 flex-col divide-y divide-custom-sidebar-border-100 rounded-md border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none",
+        {
+          "left-4": isSidebarCollapsed,
+        }
+      )}
+    >
+      <div className="flex flex-col gap-2.5 pb-2">
+        <span className="px-2 text-custom-sidebar-text-200">{currentUser?.email}</span>
+      </div>
+      <div className="py-2">
+        <Menu.Item
+          as="button"
+          type="button"
+          className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
+          onClick={handleThemeSwitch}
+        >
+          <Palette className="h-4 w-4 stroke-[1.5]" />
+          Switch to {resolvedTheme === "dark" ? "light" : "dark"} mode
+        </Menu.Item>
+      </div>
+      <div className="py-2">
+        <form method="POST" action={`${API_BASE_URL}/api/instances/admins/sign-out/`} onSubmit={handleSignOut}>
+          <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
+          <Menu.Item
+            as="button"
+            type="submit"
+            className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
+          >
+            <LogOut className="h-4 w-4 stroke-[1.5]" />
+            Sign out
+          </Menu.Item>
+        </form>
+      </div>
+    </Menu.Items>
+  );
+
+  useEffect(() => {
+    if (csrfToken === undefined)
+      authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
+  }, [csrfToken]);
+
+  return (
+    <div className="flex max-h-[3.75rem] items-center gap-x-5 gap-y-2 border-b border-custom-sidebar-border-200 px-4 py-3.5">
+      <div className="h-full w-full truncate">
+        <div
+          className={`flex flex-grow items-center gap-x-2 truncate rounded py-1 ${
+            isSidebarCollapsed ? "justify-center" : ""
+          }`}
+        >
+          <Menu as="div" className="flex-shrink-0">
+            <Menu.Button
+              className={cn("grid place-items-center outline-none", {
+                "cursor-default": !isSidebarCollapsed,
+              })}
+            >
+              <div className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded bg-custom-sidebar-background-80">
+                <UserCog2 className="h-5 w-5 text-custom-text-200" />
+              </div>
+            </Menu.Button>
+            {isSidebarCollapsed && (
+              <Transition
+                as={Fragment}
+                enter="transition ease-out duration-100"
+                enterFrom="transform opacity-0 scale-95"
+                enterTo="transform opacity-100 scale-100"
+                leave="transition ease-in duration-75"
+                leaveFrom="transform opacity-100 scale-100"
+                leaveTo="transform opacity-0 scale-95"
+              >
+                {getSidebarMenuItems()}
+              </Transition>
+            )}
+          </Menu>
+
+          {!isSidebarCollapsed && (
+            <div className="flex w-full gap-2">
+              <h4 className="grow truncate text-base font-medium text-custom-text-200">Instance admin</h4>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {!isSidebarCollapsed && currentUser && (
+        <Menu as="div" className="relative flex-shrink-0">
+          <Menu.Button className="grid place-items-center outline-none">
+            <Avatar
+              name={currentUser.display_name}
+              src={currentUser.avatar ?? undefined}
+              size={24}
+              shape="square"
+              className="!text-base"
+            />
+          </Menu.Button>
+
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-100"
+            enterFrom="transform opacity-0 scale-95"
+            enterTo="transform opacity-100 scale-100"
+            leave="transition ease-in duration-75"
+            leaveFrom="transform opacity-100 scale-100"
+            leaveTo="transform opacity-0 scale-95"
+          >
+            {getSidebarMenuItems()}
+          </Transition>
+        </Menu>
+      )}
+    </div>
+  );
+});

admin/components/admin-sidebar/sidebar-menu-hamburger-toogle.tsx

@@ -1,11 +1,11 @@
 "use client";
 
 import { FC } from "react";
-import { observer } from "mobx-react";
+import { observer } from "mobx-react-lite";
 // hooks
-import { Menu } from "lucide-react";
 import { useTheme } from "@/hooks/store";
 // icons
+import { Menu } from "lucide-react";
 
 export const SidebarHamburgerToggle: FC = observer(() => {
   const { isSidebarCollapsed, toggleSidebar } = useTheme();

admin/components/admin-sidebar/sidebar-menu.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { observer } from "mobx-react-lite";
+import { Image, BrainCog, Cog, Lock, Mail } from "lucide-react";
+import { Tooltip } from "@plane/ui";
+// hooks
+import { useTheme } from "@/hooks/store";
+// helpers
+import { cn } from "@/helpers/common.helper";
+
+const INSTANCE_ADMIN_LINKS = [
+  {
+    Icon: Cog,
+    name: "General",
+    description: "Identify your instances and get key details",
+    href: `/general/`,
+  },
+  {
+    Icon: Mail,
+    name: "Email",
+    description: "Set up emails to your users",
+    href: `/email/`,
+  },
+  {
+    Icon: Lock,
+    name: "Authentication",
+    description: "Configure authentication modes",
+    href: `/authentication/`,
+  },
+  {
+    Icon: BrainCog,
+    name: "Artificial intelligence",
+    description: "Configure your OpenAI creds",
+    href: `/ai/`,
+  },
+  {
+    Icon: Image,
+    name: "Images in Plane",
+    description: "Allow third-party image libraries",
+    href: `/image/`,
+  },
+];
+
+export const SidebarMenu = observer(() => {
+  // store hooks
+  const { isSidebarCollapsed, toggleSidebar } = useTheme();
+  // router
+  const pathName = usePathname();
+
+  const handleItemClick = () => {
+    if (window.innerWidth < 768) {
+      toggleSidebar(!isSidebarCollapsed);
+    }
+  };
+
+  return (
+    <div className="flex h-full w-full flex-col gap-2.5 overflow-y-auto px-4 py-4">
+      {INSTANCE_ADMIN_LINKS.map((item, index) => {
+        const isActive = item.href === pathName || pathName.includes(item.href);
+        return (
+          <Link key={index} href={item.href} onClick={handleItemClick}>
+            <div>
+              <Tooltip tooltipContent={item.name} position="right" className="ml-2" disabled={!isSidebarCollapsed}>
+                <div
+                  className={cn(
+                    `group flex w-full items-center gap-3 rounded-md px-3 py-2 outline-none transition-colors`,
+                    isActive
+                      ? "bg-custom-primary-100/10 text-custom-primary-100"
+                      : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80",
+                    isSidebarCollapsed ? "justify-center" : "w-[260px]"
+                  )}
+                >
+                  {<item.Icon className="h-4 w-4 flex-shrink-0" />}
+                  {!isSidebarCollapsed && (
+                    <div className="w-full ">
+                      <div
+                        className={cn(
+                          `text-sm font-medium transition-colors`,
+                          isActive ? "text-custom-primary-100" : "text-custom-sidebar-text-200"
+                        )}
+                      >
+                        {item.name}
+                      </div>
+                      <div
+                        className={cn(
+                          `text-[10px] transition-colors`,
+                          isActive ? "text-custom-primary-90" : "text-custom-sidebar-text-400"
+                        )}
+                      >
+                        {item.description}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </Tooltip>
+            </div>
+          </Link>
+        );
+      })}
+    </div>
+  );
+});

admin/components/auth-header.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { FC } from "react";
+import { usePathname } from "next/navigation";
+// mobx
+import { observer } from "mobx-react-lite";
+// ui
+import { Settings } from "lucide-react";
+// icons
+import { Breadcrumbs } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "components/common";
+import { SidebarHamburgerToggle } from "@/components/admin-sidebar";
+
+export const InstanceHeader: FC = observer(() => {
+  const pathName = usePathname();
+
+  const getHeaderTitle = (pathName: string) => {
+    switch (pathName) {
+      case "general":
+        return "General";
+      case "ai":
+        return "Artificial Intelligence";
+      case "email":
+        return "Email";
+      case "authentication":
+        return "Authentication";
+      case "image":
+        return "Image";
+      case "google":
+        return "Google";
+      case "github":
+        return "Github";
+      default:
+        return pathName.toUpperCase();
+    }
+  };
+
+  // Function to dynamically generate breadcrumb items based on pathname
+  const generateBreadcrumbItems = (pathname: string) => {
+    const pathSegments = pathname.split("/").slice(1); // removing the first empty string.
+    pathSegments.pop();
+
+    let currentUrl = "";
+    const breadcrumbItems = pathSegments.map((segment) => {
+      currentUrl += "/" + segment;
+      return {
+        title: getHeaderTitle(segment),
+        href: currentUrl,
+      };
+    });
+    return breadcrumbItems;
+  };
+
+  const breadcrumbItems = generateBreadcrumbItems(pathName);
+
+  return (
+    <div className="relative z-10 flex h-[3.75rem] 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">
+      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
+        <SidebarHamburgerToggle />
+        {breadcrumbItems.length >= 0 && (
+          <div>
+            <Breadcrumbs>
+              <Breadcrumbs.BreadcrumbItem
+                type="text"
+                link={
+                  <BreadcrumbLink
+                    href="/general/"
+                    label="Settings"
+                    icon={<Settings className="h-4 w-4 text-custom-text-300" />}
+                  />
+                }
+              />
+              {breadcrumbItems.map(
+                (item) =>
+                  item.title && (
+                    <Breadcrumbs.BreadcrumbItem
+                      key={item.title}
+                      type="text"
+                      link={<BreadcrumbLink href={item.href} label={item.title} />}
+                    />
+                  )
+              )}
+            </Breadcrumbs>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});

admin/components/common/breadcrumb-link.tsx

@@ -0,0 +1,36 @@
+import Link from "next/link";
+import { Tooltip } from "@plane/ui";
+
+type Props = {
+  label?: string;
+  href?: string;
+  icon?: React.ReactNode | undefined;
+};
+
+export const BreadcrumbLink: React.FC<Props> = (props) => {
+  const { href, label, icon } = props;
+  return (
+    <Tooltip tooltipContent={label} position="bottom">
+      <li className="flex items-center space-x-2" tabIndex={-1}>
+        <div className="flex flex-wrap items-center gap-2.5">
+          {href ? (
+            <Link
+              className="flex items-center gap-1 text-sm font-medium text-custom-text-300 hover:text-custom-text-100"
+              href={href}
+            >
+              {icon && (
+                <div className="flex h-5 w-5 items-center justify-center overflow-hidden !text-[1rem]">{icon}</div>
+              )}
+              <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
+            </Link>
+          ) : (
+            <div className="flex cursor-default items-center gap-1 text-sm font-medium text-custom-text-100">
+              {icon && <div className="flex h-5 w-5 items-center justify-center overflow-hidden">{icon}</div>}
+              <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
+            </div>
+          )}
+        </div>
+      </li>
+    </Tooltip>
+  );
+};

admin/components/common/confirm-discard-modal.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import Link from "next/link";
 // headless ui
@@ -45,22 +43,33 @@ export const ConfirmDiscardModal: React.FC<Props> = (props) => {
                 <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mt-3 text-center sm:mt-0 sm:text-left">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-300">
+                      <Dialog.Title
+                        as="h3"
+                        className="text-lg font-medium leading-6 text-custom-text-300"
+                      >
                         You have unsaved changes
                       </Dialog.Title>
                       <div className="mt-2">
                         <p className="text-sm text-custom-text-400">
-                          Changes you made will be lost if you go back. Do you wish to go back?
+                          Changes you made will be lost if you go back. Do you
+                          wish to go back?
                         </p>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div className="flex justify-end items-center p-4 sm:px-6 gap-2">
-                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                  <Button
+                    variant="neutral-primary"
+                    size="sm"
+                    onClick={handleClose}
+                  >
                     Keep editing
                   </Button>
-                  <Link href={onDiscardHref} className={getButtonStyling("primary", "sm")}>
+                  <Link
+                    href={onDiscardHref}
+                    className={getButtonStyling("primary", "sm")}
+                  >
                     Go back
                   </Link>
                 </div>

admin/components/common/controller-input.tsx

@@ -2,10 +2,10 @@
 
 import React, { useState } from "react";
 import { Controller, Control } from "react-hook-form";
-// icons
-import { Eye, EyeOff } from "lucide-react";
 // ui
 import { Input } from "@plane/ui";
+// icons
+import { Eye, EyeOff } from "lucide-react";
 // helpers
 import { cn } from "@/helpers/common.helper";
 
@@ -37,9 +37,7 @@ export const ControllerInput: React.FC<Props> = (props) => {
 
   return (
     <div className="flex flex-col gap-1">
-      <h4 className="text-sm text-custom-text-300">
-        {label}
-      </h4>
+      <h4 className="text-sm text-custom-text-300">{label}</h4>
       <div className="relative">
         <Controller
           control={control}
@@ -64,7 +62,6 @@ export const ControllerInput: React.FC<Props> = (props) => {
         {type === "password" &&
           (showPassword ? (
             <button
-              tabIndex={-1}
               className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
               onClick={() => setShowPassword(false)}
             >
@@ -72,7 +69,6 @@ export const ControllerInput: React.FC<Props> = (props) => {
             </button>
           ) : (
             <button
-              tabIndex={-1}
               className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
               onClick={() => setShowPassword(true)}
             >
@@ -80,7 +76,7 @@ export const ControllerInput: React.FC<Props> = (props) => {
             </button>
           ))}
       </div>
-      {description && <p className="pt-0.5 text-xs text-custom-text-300">{description}</p>}
+      {description && <p className="text-xs text-custom-text-300">{description}</p>}
     </div>
   );
 };

admin/components/common/copy-field.tsx

@@ -2,9 +2,9 @@
 
 import React from "react";
 // ui
-import { Copy } from "lucide-react";
 import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 // icons
+import { Copy } from "lucide-react";
 
 type Props = {
   label: string;
@@ -24,7 +24,7 @@ export const CopyField: React.FC<Props> = (props) => {
 
   return (
     <div className="flex flex-col gap-1">
-      <h4 className="text-sm text-custom-text-200">{label}</h4>
+      <h4 className="text-sm text-custom-text-300">{label}</h4>
       <Button
         variant="neutral-primary"
         className="flex items-center justify-between py-2"
@@ -40,7 +40,7 @@ export const CopyField: React.FC<Props> = (props) => {
         <p className="text-sm font-medium">{url}</p>
         <Copy size={18} color="#B9B9B9" />
       </Button>
-      <div className="text-xs text-custom-text-300">{description}</div>
+      <p className="text-xs text-custom-text-400">{description}</p>
     </div>
   );
 };

admin/components/common/empty-state.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import Image from "next/image";
+import { Button } from "@plane/ui";
+
+type Props = {
+  title: string;
+  description?: React.ReactNode;
+  image?: any;
+  primaryButton?: {
+    icon?: any;
+    text: string;
+    onClick: () => void;
+  };
+  secondaryButton?: React.ReactNode;
+  disabled?: boolean;
+};
+
+export const EmptyState: React.FC<Props> = ({
+  title,
+  description,
+  image,
+  primaryButton,
+  secondaryButton,
+  disabled = false,
+}) => (
+  <div className={`flex h-full w-full items-center justify-center`}>
+    <div className="flex w-full flex-col items-center text-center">
+      {image && <Image src={image} className="w-52 sm:w-60" alt={primaryButton?.text || "button image"} />}
+      <h6 className="mb-3 mt-6 text-xl font-semibold sm:mt-8">{title}</h6>
+      {description && <p className="mb-7 px-5 text-custom-text-300 sm:mb-8">{description}</p>}
+      <div className="flex items-center gap-4">
+        {primaryButton && (
+          <Button
+            variant="primary"
+            prependIcon={primaryButton.icon}
+            onClick={primaryButton.onClick}
+            disabled={disabled}
+          >
+            {primaryButton.text}
+          </Button>
+        )}
+        {secondaryButton}
+      </div>
+    </div>
+  </div>
+);

admin/components/common/index.ts

@@ -0,0 +1,7 @@
+export * from "./breadcrumb-link";
+export * from "./confirm-discard-modal";
+export * from "./controller-input";
+export * from "./copy-field";
+export * from "./password-strength-meter";
+export * from "./banner";
+export * from "./empty-state";

admin/components/common/password-strength-meter.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+// helpers
+import { cn } from "@/helpers/common.helper";
+import { getPasswordStrength } from "@/helpers/password.helper";
+// icons
+import { CircleCheck } from "lucide-react";
+
+type Props = {
+  password: string;
+};
+
+export const PasswordStrengthMeter: React.FC<Props> = (props: Props) => {
+  const { password } = props;
+
+  const strength = getPasswordStrength(password);
+  let bars = [];
+  let text = "";
+  let textColor = "";
+
+  if (password.length === 0) {
+    bars = [`bg-[#F0F0F3]`, `bg-[#F0F0F3]`, `bg-[#F0F0F3]`];
+    text = "Password requirements";
+  } else if (password.length < 8) {
+    bars = [`bg-[#DC3E42]`, `bg-[#F0F0F3]`, `bg-[#F0F0F3]`];
+    text = "Password is too short";
+    textColor = `text-[#DC3E42]`;
+  } else if (strength < 3) {
+    bars = [`bg-[#FFBA18]`, `bg-[#FFBA18]`, `bg-[#F0F0F3]`];
+    text = "Password is weak";
+    textColor = `text-[#FFBA18]`;
+  } else {
+    bars = [`bg-[#3E9B4F]`, `bg-[#3E9B4F]`, `bg-[#3E9B4F]`];
+    text = "Password is strong";
+    textColor = `text-[#3E9B4F]`;
+  }
+
+  const criteria = [
+    { label: "Min 8 characters", isValid: password.length >= 8 },
+    { label: "Min 1 upper-case letter", isValid: /[A-Z]/.test(password) },
+    { label: "Min 1 number", isValid: /\d/.test(password) },
+    { label: "Min 1 special character", isValid: /[!@#$%^&*]/.test(password) },
+  ];
+
+  return (
+    <div className="w-full p-1">
+      <div className="flex w-full gap-1.5">
+        {bars.map((color, index) => (
+          <div key={index} className={cn("w-full h-1 rounded-full", color)} />
+        ))}
+      </div>
+      <p className={cn("text-xs font-medium py-1", textColor)}>{text}</p>
+      <div className="flex flex-wrap gap-x-4 gap-y-2">
+        {criteria.map((criterion, index) => (
+          <div
+            key={index}
+            className={cn(
+              "flex items-center gap-1 text-xs font-medium",
+              criterion.isValid ? `text-[#3E9B4F]` : "text-custom-text-400"
+            )}
+          >
+            <CircleCheck width={14} height={14} />
+            {criterion.label}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

admin/components/core/index.ts

@@ -0,0 +1 @@
+export * from "./page-header";

admin/components/instance/index.ts

@@ -0,0 +1 @@
+export * from "./instance-not-ready";

admin/components/instance/instance-not-ready.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { FC } from "react";
-import Image from "next/image";
 import Link from "next/link";
+import Image from "next/image";
 import { Button } from "@plane/ui";
 // assets
 import PlaneTakeOffImage from "@/public/images/plane-takeoff.png";

admin/components/login/sign-in-form.tsx

@@ -3,15 +3,15 @@
 import { FC, useEffect, useMemo, useState } from "react";
 import { useSearchParams } from "next/navigation";
 // services
-import { Eye, EyeOff } from "lucide-react";
-import { Button, Input, Spinner } from "@plane/ui";
-// components
-import { Banner } from "@/components/common";
-// helpers
-import { API_BASE_URL } from "@/helpers/common.helper";
 import { AuthService } from "@/services/auth.service";
 // ui
+import { Button, Input, Spinner } from "@plane/ui";
+// components
+import { Banner } from "components/common";
 // icons
+import { Eye, EyeOff } from "lucide-react";
+// helpers
+import { API_BASE_URL } from "@/helpers/common.helper";
 
 // service initialization
 const authService = new AuthService();
@@ -92,7 +92,7 @@ export const InstanceSignInForm: FC = (props) => {
   );
 
   return (
-    <div className="flex-grow container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10 lg:pt-28 transition-all">
+    <div className="relative w-full h-full overflow-hidden container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10 flex flex-col justify-center items-center">
       <div className="relative flex flex-col space-y-6">
         <div className="text-center space-y-1">
           <h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">
@@ -119,7 +119,7 @@ export const InstanceSignInForm: FC = (props) => {
               Email <span className="text-red-500">*</span>
             </label>
             <Input
-              className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
+              className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
               id="email"
               name="email"
               type="email"
@@ -127,7 +127,6 @@ export const InstanceSignInForm: FC = (props) => {
               placeholder="name@company.com"
               value={formData.email}
               onChange={(e) => handleFormChange("email", e.target.value)}
-              autoComplete="on"
               autoFocus
             />
           </div>
@@ -138,7 +137,7 @@ export const InstanceSignInForm: FC = (props) => {
             </label>
             <div className="relative">
               <Input
-                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
+                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
                 id="password"
                 name="password"
                 type={showPassword ? "text" : "password"}
@@ -146,7 +145,6 @@ export const InstanceSignInForm: FC = (props) => {
                 placeholder="Enter your password"
                 value={formData.password}
                 onChange={(e) => handleFormChange("password", e.target.value)}
-                autoComplete="on"
               />
               {showPassword ? (
                 <button

admin/components/new-user-popup.tsx

@@ -1,15 +1,15 @@
 "use client";
 
 import React from "react";
-import { observer } from "mobx-react";
+import { observer } from "mobx-react-lite";
 import Image from "next/image";
 import { useTheme as nextUseTheme } from "next-themes";
 // ui
 import { Button, getButtonStyling } from "@plane/ui";
 // helpers
-import { WEB_BASE_URL, resolveGeneralTheme } from "helpers/common.helper";
+import { resolveGeneralTheme } from "helpers/common.helper";
 // hooks
-import { useTheme } from "@/hooks/store";
+import { useInstance, useTheme } from "@/hooks/store";
 // icons
 import TakeoffIconLight from "/public/logos/takeoff-icon-light.svg";
 import TakeoffIconDark from "/public/logos/takeoff-icon-dark.svg";
@@ -17,10 +17,11 @@ import TakeoffIconDark from "/public/logos/takeoff-icon-dark.svg";
 export const NewUserPopup: React.FC = observer(() => {
   // hooks
   const { isNewUserPopup, toggleNewUserPopup } = useTheme();
+  const { instance } = useInstance();
   // theme
   const { resolvedTheme } = nextUseTheme();
 
-  const redirectionLink = encodeURI(WEB_BASE_URL + "/create-workspace");
+  const redirectionLink = `${instance?.config?.app_base_url ? `${instance?.config?.app_base_url}/create-workspace` : `/god-mode/`}`;
 
   if (!isNewUserPopup) return <></>;
   return (

admin/core/components/admin-sidebar/help-section.tsx

@@ -1,138 +0,0 @@
-"use client";
-
-import { FC, useState, useRef } from "react";
-import { observer } from "mobx-react";
-import Link from "next/link";
-import { ExternalLink, FileText, HelpCircle, MoveLeft } from "lucide-react";
-import { Transition } from "@headlessui/react";
-// ui
-import { DiscordIcon, GithubIcon, Tooltip } from "@plane/ui";
-// helpers
-import { WEB_BASE_URL, cn } from "@/helpers/common.helper";
-// hooks
-import { useTheme } from "@/hooks/store";
-// assets
-import packageJson from "package.json";
-
-const helpOptions = [
-  {
-    name: "Documentation",
-    href: "https://docs.plane.so/",
-    Icon: FileText,
-  },
-  {
-    name: "Join our Discord",
-    href: "https://discord.com/invite/A92xrEGCge",
-    Icon: DiscordIcon,
-  },
-  {
-    name: "Report a bug",
-    href: "https://github.com/makeplane/plane/issues/new/choose",
-    Icon: GithubIcon,
-  },
-];
-
-export const HelpSection: FC = observer(() => {
-  // states
-  const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
-  // store
-  const { isSidebarCollapsed, toggleSidebar } = useTheme();
-  // refs
-  const helpOptionsRef = useRef<HTMLDivElement | null>(null);
-
-  const redirectionLink = encodeURI(WEB_BASE_URL + "/");
-
-  return (
-    <div
-      className={cn(
-        "flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 px-4 h-14 flex-shrink-0",
-        {
-          "flex-col h-auto py-1.5": isSidebarCollapsed,
-        }
-      )}
-    >
-      <div className={`flex items-center gap-1 ${isSidebarCollapsed ? "flex-col justify-center" : "w-full"}`}>
-        <Tooltip tooltipContent="Redirect to plane" position="right" className="ml-4" disabled={!isSidebarCollapsed}>
-          <a
-            href={redirectionLink}
-            className={`relative px-2 py-1.5 flex items-center gap-2 font-medium rounded border border-custom-primary-100/20 bg-custom-primary-100/10 text-xs text-custom-primary-200 whitespace-nowrap`}
-          >
-            <ExternalLink size={14} />
-            {!isSidebarCollapsed && "Redirect to plane"}
-          </a>
-        </Tooltip>
-        <Tooltip tooltipContent="Help" position={isSidebarCollapsed ? "right" : "top"} className="ml-4">
-          <button
-            type="button"
-            className={`ml-auto grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
-              isSidebarCollapsed ? "w-full" : ""
-            }`}
-            onClick={() => setIsNeedHelpOpen((prev) => !prev)}
-          >
-            <HelpCircle className="h-3.5 w-3.5" />
-          </button>
-        </Tooltip>
-        <Tooltip tooltipContent="Toggle sidebar" position={isSidebarCollapsed ? "right" : "top"} className="ml-4">
-          <button
-            type="button"
-            className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
-              isSidebarCollapsed ? "w-full" : ""
-            }`}
-            onClick={() => toggleSidebar(!isSidebarCollapsed)}
-          >
-            <MoveLeft className={`h-3.5 w-3.5 duration-300 ${isSidebarCollapsed ? "rotate-180" : ""}`} />
-          </button>
-        </Tooltip>
-      </div>
-
-      <div className="relative">
-        <Transition
-          show={isNeedHelpOpen}
-          enter="transition ease-out duration-100"
-          enterFrom="transform opacity-0 scale-95"
-          enterTo="transform opacity-100 scale-100"
-          leave="transition ease-in duration-75"
-          leaveFrom="transform opacity-100 scale-100"
-          leaveTo="transform opacity-0 scale-95"
-        >
-          <div
-            className={`absolute bottom-2 min-w-[10rem] z-[15] ${
-              isSidebarCollapsed ? "left-full" : "-left-[75px]"
-            } divide-y divide-custom-border-200 whitespace-nowrap rounded bg-custom-background-100 p-1 shadow-custom-shadow-xs`}
-            ref={helpOptionsRef}
-          >
-            <div className="space-y-1 pb-2">
-              {helpOptions.map(({ name, Icon, href }) => {
-                if (href)
-                  return (
-                    <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} />
-                        </div>
-                        <span className="text-xs">{name}</span>
-                      </div>
-                    </Link>
-                  );
-                else
-                  return (
-                    <button
-                      key={name}
-                      type="button"
-                      className="flex w-full 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" />
-                      </div>
-                      <span className="text-xs">{name}</span>
-                    </button>
-                  );
-              })}
-            </div>
-            <div className="px-2 pb-1 pt-2 text-[10px]">Version: v{packageJson.version}</div>
-          </div>
-        </Transition>
-      </div>
-    </div>
-  );
-});

admin/core/components/admin-sidebar/root.tsx

@@ -1,57 +0,0 @@
-"use client";
-
-import { FC, useEffect, useRef } from "react";
-import { observer } from "mobx-react";
-// hooks
-import { HelpSection, SidebarMenu, SidebarDropdown } from "@/components/admin-sidebar";
-import { useTheme } from "@/hooks/store";
-import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
-// components
-
-export interface IInstanceSidebar {}
-
-export const InstanceSidebar: FC<IInstanceSidebar> = observer(() => {
-  // store
-  const { isSidebarCollapsed, toggleSidebar } = useTheme();
-
-  const ref = useRef<HTMLDivElement>(null);
-
-  useOutsideClickDetector(ref, () => {
-    if (isSidebarCollapsed === false) {
-      if (window.innerWidth < 768) {
-        toggleSidebar(!isSidebarCollapsed);
-      }
-    }
-  });
-
-  useEffect(() => {
-    const handleResize = () => {
-      if (window.innerWidth <= 768) {
-        toggleSidebar(true);
-      }
-    };
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [toggleSidebar]);
-
-  return (
-    <div
-      className={`inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300
-        fixed md:relative
-        ${isSidebarCollapsed ? "-ml-[290px]" : ""}
-        sm:${isSidebarCollapsed ? "-ml-[290px]" : ""}
-        md:ml-0 ${isSidebarCollapsed ? "w-[70px]" : "w-[290px]"}
-        lg:ml-0 ${isSidebarCollapsed ? "w-[70px]" : "w-[290px]"}
-      `}
-    >
-      <div ref={ref} className="flex h-full w-full flex-1 flex-col">
-        <SidebarDropdown />
-        <SidebarMenu />
-        <HelpSection />
-      </div>
-    </div>
-  );
-});

admin/core/components/admin-sidebar/sidebar-dropdown.tsx

@@ -1,147 +0,0 @@
-"use client";
-
-import { Fragment, useEffect, useState } from "react";
-import { observer } from "mobx-react";
-import { useTheme as useNextTheme } from "next-themes";
-import { LogOut, UserCog2, Palette } from "lucide-react";
-import { Menu, Transition } from "@headlessui/react";
-import { Avatar } from "@plane/ui";
-// hooks
-import { API_BASE_URL, cn } from "@/helpers/common.helper";
-import { useTheme, useUser } from "@/hooks/store";
-// helpers
-// services
-import { AuthService } from "@/services/auth.service";
-
-// service initialization
-const authService = new AuthService();
-
-export const SidebarDropdown = observer(() => {
-  // store hooks
-  const { isSidebarCollapsed } = useTheme();
-  const { currentUser, signOut } = useUser();
-  // hooks
-  const { resolvedTheme, setTheme } = useNextTheme();
-  // state
-  const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
-
-  const handleThemeSwitch = () => {
-    const newTheme = resolvedTheme === "dark" ? "light" : "dark";
-    setTheme(newTheme);
-  };
-
-  const handleSignOut = () => signOut();
-
-  const getSidebarMenuItems = () => (
-    <Menu.Items
-      className={cn(
-        "absolute left-0 z-20 mt-1.5 flex w-52 flex-col divide-y divide-custom-sidebar-border-100 rounded-md border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none",
-        {
-          "left-4": isSidebarCollapsed,
-        }
-      )}
-    >
-      <div className="flex flex-col gap-2.5 pb-2">
-        <span className="px-2 text-custom-sidebar-text-200">{currentUser?.email}</span>
-      </div>
-      <div className="py-2">
-        <Menu.Item
-          as="button"
-          type="button"
-          className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
-          onClick={handleThemeSwitch}
-        >
-          <Palette className="h-4 w-4 stroke-[1.5]" />
-          Switch to {resolvedTheme === "dark" ? "light" : "dark"} mode
-        </Menu.Item>
-      </div>
-      <div className="py-2">
-        <form method="POST" action={`${API_BASE_URL}/api/instances/admins/sign-out/`} onSubmit={handleSignOut}>
-          <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
-          <Menu.Item
-            as="button"
-            type="submit"
-            className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
-          >
-            <LogOut className="h-4 w-4 stroke-[1.5]" />
-            Sign out
-          </Menu.Item>
-        </form>
-      </div>
-    </Menu.Items>
-  );
-
-  useEffect(() => {
-    if (csrfToken === undefined)
-      authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
-  }, [csrfToken]);
-
-  return (
-    <div className="flex max-h-[3.75rem] items-center gap-x-5 gap-y-2 border-b border-custom-sidebar-border-200 px-4 py-3.5">
-      <div className="h-full w-full truncate">
-        <div
-          className={`flex flex-grow items-center gap-x-2 truncate rounded py-1 ${
-            isSidebarCollapsed ? "justify-center" : ""
-          }`}
-        >
-          <Menu as="div" className="flex-shrink-0">
-            <Menu.Button
-              className={cn("grid place-items-center outline-none", {
-                "cursor-default": !isSidebarCollapsed,
-              })}
-            >
-              <div className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded bg-custom-sidebar-background-80">
-                <UserCog2 className="h-5 w-5 text-custom-text-200" />
-              </div>
-            </Menu.Button>
-            {isSidebarCollapsed && (
-              <Transition
-                as={Fragment}
-                enter="transition ease-out duration-100"
-                enterFrom="transform opacity-0 scale-95"
-                enterTo="transform opacity-100 scale-100"
-                leave="transition ease-in duration-75"
-                leaveFrom="transform opacity-100 scale-100"
-                leaveTo="transform opacity-0 scale-95"
-              >
-                {getSidebarMenuItems()}
-              </Transition>
-            )}
-          </Menu>
-
-          {!isSidebarCollapsed && (
-            <div className="flex w-full gap-2">
-              <h4 className="grow truncate text-base font-medium text-custom-text-200">Instance admin</h4>
-            </div>
-          )}
-        </div>
-      </div>
-
-      {!isSidebarCollapsed && currentUser && (
-        <Menu as="div" className="relative flex-shrink-0">
-          <Menu.Button className="grid place-items-center outline-none">
-            <Avatar
-              name={currentUser.display_name}
-              src={currentUser.avatar ?? undefined}
-              size={24}
-              shape="square"
-              className="!text-base"
-            />
-          </Menu.Button>
-
-          <Transition
-            as={Fragment}
-            enter="transition ease-out duration-100"
-            enterFrom="transform opacity-0 scale-95"
-            enterTo="transform opacity-100 scale-100"
-            leave="transition ease-in duration-75"
-            leaveFrom="transform opacity-100 scale-100"
-            leaveTo="transform opacity-0 scale-95"
-          >
-            {getSidebarMenuItems()}
-          </Transition>
-        </Menu>
-      )}
-    </div>
-  );
-});

admin/core/components/admin-sidebar/sidebar-menu.tsx

@@ -1,104 +0,0 @@
-"use client";
-
-import { observer } from "mobx-react";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { Image, BrainCog, Cog, Lock, Mail } from "lucide-react";
-import { Tooltip } from "@plane/ui";
-// hooks
-import { cn } from "@/helpers/common.helper";
-import { useTheme } from "@/hooks/store";
-// helpers
-
-const INSTANCE_ADMIN_LINKS = [
-  {
-    Icon: Cog,
-    name: "General",
-    description: "Identify your instances and get key details",
-    href: `/general/`,
-  },
-  {
-    Icon: Mail,
-    name: "Email",
-    description: "Set up emails to your users",
-    href: `/email/`,
-  },
-  {
-    Icon: Lock,
-    name: "Authentication",
-    description: "Configure authentication modes",
-    href: `/authentication/`,
-  },
-  {
-    Icon: BrainCog,
-    name: "Artificial intelligence",
-    description: "Configure your OpenAI creds",
-    href: `/ai/`,
-  },
-  {
-    Icon: Image,
-    name: "Images in Plane",
-    description: "Allow third-party image libraries",
-    href: `/image/`,
-  },
-];
-
-export const SidebarMenu = observer(() => {
-  // store hooks
-  const { isSidebarCollapsed, toggleSidebar } = useTheme();
-  // router
-  const pathName = usePathname();
-
-  const handleItemClick = () => {
-    if (window.innerWidth < 768) {
-      toggleSidebar(!isSidebarCollapsed);
-    }
-  };
-
-  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);
-        return (
-          <Link key={index} href={item.href} onClick={handleItemClick}>
-            <div>
-              <Tooltip tooltipContent={item.name} position="right" className="ml-2" disabled={!isSidebarCollapsed}>
-                <div
-                  className={cn(
-                    `group flex w-full items-center gap-3 rounded-md px-3 py-2 outline-none transition-colors`,
-                    isActive
-                      ? "bg-custom-primary-100/10 text-custom-primary-100"
-                      : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80",
-                    isSidebarCollapsed ? "justify-center" : "w-[260px]"
-                  )}
-                >
-                  {<item.Icon className="h-4 w-4 flex-shrink-0" />}
-                  {!isSidebarCollapsed && (
-                    <div className="w-full ">
-                      <div
-                        className={cn(
-                          `text-sm font-medium transition-colors`,
-                          isActive ? "text-custom-primary-100" : "text-custom-sidebar-text-200"
-                        )}
-                      >
-                        {item.name}
-                      </div>
-                      <div
-                        className={cn(
-                          `text-[10px] transition-colors`,
-                          isActive ? "text-custom-primary-90" : "text-custom-sidebar-text-400"
-                        )}
-                      >
-                        {item.description}
-                      </div>
-                    </div>
-                  )}
-                </div>
-              </Tooltip>
-            </div>
-          </Link>
-        );
-      })}
-    </div>
-  );
-});

admin/core/components/auth-header.tsx

@@ -1,92 +0,0 @@
-"use client";
-
-import { FC } from "react";
-import { observer } from "mobx-react";
-import { usePathname } from "next/navigation";
-// mobx
-// ui
-import { Settings } from "lucide-react";
-// icons
-import { Breadcrumbs } from "@plane/ui";
-// components
-import { SidebarHamburgerToggle } from "@/components/admin-sidebar";
-import { BreadcrumbLink } from "@/components/common";
-
-export const InstanceHeader: FC = observer(() => {
-  const pathName = usePathname();
-
-  const getHeaderTitle = (pathName: string) => {
-    switch (pathName) {
-      case "general":
-        return "General";
-      case "ai":
-        return "Artificial Intelligence";
-      case "email":
-        return "Email";
-      case "authentication":
-        return "Authentication";
-      case "image":
-        return "Image";
-      case "google":
-        return "Google";
-      case "github":
-        return "Github";
-      case "gitlab":
-        return "GitLab";
-      default:
-        return pathName.toUpperCase();
-    }
-  };
-
-  // Function to dynamically generate breadcrumb items based on pathname
-  const generateBreadcrumbItems = (pathname: string) => {
-    const pathSegments = pathname.split("/").slice(1); // removing the first empty string.
-    pathSegments.pop();
-
-    let currentUrl = "";
-    const breadcrumbItems = pathSegments.map((segment) => {
-      currentUrl += "/" + segment;
-      return {
-        title: getHeaderTitle(segment),
-        href: currentUrl,
-      };
-    });
-    return breadcrumbItems;
-  };
-
-  const breadcrumbItems = generateBreadcrumbItems(pathName);
-
-  return (
-    <div className="relative z-10 flex h-[3.75rem] 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">
-      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <SidebarHamburgerToggle />
-        {breadcrumbItems.length >= 0 && (
-          <div>
-            <Breadcrumbs>
-              <Breadcrumbs.BreadcrumbItem
-                type="text"
-                link={
-                  <BreadcrumbLink
-                    href="/general/"
-                    label="Settings"
-                    icon={<Settings className="h-4 w-4 text-custom-text-300" />}
-                  />
-                }
-              />
-              {breadcrumbItems.map(
-                (item) =>
-                  item.title && (
-                    <Breadcrumbs.BreadcrumbItem
-                      key={item.title}
-                      type="text"
-                      link={<BreadcrumbLink href={item.href} label={item.title} />}
-                    />
-                  )
-              )}
-            </Breadcrumbs>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-});

admin/core/components/authentication/github-config.tsx

@@ -1,59 +0,0 @@
-"use client";
-
-import React from "react";
-import { observer } from "mobx-react";
-import Link from "next/link";
-// icons
-import { Settings2 } from "lucide-react";
-// types
-import { TInstanceAuthenticationMethodKeys } from "@plane/types";
-// ui
-import { ToggleSwitch, getButtonStyling } from "@plane/ui";
-// helpers
-import { cn } from "@/helpers/common.helper";
-// hooks
-import { useInstance } from "@/hooks/store";
-
-type Props = {
-  disabled: boolean;
-  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
-};
-
-export const GithubConfiguration: React.FC<Props> = observer((props) => {
-  const { disabled, updateConfig } = props;
-  // store
-  const { formattedConfig } = useInstance();
-  // derived values
-  const enableGithubConfig = formattedConfig?.IS_GITHUB_ENABLED ?? "";
-  const isGithubConfigured = !!formattedConfig?.GITHUB_CLIENT_ID && !!formattedConfig?.GITHUB_CLIENT_SECRET;
-
-  return (
-    <>
-      {isGithubConfigured ? (
-        <div className="flex items-center gap-4">
-          <Link href="/authentication/github" className={cn(getButtonStyling("link-primary", "md"), "font-medium")}>
-            Edit
-          </Link>
-          <ToggleSwitch
-            value={Boolean(parseInt(enableGithubConfig))}
-            onChange={() => {
-              Boolean(parseInt(enableGithubConfig)) === true
-                ? updateConfig("IS_GITHUB_ENABLED", "0")
-                : updateConfig("IS_GITHUB_ENABLED", "1");
-            }}
-            size="sm"
-            disabled={disabled}
-          />
-        </div>
-      ) : (
-        <Link
-          href="/authentication/github"
-          className={cn(getButtonStyling("neutral-primary", "sm"), "text-custom-text-300")}
-        >
-          <Settings2 className="h-4 w-4 p-0.5 text-custom-text-300/80" />
-          Configure
-        </Link>
-      )}
-    </>
-  );
-});

admin/core/components/authentication/gitlab-config.tsx

@@ -1,59 +0,0 @@
-"use client";
-
-import React from "react";
-import { observer } from "mobx-react";
-import Link from "next/link";
-// icons
-import { Settings2 } from "lucide-react";
-// types
-import { TInstanceAuthenticationMethodKeys } from "@plane/types";
-// ui
-import { ToggleSwitch, getButtonStyling } from "@plane/ui";
-// helpers
-import { cn } from "@/helpers/common.helper";
-// hooks
-import { useInstance } from "@/hooks/store";
-
-type Props = {
-  disabled: boolean;
-  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
-};
-
-export const GitlabConfiguration: React.FC<Props> = observer((props) => {
-  const { disabled, updateConfig } = props;
-  // store
-  const { formattedConfig } = useInstance();
-  // derived values
-  const enableGitlabConfig = formattedConfig?.IS_GITLAB_ENABLED ?? "";
-  const isGitlabConfigured = !!formattedConfig?.GITLAB_CLIENT_ID && !!formattedConfig?.GITLAB_CLIENT_SECRET;
-
-  return (
-    <>
-      {isGitlabConfigured ? (
-        <div className="flex items-center gap-4">
-          <Link href="/authentication/gitlab" className={cn(getButtonStyling("link-primary", "md"), "font-medium")}>
-            Edit
-          </Link>
-          <ToggleSwitch
-            value={Boolean(parseInt(enableGitlabConfig))}
-            onChange={() => {
-              Boolean(parseInt(enableGitlabConfig)) === true
-                ? updateConfig("IS_GITLAB_ENABLED", "0")
-                : updateConfig("IS_GITLAB_ENABLED", "1");
-            }}
-            size="sm"
-            disabled={disabled}
-          />
-        </div>
-      ) : (
-        <Link
-          href="/authentication/gitlab"
-          className={cn(getButtonStyling("neutral-primary", "sm"), "text-custom-text-300")}
-        >
-          <Settings2 className="h-4 w-4 p-0.5 text-custom-text-300/80" />
-          Configure
-        </Link>
-      )}
-    </>
-  );
-});

admin/core/components/authentication/google-config.tsx

@@ -1,59 +0,0 @@
-"use client";
-
-import React from "react";
-import { observer } from "mobx-react";
-import Link from "next/link";
-// icons
-import { Settings2 } from "lucide-react";
-// types
-import { TInstanceAuthenticationMethodKeys } from "@plane/types";
-// ui
-import { ToggleSwitch, getButtonStyling } from "@plane/ui";
-// helpers
-import { cn } from "@/helpers/common.helper";
-// hooks
-import { useInstance } from "@/hooks/store";
-
-type Props = {
-  disabled: boolean;
-  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
-};
-
-export const GoogleConfiguration: React.FC<Props> = observer((props) => {
-  const { disabled, updateConfig } = props;
-  // store
-  const { formattedConfig } = useInstance();
-  // derived values
-  const enableGoogleConfig = formattedConfig?.IS_GOOGLE_ENABLED ?? "";
-  const isGoogleConfigured = !!formattedConfig?.GOOGLE_CLIENT_ID && !!formattedConfig?.GOOGLE_CLIENT_SECRET;
-
-  return (
-    <>
-      {isGoogleConfigured ? (
-        <div className="flex items-center gap-4">
-          <Link href="/authentication/google" className={cn(getButtonStyling("link-primary", "md"), "font-medium")}>
-            Edit
-          </Link>
-          <ToggleSwitch
-            value={Boolean(parseInt(enableGoogleConfig))}
-            onChange={() => {
-              Boolean(parseInt(enableGoogleConfig)) === true
-                ? updateConfig("IS_GOOGLE_ENABLED", "0")
-                : updateConfig("IS_GOOGLE_ENABLED", "1");
-            }}
-            size="sm"
-            disabled={disabled}
-          />
-        </div>
-      ) : (
-        <Link
-          href="/authentication/google"
-          className={cn(getButtonStyling("neutral-primary", "sm"), "text-custom-text-300")}
-        >
-          <Settings2 className="h-4 w-4 p-0.5 text-custom-text-300/80" />
-          Configure
-        </Link>
-      )}
-    </>
-  );
-});

admin/core/components/authentication/index.ts

@@ -1,6 +0,0 @@
-export * from "./email-config-switch";
-export * from "./password-config-switch";
-export * from "./authentication-method-card";
-export * from "./gitlab-config";
-export * from "./github-config";
-export * from "./google-config";

admin/core/components/common/breadcrumb-link.tsx

@@ -1,38 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { Tooltip } from "@plane/ui";
-
-type Props = {
-  label?: string;
-  href?: string;
-  icon?: React.ReactNode | undefined;
-};
-
-export const BreadcrumbLink: React.FC<Props> = (props) => {
-  const { href, label, icon } = props;
-  return (
-    <Tooltip tooltipContent={label} position="bottom">
-      <li className="flex items-center space-x-2" tabIndex={-1}>
-        <div className="flex flex-wrap items-center gap-2.5">
-          {href ? (
-            <Link
-              className="flex items-center gap-1 text-sm font-medium text-custom-text-300 hover:text-custom-text-100"
-              href={href}
-            >
-              {icon && (
-                <div className="flex h-5 w-5 items-center justify-center overflow-hidden !text-[1rem]">{icon}</div>
-              )}
-              <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
-            </Link>
-          ) : (
-            <div className="flex cursor-default items-center gap-1 text-sm font-medium text-custom-text-100">
-              {icon && <div className="flex h-5 w-5 items-center justify-center overflow-hidden">{icon}</div>}
-              <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
-            </div>
-          )}
-        </div>
-      </li>
-    </Tooltip>
-  );
-};

admin/core/components/common/code-block.tsx

@@ -1,21 +0,0 @@
-import { cn } from "@/helpers/common.helper";
-
-type TProps = {
-  children: React.ReactNode;
-  className?: string;
-  darkerShade?: boolean;
-};
-
-export const CodeBlock = ({ children, className, darkerShade }: TProps) => (
-  <span
-    className={cn(
-      "px-0.5 text-xs text-custom-text-300 bg-custom-background-90 font-semibold rounded-md border border-custom-border-100",
-      {
-        "text-custom-text-200 bg-custom-background-80 border-custom-border-200": darkerShade,
-      },
-      className
-    )}
-  >
-    {children}
-  </span>
-);