dev: exception handling

handled x86_64 along with amd64

.env.example

@@ -1,14 +1,12 @@
 # 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=""

README.md

@@ -63,7 +63,7 @@ Thats it!
 
 ## 🍙 Self Hosting
 
-For self hosting environment setup, visit the [Self Hosting](https://docs.plane.so/self-hosting/docker-compose) documentation page
+For self hosting environment setup, visit the [Self Hosting](https://docs.plane.so/docker-compose) documentation page
 
 ## 🚀 Features
 

apiserver/.env.example

@@ -8,11 +8,11 @@ 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"
+DATABASE_URL=postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_HOST}/${POSTGRES_DB}
 
 # Oauth variables
 GOOGLE_CLIENT_ID=""

apiserver/bin/beat

@@ -2,4 +2,5 @@
 set -e
 
 python manage.py wait_for_db
+python manage.py wait_for_migrations
 celery -A plane beat -l info

apiserver/bin/takeoff

@@ -1,7 +1,7 @@
 #!/bin/bash
 set -e
 python manage.py wait_for_db
-python manage.py migrate
+python manage.py safe_migrate
 
 # Create the default bucket
 #!/bin/bash

apiserver/bin/takeoff.local

@@ -1,7 +1,7 @@
 #!/bin/bash
 set -e
 python manage.py wait_for_db
-python manage.py migrate
+python manage.py safe_migrate
 
 # Create the default bucket
 #!/bin/bash

apiserver/bin/worker

@@ -2,4 +2,5 @@
 set -e
 
 python manage.py wait_for_db
+python manage.py wait_for_migrations
 celery -A plane worker -l info

apiserver/plane/app/urls/cycle.py

@@ -8,10 +8,16 @@ from plane.app.views import (
     CycleFavoriteViewSet,
     TransferCycleIssueEndpoint,
     CycleUserPropertiesEndpoint,
+    ActiveCycleEndpoint
 )
 
 
 urlpatterns = [
+    path(
+        "workspaces/<str:slug>/active-cycles/",
+        ActiveCycleEndpoint.as_view(),
+        name="workspace-active-cycle",
+    ),
     path(
         "workspaces/<str:slug>/projects/<uuid:project_id>/cycles/",
         CycleViewSet.as_view(

apiserver/plane/app/views/__init__.py

@@ -62,6 +62,7 @@ from .cycle import (
     CycleFavoriteViewSet,
     TransferCycleIssueEndpoint,
     CycleUserPropertiesEndpoint,
+    ActiveCycleEndpoint,
 )
 from .asset import FileAssetEndpoint, UserAssetsEndpoint, FileAssetViewSet
 from .issue import (

apiserver/plane/app/views/cycle.py

@@ -39,6 +39,7 @@ from plane.app.serializers import (
 from plane.app.permissions import (
     ProjectEntityPermission,
     ProjectLitePermission,
+    WorkspaceUserPermission
 )
 from plane.db.models import (
     User,
@@ -909,3 +910,235 @@ class CycleUserPropertiesEndpoint(BaseAPIView):
         )
         serializer = CycleUserPropertiesSerializer(cycle_properties)
         return Response(serializer.data, status=status.HTTP_200_OK)
+
+
+class ActiveCycleEndpoint(BaseAPIView):
+    permission_classes = [
+        WorkspaceUserPermission,
+    ]
+    def get(self, request, slug):
+        subquery = CycleFavorite.objects.filter(
+            user=self.request.user,
+            cycle_id=OuterRef("pk"),
+            project_id=self.kwargs.get("project_id"),
+            workspace__slug=self.kwargs.get("slug"),
+        )
+        active_cycles = (
+            Cycle.objects.filter(
+                workspace__slug=slug,
+                project__project_projectmember__member=self.request.user,
+                start_date__lte=timezone.now(),
+                end_date__gte=timezone.now(),
+            )
+            .select_related("project")
+            .select_related("workspace")
+            .select_related("owned_by")
+            .annotate(is_favorite=Exists(subquery))
+            .annotate(
+                total_issues=Count(
+                    "issue_cycle",
+                    filter=Q(
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
+                )
+            )
+            .annotate(
+                completed_issues=Count(
+                    "issue_cycle__issue__state__group",
+                    filter=Q(
+                        issue_cycle__issue__state__group="completed",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
+                )
+            )
+            .annotate(
+                cancelled_issues=Count(
+                    "issue_cycle__issue__state__group",
+                    filter=Q(
+                        issue_cycle__issue__state__group="cancelled",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
+                )
+            )
+            .annotate(
+                started_issues=Count(
+                    "issue_cycle__issue__state__group",
+                    filter=Q(
+                        issue_cycle__issue__state__group="started",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
+                )
+            )
+            .annotate(
+                unstarted_issues=Count(
+                    "issue_cycle__issue__state__group",
+                    filter=Q(
+                        issue_cycle__issue__state__group="unstarted",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
+                )
+            )
+            .annotate(
+                backlog_issues=Count(
+                    "issue_cycle__issue__state__group",
+                    filter=Q(
+                        issue_cycle__issue__state__group="backlog",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
+                )
+            )
+            .annotate(total_estimates=Sum("issue_cycle__issue__estimate_point"))
+            .annotate(
+                completed_estimates=Sum(
+                    "issue_cycle__issue__estimate_point",
+                    filter=Q(
+                        issue_cycle__issue__state__group="completed",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
+                )
+            )
+            .annotate(
+                started_estimates=Sum(
+                    "issue_cycle__issue__estimate_point",
+                    filter=Q(
+                        issue_cycle__issue__state__group="started",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
+                )
+            )
+            .annotate(
+                status=Case(
+                    When(
+                        Q(start_date__lte=timezone.now())
+                        & Q(end_date__gte=timezone.now()),
+                        then=Value("CURRENT"),
+                    ),
+                    When(start_date__gt=timezone.now(), then=Value("UPCOMING")),
+                    When(end_date__lt=timezone.now(), then=Value("COMPLETED")),
+                    When(
+                        Q(start_date__isnull=True) & Q(end_date__isnull=True),
+                        then=Value("DRAFT"),
+                    ),
+                    default=Value("DRAFT"),
+                    output_field=CharField(),
+                )
+            )
+            .prefetch_related(
+                Prefetch(
+                    "issue_cycle__issue__assignees",
+                    queryset=User.objects.only("avatar", "first_name", "id").distinct(),
+                )
+            )
+            .prefetch_related(
+                Prefetch(
+                    "issue_cycle__issue__labels",
+                    queryset=Label.objects.only("name", "color", "id").distinct(),
+                )
+            )
+            .order_by("-created_at")
+        )
+
+        cycles = CycleSerializer(active_cycles, many=True).data
+
+        for cycle in cycles:
+            assignee_distribution = (
+                Issue.objects.filter(
+                    issue_cycle__cycle_id=cycle["id"],
+                    project_id=cycle["project"],
+                    workspace__slug=slug,
+                )
+                .annotate(display_name=F("assignees__display_name"))
+                .annotate(assignee_id=F("assignees__id"))
+                .annotate(avatar=F("assignees__avatar"))
+                .values("display_name", "assignee_id", "avatar")
+                .annotate(
+                    total_issues=Count(
+                        "assignee_id",
+                        filter=Q(archived_at__isnull=True, is_draft=False),
+                    ),
+                )
+                .annotate(
+                    completed_issues=Count(
+                        "assignee_id",
+                        filter=Q(
+                            completed_at__isnull=False,
+                            archived_at__isnull=True,
+                            is_draft=False,
+                        ),
+                    )
+                )
+                .annotate(
+                    pending_issues=Count(
+                        "assignee_id",
+                        filter=Q(
+                            completed_at__isnull=True,
+                            archived_at__isnull=True,
+                            is_draft=False,
+                        ),
+                    )
+                )
+                .order_by("display_name")
+            )
+
+            label_distribution = (
+                Issue.objects.filter(
+                    issue_cycle__cycle_id=cycle["id"],
+                    project_id=cycle["project"],
+                    workspace__slug=slug,
+                )
+                .annotate(label_name=F("labels__name"))
+                .annotate(color=F("labels__color"))
+                .annotate(label_id=F("labels__id"))
+                .values("label_name", "color", "label_id")
+                .annotate(
+                    total_issues=Count(
+                        "label_id",
+                        filter=Q(archived_at__isnull=True, is_draft=False),
+                    )
+                )
+                .annotate(
+                    completed_issues=Count(
+                        "label_id",
+                        filter=Q(
+                            completed_at__isnull=False,
+                            archived_at__isnull=True,
+                            is_draft=False,
+                        ),
+                    )
+                )
+                .annotate(
+                    pending_issues=Count(
+                        "label_id",
+                        filter=Q(
+                            completed_at__isnull=True,
+                            archived_at__isnull=True,
+                            is_draft=False,
+                        ),
+                    )
+                )
+                .order_by("label_name")
+            )
+            cycle["distribution"] = {
+                "assignees": assignee_distribution,
+                "labels": label_distribution,
+                "completion_chart": {},
+            }
+            if cycle["start_date"] and cycle["end_date"]:
+                cycle["distribution"][
+                    "completion_chart"
+                ] = burndown_plot(
+                    queryset=active_cycles.get(pk=cycle["id"]),
+                    slug=slug,
+                    project_id=cycle["project"],
+                    cycle_id=cycle["id"],
+                )
+
+        return Response(cycles, status=status.HTTP_200_OK)

apiserver/plane/app/views/issue.py

@@ -82,7 +82,7 @@ from plane.db.models import (
 from plane.bgtasks.issue_activites_task import issue_activity
 from plane.utils.grouper import group_results
 from plane.utils.issue_filters import issue_filters
-
+from collections import defaultdict
 
 class IssueViewSet(WebhookMixin, BaseViewSet):
     def get_serializer_class(self):
@@ -784,22 +784,13 @@ class SubIssuesEndpoint(BaseAPIView):
                     queryset=IssueReaction.objects.select_related("actor"),
                 )
             )
+            .annotate(state_group=F("state__group"))
         )
 
-        state_distribution = (
-            State.objects.filter(
-                workspace__slug=slug, state_issue__parent_id=issue_id
-            )
-            .annotate(state_group=F("group"))
-            .values("state_group")
-            .annotate(state_count=Count("state_group"))
-            .order_by("state_group")
-        )
-
-        result = {
-            item["state_group"]: item["state_count"]
-            for item in state_distribution
-        }
+        # create's a dict with state group name with their respective issue id's
+        result = defaultdict(list)
+        for sub_issue in sub_issues:
+            result[sub_issue.state_group].append(str(sub_issue.id))
 
         serializer = IssueSerializer(
             sub_issues,
@@ -831,7 +822,7 @@ class SubIssuesEndpoint(BaseAPIView):
 
         _ = Issue.objects.bulk_update(sub_issues, ["parent"], batch_size=10)
 
-        updated_sub_issues = Issue.issue_objects.filter(id__in=sub_issue_ids)
+        updated_sub_issues = Issue.issue_objects.filter(id__in=sub_issue_ids).annotate(state_group=F("state__group"))
 
         # Track the issue
         _ = [
@@ -846,11 +837,24 @@ class SubIssuesEndpoint(BaseAPIView):
             )
             for sub_issue_id in sub_issue_ids
         ]
+    
+        # create's a dict with state group name with their respective issue id's
+        result = defaultdict(list)
+        for sub_issue in updated_sub_issues:
+            result[sub_issue.state_group].append(str(sub_issue.id))
 
+        serializer = IssueSerializer(
+            updated_sub_issues,
+            many=True,
+        )
         return Response(
-            IssueSerializer(updated_sub_issues, many=True).data,
+            {
+                "sub_issues": serializer.data,
+                "state_distribution": result,
+            },
             status=status.HTTP_200_OK,
         )
+    
 
 
 class IssueLinkViewSet(BaseViewSet):

apiserver/plane/bgtasks/importer_task.py

@@ -25,7 +25,6 @@ from plane.db.models import (
     User,
     IssueProperty,
 )
-from plane.bgtasks.user_welcome_task import send_welcome_slack
 
 
 @shared_task
@@ -55,15 +54,6 @@ def service_importer(service, importer_id):
                 ignore_conflicts=True,
             )
 
-            _ = [
-                send_welcome_slack.delay(
-                    str(user.id),
-                    True,
-                    f"{user.email} was imported to Plane from {service}",
-                )
-                for user in new_users
-            ]
-
             workspace_users = User.objects.filter(
                 email__in=[
                     user.get("email").strip().lower()

apiserver/plane/bgtasks/user_welcome_task.py

@@ -1,36 +0,0 @@
-# Django imports
-from django.conf import settings
-
-# Third party imports
-from celery import shared_task
-from sentry_sdk import capture_exception
-from slack_sdk import WebClient
-from slack_sdk.errors import SlackApiError
-
-# Module imports
-from plane.db.models import User
-
-
-@shared_task
-def send_welcome_slack(user_id, created, message):
-    try:
-        instance = User.objects.get(pk=user_id)
-
-        if created and not instance.is_bot:
-            # Send message on slack as well
-            if settings.SLACK_BOT_TOKEN:
-                client = WebClient(token=settings.SLACK_BOT_TOKEN)
-                try:
-                    _ = client.chat_postMessage(
-                        channel="#trackers",
-                        text=message,
-                    )
-                except SlackApiError as e:
-                    print(f"Got an error: {e.response['error']}")
-        return
-    except Exception as e:
-        # Print logs if in DEBUG mode
-        if settings.DEBUG:
-            print(e)
-        capture_exception(e)
-        return

apiserver/plane/bgtasks/workspace_invitation_task.py

@@ -82,17 +82,6 @@ def workspace_invitation(email, workspace_id, token, current_site, invitor):
         msg.attach_alternative(html_content, "text/html")
         msg.send()
 
-        # Send message on slack as well
-        if settings.SLACK_BOT_TOKEN:
-            client = WebClient(token=settings.SLACK_BOT_TOKEN)
-            try:
-                _ = client.chat_postMessage(
-                    channel="#trackers",
-                    text=f"{workspace_member_invite.email} has been invited to {workspace.name} as a {workspace_member_invite.role}",
-                )
-            except SlackApiError as e:
-                print(f"Got an error: {e.response['error']}")
-
         return
     except (Workspace.DoesNotExist, WorkspaceMemberInvite.DoesNotExist) as e:
         print("Workspace or WorkspaceMember Invite Does not exists")

apiserver/plane/db/management/commands/safe_migrate.py

@@ -0,0 +1,55 @@
+# Python imports
+import time
+import uuid
+import atexit
+
+# Django imports
+from django.core.management.base import BaseCommand
+from django.core.management import call_command
+from django.db.migrations.executor import MigrationExecutor
+from django.db import connections, DEFAULT_DB_ALIAS
+
+
+class Command(BaseCommand):
+    help = 'Wait for migrations to be completed and acquire lock before starting migrations'
+
+    def handle(self, *args, **kwargs):
+        self.lock_key = 'django_migration_lock'
+        self.lock_value = str(uuid.uuid4())  # Unique value for the lock
+        self.client = redis_instance()
+
+        # Register the cleanup function
+        atexit.register(self.cleanup)
+
+        while self._pending_migrations():
+            # Try acquiring the lock
+            if self.client.set(self.lock_key, self.lock_value, nx=True, ex=300):  # 5 minutes expiry
+                try:
+                    self.stdout.write("Acquired migration lock, running migrations...")
+                    call_command('migrate')
+                except Exception as e:
+                    self.stdout.write(f"An error occurred during migrations: {e}")
+                finally:
+                    # Release the lock if it belongs to this process
+                    self.cleanup()
+                return  # Exit after attempting migration
+            else:
+                self.stdout.write("Migration lock is held by another instance. Waiting 10 seconds to retry...")
+                time.sleep(10)  # Wait for 10 seconds before retrying
+
+        self.stdout.write("No pending migrations.")
+
+    def _pending_migrations(self):
+        connection = connections[DEFAULT_DB_ALIAS]
+        executor = MigrationExecutor(connection)
+        targets = executor.loader.graph.leaf_nodes()
+        return bool(executor.migration_plan(targets))
+
+    def cleanup(self):
+        """
+        Clean up function to release the lock.
+        """
+        stored_value = self.client.get(self.lock_key)
+        if stored_value and stored_value.decode() == self.lock_value:
+            self.client.delete(self.lock_key)
+            self.stdout.write("Released migration lock.")

apiserver/plane/db/management/commands/wait_for_migrations.py

@@ -0,0 +1,21 @@
+# wait_for_migrations.py
+import time
+from django.core.management.base import BaseCommand
+from django.db.migrations.executor import MigrationExecutor
+from django.db import connections, DEFAULT_DB_ALIAS
+
+class Command(BaseCommand):
+    help = 'Wait for database migrations to complete before starting Celery worker/beat'
+
+    def handle(self, *args, **kwargs):
+        while self._pending_migrations():
+            self.stdout.write("Waiting for database migrations to complete...")
+            time.sleep(10)  # wait for 10 seconds before checking again
+
+        self.stdout.write("All migrations are complete. Safe to start Celery worker/beat.")
+
+    def _pending_migrations(self):
+        connection = connections[DEFAULT_DB_ALIAS]
+        executor = MigrationExecutor(connection)
+        targets = executor.loader.graph.leaf_nodes()
+        return bool(executor.migration_plan(targets))

apiserver/plane/db/models/user.py

@@ -6,20 +6,12 @@ import pytz
 
 # Django imports
 from django.db import models
-from django.db.models.signals import post_save
-from django.dispatch import receiver
 from django.contrib.auth.models import (
     AbstractBaseUser,
     UserManager,
     PermissionsMixin,
 )
 from django.utils import timezone
-from django.conf import settings
-
-# Third party imports
-from sentry_sdk import capture_exception
-from slack_sdk import WebClient
-from slack_sdk.errors import SlackApiError
 
 
 def get_default_onboarding():
@@ -142,23 +134,3 @@ class User(AbstractBaseUser, PermissionsMixin):
             self.is_staff = True
 
         super(User, self).save(*args, **kwargs)
-
-
-@receiver(post_save, sender=User)
-def send_welcome_slack(sender, instance, created, **kwargs):
-    try:
-        if created and not instance.is_bot:
-            # Send message on slack as well
-            if settings.SLACK_BOT_TOKEN:
-                client = WebClient(token=settings.SLACK_BOT_TOKEN)
-                try:
-                    _ = client.chat_postMessage(
-                        channel="#trackers",
-                        text=f"New user {instance.email} has signed up and begun the onboarding journey.",
-                    )
-                except SlackApiError as e:
-                    print(f"Got an error: {e.response['error']}")
-        return
-    except Exception as e:
-        capture_exception(e)
-        return

apiserver/plane/settings/common.py

@@ -314,7 +314,7 @@ if bool(os.environ.get("SENTRY_DSN", False)) and os.environ.get(
 
 # Application Envs
 PROXY_BASE_URL = os.environ.get("PROXY_BASE_URL", False)  # For External
-SLACK_BOT_TOKEN = os.environ.get("SLACK_BOT_TOKEN", False)
+
 FILE_SIZE_LIMIT = int(os.environ.get("FILE_SIZE_LIMIT", 5242880))
 
 # Unsplash Access key

deploy/selfhost/build.yml

@@ -0,0 +1,26 @@
+version: "3.8"
+
+services:
+  web:
+    image: ${DOCKERHUB_USER:-local}/plane-frontend:${APP_RELEASE:-latest}
+    build:
+      context: .
+      dockerfile: ./web/Dockerfile.web
+
+  space:
+    image: ${DOCKERHUB_USER:-local}/plane-space:${APP_RELEASE:-latest}
+    build:
+      context: ./
+      dockerfile: ./space/Dockerfile.space
+
+  api:
+    image: ${DOCKERHUB_USER:-local}/plane-backend:${APP_RELEASE:-latest}
+    build:
+      context: ./apiserver
+      dockerfile: ./Dockerfile.api
+
+  proxy:
+    image: ${DOCKERHUB_USER:-local}/plane-proxy:${APP_RELEASE:-latest}
+    build:
+      context: ./nginx
+      dockerfile: ./Dockerfile

deploy/selfhost/docker-compose.yml

@@ -65,8 +65,8 @@ x-app-env : &app-env
 services:
   web:
     <<: *app-env
-    platform: linux/amd64
-    image: makeplane/plane-frontend:${APP_RELEASE:-latest}
+    image: ${DOCKERHUB_USER:-makeplane}/plane-frontend:${APP_RELEASE:-latest}
+    pull_policy: ${PULL_POLICY:-always}
     restart: unless-stopped
     command: /usr/local/bin/start.sh web/server.js web
     deploy:
@@ -77,8 +77,8 @@ services:
 
   space:
     <<: *app-env
-    platform: linux/amd64
-    image: makeplane/plane-space:${APP_RELEASE:-latest}
+    image: ${DOCKERHUB_USER:-makeplane}/plane-space:${APP_RELEASE:-latest}
+    pull_policy: ${PULL_POLICY:-always}
     restart: unless-stopped
     command: /usr/local/bin/start.sh space/server.js space
     deploy:
@@ -90,8 +90,8 @@ services:
 
   api:
     <<: *app-env
-    platform: linux/amd64
-    image: makeplane/plane-backend:${APP_RELEASE:-latest}
+    image: ${DOCKERHUB_USER:-makeplane}/plane-backend:${APP_RELEASE:-latest}
+    pull_policy: ${PULL_POLICY:-always}
     restart: unless-stopped
     command: ./bin/takeoff
     deploy:
@@ -102,8 +102,8 @@ services:
 
   worker:
     <<: *app-env
-    platform: linux/amd64
-    image: makeplane/plane-backend:${APP_RELEASE:-latest}
+    image: ${DOCKERHUB_USER:-makeplane}/plane-backend:${APP_RELEASE:-latest}
+    pull_policy: ${PULL_POLICY:-always}
     restart: unless-stopped
     command: ./bin/worker
     depends_on:
@@ -113,8 +113,8 @@ services:
 
   beat-worker:
     <<: *app-env
-    platform: linux/amd64
-    image: makeplane/plane-backend:${APP_RELEASE:-latest}
+    image: ${DOCKERHUB_USER:-makeplane}/plane-backend:${APP_RELEASE:-latest}
+    pull_policy: ${PULL_POLICY:-always}
     restart: unless-stopped
     command: ./bin/beat
     depends_on:
@@ -125,6 +125,7 @@ services:
   plane-db:
     <<: *app-env
     image: postgres:15.2-alpine
+    pull_policy: if_not_present
     restart: unless-stopped
     command: postgres -c 'max_connections=1000'
     volumes:
@@ -133,6 +134,7 @@ services:
   plane-redis:
     <<: *app-env
     image: redis:6.2.7-alpine
+    pull_policy: if_not_present
     restart: unless-stopped
     volumes:
       - redisdata:/data
@@ -140,6 +142,7 @@ services:
   plane-minio:
     <<: *app-env
     image: minio/minio
+    pull_policy: if_not_present
     restart: unless-stopped
     command: server /export --console-address ":9090"
     volumes:
@@ -148,8 +151,8 @@ services:
   # Comment this if you already have a reverse proxy running
   proxy:
     <<: *app-env
-    platform: linux/amd64
-    image: makeplane/plane-proxy:${APP_RELEASE:-latest}
+    image: ${DOCKERHUB_USER:-makeplane}/plane-proxy:${APP_RELEASE:-latest}
+    pull_policy: ${PULL_POLICY:-always}
     ports:
         - ${NGINX_PORT}:80
     depends_on:

deploy/selfhost/install.sh

@@ -3,13 +3,75 @@
 BRANCH=master
 SCRIPT_DIR=$PWD
 PLANE_INSTALL_DIR=$PWD/plane-app
+export APP_RELEASE=$BRANCH
+export DOCKERHUB_USER=makeplane
+export PULL_POLICY=always
+USE_GLOBAL_IMAGES=1
 
-function install(){
-    echo 
-    echo "Installing on $PLANE_INSTALL_DIR"
+RED='\033[0;31m'
+YELLOW='\033[1;33m'
+GREEN='\033[0;32m'
+NC='\033[0m' # No Color
+
+function buildLocalImage() {
+    if [ "$1" == "--force-build" ]; then
+        DO_BUILD="1"
+    elif [ "$1" == "--skip-build" ]; then
+        DO_BUILD="2"
+    else 
+        printf "\n" >&2
+        printf "${YELLOW}You are on ${ARCH} cpu architecture. ${NC}\n" >&2
+        printf "${YELLOW}Since the prebuilt ${ARCH} compatible docker images are not available for, we will be running the docker build on this system. ${NC} \n" >&2
+        printf "${YELLOW}This might take ${YELLOW}5-30 min based on your system's hardware configuration. \n ${NC} \n" >&2
+        printf "\n" >&2
+        printf "${GREEN}Select an option to proceed: ${NC}\n" >&2
+        printf "   1) Build Fresh Images \n" >&2
+        printf "   2) Skip Building Images \n" >&2
+        printf "   3) Exit \n" >&2
+        printf "\n" >&2
+        read -p "Select Option [1]: " DO_BUILD
+        until [[ -z "$DO_BUILD" || "$DO_BUILD" =~ ^[1-3]$ ]]; do
+            echo "$DO_BUILD: invalid selection." >&2
+            read -p "Select Option [1]: " DO_BUILD
+        done
+        echo "" >&2
+    fi
+
+    if [ "$DO_BUILD" == "1" ] || [ "$DO_BUILD" == "" ];
+    then
+        REPO=https://github.com/makeplane/plane.git
+        CURR_DIR=$PWD
+        PLANE_TEMP_CODE_DIR=$(mktemp -d)
+        git clone $REPO $PLANE_TEMP_CODE_DIR  --branch $BRANCH --single-branch
+
+        cp $PLANE_TEMP_CODE_DIR/deploy/selfhost/build.yml $PLANE_TEMP_CODE_DIR/build.yml
+
+        cd $PLANE_TEMP_CODE_DIR
+        if [ "$BRANCH" == "master" ];
+        then
+            APP_RELEASE=latest
+        fi
+
+        docker compose -f build.yml build --no-cache  >&2
+        # cd $CURR_DIR
+        # rm -rf $PLANE_TEMP_CODE_DIR
+        echo "build_completed"
+    elif [ "$DO_BUILD" == "2" ];
+    then
+        printf "${YELLOW}Build action skipped by you in lieu of using existing images. ${NC} \n" >&2
+        echo "build_skipped"
+    elif [ "$DO_BUILD" == "3" ];
+    then
+        echo "build_exited"
+    else
+        printf "INVALID OPTION SUPPLIED" >&2
+    fi
+}
+function install() {
+    echo "Installing Plane.........."
     download
 }
-function download(){
+function download() {
     cd $SCRIPT_DIR
     TS=$(date +%s)
     if [ -f "$PLANE_INSTALL_DIR/docker-compose.yaml" ]
@@ -35,6 +97,21 @@ function download(){
 
         rm $PLANE_INSTALL_DIR/temp.yaml
     fi
+
+    if [ $USE_GLOBAL_IMAGES == 0 ]; then
+        local res=$(buildLocalImage)
+        # echo $res
+
+        if [ "$res" == "build_exited" ];
+        then
+            echo
+            echo "Install action cancelled by you. Exiting now."
+            echo
+            exit 0
+        fi
+    else
+        docker compose -f $PLANE_INSTALL_DIR/docker-compose.yaml pull
+    fi
     
     echo ""
     echo "Latest version is now available for you to use"
@@ -43,22 +120,22 @@ function download(){
     echo ""
 
 }
-function startServices(){
+function startServices() {
     cd $PLANE_INSTALL_DIR
-    docker compose up -d
+    docker compose up -d --quiet-pull
     cd $SCRIPT_DIR
 }
-function stopServices(){
+function stopServices() {
     cd $PLANE_INSTALL_DIR
     docker compose down
     cd $SCRIPT_DIR
 }
-function restartServices(){
+function restartServices() {
     cd $PLANE_INSTALL_DIR
     docker compose restart
     cd $SCRIPT_DIR
 }
-function upgrade(){
+function upgrade() {
     echo "***** STOPPING SERVICES ****"
     stopServices
 
@@ -69,10 +146,10 @@ function upgrade(){
     echo "***** PLEASE VALIDATE AND START SERVICES ****"
 
 }
-function askForAction(){
+function askForAction() {
     echo
     echo "Select a Action you want to perform:"
-    echo "   1) Install"
+    echo "   1) Install (${ARCH})"
     echo "   2) Start"
     echo "   3) Stop"
     echo "   4) Restart"
@@ -115,6 +192,20 @@ function askForAction(){
     fi
 }
 
+# CPU ARCHITECHTURE BASED SETTINGS
+ARCH=$(uname -m)
+if [ $ARCH == "amd64" ] || [ $ARCH == "x86_64" ];
+then
+    USE_GLOBAL_IMAGES=1
+    DOCKERHUB_USER=makeplane
+    PULL_POLICY=always
+else
+    USE_GLOBAL_IMAGES=0
+    DOCKERHUB_USER=myplane
+    PULL_POLICY=never
+fi
+
+# REMOVE SPECIAL CHARACTERS FROM BRANCH NAME
 if [ "$BRANCH" != "master" ];
 then
     PLANE_INSTALL_DIR=$PWD/plane-app-$(echo $BRANCH | sed -r 's@(\/|" "|\.)@-@g')

docker-compose-local.yml

@@ -76,6 +76,8 @@ services:
       - web
 
   api:
+    deploy:
+      replicas: 3
     build:
       context: ./apiserver
       dockerfile: Dockerfile.dev
@@ -86,7 +88,7 @@ services:
       - dev_env
     volumes:
       - ./apiserver:/code
-    # command: /bin/sh -c "python manage.py migrate && python manage.py runserver 0.0.0.0:8000 --settings=plane.settings.local"
+    command: ./bin/takeoff.local
     env_file:
       - ./apiserver/.env
     depends_on:
@@ -104,7 +106,7 @@ services:
       - dev_env
     volumes:
       - ./apiserver:/code
-    command: /bin/sh -c "celery -A plane worker -l info"
+    command: ./bin/worker
     env_file:
       - ./apiserver/.env
     depends_on:
@@ -123,7 +125,7 @@ services:
       - dev_env
     volumes:
       - ./apiserver:/code
-    command: /bin/sh -c "celery -A plane beat -l info"
+    command: ./bin/beat
     env_file:
       - ./apiserver/.env
     depends_on:

package.json

@@ -28,7 +28,7 @@
     "prettier": "latest",
     "prettier-plugin-tailwindcss": "^0.5.4",
     "tailwindcss": "^3.3.3",
-    "turbo": "^1.11.2"
+    "turbo": "^1.11.3"
   },
   "resolutions": {
     "@types/react": "18.2.42"

packages/types/src/cycles.d.ts

@@ -1,4 +1,11 @@
-import type { IUser, TIssue, IProjectLite, IWorkspaceLite, IIssueFilterOptions, IUserLite } from "@plane/types";
+import type {
+  IUser,
+  TIssue,
+  IProjectLite,
+  IWorkspaceLite,
+  IIssueFilterOptions,
+  IUserLite,
+} from "@plane/types";
 
 export type TCycleView = "all" | "active" | "upcoming" | "completed" | "draft";
 
@@ -40,6 +47,7 @@ export interface ICycle {
   };
   workspace: string;
   workspace_detail: IWorkspaceLite;
+  issues?: TIssue[];
 }
 
 export type TAssigneesDistribution = {
@@ -80,9 +88,13 @@ export interface CycleIssueResponse {
   sub_issues_count: number;
 }
 
-export type SelectCycleType = (ICycle & { actionType: "edit" | "delete" | "create-issue" }) | undefined;
+export type SelectCycleType =
+  | (ICycle & { actionType: "edit" | "delete" | "create-issue" })
+  | undefined;
 
-export type SelectIssue = (TIssue & { actionType: "edit" | "delete" | "create" }) | null;
+export type SelectIssue =
+  | (TIssue & { actionType: "edit" | "delete" | "create" })
+  | null;
 
 export type CycleDateCheckData = {
   start_date: string;

packages/types/src/issues/issue_sub_issues.d.ts

@@ -1,11 +1,11 @@
 import { TIssue } from "./issue";
 
 export type TSubIssuesStateDistribution = {
-  backlog: number;
-  unstarted: number;
-  started: number;
-  completed: number;
-  cancelled: number;
+  backlog: string[];
+  unstarted: string[];
+  started: string[];
+  completed: string[];
+  cancelled: string[];
 };
 
 export type TIssueSubIssues = {

packages/types/src/projects.d.ts

@@ -1,5 +1,11 @@
 import { EUserProjectRoles } from "constants/project";
-import type { IUser, IUserLite, IWorkspace, IWorkspaceLite, TStateGroups } from ".";
+import type {
+  IUser,
+  IUserLite,
+  IWorkspace,
+  IWorkspaceLite,
+  TStateGroups,
+} from ".";
 
 export interface IProject {
   archive_in: number;
@@ -52,6 +58,11 @@ export interface IProjectLite {
   id: string;
   name: string;
   identifier: string;
+  emoji: string | null;
+  icon_prop: {
+    name: string;
+    color: string;
+  } | null;
 }
 
 type ProjectPreferences = {

turbo.json

@@ -29,63 +29,18 @@
         "dist/**"
       ]
     },
-    "web#develop": {
+    "develop": {
       "cache": false,
       "persistent": true,
       "dependsOn": [
-        "@plane/lite-text-editor#build",
-        "@plane/rich-text-editor#build",
-        "@plane/document-editor#build",
-        "@plane/ui#build"
+        "^build"
       ]
     },
-    "space#develop": {
+    "dev": {
       "cache": false,
       "persistent": true,
       "dependsOn": [
-        "@plane/lite-text-editor#build",
-        "@plane/rich-text-editor#build",
-        "@plane/document-editor#build",
-        "@plane/ui#build"
-      ]
-    },
-    "web#build": {
-      "cache": true,
-      "dependsOn": [
-        "@plane/lite-text-editor#build",
-        "@plane/rich-text-editor#build",
-        "@plane/document-editor#build",
-        "@plane/ui#build"
-      ]
-    },
-    "space#build": {
-      "cache": true,
-      "dependsOn": [
-        "@plane/lite-text-editor#build",
-        "@plane/rich-text-editor#build",
-        "@plane/document-editor#build",
-        "@plane/ui#build"
-      ]
-    },
-    "@plane/lite-text-editor#build": {
-      "cache": true,
-      "dependsOn": [
-        "@plane/editor-core#build",
-        "@plane/editor-extensions#build"
-      ]
-    },
-    "@plane/rich-text-editor#build": {
-      "cache": true,
-      "dependsOn": [
-        "@plane/editor-core#build",
-        "@plane/editor-extensions#build"
-      ]
-    },
-    "@plane/document-editor#build": {
-      "cache": true,
-      "dependsOn": [
-        "@plane/editor-core#build",
-        "@plane/editor-extensions#build"
+        "^build"
       ]
     },
     "test": {
@@ -97,12 +52,6 @@
     "lint": {
       "outputs": []
     },
-    "dev": {
-      "cache": false
-    },
-    "develop": {
-      "cache": false
-    },
     "start": {
       "cache": false
     },

web/components/core/sidebar/progress-chart.tsx

@@ -41,7 +41,7 @@ const DashedLine = ({ series, lineGenerator, xScale, yScale }: any) =>
   ));
 
 const ProgressChart: React.FC<Props> = ({ distribution, startDate, endDate, totalIssues }) => {
-  const chartData = Object.keys(distribution).map((key) => ({
+  const chartData = Object.keys(distribution ?? []).map((key) => ({
     currentDate: renderFormattedDateWithoutYear(key),
     pending: distribution[key],
   }));

web/components/core/sidebar/sidebar-progress-stats.tsx

@@ -183,7 +183,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
           )}
         </Tab.Panel>
         <Tab.Panel as="div" className="flex h-44 w-full flex-col gap-1.5 overflow-y-auto pt-3.5">
-          {distribution.labels.length > 0 ? (
+          {distribution?.labels.length > 0 ? (
             distribution.labels.map((label, index) => (
               <SingleProgressStats
                 key={label.label_id ?? `no-label-${index}`}

web/components/cycles/active-cycle-info.tsx

@@ -0,0 +1,254 @@
+import { FC, MouseEvent, useCallback } from "react";
+import Link from "next/link";
+// ui
+import {
+  AvatarGroup,
+  Tooltip,
+  LinearProgressIndicator,
+  ContrastIcon,
+  RunningIcon,
+  LayersIcon,
+  StateGroupIcon,
+  Avatar,
+} from "@plane/ui";
+// components
+import { SingleProgressStats } from "components/core";
+import { ActiveCycleProgressStats } from "./active-cycle-stats";
+// hooks
+import { useCycle } from "hooks/store";
+import useToast from "hooks/use-toast";
+import useLocalStorage from "hooks/use-local-storage";
+// icons
+import { ArrowRight, CalendarDays, Star, Target } from "lucide-react";
+// types
+import { ICycle, TCycleLayout, TCycleView } from "@plane/types";
+// helpers
+import { renderFormattedDate, findHowManyDaysLeft } from "helpers/date-time.helper";
+import { truncateText } from "helpers/string.helper";
+// constants
+import { STATE_GROUPS_DETAILS } from "constants/cycle";
+
+export type ActiveCycleInfoProps = {
+  cycle: ICycle;
+  workspaceSlug: string;
+  projectId: string;
+};
+
+export const ActiveCycleInfo: FC<ActiveCycleInfoProps> = (props) => {
+  const { cycle, workspaceSlug, projectId } = props;
+
+  // store
+  const { addCycleToFavorites, removeCycleFromFavorites } = useCycle();
+  // local storage
+  const { setValue: setCycleTab } = useLocalStorage<TCycleView>("cycle_tab", "active");
+  const { setValue: setCycleLayout } = useLocalStorage<TCycleLayout>("cycle_layout", "list");
+  // toast alert
+  const { setToastAlert } = useToast();
+
+  const groupedIssues: any = {
+    backlog: cycle.backlog_issues,
+    unstarted: cycle.unstarted_issues,
+    started: cycle.started_issues,
+    completed: cycle.completed_issues,
+    cancelled: cycle.cancelled_issues,
+  };
+
+  const progressIndicatorData = STATE_GROUPS_DETAILS.map((group, index) => ({
+    id: index,
+    name: group.title,
+    value: cycle.total_issues > 0 ? ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100 : 0,
+    color: group.color,
+  }));
+
+  const handleCurrentLayout = useCallback(
+    (_layout: TCycleLayout) => {
+      setCycleLayout(_layout);
+    },
+    [setCycleLayout]
+  );
+
+  const handleCurrentView = useCallback(
+    (_view: TCycleView) => {
+      setCycleTab(_view);
+      if (_view === "draft") handleCurrentLayout("list");
+    },
+    [handleCurrentLayout, setCycleTab]
+  );
+
+  const handleAddToFavorites = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycle.id).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't add the cycle to favorites. Please try again.",
+      });
+    });
+  };
+
+  const handleRemoveFromFavorites = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    removeCycleFromFavorites(workspaceSlug?.toString(), projectId.toString(), cycle.id).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't add the cycle to favorites. Please try again.",
+      });
+    });
+  };
+
+  return (
+    <div className="grid-row-2 grid divide-y rounded-[10px] border border-custom-border-200 bg-custom-background-100 shadow">
+      <div className="grid grid-cols-1 divide-y border-custom-border-200 lg:grid-cols-3 lg:divide-x lg:divide-y-0">
+        <div className="flex flex-col text-xs">
+          <div className="h-full w-full">
+            <div className="flex h-60 flex-col justify-between gap-5 rounded-b-[10px] p-4">
+              <div className="flex items-center justify-between gap-1">
+                <span className="flex items-center gap-1">
+                  <span className="h-5 w-5">
+                    <ContrastIcon className="h-5 w-5" color="#09A953" />
+                  </span>
+                  <Tooltip tooltipContent={cycle.name} position="top-left">
+                    <h3 className="break-words text-lg font-semibold">{truncateText(cycle.name, 70)}</h3>
+                  </Tooltip>
+                </span>
+                <span className="flex items-center gap-1 capitalize">
+                  <span className="rounded-full px-1.5 py-0.5 bg-green-600/5 text-green-600">
+                    <span className="flex gap-1 whitespace-nowrap">
+                      <RunningIcon className="h-4 w-4" />
+                      {findHowManyDaysLeft(cycle.end_date ?? new Date())} Days Left
+                    </span>
+                  </span>
+                  {cycle.is_favorite ? (
+                    <button
+                      onClick={(e) => {
+                        handleRemoveFromFavorites(e);
+                      }}
+                    >
+                      <Star className="h-4 w-4 fill-orange-400 text-orange-400" />
+                    </button>
+                  ) : (
+                    <button
+                      onClick={(e) => {
+                        handleAddToFavorites(e);
+                      }}
+                    >
+                      <Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
+                    </button>
+                  )}
+                </span>
+              </div>
+
+              <div className="flex items-center justify-start gap-5 text-custom-text-200">
+                <div className="flex items-start gap-1">
+                  <CalendarDays className="h-4 w-4" />
+                  {cycle?.start_date && <span>{renderFormattedDate(cycle?.start_date)}</span>}
+                </div>
+                <ArrowRight className="h-4 w-4 text-custom-text-200" />
+                <div className="flex items-start gap-1">
+                  <Target className="h-4 w-4" />
+                  {cycle?.end_date && <span>{renderFormattedDate(cycle?.end_date)}</span>}
+                </div>
+              </div>
+
+              <div className="flex items-center gap-4">
+                <div className="flex items-center gap-2.5 text-custom-text-200">
+                  {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
+                    <img
+                      src={cycle.owned_by.avatar}
+                      height={16}
+                      width={16}
+                      className="rounded-full"
+                      alt={cycle.owned_by.display_name}
+                    />
+                  ) : (
+                    <span className="flex h-5 w-5 items-center justify-center rounded-full bg-custom-background-100 capitalize">
+                      {cycle.owned_by.display_name.charAt(0)}
+                    </span>
+                  )}
+                  <span className="text-custom-text-200">{cycle.owned_by.display_name}</span>
+                </div>
+
+                {cycle.assignees.length > 0 && (
+                  <div className="flex items-center gap-1 text-custom-text-200">
+                    <AvatarGroup>
+                      {cycle.assignees.map((assignee: any) => (
+                        <Avatar key={assignee.id} name={assignee.display_name} src={assignee.avatar} />
+                      ))}
+                    </AvatarGroup>
+                  </div>
+                )}
+              </div>
+
+              <div className="flex items-center gap-4 text-custom-text-200">
+                <div className="flex gap-2">
+                  <LayersIcon className="h-4 w-4 flex-shrink-0" />
+                  {cycle.total_issues} issues
+                </div>
+                <div className="flex items-center gap-2">
+                  <StateGroupIcon stateGroup="completed" height="14px" width="14px" />
+                  {cycle.completed_issues} issues
+                </div>
+              </div>
+              <div className="flex item-center gap-2">
+                <Link
+                  href={`/${workspaceSlug}/projects/${projectId}/cycles`}
+                  onClick={() => {
+                    handleCurrentView("active");
+                  }}
+                >
+                  <span className="w-full rounded-md bg-custom-primary px-4 py-2 text-center text-sm font-medium text-white hover:bg-custom-primary/90">
+                    View Cycle
+                  </span>
+                </Link>
+
+                <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
+                  <span className="w-full rounded-md bg-custom-primary px-4 py-2 text-center text-sm font-medium text-white hover:bg-custom-primary/90">
+                    View Cycle Issues
+                  </span>
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="col-span-2 grid grid-cols-1 divide-y border-custom-border-200 md:grid-cols-2 md:divide-x md:divide-y-0">
+          <div className="flex h-60 flex-col border-custom-border-200">
+            <div className="flex h-full w-full flex-col p-4 text-custom-text-200">
+              <div className="flex w-full items-center gap-2 py-1">
+                <span>Progress</span>
+                <LinearProgressIndicator data={progressIndicatorData} />
+              </div>
+              <div className="mt-2 flex flex-col items-center gap-1">
+                {Object.keys(groupedIssues).map((group, index) => (
+                  <SingleProgressStats
+                    key={index}
+                    title={
+                      <div className="flex items-center gap-2">
+                        <span
+                          className="block h-3 w-3 rounded-full "
+                          style={{
+                            backgroundColor: STATE_GROUPS_DETAILS[index].color,
+                          }}
+                        />
+                        <span className="text-xs capitalize">{group}</span>
+                      </div>
+                    }
+                    completed={groupedIssues[group]}
+                    total={cycle.total_issues}
+                  />
+                ))}
+              </div>
+            </div>
+          </div>
+          <div className="h-60 overflow-y-scroll border-custom-border-200">
+            <ActiveCycleProgressStats cycle={cycle} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

web/components/cycles/index.ts

@@ -15,3 +15,4 @@ export * from "./cycles-board-card";
 export * from "./delete-modal";
 export * from "./cycle-peek-overview";
 export * from "./cycles-list-item";
+export * from "./active-cycle-info";

web/components/headers/index.ts

@@ -20,3 +20,4 @@ export * from "./project-archived-issue-details";
 export * from "./project-archived-issues";
 export * from "./project-issue-details";
 export * from "./user-profile";
+export * from "./workspace-active-cycle";

web/components/headers/workspace-active-cycle.tsx

@@ -0,0 +1,46 @@
+import { observer } from "mobx-react-lite";
+import { Search, SendToBack } from "lucide-react";
+// hooks
+import { useWorkspace } from "hooks/store";
+// ui
+import { Breadcrumbs } from "@plane/ui";
+
+export const WorkspaceActiveCycleHeader = observer(() => {
+  // store hooks
+  const { workspaceActiveCyclesSearchQuery, setWorkspaceActiveCyclesSearchQuery } = useWorkspace();
+  return (
+    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
+        <div className="flex items-center gap-2">
+          <Breadcrumbs>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={<SendToBack className="h-4 w-4 text-custom-text-300" />}
+              label="Active Cycles"
+            />
+          </Breadcrumbs>
+          <span
+            className="flex items-center justify-center px-3.5 py-0.5 text-xs leading-5 rounded-xl"
+            style={{
+              color: "#F59E0B",
+              backgroundColor: "#F59E0B20",
+            }}
+          >
+            Beta
+          </span>
+        </div>
+      </div>
+      <div className="flex items-center gap-3">
+        <div className="flex w-full items-center justify-start gap-1 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1.5 text-custom-text-400">
+          <Search className="h-3.5 w-3.5" />
+          <input
+            className="w-full min-w-[234px] border-none bg-transparent text-sm focus:outline-none"
+            value={workspaceActiveCyclesSearchQuery}
+            onChange={(e) => setWorkspaceActiveCyclesSearchQuery(e.target.value)}
+            placeholder="Search"
+          />
+        </div>
+      </div>
+    </div>
+  );
+});

web/components/integration/slack/select-channel.tsx

@@ -66,8 +66,9 @@ export const SelectChannel: React.FC<Props> = observer(({ integration }) => {
   }, [projectIntegration, projectId]);
 
   const handleDelete = async () => {
+    if (!workspaceSlug || !projectId) return;
     if (projectIntegration.length === 0) return;
-    mutate(SLACK_CHANNEL_INFO, (prevData: any) => {
+    mutate(SLACK_CHANNEL_INFO(workspaceSlug?.toString(), projectId?.toString()), (prevData: any) => {
       if (!prevData) return;
       return prevData.id !== integration.id;
     }).then(() => {

web/components/issues/description-form.tsx

@@ -78,10 +78,16 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
     async (formData: Partial<TIssue>) => {
       if (!formData?.name || formData?.name.length === 0 || formData?.name.length > 255) return;
 
-      await issueOperations.update(workspaceSlug, projectId, issueId, {
-        name: formData.name ?? "",
-        description_html: formData.description_html ?? "<p></p>",
-      });
+      await issueOperations.update(
+        workspaceSlug,
+        projectId,
+        issueId,
+        {
+          name: formData.name ?? "",
+          description_html: formData.description_html ?? "<p></p>",
+        },
+        false
+      );
     },
     [workspaceSlug, projectId, issueId, issueOperations]
   );

web/components/issues/issue-detail/label/label-list-item.tsx

@@ -25,7 +25,7 @@ export const LabelListItem: FC<TLabelListItem> = (props) => {
   const label = getLabelById(labelId);
 
   const handleLabel = async () => {
-    if (issue) {
+    if (issue && !disabled) {
       const currentLabels = issue.label_ids.filter((_labelId) => _labelId !== labelId);
       await labelOperations.updateIssue(workspaceSlug, projectId, issueId, { label_ids: currentLabels });
     }

web/components/issues/issue-detail/links/root.tsx

@@ -107,7 +107,7 @@ export const IssueLinkRoot: FC<TIssueLinkRoot> = (props) => {
         linkOperations={handleLinkOperations}
       />
 
-      <div className={`py-1 text-xs ${disabled ? "opacity-60" : ""}`}>
+      <div className="py-1 text-xs">
         <div className="flex items-center justify-between gap-2">
           <h4>Links</h4>
           {!disabled && (

web/components/issues/issue-detail/main-content.tsx

@@ -87,10 +87,9 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
           <SubIssuesRoot
             workspaceSlug={workspaceSlug}
             projectId={projectId}
-            issueId={issueId}
+            parentIssueId={issueId}
             currentUser={currentUser}
-            is_archived={is_archived}
-            is_editable={is_editable}
+            disabled={!is_editable}
           />
         )}
       </div>

web/components/issues/issue-detail/parent/siblings.tsx

@@ -23,10 +23,10 @@ export const IssueParentSiblings: FC<TIssueParentSiblings> = (props) => {
   } = useIssueDetail();
 
   const { isLoading } = useSWR(
-    peekIssue && parentIssue
+    peekIssue && parentIssue && parentIssue.project_id
       ? `ISSUE_PARENT_CHILD_ISSUES_${peekIssue?.workspaceSlug}_${parentIssue.project_id}_${parentIssue.id}`
       : null,
-    peekIssue && parentIssue
+    peekIssue && parentIssue && parentIssue.project_id
       ? () => fetchSubIssues(peekIssue?.workspaceSlug, parentIssue.project_id, parentIssue.id)
       : null
   );

web/components/issues/issue-detail/root.tsx

@@ -1,6 +1,7 @@
 import { FC, useMemo } from "react";
 import { useRouter } from "next/router";
 // components
+import { IssuePeekOverview } from "components/issues";
 import { IssueMainContent } from "./main-content";
 import { IssueDetailsSidebar } from "./sidebar";
 // ui
@@ -8,16 +9,23 @@ import { EmptyState } from "components/common";
 // images
 import emptyIssue from "public/empty-state/issue.svg";
 // hooks
-import { useIssueDetail, useUser } from "hooks/store";
+import { useIssueDetail, useIssues, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // types
 import { TIssue } from "@plane/types";
 // constants
 import { EUserProjectRoles } from "constants/project";
+import { EIssuesStoreType } from "constants/issue";
 
 export type TIssueOperations = {
   fetch: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
-  update: (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>;
+  update: (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: Partial<TIssue>,
+    showToast?: boolean
+  ) => Promise<void>;
   remove: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
   addIssueToCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => Promise<void>;
   removeIssueFromCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => Promise<void>;
@@ -47,6 +55,9 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
     addIssueToModule,
     removeIssueFromModule,
   } = useIssueDetail();
+  const {
+    issues: { removeIssue: removeArchivedIssue },
+  } = useIssues(EIssuesStoreType.ARCHIVED);
   const { setToastAlert } = useToast();
   const {
     membership: { currentProjectRole },
@@ -61,14 +72,22 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
           console.error("Error fetching the parent issue");
         }
       },
-      update: async (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => {
+      update: async (
+        workspaceSlug: string,
+        projectId: string,
+        issueId: string,
+        data: Partial<TIssue>,
+        showToast: boolean = true
+      ) => {
         try {
           await updateIssue(workspaceSlug, projectId, issueId, data);
-          setToastAlert({
-            title: "Issue updated successfully",
-            type: "success",
-            message: "Issue updated successfully",
-          });
+          if (showToast) {
+            setToastAlert({
+              title: "Issue updated successfully",
+              type: "success",
+              message: "Issue updated successfully",
+            });
+          }
         } catch (error) {
           setToastAlert({
             title: "Issue update failed",
@@ -79,7 +98,8 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
       },
       remove: async (workspaceSlug: string, projectId: string, issueId: string) => {
         try {
-          await removeIssue(workspaceSlug, projectId, issueId);
+          if (is_archived) await removeArchivedIssue(workspaceSlug, projectId, issueId);
+          else await removeIssue(workspaceSlug, projectId, issueId);
           setToastAlert({
             title: "Issue deleted successfully",
             type: "success",
@@ -159,9 +179,11 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
       },
     }),
     [
+      is_archived,
       fetchIssue,
       updateIssue,
       removeIssue,
+      removeArchivedIssue,
       addIssueToCycle,
       removeIssueFromCycle,
       addIssueToModule,
@@ -170,9 +192,9 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
     ]
   );
 
-  // Issue details
+  // issue details
   const issue = getIssueById(issueId);
-  // Check if issue is editable, based on user role
+  // checking if issue is editable, based on user role
   const is_editable = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
 
   return (
@@ -211,6 +233,9 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
           </div>
         </div>
       )}
+
+      {/* peek overview */}
+      <IssuePeekOverview />
     </>
   );
 };

web/components/issues/issue-detail/sidebar.tsx

@@ -162,7 +162,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
               />
             )}
 
-            {/* {(fieldsToShow.includes("all") || fieldsToShow.includes("link")) && (
+            {(fieldsToShow.includes("all") || fieldsToShow.includes("link")) && (
               <button
                 type="button"
                 className="rounded-md border border-custom-border-200 p-2 shadow-sm duration-300 hover:bg-custom-background-90 focus:border-custom-primary focus:outline-none focus:ring-1 focus:ring-custom-primary"
@@ -170,9 +170,9 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
               >
                 <LinkIcon className="h-3.5 w-3.5" />
               </button>
-            )} */}
+            )}
 
-            {/* {isAllowed && (fieldsToShow.includes("all") || fieldsToShow.includes("delete")) && (
+            {is_editable && (fieldsToShow.includes("all") || fieldsToShow.includes("delete")) && (
               <button
                 type="button"
                 className="rounded-md border border-red-500 p-2 text-red-500 shadow-sm duration-300 hover:bg-red-500/20 focus:outline-none"
@@ -180,7 +180,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
               >
                 <Trash2 className="h-3.5 w-3.5" />
               </button>
-            )} */}
+            )}
           </div>
         </div>
 

web/components/issues/issue-detail/subscription.tsx

@@ -51,7 +51,7 @@ export const IssueSubscription: FC<TIssueSubscription> = observer((props) => {
     }
   };
 
-  if (issue?.created_by === currentUserId || issue?.assignee_ids.includes(currentUserId)) return <></>;
+  if (issue?.created_by === currentUserId || issue?.assignee_ids?.includes(currentUserId)) return <></>;
 
   return (
     <div>

web/components/issues/issue-layouts/calendar/roots/project-view-root.tsx

@@ -4,33 +4,28 @@ import { observer } from "mobx-react-lite";
 import { useIssues } from "hooks/store";
 // components
 import { ProjectIssueQuickActions } from "components/issues";
+import { BaseCalendarRoot } from "../base-calendar-root";
 // types
 import { TIssue } from "@plane/types";
 import { EIssueActions } from "../../types";
-import { BaseCalendarRoot } from "../base-calendar-root";
+// constants
 import { EIssuesStoreType } from "constants/issue";
-import { useMemo } from "react";
 
-export const ProjectViewCalendarLayout: React.FC = observer(() => {
+export interface IViewCalendarLayout {
+  issueActions: {
+    [EIssueActions.DELETE]: (issue: TIssue) => Promise<void>;
+    [EIssueActions.UPDATE]?: (issue: TIssue) => Promise<void>;
+    [EIssueActions.REMOVE]?: (issue: TIssue) => Promise<void>;
+  };
+}
+
+export const ProjectViewCalendarLayout: React.FC<IViewCalendarLayout> = observer((props) => {
+  const { issueActions } = props;
+  // store
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT_VIEW);
+  // router
   const router = useRouter();
-  const { workspaceSlug, projectId, viewId } = router.query;
-
-  const issueActions = useMemo(
-    () => ({
-      [EIssueActions.UPDATE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !projectId) return;
-
-        await issues.updateIssue(workspaceSlug.toString(), projectId.toString(), issue.id, issue);
-      },
-      [EIssueActions.DELETE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !projectId) return;
-
-        await issues.removeIssue(workspaceSlug.toString(), projectId.toString(), issue.id);
-      },
-    }),
-    [issues, workspaceSlug, projectId]
-  );
+  const { viewId } = router.query;
 
   return (
     <BaseCalendarRoot

web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx

@@ -28,9 +28,9 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
     project: { projectLabels },
   } = useLabel();
   const { projectStates } = useProjectState();
-  const { getViewById, updateView } = useProjectView();
+  const { viewMap, updateView } = useProjectView();
   // derived values
-  const viewDetails = viewId ? getViewById(viewId.toString()) : null;
+  const viewDetails = viewId ? viewMap[viewId.toString()] : null;
   const userFilters = issueFilters?.filters;
   // filters whose value not null or empty array
   const appliedFilters: IIssueFilterOptions = {};
@@ -43,18 +43,30 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
   const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
     if (!workspaceSlug || !projectId) return;
     if (!value) {
-      updateFilters(workspaceSlug, projectId, EIssueFilterType.FILTERS, {
-        [key]: null,
-      });
+      updateFilters(
+        workspaceSlug,
+        projectId,
+        EIssueFilterType.FILTERS,
+        {
+          [key]: null,
+        },
+        viewId
+      );
       return;
     }
 
     let newValues = issueFilters?.filters?.[key] ?? [];
     newValues = newValues.filter((val) => val !== value);
 
-    updateFilters(workspaceSlug, projectId, EIssueFilterType.FILTERS, {
-      [key]: newValues,
-    });
+    updateFilters(
+      workspaceSlug,
+      projectId,
+      EIssueFilterType.FILTERS,
+      {
+        [key]: newValues,
+      },
+      viewId
+    );
   };
 
   const handleClearAllFilters = () => {
@@ -67,14 +79,14 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
   };
 
   // return if no filters are applied
-  if (Object.keys(appliedFilters).length === 0) return null;
+  if (Object.keys(appliedFilters).length === 0 && !areFiltersDifferent(appliedFilters, viewDetails?.filters ?? {}))
+    return null;
 
   const handleUpdateView = () => {
     if (!workspaceSlug || !projectId || !viewId || !viewDetails) return;
 
     updateView(workspaceSlug.toString(), projectId.toString(), viewId.toString(), {
-      query_data: {
-        ...viewDetails.query_data,
+      filters: {
         ...(appliedFilters ?? {}),
       },
     });
@@ -90,15 +102,13 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
         states={projectStates}
       />
 
-      {appliedFilters &&
-        viewDetails?.query_data &&
-        areFiltersDifferent(appliedFilters, viewDetails?.query_data ?? {}) && (
-          <div className="flex flex-shrink-0 items-center justify-center">
-            <Button variant="primary" size="sm" onClick={handleUpdateView}>
-              Update view
-            </Button>
-          </div>
-        )}
+      {viewDetails?.filters && areFiltersDifferent(appliedFilters, viewDetails?.filters ?? {}) && (
+        <div className="flex flex-shrink-0 items-center justify-center">
+          <Button variant="primary" size="sm" onClick={handleUpdateView}>
+            Update view
+          </Button>
+        </div>
+      )}
     </div>
   );
 });

web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx

@@ -1,10 +1,7 @@
-import React, { Fragment, useRef, useState } from "react";
+import React, { Fragment, useState } from "react";
 import { usePopper } from "react-popper";
-import { Popover } from "@headlessui/react";
+import { Popover, Transition } from "@headlessui/react";
 import { Placement } from "@popperjs/core";
-// hooks
-import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // ui
 import { Button } from "@plane/ui";
 // icons
@@ -23,24 +20,13 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
 
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
-  const [isOpen, setIsOpen] = useState(false);
-  // refs
-  const dropdownRef = useRef<HTMLDivElement | null>(null);
 
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
     placement: placement ?? "auto",
   });
 
-  const openDropdown = () => {
-    setIsOpen(true);
-    if (referenceElement) referenceElement.focus();
-  };
-  const closeDropdown = () => setIsOpen(false);
-  const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen);
-  useOutsideClickDetector(dropdownRef, closeDropdown);
-
   return (
-    <Popover as="div" ref={dropdownRef} tabIndex={tabIndex} onKeyDown={handleKeyDown}>
+    <Popover as="div">
       {({ open }) => {
         if (open) {
         }
@@ -55,15 +41,23 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
                 appendIcon={
                   <ChevronUp className={`transition-all ${open ? "" : "rotate-180"}`} size={14} strokeWidth={2} />
                 }
-                onClick={openDropdown}
+                tabIndex={tabIndex}
               >
                 <div className={`${open ? "text-custom-text-100" : "text-custom-text-200"}`}>
                   <span>{title}</span>
                 </div>
               </Button>
             </Popover.Button>
-            {isOpen && (
-              <Popover.Panel static>
+            <Transition
+              as={Fragment}
+              enter="transition ease-out duration-200"
+              enterFrom="opacity-0 translate-y-1"
+              enterTo="opacity-100 translate-y-0"
+              leave="transition ease-in duration-150"
+              leaveFrom="opacity-100 translate-y-0"
+              leaveTo="opacity-0 translate-y-1"
+            >
+              <Popover.Panel>
                 <div
                   className="z-10 overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg"
                   ref={setPopperElement}
@@ -73,7 +67,7 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
                   <div className="flex max-h-[37.5rem] w-[18.75rem] flex-col overflow-hidden">{children}</div>
                 </div>
               </Popover.Panel>
-            )}
+            </Transition>
           </>
         );
       }}

web/components/issues/issue-layouts/gantt/project-view-root.tsx

@@ -4,28 +4,34 @@ import { observer } from "mobx-react-lite";
 import { useIssues } from "hooks/store";
 // components
 import { BaseGanttRoot } from "./base-gantt-root";
+// constants
 import { EIssuesStoreType } from "constants/issue";
+// types
 import { EIssueActions } from "../types";
 import { TIssue } from "@plane/types";
 
-export const ProjectViewGanttLayout: React.FC = observer(() => {
+export interface IViewGanttLayout {
+  issueActions: {
+    [EIssueActions.DELETE]: (issue: TIssue) => Promise<void>;
+    [EIssueActions.UPDATE]?: (issue: TIssue) => Promise<void>;
+    [EIssueActions.REMOVE]?: (issue: TIssue) => Promise<void>;
+  };
+}
+
+export const ProjectViewGanttLayout: React.FC<IViewGanttLayout> = observer((props) => {
+  const { issueActions } = props;
+  // store
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT_VIEW);
   // router
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const { viewId } = router.query;
 
-  const issueActions = {
-    [EIssueActions.UPDATE]: async (issue: TIssue) => {
-      if (!workspaceSlug) return;
-
-      await issues.updateIssue(workspaceSlug.toString(), issue.project_id, issue.id, issue);
-    },
-    [EIssueActions.DELETE]: async (issue: TIssue) => {
-      if (!workspaceSlug) return;
-
-      await issues.removeIssue(workspaceSlug.toString(), issue.project_id, issue.id);
-    },
-  };
-
-  return <BaseGanttRoot issueFiltersStore={issuesFilter} issueStore={issues} issueActions={issueActions} />;
+  return (
+    <BaseGanttRoot
+      issueFiltersStore={issuesFilter}
+      issueStore={issues}
+      issueActions={issueActions}
+      viewId={viewId?.toString()}
+    />
+  );
 });

web/components/issues/issue-layouts/kanban/base-kanban-root.tsx

@@ -202,6 +202,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
       issueIds,
       viewId
     ).finally(() => {
+      handleIssues(issueMap[dragState.draggedIssueId!], EIssueActions.DELETE);
       setDeleteIssueModal(false);
       setDragState({});
     });

web/components/issues/issue-layouts/kanban/roots/project-view-root.tsx

@@ -1,38 +1,32 @@
-import React, { useMemo } from "react";
+import React from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 // hooks
 import { useIssues } from "hooks/store";
 // constant
+import { EIssuesStoreType } from "constants/issue";
+// types
 import { TIssue } from "@plane/types";
 import { EIssueActions } from "../../types";
-import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
 // components
 import { BaseKanBanRoot } from "../base-kanban-root";
-import { EIssuesStoreType } from "constants/issue";
+import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
 
-export interface IViewKanBanLayout {}
+export interface IViewKanBanLayout {
+  issueActions: {
+    [EIssueActions.DELETE]: (issue: TIssue) => Promise<void>;
+    [EIssueActions.UPDATE]?: (issue: TIssue) => Promise<void>;
+    [EIssueActions.REMOVE]?: (issue: TIssue) => Promise<void>;
+  };
+}
 
-export const ProjectViewKanBanLayout: React.FC = observer(() => {
+export const ProjectViewKanBanLayout: React.FC<IViewKanBanLayout> = observer((props) => {
+  const { issueActions } = props;
+  // router
   const router = useRouter();
-  const { workspaceSlug } = router.query as { workspaceSlug: string; projectId: string };
+  const { viewId } = router.query;
 
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT_VIEW);
-  const issueActions = useMemo(
-    () => ({
-      [EIssueActions.UPDATE]: async (issue: TIssue) => {
-        if (!workspaceSlug) return;
-
-        await issues.updateIssue(workspaceSlug, issue.project_id, issue.id, issue);
-      },
-      [EIssueActions.DELETE]: async (issue: TIssue) => {
-        if (!workspaceSlug) return;
-
-        await issues.removeIssue(workspaceSlug, issue.project_id, issue.id);
-      },
-    }),
-    [issues, workspaceSlug]
-  );
 
   return (
     <BaseKanBanRoot
@@ -42,6 +36,7 @@ export const ProjectViewKanBanLayout: React.FC = observer(() => {
       showLoader={true}
       QuickActions={ProjectIssueQuickActions}
       currentStore={EIssuesStoreType.PROJECT_VIEW}
+      viewId={viewId?.toString()}
     />
   );
 });

web/components/issues/issue-layouts/list/roots/module-root.tsx

@@ -25,12 +25,12 @@ export const ModuleListLayout: React.FC = observer(() => {
       [EIssueActions.UPDATE]: async (issue: TIssue) => {
         if (!workspaceSlug || !moduleId) return;
 
-        await issues.updateIssue(workspaceSlug.toString(), issue.project_id, issue.id, issue);
+        await issues.updateIssue(workspaceSlug.toString(), issue.project_id, issue.id, issue, moduleId.toString());
       },
       [EIssueActions.DELETE]: async (issue: TIssue) => {
         if (!workspaceSlug || !moduleId) return;
 
-        await issues.removeIssue(workspaceSlug.toString(), issue.project_id, issue.id);
+        await issues.removeIssue(workspaceSlug.toString(), issue.project_id, issue.id, moduleId.toString());
       },
       [EIssueActions.REMOVE]: async (issue: TIssue) => {
         if (!workspaceSlug || !moduleId) return;

web/components/issues/issue-layouts/list/roots/project-view-root.tsx

@@ -1,43 +1,35 @@
-import React, { useMemo } from "react";
+import React from "react";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 // store
 import { useIssues } from "hooks/store";
 // constants
-import { useRouter } from "next/router";
+import { EIssuesStoreType } from "constants/issue";
+// types
 import { EIssueActions } from "../../types";
 import { TIssue } from "@plane/types";
 // components
 import { BaseListRoot } from "../base-list-root";
 import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
-import { EIssuesStoreType } from "constants/issue";
 
-export interface IViewListLayout {}
+export interface IViewListLayout {
+  issueActions: {
+    [EIssueActions.DELETE]: (issue: TIssue) => Promise<void>;
+    [EIssueActions.UPDATE]?: (issue: TIssue) => Promise<void>;
+    [EIssueActions.REMOVE]?: (issue: TIssue) => Promise<void>;
+  };
+}
 
-export const ProjectViewListLayout: React.FC = observer(() => {
+export const ProjectViewListLayout: React.FC<IViewListLayout> = observer((props) => {
+  const { issueActions } = props;
   // store
   const { issuesFilter, issues } = useIssues(EIssuesStoreType.PROJECT_VIEW);
 
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
+  const { workspaceSlug, projectId, viewId } = router.query;
 
   if (!workspaceSlug || !projectId) return null;
 
-  const issueActions = useMemo(
-    () => ({
-      [EIssueActions.UPDATE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !projectId) return;
-
-        await issues.updateIssue(workspaceSlug, projectId, issue.id, issue);
-      },
-      [EIssueActions.DELETE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !projectId) return;
-
-        await issues.removeIssue(workspaceSlug, projectId, issue.id);
-      },
-    }),
-    [issues, workspaceSlug, projectId]
-  );
-
   return (
     <BaseListRoot
       issuesFilter={issuesFilter}
@@ -45,6 +37,7 @@ export const ProjectViewListLayout: React.FC = observer(() => {
       QuickActions={ProjectIssueQuickActions}
       issueActions={issueActions}
       currentStore={EIssuesStoreType.PROJECT_VIEW}
+      viewId={viewId?.toString()}
     />
   );
 });

web/components/issues/issue-layouts/properties/labels.tsx

@@ -62,6 +62,18 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
     if (workspaceSlug && projectId) fetchProjectLabels(workspaceSlug, projectId).then(() => setIsLoading(false));
   };
 
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
   if (!value) return null;
 
   let projectLabels: IIssueLabel[] = defaultOptions;
@@ -86,18 +98,6 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
   const filteredOptions =
     query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
 
-  const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: placement ?? "bottom-start",
-    modifiers: [
-      {
-        name: "preventOverflow",
-        options: {
-          padding: 12,
-        },
-      },
-    ],
-  });
-
   const label = (
     <div className="flex h-5 w-full flex-wrap items-center gap-2 overflow-hidden text-custom-text-200">
       {value.length > 0 ? (

web/components/issues/issue-layouts/roots/cycle-layout-root.tsx

@@ -13,6 +13,7 @@ import {
   CycleKanBanLayout,
   CycleListLayout,
   CycleSpreadsheetLayout,
+  IssuePeekOverview,
 } from "components/issues";
 import { TransferIssues, TransferIssuesModal } from "components/cycles";
 // ui
@@ -49,7 +50,7 @@ export const CycleLayoutRoot: React.FC = observer(() => {
   const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout;
 
   const cycleDetails = cycleId ? getCycleById(cycleId.toString()) : undefined;
-  const cycleStatus = cycleDetails?.status.toLocaleLowerCase() ?? "draft";
+  const cycleStatus = cycleDetails?.status?.toLocaleLowerCase() ?? "draft";
 
   if (!workspaceSlug || !projectId || !cycleId) return <></>;
   return (
@@ -73,19 +74,23 @@ export const CycleLayoutRoot: React.FC = observer(() => {
                 cycleId={cycleId.toString()}
               />
             ) : (
-              <div className="h-full w-full overflow-auto">
-                {activeLayout === "list" ? (
-                  <CycleListLayout />
-                ) : activeLayout === "kanban" ? (
-                  <CycleKanBanLayout />
-                ) : activeLayout === "calendar" ? (
-                  <CycleCalendarLayout />
-                ) : activeLayout === "gantt_chart" ? (
-                  <CycleGanttLayout />
-                ) : activeLayout === "spreadsheet" ? (
-                  <CycleSpreadsheetLayout />
-                ) : null}
-              </div>
+              <>
+                <div className="h-full w-full overflow-auto">
+                  {activeLayout === "list" ? (
+                    <CycleListLayout />
+                  ) : activeLayout === "kanban" ? (
+                    <CycleKanBanLayout />
+                  ) : activeLayout === "calendar" ? (
+                    <CycleCalendarLayout />
+                  ) : activeLayout === "gantt_chart" ? (
+                    <CycleGanttLayout />
+                  ) : activeLayout === "spreadsheet" ? (
+                    <CycleSpreadsheetLayout />
+                  ) : null}
+                </div>
+                {/* peek overview */}
+                <IssuePeekOverview />
+              </>
             )}
           </>
         )}

web/components/issues/issue-layouts/roots/module-layout-root.tsx

@@ -6,6 +6,7 @@ import useSWR from "swr";
 import { useIssues } from "hooks/store";
 // components
 import {
+  IssuePeekOverview,
   ModuleAppliedFiltersRoot,
   ModuleCalendarLayout,
   ModuleEmptyState,
@@ -16,6 +17,7 @@ import {
 } from "components/issues";
 // ui
 import { Spinner } from "@plane/ui";
+// constants
 import { EIssuesStoreType } from "constants/issue";
 
 export const ModuleLayoutRoot: React.FC = observer(() => {
@@ -62,19 +64,23 @@ export const ModuleLayoutRoot: React.FC = observer(() => {
               moduleId={moduleId.toString()}
             />
           ) : (
-            <div className="h-full w-full overflow-auto">
-              {activeLayout === "list" ? (
-                <ModuleListLayout />
-              ) : activeLayout === "kanban" ? (
-                <ModuleKanBanLayout />
-              ) : activeLayout === "calendar" ? (
-                <ModuleCalendarLayout />
-              ) : activeLayout === "gantt_chart" ? (
-                <ModuleGanttLayout />
-              ) : activeLayout === "spreadsheet" ? (
-                <ModuleSpreadsheetLayout />
-              ) : null}
-            </div>
+            <>
+              <div className="h-full w-full overflow-auto">
+                {activeLayout === "list" ? (
+                  <ModuleListLayout />
+                ) : activeLayout === "kanban" ? (
+                  <ModuleKanBanLayout />
+                ) : activeLayout === "calendar" ? (
+                  <ModuleCalendarLayout />
+                ) : activeLayout === "gantt_chart" ? (
+                  <ModuleGanttLayout />
+                ) : activeLayout === "spreadsheet" ? (
+                  <ModuleSpreadsheetLayout />
+                ) : null}
+              </div>
+              {/* peek overview */}
+              <IssuePeekOverview />
+            </>
           )}
         </>
       )}

web/components/issues/issue-layouts/roots/project-layout-root.tsx

@@ -30,7 +30,11 @@ export const ProjectLayoutRoot: FC = observer(() => {
   useSWR(workspaceSlug && projectId ? `PROJECT_ISSUES_${workspaceSlug}_${projectId}` : null, async () => {
     if (workspaceSlug && projectId) {
       await issuesFilter?.fetchFilters(workspaceSlug.toString(), projectId.toString());
-      await issues?.fetchIssues(workspaceSlug.toString(), projectId.toString(), issues?.groupedIssueIds ? "mutation" : "init-loader");
+      await issues?.fetchIssues(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        issues?.groupedIssueIds ? "mutation" : "init-loader"
+      );
     }
   });
 

web/components/issues/issue-layouts/roots/project-view-layout-root.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import useSWR from "swr";
@@ -6,16 +6,21 @@ import useSWR from "swr";
 import { useIssues } from "hooks/store";
 // components
 import {
-  ProjectEmptyState,
+  IssuePeekOverview,
   ProjectViewAppliedFiltersRoot,
   ProjectViewCalendarLayout,
+  ProjectViewEmptyState,
   ProjectViewGanttLayout,
   ProjectViewKanBanLayout,
   ProjectViewListLayout,
   ProjectViewSpreadsheetLayout,
 } from "components/issues";
 import { Spinner } from "@plane/ui";
+// constants
 import { EIssuesStoreType } from "constants/issue";
+// types
+import { TIssue } from "@plane/types";
+import { EIssueActions } from "../types";
 
 export const ProjectViewLayoutRoot: React.FC = observer(() => {
   // router
@@ -39,6 +44,22 @@ export const ProjectViewLayoutRoot: React.FC = observer(() => {
     }
   );
 
+  const issueActions = useMemo(
+    () => ({
+      [EIssueActions.UPDATE]: async (issue: TIssue) => {
+        if (!workspaceSlug || !projectId) return;
+
+        await issues.updateIssue(workspaceSlug.toString(), projectId.toString(), issue.id, issue, viewId?.toString());
+      },
+      [EIssueActions.DELETE]: async (issue: TIssue) => {
+        if (!workspaceSlug || !projectId) return;
+
+        await issues.removeIssue(workspaceSlug.toString(), projectId.toString(), issue.id, viewId?.toString());
+      },
+    }),
+    [issues, workspaceSlug, projectId, viewId]
+  );
+
   const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout;
 
   if (!workspaceSlug || !projectId || !viewId) return <></>;
@@ -53,22 +74,26 @@ export const ProjectViewLayoutRoot: React.FC = observer(() => {
       ) : (
         <>
           {!issues?.groupedIssueIds ? (
-            // TODO: Replace this with project view empty state
-            <ProjectEmptyState />
+            <ProjectViewEmptyState />
           ) : (
-            <div className="relative h-full w-full overflow-auto">
-              {activeLayout === "list" ? (
-                <ProjectViewListLayout />
-              ) : activeLayout === "kanban" ? (
-                <ProjectViewKanBanLayout />
-              ) : activeLayout === "calendar" ? (
-                <ProjectViewCalendarLayout />
-              ) : activeLayout === "gantt_chart" ? (
-                <ProjectViewGanttLayout />
-              ) : activeLayout === "spreadsheet" ? (
-                <ProjectViewSpreadsheetLayout />
-              ) : null}
-            </div>
+            <>
+              <div className="relative h-full w-full overflow-auto">
+                {activeLayout === "list" ? (
+                  <ProjectViewListLayout issueActions={issueActions} />
+                ) : activeLayout === "kanban" ? (
+                  <ProjectViewKanBanLayout issueActions={issueActions} />
+                ) : activeLayout === "calendar" ? (
+                  <ProjectViewCalendarLayout issueActions={issueActions} />
+                ) : activeLayout === "gantt_chart" ? (
+                  <ProjectViewGanttLayout issueActions={issueActions} />
+                ) : activeLayout === "spreadsheet" ? (
+                  <ProjectViewSpreadsheetLayout issueActions={issueActions} />
+                ) : null}
+              </div>
+
+              {/* peek overview */}
+              <IssuePeekOverview />
+            </>
           )}
         </>
       )}

web/components/issues/issue-layouts/save-filter-view.tsx

@@ -20,7 +20,7 @@ export const SaveFilterView: FC<ISaveFilterView> = (props) => {
       <CreateUpdateProjectViewModal
         workspaceSlug={workspaceSlug}
         projectId={projectId}
-        preLoadedData={{ query_data: { ...filterParams } }}
+        preLoadedData={{ filters: { ...filterParams } }}
         isOpen={viewModal}
         onClose={() => setViewModal(false)}
       />

web/components/issues/issue-layouts/spreadsheet/roots/project-view-root.tsx

@@ -1,43 +1,40 @@
-import React, { useMemo } from "react";
+import React from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 // mobx store
 import { useIssues } from "hooks/store";
 // components
 import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
+import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
+// types
 import { EIssueActions } from "../../types";
 import { TIssue } from "@plane/types";
-import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
+// constants
 import { EIssuesStoreType } from "constants/issue";
 
-export const ProjectViewSpreadsheetLayout: React.FC = observer(() => {
+export interface IViewSpreadsheetLayout {
+  issueActions: {
+    [EIssueActions.DELETE]: (issue: TIssue) => Promise<void>;
+    [EIssueActions.UPDATE]?: (issue: TIssue) => Promise<void>;
+    [EIssueActions.REMOVE]?: (issue: TIssue) => Promise<void>;
+  };
+}
+
+export const ProjectViewSpreadsheetLayout: React.FC<IViewSpreadsheetLayout> = observer((props) => {
+  const { issueActions } = props;
+  // router
   const router = useRouter();
-  const { workspaceSlug } = router.query as { workspaceSlug: string };
+  const { viewId } = router.query;
 
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT_VIEW);
 
-  const issueActions = useMemo(
-    () => ({
-      [EIssueActions.UPDATE]: async (issue: TIssue) => {
-        if (!workspaceSlug) return;
-
-        await issues.updateIssue(workspaceSlug, issue.project_id, issue.id, issue);
-      },
-      [EIssueActions.DELETE]: async (issue: TIssue) => {
-        if (!workspaceSlug) return;
-
-        await issues.removeIssue(workspaceSlug, issue.project_id, issue.id);
-      },
-    }),
-    [issues, workspaceSlug]
-  );
-
   return (
     <BaseSpreadsheetRoot
       issueStore={issues}
       issueFiltersStore={issuesFilter}
       issueActions={issueActions}
       QuickActions={ProjectIssueQuickActions}
+      viewId={viewId?.toString()}
     />
   );
 });

web/components/issues/issue-modal/form.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState, useRef } from "react";
+import React, { FC, useState, useRef, useEffect } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { Controller, useForm } from "react-hook-form";
@@ -6,7 +6,7 @@ import { LayoutPanelTop, Sparkle, X } from "lucide-react";
 // editor
 import { RichTextEditorWithRef } from "@plane/rich-text-editor";
 // hooks
-import { useApplication, useEstimate, useMention, useProject } from "hooks/store";
+import { useApplication, useEstimate, useIssueDetail, useMention, useProject } from "hooks/store";
 import useToast from "hooks/use-toast";
 // services
 import { AIService } from "services/ai.service";
@@ -85,6 +85,9 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
   const { getProjectById } = useProject();
   const { areEstimatesEnabledForProject } = useEstimate();
   const { mentionHighlights, mentionSuggestions } = useMention();
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail();
   // toast alert
   const { setToastAlert } = useToast();
   // form info
@@ -179,6 +182,28 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
 
   const projectDetails = getProjectById(projectId);
 
+  // executing this useEffect when the parent_id coming from the component prop
+  useEffect(() => {
+    const parentId = watch("parent_id") || undefined;
+    if (!parentId) return;
+    if (parentId === selectedParentIssue?.id || selectedParentIssue) return;
+
+    const issue = getIssueById(parentId);
+    if (!issue) return;
+
+    const projectDetails = getProjectById(issue.project_id);
+    if (!projectDetails) return;
+
+    setSelectedParentIssue({
+      id: issue.id,
+      name: issue.name,
+      project_id: issue.project_id,
+      project__identifier: projectDetails.identifier,
+      project__name: projectDetails.name,
+      sequence_id: issue.sequence_id,
+    } as ISearchIssueResponse);
+  }, [watch, getIssueById, getProjectById, selectedParentIssue]);
+
   return (
     <>
       {projectId && (

web/components/issues/issue-modal/modal.tsx

@@ -18,7 +18,7 @@ export interface IssuesModalProps {
   data?: Partial<TIssue>;
   isOpen: boolean;
   onClose: () => void;
-  onSubmit?: (res: Partial<TIssue>) => Promise<void>;
+  onSubmit?: (res: TIssue) => Promise<void>;
   withDraftIssueWrapper?: boolean;
 }
 
@@ -58,52 +58,46 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
     onClose();
   };
 
-  const handleCreateIssue = async (payload: Partial<TIssue>): Promise<TIssue | null> => {
-    if (!workspaceSlug || !payload.project_id) return null;
+  const handleCreateIssue = async (payload: Partial<TIssue>): Promise<TIssue | undefined> => {
+    if (!workspaceSlug || !payload.project_id) return undefined;
 
-    await createIssue(workspaceSlug.toString(), payload.project_id, payload)
-      .then(async (res) => {
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: "Issue created successfully.",
-        });
-        !createMore && handleClose();
-        return res;
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Issue could not be created. Please try again.",
-        });
+    try {
+      const response = await createIssue(workspaceSlug.toString(), payload.project_id, payload);
+      setToastAlert({
+        type: "success",
+        title: "Success!",
+        message: "Issue created successfully.",
       });
-
-    return null;
+      !createMore && handleClose();
+      return response;
+    } catch (error) {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Issue could not be created. Please try again.",
+      });
+    }
   };
 
-  const handleUpdateIssue = async (payload: Partial<TIssue>): Promise<TIssue | null> => {
-    if (!workspaceSlug || !payload.project_id || !data?.id) return null;
+  const handleUpdateIssue = async (payload: Partial<TIssue>): Promise<TIssue | undefined> => {
+    if (!workspaceSlug || !payload.project_id || !data?.id) return undefined;
 
-    await updateIssue(workspaceSlug.toString(), payload.project_id, data.id, payload)
-      .then((res) => {
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: "Issue updated successfully.",
-        });
-        handleClose();
-        return { ...payload, ...res };
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Issue could not be updated. Please try again.",
-        });
+    try {
+      const response = await updateIssue(workspaceSlug.toString(), payload.project_id, data.id, payload);
+      setToastAlert({
+        type: "success",
+        title: "Success!",
+        message: "Issue updated successfully.",
       });
-
-    return null;
+      handleClose();
+      return response;
+    } catch (error) {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Issue could not be created. Please try again.",
+      });
+    }
   };
 
   const handleFormSubmit = async (formData: Partial<TIssue>) => {
@@ -114,7 +108,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
       description_html: formData.description_html ?? "<p></p>",
     };
 
-    let res: TIssue | null = null;
+    let res: TIssue | undefined = undefined;
     if (!data?.id) res = await handleCreateIssue(payload);
     else res = await handleUpdateIssue(payload);
 
@@ -126,7 +120,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
     if (formData.module_id && res && (!data?.id || formData.module_id !== data?.module_id))
       await addIssueToModule(workspaceSlug.toString(), formData.project_id, formData.module_id, [res.id]);
 
-    if (res && onSubmit) await onSubmit(res);
+    if (res != undefined && onSubmit) await onSubmit(res);
   };
 
   const handleFormChange = (formData: Partial<TIssue> | null) => setChangesMade(formData);

web/components/issues/label.tsx

@@ -9,7 +9,7 @@ type Props = {
 
 export const ViewIssueLabel: React.FC<Props> = ({ labelDetails, maxRender = 1 }) => (
   <>
-    {labelDetails.length > 0 ? (
+    {labelDetails?.length > 0 ? (
       labelDetails.length <= maxRender ? (
         <>
           {labelDetails.map((label) => (

web/components/issues/peek-overview/issue-detail.tsx

@@ -1,133 +1,32 @@
-import { ChangeEvent, FC, useCallback, useEffect, useState } from "react";
-import { Controller, useForm } from "react-hook-form";
-import debounce from "lodash/debounce";
-// packages
-import { RichTextEditor } from "@plane/rich-text-editor";
+import { FC } from "react";
 // hooks
-import { useMention, useProject, useUser } from "hooks/store";
-import useReloadConfirmations from "hooks/use-reload-confirmation";
+import { useIssueDetail, useProject, useUser } from "hooks/store";
 // components
-import { IssuePeekOverviewReactions } from "components/issues";
-// ui
-import { TextArea } from "@plane/ui";
-// types
-import { TIssue, IUser } from "@plane/types";
-// services
-import { FileService } from "services/file.service";
-// constants
-import { EUserProjectRoles } from "constants/project";
-
-const fileService = new FileService();
+import { IssueDescriptionForm, TIssueOperations } from "components/issues";
+import { IssueReaction } from "../issue-detail/reactions";
 
 interface IPeekOverviewIssueDetails {
   workspaceSlug: string;
-  issue: TIssue;
-  issueReactions: any;
-  user: IUser | null;
-  issueUpdate: (issue: Partial<TIssue>) => void;
-  issueReactionCreate: (reaction: string) => void;
-  issueReactionRemove: (reaction: string) => void;
+  projectId: string;
+  issueId: string;
+  issueOperations: TIssueOperations;
+  is_archived: boolean;
+  disabled: boolean;
   isSubmitting: "submitting" | "submitted" | "saved";
   setIsSubmitting: (value: "submitting" | "submitted" | "saved") => void;
 }
 
 export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) => {
-  const {
-    workspaceSlug,
-    issue,
-    issueReactions,
-    user,
-    issueUpdate,
-    issueReactionCreate,
-    issueReactionRemove,
-    isSubmitting,
-    setIsSubmitting,
-  } = props;
-  // states
-  const [characterLimit, setCharacterLimit] = useState(false);
+  const { workspaceSlug, projectId, issueId, issueOperations, disabled, isSubmitting, setIsSubmitting } = props;
   // store hooks
-  const {
-    membership: { currentProjectRole },
-  } = useUser();
-  const { mentionHighlights, mentionSuggestions } = useMention();
   const { getProjectById } = useProject();
-  // derived values
-  const isAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
-  // toast alert
-  const { setShowAlert } = useReloadConfirmations();
-  // form info
+  const { currentUser } = useUser();
   const {
-    handleSubmit,
-    watch,
-    reset,
-    control,
-    formState: { errors },
-  } = useForm<TIssue>({
-    defaultValues: {
-      name: issue.name,
-      description_html: issue.description_html,
-    },
-  });
-
-  const handleDescriptionFormSubmit = useCallback(
-    async (formData: Partial<TIssue>) => {
-      if (!formData?.name || formData?.name.length === 0 || formData?.name.length > 255) return;
-
-      await issueUpdate({
-        ...issue,
-        name: formData.name ?? "",
-        description_html: formData.description_html ?? "<p></p>",
-      });
-    },
-    [issue, issueUpdate]
-  );
-
-  const [localTitleValue, setLocalTitleValue] = useState("");
-  const [localIssueDescription, setLocalIssueDescription] = useState({
-    id: issue.id,
-    description_html: issue.description_html,
-  });
-
-  // adding issue.description_html or issue.name to dependency array causes
-  // editor rerendering on every save
-  useEffect(() => {
-    if (issue.id) {
-      setLocalIssueDescription({ id: issue.id, description_html: issue.description_html });
-      setLocalTitleValue(issue.name);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [issue.id]); // TODO: Verify the exhaustive-deps warning
-
-  // ADDING handleDescriptionFormSubmit TO DEPENDENCY ARRAY PRODUCES ADVERSE EFFECTS
-  // TODO: Verify the exhaustive-deps warning
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const debouncedFormSave = useCallback(
-    debounce(async () => {
-      handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted"));
-    }, 1500),
-    [handleSubmit]
-  );
-
-  useEffect(() => {
-    if (isSubmitting === "submitted") {
-      setShowAlert(false);
-      setTimeout(async () => {
-        setIsSubmitting("saved");
-      }, 2000);
-    } else if (isSubmitting === "submitting") {
-      setShowAlert(true);
-    }
-  }, [isSubmitting, setShowAlert, setIsSubmitting]);
-
-  // reset form values
-  useEffect(() => {
-    if (!issue) return;
-
-    reset({
-      ...issue,
-    });
-  }, [issue, reset]);
-
+    issue: { getIssueById },
+  } = useIssueDetail();
+  // derived values
+  const issue = getIssueById(issueId);
+  if (!issue) return <></>;
   const projectDetails = getProjectById(issue?.project_id);
 
   return (
@@ -135,82 +34,24 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
       <span className="text-base font-medium text-custom-text-400">
         {projectDetails?.identifier}-{issue?.sequence_id}
       </span>
-
-      <div className="relative">
-        {isAllowed ? (
-          <Controller
-            name="name"
-            control={control}
-            render={({ field: { onChange } }) => (
-              <TextArea
-                id="name"
-                name="name"
-                value={localTitleValue}
-                placeholder="Enter issue name"
-                onFocus={() => setCharacterLimit(true)}
-                onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {
-                  setCharacterLimit(false);
-                  setIsSubmitting("submitting");
-                  setLocalTitleValue(e.target.value);
-                  onChange(e.target.value);
-                  debouncedFormSave();
-                }}
-                required={true}
-                className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent  !p-0 text-xl outline-none ring-0 focus:!px-3 focus:!py-2 focus:ring-1 focus:ring-custom-primary"
-                hasError={Boolean(errors?.name)}
-                role="textbox"
-                disabled={!true}
-              />
-            )}
-          />
-        ) : (
-          <h4 className="break-words text-2xl font-semibold">{issue.name}</h4>
-        )}
-        {characterLimit && true && (
-          <div className="pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 p-0.5 text-xs text-custom-text-200">
-            <span className={`${watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : ""}`}>
-              {watch("name").length}
-            </span>
-            /255
-          </div>
-        )}
-      </div>
-      <span>{errors.name ? errors.name.message : null}</span>
-      <div className="relative">
-        <Controller
-          name="description_html"
-          control={control}
-          render={({ field: { onChange } }) => (
-            <RichTextEditor
-              cancelUploadImage={fileService.cancelUpload}
-              uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
-              deleteFile={fileService.deleteImage}
-              restoreFile={fileService.restoreImage}
-              value={localIssueDescription.description_html}
-              rerenderOnPropsChange={localIssueDescription}
-              setShouldShowAlert={setShowAlert}
-              setIsSubmitting={setIsSubmitting}
-              dragDropEnabled
-              customClassName={isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"}
-              noBorder={!isAllowed}
-              onChange={(description: Object, description_html: string) => {
-                setShowAlert(true);
-                setIsSubmitting("submitting");
-                onChange(description_html);
-                debouncedFormSave();
-              }}
-              mentionSuggestions={mentionSuggestions}
-              mentionHighlights={mentionHighlights}
-            />
-          )}
-        />
-      </div>
-      <IssuePeekOverviewReactions
-        issueReactions={issueReactions}
-        user={user}
-        issueReactionCreate={issueReactionCreate}
-        issueReactionRemove={issueReactionRemove}
+      <IssueDescriptionForm
+        workspaceSlug={workspaceSlug}
+        projectId={projectId}
+        issueId={issueId}
+        setIsSubmitting={(value) => setIsSubmitting(value)}
+        isSubmitting={isSubmitting}
+        issue={issue}
+        issueOperations={issueOperations}
+        disabled={disabled}
       />
+      {currentUser && (
+        <IssueReaction
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          issueId={issueId}
+          currentUser={currentUser}
+        />
+      )}
     </>
   );
 };

web/components/issues/peek-overview/properties.tsx

@@ -1,61 +1,40 @@
 import { FC } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { CalendarDays, Signal, Tag, Triangle, LayoutPanelTop } from "lucide-react";
 // hooks
-import { useProject, useUser } from "hooks/store";
+import { useIssueDetail, useProject } from "hooks/store";
 // ui icons
 import { DiceIcon, DoubleCircleIcon, UserGroupIcon, ContrastIcon } from "@plane/ui";
-import { IssueLinkRoot, IssueCycleSelect, IssueModuleSelect, IssueParentSelect, IssueLabel } from "components/issues";
+import {
+  IssueLinkRoot,
+  IssueCycleSelect,
+  IssueModuleSelect,
+  IssueParentSelect,
+  IssueLabel,
+  TIssueOperations,
+} from "components/issues";
 import { EstimateDropdown, PriorityDropdown, ProjectMemberDropdown, StateDropdown } from "components/dropdowns";
 // components
 import { CustomDatePicker } from "components/ui";
-// types
-import { TIssue, TIssuePriorities } from "@plane/types";
-// constants
-// import { EUserProjectRoles } from "constants/project";
 
 interface IPeekOverviewProperties {
-  issue: TIssue;
-  issueUpdate: (issue: Partial<TIssue>) => void;
-  disableUserActions: boolean;
-  issueOperations: any;
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  disabled: boolean;
+  issueOperations: TIssueOperations;
 }
 
 export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((props) => {
-  const { issue, issueUpdate, disableUserActions, issueOperations } = props;
-
+  const { workspaceSlug, projectId, issueId, issueOperations, disabled } = props;
   // store hooks
-  const {
-    membership: { currentProjectRole },
-  } = useUser();
   const { getProjectById } = useProject();
-  // router
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const uneditable = currentProjectRole ? [5, 10].includes(currentProjectRole) : false;
-  // const isAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
-
-  const handleState = (_state: string) => {
-    issueUpdate({ ...issue, state_id: _state });
-  };
-  const handlePriority = (_priority: TIssuePriorities) => {
-    issueUpdate({ ...issue, priority: _priority });
-  };
-  const handleAssignee = (_assignees: string[]) => {
-    issueUpdate({ ...issue, assignee_ids: _assignees });
-  };
-  const handleEstimate = (_estimate: number | null) => {
-    issueUpdate({ ...issue, estimate_point: _estimate });
-  };
-  const handleStartDate = (_startDate: string | null) => {
-    issueUpdate({ ...issue, start_date: _startDate || undefined });
-  };
-  const handleTargetDate = (_targetDate: string | null) => {
-    issueUpdate({ ...issue, target_date: _targetDate || undefined });
-  };
-
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail();
+  // derived values
+  const issue = getIssueById(issueId);
+  if (!issue) return <></>;
   const projectDetails = getProjectById(issue.project_id);
   const isEstimateEnabled = projectDetails?.estimate;
 
@@ -68,7 +47,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
   return (
     <>
       <div className="flex flex-col">
-        <div className="flex w-full flex-col gap-5 py-5">
+        <div className={`flex w-full flex-col gap-5 py-5 ${disabled ? "opacity-60" : ""}`}>
           {/* state */}
           <div className="flex w-full items-center gap-2">
             <div className="flex w-40 flex-shrink-0 items-center gap-2 text-sm">
@@ -77,10 +56,10 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
             </div>
             <div>
               <StateDropdown
-                value={issue?.state_id || ""}
-                onChange={handleState}
-                projectId={issue.project_id}
-                disabled={disableUserActions}
+                value={issue?.state_id ?? undefined}
+                onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { state_id: val })}
+                projectId={projectId?.toString() ?? ""}
+                disabled={disabled}
                 buttonVariant="background-with-text"
               />
             </div>
@@ -94,14 +73,14 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
             </div>
             <div className="h-5 sm:w-1/2">
               <ProjectMemberDropdown
-                value={issue.assignee_ids}
-                onChange={handleAssignee}
-                disabled={disableUserActions}
+                value={issue?.assignee_ids ?? undefined}
+                onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { assignee_ids: val })}
+                disabled={disabled}
                 projectId={projectId?.toString() ?? ""}
                 placeholder="Assignees"
                 multiple
-                buttonVariant={issue.assignee_ids?.length > 0 ? "transparent-without-text" : "background-with-text"}
-                buttonClassName={issue.assignee_ids?.length > 0 ? "hover:bg-transparent px-0" : ""}
+                buttonVariant={issue?.assignee_ids?.length > 0 ? "transparent-without-text" : "background-with-text"}
+                buttonClassName={issue?.assignee_ids?.length > 0 ? "hover:bg-transparent px-0" : ""}
               />
             </div>
           </div>
@@ -114,9 +93,9 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
             </div>
             <div className="h-5">
               <PriorityDropdown
-                value={issue.priority || ""}
-                onChange={handlePriority}
-                disabled={disableUserActions}
+                value={issue?.priority || undefined}
+                onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { priority: val })}
+                disabled={disabled}
                 buttonVariant="background-with-text"
               />
             </div>
@@ -131,10 +110,10 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
               </div>
               <div>
                 <EstimateDropdown
-                  value={issue.estimate_point}
-                  onChange={handleEstimate}
-                  projectId={issue.project_id}
-                  disabled={disableUserActions}
+                  value={issue?.estimate_point || null}
+                  onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { estimate_point: val })}
+                  projectId={projectId}
+                  disabled={disabled}
                   buttonVariant="background-with-text"
                 />
               </div>
@@ -150,11 +129,11 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
             <div>
               <CustomDatePicker
                 placeholder="Start date"
-                value={issue.start_date}
-                onChange={handleStartDate}
-                className="!rounded border-none bg-custom-background-80 !px-2.5 !py-0.5"
+                value={issue.start_date || undefined}
+                onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { start_date: val })}
+                className="border-none bg-custom-background-80"
                 maxDate={maxDate ?? undefined}
-                disabled={disableUserActions}
+                disabled={disabled}
               />
             </div>
           </div>
@@ -168,11 +147,11 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
             <div>
               <CustomDatePicker
                 placeholder="Due date"
-                value={issue.target_date}
-                onChange={handleTargetDate}
-                className="!rounded border-none bg-custom-background-80 !px-2.5 !py-0.5"
+                value={issue.target_date || undefined}
+                onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { target_date: val })}
+                className="border-none bg-custom-background-80"
                 minDate={minDate ?? undefined}
-                disabled={disableUserActions}
+                disabled={disabled}
               />
             </div>
           </div>
@@ -185,11 +164,11 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
             </div>
             <div>
               <IssueParentSelect
-                workspaceSlug={workspaceSlug?.toString() ?? ""}
-                projectId={projectId?.toString() ?? ""}
-                issueId={issue?.id}
+                workspaceSlug={workspaceSlug}
+                projectId={projectId}
+                issueId={issueId}
                 issueOperations={issueOperations}
-                disabled={disableUserActions}
+                disabled={disabled}
               />
             </div>
           </div>
@@ -197,7 +176,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
 
         <span className="border-t border-custom-border-200" />
 
-        <div className="flex w-full flex-col gap-5 py-5">
+        <div className={`flex w-full flex-col gap-5 py-5 ${disabled ? "opacity-60" : ""}`}>
           {projectDetails?.cycle_view && (
             <div className="flex w-full items-center gap-2">
               <div className="flex w-40 flex-shrink-0 items-center gap-2 text-sm">
@@ -206,11 +185,11 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
               </div>
               <div>
                 <IssueCycleSelect
-                  workspaceSlug={workspaceSlug?.toString() ?? ""}
-                  projectId={projectId?.toString() ?? ""}
-                  issueId={issue?.id}
+                  workspaceSlug={workspaceSlug}
+                  projectId={projectId}
+                  issueId={issueId}
                   issueOperations={issueOperations}
-                  disabled={disableUserActions}
+                  disabled={disabled}
                 />
               </div>
             </div>
@@ -224,11 +203,11 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
               </div>
               <div>
                 <IssueModuleSelect
-                  workspaceSlug={workspaceSlug?.toString() ?? ""}
-                  projectId={projectId?.toString() ?? ""}
-                  issueId={issue?.id}
+                  workspaceSlug={workspaceSlug}
+                  projectId={projectId}
+                  issueId={issueId}
                   issueOperations={issueOperations}
-                  disabled={disableUserActions}
+                  disabled={disabled}
                 />
               </div>
             </div>
@@ -240,12 +219,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
               <p>Label</p>
             </div>
             <div className="flex w-full flex-col gap-3">
-              <IssueLabel
-                workspaceSlug={workspaceSlug?.toString() ?? ""}
-                projectId={projectId?.toString() ?? ""}
-                issueId={issue?.id}
-                disabled={uneditable}
-              />
+              <IssueLabel workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={disabled} />
             </div>
           </div>
         </div>
@@ -253,11 +227,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
         <span className="border-t border-custom-border-200" />
 
         <div className="w-full pt-3">
-          <IssueLinkRoot
-            workspaceSlug={workspaceSlug?.toString() ?? ""}
-            projectId={projectId?.toString() ?? ""}
-            issueId={issue?.id}
-          />
+          <IssueLinkRoot workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={disabled} />
         </div>
       </div>
     </>

web/components/issues/peek-overview/root.tsx

@@ -1,14 +1,10 @@
 import { FC, Fragment, useEffect, useState, useMemo } from "react";
-// router
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // hooks
 import useToast from "hooks/use-toast";
-import { useIssueDetail, useIssues, useMember, useProject, useUser } from "hooks/store";
+import { useIssueDetail, useIssues, useMember, useUser } from "hooks/store";
 // components
 import { IssueView } from "components/issues";
-// helpers
-import { copyUrlToClipboard } from "helpers/string.helper";
 // types
 import { TIssue } from "@plane/types";
 // constants
@@ -16,10 +12,20 @@ import { EUserProjectRoles } from "constants/project";
 import { EIssuesStoreType } from "constants/issue";
 
 interface IIssuePeekOverview {
-  isArchived?: boolean;
+  is_archived?: boolean;
+  onIssueUpdate?: (issue: Partial<TIssue>) => Promise<void>;
 }
 
 export type TIssuePeekOperations = {
+  fetch: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+  update: (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: Partial<TIssue>,
+    showToast?: boolean
+  ) => Promise<void>;
+  remove: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
   addIssueToCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => Promise<void>;
   removeIssueFromCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => Promise<void>;
   addIssueToModule: (workspaceSlug: string, projectId: string, moduleId: string, issueIds: string[]) => Promise<void>;
@@ -27,17 +33,13 @@ export type TIssuePeekOperations = {
 };
 
 export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
-  const { isArchived = false } = props;
-  // router
-  const router = useRouter();
+  const { is_archived = false, onIssueUpdate } = props;
   // hooks
   const {
     project: {},
   } = useMember();
-  const { currentProjectDetails } = useProject();
   const { setToastAlert } = useToast();
   const {
-    currentUser,
     membership: { currentProjectRole },
   } = useUser();
   const {
@@ -47,17 +49,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
     peekIssue,
     updateIssue,
     removeIssue,
-    createComment,
-    updateComment,
-    removeComment,
-    createCommentReaction,
-    removeCommentReaction,
-    createReaction,
-    removeReaction,
-    createSubscription,
-    removeSubscription,
     issue: { getIssueById, fetchIssue },
-    fetchActivities,
   } = useIssueDetail();
   const { addIssueToCycle, removeIssueFromCycle, addIssueToModule, removeIssueFromModule } = useIssueDetail();
   // state
@@ -74,6 +66,54 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
 
   const issueOperations: TIssuePeekOperations = useMemo(
     () => ({
+      fetch: async (workspaceSlug: string, projectId: string, issueId: string) => {
+        try {
+          await fetchIssue(workspaceSlug, projectId, issueId);
+        } catch (error) {
+          console.error("Error fetching the parent issue");
+        }
+      },
+      update: async (
+        workspaceSlug: string,
+        projectId: string,
+        issueId: string,
+        data: Partial<TIssue>,
+        showToast: boolean = true
+      ) => {
+        try {
+          const response = await updateIssue(workspaceSlug, projectId, issueId, data);
+          if (onIssueUpdate) await onIssueUpdate(response);
+          if (showToast)
+            setToastAlert({
+              title: "Issue updated successfully",
+              type: "success",
+              message: "Issue updated successfully",
+            });
+        } catch (error) {
+          setToastAlert({
+            title: "Issue update failed",
+            type: "error",
+            message: "Issue update failed",
+          });
+        }
+      },
+      remove: async (workspaceSlug: string, projectId: string, issueId: string) => {
+        try {
+          if (is_archived) await removeArchivedIssue(workspaceSlug, projectId, issueId);
+          else await removeIssue(workspaceSlug, projectId, issueId);
+          setToastAlert({
+            title: "Issue deleted successfully",
+            type: "success",
+            message: "Issue deleted successfully",
+          });
+        } catch (error) {
+          setToastAlert({
+            title: "Issue delete failed",
+            type: "error",
+            message: "Issue delete failed",
+          });
+        }
+      },
       addIssueToCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => {
         try {
           await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds);
@@ -139,73 +179,27 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
         }
       },
     }),
-    [addIssueToCycle, removeIssueFromCycle, addIssueToModule, removeIssueFromModule, setToastAlert]
+    [
+      is_archived,
+      fetchIssue,
+      updateIssue,
+      removeIssue,
+      removeArchivedIssue,
+      addIssueToCycle,
+      removeIssueFromCycle,
+      addIssueToModule,
+      removeIssueFromModule,
+      setToastAlert,
+      onIssueUpdate,
+    ]
   );
 
   if (!peekIssue?.workspaceSlug || !peekIssue?.projectId || !peekIssue?.issueId) return <></>;
 
   const issue = getIssueById(peekIssue.issueId) || undefined;
 
-  const redirectToIssueDetail = () => {
-    router.push({
-      pathname: `/${peekIssue.workspaceSlug}/projects/${peekIssue.projectId}/${
-        isArchived ? "archived-issues" : "issues"
-      }/${peekIssue.issueId}`,
-    });
-  };
-
-  const handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
-    e.preventDefault();
-    copyUrlToClipboard(
-      `${peekIssue.workspaceSlug}/projects/${peekIssue.projectId}/${isArchived ? "archived-issues" : "issues"}/${
-        peekIssue.issueId
-      }`
-    ).then(() => {
-      setToastAlert({
-        type: "success",
-        title: "Link Copied!",
-        message: "Issue link copied to clipboard.",
-      });
-    });
-  };
-
-  const issueUpdate = async (_data: Partial<TIssue>) => {
-    if (!issue) return;
-    await updateIssue(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId, _data);
-    fetchActivities(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId);
-  };
-  const issueDelete = async () => {
-    if (!issue) return;
-    if (isArchived) await removeArchivedIssue(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId);
-    else await removeIssue(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId);
-  };
-
-  const issueReactionCreate = (reaction: string) =>
-    createReaction(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId, reaction);
-  const issueReactionRemove = (reaction: string) =>
-    currentUser &&
-    currentUser.id &&
-    removeReaction(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId, reaction, currentUser.id);
-
-  const issueCommentCreate = (comment: any) =>
-    createComment(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId, comment);
-  const issueCommentUpdate = (comment: any) =>
-    updateComment(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId, comment?.id, comment);
-  const issueCommentRemove = (commentId: string) =>
-    removeComment(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId, commentId);
-
-  const issueCommentReactionCreate = (commentId: string, reaction: string) =>
-    createCommentReaction(peekIssue.workspaceSlug, peekIssue.projectId, commentId, reaction);
-  const issueCommentReactionRemove = (commentId: string, reaction: string) =>
-    removeCommentReaction(peekIssue.workspaceSlug, peekIssue.projectId, commentId, reaction);
-
-  const issueSubscriptionCreate = () =>
-    createSubscription(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId);
-  const issueSubscriptionRemove = () =>
-    removeSubscription(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId);
-
-  const userRole = currentProjectRole ?? EUserProjectRoles.GUEST;
+  // Check if issue is editable, based on user role
+  const is_editable = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
   const isLoading = !issue || loader ? true : false;
 
   return (
@@ -215,23 +209,8 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
         projectId={peekIssue.projectId}
         issueId={peekIssue.issueId}
         isLoading={isLoading}
-        isArchived={isArchived}
-        issue={issue}
-        handleCopyText={handleCopyText}
-        redirectToIssueDetail={redirectToIssueDetail}
-        issueUpdate={issueUpdate}
-        issueDelete={issueDelete}
-        issueReactionCreate={issueReactionCreate}
-        issueReactionRemove={issueReactionRemove}
-        issueCommentCreate={issueCommentCreate}
-        issueCommentUpdate={issueCommentUpdate}
-        issueCommentRemove={issueCommentRemove}
-        issueCommentReactionCreate={issueCommentReactionCreate}
-        issueCommentReactionRemove={issueCommentReactionRemove}
-        issueSubscriptionCreate={issueSubscriptionCreate}
-        issueSubscriptionRemove={issueSubscriptionRemove}
-        disableUserActions={[5, 10].includes(userRole)}
-        showCommentAccessSpecifier={currentProjectDetails?.is_deployed}
+        is_archived={is_archived}
+        disabled={!is_editable}
         issueOperations={issueOperations}
       />
     </Fragment>

web/components/issues/peek-overview/view.tsx

@@ -1,54 +1,37 @@
 import { FC, useRef, useState } from "react";
+import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { MoveRight, MoveDiagonal, Bell, Link2, Trash2 } from "lucide-react";
+import { MoveRight, MoveDiagonal, Link2, Trash2 } from "lucide-react";
 // hooks
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
+import useKeypress from "hooks/use-keypress";
 // store hooks
 import { useIssueDetail, useUser } from "hooks/store";
+import useToast from "hooks/use-toast";
 // components
 import {
   DeleteArchivedIssueModal,
   DeleteIssueModal,
   IssueActivity,
+  IssueSubscription,
   IssueUpdateStatus,
   PeekOverviewIssueDetails,
   PeekOverviewProperties,
+  TIssueOperations,
 } from "components/issues";
 // ui
-import { Button, CenterPanelIcon, CustomSelect, FullScreenPanelIcon, SidePanelIcon, Spinner } from "@plane/ui";
-// types
-import { TIssue } from "@plane/types";
+import { CenterPanelIcon, CustomSelect, FullScreenPanelIcon, SidePanelIcon, Spinner } from "@plane/ui";
+// helpers
+import { copyUrlToClipboard } from "helpers/string.helper";
 
 interface IIssueView {
   workspaceSlug: string;
   projectId: string;
   issueId: string;
-
   isLoading?: boolean;
-  isArchived?: boolean;
-
-  issue: TIssue | undefined;
-
-  handleCopyText: (e: React.MouseEvent<HTMLButtonElement>) => void;
-  redirectToIssueDetail: () => void;
-
-  issueUpdate: (issue: Partial<TIssue>) => void;
-  issueDelete: () => Promise<void>;
-
-  issueReactionCreate: (reaction: string) => void;
-  issueReactionRemove: (reaction: string) => void;
-  issueCommentCreate: (comment: any) => void;
-  issueCommentUpdate: (comment: any) => void;
-  issueCommentRemove: (commentId: string) => void;
-  issueCommentReactionCreate: (commentId: string, reaction: string) => void;
-  issueCommentReactionRemove: (commentId: string, reaction: string) => void;
-  issueSubscriptionCreate: () => void;
-  issueSubscriptionRemove: () => void;
-
-  disableUserActions?: boolean;
-  showCommentAccessSpecifier?: boolean;
-
-  issueOperations: any;
+  is_archived: boolean;
+  disabled?: boolean;
+  issueOperations: TIssueOperations;
 }
 
 type TPeekModes = "side-peek" | "modal" | "full-screen";
@@ -72,79 +55,72 @@ const PEEK_OPTIONS: { key: TPeekModes; icon: any; title: string }[] = [
 ];
 
 export const IssueView: FC<IIssueView> = observer((props) => {
-  const {
-    workspaceSlug,
-    projectId,
-    issueId,
-    issue,
-    isLoading,
-    isArchived,
-    handleCopyText,
-    redirectToIssueDetail,
-
-    issueUpdate,
-    issueReactionCreate,
-    issueReactionRemove,
-    issueCommentCreate,
-    issueCommentUpdate,
-    issueCommentRemove,
-    issueCommentReactionCreate,
-    issueCommentReactionRemove,
-    issueSubscriptionCreate,
-    issueSubscriptionRemove,
-
-    issueDelete,
-    disableUserActions = false,
-    showCommentAccessSpecifier = false,
-
-    issueOperations,
-  } = props;
+  const { workspaceSlug, projectId, issueId, isLoading, is_archived, disabled = false, issueOperations } = props;
+  // router
+  const router = useRouter();
   // states
   const [peekMode, setPeekMode] = useState<TPeekModes>("side-peek");
   const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
   // ref
   const issuePeekOverviewRef = useRef<HTMLDivElement>(null);
   // store hooks
-  const {
-    activity,
-    reaction,
-    subscription,
-    setPeekIssue,
-    isAnyModalOpen,
-    isDeleteIssueModalOpen,
-    toggleDeleteIssueModal,
-  } = useIssueDetail();
+  const { activity, setPeekIssue, isAnyModalOpen, isDeleteIssueModalOpen, toggleDeleteIssueModal } = useIssueDetail();
   const { currentUser } = useUser();
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail();
+  const { setToastAlert } = useToast();
+  // derived values
+  const issueActivity = activity.getActivitiesByIssueId(issueId);
+  const currentMode = PEEK_OPTIONS.find((m) => m.key === peekMode);
+  const issue = getIssueById(issueId);
 
   const removeRoutePeekId = () => {
     setPeekIssue(undefined);
   };
-
-  const issueReactions = reaction.getReactionsByIssueId(issueId) || [];
-  const issueActivity = activity.getActivitiesByIssueId(issueId);
-  const issueSubscription = subscription.getSubscriptionByIssueId(issueId) || {};
-
-  const currentMode = PEEK_OPTIONS.find((m) => m.key === peekMode);
-
   useOutsideClickDetector(issuePeekOverviewRef, () => !isAnyModalOpen && removeRoutePeekId());
 
+  const redirectToIssueDetail = () => {
+    router.push({
+      pathname: `/${workspaceSlug}/projects/${projectId}/${is_archived ? "archived-issues" : "issues"}/${issueId}`,
+    });
+    removeRoutePeekId();
+  };
+
+  const handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    copyUrlToClipboard(
+      `${workspaceSlug}/projects/${projectId}/${is_archived ? "archived-issues" : "issues"}/${issueId}`
+    ).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Issue link copied to clipboard.",
+      });
+    });
+  };
+
+  const handleKeyDown = () => !isAnyModalOpen && removeRoutePeekId();
+  useKeypress("Escape", handleKeyDown);
+
   return (
     <>
-      {issue && !isArchived && (
+      {issue && !is_archived && (
         <DeleteIssueModal
           isOpen={isDeleteIssueModalOpen}
           handleClose={() => toggleDeleteIssueModal(false)}
           data={issue}
-          onSubmit={issueDelete}
+          onSubmit={() => issueOperations.remove(workspaceSlug, projectId, issueId)}
         />
       )}
 
-      {issue && isArchived && (
+      {issue && is_archived && (
         <DeleteArchivedIssueModal
           data={issue}
           isOpen={isDeleteIssueModalOpen}
           handleClose={() => toggleDeleteIssueModal(false)}
-          onSubmit={issueDelete}
+          onSubmit={() => issueOperations.remove(workspaceSlug, projectId, issueId)}
         />
       )}
 
@@ -208,27 +184,18 @@ export const IssueView: FC<IIssueView> = observer((props) => {
               <div className="flex items-center gap-x-4">
                 <IssueUpdateStatus isSubmitting={isSubmitting} />
                 <div className="flex items-center gap-4">
-                  {issue?.created_by !== currentUser?.id &&
-                    !issue?.assignee_ids.includes(currentUser?.id ?? "") &&
-                    !issue?.archived_at && (
-                      <Button
-                        size="sm"
-                        prependIcon={<Bell className="h-3 w-3" />}
-                        variant="outline-primary"
-                        className="hover:!bg-custom-primary-100/20"
-                        onClick={() =>
-                          issueSubscription && issueSubscription.subscribed
-                            ? issueSubscriptionRemove()
-                            : issueSubscriptionCreate()
-                        }
-                      >
-                        {issueSubscription && issueSubscription.subscribed ? "Unsubscribe" : "Subscribe"}
-                      </Button>
-                    )}
+                  {currentUser && !is_archived && (
+                    <IssueSubscription
+                      workspaceSlug={workspaceSlug}
+                      projectId={projectId}
+                      issueId={issueId}
+                      currentUserId={currentUser?.id}
+                    />
+                  )}
                   <button onClick={handleCopyText}>
                     <Link2 className="h-4 w-4 -rotate-45 text-custom-text-300 hover:text-custom-text-200" />
                   </button>
-                  {!disableUserActions && (
+                  {!disabled && (
                     <button onClick={() => toggleDeleteIssueModal(true)}>
                       <Trash2 className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
                     </button>
@@ -248,29 +215,29 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                   <>
                     {["side-peek", "modal"].includes(peekMode) ? (
                       <div className="relative flex flex-col gap-3 px-8 py-5">
-                        {isArchived && (
+                        {is_archived && (
                           <div className="absolute left-0 top-0 z-[9] flex h-full min-h-full w-full items-center justify-center bg-custom-background-100 opacity-60" />
                         )}
                         <PeekOverviewIssueDetails
-                          setIsSubmitting={(value) => setIsSubmitting(value)}
-                          isSubmitting={isSubmitting}
                           workspaceSlug={workspaceSlug}
-                          issue={issue}
-                          issueUpdate={issueUpdate}
-                          issueReactions={issueReactions}
-                          user={currentUser}
-                          issueReactionCreate={issueReactionCreate}
-                          issueReactionRemove={issueReactionRemove}
+                          projectId={projectId}
+                          issueId={issueId}
+                          issueOperations={issueOperations}
+                          is_archived={is_archived}
+                          disabled={disabled}
+                          isSubmitting={isSubmitting}
+                          setIsSubmitting={(value) => setIsSubmitting(value)}
                         />
 
                         <PeekOverviewProperties
-                          issue={issue}
-                          issueUpdate={issueUpdate}
-                          disableUserActions={disableUserActions}
+                          workspaceSlug={workspaceSlug}
+                          projectId={projectId}
+                          issueId={issueId}
                           issueOperations={issueOperations}
+                          disabled={disabled}
                         />
 
-                        <IssueActivity
+                        {/* <IssueActivity
                           workspaceSlug={workspaceSlug}
                           projectId={projectId}
                           issueId={issueId}
@@ -282,25 +249,24 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                           issueCommentReactionCreate={issueCommentReactionCreate}
                           issueCommentReactionRemove={issueCommentReactionRemove}
                           showCommentAccessSpecifier={showCommentAccessSpecifier}
-                        />
+                        /> */}
                       </div>
                     ) : (
-                      <div className={`flex h-full w-full overflow-auto ${isArchived ? "opacity-60" : ""}`}>
+                      <div className={`flex h-full w-full overflow-auto ${is_archived ? "opacity-60" : ""}`}>
                         <div className="relative h-full w-full space-y-6 overflow-auto p-4 py-5">
-                          <div className={isArchived ? "pointer-events-none" : ""}>
+                          <div className={is_archived ? "pointer-events-none" : ""}>
                             <PeekOverviewIssueDetails
-                              setIsSubmitting={(value) => setIsSubmitting(value)}
-                              isSubmitting={isSubmitting}
                               workspaceSlug={workspaceSlug}
-                              issue={issue}
-                              issueReactions={issueReactions}
-                              issueUpdate={issueUpdate}
-                              user={currentUser}
-                              issueReactionCreate={issueReactionCreate}
-                              issueReactionRemove={issueReactionRemove}
+                              projectId={projectId}
+                              issueId={issueId}
+                              issueOperations={issueOperations}
+                              is_archived={is_archived}
+                              disabled={disabled}
+                              isSubmitting={isSubmitting}
+                              setIsSubmitting={(value) => setIsSubmitting(value)}
                             />
 
-                            <IssueActivity
+                            {/* <IssueActivity
                               workspaceSlug={workspaceSlug}
                               projectId={projectId}
                               issueId={issueId}
@@ -312,19 +278,20 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                               issueCommentReactionCreate={issueCommentReactionCreate}
                               issueCommentReactionRemove={issueCommentReactionRemove}
                               showCommentAccessSpecifier={showCommentAccessSpecifier}
-                            />
+                            /> */}
                           </div>
                         </div>
                         <div
                           className={`h-full !w-[400px] flex-shrink-0 border-l border-custom-border-200 p-4 py-5 ${
-                            isArchived ? "pointer-events-none" : ""
+                            is_archived ? "pointer-events-none" : ""
                           }`}
                         >
                           <PeekOverviewProperties
-                            issue={issue}
-                            issueUpdate={issueUpdate}
-                            disableUserActions={disableUserActions}
+                            workspaceSlug={workspaceSlug}
+                            projectId={projectId}
+                            issueId={issueId}
                             issueOperations={issueOperations}
+                            disabled={disabled}
                           />
                         </div>
                       </div>

web/components/issues/sub-issues/issue-list-item.tsx

@@ -0,0 +1,203 @@
+import React from "react";
+import { ChevronDown, ChevronRight, X, Pencil, Trash, Link as LinkIcon, Loader } from "lucide-react";
+// components
+import { IssueList } from "./issues-list";
+import { IssueProperty } from "./properties";
+// ui
+import { ControlLink, CustomMenu, Tooltip } from "@plane/ui";
+// types
+import { TIssue } from "@plane/types";
+import { TSubIssueOperations } from "./root";
+// import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root";
+import { useIssueDetail, useProject, useProjectState } from "hooks/store";
+import { observer } from "mobx-react-lite";
+
+export interface ISubIssues {
+  workspaceSlug: string;
+  projectId: string;
+  parentIssueId: string;
+  spacingLeft: number;
+  disabled: boolean;
+  handleIssueCrudState: (
+    key: "create" | "existing" | "update" | "delete",
+    issueId: string,
+    issue?: TIssue | null
+  ) => void;
+  subIssueOperations: TSubIssueOperations;
+  issueId: string;
+}
+
+export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
+  const {
+    workspaceSlug,
+    projectId,
+    parentIssueId,
+    spacingLeft = 10,
+    disabled,
+    handleIssueCrudState,
+    subIssueOperations,
+    issueId,
+  } = props;
+
+  const {
+    setPeekIssue,
+    issue: { getIssueById },
+    subIssues: { subIssueHelpersByIssueId, setSubIssueHelpers },
+  } = useIssueDetail();
+  const project = useProject();
+  const { getProjectStates } = useProjectState();
+
+  const issue = getIssueById(issueId);
+  const projectDetail = (issue && issue.project_id && project.getProjectById(issue.project_id)) || undefined;
+  const currentIssueStateDetail =
+    (issue?.project_id && getProjectStates(issue?.project_id)?.find((state) => issue?.state_id == state.id)) ||
+    undefined;
+
+  const subIssueHelpers = subIssueHelpersByIssueId(parentIssueId);
+
+  const handleIssuePeekOverview = (issue: TIssue) =>
+    workspaceSlug &&
+    issue &&
+    issue.project_id &&
+    issue.id &&
+    setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id });
+
+  if (!issue) return <></>;
+  return (
+    <div key={issueId}>
+      {issue && (
+        <div
+          className="group relative flex h-full w-full items-center gap-2 border-b border-custom-border-100 px-2 py-1 transition-all hover:bg-custom-background-90"
+          style={{ paddingLeft: `${spacingLeft}px` }}
+        >
+          <div className="h-[22px] w-[22px] flex-shrink-0">
+            {issue?.sub_issues_count > 0 && (
+              <>
+                {subIssueHelpers.preview_loader.includes(issue.id) ? (
+                  <div className="flex h-full w-full cursor-not-allowed items-center justify-center rounded-sm bg-custom-background-80 transition-all">
+                    <Loader width={14} strokeWidth={2} className="animate-spin" />
+                  </div>
+                ) : (
+                  <div
+                    className="flex h-full w-full cursor-pointer items-center justify-center rounded-sm transition-all hover:bg-custom-background-80"
+                    onClick={async () => {
+                      if (!subIssueHelpers.issue_visibility.includes(issue.id)) {
+                        setSubIssueHelpers(parentIssueId, "preview_loader", issue.id);
+                        await subIssueOperations.fetchSubIssues(workspaceSlug, projectId, issue.id);
+                        setSubIssueHelpers(parentIssueId, "preview_loader", issue.id);
+                      }
+                      setSubIssueHelpers(parentIssueId, "issue_visibility", issue.id);
+                    }}
+                  >
+                    {subIssueHelpers.issue_visibility.includes(issue.id) ? (
+                      <ChevronDown width={14} strokeWidth={2} />
+                    ) : (
+                      <ChevronRight width={14} strokeWidth={2} />
+                    )}
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+
+          <div className="flex w-full cursor-pointer items-center gap-2">
+            <div
+              className="h-[6px] w-[6px] flex-shrink-0 rounded-full"
+              style={{
+                backgroundColor: currentIssueStateDetail?.color,
+              }}
+            />
+            <div className="flex-shrink-0 text-xs text-custom-text-200">
+              {projectDetail?.identifier}-{issue?.sequence_id}
+            </div>
+
+            <ControlLink
+              href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
+              target="_blank"
+              onClick={() => handleIssuePeekOverview(issue)}
+              className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
+            >
+              <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
+                <span>{issue.name}</span>
+              </Tooltip>
+            </ControlLink>
+          </div>
+
+          <div className="flex-shrink-0 text-sm">
+            <IssueProperty
+              workspaceSlug={workspaceSlug}
+              parentIssueId={parentIssueId}
+              issueId={issueId}
+              disabled={disabled}
+              subIssueOperations={subIssueOperations}
+            />
+          </div>
+
+          <div className="flex-shrink-0 text-sm">
+            <CustomMenu width="auto" placement="bottom-end" ellipsis>
+              {disabled && (
+                <CustomMenu.MenuItem onClick={() => handleIssueCrudState("update", parentIssueId, issue)}>
+                  <div className="flex items-center gap-2">
+                    <Pencil className="h-3.5 w-3.5" strokeWidth={2} />
+                    <span>Edit issue</span>
+                  </div>
+                </CustomMenu.MenuItem>
+              )}
+
+              {disabled && (
+                <CustomMenu.MenuItem onClick={() => handleIssueCrudState("delete", parentIssueId, issue)}>
+                  <div className="flex items-center gap-2">
+                    <Trash className="h-3.5 w-3.5" strokeWidth={2} />
+                    <span>Delete issue</span>
+                  </div>
+                </CustomMenu.MenuItem>
+              )}
+
+              <CustomMenu.MenuItem
+                onClick={() =>
+                  subIssueOperations.copyText(`${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`)
+                }
+              >
+                <div className="flex items-center gap-2">
+                  <LinkIcon className="h-3.5 w-3.5" strokeWidth={2} />
+                  <span>Copy issue link</span>
+                </div>
+              </CustomMenu.MenuItem>
+            </CustomMenu>
+          </div>
+
+          {disabled && (
+            <>
+              {subIssueHelpers.issue_loader.includes(issue.id) ? (
+                <div className="flex h-[22px] w-[22px] flex-shrink-0 cursor-not-allowed items-center justify-center overflow-hidden rounded-sm transition-all">
+                  <Loader width={14} strokeWidth={2} className="animate-spin" />
+                </div>
+              ) : (
+                <div
+                  className="invisible flex h-[22px] w-[22px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80 group-hover:visible"
+                  onClick={() => {
+                    subIssueOperations.removeSubIssue(workspaceSlug, issue.project_id, parentIssueId, issue.id);
+                  }}
+                >
+                  <X width={14} strokeWidth={2} />
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      )}
+
+      {subIssueHelpers.issue_visibility.includes(issueId) && issue.sub_issues_count && issue.sub_issues_count > 0 && (
+        <IssueList
+          workspaceSlug={workspaceSlug}
+          projectId={issue.project_id}
+          parentIssueId={issue.id}
+          spacingLeft={spacingLeft + 22}
+          disabled={disabled}
+          handleIssueCrudState={handleIssueCrudState}
+          subIssueOperations={subIssueOperations}
+        />
+      )}
+    </div>
+  );
+});

web/components/issues/sub-issues/issue.tsx

@@ -1,192 +0,0 @@
-import React from "react";
-import { ChevronDown, ChevronRight, X, Pencil, Trash, Link as LinkIcon, Loader } from "lucide-react";
-// components
-import { SubIssuesRootList } from "./issues-list";
-import { IssueProperty } from "./properties";
-// ui
-import { CustomMenu, Tooltip } from "@plane/ui";
-// types
-import { IUser, TIssue, TIssueSubIssues } from "@plane/types";
-// import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root";
-import { useIssueDetail, useProject, useProjectState } from "hooks/store";
-
-export interface ISubIssues {
-  workspaceSlug: string;
-  projectId: string;
-  parentIssue: TIssue;
-  issueId: string;
-  handleIssue: {
-    fetchIssues: (issueId: string) => Promise<TIssueSubIssues>;
-    updateIssue: (issueId: string, data: Partial<TIssue>) => Promise<TIssue>;
-    removeIssue: (issueId: string) => Promise<any>;
-  };
-  spacingLeft?: number;
-  user: IUser | undefined;
-  editable: boolean;
-  removeIssueFromSubIssues: (parentIssueId: string, issue: TIssue) => void;
-  issuesLoader: any; // FIXME: ISubIssuesRootLoaders replace with any
-  handleIssuesLoader: ({ key, issueId }: any) => void; // FIXME: ISubIssuesRootLoadersHandler replace with any
-  copyText: (text: string) => void;
-  handleIssueCrudOperation: (
-    key: "create" | "existing" | "edit" | "delete",
-    issueId: string,
-    issue?: TIssue | null
-  ) => void;
-  handleUpdateIssue: (issue: TIssue, data: Partial<TIssue>) => void;
-}
-
-export const SubIssues: React.FC<ISubIssues> = ({
-  workspaceSlug,
-  projectId,
-  parentIssue,
-  issueId,
-  spacingLeft = 0,
-  user,
-  editable,
-  removeIssueFromSubIssues,
-  issuesLoader,
-  handleIssuesLoader,
-  copyText,
-  handleIssueCrudOperation,
-  handleUpdateIssue,
-}) => {
-  const {
-    issue: { getIssueById },
-  } = useIssueDetail();
-  const project = useProject();
-  const { getProjectStates } = useProjectState();
-
-  const issue = getIssueById(issueId);
-  const projectDetail = project.getProjectById(projectId);
-  const currentIssueStateDetail =
-    (issue?.project_id && getProjectStates(issue?.project_id)?.find((state) => issue?.state_id == state.id)) ||
-    undefined;
-
-  return (
-    <>
-      <div>
-        {issue && (
-          <div
-            className="group relative flex h-full w-full items-center gap-2 border-b border-custom-border-100 px-2 py-1 transition-all hover:bg-custom-background-90"
-            style={{ paddingLeft: `${spacingLeft}px` }}
-          >
-            <div className="h-[22px] w-[22px] flex-shrink-0">
-              {issue?.sub_issues_count > 0 && (
-                <>
-                  {issuesLoader.sub_issues.includes(issue?.id) ? (
-                    <div className="flex h-full w-full cursor-not-allowed items-center justify-center rounded-sm bg-custom-background-80 transition-all">
-                      <Loader width={14} strokeWidth={2} className="animate-spin" />
-                    </div>
-                  ) : (
-                    <div
-                      className="flex h-full w-full cursor-pointer items-center justify-center rounded-sm transition-all hover:bg-custom-background-80"
-                      onClick={() => handleIssuesLoader({ key: "visibility", issueId: issue?.id })}
-                    >
-                      {issuesLoader && issuesLoader.visibility.includes(issue?.id) ? (
-                        <ChevronDown width={14} strokeWidth={2} />
-                      ) : (
-                        <ChevronRight width={14} strokeWidth={2} />
-                      )}
-                    </div>
-                  )}
-                </>
-              )}
-            </div>
-
-            <div className="flex w-full cursor-pointer items-center gap-2">
-              <div
-                className="h-[6px] w-[6px] flex-shrink-0 rounded-full"
-                style={{
-                  backgroundColor: currentIssueStateDetail?.color,
-                }}
-              />
-              <div className="flex-shrink-0 text-xs text-custom-text-200">
-                {projectDetail?.identifier}-{issue?.sequence_id}
-              </div>
-              <Tooltip tooltipHeading="Title" tooltipContent={`${issue?.name}`}>
-                <div className="line-clamp-1 pr-2 text-xs text-custom-text-100">{issue?.name}</div>
-              </Tooltip>
-            </div>
-
-            <div className="flex-shrink-0 text-sm">
-              <IssueProperty
-                workspaceSlug={workspaceSlug}
-                parentIssue={parentIssue}
-                issue={issue}
-                editable={editable}
-              />
-            </div>
-
-            <div className="flex-shrink-0 text-sm">
-              <CustomMenu width="auto" placement="bottom-end" ellipsis>
-                {editable && (
-                  <CustomMenu.MenuItem onClick={() => handleIssueCrudOperation("edit", parentIssue?.id, issue)}>
-                    <div className="flex items-center gap-2">
-                      <Pencil className="h-3.5 w-3.5" strokeWidth={2} />
-                      <span>Edit issue</span>
-                    </div>
-                  </CustomMenu.MenuItem>
-                )}
-
-                {editable && (
-                  <CustomMenu.MenuItem onClick={() => handleIssueCrudOperation("delete", parentIssue?.id, issue)}>
-                    <div className="flex items-center gap-2">
-                      <Trash className="h-3.5 w-3.5" strokeWidth={2} />
-                      <span>Delete issue</span>
-                    </div>
-                  </CustomMenu.MenuItem>
-                )}
-
-                <CustomMenu.MenuItem
-                  onClick={() => copyText(`${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`)}
-                >
-                  <div className="flex items-center gap-2">
-                    <LinkIcon className="h-3.5 w-3.5" strokeWidth={2} />
-                    <span>Copy issue link</span>
-                  </div>
-                </CustomMenu.MenuItem>
-              </CustomMenu>
-            </div>
-
-            {editable && (
-              <>
-                {issuesLoader.delete.includes(issue?.id) ? (
-                  <div className="flex h-[22px] w-[22px] flex-shrink-0 cursor-not-allowed items-center justify-center overflow-hidden rounded-sm bg-red-200/10 text-red-500 transition-all">
-                    <Loader width={14} strokeWidth={2} className="animate-spin" />
-                  </div>
-                ) : (
-                  <div
-                    className="invisible flex h-[22px] w-[22px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80 group-hover:visible"
-                    onClick={() => {
-                      handleIssuesLoader({ key: "delete", issueId: issue?.id });
-                      removeIssueFromSubIssues(parentIssue?.id, issue);
-                    }}
-                  >
-                    <X width={14} strokeWidth={2} />
-                  </div>
-                )}
-              </>
-            )}
-          </div>
-        )}
-
-        {issuesLoader.visibility.includes(issueId) && issue?.sub_issues_count && issue?.sub_issues_count > 0 && (
-          <SubIssuesRootList
-            workspaceSlug={workspaceSlug}
-            projectId={projectId}
-            parentIssue={issue}
-            spacingLeft={spacingLeft + 22}
-            user={user}
-            editable={editable}
-            removeIssueFromSubIssues={removeIssueFromSubIssues}
-            issuesLoader={issuesLoader}
-            handleIssuesLoader={handleIssuesLoader}
-            copyText={copyText}
-            handleIssueCrudOperation={handleIssueCrudOperation}
-            handleUpdateIssue={handleUpdateIssue}
-          />
-        )}
-      </div>
-    </>
-  );
-};

web/components/issues/sub-issues/issues-list.tsx

@@ -1,84 +1,65 @@
-import { useMemo } from "react";
-// components
-import { SubIssues } from "./issue";
-// types
-import { IUser, TIssue } from "@plane/types";
-// import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root";
-
-// fetch keys
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// hooks
 import { useIssueDetail } from "hooks/store";
+// components
+import { IssueListItem } from "./issue-list-item";
+// types
+import { TIssue } from "@plane/types";
+import { TSubIssueOperations } from "./root";
 
-export interface ISubIssuesRootList {
+export interface IIssueList {
   workspaceSlug: string;
   projectId: string;
-  parentIssue: TIssue;
-  spacingLeft?: number;
-  user: IUser | undefined;
-  editable: boolean;
-  removeIssueFromSubIssues: (parentIssueId: string, issue: TIssue) => void;
-  issuesLoader: any; // FIXME: replace ISubIssuesRootLoaders with any
-  handleIssuesLoader: ({ key, issueId }: any) => void; // FIXME: replace ISubIssuesRootLoadersHandler with any
-  copyText: (text: string) => void;
-  handleIssueCrudOperation: (
-    key: "create" | "existing" | "edit" | "delete",
+  parentIssueId: string;
+  spacingLeft: number;
+  disabled: boolean;
+  handleIssueCrudState: (
+    key: "create" | "existing" | "update" | "delete",
     issueId: string,
     issue?: TIssue | null
   ) => void;
-  handleUpdateIssue: (issue: TIssue, data: Partial<TIssue>) => void;
+  subIssueOperations: TSubIssueOperations;
 }
 
-export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
-  workspaceSlug,
-  projectId,
-  parentIssue,
-  spacingLeft = 10,
-  user,
-  editable,
-  removeIssueFromSubIssues,
-  issuesLoader,
-  handleIssuesLoader,
-  copyText,
-  handleIssueCrudOperation,
-  handleUpdateIssue,
-}) => {
-  const issueDetail = useIssueDetail();
-  issueDetail.subIssues.fetchSubIssues(workspaceSlug, projectId, parentIssue?.id);
+export const IssueList: FC<IIssueList> = observer((props) => {
+  const {
+    workspaceSlug,
+    projectId,
+    parentIssueId,
+    spacingLeft = 10,
+    disabled,
+    handleIssueCrudState,
+    subIssueOperations,
+  } = props;
+  // hooks
+  const {
+    subIssues: { subIssuesByIssueId, subIssueHelpersByIssueId },
+  } = useIssueDetail();
 
-  const subIssues = issueDetail.subIssues.subIssuesByIssueId(parentIssue?.id);
-
-  const handleIssue = useMemo(
-    () => ({
-      fetchIssues: async (issueId: string) => issueDetail.subIssues.fetchSubIssues(workspaceSlug, projectId, issueId),
-      updateIssue: async (issueId: string, data: Partial<TIssue>) =>
-        issueDetail.updateIssue(workspaceSlug, projectId, issueId, data),
-      removeIssue: (issueId: string) => issueDetail.removeIssue(workspaceSlug, projectId, issueId),
-    }),
-    [issueDetail, workspaceSlug, projectId]
-  );
+  const subIssueIds = subIssuesByIssueId(parentIssueId);
+  const subIssueHelpers = subIssueHelpersByIssueId(parentIssueId);
 
   return (
     <>
+      {subIssueHelpers.preview_loader.includes(parentIssueId) ? "Loading..." : null}
+
       <div className="relative">
-        {subIssues &&
-          subIssues.length > 0 &&
-          subIssues.map((issueId: string) => (
-            <SubIssues
-              key={`${issueId}`}
-              workspaceSlug={workspaceSlug}
-              projectId={projectId}
-              parentIssue={parentIssue}
-              issueId={issueId}
-              handleIssue={handleIssue}
-              spacingLeft={spacingLeft}
-              user={user}
-              editable={editable}
-              removeIssueFromSubIssues={removeIssueFromSubIssues}
-              issuesLoader={issuesLoader}
-              handleIssuesLoader={handleIssuesLoader}
-              copyText={copyText}
-              handleIssueCrudOperation={handleIssueCrudOperation}
-              handleUpdateIssue={handleUpdateIssue}
-            />
+        {subIssueIds &&
+          subIssueIds.length > 0 &&
+          subIssueIds.map((issueId) => (
+            <>
+              <IssueListItem
+                workspaceSlug={workspaceSlug}
+                projectId={projectId}
+                parentIssueId={parentIssueId}
+                spacingLeft={spacingLeft}
+                disabled={disabled}
+                handleIssueCrudState={handleIssueCrudState}
+                subIssueOperations={subIssueOperations}
+                issueId={issueId}
+              />
+            </>
           ))}
 
         <div
@@ -88,4 +69,4 @@ export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
       </div>
     </>
   );
-};
+});

web/components/issues/sub-issues/properties.tsx

@@ -1,78 +1,41 @@
 import React from "react";
-import { mutate } from "swr";
-// services
-import { IssueService } from "services/issue";
+// hooks
+import { useIssueDetail } from "hooks/store";
 // components
 import { PriorityDropdown, ProjectMemberDropdown, StateDropdown } from "components/dropdowns";
 // types
-import { TIssue } from "@plane/types";
-// fetch-keys
-import { SUB_ISSUES } from "constants/fetch-keys";
+import { TSubIssueOperations } from "./root";
 
 export interface IIssueProperty {
   workspaceSlug: string;
-  parentIssue: TIssue;
-  issue: TIssue;
-  editable: boolean;
+  parentIssueId: string;
+  issueId: string;
+  disabled: boolean;
+  subIssueOperations: TSubIssueOperations;
 }
 
-// services
-const issueService = new IssueService();
-
 export const IssueProperty: React.FC<IIssueProperty> = (props) => {
-  const { workspaceSlug, parentIssue, issue, editable } = props;
+  const { workspaceSlug, parentIssueId, issueId, disabled, subIssueOperations } = props;
+  // hooks
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail();
 
-  const handlePriorityChange = (data: any) => {
-    partialUpdateIssue({ priority: data });
-  };
-
-  const handleStateChange = (data: string) => {
-    partialUpdateIssue({
-      state_id: data,
-    });
-  };
-
-  const handleAssigneeChange = (data: string[]) => {
-    partialUpdateIssue({ assignee_ids: data });
-  };
-
-  const partialUpdateIssue = async (data: Partial<TIssue>) => {
-    mutate(
-      workspaceSlug && parentIssue ? SUB_ISSUES(parentIssue.id) : null,
-      (elements: any) => {
-        const _elements = { ...elements };
-        const _issues = _elements.sub_issues.map((element: TIssue) =>
-          element.id === issue.id ? { ...element, ...data } : element
-        );
-        _elements["sub_issues"] = [..._issues];
-        return _elements;
-      },
-      false
-    );
-
-    const issueResponse = await issueService.patchIssue(workspaceSlug as string, issue.project_id, issue.id, data);
-
-    mutate(
-      SUB_ISSUES(parentIssue.id),
-      (elements: any) => {
-        const _elements = elements.sub_issues.map((element: TIssue) =>
-          element.id === issue.id ? issueResponse : element
-        );
-        elements["sub_issues"] = _elements;
-        return elements;
-      },
-      true
-    );
-  };
+  const issue = getIssueById(issueId);
 
+  if (!issue) return <></>;
   return (
     <div className="relative flex items-center gap-2">
       <div className="h-5 flex-shrink-0">
         <StateDropdown
-          value={issue?.state_id}
-          projectId={issue?.project_id}
-          onChange={handleStateChange}
-          disabled={!editable}
+          value={issue.state_id}
+          projectId={issue.project_id}
+          onChange={(val) =>
+            subIssueOperations.updateSubIssue(workspaceSlug, issue.project_id, parentIssueId, issueId, {
+              state_id: val,
+            })
+          }
+          disabled={!disabled}
           buttonVariant="border-with-text"
         />
       </div>
@@ -80,8 +43,12 @@ export const IssueProperty: React.FC<IIssueProperty> = (props) => {
       <div className="h-5 flex-shrink-0">
         <PriorityDropdown
           value={issue.priority}
-          onChange={handlePriorityChange}
-          disabled={!editable}
+          onChange={(val) =>
+            subIssueOperations.updateSubIssue(workspaceSlug, issue.project_id, parentIssueId, issueId, {
+              priority: val,
+            })
+          }
+          disabled={!disabled}
           buttonVariant="border-without-text"
           buttonClassName="border"
         />
@@ -89,10 +56,14 @@ export const IssueProperty: React.FC<IIssueProperty> = (props) => {
 
       <div className="h-5 flex-shrink-0">
         <ProjectMemberDropdown
-          projectId={issue?.project_id}
-          value={issue?.assignee_ids}
-          onChange={handleAssigneeChange}
-          disabled={!editable}
+          value={issue.assignee_ids}
+          projectId={issue.project_id}
+          onChange={(val) =>
+            subIssueOperations.updateSubIssue(workspaceSlug, issue.project_id, parentIssueId, issueId, {
+              assignee_ids: val,
+            })
+          }
+          disabled={!disabled}
           multiple
           buttonVariant={issue.assignee_ids.length > 0 ? "transparent-without-text" : "border-without-text"}
           buttonClassName={issue.assignee_ids.length > 0 ? "hover:bg-transparent px-0" : ""}

web/components/issues/sub-issues/root.tsx

@@ -1,182 +1,272 @@
-import React, { useCallback, useMemo, useState } from "react";
+import { FC, useMemo, useState } from "react";
 import { observer } from "mobx-react-lite";
-import { Plus, ChevronRight, ChevronDown } from "lucide-react";
+import { Plus, ChevronRight, ChevronDown, Loader } from "lucide-react";
+import useSWR from "swr";
 // hooks
-import { useIssueDetail, useIssues, useUser } from "hooks/store";
+import { useIssueDetail } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { ExistingIssuesListModal } from "components/core";
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
-import { SubIssuesRootList } from "./issues-list";
+import { IssueList } from "./issues-list";
 import { ProgressBar } from "./progressbar";
 // ui
 import { CustomMenu } from "@plane/ui";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
-import { IUser, TIssue, ISearchIssueResponse } from "@plane/types";
-// services
-import { IssueService } from "services/issue";
-// fetch keys
-import { SUB_ISSUES } from "constants/fetch-keys";
-// constants
-import { EUserProjectRoles } from "constants/project";
-import { EIssuesStoreType } from "constants/issue";
+import { IUser, TIssue } from "@plane/types";
 
 export interface ISubIssuesRoot {
   workspaceSlug: string;
   projectId: string;
-  issueId: string;
+  parentIssueId: string;
   currentUser: IUser;
-  is_archived: boolean;
-  is_editable: boolean;
+  disabled: boolean;
 }
 
-export const SubIssuesRoot: React.FC<ISubIssuesRoot> = observer((props) => {
-  const { workspaceSlug, projectId, issueId, currentUser, is_archived, is_editable } = props;
+export type TSubIssueOperations = {
+  copyText: (text: string) => void;
+  fetchSubIssues: (workspaceSlug: string, projectId: string, parentIssueId: string) => Promise<void>;
+  addSubIssue: (workspaceSlug: string, projectId: string, parentIssueId: string, issueIds: string[]) => Promise<void>;
+  updateSubIssue: (
+    workspaceSlug: string,
+    projectId: string,
+    parentIssueId: string,
+    issueId: string,
+    data: Partial<TIssue>
+  ) => Promise<void>;
+  removeSubIssue: (workspaceSlug: string, projectId: string, parentIssueId: string, issueId: string) => Promise<void>;
+  deleteSubIssue: (workspaceSlug: string, projectId: string, parentIssueId: string, issueId: string) => Promise<void>;
+};
+
+export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
+  const { workspaceSlug, projectId, parentIssueId, disabled = false } = props;
   // store hooks
-  const {
-    membership: { currentProjectRole },
-  } = useUser();
   const { setToastAlert } = useToast();
   const {
-    subIssues: { subIssuesByIssueId, subIssuesStateDistribution },
-    updateIssue,
-    removeIssue,
+    issue: { getIssueById },
+    subIssues: { subIssuesByIssueId, stateDistributionByIssueId, subIssueHelpersByIssueId, setSubIssueHelpers },
     fetchSubIssues,
     createSubIssues,
+    updateSubIssue,
+    removeSubIssue,
+    deleteSubIssue,
   } = useIssueDetail();
   // state
-  const [currentIssue, setCurrentIssue] = useState<TIssue>();
 
-  console.log("subIssuesByIssueId", subIssuesByIssueId(issueId));
-
-  const copyText = (text: string) => {
-    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-    copyTextToClipboard(`${originURL}/${text}`).then(() => {
-      setToastAlert({
-        type: "success",
-        title: "Link Copied!",
-        message: "Issue link copied to clipboard.",
-      });
-    });
-  };
-
-  const subIssueOperations = useMemo(
-    () => ({
-      fetchSubIssues: async (workspaceSlug: string, projectId: string, issueId: string) => {
-        try {
-          await fetchSubIssues(workspaceSlug, projectId, issueId);
-        } catch (error) {}
-      },
-      update: async (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => {
-        try {
-          await updateIssue(workspaceSlug, projectId, issueId, data);
-          setToastAlert({
-            title: "Issue updated successfully",
-            type: "success",
-            message: "Issue updated successfully",
-          });
-        } catch (error) {
-          setToastAlert({
-            title: "Issue update failed",
-            type: "error",
-            message: "Issue update failed",
-          });
-        }
-      },
-      addSubIssue: async () => {
-        try {
-        } catch (error) {}
-      },
-      removeSubIssue: async () => {
-        try {
-        } catch (error) {}
-      },
-      updateIssue: async () => {
-        try {
-        } catch (error) {}
-      },
-      deleteIssue: async () => {
-        try {
-        } catch (error) {}
-      },
-    }),
-    []
-  );
-
-  const [issueCrudOperation, setIssueCrudOperation] = React.useState<{
-    // type: "create" | "edit";
-    create: { toggle: boolean; issueId: string | null };
-    existing: { toggle: boolean; issueId: string | null };
+  type TIssueCrudState = { toggle: boolean; parentIssueId: string | undefined; issue: TIssue | undefined };
+  const [issueCrudState, setIssueCrudState] = useState<{
+    create: TIssueCrudState;
+    existing: TIssueCrudState;
+    update: TIssueCrudState;
+    delete: TIssueCrudState;
   }>({
     create: {
       toggle: false,
-      issueId: null,
+      parentIssueId: undefined,
+      issue: undefined,
     },
     existing: {
       toggle: false,
-      issueId: null,
+      parentIssueId: undefined,
+      issue: undefined,
+    },
+    update: {
+      toggle: false,
+      parentIssueId: undefined,
+      issue: undefined,
+    },
+    delete: {
+      toggle: false,
+      parentIssueId: undefined,
+      issue: undefined,
     },
   });
 
-  const handleIssueCrudOperation = (
-    key: "create" | "existing",
-    issueId: string | null,
+  useSWR(
+    workspaceSlug && projectId && parentIssueId
+      ? `ISSUE_DETAIL_SUB_ISSUES_${workspaceSlug}_${projectId}_${parentIssueId}`
+      : null,
+    async () => {
+      workspaceSlug &&
+        projectId &&
+        parentIssueId &&
+        (await subIssueOperations.fetchSubIssues(workspaceSlug, projectId, parentIssueId));
+    }
+  );
+
+  const handleIssueCrudState = (
+    key: "create" | "existing" | "update" | "delete",
+    _parentIssueId: string | null,
     issue: TIssue | null = null
   ) => {
-    setIssueCrudOperation({
-      ...issueCrudOperation,
+    setIssueCrudState({
+      ...issueCrudState,
       [key]: {
-        toggle: !issueCrudOperation[key].toggle,
-        issueId: issueId,
+        toggle: !issueCrudState[key].toggle,
+        parentIssueId: _parentIssueId,
         issue: issue,
       },
     });
   };
 
+  const subIssueOperations: TSubIssueOperations = useMemo(
+    () => ({
+      copyText: (text: string) => {
+        const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+        copyTextToClipboard(`${originURL}/${text}`).then(() => {
+          setToastAlert({
+            type: "success",
+            title: "Link Copied!",
+            message: "Issue link copied to clipboard.",
+          });
+        });
+      },
+      fetchSubIssues: async (workspaceSlug: string, projectId: string, parentIssueId: string) => {
+        try {
+          await fetchSubIssues(workspaceSlug, projectId, parentIssueId);
+        } catch (error) {
+          setToastAlert({
+            type: "error",
+            title: "Error fetching sub-issues",
+            message: "Error fetching sub-issues",
+          });
+        }
+      },
+      addSubIssue: async (workspaceSlug: string, projectId: string, parentIssueId: string, issueIds: string[]) => {
+        try {
+          await createSubIssues(workspaceSlug, projectId, parentIssueId, issueIds);
+          setToastAlert({
+            type: "success",
+            title: "Sub-issues added successfully",
+            message: "Sub-issues added successfully",
+          });
+        } catch (error) {
+          setToastAlert({
+            type: "error",
+            title: "Error adding sub-issue",
+            message: "Error adding sub-issue",
+          });
+        }
+      },
+      updateSubIssue: async (
+        workspaceSlug: string,
+        projectId: string,
+        parentIssueId: string,
+        issueId: string,
+        data: Partial<TIssue>
+      ) => {
+        try {
+          setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
+          await updateSubIssue(workspaceSlug, projectId, parentIssueId, issueId, data);
+          setToastAlert({
+            type: "success",
+            title: "Sub-issue updated successfully",
+            message: "Sub-issue updated successfully",
+          });
+          setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
+        } catch (error) {
+          setToastAlert({
+            type: "error",
+            title: "Error updating sub-issue",
+            message: "Error updating sub-issue",
+          });
+        }
+      },
+      removeSubIssue: async (workspaceSlug: string, projectId: string, parentIssueId: string, issueId: string) => {
+        try {
+          setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
+          await removeSubIssue(workspaceSlug, projectId, parentIssueId, issueId);
+          setToastAlert({
+            type: "success",
+            title: "Sub-issue removed successfully",
+            message: "Sub-issue removed successfully",
+          });
+          setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
+        } catch (error) {
+          setToastAlert({
+            type: "error",
+            title: "Error removing sub-issue",
+            message: "Error removing sub-issue",
+          });
+        }
+      },
+      deleteSubIssue: async (workspaceSlug: string, projectId: string, parentIssueId: string, issueId: string) => {
+        try {
+          setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
+          await deleteSubIssue(workspaceSlug, projectId, parentIssueId, issueId);
+          setToastAlert({
+            type: "success",
+            title: "Issue deleted successfully",
+            message: "Issue deleted successfully",
+          });
+          setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
+        } catch (error) {
+          setToastAlert({
+            type: "error",
+            title: "Error deleting issue",
+            message: "Error deleting issue",
+          });
+        }
+      },
+    }),
+    [fetchSubIssues, createSubIssues, updateSubIssue, removeSubIssue, deleteSubIssue, setToastAlert, setSubIssueHelpers]
+  );
+
+  const issue = getIssueById(parentIssueId);
+  const subIssuesDistribution = stateDistributionByIssueId(parentIssueId);
+  const subIssues = subIssuesByIssueId(parentIssueId);
+  const subIssueHelpers = subIssueHelpersByIssueId(`${parentIssueId}_root`);
+
+  if (!issue) return <></>;
   return (
     <div className="h-full w-full space-y-2">
-      {/* {!issues && isLoading ? (
+      {!subIssues ? (
         <div className="py-3 text-center text-sm  font-medium text-custom-text-300">Loading...</div>
       ) : (
         <>
-          {issues && issues?.sub_issues && issues?.sub_issues?.length > 0 ? (
+          {subIssues && subIssues?.length > 0 ? (
             <>
               <div className="relative flex items-center gap-4 text-xs">
                 <div
                   className="flex cursor-pointer select-none items-center gap-1 rounded border border-custom-border-100 p-1.5 px-2 shadow transition-all hover:bg-custom-background-80"
-                  onClick={() => handleIssuesLoader({ key: "visibility", issueId: parentIssue?.id })}
+                  onClick={() => setSubIssueHelpers(`${parentIssueId}_root`, "issue_visibility", parentIssueId)}
                 >
                   <div className="flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center">
-                    {issuesLoader.visibility.includes(parentIssue?.id) ? (
+                    {subIssueHelpers.preview_loader.includes(parentIssueId) ? (
+                      <Loader width={14} strokeWidth={2} className="animate-spin" />
+                    ) : subIssueHelpers.issue_visibility.includes(parentIssueId) ? (
                       <ChevronDown width={16} strokeWidth={2} />
                     ) : (
                       <ChevronRight width={14} strokeWidth={2} />
                     )}
                   </div>
                   <div>Sub-issues</div>
-                  <div>({issues?.sub_issues?.length || 0})</div>
+                  <div>({subIssues?.length || 0})</div>
                 </div>
 
                 <div className="w-full max-w-[250px] select-none">
                   <ProgressBar
-                    total={issues?.sub_issues?.length || 0}
-                    done={(issues?.state_distribution?.cancelled || 0) + (issues?.state_distribution?.completed || 0)}
+                    total={subIssues?.length || 0}
+                    done={
+                      ((subIssuesDistribution?.cancelled ?? []).length || 0) +
+                      ((subIssuesDistribution?.completed ?? []).length || 0)
+                    }
                   />
                 </div>
 
-                {is_editable && issuesLoader.visibility.includes(parentIssue?.id) && (
+                {!disabled && (
                   <div className="ml-auto flex flex-shrink-0 select-none items-center gap-2">
                     <div
                       className="cursor-pointer rounded border border-custom-border-100 p-1.5 px-2 shadow transition-all hover:bg-custom-background-80"
-                      onClick={() => handleIssueCrudOperation("create", parentIssue?.id)}
+                      onClick={() => handleIssueCrudState("create", parentIssueId, null)}
                     >
                       Add sub-issue
                     </div>
                     <div
                       className="cursor-pointer rounded border border-custom-border-100 p-1.5 px-2 shadow transition-all hover:bg-custom-background-80"
-                      onClick={() => handleIssueCrudOperation("existing", parentIssue?.id)}
+                      onClick={() => handleIssueCrudState("existing", parentIssueId, null)}
                     >
                       Add an existing issue
                     </div>
@@ -184,21 +274,16 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = observer((props) => {
                 )}
               </div>
 
-
-              {issuesLoader.visibility.includes(parentIssue?.id) && workspaceSlug && projectId && (
+              {subIssueHelpers.issue_visibility.includes(parentIssueId) && (
                 <div className="border border-b-0 border-custom-border-100">
-                  <SubIssuesRootList
-                    workspaceSlug={workspaceSlug.toString()}
-                    projectId={projectId.toString()}
-                    parentIssue={parentIssue}
-                    user={undefined}
-                    editable={is_editable}
-                    removeIssueFromSubIssues={removeIssueFromSubIssues}
-                    issuesLoader={issuesLoader}
-                    handleIssuesLoader={handleIssuesLoader}
-                    copyText={copyText}
-                    handleIssueCrudOperation={handleIssueCrudOperation}
-                    handleUpdateIssue={handleUpdateIssue}
+                  <IssueList
+                    workspaceSlug={workspaceSlug}
+                    projectId={projectId}
+                    parentIssueId={parentIssueId}
+                    spacingLeft={10}
+                    disabled={!disabled}
+                    handleIssueCrudState={handleIssueCrudState}
+                    subIssueOperations={subIssueOperations}
                   />
                 </div>
               )}
@@ -206,10 +291,10 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = observer((props) => {
               <div>
                 <CustomMenu
                   label={
-                    <>
+                    <div className="flex items-center gap-1">
                       <Plus className="h-3 w-3" />
                       Add sub-issue
-                    </>
+                    </div>
                   }
                   buttonClassName="whitespace-nowrap"
                   placement="bottom-end"
@@ -218,14 +303,14 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = observer((props) => {
                 >
                   <CustomMenu.MenuItem
                     onClick={() => {
-                      handleIssueCrudOperation("create", parentIssue?.id);
+                      handleIssueCrudState("create", parentIssueId, null);
                     }}
                   >
                     Create new
                   </CustomMenu.MenuItem>
                   <CustomMenu.MenuItem
                     onClick={() => {
-                      handleIssueCrudOperation("existing", parentIssue?.id);
+                      handleIssueCrudState("existing", parentIssueId, null);
                     }}
                   >
                     Add an existing issue
@@ -234,7 +319,7 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = observer((props) => {
               </div>
             </>
           ) : (
-            is_editable && (
+            !disabled && (
               <div className="flex items-center justify-between">
                 <div className="py-2 text-xs italic text-custom-text-300">No Sub-Issues yet</div>
                 <div>
@@ -252,14 +337,14 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = observer((props) => {
                   >
                     <CustomMenu.MenuItem
                       onClick={() => {
-                        handleIssueCrudOperation("create", parentIssue?.id);
+                        handleIssueCrudState("create", parentIssueId, null);
                       }}
                     >
                       Create new
                     </CustomMenu.MenuItem>
                     <CustomMenu.MenuItem
                       onClick={() => {
-                        handleIssueCrudOperation("existing", parentIssue?.id);
+                        handleIssueCrudState("existing", parentIssueId, null);
                       }}
                     >
                       Add an existing issue
@@ -270,62 +355,74 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = observer((props) => {
             )
           )}
 
-          {is_editable && issueCrudOperation?.create?.toggle && (
+          {/* issue create, add from existing , update and delete modals */}
+          {issueCrudState?.create?.toggle && issueCrudState?.create?.parentIssueId && (
             <CreateUpdateIssueModal
-              isOpen={issueCrudOperation?.create?.toggle}
+              isOpen={issueCrudState?.create?.toggle}
               data={{
-                parent_id: issueCrudOperation?.create?.issueId,
+                parent_id: issueCrudState?.create?.parentIssueId,
               }}
-              onClose={() => {
-                handleIssueCrudOperation("create", null);
+              onClose={() => handleIssueCrudState("create", null, null)}
+              onSubmit={async (_issue: TIssue) => {
+                await subIssueOperations.addSubIssue(workspaceSlug, projectId, parentIssueId, [_issue.id]);
               }}
             />
           )}
 
-          {is_editable && issueCrudOperation?.existing?.toggle && issueCrudOperation?.existing?.issueId && (
+          {issueCrudState?.existing?.toggle && issueCrudState?.existing?.parentIssueId && (
             <ExistingIssuesListModal
-              isOpen={issueCrudOperation?.existing?.toggle}
-              handleClose={() => handleIssueCrudOperation("existing", null)}
-              searchParams={{ sub_issue: true, issue_id: issueCrudOperation?.existing?.issueId }}
-              handleOnSubmit={addAsSubIssueFromExistingIssues}
+              isOpen={issueCrudState?.existing?.toggle}
+              handleClose={() => handleIssueCrudState("existing", null, null)}
+              searchParams={{ sub_issue: true, issue_id: issueCrudState?.existing?.parentIssueId }}
+              handleOnSubmit={(_issue) =>
+                subIssueOperations.addSubIssue(
+                  workspaceSlug,
+                  projectId,
+                  parentIssueId,
+                  _issue.map((issue) => issue.id)
+                )
+              }
               workspaceLevelToggle
             />
           )}
 
-          {is_editable && issueCrudOperation?.edit?.toggle && issueCrudOperation?.edit?.issueId && (
+          {issueCrudState?.update?.toggle && issueCrudState?.update?.issue && (
             <>
               <CreateUpdateIssueModal
-                isOpen={issueCrudOperation?.edit?.toggle}
+                isOpen={issueCrudState?.update?.toggle}
                 onClose={() => {
-                  handleIssueCrudOperation("edit", null, null);
+                  handleIssueCrudState("update", null, null);
+                }}
+                data={issueCrudState?.update?.issue ?? undefined}
+                onSubmit={async (_issue: TIssue) => {
+                  await subIssueOperations.updateSubIssue(workspaceSlug, projectId, parentIssueId, _issue.id, _issue);
                 }}
-                data={issueCrudOperation?.edit?.issue ?? undefined}
               />
             </>
           )}
 
-          {is_editable &&
-            workspaceSlug &&
-            projectId &&
-            issueCrudOperation?.delete?.issueId &&
-            issueCrudOperation?.delete?.issue && (
+          {issueCrudState?.delete?.toggle &&
+            issueCrudState?.delete?.issue &&
+            issueCrudState.delete.parentIssueId &&
+            issueCrudState.delete.issue.id && (
               <DeleteIssueModal
-                isOpen={issueCrudOperation?.delete?.toggle}
+                isOpen={issueCrudState?.delete?.toggle}
                 handleClose={() => {
-                  handleIssueCrudOperation("delete", null, null);
-                }}
-                data={issueCrudOperation?.delete?.issue}
-                onSubmit={async () => {
-                  await removeIssue(
-                    workspaceSlug.toString(),
-                    projectId.toString(),
-                    issueCrudOperation?.delete?.issue?.id ?? ""
-                  );
+                  handleIssueCrudState("delete", null, null);
                 }}
+                data={issueCrudState?.delete?.issue as TIssue}
+                onSubmit={async () =>
+                  await subIssueOperations.deleteSubIssue(
+                    workspaceSlug,
+                    projectId,
+                    issueCrudState?.delete?.parentIssueId as string,
+                    issueCrudState?.delete?.issue?.id as string
+                  )
+                }
               />
             )}
         </>
-      )} */}
+      )}
     </div>
   );
 });

web/components/modules/sidebar.tsx

@@ -577,7 +577,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                             </div>
                             <div className="relative h-40 w-80">
                               <ProgressChart
-                                distribution={moduleDetails.distribution.completion_chart}
+                                distribution={moduleDetails.distribution?.completion_chart}
                                 startDate={moduleDetails.start_date ?? ""}
                                 endDate={moduleDetails.target_date ?? ""}
                                 totalIssues={moduleDetails.total_issues}

web/components/views/form.tsx

@@ -47,7 +47,7 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
   });
 
   const selectedFilters: IIssueFilterOptions = {};
-  Object.entries(watch("query_data") ?? {}).forEach(([key, value]) => {
+  Object.entries(watch("filters") ?? {}).forEach(([key, value]) => {
     if (!value) return;
 
     if (Array.isArray(value) && value.length === 0) return;
@@ -59,7 +59,7 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
   const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
     // If value is null then remove all the filters of that key
     if (!value) {
-      setValue("query_data", {
+      setValue("filters", {
         ...selectedFilters,
         [key]: null,
       });
@@ -76,14 +76,18 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
       if (selectedFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
     }
 
-    setValue("query_data", {
+    setValue("filters", {
       ...selectedFilters,
       [key]: newValues,
     });
   };
 
   const handleCreateUpdateView = async (formData: IProjectView) => {
-    await handleFormSubmit(formData);
+    await handleFormSubmit({
+      name: formData.name,
+      description: formData.description,
+      filters: formData.filters,
+    } as IProjectView);
 
     reset({
       ...defaultValues,
@@ -93,7 +97,7 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
   const clearAllFilters = () => {
     if (!selectedFilters) return;
 
-    setValue("query_data", {});
+    setValue("filters", {});
   };
 
   useEffect(() => {
@@ -156,7 +160,7 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
           <div>
             <Controller
               control={control}
-              name="query_data"
+              name="filters"
               render={({ field: { onChange, value: filters } }) => (
                 <FiltersDropdown title="Filters" tabIndex={3}>
                   <FilterSelection
@@ -204,7 +208,7 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
         <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={4}>
           Cancel
         </Button>
-        <Button variant="primary" size="sm" type="submit" tabIndex={5}>
+        <Button variant="primary" size="sm" type="submit" tabIndex={5} disabled={isSubmitting}>
           {data
             ? isSubmitting
               ? "Updating View..."

web/components/views/modal.tsx

@@ -1,7 +1,6 @@
 import { FC, Fragment } from "react";
 import { observer } from "mobx-react-lite";
 import { Dialog, Transition } from "@headlessui/react";
-import { debounce } from "lodash";
 // hooks
 import { useProjectView } from "hooks/store";
 import useToast from "hooks/use-toast";
@@ -33,9 +32,7 @@ export const CreateUpdateProjectViewModal: FC<Props> = observer((props) => {
   const handleCreateView = async (payload: IProjectView) => {
     await createView(workspaceSlug, projectId, payload)
       .then(() => {
-        // console.log("after calling store");
         handleClose();
-        // console.log("after closing");
         setToastAlert({
           type: "success",
           title: "Success!",
@@ -68,8 +65,6 @@ export const CreateUpdateProjectViewModal: FC<Props> = observer((props) => {
     else await handleUpdateView(formData);
   };
 
-  const debouncedFormSubmit = debounce(handleFormSubmit, 10, { leading: false, trailing: true });
-
   return (
     <Transition.Root show={isOpen} as={Fragment}>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
@@ -100,7 +95,7 @@ export const CreateUpdateProjectViewModal: FC<Props> = observer((props) => {
                 <ProjectViewForm
                   data={data}
                   handleClose={handleClose}
-                  handleFormSubmit={debouncedFormSubmit as (formData: IProjectView) => Promise<void>}
+                  handleFormSubmit={handleFormSubmit}
                   preLoadedData={preLoadedData}
                 />
               </Dialog.Panel>

web/components/views/view-list-item.tsx

@@ -62,7 +62,7 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
     });
   };
 
-  const totalFilters = calculateTotalFilters(view.query_data ?? {});
+  const totalFilters = calculateTotalFilters(view.filters ?? {});
 
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
 

web/components/web-hooks/create-webhook-modal.tsx

@@ -13,10 +13,6 @@ import { getCurrentHookAsCSV } from "./utils";
 // types
 import { IWebhook, IWorkspace, TWebhookEventTypes } from "@plane/types";
 
-interface WebhookWithKey {
-  webHook: IWebhook;
-  secretKey: string | undefined;
-}
 interface ICreateWebhookModal {
   currentWorkspace: IWorkspace | null;
   isOpen: boolean;

web/components/web-hooks/form/form.tsx

@@ -1,10 +1,8 @@
 import React, { FC, useEffect, useState } from "react";
-import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useWebhook, useWorkspace } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { useWebhook } from "hooks/store";
 // components
 import {
   WebhookIndividualEventOptions,
@@ -37,14 +35,8 @@ export const WebhookForm: FC<Props> = observer((props) => {
   const { data, onSubmit, handleClose } = props;
   // states
   const [webhookEventType, setWebhookEventType] = useState<TWebhookEventTypes>("all");
-  // router
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-  // toast
-  const { setToastAlert } = useToast();
   // store hooks
-  const { currentWorkspace } = useWorkspace();
-  const { createWebhook, updateWebhook, webhookSecretKey } = useWebhook();
+  const {webhookSecretKey } = useWebhook();
   // use form
   const {
     handleSubmit,

web/components/workspace/index.ts

@@ -13,3 +13,4 @@ export * from "./send-workspace-invitation-modal";
 export * from "./sidebar-dropdown";
 export * from "./sidebar-menu";
 export * from "./sidebar-quick-action";
+export * from "./workspace-active-cycles-list";

web/components/workspace/sidebar-menu.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { BarChart2, Briefcase, CheckCircle, LayoutGrid } from "lucide-react";
+import { BarChart2, Briefcase, CheckCircle, LayoutGrid, SendToBack } from "lucide-react";
 // hooks
 import { useApplication, useUser } from "hooks/store";
 // components
@@ -33,6 +33,11 @@ const workspaceLinks = (workspaceSlug: string) => [
     name: "All Issues",
     href: `/${workspaceSlug}/workspace-views/all-issues`,
   },
+  {
+    Icon: SendToBack,
+    name: "Active Cycles",
+    href: `/${workspaceSlug}/active-cycles`,
+  },
 ];
 
 export const WorkspaceSidebarMenu = observer(() => {
@@ -70,6 +75,17 @@ export const WorkspaceSidebarMenu = observer(() => {
                 >
                   {<link.Icon className="h-4 w-4" />}
                   {!themeStore?.sidebarCollapsed && link.name}
+                  {link.name === "Active Cycles" && (
+                    <span
+                      className="flex items-center justify-center px-3.5 py-0.5 text-xs leading-4 rounded-xl"
+                      style={{
+                        color: "#F59E0B",
+                        backgroundColor: "#F59E0B20",
+                      }}
+                    >
+                      Beta
+                    </span>
+                  )}
                 </div>
               </Tooltip>
             </span>

web/components/workspace/workspace-active-cycles-list.tsx

@@ -0,0 +1,57 @@
+import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// components
+import { ActiveCycleInfo } from "components/cycles";
+// services
+import { CycleService } from "services/cycle.service";
+const cycleService = new CycleService();
+// hooks
+import { useWorkspace } from "hooks/store";
+// helpers
+import { renderEmoji } from "helpers/emoji.helper";
+
+export const WorkspaceActiveCyclesList = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // fetching active cycles in workspace
+  const { data } = useSWR("WORKSPACE_ACTIVE_CYCLES", () => cycleService.workspaceActiveCycles(workspaceSlug as string));
+  // store
+  const { workspaceActiveCyclesSearchQuery } = useWorkspace();
+  // filter cycles based on search query
+  const filteredCycles = data?.filter(
+    (cycle) =>
+      cycle.project_detail.name.toLowerCase().includes(workspaceActiveCyclesSearchQuery.toLowerCase()) ||
+      cycle.project_detail.identifier?.toLowerCase().includes(workspaceActiveCyclesSearchQuery.toLowerCase()) ||
+      cycle.name.toLowerCase().includes(workspaceActiveCyclesSearchQuery.toLowerCase())
+  );
+
+  return (
+    <div>
+      {workspaceSlug &&
+        filteredCycles &&
+        filteredCycles.map((cycle) => (
+          <div key={cycle.id} className="px-5 py-7">
+            <div className="flex items-center gap-1.5 px-3 py-1.5">
+              {cycle.project_detail.emoji ? (
+                <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                  {renderEmoji(cycle.project_detail.emoji)}
+                </span>
+              ) : cycle.project_detail.icon_prop ? (
+                <div className="grid h-7 w-7 flex-shrink-0 place-items-center">
+                  {renderEmoji(cycle.project_detail.icon_prop)}
+                </div>
+              ) : (
+                <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                  {cycle.project_detail?.name.charAt(0)}
+                </span>
+              )}
+              <h2 className="text-xl font-semibold">{cycle.project_detail.name}</h2>
+            </div>
+            <ActiveCycleInfo workspaceSlug={workspaceSlug?.toString()} projectId={cycle.project} cycle={cycle} />
+          </div>
+        ))}
+    </div>
+  );
+});

web/constants/cycle.ts

@@ -86,3 +86,32 @@ export const CYCLE_STATUS: {
     bgColor: "bg-custom-background-90",
   },
 ];
+
+
+export const STATE_GROUPS_DETAILS = [
+  {
+    key: "backlog_issues",
+    title: "Backlog",
+    color: "#dee2e6",
+  },
+  {
+    key: "unstarted_issues",
+    title: "Unstarted",
+    color: "#26b5ce",
+  },
+  {
+    key: "started_issues",
+    title: "Started",
+    color: "#f7ae59",
+  },
+  {
+    key: "cancelled_issues",
+    title: "Cancelled",
+    color: "#d687ff",
+  },
+  {
+    key: "completed_issues",
+    title: "Completed",
+    color: "#09a953",
+  },
+];

web/pages/[workspaceSlug]/active-cycles.tsx

@@ -0,0 +1,16 @@
+import { ReactElement } from "react";
+// components
+import { WorkspaceActiveCyclesList } from "components/workspace";
+import { WorkspaceActiveCycleHeader } from "components/headers";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+// types
+import { NextPageWithLayout } from "lib/types";
+
+const WorkspaceActiveCyclesPage: NextPageWithLayout = () => <WorkspaceActiveCyclesList />;
+
+WorkspaceActiveCyclesPage.getLayout = function getLayout(page: ReactElement) {
+  return <AppLayout header={<WorkspaceActiveCycleHeader />}>{page}</AppLayout>;
+};
+
+export default WorkspaceActiveCyclesPage;

web/pages/[workspaceSlug]/settings/webhooks/create.tsx

@@ -1,108 +0,0 @@
-import React from "react";
-import { observer } from "mobx-react-lite";
-import { useRouter } from "next/router";
-// hooks
-import { useUser, useWebhook, useWorkspace } from "hooks/store";
-import useToast from "hooks/use-toast";
-// layouts
-import { AppLayout } from "layouts/app-layout";
-import { WorkspaceSettingLayout } from "layouts/settings-layout";
-// components
-import { WorkspaceSettingHeader } from "components/headers";
-import { WebhookForm, getCurrentHookAsCSV } from "components/web-hooks";
-// types
-import { NextPageWithLayout } from "lib/types";
-import { IWebhook } from "@plane/types";
-// helpers
-import { csvDownload } from "helpers/download.helper";
-
-const CreateWebhookPage: NextPageWithLayout = observer(() => {
-  // router
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const {
-    membership: { currentWorkspaceRole },
-  } = useUser();
-  const { createWebhook } = useWebhook();
-  const { currentWorkspace } = useWorkspace();
-
-  const { setToastAlert } = useToast();
-  const isAdmin = currentWorkspaceRole === 20;
-
-  const handleCreateWebhook = async (formData: IWebhook, webhookEventType: string) => {
-    if (!workspaceSlug) return;
-
-    let payload: Partial<IWebhook> = {
-      url: formData.url,
-    };
-
-    if (webhookEventType === "all")
-      payload = {
-        ...payload,
-        project: true,
-        cycle: true,
-        module: true,
-        issue: true,
-        issue_comment: true,
-      };
-    else
-      payload = {
-        ...payload,
-        project: formData.project ?? false,
-        cycle: formData.cycle ?? false,
-        module: formData.module ?? false,
-        issue: formData.issue ?? false,
-        issue_comment: formData.issue_comment ?? false,
-      };
-
-    await createWebhook(workspaceSlug.toString(), payload)
-      .then(({ webHook, secretKey }) => {
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: "Webhook created successfully.",
-        });
-
-        const csvData = getCurrentHookAsCSV(currentWorkspace, webHook, secretKey?.toString() ?? "");
-        csvDownload(csvData, `webhook-secret-key-${Date.now()}`);
-
-        if (webHook && webHook.id)
-          router.push({ pathname: `/${workspaceSlug}/settings/webhooks/${webHook.id}`, query: { isCreated: true } });
-      })
-      .catch((error) => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: error?.error ?? "Something went wrong. Please try again.",
-        });
-      });
-  };
-
-  const handleFormSubmit = async (formData: IWebhook, webhookEventType: string) => {
-    await handleCreateWebhook(formData, webhookEventType);
-  };
-
-  if (!isAdmin)
-    return (
-      <div className="mt-10 flex h-full w-full justify-center p-4">
-        <p className="text-sm text-custom-text-300">You are not authorized to access this page.</p>
-      </div>
-    );
-
-  return (
-    <div className="w-full overflow-y-auto py-8 pl-1 pr-9">
-      <WebhookForm onSubmit={handleFormSubmit} />
-    </div>
-  );
-});
-
-CreateWebhookPage.getLayout = function getLayout(page: React.ReactElement) {
-  return (
-    <AppLayout header={<WorkspaceSettingHeader title="Webhook settings" />}>
-      <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
-    </AppLayout>
-  );
-};
-
-export default CreateWebhookPage;

web/pages/[workspaceSlug]/settings/webhooks/index.tsx

@@ -21,7 +21,7 @@ const WebhooksListPage: NextPageWithLayout = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
-
+  // mobx store
   const {
     membership: { currentWorkspaceRole },
   } = useUser();

web/services/cycle.service.ts

@@ -10,6 +10,14 @@ export class CycleService extends APIService {
     super(API_BASE_URL);
   }
 
+  async workspaceActiveCycles(workspaceSlug: string): Promise<ICycle[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/active-cycles/`)
+      .then((res) => res?.data)
+      .catch((err) => {
+        throw err?.response?.data;
+      });
+  }
+
   async createCycle(workspaceSlug: string, projectId: string, data: any): Promise<ICycle> {
     return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/`, data)
       .then((response) => response?.data)

web/store/issue/cycle/filter.store.ts

@@ -138,7 +138,7 @@ export class CycleIssuesFilter extends IssueFilterHelperStore implements ICycleI
   ) => {
     try {
       if (!cycleId) throw new Error("Cycle id is required");
-      if (isEmpty(this.filters) || isEmpty(this.filters[projectId]) || isEmpty(filters)) return;
+      if (isEmpty(this.filters) || isEmpty(this.filters[cycleId]) || isEmpty(filters)) return;
 
       const _filters = {
         filters: this.filters[cycleId].filters as IIssueFilterOptions,

web/store/issue/issue-details/issue.store.ts

@@ -58,8 +58,12 @@ export class IssueStore implements IIssueStore {
       this.rootIssueDetailStore.rootIssueStore.issues.addIssue([issue]);
 
       // store handlers from issue detail
+      // parent
       if (issue && issue?.parent && issue?.parent?.id)
         this.rootIssueDetailStore.rootIssueStore.issues.addIssue([issue?.parent]);
+      // assignees
+      // labels
+      // state
 
       // issue reactions
       this.rootIssueDetailStore.reaction.fetchReactions(workspaceSlug, projectId, issueId);

web/store/issue/issue-details/relation.store.ts

@@ -94,7 +94,6 @@ export class IssueRelationStore implements IIssueRelationStore {
           const relation_key = key as TIssueRelationTypes;
           const relation_issues = response[relation_key];
           const issues = relation_issues.flat().map((issue) => issue.issue_detail);
-          if (issues && issues.length > 0) this.rootIssueDetailStore.rootIssueStore.issues.addIssue(issues);
           set(
             this.relationMap,
             [issueId, relation_key],

web/store/issue/issue-details/root.store.ts

@@ -201,17 +201,19 @@ export class IssueDetail implements IIssueDetail {
   // sub issues
   fetchSubIssues = async (workspaceSlug: string, projectId: string, issueId: string) =>
     this.subIssues.fetchSubIssues(workspaceSlug, projectId, issueId);
-  createSubIssues = async (workspaceSlug: string, projectId: string, issueId: string, data: string[]) =>
-    this.subIssues.createSubIssues(workspaceSlug, projectId, issueId, data);
+  createSubIssues = async (workspaceSlug: string, projectId: string, parentIssueId: string, data: string[]) =>
+    this.subIssues.createSubIssues(workspaceSlug, projectId, parentIssueId, data);
   updateSubIssue = async (
     workspaceSlug: string,
     projectId: string,
     parentIssueId: string,
     issueId: string,
-    data: { oldParentId: string; newParentId: string }
+    data: Partial<TIssue>
   ) => this.subIssues.updateSubIssue(workspaceSlug, projectId, parentIssueId, issueId, data);
-  removeSubIssue = async (workspaceSlug: string, projectId: string, parentIssueId: string, issueIds: string[]) =>
-    this.subIssues.removeSubIssue(workspaceSlug, projectId, parentIssueId, issueIds);
+  removeSubIssue = async (workspaceSlug: string, projectId: string, parentIssueId: string, issueId: string) =>
+    this.subIssues.removeSubIssue(workspaceSlug, projectId, parentIssueId, issueId);
+  deleteSubIssue = async (workspaceSlug: string, projectId: string, parentIssueId: string, issueId: string) =>
+    this.subIssues.deleteSubIssue(workspaceSlug, projectId, parentIssueId, issueId);
 
   // subscription
   fetchSubscriptions = async (workspaceSlug: string, projectId: string, issueId: string) =>

web/store/issue/issue-details/sub_issues.store.ts

@@ -1,5 +1,8 @@
 import { action, makeObservable, observable, runInAction } from "mobx";
 import set from "lodash/set";
+import concat from "lodash/concat";
+import update from "lodash/update";
+import pull from "lodash/pull";
 // services
 import { IssueService } from "services/issue";
 // types
@@ -13,41 +16,44 @@ import {
 } from "@plane/types";
 
 export interface IIssueSubIssuesStoreActions {
-  fetchSubIssues: (workspaceSlug: string, projectId: string, issueId: string) => Promise<TIssueSubIssues>;
+  fetchSubIssues: (workspaceSlug: string, projectId: string, parentIssueId: string) => Promise<TIssueSubIssues>;
   createSubIssues: (
     workspaceSlug: string,
     projectId: string,
-    issueId: string,
-    data: string[]
-  ) => Promise<TIssueSubIssues>;
+    parentIssueId: string,
+    issueIds: string[]
+  ) => Promise<void>;
   updateSubIssue: (
     workspaceSlug: string,
     projectId: string,
     parentIssueId: string,
     issueId: string,
-    data: { oldParentId: string; newParentId: string }
-  ) => any;
-  removeSubIssue: (
-    workspaceSlug: string,
-    projectId: string,
-    parentIssueId: string,
-    issueIds: string[]
-  ) => Promise<TIssueSubIssues>;
+    data: Partial<TIssue>
+  ) => Promise<void>;
+  removeSubIssue: (workspaceSlug: string, projectId: string, parentIssueId: string, issueId: string) => Promise<void>;
+  deleteSubIssue: (workspaceSlug: string, projectId: string, parentIssueId: string, issueId: string) => Promise<void>;
 }
 
+type TSubIssueHelpersKeys = "issue_visibility" | "preview_loader" | "issue_loader";
+type TSubIssueHelpers = Record<TSubIssueHelpersKeys, string[]>;
 export interface IIssueSubIssuesStore extends IIssueSubIssuesStoreActions {
   // observables
   subIssuesStateDistribution: TIssueSubIssuesStateDistributionMap;
   subIssues: TIssueSubIssuesIdMap;
+  subIssueHelpers: Record<string, TSubIssueHelpers>; // parent_issue_id -> TSubIssueHelpers
   // helper methods
   stateDistributionByIssueId: (issueId: string) => TSubIssuesStateDistribution | undefined;
   subIssuesByIssueId: (issueId: string) => string[] | undefined;
+  subIssueHelpersByIssueId: (issueId: string) => TSubIssueHelpers;
+  // actions
+  setSubIssueHelpers: (parentIssueId: string, key: TSubIssueHelpersKeys, value: string) => void;
 }
 
 export class IssueSubIssuesStore implements IIssueSubIssuesStore {
   // observables
   subIssuesStateDistribution: TIssueSubIssuesStateDistributionMap = {};
   subIssues: TIssueSubIssuesIdMap = {};
+  subIssueHelpers: Record<string, TSubIssueHelpers> = {};
   // root store
   rootIssueDetailStore: IIssueDetail;
   // services
@@ -58,11 +64,14 @@ export class IssueSubIssuesStore implements IIssueSubIssuesStore {
       // observables
       subIssuesStateDistribution: observable,
       subIssues: observable,
+      subIssueHelpers: observable,
       // actions
+      setSubIssueHelpers: action,
       fetchSubIssues: action,
       createSubIssues: action,
       updateSubIssue: action,
       removeSubIssue: action,
+      deleteSubIssue: action,
     });
     // root store
     this.rootIssueDetailStore = rootStore;
@@ -81,25 +90,40 @@ export class IssueSubIssuesStore implements IIssueSubIssuesStore {
     return this.subIssues[issueId] ?? undefined;
   };
 
+  subIssueHelpersByIssueId = (issueId: string) => ({
+    preview_loader: this.subIssueHelpers?.[issueId]?.preview_loader || [],
+    issue_visibility: this.subIssueHelpers?.[issueId]?.issue_visibility || [],
+    issue_loader: this.subIssueHelpers?.[issueId]?.issue_loader || [],
+  });
+
   // actions
-  fetchSubIssues = async (workspaceSlug: string, projectId: string, issueId: string) => {
+  setSubIssueHelpers = (parentIssueId: string, key: TSubIssueHelpersKeys, value: string) => {
+    if (!parentIssueId || !key || !value) return;
+
+    update(this.subIssueHelpers, [parentIssueId, key], (subIssueHelpers: string[]) => {
+      if (!subIssueHelpers || subIssueHelpers.length <= 0) return [value];
+      else if (subIssueHelpers.includes(value)) pull(subIssueHelpers, value);
+      else concat(subIssueHelpers, value);
+      return subIssueHelpers;
+    });
+  };
+
+  fetchSubIssues = async (workspaceSlug: string, projectId: string, parentIssueId: string) => {
     try {
-      const response = await this.issueService.subIssues(workspaceSlug, projectId, issueId);
+      const response = await this.issueService.subIssues(workspaceSlug, projectId, parentIssueId);
       const subIssuesStateDistribution = response?.state_distribution ?? {};
       const subIssues = (response.sub_issues ?? []) as TIssue[];
 
       this.rootIssueDetailStore.rootIssueStore.issues.addIssue(subIssues);
 
-      if (subIssues.length > 0) {
-        runInAction(() => {
-          set(this.subIssuesStateDistribution, issueId, subIssuesStateDistribution);
-          set(
-            this.subIssues,
-            issueId,
-            subIssues.map((issue) => issue.id)
-          );
-        });
-      }
+      runInAction(() => {
+        set(this.subIssuesStateDistribution, parentIssueId, subIssuesStateDistribution);
+        set(
+          this.subIssues,
+          parentIssueId,
+          subIssues.map((issue) => issue.id)
+        );
+      });
 
       return response;
     } catch (error) {
@@ -107,23 +131,34 @@ export class IssueSubIssuesStore implements IIssueSubIssuesStore {
     }
   };
 
-  createSubIssues = async (workspaceSlug: string, projectId: string, issueId: string, data: string[]) => {
+  createSubIssues = async (workspaceSlug: string, projectId: string, parentIssueId: string, issueIds: string[]) => {
     try {
-      const response = await this.issueService.addSubIssues(workspaceSlug, projectId, issueId, { sub_issue_ids: data });
+      const response = await this.issueService.addSubIssues(workspaceSlug, projectId, parentIssueId, {
+        sub_issue_ids: issueIds,
+      });
+
       const subIssuesStateDistribution = response?.state_distribution;
       const subIssues = response.sub_issues as TIssue[];
 
-      this.rootIssueDetailStore.rootIssueStore.issues.addIssue(subIssues);
-
       runInAction(() => {
         Object.keys(subIssuesStateDistribution).forEach((key) => {
           const stateGroup = key as keyof TSubIssuesStateDistribution;
-          set(this.subIssuesStateDistribution, [issueId, key], subIssuesStateDistribution[stateGroup]);
+          update(this.subIssuesStateDistribution, [parentIssueId, stateGroup], (stateDistribution) => {
+            if (!stateDistribution) return subIssuesStateDistribution[stateGroup];
+            return concat(stateDistribution, subIssuesStateDistribution[stateGroup]);
+          });
+        });
+
+        const issueIds = subIssues.map((issue) => issue.id);
+        update(this.subIssues, [parentIssueId], (issues) => {
+          if (!issues) return issueIds;
+          return concat(issues, issueIds);
         });
-        set(this.subIssuesStateDistribution, issueId, data);
       });
 
-      return response;
+      this.rootIssueDetailStore.rootIssueStore.issues.addIssue(subIssues);
+
+      return;
     } catch (error) {
       throw error;
     }
@@ -134,45 +169,47 @@ export class IssueSubIssuesStore implements IIssueSubIssuesStore {
     projectId: string,
     parentIssueId: string,
     issueId: string,
-    data: { oldParentId: string; newParentId: string }
+    data: Partial<TIssue>
   ) => {
     try {
-      const oldIssueParentId = data.oldParentId;
-      const newIssueParentId = data.newParentId;
+      await this.rootIssueDetailStore.rootIssueStore.projectIssues.updateIssue(workspaceSlug, projectId, issueId, data);
 
-      // const issue = this.rootIssueDetailStore.rootIssueStore.issues.getIssueById(issueId);
-
-      // runInAction(() => {
-      //   Object.keys(subIssuesStateDistribution).forEach((key) => {
-      //     const stateGroup = key as keyof TSubIssuesStateDistribution;
-      //     set(this.subIssuesStateDistribution, [issueId, key], subIssuesStateDistribution[stateGroup]);
-      //   });
-      //   set(this.subIssuesStateDistribution, issueId, data);
-      // });
-
-      return {} as any;
+      if (data.hasOwnProperty("parent_id") && data.parent_id !== parentIssueId) {
+        runInAction(() => {
+          pull(this.subIssues[parentIssueId], issueId);
+        });
+      }
+      return;
     } catch (error) {
       throw error;
     }
   };
 
-  removeSubIssue = async (workspaceSlug: string, projectId: string, issueId: string, data: string[]) => {
+  removeSubIssue = async (workspaceSlug: string, projectId: string, parentIssueId: string, issueId: string) => {
     try {
-      const response = await this.issueService.addSubIssues(workspaceSlug, projectId, issueId, { sub_issue_ids: data });
-      const subIssuesStateDistribution = response?.state_distribution;
-      const subIssues = response.sub_issues as TIssue[];
-
-      this.rootIssueDetailStore.rootIssueStore.issues.addIssue(subIssues);
-
-      runInAction(() => {
-        Object.keys(subIssuesStateDistribution).forEach((key) => {
-          const stateGroup = key as keyof TSubIssuesStateDistribution;
-          set(this.subIssuesStateDistribution, [issueId, key], subIssuesStateDistribution[stateGroup]);
-        });
-        set(this.subIssuesStateDistribution, issueId, data);
+      await this.rootIssueDetailStore.rootIssueStore.projectIssues.updateIssue(workspaceSlug, projectId, issueId, {
+        parent_id: null,
       });
 
-      return response;
+      runInAction(() => {
+        pull(this.subIssues[parentIssueId], issueId);
+      });
+
+      return;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  deleteSubIssue = async (workspaceSlug: string, projectId: string, parentIssueId: string, issueId: string) => {
+    try {
+      await this.rootIssueDetailStore.rootIssueStore.projectIssues.removeIssue(workspaceSlug, projectId, issueId);
+
+      runInAction(() => {
+        pull(this.subIssues[parentIssueId], issueId);
+      });
+
+      return;
     } catch (error) {
       throw error;
     }

web/store/issue/project-views/filter.store.ts

@@ -139,7 +139,7 @@ export class ProjectViewIssuesFilter extends IssueFilterHelperStore implements I
     try {
       if (!viewId) throw new Error("View id is required");
 
-      if (isEmpty(this.filters) || isEmpty(this.filters[projectId]) || isEmpty(filters)) return;
+      if (isEmpty(this.filters) || isEmpty(this.filters[viewId]) || isEmpty(filters)) return;
 
       const _filters = {
         filters: this.filters[viewId].filters as IIssueFilterOptions,

web/store/issue/project-views/issue.store.ts

@@ -130,11 +130,15 @@ export class ProjectViewIssues extends IssueHelperStore implements IProjectViewI
       const response = await this.issueService.getIssues(workspaceSlug, projectId, params);
 
       runInAction(() => {
-        set(this.issues, [viewId], Object.keys(response));
+        set(
+          this.issues,
+          [viewId],
+          response.map((issue) => issue.id)
+        );
         this.loader = undefined;
       });
 
-      this.rootIssueStore.issues.addIssue(Object.values(response));
+      this.rootIssueStore.issues.addIssue(response);
 
       return response;
     } catch (error) {

web/store/issue/project/issue.store.ts

@@ -1,5 +1,8 @@
 import { action, makeObservable, observable, runInAction, computed } from "mobx";
 import set from "lodash/set";
+import update from "lodash/update";
+import pull from "lodash/pull";
+import concat from "lodash/concat";
 // base class
 import { IssueHelperStore } from "../helpers/issue-helper.store";
 // services
@@ -120,14 +123,16 @@ export class ProjectIssues extends IssueHelperStore implements IProjectIssues {
       const response = await this.issueService.createIssue(workspaceSlug, projectId, data);
 
       runInAction(() => {
-        this.issues[projectId].push(response.id);
+        update(this.issues, [projectId], (issueIds) => {
+          if (!issueIds) return [response.id];
+          return concat(issueIds, response.id);
+        });
       });
 
       this.rootStore.issues.addIssue([response]);
 
       return response;
     } catch (error) {
-      this.fetchIssues(workspaceSlug, projectId, "mutation");
       throw error;
     }
   };
@@ -148,16 +153,13 @@ export class ProjectIssues extends IssueHelperStore implements IProjectIssues {
     try {
       const response = await this.issueService.deleteIssue(workspaceSlug, projectId, issueId);
 
-      const issueIndex = this.issues[projectId].findIndex((_issueId) => _issueId === issueId);
-      if (issueIndex >= 0)
-        runInAction(() => {
-          this.issues[projectId].splice(issueIndex, 1);
-        });
+      runInAction(() => {
+        pull(this.issues[projectId], issueId);
+      });
 
       this.rootStore.issues.removeIssue(issueId);
       return response;
     } catch (error) {
-      this.fetchIssues(workspaceSlug, projectId, "mutation");
       throw error;
     }
   };

web/store/project-view.store.ts

@@ -1,4 +1,4 @@
-import { omit, set } from "lodash";
+import { set } from "lodash";
 import { observable, action, makeObservable, runInAction, computed } from "mobx";
 // services
 import { ViewService } from "services/view.service";
@@ -163,7 +163,7 @@ export class ProjectViewStore implements IProjectViewStore {
   deleteView = async (workspaceSlug: string, projectId: string, viewId: string): Promise<any> => {
     await this.viewService.deleteView(workspaceSlug, projectId, viewId).then(() => {
       runInAction(() => {
-        omit(this.viewMap, [viewId]);
+        delete this.viewMap[viewId];
       });
     });
   };

web/store/workspace/index.ts

@@ -12,9 +12,12 @@ import { ApiTokenStore, IApiTokenStore } from "./api-token.store";
 export interface IWorkspaceRootStore {
   // observables
   workspaces: Record<string, IWorkspace>;
+  workspaceActiveCyclesSearchQuery: string;
   // computed
   currentWorkspace: IWorkspace | null;
   workspacesCreatedByCurrentUser: IWorkspace[] | null;
+  // actions
+  setWorkspaceActiveCyclesSearchQuery: (query: string) => void;
   // computed actions
   getWorkspaceBySlug: (workspaceSlug: string) => IWorkspace | null;
   getWorkspaceById: (workspaceId: string) => IWorkspace | null;
@@ -31,6 +34,7 @@ export interface IWorkspaceRootStore {
 
 export class WorkspaceRootStore implements IWorkspaceRootStore {
   // observables
+  workspaceActiveCyclesSearchQuery: string = "";
   workspaces: Record<string, IWorkspace> = {};
   // services
   workspaceService;
@@ -45,6 +49,7 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
     makeObservable(this, {
       // observables
       workspaces: observable,
+      workspaceActiveCyclesSearchQuery: observable.ref,
       // computed
       currentWorkspace: computed,
       workspacesCreatedByCurrentUser: computed,
@@ -52,6 +57,7 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
       getWorkspaceBySlug: action,
       getWorkspaceById: action,
       // actions
+      setWorkspaceActiveCyclesSearchQuery: action,
       fetchWorkspaces: action,
       createWorkspace: action,
       updateWorkspace: action,
@@ -102,6 +108,14 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
    */
   getWorkspaceById = (workspaceId: string) => this.workspaces?.[workspaceId] || null; // TODO: use undefined instead of null
 
+  /**
+   * Sets search query
+   * @param query
+   */
+  setWorkspaceActiveCyclesSearchQuery = (query: string) => {
+    this.workspaceActiveCyclesSearchQuery = query;
+  };
+
   /**
    * fetch user workspaces from API
    */

yarn.lock

@@ -8650,47 +8650,47 @@ tunnel-agent@^0.6.0:
   dependencies:
     safe-buffer "^5.0.1"
 
-turbo-darwin-64@1.11.2:
-  version "1.11.2"
-  resolved "https://registry.yarnpkg.com/turbo-darwin-64/-/turbo-darwin-64-1.11.2.tgz#fc3d4d74b325a27aef11b6a52a61f07d466846b9"
-  integrity sha512-toFmRG/adriZY3hOps7nYCfqHAS+Ci6xqgX3fbo82kkLpC6OBzcXnleSwuPqjHVAaRNhVoB83L5njcE9Qwi2og==
+turbo-darwin-64@1.11.3:
+  version "1.11.3"
+  resolved "https://registry.yarnpkg.com/turbo-darwin-64/-/turbo-darwin-64-1.11.3.tgz#fb51f6fa030ee7a169d383b5f4f7641df6a3bdb8"
+  integrity sha512-IsOOg2bVbIt3o/X8Ew9fbQp5t1hTHN3fGNQYrPQwMR2W1kIAC6RfbVD4A9OeibPGyEPUpwOH79hZ9ydFH5kifw==
 
-turbo-darwin-arm64@1.11.2:
-  version "1.11.2"
-  resolved "https://registry.yarnpkg.com/turbo-darwin-arm64/-/turbo-darwin-arm64-1.11.2.tgz#583a4d0025bc3f953a9eeb7065cb173f481a9965"
-  integrity sha512-FCsEDZ8BUSFYEOSC3rrARQrj7x2VOrmVcfrMUIhexTxproRh4QyMxLfr6LALk4ymx6jbDCxWa6Szal8ckldFbA==
+turbo-darwin-arm64@1.11.3:
+  version "1.11.3"
+  resolved "https://registry.yarnpkg.com/turbo-darwin-arm64/-/turbo-darwin-arm64-1.11.3.tgz#f936cc7ba5565bd9be1ddc8ef4f15284044a63a5"
+  integrity sha512-FsJL7k0SaPbJzI/KCnrf/fi3PgCDCjTliMc/kEFkuWVA6Httc3Q4lxyLIIinz69q6JTx8wzh6yznUMzJRI3+dg==
 
-turbo-linux-64@1.11.2:
-  version "1.11.2"
-  resolved "https://registry.yarnpkg.com/turbo-linux-64/-/turbo-linux-64-1.11.2.tgz#55ef996d856cb397b9fb2855a554ccef1cee9dd7"
-  integrity sha512-Vzda/o/QyEske5CxLf0wcu7UUS+7zB90GgHZV4tyN+WZtoouTvbwuvZ3V6b5Wgd3OJ/JwWR0CXDK7Sf4VEMr7A==
+turbo-linux-64@1.11.3:
+  version "1.11.3"
+  resolved "https://registry.yarnpkg.com/turbo-linux-64/-/turbo-linux-64-1.11.3.tgz#86f56a91c05eea512a187079f7f7f860d8168be6"
+  integrity sha512-SvW7pvTVRGsqtSkII5w+wriZXvxqkluw5FO/MNAdFw0qmoov+PZ237+37/NgArqE3zVn1GX9P6nUx9VO+xcQAg==
 
-turbo-linux-arm64@1.11.2:
-  version "1.11.2"
-  resolved "https://registry.yarnpkg.com/turbo-linux-arm64/-/turbo-linux-arm64-1.11.2.tgz#64d6093c9a2f32f410624564fd10685c847d947e"
-  integrity sha512-bRLwovQRz0yxDZrM4tQEAYV0fBHEaTzUF0JZ8RG1UmZt/CqtpnUrJpYb1VK8hj1z46z9YehARpYCwQ2K0qU4yw==
+turbo-linux-arm64@1.11.3:
+  version "1.11.3"
+  resolved "https://registry.yarnpkg.com/turbo-linux-arm64/-/turbo-linux-arm64-1.11.3.tgz#0001dab6ded89154e2a5be21e87720daba953056"
+  integrity sha512-YhUfBi1deB3m+3M55X458J6B7RsIS7UtM3P1z13cUIhF+pOt65BgnaSnkHLwETidmhRh8Dl3GelaQGrB3RdCDw==
 
-turbo-windows-64@1.11.2:
-  version "1.11.2"
-  resolved "https://registry.yarnpkg.com/turbo-windows-64/-/turbo-windows-64-1.11.2.tgz#f4164be9c42796c86ca3929e27f1992a4310b9ed"
-  integrity sha512-LgTWqkHAKgyVuLYcEPxZVGPInTjjeCnN5KQMdJ4uQZ+xMDROvMFS2rM93iQl4ieDJgidwHCxxCxaU9u8c3d/Kg==
+turbo-windows-64@1.11.3:
+  version "1.11.3"
+  resolved "https://registry.yarnpkg.com/turbo-windows-64/-/turbo-windows-64-1.11.3.tgz#8d03c4fd8a46b81f2aecf60fc9845674c84d15a8"
+  integrity sha512-s+vEnuM2TiZuAUUUpmBHDr6vnNbJgj+5JYfnYmVklYs16kXh+EppafYQOAkcRIMAh7GjV3pLq5/uGqc7seZeHA==
 
-turbo-windows-arm64@1.11.2:
-  version "1.11.2"
-  resolved "https://registry.yarnpkg.com/turbo-windows-arm64/-/turbo-windows-arm64-1.11.2.tgz#ca1b4d7ac6fe8c931baef1a270ac07bbd924277b"
-  integrity sha512-829aVBU7IX0c/B4G7g1VI8KniAGutHhIupkYMgF6xPkYVev2G3MYe6DMS/vsLt9GGM9ulDtdWxWrH5P2ngK8IQ==
+turbo-windows-arm64@1.11.3:
+  version "1.11.3"
+  resolved "https://registry.yarnpkg.com/turbo-windows-arm64/-/turbo-windows-arm64-1.11.3.tgz#cc436d1462f5450e97f985ba6d8d447272bb97db"
+  integrity sha512-ZR5z5Zpc7cASwfdRAV5yNScCZBsgGSbcwiA/u3farCacbPiXsfoWUkz28iyrx21/TRW0bi6dbsB2v17swa8bjw==
 
-turbo@^1.11.2:
-  version "1.11.2"
-  resolved "https://registry.yarnpkg.com/turbo/-/turbo-1.11.2.tgz#7bae6df12c210e9b12973aad8f0e7b077039d4ce"
-  integrity sha512-jPC7LVQJzebs5gWf8FmEvsvXGNyKbN+O9qpvv98xpNaM59aS0/Irhd0H0KbcqnXfsz7ETlzOC3R+xFWthC4Z8A==
+turbo@^1.11.3:
+  version "1.11.3"
+  resolved "https://registry.yarnpkg.com/turbo/-/turbo-1.11.3.tgz#3bd823043585e1acfe125727bcecd4f91ef2103b"
+  integrity sha512-RCJOUFcFMQNIGKSjC9YmA5yVP1qtDiBA0Lv9VIgrXraI5Da1liVvl3VJPsoDNIR9eFMyA/aagx1iyj6UWem5hA==
   optionalDependencies:
-    turbo-darwin-64 "1.11.2"
-    turbo-darwin-arm64 "1.11.2"
-    turbo-linux-64 "1.11.2"
-    turbo-linux-arm64 "1.11.2"
-    turbo-windows-64 "1.11.2"
-    turbo-windows-arm64 "1.11.2"
+    turbo-darwin-64 "1.11.3"
+    turbo-darwin-arm64 "1.11.3"
+    turbo-linux-64 "1.11.3"
+    turbo-linux-arm64 "1.11.3"
+    turbo-windows-64 "1.11.3"
+    turbo-windows-arm64 "1.11.3"
 
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"