fix render-if-visible-hoc's style calculation performance issue (#5647)

* chore: intake order by options updated

* fix: intake filters icon and spacing

* chore: code refactor

.env.example

@@ -8,6 +8,13 @@ PGDATA="/var/lib/postgresql/data"
 REDIS_HOST="plane-redis"
 REDIS_PORT="6379"
 
+# RabbitMQ Settings
+RABBITMQ_HOST="plane-mq"
+RABBITMQ_PORT="5672"
+RABBITMQ_USER="plane"
+RABBITMQ_PASSWORD="plane"
+RABBITMQ_VHOST="plane"
+
 # AWS Settings
 AWS_REGION=""
 AWS_ACCESS_KEY_ID="access-key"

.gitattributes

@@ -0,0 +1 @@
+*.sh text eol=lf

.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: [srinivaspendem, pushya22]
+assignees: [vihar, 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: [srinivaspendem, pushya22]
+assignees: [vihar, pushya22]
 body:
 - type: markdown
   attributes:

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

@@ -2,6 +2,11 @@ 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 }}
@@ -16,37 +21,46 @@ jobs:
       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 }}
-      build_base: ${{ steps.changed_files.outputs.base_any_changed }}
+      image_tag: ${{ steps.set_env_variables.outputs.IMAGE_TAG }}
 
     steps:
       - id: set_env_variables
         name: Set Environment Variables
         run: |
-          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 "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
 
-      - name: Get changed files
-        id: changed_files
-        uses: tj-actions/changed-files@v42
-        with:
-          files_yaml: |
-            base: 
-              - aio/Dockerfile.base
-
-  base_build_push:
-    if: ${{ needs.base_build_setup.outputs.build_base == 'true' || github.event_name == 'workflow_dispatch' || needs.base_build_setup.outputs.gh_branch_name == 'master' }}
+  full_base_build_push:
     runs-on: ubuntu-latest
     needs: [base_build_setup]
     env:
-      BASE_IMG_TAG: makeplane/plane-aio-base:${{ needs.base_build_setup.outputs.gh_branch_name }}
-      TARGET_BRANCH: ${{ needs.base_build_setup.outputs.gh_branch_name }}
+      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 }}
@@ -55,15 +69,6 @@ jobs:
       - name: Check out the repo
         uses: actions/checkout@v4
 
-      - name: Set Docker Tag
-        run: |
-          if [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            TAG=makeplane/plane-aio-base:latest
-          else
-            TAG=${{ env.BASE_IMG_TAG }}
-          fi
-          echo "BASE_IMG_TAG=${TAG}" >> $GITHUB_ENV
-
       - name: Login to Docker Hub
         uses: docker/login-action@v3
         with:
@@ -81,10 +86,53 @@ jobs:
         uses: docker/build-push-action@v5.1.0
         with:
           context: ./aio
-          file: ./aio/Dockerfile.base
+          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 }}

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

@@ -0,0 +1,207 @@
+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

@@ -2,6 +2,12 @@ name: Branch Build
 
 on:
   workflow_dispatch:
+    inputs:
+      arm64:
+        description: "Build for ARM64 architecture"
+        required: false
+        default: false
+        type: boolean
   push:
     branches:
       - master
@@ -11,6 +17,8 @@ on:
 
 env:
   TARGET_BRANCH: ${{ github.ref_name || github.event.release.target_commitish }}
+  ARM64_BUILD: ${{ github.event.inputs.arm64 }}
+  IS_PRERELEASE: ${{ github.event.release.prerelease }}
 
 jobs:
   branch_build_setup:
@@ -27,12 +35,14 @@ jobs:
       build_admin: ${{ steps.changed_files.outputs.admin_any_changed }}
       build_space: ${{ steps.changed_files.outputs.space_any_changed }}
       build_web: ${{ steps.changed_files.outputs.web_any_changed }}
+      build_live: ${{ steps.changed_files.outputs.live_any_changed }}
+      flat_branch_name: ${{ steps.set_env_variables.outputs.FLAT_BRANCH_NAME }}
 
     steps:
       - id: set_env_variables
         name: Set Environment Variables
         run: |
-          if [ "${{ env.TARGET_BRANCH }}" == "master" ] || [ "${{ github.event_name }}" == "release" ]; then
+          if [ "${{ env.TARGET_BRANCH }}" == "master" ] || [ "${{ env.ARM64_BUILD }}" == "true" ] || ([ "${{ github.event_name }}" == "release" ] && [ "${{ env.IS_PRERELEASE }}" != "true" ]); then
             echo "BUILDX_DRIVER=cloud" >> $GITHUB_OUTPUT
             echo "BUILDX_VERSION=lab:latest" >> $GITHUB_OUTPUT
             echo "BUILDX_PLATFORMS=linux/amd64,linux/arm64" >> $GITHUB_OUTPUT
@@ -44,6 +54,8 @@ jobs:
             echo "BUILDX_ENDPOINT=" >> $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
@@ -79,13 +91,21 @@ jobs:
               - 'yarn.lock'
               - 'tsconfig.json'
               - 'turbo.json'
+            live:
+              - live/**
+              - packages/**
+              - 'package.json'
+              - 'yarn.lock'
+              - 'tsconfig.json'
+              - 'turbo.json'
 
   branch_build_push_web:
     if: ${{ needs.branch_build_setup.outputs.build_web == 'true' || github.event_name == 'workflow_dispatch' || github.event_name == 'release' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
+    name: Build-Push Web Docker Image
     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: makeplane/plane-frontend:${{ 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 }}
@@ -95,7 +115,10 @@ 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=makeplane/plane-frontend:${{ github.event.release.tag_name }}
+            if [ "${{ env.IS_PRERELEASE }}" != "true" ]; then
+              TAG=${TAG},makeplane/plane-frontend:stable
+            fi
           elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
             TAG=makeplane/plane-frontend:latest
           else
@@ -134,10 +157,11 @@ jobs:
 
   branch_build_push_admin:
     if: ${{ needs.branch_build_setup.outputs.build_admin== 'true' || github.event_name == 'workflow_dispatch' || github.event_name == 'release' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
+    name: Build-Push Admin Docker Image
     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: makeplane/plane-admin:${{ 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 }}
@@ -147,7 +171,10 @@ 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=makeplane/plane-admin:${{ github.event.release.tag_name }}
+            if [ "${{ env.IS_PRERELEASE }}" != "true" ]; then
+              TAG=${TAG},makeplane/plane-admin:stable
+            fi
           elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
             TAG=makeplane/plane-admin:latest
           else
@@ -186,10 +213,11 @@ jobs:
 
   branch_build_push_space:
     if: ${{ needs.branch_build_setup.outputs.build_space == 'true' || github.event_name == 'workflow_dispatch' || github.event_name == 'release' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
+    name: Build-Push Space Docker Image
     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: makeplane/plane-space:${{ 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 }}
@@ -199,7 +227,10 @@ 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=makeplane/plane-space:${{ github.event.release.tag_name }}
+            if [ "${{ env.IS_PRERELEASE }}" != "true" ]; then
+              TAG=${TAG},makeplane/plane-space:stable
+            fi
           elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
             TAG=makeplane/plane-space:latest
           else
@@ -238,10 +269,11 @@ jobs:
 
   branch_build_push_apiserver:
     if: ${{ needs.branch_build_setup.outputs.build_apiserver == 'true' || github.event_name == 'workflow_dispatch' || github.event_name == 'release' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
+    name: Build-Push API Server Docker Image
     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: makeplane/plane-backend:${{ 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 }}
@@ -251,7 +283,10 @@ 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=makeplane/plane-backend:${{ github.event.release.tag_name }}
+            if [ "${{ env.IS_PRERELEASE }}" != "true" ]; then
+              TAG=${TAG},makeplane/plane-backend:stable
+            fi
           elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
             TAG=makeplane/plane-backend:latest
           else
@@ -288,12 +323,69 @@ jobs:
           DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
           DOCKER_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
 
-  branch_build_push_proxy:
-    if: ${{ needs.branch_build_setup.outputs.build_proxy == 'true' || github.event_name == 'workflow_dispatch' || github.event_name == 'release' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
+  branch_build_push_live:
+    if: ${{ needs.branch_build_setup.outputs.build_live == 'true' || github.event_name == 'workflow_dispatch' || github.event_name == 'release' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
+    name: Build-Push Live Collaboration Docker Image
     runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     env:
-      PROXY_TAG: makeplane/plane-proxy:${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      LIVE_TAG: makeplane/plane-live:${{ 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 Live Docker Tag
+        run: |
+          if [ "${{ github.event_name }}" == "release" ]; then
+            TAG=makeplane/plane-live:${{ github.event.release.tag_name }}
+            if [ "${{ github.event.release.prerelease }}" != "true" ]; then
+              TAG=${TAG},makeplane/plane-live:stable
+            fi
+          elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
+            TAG=makeplane/plane-live:latest
+          else
+            TAG=${{ env.LIVE_TAG }}
+          fi
+          echo "LIVE_TAG=${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 Live Server to Docker Hub
+        uses: docker/build-push-action@v5.1.0
+        with:
+          context: .
+          file: ./live/Dockerfile.live
+          platforms: ${{ env.BUILDX_PLATFORMS }}
+          tags: ${{ env.LIVE_TAG }}
+          push: true
+        env:
+          DOCKER_BUILDKIT: 1
+          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+          DOCKER_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
+
+  branch_build_push_proxy:
+    if: ${{ needs.branch_build_setup.outputs.build_proxy == 'true' || github.event_name == 'workflow_dispatch' || github.event_name == 'release' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
+    name: Build-Push Proxy Docker Image
+    runs-on: ubuntu-20.04
+    needs: [branch_build_setup]
+    env:
+      PROXY_TAG: makeplane/plane-proxy:${{ 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 }}
@@ -303,7 +395,10 @@ 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=makeplane/plane-proxy:${{ github.event.release.tag_name }}
+            if [ "${{ env.IS_PRERELEASE }}" != "true" ]; then
+              TAG=${TAG},makeplane/plane-proxy:stable
+            fi
           elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
             TAG=makeplane/plane-proxy:latest
           else

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

@@ -8,7 +8,6 @@ on:
 
 env:
   CURRENT_BRANCH: ${{ github.ref_name }}
-  SOURCE_BRANCH: ${{ vars.SYNC_SOURCE_BRANCH_NAME }} # The sync branch such as "sync/ce"
   TARGET_BRANCH: ${{ vars.SYNC_TARGET_BRANCH_NAME }} # The target branch that you would like to merge changes like develop
   GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }} # Personal access token required to modify contents and workflows
   REVIEWER: ${{ vars.SYNC_PR_REVIEWER }}
@@ -16,22 +15,7 @@ env:
   ACCOUNT_USER_EMAIL: ${{ vars.ACCOUNT_USER_EMAIL }}
 
 jobs:
-  Check_Branch:
-    runs-on: ubuntu-latest
-    outputs:
-      BRANCH_MATCH: ${{ steps.check-branch.outputs.MATCH }}
-    steps:
-      - name: Check if current branch matches the secret
-        id: check-branch
-        run: |
-          if [ "$CURRENT_BRANCH" = "$SOURCE_BRANCH" ]; then
-            echo "MATCH=true" >> $GITHUB_OUTPUT
-          else
-            echo "MATCH=false" >> $GITHUB_OUTPUT
-          fi
   Create_PR:
-    if: ${{ needs.Check_Branch.outputs.BRANCH_MATCH == 'true' }}
-    needs: [Check_Branch]
     runs-on: ubuntu-latest
     permissions:
       pull-requests: write
@@ -59,11 +43,11 @@ jobs:
       - name: Create PR to Target Branch
         run: |
           # get all pull requests and check if there is already a PR
-          PR_EXISTS=$(gh pr list --base $TARGET_BRANCH --head $SOURCE_BRANCH --state open --json number | jq '.[] | .number')
+          PR_EXISTS=$(gh pr list --base $TARGET_BRANCH --head $CURRENT_BRANCH --state open --json number | jq '.[] | .number')
           if [ -n "$PR_EXISTS" ]; then
             echo "Pull Request already exists: $PR_EXISTS"
           else
             echo "Creating new pull request"
-            PR_URL=$(gh pr create --base $TARGET_BRANCH --head $SOURCE_BRANCH --title "sync: community changes" --body "")
+            PR_URL=$(gh pr create --base $TARGET_BRANCH --head $CURRENT_BRANCH --title "sync: community changes" --body "")
             echo "Pull Request created: $PR_URL"
           fi

.github/workflows/feature-deployment.yml

@@ -3,189 +3,108 @@ name: Feature Preview
 on:
   workflow_dispatch:
     inputs:
-      web-build:
+      base_tag_name:
+        description: 'Base Tag Name'
         required: false
-        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
+        default: 'preview'
 
 env:
-  BUILD_WEB: ${{ github.event.inputs.web-build }}
-  BUILD_SPACE: ${{ github.event.inputs.space-build }}
-  BUILD_ADMIN: ${{ github.event.inputs.admin-build }}
+  TARGET_BRANCH: ${{ github.ref_name }}
 
 jobs:
-  setup-feature-build:
-    name: Feature Build Setup
+  branch_build_setup:
+    name: Build Setup
     runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        run: |
-          echo "BUILD_WEB=$BUILD_WEB" 
-          echo "BUILD_SPACE=$BUILD_SPACE"
-          echo "BUILD_ADMIN=$BUILD_ADMIN"
     outputs:
-      web-build: ${{ env.BUILD_WEB}}
-      space-build: ${{env.BUILD_SPACE}}
-      admin-build: ${{env.BUILD_ADMIN}}
+      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 }}
 
-  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
+      - id: set_env_variables
+        name: Set Environment Variables
         run: |
-          sudo apt-get update
-          sudo apt-get install -y python3-pip
-          pip3 install awscli
-      - name: Checkout
+          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
-        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
+  full_build_push:
+    runs-on: ubuntu-20.04
+    needs: [branch_build_setup]
     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 }}
+      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 }}
     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
+      AIO_IMAGE_TAGS: ${{ env.AIO_IMAGE_TAGS }}
 
   feature-deploy:
-    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,
-      ]
+    needs: [branch_build_setup, full_build_push]
     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: |
@@ -213,54 +132,37 @@ jobs:
           ./get_helm.sh
       - name: App Deploy
         run: |
-          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
+          helm --kube-insecure-skip-tls-verify repo add feature-preview ${{ vars.FEATURE_PREVIEW_HELM_CHART_URL }} 
 
-          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
+          APP_NAMESPACE="${{ vars.FEATURE_PREVIEW_NAMESPACE }}"
 
-          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
+          helm --kube-insecure-skip-tls-verify  uninstall \
+            ${{ env.DEPLOYMENT_NAME }} \
+            --namespace $APP_NAMESPACE \
+            --timeout 10m0s \
+            --wait \
+            --ignore-not-found
 
-          if [ ${{ env.BUILD_WEB }} == true ] || [ ${{ env.BUILD_SPACE }} == true ] || [ ${{ env.BUILD_ADMIN }} == true ]; then
+          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 }} )
 
-            helm --kube-insecure-skip-tls-verify repo add feature-preview ${{ vars.FEATURE_PREVIEW_HELM_CHART_URL }} 
+          APP_NAME=$(echo $METADATA | jq -r '.name')
 
-            APP_NAMESPACE="${{ vars.FEATURE_PREVIEW_NAMESPACE }}"
-            DEPLOY_SCRIPT_URL="${{ vars.FEATURE_PREVIEW_DEPLOY_SCRIPT_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')
 
-            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
+          echo "****************************************"
+          echo "APP NAME ::: $APP_NAME"
+          echo "INGRESS HOSTNAME ::: $INGRESS_HOSTNAME"
+          echo "****************************************"

.github/workflows/repo-sync.yml

@@ -4,7 +4,7 @@ on:
   workflow_dispatch:
   push:
     branches:
-      - develop
+      - preview
 
 env:
   SOURCE_BRANCH_NAME: ${{ github.ref_name }}
@@ -35,8 +35,9 @@ jobs:
         env:
           GH_TOKEN: ${{ secrets.ACCESS_TOKEN }}
         run: |
+          RUN_ID="${{ github.run_id }}"
           TARGET_REPO="${{ vars.SYNC_TARGET_REPO }}"
-          TARGET_BRANCH="${{ vars.SYNC_TARGET_BRANCH_NAME }}"
+          TARGET_BRANCH="sync/${RUN_ID}"
           SOURCE_BRANCH="${{ env.SOURCE_BRANCH_NAME }}"
 
           git checkout $SOURCE_BRANCH

.idx/dev.nix

@@ -0,0 +1,16 @@
+{ pkgs, ... }: {
+
+  # Which nixpkgs channel to use.
+  channel = "stable-23.11"; # or "unstable"
+
+  # Use https://search.nixos.org/packages to find packages
+  packages = [
+    pkgs.nodejs_20
+    pkgs.python3
+  ];
+
+  services.docker.enable = true;
+  services.postgres.enable = true;
+  services.redis.enable = true;
+
+}

ENV_SETUP.md

@@ -1,6 +1,5 @@
 # Environment Variables
 
-​
 Environment variables are distributed in various files. Please refer them carefully.
 
 ## {PROJECT_FOLDER}/.env
@@ -9,17 +8,13 @@ File is available in the project root folder​
 
 ```
 # Database Settings
-PGUSER="plane"
-PGPASSWORD="plane"
-PGHOST="plane-db"
-PGDATABASE="plane"
-DATABASE_URL=postgresql://${PGUSER}:${PGPASSWORD}@${PGHOST}/${PGDATABASE}
-​
+POSTGRES_USER="plane"
+POSTGRES_PASSWORD="plane"
+POSTGRES_DB="plane"
+PGDATA="/var/lib/postgresql/data"
 # 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"
@@ -29,63 +24,39 @@ 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
-PGUSER="plane"
-PGPASSWORD="plane"
-PGHOST="plane-db"
-PGDATABASE="plane"
-DATABASE_URL=postgresql://${PGUSER}:${PGPASSWORD}@${PGHOST}/${PGDATABASE}
-​
+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}
 # 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"
@@ -95,35 +66,25 @@ 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
-
-# Github
-GITHUB_CLIENT_SECRET="" # For fetching release notes
-​
+DOCKERIZED=1 # deprecated
 # set to 1 If using the pre-configured minio setup
 USE_MINIO=1
-​
 # Nginx Configuration
 NGINX_PORT=80
-​
-​
-# SignUps
-ENABLE_SIGNUP="1"
-​
-# Email Redirection URL
+# Email redirections and minio domain settings
 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/app/ai/layout.tsx

@@ -3,7 +3,7 @@ import { Metadata } from "next";
 import { AdminLayout } from "@/layouts/admin-layout";
 
 export const metadata: Metadata = {
-  title: "AI Settings - God Mode",
+  title: "Artificial Intelligence Settings - Plane Web",
 };
 
 export default function AILayout({ children }: { children: ReactNode }) {

admin/app/ai/page.tsx

@@ -1,10 +1,8 @@
 "use client";
 
-import { observer } from "mobx-react-lite";
+import { observer } from "mobx-react";
 import useSWR from "swr";
 import { Loader } from "@plane/ui";
-// components
-import { PageHeader } from "@/components/core";
 // hooks
 import { useInstance } from "@/hooks/store";
 // components
@@ -18,7 +16,6 @@ const InstanceAIPage = observer(() => {
 
   return (
     <>
-      <PageHeader title="Artificial Intelligence - God Mode" />
       <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
         <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
           <div className="text-xl font-medium text-custom-text-100">AI features for all your workspaces</div>

admin/app/authentication/github/form.tsx

@@ -10,6 +10,7 @@ import { IFormattedInstanceConfiguration, TInstanceGithubAuthenticationConfigura
 import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
 // components
 import {
+  CodeBlock,
   ConfirmDiscardModal,
   ControllerInput,
   CopyField,
@@ -102,7 +103,8 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
       url: originURL,
       description: (
         <>
-          We will auto-generate this. Paste this into the Authorized origin URL field{" "}
+          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"
@@ -121,7 +123,8 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
       url: `${originURL}/auth/github/callback/`,
       description: (
         <>
-          We will auto-generate this. Paste this into your Authorized Callback URI field{" "}
+          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"
@@ -143,8 +146,8 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
       .then((response = []) => {
         setToast({
           type: TOAST_TYPE.SUCCESS,
-          title: "Success",
-          message: "Github Configuration Settings updated successfully",
+          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,
@@ -170,8 +173,8 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
       />
       <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>
+          <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}
@@ -201,8 +204,8 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
             </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>
+            <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} />
               ))}

admin/app/authentication/github/page.tsx

@@ -1,13 +1,14 @@
 "use client";
 
 import { useState } from "react";
-import { observer } from "mobx-react-lite";
+import { observer } from "mobx-react";
 import Image from "next/image";
 import { useTheme } from "next-themes";
 import useSWR from "swr";
 import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
 // components
-import { PageHeader } from "@/components/core";
+import { AuthenticationMethodCard } from "@/components/authentication";
+import { PageHeader } from "@/components/common";
 // helpers
 import { resolveGeneralTheme } from "@/helpers/common.helper";
 // hooks
@@ -16,7 +17,6 @@ import { useInstance } from "@/hooks/store";
 import githubLightModeImage from "@/public/logos/github-black.png";
 import githubDarkModeImage from "@/public/logos/github-white.png";
 // local components
-import { AuthenticationMethodCard } from "../components";
 import { InstanceGithubConfigForm } from "./form";
 
 const InstanceGithubAuthenticationPage = observer(() => {
@@ -63,7 +63,7 @@ const InstanceGithubAuthenticationPage = observer(() => {
   };
   return (
     <>
-      <PageHeader title="Authentication - God Mode" />
+      <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">
           <AuthenticationMethodCard
@@ -93,7 +93,7 @@ const InstanceGithubAuthenticationPage = observer(() => {
             withBorder={false}
           />
         </div>
-        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md p-4">
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
           {formattedConfig ? (
             <InstanceGithubConfigForm config={formattedConfig} />
           ) : (

admin/app/authentication/gitlab/form.tsx

@@ -8,6 +8,7 @@ import { IFormattedInstanceConfiguration, TInstanceGitlabAuthenticationConfigura
 import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
 // components
 import {
+  CodeBlock,
   ConfirmDiscardModal,
   ControllerInput,
   CopyField,
@@ -54,7 +55,7 @@ export const InstanceGitlabConfigForm: FC<Props> = (props) => {
       label: "Host",
       description: (
         <>
-          This is the <b>GitLab host</b> to use for login, <b>including scheme</b>.
+          This is either https://gitlab.com or the <CodeBlock>domain.tld</CodeBlock> where you host GitLab.
         </>
       ),
       placeholder: "https://gitlab.com",
@@ -116,7 +117,8 @@ export const InstanceGitlabConfigForm: FC<Props> = (props) => {
       url: `${originURL}/auth/gitlab/callback/`,
       description: (
         <>
-          We will auto-generate this. Paste this into the <b>Redirect URI</b> field of your{" "}
+          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"
@@ -139,8 +141,8 @@ export const InstanceGitlabConfigForm: FC<Props> = (props) => {
       .then((response = []) => {
         setToast({
           type: TOAST_TYPE.SUCCESS,
-          title: "Success",
-          message: "GitLab Configuration Settings updated successfully",
+          title: "Done!",
+          message: "Your GitLab authentication is configured. You should test it now.",
         });
         reset({
           GITLAB_HOST: response.find((item) => item.key === "GITLAB_HOST")?.value,
@@ -167,8 +169,8 @@ export const InstanceGitlabConfigForm: FC<Props> = (props) => {
       />
       <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>
+          <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}
@@ -198,8 +200,8 @@ export const InstanceGitlabConfigForm: FC<Props> = (props) => {
             </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>
+            <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} />
               ))}

admin/app/authentication/gitlab/page.tsx

@@ -1,18 +1,18 @@
 "use client";
 
 import { useState } from "react";
-import { observer } from "mobx-react-lite";
+import { observer } from "mobx-react";
 import Image from "next/image";
 import useSWR from "swr";
 import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
 // components
-import { PageHeader } from "@/components/core";
+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 { AuthenticationMethodCard } from "../components";
 import { InstanceGitlabConfigForm } from "./form";
 
 const InstanceGitlabAuthenticationPage = observer(() => {
@@ -57,7 +57,7 @@ const InstanceGitlabAuthenticationPage = observer(() => {
   };
   return (
     <>
-      <PageHeader title="Authentication - God Mode" />
+      <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
@@ -80,7 +80,7 @@ const InstanceGitlabAuthenticationPage = observer(() => {
             withBorder={false}
           />
         </div>
-        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md p-4">
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
           {formattedConfig ? (
             <InstanceGitlabConfigForm config={formattedConfig} />
           ) : (

admin/app/authentication/google/form.tsx

@@ -9,6 +9,7 @@ import { IFormattedInstanceConfiguration, TInstanceGoogleAuthenticationConfigura
 import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
 // components
 import {
+  CodeBlock,
   ConfirmDiscardModal,
   ControllerInput,
   CopyField,
@@ -101,7 +102,8 @@ export const InstanceGoogleConfigForm: FC<Props> = (props) => {
       url: originURL,
       description: (
         <p>
-          We will auto-generate this. Paste this into your Authorized JavaScript origins field. For this OAuth client{" "}
+          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"
@@ -119,7 +121,8 @@ export const InstanceGoogleConfigForm: FC<Props> = (props) => {
       url: `${originURL}/auth/google/callback/`,
       description: (
         <p>
-          We will auto-generate this. Paste this into your Authorized Redirect URI field. For this OAuth client{" "}
+          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"
@@ -140,8 +143,8 @@ export const InstanceGoogleConfigForm: FC<Props> = (props) => {
       .then((response = []) => {
         setToast({
           type: TOAST_TYPE.SUCCESS,
-          title: "Success",
-          message: "Google Configuration Settings updated successfully",
+          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,
@@ -167,8 +170,8 @@ export const InstanceGoogleConfigForm: FC<Props> = (props) => {
       />
       <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>
+          <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}
@@ -198,8 +201,8 @@ export const InstanceGoogleConfigForm: FC<Props> = (props) => {
             </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>
+            <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} />
               ))}

admin/app/authentication/google/page.tsx

@@ -1,18 +1,18 @@
 "use client";
 
 import { useState } from "react";
-import { observer } from "mobx-react-lite";
+import { observer } from "mobx-react";
 import Image from "next/image";
 import useSWR from "swr";
 import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
 // components
-import { PageHeader } from "@/components/core";
+import { AuthenticationMethodCard } from "@/components/authentication";
+import { PageHeader } from "@/components/common";
 // hooks
 import { useInstance } from "@/hooks/store";
 // icons
 import GoogleLogo from "@/public/logos/google-logo.svg";
 // local components
-import { AuthenticationMethodCard } from "../components";
 import { InstanceGoogleConfigForm } from "./form";
 
 const InstanceGoogleAuthenticationPage = observer(() => {
@@ -57,7 +57,7 @@ const InstanceGoogleAuthenticationPage = observer(() => {
   };
   return (
     <>
-      <PageHeader title="Authentication - God Mode" />
+      <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">
           <AuthenticationMethodCard
@@ -81,7 +81,7 @@ const InstanceGoogleAuthenticationPage = observer(() => {
             withBorder={false}
           />
         </div>
-        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md p-4">
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
           {formattedConfig ? (
             <InstanceGoogleConfigForm config={formattedConfig} />
           ) : (

admin/app/authentication/layout.tsx

@@ -3,7 +3,7 @@ import { Metadata } from "next";
 import { AdminLayout } from "@/layouts/admin-layout";
 
 export const metadata: Metadata = {
-  title: "Authentication Settings - God Mode",
+  title: "Authentication Settings - Plane Web",
 };
 
 export default function AuthenticationLayout({ children }: { children: ReactNode }) {

admin/app/authentication/page.tsx

@@ -1,41 +1,16 @@
 "use client";
 
 import { useState } from "react";
-import { observer } from "mobx-react-lite";
-import Image from "next/image";
-import { useTheme } from "next-themes";
+import { observer } from "mobx-react";
 import useSWR from "swr";
-import { Mails, KeyRound } from "lucide-react";
 import { TInstanceConfigurationKeys } from "@plane/types";
 import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
-// components
-import { PageHeader } from "@/components/core";
-// hooks
 // helpers
-import { cn, resolveGeneralTheme } from "@/helpers/common.helper";
+import { cn } from "@/helpers/common.helper";
+// hooks
 import { useInstance } from "@/hooks/store";
-// images
-import githubLightModeImage from "@/public/logos/github-black.png";
-import githubDarkModeImage from "@/public/logos/github-white.png";
-import GitlabLogo from "@/public/logos/gitlab-logo.svg";
-import GoogleLogo from "@/public/logos/google-logo.svg";
-// local components
-import {
-  AuthenticationMethodCard,
-  EmailCodesConfiguration,
-  PasswordLoginConfiguration,
-  GitlabConfiguration,
-  GithubConfiguration,
-  GoogleConfiguration,
-} from "./components";
-
-type TInstanceAuthenticationMethodCard = {
-  key: string;
-  name: string;
-  description: string;
-  icon: JSX.Element;
-  config: JSX.Element;
-};
+// plane admin components
+import { AuthenticationModes } from "@/plane-admin/components/authentication";
 
 const InstanceAuthenticationPage = observer(() => {
   // store
@@ -45,8 +20,6 @@ const InstanceAuthenticationPage = observer(() => {
 
   // state
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
-  // theme
-  const { resolvedTheme } = useTheme();
   // derived values
   const enableSignUpConfig = formattedConfig?.ENABLE_SIGNUP ?? "";
 
@@ -60,7 +33,7 @@ const InstanceAuthenticationPage = observer(() => {
     const updateConfigPromise = updateInstanceConfigurations(payload);
 
     setPromiseToast(updateConfigPromise, {
-      loading: "Saving Configuration...",
+      loading: "Saving configuration",
       success: {
         title: "Success",
         message: () => "Configuration saved successfully",
@@ -81,58 +54,11 @@ 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} />,
-    },
-    {
-      key: "gitlab",
-      name: "GitLab",
-      description: "Allow members to login or sign up to plane with their GitLab accounts.",
-      icon: <Image src={GitlabLogo} height={20} width={20} alt="GitLab Logo" />,
-      config: <GitlabConfiguration disabled={isSubmitting} updateConfig={updateConfig} />,
-    },
-  ];
-
   return (
     <>
-      <PageHeader title="Authentication - God Mode" />
       <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
         <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
-          <div className="text-xl font-medium text-custom-text-100">Manage authentication for your instance</div>
+          <div className="text-xl font-medium text-custom-text-100">Manage authentication modes 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>
@@ -140,15 +66,12 @@ const InstanceAuthenticationPage = observer(() => {
         <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
           {formattedConfig ? (
             <div className="space-y-3">
-              <div className="text-lg font-medium pb-1">Sign-up configuration</div>
               <div className={cn("w-full flex items-center gap-14 rounded")}>
                 <div className="flex grow items-center gap-4">
                   <div className="grow">
-                    <div className={cn("font-medium leading-5 text-custom-text-100 text-sm")}>
-                      Allow anyone to sign up without invite
-                    </div>
+                    <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 disable self sign ups.
+                      Toggling this off will only let users sign up when they are invited.
                     </div>
                   </div>
                 </div>
@@ -168,16 +91,7 @@ const InstanceAuthenticationPage = observer(() => {
                 </div>
               </div>
               <div className="text-lg font-medium pt-6">Authentication modes</div>
-              {authenticationMethodsCard.map((method) => (
-                <AuthenticationMethodCard
-                  key={method.key}
-                  name={method.name}
-                  description={method.description}
-                  icon={method.icon}
-                  config={method.config}
-                  disabled={isSubmitting}
-                />
-              ))}
+              <AuthenticationModes disabled={isSubmitting} updateConfig={updateConfig} />
             </div>
           ) : (
             <Loader className="space-y-10">

admin/app/email/layout.tsx

@@ -7,7 +7,7 @@ interface EmailLayoutProps {
 }
 
 export const metadata: Metadata = {
-  title: "Email Settings - God Mode",
+  title: "Email Settings - Plane Web",
 };
 
 export default function EmailLayout({ children }: EmailLayoutProps) {

admin/app/email/page.tsx

@@ -1,10 +1,8 @@
 "use client";
 
-import { observer } from "mobx-react-lite";
+import { observer } from "mobx-react";
 import useSWR from "swr";
 import { Loader } from "@plane/ui";
-// components
-import { PageHeader } from "@/components/core";
 // hooks
 import { useInstance } from "@/hooks/store";
 // components
@@ -18,7 +16,6 @@ const InstanceEmailPage = observer(() => {
 
   return (
     <>
-      <PageHeader title="Email - God Mode" />
       <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
         <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
           <div className="text-xl font-medium text-custom-text-100">Secure emails from your own instance</div>

admin/app/general/form.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { FC } from "react";
-import { observer } from "mobx-react-lite";
+import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 import { Telescope } from "lucide-react";
 // types
@@ -9,8 +9,9 @@ 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";
+import { IntercomConfig } from "./intercom";
+// hooks
 
 export interface IGeneralConfigurationForm {
   instance: IInstance;
@@ -20,11 +21,13 @@ export interface IGeneralConfigurationForm {
 export const GeneralConfigurationForm: FC<IGeneralConfigurationForm> = observer((props) => {
   const { instance, instanceAdmins } = props;
   // hooks
-  const { updateInstanceInfo } = useInstance();
+  const { instanceConfigurations, updateInstanceInfo, updateInstanceConfigurations } = useInstance();
+
   // form data
   const {
     handleSubmit,
     control,
+    watch,
     formState: { errors, isSubmitting },
   } = useForm<Partial<IInstance>>({
     defaultValues: {
@@ -36,7 +39,16 @@ export const GeneralConfigurationForm: FC<IGeneralConfigurationForm> = observer(
   const onSubmit = async (formData: Partial<IInstance>) => {
     const payload: Partial<IInstance> = { ...formData };
 
-    console.log("payload", payload);
+    // 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(() =>
@@ -74,6 +86,7 @@ export const GeneralConfigurationForm: FC<IGeneralConfigurationForm> = observer(
               value={instanceAdmins[0]?.user_detail?.email ?? ""}
               placeholder="Admin email"
               className="w-full cursor-not-allowed !text-custom-text-400"
+              autoComplete="on"
               disabled
             />
           </div>
@@ -93,7 +106,8 @@ export const GeneralConfigurationForm: FC<IGeneralConfigurationForm> = observer(
       </div>
 
       <div className="space-y-3">
-        <div className="text-lg font-medium">Telemetry</div>
+        <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">

admin/app/general/intercom.tsx

@@ -0,0 +1,82 @@
+"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

@@ -3,7 +3,7 @@ import { Metadata } from "next";
 import { AdminLayout } from "@/layouts/admin-layout";
 
 export const metadata: Metadata = {
-  title: "General Settings - God Mode",
+  title: "General Settings - Plane Web",
 };
 
 export default function GeneralLayout({ children }: { children: ReactNode }) {

admin/app/general/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { observer } from "mobx-react-lite";
+import { observer } from "mobx-react";
 // hooks
 import { useInstance } from "@/hooks/store";
 // components
@@ -7,7 +7,7 @@ import { GeneralConfigurationForm } from "./form";
 
 function GeneralPage() {
   const { instance, instanceAdmins } = useInstance();
-  console.log("instance", instance);
+
   return (
     <>
       <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">

admin/app/image/layout.tsx

@@ -7,7 +7,7 @@ interface ImageLayoutProps {
 }
 
 export const metadata: Metadata = {
-  title: "Images Settings - God Mode",
+  title: "Images Settings - Plane Web",
 };
 
 export default function ImageLayout({ children }: ImageLayoutProps) {

admin/app/image/page.tsx

@@ -1,10 +1,8 @@
 "use client";
 
-import { observer } from "mobx-react-lite";
+import { observer } from "mobx-react";
 import useSWR from "swr";
 import { Loader } from "@plane/ui";
-// components
-import { PageHeader } from "@/components/core";
 // hooks
 import { useInstance } from "@/hooks/store";
 // local
@@ -18,7 +16,6 @@ const InstanceImagePage = observer(() => {
 
   return (
     <>
-      <PageHeader title="Image - God Mode" />
       <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
         <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
           <div className="text-xl font-medium text-custom-text-100">Third-party image libraries</div>

admin/app/layout.tsx

@@ -16,10 +16,12 @@ import { UserProvider } from "@/lib/user-provider";
 // styles
 import "./globals.css";
 
-export default function RootLayout({ children }: { children: ReactNode }) {
-  // themes
+const ToastWithTheme = () => {
   const { resolvedTheme } = useTheme();
+  return <Toast theme={resolveGeneralTheme(resolvedTheme)} />;
+};
 
+export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en">
       <head>
@@ -31,7 +33,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
       </head>
       <body className={`antialiased`}>
         <ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>
-          <Toast theme={resolveGeneralTheme(resolvedTheme)} />
+          <ToastWithTheme />
           <SWRConfig value={SWR_CONFIG}>
             <StoreProvider>
               <InstanceProvider>

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

@@ -0,0 +1,70 @@
+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 { getBaseAuthenticationModes } from "@/helpers/authentication.helper";
+// plane admin components
+import { UpgradeButton } from "@/plane-admin/components/common";
+// 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

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

admin/ce/components/common/index.ts

@@ -0,0 +1 @@
+export * from "./upgrade-button";

admin/ce/components/common/upgrade-button.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import React from "react";
+// icons
+import { SquareArrowOutUpRight } from "lucide-react";
+// ui
+import { getButtonStyling } from "@plane/ui";
+// helpers
+import { cn } from "@/helpers/common.helper";
+
+export const UpgradeButton: React.FC = () => (
+  <a href="https://plane.so/one" target="_blank" className={cn(getButtonStyling("primary", "sm"))}>
+    Available on One
+    <SquareArrowOutUpRight className="h-3.5 w-3.5 p-0.5" />
+  </a>
+);

admin/ce/store/root.store.ts

@@ -0,0 +1,19 @@
+import { enableStaticRendering } from "mobx-react";
+// stores
+import { CoreRootStore } from "@/store/root.store";
+
+enableStaticRendering(typeof window === "undefined");
+
+export class RootStore extends CoreRootStore {
+  constructor() {
+    super();
+  }
+
+  hydrate(initialData: any) {
+    super.hydrate(initialData);
+  }
+
+  resetOnSignOut() {
+    super.resetOnSignOut();
+  }
+}

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

@@ -1,69 +0,0 @@
-"use client";
-
-// helpers
-import { CircleCheck } from "lucide-react";
-import { cn } from "@/helpers/common.helper";
-import { getPasswordStrength } from "@/helpers/password.helper";
-// icons
-
-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">
-      <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/common/toast.tsx

@@ -1,13 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-// ui
-import { Toast as ToastComponent } from "@plane/ui";
-// helpers
-import { resolveGeneralTheme } from "@/helpers/common.helper";
-
-export const Toast = () => {
-  const { theme } = useTheme();
-
-  return <ToastComponent theme={resolveGeneralTheme(theme)} />;
-};

admin/components/core/index.ts

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

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { FC, useState, useRef } from "react";
-import { observer } from "mobx-react-lite";
+import { observer } from "mobx-react";
 import Link from "next/link";
 import { ExternalLink, FileText, HelpCircle, MoveLeft } from "lucide-react";
 import { Transition } from "@headlessui/react";
@@ -96,7 +96,7 @@ export const HelpSection: FC = observer(() => {
           leaveTo="transform opacity-0 scale-95"
         >
           <div
-            className={`absolute bottom-2 min-w-[10rem] ${
+            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}

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

@@ -1,12 +1,13 @@
 "use client";
 
 import { FC, useEffect, useRef } from "react";
-import { observer } from "mobx-react-lite";
-// hooks
-import { HelpSection, SidebarMenu, SidebarDropdown } from "@/components/admin-sidebar";
-import { useTheme } from "@/hooks/store";
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
+import { observer } from "mobx-react";
+// plane helpers
+import { useOutsideClickDetector } from "@plane/helpers";
 // components
+import { HelpSection, SidebarMenu, SidebarDropdown } from "@/components/admin-sidebar";
+// hooks
+import { useTheme } from "@/hooks/store";
 
 export interface IInstanceSidebar {}
 
@@ -41,10 +42,10 @@ export const InstanceSidebar: FC<IInstanceSidebar> = observer(() => {
     <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-[250px]" : ""}
-        sm:${isSidebarCollapsed ? "-ml-[250px]" : ""}
-        md:ml-0 ${isSidebarCollapsed ? "w-[70px]" : "w-[250px]"}
-        lg:ml-0 ${isSidebarCollapsed ? "w-[70px]" : "w-[250px]"}
+        ${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">

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { Fragment, useEffect, useState } from "react";
-import { observer } from "mobx-react-lite";
+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";

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { FC } from "react";
-import { observer } from "mobx-react-lite";
+import { observer } from "mobx-react";
 // hooks
 import { Menu } from "lucide-react";
 import { useTheme } from "@/hooks/store";

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { observer } from "mobx-react-lite";
+import { observer } from "mobx-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { Image, BrainCog, Cog, Lock, Mail } from "lucide-react";

admin/core/components/auth-header.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { FC } from "react";
-import { observer } from "mobx-react-lite";
+import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
 // mobx
 // ui
@@ -10,7 +10,7 @@ import { Settings } from "lucide-react";
 import { Breadcrumbs } from "@plane/ui";
 // components
 import { SidebarHamburgerToggle } from "@/components/admin-sidebar";
-import { BreadcrumbLink } from "components/common";
+import { BreadcrumbLink } from "@/components/common";
 
 export const InstanceHeader: FC = observer(() => {
   const pathName = usePathname();

admin/core/components/authentication/auth-banner.tsx

@@ -0,0 +1,29 @@
+import { FC } from "react";
+import { Info, X } from "lucide-react";
+// helpers
+import { TAuthErrorInfo } from "@/helpers/authentication.helper";
+
+type TAuthBanner = {
+  bannerData: TAuthErrorInfo | undefined;
+  handleBannerData?: (bannerData: TAuthErrorInfo | undefined) => void;
+};
+
+export const AuthBanner: FC<TAuthBanner> = (props) => {
+  const { bannerData, handleBannerData } = props;
+
+  if (!bannerData) return <></>;
+  return (
+    <div className="relative flex items-center p-2 rounded-md gap-2 border border-custom-primary-100/50 bg-custom-primary-100/10">
+      <div className="w-4 h-4 flex-shrink-0 relative flex justify-center items-center">
+        <Info size={16} className="text-custom-primary-100" />
+      </div>
+      <div className="w-full text-sm font-medium text-custom-primary-100">{bannerData?.message}</div>
+      <div
+        className="relative ml-auto w-6 h-6 rounded-sm flex justify-center items-center transition-all cursor-pointer hover:bg-custom-primary-100/20 text-custom-primary-100/80"
+        onClick={() => handleBannerData && handleBannerData(undefined)}
+      >
+        <X className="w-4 h-4 flex-shrink-0" />
+      </div>
+    </div>
+  );
+};

admin/core/components/authentication/authentication-method-card.tsx

@@ -11,10 +11,11 @@ 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 } = props;
+  const { name, description, icon, config, disabled = false, withBorder = true, unavailable = false } = props;
 
   return (
     <div
@@ -22,7 +23,11 @@ export const AuthenticationMethodCard: FC<Props> = (props) => {
         "px-4 py-3 border border-custom-border-200": withBorder,
       })}
     >
-      <div className="flex grow items-center gap-4">
+      <div
+        className={cn("flex grow items-center gap-4", {
+          "opacity-50": unavailable,
+        })}
+      >
         <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/core/components/authentication/email-config-switch.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { observer } from "mobx-react-lite";
+import { observer } from "mobx-react";
 // hooks
 import { TInstanceAuthenticationMethodKeys } from "@plane/types";
 import { ToggleSwitch } from "@plane/ui";

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

@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { observer } from "mobx-react-lite";
+import { observer } from "mobx-react";
 import Link from "next/link";
 // icons
 import { Settings2 } from "lucide-react";

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

@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { observer } from "mobx-react-lite";
+import { observer } from "mobx-react";
 import Link from "next/link";
 // icons
 import { Settings2 } from "lucide-react";

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

@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { observer } from "mobx-react-lite";
+import { observer } from "mobx-react";
 import Link from "next/link";
 // icons
 import { Settings2 } from "lucide-react";

admin/core/components/authentication/index.ts

@@ -1,3 +1,4 @@
+export * from "./auth-banner";
 export * from "./email-config-switch";
 export * from "./password-config-switch";
 export * from "./authentication-method-card";

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

@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { observer } from "mobx-react-lite";
+import { observer } from "mobx-react";
 // hooks
 import { TInstanceAuthenticationMethodKeys } from "@plane/types";
 import { ToggleSwitch } from "@plane/ui";

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

@@ -0,0 +1,21 @@
+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>
+);

admin/core/components/common/controller-input.tsx

@@ -38,7 +38,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} {!required && "(optional)"}
+        {label}
       </h4>
       <div className="relative">
         <Controller
@@ -80,7 +80,7 @@ export const ControllerInput: React.FC<Props> = (props) => {
             </button>
           ))}
       </div>
-      {description && <p className="text-xs text-custom-text-300">{description}</p>}
+      {description && <p className="pt-0.5 text-xs text-custom-text-300">{description}</p>}
     </div>
   );
 };

admin/core/components/common/index.ts

@@ -6,4 +6,5 @@ export * from "./password-strength-meter";
 export * from "./banner";
 export * from "./empty-state";
 export * from "./logo-spinner";
-export * from "./toast";
+export * from "./page-header";
+export * from "./code-block";

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

@@ -0,0 +1,94 @@
+"use client";
+
+import { FC, useMemo } from "react";
+// import { CircleCheck } from "lucide-react";
+// helpers
+import { cn } from "@/helpers/common.helper";
+import {
+  E_PASSWORD_STRENGTH,
+  // PASSWORD_CRITERIA,
+  getPasswordStrength,
+} from "@/helpers/password.helper";
+
+type TPasswordStrengthMeter = {
+  password: string;
+  isFocused?: boolean;
+};
+
+export const PasswordStrengthMeter: FC<TPasswordStrengthMeter> = (props) => {
+  const { password, isFocused = false } = props;
+  // derived values
+  const strength = useMemo(() => getPasswordStrength(password), [password]);
+  const strengthBars = useMemo(() => {
+    switch (strength) {
+      case E_PASSWORD_STRENGTH.EMPTY: {
+        return {
+          bars: [`bg-custom-text-100`, `bg-custom-text-100`, `bg-custom-text-100`],
+          text: "Please enter your password.",
+          textColor: "text-custom-text-100",
+        };
+      }
+      case E_PASSWORD_STRENGTH.LENGTH_NOT_VALID: {
+        return {
+          bars: [`bg-red-500`, `bg-custom-text-100`, `bg-custom-text-100`],
+          text: "Password length should me more than 8 characters.",
+          textColor: "text-red-500",
+        };
+      }
+      case E_PASSWORD_STRENGTH.STRENGTH_NOT_VALID: {
+        return {
+          bars: [`bg-red-500`, `bg-custom-text-100`, `bg-custom-text-100`],
+          text: "Password is weak.",
+          textColor: "text-red-500",
+        };
+      }
+      case E_PASSWORD_STRENGTH.STRENGTH_VALID: {
+        return {
+          bars: [`bg-green-500`, `bg-green-500`, `bg-green-500`],
+          text: "Password is strong.",
+          textColor: "text-green-500",
+        };
+      }
+      default: {
+        return {
+          bars: [`bg-custom-text-100`, `bg-custom-text-100`, `bg-custom-text-100`],
+          text: "Please enter your password.",
+          textColor: "text-custom-text-100",
+        };
+      }
+    }
+  }, [strength]);
+
+  const isPasswordMeterVisible = isFocused ? true : strength === E_PASSWORD_STRENGTH.STRENGTH_VALID ? false : true;
+
+  if (!isPasswordMeterVisible) return <></>;
+  return (
+    <div className="w-full space-y-2 pt-2">
+      <div className="space-y-1.5">
+        <div className="relative flex items-center gap-2">
+          {strengthBars?.bars.map((color, index) => (
+            <div key={`${color}-${index}`} className={cn("w-full h-1 rounded-full", color)} />
+          ))}
+        </div>
+        <div className={cn(`text-xs font-medium text-custom-text-100`, strengthBars?.textColor)}>
+          {strengthBars?.text}
+        </div>
+      </div>
+
+      {/* <div className="relative flex flex-wrap gap-x-4 gap-y-2">
+        {PASSWORD_CRITERIA.map((criteria) => (
+          <div
+            key={criteria.key}
+            className={cn(
+              "relative flex items-center gap-1 text-xs",
+              criteria.isCriteriaValid(password) ? `text-green-500/70` : "text-custom-text-300"
+            )}
+          >
+            <CircleCheck width={14} height={14} />
+            {criteria.label}
+          </div>
+        ))}
+      </div> */}
+    </div>
+  );
+};

admin/core/components/instance/setup-form.tsx

@@ -10,7 +10,7 @@ import { Button, Checkbox, Input, Spinner } from "@plane/ui";
 import { Banner, PasswordStrengthMeter } from "@/components/common";
 // helpers
 import { API_BASE_URL } from "@/helpers/common.helper";
-import { getPasswordStrength } from "@/helpers/password.helper";
+import { E_PASSWORD_STRENGTH, getPasswordStrength } from "@/helpers/password.helper";
 // services
 import { AuthService } from "@/services/auth.service";
 
@@ -121,7 +121,7 @@ export const InstanceSetupForm: FC = (props) => {
       formData.first_name &&
       formData.email &&
       formData.password &&
-      getPasswordStrength(formData.password) >= 3 &&
+      getPasswordStrength(formData.password) === E_PASSWORD_STRENGTH.STRENGTH_VALID &&
       formData.password === formData.confirm_password
         ? false
         : true,
@@ -174,6 +174,7 @@ export const InstanceSetupForm: FC = (props) => {
                 placeholder="Wilber"
                 value={formData.first_name}
                 onChange={(e) => handleFormChange("first_name", e.target.value)}
+                autoComplete="on"
                 autoFocus
               />
             </div>
@@ -190,6 +191,7 @@ export const InstanceSetupForm: FC = (props) => {
                 placeholder="Wright"
                 value={formData.last_name}
                 onChange={(e) => handleFormChange("last_name", e.target.value)}
+                autoComplete="on"
               />
             </div>
           </div>
@@ -208,6 +210,7 @@ export const InstanceSetupForm: FC = (props) => {
               value={formData.email}
               onChange={(e) => handleFormChange("email", e.target.value)}
               hasError={errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL ? true : false}
+              autoComplete="on"
             />
             {errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL && errorData.message && (
               <p className="px-1 text-xs text-red-500">{errorData.message}</p>
@@ -247,6 +250,7 @@ export const InstanceSetupForm: FC = (props) => {
                 hasError={errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD ? true : false}
                 onFocus={() => setIsPasswordInputFocused(true)}
                 onBlur={() => setIsPasswordInputFocused(false)}
+                autoComplete="on"
               />
               {showPassword.password ? (
                 <button
@@ -271,7 +275,7 @@ export const InstanceSetupForm: FC = (props) => {
             {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} />}
+            <PasswordStrengthMeter password={formData.password} isFocused={isPasswordInputFocused} />
           </div>
 
           <div className="w-full space-y-1">

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

@@ -8,8 +8,16 @@ import { Button, Input, Spinner } from "@plane/ui";
 // components
 import { Banner } from "@/components/common";
 // helpers
+import {
+  authErrorHandler,
+  EAuthenticationErrorCodes,
+  EErrorAlertType,
+  TAuthErrorInfo,
+} from "@/helpers/authentication.helper";
+
 import { API_BASE_URL } from "@/helpers/common.helper";
 import { AuthService } from "@/services/auth.service";
+import { AuthBanner } from "../authentication";
 // ui
 // icons
 
@@ -53,12 +61,11 @@ export const InstanceSignInForm: FC = (props) => {
   const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
   const [formData, setFormData] = useState<TFormData>(defaultFromData);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [errorInfo, setErrorInfo] = useState<TAuthErrorInfo | undefined>(undefined);
 
   const handleFormChange = (key: keyof TFormData, value: string | boolean) =>
     setFormData((prev) => ({ ...prev, [key]: value }));
 
-  console.log("csrfToken", csrfToken);
-
   useEffect(() => {
     if (csrfToken === undefined)
       authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
@@ -93,6 +100,15 @@ export const InstanceSignInForm: FC = (props) => {
     [formData.email, formData.password, isSubmitting]
   );
 
+  useEffect(() => {
+    if (errorCode) {
+      const errorDetail = authErrorHandler(errorCode?.toString() as EAuthenticationErrorCodes);
+      if (errorDetail) {
+        setErrorInfo(errorDetail);
+      }
+    }
+  }, [errorCode]);
+
   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 flex flex-col space-y-6">
@@ -105,7 +121,11 @@ export const InstanceSignInForm: FC = (props) => {
           </p>
         </div>
 
-        {errorData.type && errorData?.message && <Banner type="error" message={errorData?.message} />}
+        {errorData.type && errorData?.message ? (
+          <Banner type="error" message={errorData?.message} />
+        ) : (
+          <>{errorInfo && <AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />}</>
+        )}
 
         <form
           className="space-y-4"
@@ -129,6 +149,7 @@ export const InstanceSignInForm: FC = (props) => {
               placeholder="name@company.com"
               value={formData.email}
               onChange={(e) => handleFormChange("email", e.target.value)}
+              autoComplete="on"
               autoFocus
             />
           </div>
@@ -147,6 +168,7 @@ export const InstanceSignInForm: FC = (props) => {
                 placeholder="Enter your password"
                 value={formData.password}
                 onChange={(e) => handleFormChange("password", e.target.value)}
+                autoComplete="on"
               />
               {showPassword ? (
                 <button

admin/core/components/new-user-popup.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { observer } from "mobx-react-lite";
+import { observer } from "mobx-react";
 import Image from "next/image";
 import { useTheme as nextUseTheme } from "next-themes";
 // ui

admin/core/layouts/admin-layout.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { FC, ReactNode, useEffect } from "react";
-import { observer } from "mobx-react-lite";
+import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";
 // components
 import { InstanceSidebar } from "@/components/admin-sidebar";
@@ -18,6 +18,7 @@ export const AdminLayout: FC<TAdminLayout> = observer((props) => {
   const { children } = props;
   // router
   const router = useRouter();
+  // store hooks
   const { isUserLoggedIn } = useUser();
 
   useEffect(() => {

admin/core/lib/instance-provider.tsx

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from "react";
-import { observer } from "mobx-react-lite";
+import { observer } from "mobx-react";
 import useSWR from "swr";
 // components
 import { LogoSpinner } from "@/components/common";

admin/core/lib/store-provider.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { ReactNode, createContext } from "react";
-// store
-import { RootStore } from "@/store/root.store";
+// plane admin store
+import { RootStore } from "@/plane-admin/store/root.store";
 
 let rootStore = new RootStore();
 

admin/core/lib/user-provider.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { FC, ReactNode, useEffect } from "react";
-import { observer } from "mobx-react-lite";
+import { observer } from "mobx-react";
 import useSWR from "swr";
 // hooks
 import { useInstance, useTheme, useUser } from "@/hooks/store";

admin/core/services/auth.service.ts

@@ -1,7 +1,7 @@
 // helpers
 import { API_BASE_URL } from "helpers/common.helper";
 // services
-import { APIService } from "services/api.service";
+import { APIService } from "@/services/api.service";
 
 type TCsrfTokenResponse = {
   csrf_token: string;

admin/core/services/user.service.ts

@@ -1,9 +1,9 @@
 // helpers
 import { API_BASE_URL } from "helpers/common.helper";
-// services
-import { APIService } from "services/api.service";
 // types
 import type { IUser } from "@plane/types";
+// services
+import { APIService } from "@/services/api.service";
 
 interface IUserSession extends IUser {
   isAuthenticated: boolean;

admin/core/store/instance.store.ts

@@ -9,11 +9,11 @@ import {
   IInstanceConfig,
 } from "@plane/types";
 // helpers
-import { EInstanceStatus, TInstanceStatus } from "@/helpers";
+import { EInstanceStatus, TInstanceStatus } from "@/helpers/instance.helper";
 // services
 import { InstanceService } from "@/services/instance.service";
 // root store
-import { RootStore } from "@/store/root.store";
+import { CoreRootStore } from "@/store/root.store";
 
 export interface IInstanceStore {
   // issues
@@ -46,7 +46,7 @@ export class InstanceStore implements IInstanceStore {
   // service
   instanceService;
 
-  constructor(private store: RootStore) {
+  constructor(private store: CoreRootStore) {
     makeObservable(this, {
       // observable
       isLoading: observable.ref,

admin/core/store/root.store.ts

@@ -1,4 +1,4 @@
-import { enableStaticRendering } from "mobx-react-lite";
+import { enableStaticRendering } from "mobx-react";
 // stores
 import { IInstanceStore, InstanceStore } from "./instance.store";
 import { IThemeStore, ThemeStore } from "./theme.store";
@@ -6,7 +6,7 @@ import { IUserStore, UserStore } from "./user.store";
 
 enableStaticRendering(typeof window === "undefined");
 
-export class RootStore {
+export abstract class CoreRootStore {
   theme: IThemeStore;
   instance: IInstanceStore;
   user: IUserStore;

admin/core/store/theme.store.ts

@@ -1,6 +1,6 @@
 import { action, observable, makeObservable } from "mobx";
 // root store
-import { RootStore } from "@/store/root.store";
+import { CoreRootStore } from "@/store/root.store";
 
 type TTheme = "dark" | "light";
 export interface IThemeStore {
@@ -21,7 +21,7 @@ export class ThemeStore implements IThemeStore {
   isSidebarCollapsed: boolean | undefined = undefined;
   theme: string | undefined = undefined;
 
-  constructor(private store: RootStore) {
+  constructor(private store: CoreRootStore) {
     makeObservable(this, {
       // observables
       isNewUserPopup: observable.ref,

admin/core/store/user.store.ts

@@ -1,12 +1,12 @@
 import { action, observable, runInAction, makeObservable } from "mobx";
 import { IUser } from "@plane/types";
 // helpers
-import { EUserStatus, TUserStatus } from "@/helpers";
+import { EUserStatus, TUserStatus } from "@/helpers/user.helper";
 // services
 import { AuthService } from "@/services/auth.service";
 import { UserService } from "@/services/user.service";
 // root store
-import { RootStore } from "@/store/root.store";
+import { CoreRootStore } from "@/store/root.store";
 
 export interface IUserStore {
   // observables
@@ -31,7 +31,7 @@ export class UserStore implements IUserStore {
   userService;
   authService;
 
-  constructor(private store: RootStore) {
+  constructor(private store: CoreRootStore) {
     makeObservable(this, {
       // observables
       isLoading: observable.ref,

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

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

admin/ee/components/authentication/index.ts

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

admin/ee/components/common/index.ts

@@ -0,0 +1 @@
+export * from "ce/components/common";

admin/ee/store/root.store.ts

@@ -0,0 +1 @@
+export * from "ce/store/root.store";

admin/helpers/authentication.helper.tsx

@@ -1,7 +1,24 @@
 import { ReactNode } from "react";
+import Image from "next/image";
 import Link from "next/link";
+import { KeyRound, Mails } from "lucide-react";
+// types
+import { TGetBaseAuthenticationModeProps, TInstanceAuthenticationModes } from "@plane/types";
+// components
+import {
+  EmailCodesConfiguration,
+  GithubConfiguration,
+  GitlabConfiguration,
+  GoogleConfiguration,
+  PasswordLoginConfiguration,
+} from "@/components/authentication";
 // helpers
-import { SUPPORT_EMAIL } from "./common.helper";
+import { SUPPORT_EMAIL, resolveGeneralTheme } from "@/helpers/common.helper";
+// images
+import githubLightModeImage from "@/public/logos/github-black.png";
+import githubDarkModeImage from "@/public/logos/github-white.png";
+import GitlabLogo from "@/public/logos/gitlab-logo.svg";
+import GoogleLogo from "@/public/logos/google-logo.svg";
 
 export enum EPageTypes {
   PUBLIC = "PUBLIC",
@@ -134,3 +151,53 @@ export const authErrorHandler = (
 
   return undefined;
 };
+
+export const getBaseAuthenticationModes: (props: TGetBaseAuthenticationModeProps) => TInstanceAuthenticationModes[] = ({
+  disabled,
+  updateConfig,
+  resolvedTheme,
+}) => [
+    {
+      key: "unique-codes",
+      name: "Unique codes",
+      description:
+        "Log in or sign up for Plane using codes sent via email. You need to have set up SMTP to use this method.",
+      icon: <Mails className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
+      config: <EmailCodesConfiguration disabled={disabled} updateConfig={updateConfig} />,
+    },
+    {
+      key: "passwords-login",
+      name: "Passwords",
+      description: "Allow members to create accounts with passwords and use it with their email addresses to sign in.",
+      icon: <KeyRound className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
+      config: <PasswordLoginConfiguration disabled={disabled} updateConfig={updateConfig} />,
+    },
+    {
+      key: "google",
+      name: "Google",
+      description: "Allow members to log in or sign up for Plane with their Google accounts.",
+      icon: <Image src={GoogleLogo} height={20} width={20} alt="Google Logo" />,
+      config: <GoogleConfiguration disabled={disabled} updateConfig={updateConfig} />,
+    },
+    {
+      key: "github",
+      name: "GitHub",
+      description: "Allow members to log in or sign up for Plane with their GitHub accounts.",
+      icon: (
+        <Image
+          src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
+          height={20}
+          width={20}
+          alt="GitHub Logo"
+        />
+      ),
+      config: <GithubConfiguration disabled={disabled} updateConfig={updateConfig} />,
+    },
+    {
+      key: "gitlab",
+      name: "GitLab",
+      description: "Allow members to log in or sign up to plane with their GitLab accounts.",
+      icon: <Image src={GitlabLogo} height={20} width={20} alt="GitLab Logo" />,
+      config: <GitlabConfiguration disabled={disabled} updateConfig={updateConfig} />,
+    },
+  ];

admin/helpers/password.helper.ts

@@ -1,16 +1,67 @@
 import zxcvbn from "zxcvbn";
 
-export const isPasswordCriteriaMet = (password: string) => {
-  const criteria = [password.length >= 8, /[A-Z]/.test(password), /\d/.test(password), /[!@#$%^&*]/.test(password)];
+export enum E_PASSWORD_STRENGTH {
+  EMPTY = "empty",
+  LENGTH_NOT_VALID = "length_not_valid",
+  STRENGTH_NOT_VALID = "strength_not_valid",
+  STRENGTH_VALID = "strength_valid",
+}
 
-  return criteria.every((criterion) => criterion);
-};
-
-export const getPasswordStrength = (password: string) => {
-  if (password.length === 0) return 0;
-  if (password.length < 8) return 1;
-  if (!isPasswordCriteriaMet(password)) return 2;
-
-  const result = zxcvbn(password);
-  return result.score;
+const PASSWORD_MIN_LENGTH = 8;
+// const PASSWORD_NUMBER_REGEX = /\d/;
+// const PASSWORD_CHAR_CAPS_REGEX = /[A-Z]/;
+// const PASSWORD_SPECIAL_CHAR_REGEX = /[`!@#$%^&*()_\-+=\[\]{};':"\\|,.<>\/?~ ]/;
+
+export const PASSWORD_CRITERIA = [
+  {
+    key: "min_8_char",
+    label: "Min 8 characters",
+    isCriteriaValid: (password: string) => password.length >= PASSWORD_MIN_LENGTH,
+  },
+  // {
+  //   key: "min_1_upper_case",
+  //   label: "Min 1 upper-case letter",
+  //   isCriteriaValid: (password: string) => PASSWORD_NUMBER_REGEX.test(password),
+  // },
+  // {
+  //   key: "min_1_number",
+  //   label: "Min 1 number",
+  //   isCriteriaValid: (password: string) => PASSWORD_CHAR_CAPS_REGEX.test(password),
+  // },
+  // {
+  //   key: "min_1_special_char",
+  //   label: "Min 1 special character",
+  //   isCriteriaValid: (password: string) => PASSWORD_SPECIAL_CHAR_REGEX.test(password),
+  // },
+];
+
+export const getPasswordStrength = (password: string): E_PASSWORD_STRENGTH => {
+  let passwordStrength: E_PASSWORD_STRENGTH = E_PASSWORD_STRENGTH.EMPTY;
+
+  if (!password || password === "" || password.length <= 0) {
+    return passwordStrength;
+  }
+
+  if (password.length >= PASSWORD_MIN_LENGTH) {
+    passwordStrength = E_PASSWORD_STRENGTH.STRENGTH_NOT_VALID;
+  } else {
+    passwordStrength = E_PASSWORD_STRENGTH.LENGTH_NOT_VALID;
+    return passwordStrength;
+  }
+
+  const passwordCriteriaValidation = PASSWORD_CRITERIA.map((criteria) => criteria.isCriteriaValid(password)).every(
+    (criterion) => criterion
+  );
+  const passwordStrengthScore = zxcvbn(password).score;
+
+  if (passwordCriteriaValidation === false || passwordStrengthScore <= 2) {
+    passwordStrength = E_PASSWORD_STRENGTH.STRENGTH_NOT_VALID;
+    return passwordStrength;
+  }
+
+  if (passwordCriteriaValidation === true && passwordStrengthScore >= 3) {
+    passwordStrength = E_PASSWORD_STRENGTH.STRENGTH_VALID;
+  }
+
+  return passwordStrength;
 };

admin/hooks/use-outside-click-detector.tsx

@@ -1,21 +0,0 @@
-"use client";
-
-import React, { useEffect } from "react";
-
-const useOutsideClickDetector = (ref: React.RefObject<HTMLElement>, callback: () => void) => {
-  const handleClick = (event: MouseEvent) => {
-    if (ref.current && !ref.current.contains(event.target as Node)) {
-      callback();
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener("mousedown", handleClick);
-
-    return () => {
-      document.removeEventListener("mousedown", handleClick);
-    };
-  });
-};
-
-export default useOutsideClickDetector;

admin/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

admin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "admin",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "private": true,
   "scripts": {
     "dev": "turbo run develop",
@@ -12,23 +12,25 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.7.19",
+    "@plane/constants": "*",
+    "@plane/helpers": "*",
     "@plane/types": "*",
     "@plane/ui": "*",
     "@tailwindcss/typography": "^0.5.9",
     "@types/lodash": "^4.17.0",
     "autoprefixer": "10.4.14",
-    "axios": "^1.6.7",
+    "axios": "^1.7.4",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
     "lucide-react": "^0.356.0",
     "mobx": "^6.12.0",
-    "mobx-react-lite": "^4.0.5",
-    "next": "^14.2.3",
+    "mobx-react": "^9.1.1",
+    "next": "^14.2.12",
     "next-themes": "^0.2.1",
     "postcss": "^8.4.38",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.51.0",
+    "react-hook-form": "7.51.5",
     "swr": "^2.2.4",
     "tailwindcss": "3.3.2",
     "uuid": "^9.0.1",
@@ -44,6 +46,6 @@
     "eslint-config-custom": "*",
     "tailwind-config-custom": "*",
     "tsconfig": "*",
-    "typescript": "^5.4.2"
+    "typescript": "5.4.5"
   }
 }