fix: issue search when searching with identifiers

.github/workflows/Update_Docker_Images.yml

@@ -39,10 +39,10 @@ jobs:
             type=ref,event=tag
 
       - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Release
-        id: metaSpace
+        id: metaDeploy
         uses: docker/metadata-action@v4.3.0
         with:
-          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-space
+          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-deploy
           tags: |
             type=ref,event=tag
 
@@ -87,7 +87,7 @@ jobs:
           file: ./space/Dockerfile.space
           platforms: linux/amd64
           push: true
-          tags: ${{ steps.metaSpace.outputs.tags }}
+          tags: ${{ steps.metaDeploy.outputs.tags }}
         env:
           DOCKER_BUILDKIT: 1
           DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}

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

@@ -1,77 +0,0 @@
-name: Create PR in Plane EE Repository to sync the changes
-
-on:
-  pull_request:
-    types:
-      - closed
-
-jobs:
-  create_pr:
-    # Only run the job when a PR is merged
-    if: github.event.pull_request.merged == true
-    runs-on: ubuntu-latest
-    permissions:
-      pull-requests: write
-      contents: read
-    steps:
-      - name: Check SOURCE_REPO
-        id: check_repo
-        env:
-          SOURCE_REPO: ${{ secrets.SOURCE_REPO_NAME }}
-        run: |
-          echo "::set-output name=is_correct_repo::$(if [[ "$SOURCE_REPO" == "makeplane/plane" ]]; then echo 'true'; else echo 'false'; fi)"
-
-      - name: Checkout Code
-        if: steps.check_repo.outputs.is_correct_repo == 'true'
-        uses: actions/checkout@v2
-        with:
-          persist-credentials: false
-          fetch-depth: 0
-
-      - name: Set up Branch Name
-        if: steps.check_repo.outputs.is_correct_repo == 'true'
-        run: |
-          echo "SOURCE_BRANCH_NAME=${{ github.head_ref }}" >> $GITHUB_ENV
-
-      - name: Setup GH CLI
-        if: steps.check_repo.outputs.is_correct_repo == 'true'
-        run: |
-          type -p curl >/dev/null || (sudo apt update && sudo apt install curl -y)
-          curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg
-          sudo chmod go+r /usr/share/keyrings/githubcli-archive-keyring.gpg
-          echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null
-          sudo apt update
-          sudo apt install gh -y
-
-      - name: Create Pull Request
-        if: steps.check_repo.outputs.is_correct_repo == 'true'
-        env:
-          GH_TOKEN: ${{ secrets.ACCESS_TOKEN }}
-        run: |
-          TARGET_REPO="${{ secrets.TARGET_REPO_NAME }}"
-          TARGET_BRANCH="${{ secrets.TARGET_REPO_BRANCH }}"
-          SOURCE_BRANCH="${{ env.SOURCE_BRANCH_NAME }}"
-
-          git checkout $SOURCE_BRANCH
-          git remote add target "https://$GH_TOKEN@github.com/$TARGET_REPO.git"
-          git push target $SOURCE_BRANCH:$SOURCE_BRANCH
-
-          PR_TITLE="${{ github.event.pull_request.title }}"
-          PR_BODY="${{ github.event.pull_request.body }}"
-
-          # Remove double quotes
-          PR_TITLE_CLEANED="${PR_TITLE//\"/}"
-          PR_BODY_CLEANED="${PR_BODY//\"/}"
-
-          # Construct PR_BODY_CONTENT using a here-document
-          PR_BODY_CONTENT=$(cat <<EOF
-          $PR_BODY_CLEANED
-          EOF
-          )
-
-          gh pr create \
-            --base $TARGET_BRANCH \
-            --head $SOURCE_BRANCH \
-            --title "[SYNC] $PR_TITLE_CLEANED" \
-            --body "$PR_BODY_CONTENT" \
-            --repo $TARGET_REPO

README.md

@@ -54,7 +54,7 @@ chmod +x setup.sh
 - Run setup.sh
 
 ```bash
-./setup.sh
+./setup.sh http://localhost
 ```
 
 > If running in a cloud env replace localhost with public facing IP address of the VM

apiserver/.env.example

@@ -1,7 +1,7 @@
 # Backend
 # Debug value for api server use it as 0 for production use
 DEBUG=0
-DJANGO_SETTINGS_MODULE="plane.settings.production"
+DJANGO_SETTINGS_MODULE="plane.settings.selfhosted"
 
 # Error logs
 SENTRY_DSN=""
@@ -59,14 +59,3 @@ DEFAULT_PASSWORD="password123"
 
 # SignUps
 ENABLE_SIGNUP="1"
-
-
-# Enable Email/Password Signup
-ENABLE_EMAIL_PASSWORD="1"
-
-# Enable Magic link Login
-ENABLE_MAGIC_LINK_LOGIN="0"
-
-# Email redirections and minio domain settings
-WEB_URL="http://localhost"
-

apiserver/plane/api/permissions/workspace.py

@@ -58,17 +58,8 @@ class WorkspaceEntityPermission(BasePermission):
         if request.user.is_anonymous:
             return False
 
-        ## Safe Methods -> Handle the filtering logic in queryset
-        if request.method in SAFE_METHODS:
-            return WorkspaceMember.objects.filter(
-                workspace__slug=view.workspace_slug,
-                member=request.user,
-            ).exists()
-
         return WorkspaceMember.objects.filter(
-            member=request.user,
-            workspace__slug=view.workspace_slug,
-            role__in=[Owner, Admin],
+            member=request.user, workspace__slug=view.workspace_slug
         ).exists()
 
 

apiserver/plane/api/urls.py

@@ -70,7 +70,6 @@ from plane.api.views import (
     ProjectIdentifierEndpoint,
     ProjectFavoritesViewSet,
     LeaveProjectEndpoint,
-    ProjectPublicCoverImagesEndpoint,
     ## End Projects
     # Issues
     IssueViewSet,
@@ -151,11 +150,12 @@ from plane.api.views import (
     GlobalSearchEndpoint,
     IssueSearchEndpoint,
     ## End Search
-    # External
+    # Gpt
     GPTIntegrationEndpoint,
+    ## End Gpt
+    # Release Notes
     ReleaseNotesEndpoint,
-    UnsplashEndpoint,
-    ## End External
+    ## End Release Notes
     # Inbox
     InboxViewSet,
     InboxIssueViewSet,
@@ -186,9 +186,6 @@ from plane.api.views import (
     ## Exporter
     ExportIssuesEndpoint,
     ## End Exporter
-    # Configuration
-    ConfigurationEndpoint,
-    ## End Configuration
 )
 
 
@@ -576,11 +573,6 @@ urlpatterns = [
         LeaveProjectEndpoint.as_view(),
         name="project",
     ),
-    path(
-        "project-covers/",
-        ProjectPublicCoverImagesEndpoint.as_view(),
-        name="project-covers",
-    ),
     # End Projects
     #  States
     path(
@@ -1454,23 +1446,20 @@ urlpatterns = [
         name="project-issue-search",
     ),
     ## End Search
-    # External
+    # Gpt
     path(
         "workspaces/<str:slug>/projects/<uuid:project_id>/ai-assistant/",
         GPTIntegrationEndpoint.as_view(),
         name="importer",
     ),
+    ## End Gpt
+    # Release Notes
     path(
         "release-notes/",
         ReleaseNotesEndpoint.as_view(),
         name="release-notes",
     ),
-    path(
-        "unsplash/",
-        UnsplashEndpoint.as_view(),
-        name="release-notes",
-    ),
-    ## End External
+    ## End Release Notes
     # Inbox
     path(
         "workspaces/<str:slug>/projects/<uuid:project_id>/inboxes/",
@@ -1739,11 +1728,4 @@ urlpatterns = [
         name="workspace-project-boards",
     ),
     ## End Public Boards
-    # Configuration
-    path(
-        "configs/",
-        ConfigurationEndpoint.as_view(),
-        name="configuration",
-    ),
-    ## End Configuration
 ]

apiserver/plane/api/views/__init__.py

@@ -17,7 +17,6 @@ from .project import (
     ProjectMemberEndpoint,
     WorkspaceProjectDeployBoardEndpoint,
     LeaveProjectEndpoint,
-    ProjectPublicCoverImagesEndpoint,
 )
 from .user import (
     UserEndpoint,
@@ -148,13 +147,16 @@ from .page import (
 from .search import GlobalSearchEndpoint, IssueSearchEndpoint
 
 
-from .external import GPTIntegrationEndpoint, ReleaseNotesEndpoint, UnsplashEndpoint
+from .gpt import GPTIntegrationEndpoint
 
 from .estimate import (
     ProjectEstimatePointEndpoint,
     BulkEstimatePointEndpoint,
 )
 
+
+from .release import ReleaseNotesEndpoint
+
 from .inbox import InboxViewSet, InboxIssueViewSet, InboxIssuePublicViewSet
 
 from .analytic import (
@@ -167,6 +169,4 @@ from .analytic import (
 
 from .notification import NotificationViewSet, UnreadNotificationEndpoint, MarkAllReadNotificationViewSet
 
-from .exporter import ExportIssuesEndpoint
-
-from .config import ConfigurationEndpoint
+from .exporter import ExportIssuesEndpoint

apiserver/plane/api/views/config.py

@@ -1,40 +0,0 @@
-# Python imports
-import os
-
-# Django imports
-from django.conf import settings
-
-# Third party imports
-from rest_framework.permissions import AllowAny
-from rest_framework import status
-from rest_framework.response import Response
-from sentry_sdk import capture_exception
-
-# Module imports
-from .base import BaseAPIView
-
-
-class ConfigurationEndpoint(BaseAPIView):
-    permission_classes = [
-        AllowAny,
-    ]
-
-    def get(self, request):
-        try:
-            data = {}
-            data["google"] = os.environ.get("GOOGLE_CLIENT_ID", None)
-            data["github"] = os.environ.get("GITHUB_CLIENT_ID", None)
-            data["github_app_name"] = os.environ.get("GITHUB_APP_NAME", None)
-            data["magic_login"] = (
-                bool(settings.EMAIL_HOST_USER) and bool(settings.EMAIL_HOST_PASSWORD)
-            ) and os.environ.get("ENABLE_MAGIC_LINK_LOGIN", "0") == "1"
-            data["email_password_login"] = (
-                os.environ.get("ENABLE_EMAIL_PASSWORD", "0") == "1"
-            )
-            return Response(data, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )

apiserver/plane/api/views/gpt.py

@@ -2,10 +2,9 @@
 import requests
 
 # Third party imports
-import openai
 from rest_framework.response import Response
 from rest_framework import status
-from rest_framework.permissions import AllowAny
+import openai
 from sentry_sdk import capture_exception
 
 # Django imports
@@ -16,7 +15,6 @@ from .base import BaseAPIView
 from plane.api.permissions import ProjectEntityPermission
 from plane.db.models import Workspace, Project
 from plane.api.serializers import ProjectLiteSerializer, WorkspaceLiteSerializer
-from plane.utils.integrations.github import get_release_notes
 
 
 class GPTIntegrationEndpoint(BaseAPIView):
@@ -75,44 +73,3 @@ class GPTIntegrationEndpoint(BaseAPIView):
                 {"error": "Something went wrong please try again later"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
-
-
-class ReleaseNotesEndpoint(BaseAPIView):
-    def get(self, request):
-        try:
-            release_notes = get_release_notes()
-            return Response(release_notes, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
-
-class UnsplashEndpoint(BaseAPIView):
-
-    def get(self, request):
-        try:
-            query = request.GET.get("query", False)
-            page = request.GET.get("page", 1)
-            per_page = request.GET.get("per_page", 20)
-
-            url = (
-                f"https://api.unsplash.com/search/photos/?client_id={settings.UNSPLASH_ACCESS_KEY}&query={query}&page=${page}&per_page={per_page}"
-                if query
-                else f"https://api.unsplash.com/photos/?client_id={settings.UNSPLASH_ACCESS_KEY}&page={page}&per_page={per_page}"
-            )
-
-            headers = {
-                "Content-Type": "application/json",
-            }
-
-            resp = requests.get(url=url, headers=headers)
-            return Response(resp.json(), status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )

apiserver/plane/api/views/inbox.py

@@ -370,11 +370,6 @@ class InboxIssueViewSet(BaseViewSet):
             if project_member.role <= 10 and str(inbox_issue.created_by_id) != str(request.user.id):
                 return Response({"error": "You cannot delete inbox issue"}, status=status.HTTP_400_BAD_REQUEST)
 
-            # Check the issue status
-            if inbox_issue.status in [-2, -1, 0, 2]:
-                # Delete the issue also
-                Issue.objects.filter(workspace__slug=slug, project_id=project_id, pk=inbox_issue.issue_id).delete() 
-
             inbox_issue.delete()
             return Response(status=status.HTTP_204_NO_CONTENT)
         except InboxIssue.DoesNotExist:

apiserver/plane/api/views/issue.py

@@ -24,6 +24,7 @@ from django.core.serializers.json import DjangoJSONEncoder
 from django.utils.decorators import method_decorator
 from django.views.decorators.gzip import gzip_page
 from django.db import IntegrityError
+from django.conf import settings
 from django.db import IntegrityError
 
 # Third Party imports
@@ -57,6 +58,7 @@ from plane.api.serializers import (
     IssuePublicSerializer,
 )
 from plane.api.permissions import (
+    WorkspaceEntityPermission,
     ProjectEntityPermission,
     WorkSpaceAdminPermission,
     ProjectMemberPermission,
@@ -712,18 +714,10 @@ class LabelViewSet(BaseViewSet):
         ProjectMemberPermission,
     ]
 
-    def create(self, request, slug, project_id):
-        try:
-            serializer = LabelSerializer(data=request.data)
-            if serializer.is_valid():
-                serializer.save(project_id=project_id)
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except IntegrityError:
-            return Response({"error": "Label with the same name already exists in the project"}, status=status.HTTP_400_BAD_REQUEST)
-        except Exception as e:
-            capture_exception(e)
-            return Response({"error": "Something went wrong please try again later"}, status=status.HTTP_400_BAD_REQUEST)
+    def perform_create(self, serializer):
+        serializer.save(
+            project_id=self.kwargs.get("project_id"),
+        )
 
     def get_queryset(self):
         return self.filter_queryset(
@@ -2406,6 +2400,27 @@ class IssueDraftViewSet(BaseViewSet):
     ]
     serializer_class = IssueFlatSerializer
     model = Issue
+
+
+    def perform_update(self, serializer):
+        requested_data = json.dumps(self.request.data, cls=DjangoJSONEncoder)
+        current_instance = (
+            self.get_queryset().filter(pk=self.kwargs.get("pk", None)).first()
+        )
+        if current_instance is not None:
+            issue_activity.delay(
+                type="issue_draft.activity.updated",
+                requested_data=requested_data,
+                actor_id=str(self.request.user.id),
+                issue_id=str(self.kwargs.get("pk", None)),
+                project_id=str(self.kwargs.get("project_id", None)),
+                current_instance=json.dumps(
+                    IssueSerializer(current_instance).data, cls=DjangoJSONEncoder
+                ),
+                epoch=int(timezone.now().timestamp())
+            )
+
+        return super().perform_update(serializer)
     
 
     def perform_destroy(self, instance):
@@ -2599,47 +2614,6 @@ class IssueDraftViewSet(BaseViewSet):
             )
 
 
-    def partial_update(self, request, slug, project_id, pk):
-        try:
-            issue = Issue.objects.get(
-                workspace__slug=slug, project_id=project_id, pk=pk
-            )
-            serializer = IssueSerializer(
-                issue, data=request.data, partial=True
-            )
-
-            if serializer.is_valid():
-                if(request.data.get("is_draft") is not None and not request.data.get("is_draft")):
-                    serializer.save(created_at=timezone.now(), updated_at=timezone.now())
-                else:
-                    serializer.save()
-                issue_activity.delay(
-                    type="issue_draft.activity.updated",
-                    requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
-                    actor_id=str(self.request.user.id),
-                    issue_id=str(self.kwargs.get("pk", None)),
-                    project_id=str(self.kwargs.get("project_id", None)),
-                    current_instance=json.dumps(
-                        IssueSerializer(issue).data,
-                        cls=DjangoJSONEncoder,
-                    ),
-                    epoch=int(timezone.now().timestamp())
-                )
-                return Response(serializer.data, status=status.HTTP_200_OK)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except Issue.DoesNotExist:
-            return Response(
-                {"error": "Issue does not exists"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
-
     def retrieve(self, request, slug, project_id, pk=None):
         try:
             issue = Issue.objects.get(

apiserver/plane/api/views/project.py

@@ -1,6 +1,5 @@
 # Python imports
 import jwt
-import boto3
 from datetime import datetime
 
 # Django imports
@@ -496,7 +495,7 @@ class ProjectMemberViewSet(BaseViewSet):
     serializer_class = ProjectMemberAdminSerializer
     model = ProjectMember
     permission_classes = [
-        ProjectMemberPermission,
+        ProjectBasePermission,
     ]
 
     search_fields = [
@@ -618,8 +617,7 @@ class ProjectMemberViewSet(BaseViewSet):
             return Response(status=status.HTTP_204_NO_CONTENT)
         except ProjectMember.DoesNotExist:
             return Response(
-                {"error": "Project Member does not exist"},
-                status=status.HTTP_400_BAD_REQUEST,
+                {"error": "Project Member does not exist"}, status=status.HTTP_400_BAD_REQUEST
             )
         except Exception as e:
             capture_exception(e)
@@ -1211,38 +1209,3 @@ class LeaveProjectEndpoint(BaseAPIView):
                 {"error": "Something went wrong please try again later"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
-
-
-class ProjectPublicCoverImagesEndpoint(BaseAPIView):
-    permission_classes = [
-        AllowAny,
-    ]
-
-    def get(self, request):
-        try:
-            files = []
-            s3 = boto3.client(
-                "s3",
-                aws_access_key_id=settings.AWS_ACCESS_KEY_ID,
-                aws_secret_access_key=settings.AWS_SECRET_ACCESS_KEY,
-            )
-            params = {
-                "Bucket": settings.AWS_S3_BUCKET_NAME,
-                "Prefix": "static/project-cover/",
-            }
-
-            response = s3.list_objects_v2(**params)
-            # Extracting file keys from the response
-            if "Contents" in response:
-                for content in response["Contents"]:
-                    if not content["Key"].endswith(
-                        "/"
-                    ):  # This line ensures we're only getting files, not "sub-folders"
-                        files.append(
-                            f"https://{settings.AWS_S3_BUCKET_NAME}.s3.{settings.AWS_REGION}.amazonaws.com/{content['Key']}"
-                        )
-
-            return Response(files, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response([], status=status.HTTP_200_OK)

apiserver/plane/api/views/release.py

@@ -0,0 +1,21 @@
+# Third party imports
+from rest_framework.response import Response
+from rest_framework import status
+from sentry_sdk import capture_exception
+
+# Module imports
+from .base import BaseAPIView
+from plane.utils.integrations.github import get_release_notes
+
+
+class ReleaseNotesEndpoint(BaseAPIView):
+    def get(self, request):
+        try:
+            release_notes = get_release_notes()
+            return Response(release_notes, status=status.HTTP_200_OK)
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )

apiserver/plane/api/views/search.py

@@ -49,16 +49,24 @@ class GlobalSearchEndpoint(BaseAPIView):
     def filter_issues(self, query, slug, project_id, workspace_search):
         fields = ["name", "sequence_id", "project__identifier"]
         q = Q()
+        q_and = Q()
         for field in fields:
-            if field == "sequence_id":
-                sequences = re.findall(r"\d+\.\d+|\d+", query)
-                for sequence_id in sequences:
-                    q |= Q(**{"sequence_id": sequence_id})
+            if field in ["sequence_id", "project__identifier"]:
+                # Condition to check sequence
+                if field == "sequence_id":
+                    sequences = re.findall(r"\d+\.\d+|\d+", query)
+                    for sequence_id in sequences:
+                        q_and &= Q(**{"sequence_id": int(sequence_id)})
+                # Condition to check identifier
+                if field == "project__identifier":
+                    identifiers = query.split("-")
+                    if identifiers:
+                        q_and &= Q(**{"project__identifier": identifiers[0]})
             else:
                 q |= Q(**{f"{field}__icontains": query})
-
+        final_q = q_and | q
         issues = Issue.issue_objects.filter(
-            q,
+            final_q,
             project__project_projectmember__member=self.request.user,
             workspace__slug=slug,
         )

apiserver/plane/api/views/view.py

@@ -61,7 +61,7 @@ class GlobalViewViewSet(BaseViewSet):
             .get_queryset()
             .filter(workspace__slug=self.kwargs.get("slug"))
             .select_related("workspace")
-            .order_by(self.request.GET.get("order_by", "-created_at"))
+            .order_by("-created_at")
             .distinct()
         )
 

apiserver/plane/api/views/workspace.py

@@ -1197,7 +1197,7 @@ class WorkspaceUserActivityEndpoint(BaseAPIView):
             projects = request.query_params.getlist("project", [])
 
             queryset = IssueActivity.objects.filter(
-                ~Q(field__in=["comment", "vote", "reaction", "draft"]),
+                ~Q(field__in=["comment", "vote", "reaction"]),
                 workspace__slug=slug,
                 project__project_projectmember__member=request.user,
                 actor=user_id,

apiserver/plane/bgtasks/issue_activites_task.py

@@ -1389,7 +1389,7 @@ def issue_activity(
             ):
                 issue_subscribers = issue_subscribers + [issue.created_by_id]
 
-            for subscriber in  list(set(issue_subscribers)):
+            for subscriber in issue_subscribers:
                 for issue_activity in issue_activities_created:
                     bulk_notifications.append(
                         Notification(

apiserver/plane/db/migrations/0043_alter_analyticview_created_by_and_more.py

@@ -33,8 +33,9 @@ def create_issue_relation(apps, schema_editor):
 def update_issue_priority_choice(apps, schema_editor):
     IssueModel = apps.get_model("db", "Issue")
     updated_issues = []
-    for obj in IssueModel.objects.filter(priority=None):
-        obj.priority = "none"
+    for obj in IssueModel.objects.all():
+        if obj.priority is None:
+            obj.priority = "none"
         updated_issues.append(obj)
     IssueModel.objects.bulk_update(updated_issues, ["priority"], batch_size=100)
 

apiserver/plane/db/migrations/0045_auto_20230915_0655.py

@@ -0,0 +1,42 @@
+# Generated by Django 4.2.3 on 2023-09-15 06:55
+
+from django.db import migrations, models
+from django.conf import settings
+import django.db.models.deletion
+import uuid
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("db", "0044_auto_20230913_0709"),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name="GlobalView",
+            fields=[
+                ("created_at", models.DateTimeField(auto_now_add=True, verbose_name="Created At"),),
+                ("updated_at", models.DateTimeField(auto_now=True, verbose_name="Last Modified At"),),
+                ("id", models.UUIDField(db_index=True, default=uuid.uuid4, editable=False, primary_key=True, serialize=False, unique=True,),),
+                ("name", models.CharField(max_length=255, verbose_name="View Name")),
+                ("description", models.TextField(blank=True, verbose_name="View Description"),),
+                ("query", models.JSONField(verbose_name="View Query")),
+                ("access", models.PositiveSmallIntegerField(choices=[(0, "Private"), (1, "Public")], default=1),),
+                ("query_data", models.JSONField(default=dict)),
+                ("created_by", models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name="%(class)s_created_by", to=settings.AUTH_USER_MODEL, verbose_name="Created By",),),
+                ("updated_by", models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name="%(class)s_updated_by", to=settings.AUTH_USER_MODEL, verbose_name="Last Modified By",),),
+                ("workspace", models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name="global_views", to="db.workspace",),),
+            ],
+            options={
+                "verbose_name": "Global View",
+                "verbose_name_plural": "Global Views",
+                "db_table": "global_views",
+                "ordering": ("-created_at",),
+            },
+        ),
+        migrations.AddField(
+            model_name="issueactivity",
+            name="epoch",
+            field=models.FloatField(null=True),
+        ),    
+    ]

apiserver/plane/db/migrations/0045_issueactivity_epoch_workspacemember_issue_props_and_more.py

@@ -1,79 +0,0 @@
-# Generated by Django 4.2.5 on 2023-09-29 10:14
-
-from django.conf import settings
-from django.db import migrations, models
-import django.db.models.deletion
-import plane.db.models.workspace
-import uuid
-
-
-def update_issue_activity_priority(apps, schema_editor):
-    IssueActivity = apps.get_model("db", "IssueActivity")
-    updated_issue_activity = []
-    for obj in IssueActivity.objects.filter(field="priority"):
-        # Set the old and new value to none if it is empty for Priority
-        obj.new_value = obj.new_value or "none"
-        obj.old_value = obj.old_value or "none"
-        updated_issue_activity.append(obj)
-    IssueActivity.objects.bulk_update(
-        updated_issue_activity,
-        ["new_value", "old_value"],
-        batch_size=2000,
-    )
-
-def update_issue_activity_blocked(apps, schema_editor):
-    IssueActivity = apps.get_model("db", "IssueActivity")
-    updated_issue_activity = []
-    for obj in IssueActivity.objects.filter(field="blocks"):
-        # Set the field to blocked_by
-        obj.field = "blocked_by"
-        updated_issue_activity.append(obj)
-    IssueActivity.objects.bulk_update(
-        updated_issue_activity,
-        ["field"],
-        batch_size=1000,
-    )
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('db', '0044_auto_20230913_0709'),
-    ]
-
-    operations = [
-        migrations.CreateModel(
-            name='GlobalView',
-            fields=[
-                ('created_at', models.DateTimeField(auto_now_add=True, verbose_name='Created At')),
-                ('updated_at', models.DateTimeField(auto_now=True, verbose_name='Last Modified At')),
-                ('id', models.UUIDField(db_index=True, default=uuid.uuid4, editable=False, primary_key=True, serialize=False, unique=True)),
-                ('name', models.CharField(max_length=255, verbose_name='View Name')),
-                ('description', models.TextField(blank=True, verbose_name='View Description')),
-                ('query', models.JSONField(verbose_name='View Query')),
-                ('access', models.PositiveSmallIntegerField(choices=[(0, 'Private'), (1, 'Public')], default=1)),
-                ('query_data', models.JSONField(default=dict)),
-                ('sort_order', models.FloatField(default=65535)),
-                ('created_by', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='%(class)s_created_by', to=settings.AUTH_USER_MODEL, verbose_name='Created By')),
-                ('updated_by', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='%(class)s_updated_by', to=settings.AUTH_USER_MODEL, verbose_name='Last Modified By')),
-                ('workspace', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='global_views', to='db.workspace')),
-            ],
-            options={
-                'verbose_name': 'Global View',
-                'verbose_name_plural': 'Global Views',
-                'db_table': 'global_views',
-                'ordering': ('-created_at',),
-            },
-        ),
-        migrations.AddField(
-            model_name='workspacemember',
-            name='issue_props',
-            field=models.JSONField(default=plane.db.models.workspace.get_issue_props),
-        ),
-        migrations.AddField(
-            model_name='issueactivity',
-            name='epoch',
-            field=models.FloatField(null=True),
-        ),
-        migrations.RunPython(update_issue_activity_priority),
-        migrations.RunPython(update_issue_activity_blocked),
-    ]

apiserver/plane/db/migrations/0046_auto_20230926_1015.py

@@ -0,0 +1,26 @@
+# Generated by Django 4.2.5 on 2023-09-26 10:15
+
+from django.db import migrations
+
+
+def update_issue_activity(apps, schema_editor):
+    IssueActivity = apps.get_model("db", "IssueActivity")
+    updated_issue_activity = []
+    for obj in IssueActivity.objects.all():
+        obj.epoch = int(obj.created_at.timestamp())
+        updated_issue_activity.append(obj)
+    IssueActivity.objects.bulk_update(
+        updated_issue_activity,
+        ["epoch"],
+        batch_size=5000,
+    )
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0045_auto_20230915_0655'),
+    ]
+
+    operations = [
+         migrations.RunPython(update_issue_activity),
+    ]

apiserver/plane/db/migrations/0047_auto_20230926_1029.py

@@ -0,0 +1,44 @@
+# Generated by Django 4.2.5 on 2023-09-26 10:29
+
+from django.db import migrations
+
+
+def update_issue_activity_priority(apps, schema_editor):
+    IssueActivity = apps.get_model("db", "IssueActivity")
+    updated_issue_activity = []
+    for obj in IssueActivity.objects.filter(field="priority"):
+        # Set the old and new value to none if it is empty for Priority
+        obj.new_value = obj.new_value or "none"
+        obj.old_value = obj.old_value or "none"
+        updated_issue_activity.append(obj)
+    IssueActivity.objects.bulk_update(
+        updated_issue_activity,
+        ["new_value", "old_value"],
+        batch_size=1000,
+    )
+
+def update_issue_activity_blocked(apps, schema_editor):
+    IssueActivity = apps.get_model("db", "IssueActivity")
+    updated_issue_activity = []
+    for obj in IssueActivity.objects.filter(field="blocks"):
+        # Set the field to blocked_by
+        obj.field = "blocked_by"
+        updated_issue_activity.append(obj)
+    IssueActivity.objects.bulk_update(
+        updated_issue_activity,
+        ["field"],
+        batch_size=1000,
+    )
+
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0046_auto_20230926_1015'),
+    ]
+
+    operations = [
+        migrations.RunPython(update_issue_activity_priority),
+        migrations.RunPython(update_issue_activity_blocked),
+    ]

apiserver/plane/db/models/view.py

@@ -17,23 +17,12 @@ class GlobalView(BaseModel):
         default=1, choices=((0, "Private"), (1, "Public"))
     )
     query_data = models.JSONField(default=dict)
-    sort_order = models.FloatField(default=65535)
 
     class Meta:
         verbose_name = "Global View"
         verbose_name_plural = "Global Views"
         db_table = "global_views"
         ordering = ("-created_at",)
-    
-    def save(self, *args, **kwargs):
-        if self._state.adding:
-            largest_sort_order = GlobalView.objects.filter(
-                workspace=self.workspace
-            ).aggregate(largest=models.Max("sort_order"))["largest"]
-            if largest_sort_order is not None:
-                self.sort_order = largest_sort_order + 10000
-
-        super(GlobalView, self).save(*args, **kwargs)
 
     def __str__(self):
         """Return name of the View"""

apiserver/plane/db/models/workspace.py

@@ -29,7 +29,7 @@ def get_default_props():
         },
         "display_filters": {
             "group_by": None,
-            "order_by": "-created_at",
+            "order_by": '-created_at',
             "type": None,
             "sub_issue": True,
             "show_empty_groups": True,
@@ -54,15 +54,6 @@ def get_default_props():
     }
 
 
-def get_issue_props():
-    return {
-        "subscribed": True,
-        "assigned": True,
-        "created": True,
-        "all_issues": True,
-    }
-
-
 class Workspace(BaseModel):
     name = models.CharField(max_length=80, verbose_name="Workspace Name")
     logo = models.URLField(verbose_name="Logo", blank=True, null=True)
@@ -98,7 +89,6 @@ class WorkspaceMember(BaseModel):
     company_role = models.TextField(null=True, blank=True)
     view_props = models.JSONField(default=get_default_props)
     default_props = models.JSONField(default=get_default_props)
-    issue_props = models.JSONField(default=get_issue_props)
 
     class Meta:
         unique_together = ["workspace", "member"]

apiserver/plane/settings/local.py

@@ -114,6 +114,3 @@ CELERY_BROKER_URL = os.environ.get("REDIS_URL")
 GITHUB_ACCESS_TOKEN = os.environ.get("GITHUB_ACCESS_TOKEN", False)
 
 ENABLE_SIGNUP = os.environ.get("ENABLE_SIGNUP", "1") == "1"
-
-# Unsplash Access key
-UNSPLASH_ACCESS_KEY = os.environ.get("UNSPLASH_ACCESS_KEY")

apiserver/plane/settings/production.py

@@ -7,7 +7,6 @@ import dj_database_url
 import sentry_sdk
 from sentry_sdk.integrations.django import DjangoIntegration
 from sentry_sdk.integrations.redis import RedisIntegration
-from urllib.parse import urlparse
 
 from .common import *  # noqa
 
@@ -90,112 +89,90 @@ if bool(os.environ.get("SENTRY_DSN", False)):
         profiles_sample_rate=1.0,
     )
 
-if DOCKERIZED and USE_MINIO:
-    INSTALLED_APPS += ("storages",)
-    STORAGES["default"] = {"BACKEND": "storages.backends.s3boto3.S3Boto3Storage"}
-    # The AWS access key to use.
-    AWS_ACCESS_KEY_ID = os.environ.get("AWS_ACCESS_KEY_ID", "access-key")
-    # The AWS secret access key to use.
-    AWS_SECRET_ACCESS_KEY = os.environ.get("AWS_SECRET_ACCESS_KEY", "secret-key")
-    # The name of the bucket to store files in.
-    AWS_STORAGE_BUCKET_NAME = os.environ.get("AWS_S3_BUCKET_NAME", "uploads")
-    # The full URL to the S3 endpoint. Leave blank to use the default region URL.
-    AWS_S3_ENDPOINT_URL = os.environ.get(
-        "AWS_S3_ENDPOINT_URL", "http://plane-minio:9000"
-    )
-    # Default permissions
-    AWS_DEFAULT_ACL = "public-read"
-    AWS_QUERYSTRING_AUTH = False
-    AWS_S3_FILE_OVERWRITE = False
+# The AWS region to connect to.
+AWS_REGION = os.environ.get("AWS_REGION", "")
 
-    # Custom Domain settings
-    parsed_url = urlparse(os.environ.get("WEB_URL", "http://localhost"))
-    AWS_S3_CUSTOM_DOMAIN = f"{parsed_url.netloc}/{AWS_STORAGE_BUCKET_NAME}"
-    AWS_S3_URL_PROTOCOL = f"{parsed_url.scheme}:"
-else:
-    # The AWS region to connect to.
-    AWS_REGION = os.environ.get("AWS_REGION", "")
+# The AWS access key to use.
+AWS_ACCESS_KEY_ID = os.environ.get("AWS_ACCESS_KEY_ID", "")
 
-    # The AWS access key to use.
-    AWS_ACCESS_KEY_ID = os.environ.get("AWS_ACCESS_KEY_ID", "")
+# The AWS secret access key to use.
+AWS_SECRET_ACCESS_KEY = os.environ.get("AWS_SECRET_ACCESS_KEY", "")
 
-    # The AWS secret access key to use.
-    AWS_SECRET_ACCESS_KEY = os.environ.get("AWS_SECRET_ACCESS_KEY", "")
+# The optional AWS session token to use.
+# AWS_SESSION_TOKEN = ""
 
-    # The optional AWS session token to use.
-    # AWS_SESSION_TOKEN = ""
+# The name of the bucket to store files in.
+AWS_S3_BUCKET_NAME = os.environ.get("AWS_S3_BUCKET_NAME")
 
-    # The name of the bucket to store files in.
-    AWS_S3_BUCKET_NAME = os.environ.get("AWS_S3_BUCKET_NAME")
+# How to construct S3 URLs ("auto", "path", "virtual").
+AWS_S3_ADDRESSING_STYLE = "auto"
 
-    # How to construct S3 URLs ("auto", "path", "virtual").
-    AWS_S3_ADDRESSING_STYLE = "auto"
+# The full URL to the S3 endpoint. Leave blank to use the default region URL.
+AWS_S3_ENDPOINT_URL = os.environ.get("AWS_S3_ENDPOINT_URL", "")
 
-    # The full URL to the S3 endpoint. Leave blank to use the default region URL.
-    AWS_S3_ENDPOINT_URL = os.environ.get("AWS_S3_ENDPOINT_URL", "")
+# A prefix to be applied to every stored file. This will be joined to every filename using the "/" separator.
+AWS_S3_KEY_PREFIX = ""
 
-    # A prefix to be applied to every stored file. This will be joined to every filename using the "/" separator.
-    AWS_S3_KEY_PREFIX = ""
+# Whether to enable authentication for stored files. If True, then generated URLs will include an authentication
+# token valid for `AWS_S3_MAX_AGE_SECONDS`. If False, then generated URLs will not include an authentication token,
+# and their permissions will be set to "public-read".
+AWS_S3_BUCKET_AUTH = False
 
-    # Whether to enable authentication for stored files. If True, then generated URLs will include an authentication
-    # token valid for `AWS_S3_MAX_AGE_SECONDS`. If False, then generated URLs will not include an authentication token,
-    # and their permissions will be set to "public-read".
-    AWS_S3_BUCKET_AUTH = False
+# How long generated URLs are valid for. This affects the expiry of authentication tokens if `AWS_S3_BUCKET_AUTH`
+# is True. It also affects the "Cache-Control" header of the files.
+# Important: Changing this setting will not affect existing files.
+AWS_S3_MAX_AGE_SECONDS = 60 * 60  # 1 hours.
 
-    # How long generated URLs are valid for. This affects the expiry of authentication tokens if `AWS_S3_BUCKET_AUTH`
-    # is True. It also affects the "Cache-Control" header of the files.
-    # Important: Changing this setting will not affect existing files.
-    AWS_S3_MAX_AGE_SECONDS = 60 * 60  # 1 hours.
+# A URL prefix to be used for generated URLs. This is useful if your bucket is served through a CDN. This setting
+# cannot be used with `AWS_S3_BUCKET_AUTH`.
+AWS_S3_PUBLIC_URL = ""
 
-    # A URL prefix to be used for generated URLs. This is useful if your bucket is served through a CDN. This setting
-    # cannot be used with `AWS_S3_BUCKET_AUTH`.
-    AWS_S3_PUBLIC_URL = ""
+# If True, then files will be stored with reduced redundancy. Check the S3 documentation and make sure you
+# understand the consequences before enabling.
+# Important: Changing this setting will not affect existing files.
+AWS_S3_REDUCED_REDUNDANCY = False
 
-    # If True, then files will be stored with reduced redundancy. Check the S3 documentation and make sure you
-    # understand the consequences before enabling.
-    # Important: Changing this setting will not affect existing files.
-    AWS_S3_REDUCED_REDUNDANCY = False
+# The Content-Disposition header used when the file is downloaded. This can be a string, or a function taking a
+# single `name` argument.
+# Important: Changing this setting will not affect existing files.
+AWS_S3_CONTENT_DISPOSITION = ""
 
-    # The Content-Disposition header used when the file is downloaded. This can be a string, or a function taking a
-    # single `name` argument.
-    # Important: Changing this setting will not affect existing files.
-    AWS_S3_CONTENT_DISPOSITION = ""
+# The Content-Language header used when the file is downloaded. This can be a string, or a function taking a
+# single `name` argument.
+# Important: Changing this setting will not affect existing files.
+AWS_S3_CONTENT_LANGUAGE = ""
 
-    # The Content-Language header used when the file is downloaded. This can be a string, or a function taking a
-    # single `name` argument.
-    # Important: Changing this setting will not affect existing files.
-    AWS_S3_CONTENT_LANGUAGE = ""
+# A mapping of custom metadata for each file. Each value can be a string, or a function taking a
+# single `name` argument.
+# Important: Changing this setting will not affect existing files.
+AWS_S3_METADATA = {}
 
-    # A mapping of custom metadata for each file. Each value can be a string, or a function taking a
-    # single `name` argument.
-    # Important: Changing this setting will not affect existing files.
-    AWS_S3_METADATA = {}
+# If True, then files will be stored using AES256 server-side encryption.
+# If this is a string value (e.g., "aws:kms"), that encryption type will be used.
+# Otherwise, server-side encryption is not be enabled.
+# Important: Changing this setting will not affect existing files.
+AWS_S3_ENCRYPT_KEY = False
 
-    # If True, then files will be stored using AES256 server-side encryption.
-    # If this is a string value (e.g., "aws:kms"), that encryption type will be used.
-    # Otherwise, server-side encryption is not be enabled.
-    # Important: Changing this setting will not affect existing files.
-    AWS_S3_ENCRYPT_KEY = False
+# The AWS S3 KMS encryption key ID (the `SSEKMSKeyId` parameter) is set from this string if present.
+# This is only relevant if AWS S3 KMS server-side encryption is enabled (above).
+# AWS_S3_KMS_ENCRYPTION_KEY_ID = ""
 
-    # The AWS S3 KMS encryption key ID (the `SSEKMSKeyId` parameter) is set from this string if present.
-    # This is only relevant if AWS S3 KMS server-side encryption is enabled (above).
-    # AWS_S3_KMS_ENCRYPTION_KEY_ID = ""
+# If True, then text files will be stored using gzip content encoding. Files will only be gzipped if their
+# compressed size is smaller than their uncompressed size.
+# Important: Changing this setting will not affect existing files.
+AWS_S3_GZIP = True
 
-    # If True, then text files will be stored using gzip content encoding. Files will only be gzipped if their
-    # compressed size is smaller than their uncompressed size.
-    # Important: Changing this setting will not affect existing files.
-    AWS_S3_GZIP = True
+# The signature version to use for S3 requests.
+AWS_S3_SIGNATURE_VERSION = None
 
-    # The signature version to use for S3 requests.
-    AWS_S3_SIGNATURE_VERSION = None
+# If True, then files with the same name will overwrite each other. By default it's set to False to have
+# extra characters appended.
+AWS_S3_FILE_OVERWRITE = False
 
-    # If True, then files with the same name will overwrite each other. By default it's set to False to have
-    # extra characters appended.
-    AWS_S3_FILE_OVERWRITE = False
+STORAGES["default"] = {
+    "BACKEND": "django_s3_storage.storage.S3Storage",
+}
 
-    STORAGES["default"] = {
-        "BACKEND": "django_s3_storage.storage.S3Storage",
-    }
 # AWS Settings End
 
 # Enable Connection Pooling (if desired)
@@ -216,27 +193,16 @@ CSRF_COOKIE_SECURE = True
 
 REDIS_URL = os.environ.get("REDIS_URL")
 
-if DOCKERIZED:
-    CACHES = {
-        "default": {
-            "BACKEND": "django_redis.cache.RedisCache",
-            "LOCATION": REDIS_URL,
-            "OPTIONS": {
-                "CLIENT_CLASS": "django_redis.client.DefaultClient",
-            },
-        }
-    }
-else:
-    CACHES = {
-        "default": {
-            "BACKEND": "django_redis.cache.RedisCache",
-            "LOCATION": REDIS_URL,
-            "OPTIONS": {
-                "CLIENT_CLASS": "django_redis.client.DefaultClient",
-                "CONNECTION_POOL_KWARGS": {"ssl_cert_reqs": False},
-            },
-        }
+CACHES = {
+    "default": {
+        "BACKEND": "django_redis.cache.RedisCache",
+        "LOCATION": REDIS_URL,
+        "OPTIONS": {
+            "CLIENT_CLASS": "django_redis.client.DefaultClient",
+            "CONNECTION_POOL_KWARGS": {"ssl_cert_reqs": False},
+        },
     }
+}
 
 
 WEB_URL = os.environ.get("WEB_URL", "https://app.plane.so")
@@ -259,12 +225,8 @@ broker_url = (
     f"{redis_url}?ssl_cert_reqs={ssl.CERT_NONE.name}&ssl_ca_certs={certifi.where()}"
 )
 
-if DOCKERIZED:
-    CELERY_BROKER_URL = REDIS_URL
-    CELERY_RESULT_BACKEND = REDIS_URL
-else:
-    CELERY_BROKER_URL = broker_url
-    CELERY_RESULT_BACKEND = broker_url
+CELERY_RESULT_BACKEND = broker_url
+CELERY_BROKER_URL = broker_url
 
 GITHUB_ACCESS_TOKEN = os.environ.get("GITHUB_ACCESS_TOKEN", False)
 
@@ -276,6 +238,3 @@ SCOUT_MONITOR = os.environ.get("SCOUT_MONITOR", False)
 SCOUT_KEY = os.environ.get("SCOUT_KEY", "")
 SCOUT_NAME = "Plane"
 
-# Unsplash Access key
-UNSPLASH_ACCESS_KEY = os.environ.get("UNSPLASH_ACCESS_KEY")
-

apiserver/plane/settings/selfhosted.py

@@ -126,4 +126,3 @@ ANALYTICS_BASE_API = False
 OPENAI_API_BASE = os.environ.get("OPENAI_API_BASE", "https://api.openai.com/v1")
 OPENAI_API_KEY = os.environ.get("OPENAI_API_KEY", False)
 GPT_ENGINE = os.environ.get("GPT_ENGINE", "gpt-3.5-turbo")
-

apiserver/plane/settings/staging.py

@@ -218,7 +218,3 @@ CELERY_BROKER_URL = broker_url
 GITHUB_ACCESS_TOKEN = os.environ.get("GITHUB_ACCESS_TOKEN", False)
 
 ENABLE_SIGNUP = os.environ.get("ENABLE_SIGNUP", "1") == "1"
-
-
-# Unsplash Access key
-UNSPLASH_ACCESS_KEY = os.environ.get("UNSPLASH_ACCESS_KEY")

apiserver/plane/utils/issue_filters.py

@@ -163,17 +163,17 @@ def filter_target_date(params, filter, method):
             for query in target_dates:
                 target_date_query = query.split(";")
                 if len(target_date_query) == 2 and "after" in target_date_query:
-                    filter["target_date__gte"] = target_date_query[0]
+                    filter["target_date__gt"] = target_date_query[0]
                 else:
-                    filter["target_date__lte"] = target_date_query[0]
+                    filter["target_date__lt"] = target_date_query[0]
     else:
         if params.get("target_date", None) and len(params.get("target_date")):
             for query in params.get("target_date"):
                 target_date_query = query.split(";")
                 if len(target_date_query) == 2 and "after" in target_date_query:
-                    filter["target_date__gte"] = target_date_query[0]
+                    filter["target_date__gt"] = target_date_query[0]
                 else:
-                    filter["target_date__lte"] = target_date_query[0]
+                    filter["target_date__lt"] = target_date_query[0]
 
     return filter
 

apiserver/plane/utils/issue_search.py

@@ -9,15 +9,27 @@ from plane.db.models import Issue
 
 
 def search_issues(query, queryset):
-    fields = ["name", "sequence_id"]
+    fields = ["name", "sequence_id", "project__identifier"]
     q = Q()
+    q_and = Q()  # Q object for AND conditions
+
     for field in fields:
-        if field == "sequence_id":
-            sequences = re.findall(r"\d+\.\d+|\d+", query)
-            for sequence_id in sequences:
-                q |= Q(**{"sequence_id": sequence_id})
+        if field in ["sequence_id", "project__identifier"]:
+            # Condition to check sequence
+            if field == "sequence_id":
+                sequences = re.findall(r"\d+\.\d+|\d+", query)
+                for sequence_id in sequences:
+                    q_and &= Q(**{"sequence_id": int(sequence_id)})
+            # Condition to check identifier
+            if field == "project__identifier":
+                identifiers = query.split("-")
+                if identifiers:
+                    q_and &= Q(**{"project__identifier": identifiers[0]})
         else:
             q |= Q(**{f"{field}__icontains": query})
+
+    final_q = q_and | q
+
     return queryset.filter(
-        q,
+        final_q,
     ).distinct()

docker-compose-hub.yml

@@ -3,25 +3,22 @@ version: "3.8"
 services:
         web:
                 container_name: web
-                platform: linux/amd64
                 image: makeplane/plane-frontend:latest
                 restart: always
                 command: /usr/local/bin/start.sh web/server.js web
-                environment:
-                        - NEXT_PUBLIC_ENABLE_OAUTH=${NEXT_PUBLIC_ENABLE_OAUTH:-0}
-                        - NEXT_PUBLIC_DEPLOY_URL=${NEXT_PUBLIC_DEPLOY_URL:-http://localhost/spaces}
+                env_file:
+                        - ./web/.env
                 depends_on:
                         - api
                         - worker
 
         space:
                 container_name: space
-                platform: linux/amd64
                 image: makeplane/plane-space:latest
                 restart: always
                 command: /usr/local/bin/start.sh space/server.js space
-                environment:
-                        - NEXT_PUBLIC_ENABLE_OAUTH=${NEXT_PUBLIC_ENABLE_OAUTH:-0}
+                env_file:
+                        - ./space/.env
                 depends_on:
                         - api
                         - worker
@@ -29,94 +26,22 @@ services:
 
         api:
                 container_name: api
-                platform: linux/amd64
                 image: makeplane/plane-backend:latest
                 restart: always
                 command: ./bin/takeoff
-                environment:
-                        - DEBUG=${DEBUG:-0}
-                        - DJANGO_SETTINGS_MODULE=${DJANGO_SETTINGS_MODULE:-plane.settings.selfhosted}
-                        - SENTRY_DSN=${SENTRY_DSN:-""}
-                        - PGUSER=${PGUSER:-plane}
-                        - PGPASSWORD=${PGPASSWORD:-plane}
-                        - PGHOST=${PGHOST:-plane-db}
-                        - PGDATABASE=${PGDATABASE:-plane}
-                        - DATABASE_URL=${DATABASE_URL:-postgresql://${PGUSER}:${PGPASSWORD}@${PGHOST}/${PGDATABASE}}
-                        - REDIS_HOST=${REDIS_HOST:-plane-redis}
-                        - REDIS_PORT=${REDIS_PORT:-6379}
-                        - REDIS_URL=${REDIS_URL:-redis://${REDIS_HOST}:6379/}
-                        - EMAIL_HOST=${EMAIL_HOST:-""}
-                        - EMAIL_HOST_USER=${EMAIL_HOST_USER:-""}
-                        - EMAIL_HOST_PASSWORD=${EMAIL_HOST_PASSWORD:-""}
-                        - EMAIL_PORT=${EMAIL_PORT:-587}
-                        - EMAIL_FROM=${EMAIL_FROM:-Team Plane <team@mailer.plane.so>}
-                        - EMAIL_USE_TLS=${EMAIL_USE_TLS:-1}
-                        - EMAIL_USE_SSL=${EMAIL_USE_SSL:-0}
-                        - AWS_REGION=${AWS_REGION:-""}
-                        - AWS_ACCESS_KEY_ID=${AWS_ACCESS_KEY_ID:-access-key}
-                        - AWS_SECRET_ACCESS_KEY=${AWS_SECRET_ACCESS_KEY:-secret-key}
-                        - AWS_S3_ENDPOINT_URL=${AWS_S3_ENDPOINT_URL:-http://plane-minio:9000}
-                        - AWS_S3_BUCKET_NAME=${AWS_S3_BUCKET_NAME:-uploads}
-                        - FILE_SIZE_LIMIT=${FILE_SIZE_LIMIT:-5242880}
-                        - OPENAI_API_BASE=${OPENAI_API_BASE:-https://api.openai.com/v1}
-                        - OPENAI_API_KEY=${OPENAI_API_KEY:-sk-}
-                        - GPT_ENGINE=${GPT_ENGINE:-gpt-3.5-turbo}
-                        - GITHUB_CLIENT_SECRET=${GITHUB_CLIENT_SECRET:-""}
-                        - DOCKERIZED=${DOCKERIZED:-1}
-                        - USE_MINIO=${USE_MINIO:-1}
-                        - NGINX_PORT=${NGINX_PORT:-80}
-                        - DEFAULT_EMAIL=${DEFAULT_EMAIL:-captain@plane.so}
-                        - DEFAULT_PASSWORD=${DEFAULT_PASSWORD:-password123}
-                        - ENABLE_SIGNUP=${ENABLE_SIGNUP:-1}
-                        - ENABLE_EMAIL_PASSWORD=${ENABLE_EMAIL_PASSWORD:-1}
-                        - ENABLE_MAGIC_LINK_LOGIN=${ENABLE_MAGIC_LINK_LOGIN:-0}
-                        - SECRET_KEY=${SECRET_KEY:-60gp0byfz2dvffa45cxl20p1scy9xbpf6d8c5y0geejgkyp1b5}
+                env_file:
+                        - ./apiserver/.env
                 depends_on:
                         - plane-db
                         - plane-redis
 
         worker:
                 container_name: bgworker
-                platform: linux/amd64
                 image: makeplane/plane-backend:latest
                 restart: always
                 command: ./bin/worker
-                environment:
-                        - DEBUG=${DEBUG:-0}
-                        - DJANGO_SETTINGS_MODULE=${DJANGO_SETTINGS_MODULE:-plane.settings.selfhosted}
-                        - SENTRY_DSN=${SENTRY_DSN:-""}
-                        - PGUSER=${PGUSER:-plane}
-                        - PGPASSWORD=${PGPASSWORD:-plane}
-                        - PGHOST=${PGHOST:-plane-db}
-                        - PGDATABASE=${PGDATABASE:-plane}
-                        - DATABASE_URL=${DATABASE_URL:-postgresql://${PGUSER}:${PGPASSWORD}@${PGHOST}/${PGDATABASE}}
-                        - REDIS_HOST=${REDIS_HOST:-plane-redis}
-                        - REDIS_PORT=${REDIS_PORT:-6379}
-                        - REDIS_URL=${REDIS_URL:-redis://${REDIS_HOST}:6379/}
-                        - EMAIL_HOST=${EMAIL_HOST:-""}
-                        - EMAIL_HOST_USER=${EMAIL_HOST_USER:-""}
-                        - EMAIL_HOST_PASSWORD=${EMAIL_HOST_PASSWORD:-""}
-                        - EMAIL_PORT=${EMAIL_PORT:-587}
-                        - EMAIL_FROM=${EMAIL_FROM:-Team Plane <team@mailer.plane.so>}
-                        - EMAIL_USE_TLS=${EMAIL_USE_TLS:-1}
-                        - EMAIL_USE_SSL=${EMAIL_USE_SSL:-0}
-                        - AWS_REGION=${AWS_REGION:-""}
-                        - AWS_ACCESS_KEY_ID=${AWS_ACCESS_KEY_ID:-access-key}
-                        - AWS_SECRET_ACCESS_KEY=${AWS_SECRET_ACCESS_KEY:-secret-key}
-                        - AWS_S3_ENDPOINT_URL=${AWS_S3_ENDPOINT_URL:-http://plane-minio:9000}
-                        - AWS_S3_BUCKET_NAME=${AWS_S3_BUCKET_NAME:-uploads}
-                        - FILE_SIZE_LIMIT=${FILE_SIZE_LIMIT:-5242880}
-                        - OPENAI_API_BASE=${OPENAI_API_BASE:-https://api.openai.com/v1}
-                        - OPENAI_API_KEY=${OPENAI_API_KEY:-sk-}
-                        - GPT_ENGINE=${GPT_ENGINE:-gpt-3.5-turbo}
-                        - GITHUB_CLIENT_SECRET=${GITHUB_CLIENT_SECRET:-""}
-                        - DOCKERIZED=${DOCKERIZED:-1}
-                        - USE_MINIO=${USE_MINIO:-1}
-                        - NGINX_PORT=${NGINX_PORT:-80}
-                        - DEFAULT_EMAIL=${DEFAULT_EMAIL:-captain@plane.so}
-                        - DEFAULT_PASSWORD=${DEFAULT_PASSWORD:-password123}
-                        - ENABLE_SIGNUP=${ENABLE_SIGNUP:-1}
-                        - SECRET_KEY=${SECRET_KEY:-60gp0byfz2dvffa45cxl20p1scy9xbpf6d8c5y0geejgkyp1b5}
+                env_file:
+                        - ./apiserver/.env
                 depends_on:
                         - api
                         - plane-db
@@ -124,46 +49,11 @@ services:
 
         beat-worker:
                 container_name: beatworker
-                platform: linux/amd64
                 image: makeplane/plane-backend:latest
                 restart: always
                 command: ./bin/beat
-                environment:
-                        - DEBUG=${DEBUG:-0}
-                        - DJANGO_SETTINGS_MODULE=${DJANGO_SETTINGS_MODULE:-plane.settings.selfhosted}
-                        - SENTRY_DSN=${SENTRY_DSN:-""}
-                        - PGUSER=${PGUSER:-plane}
-                        - PGPASSWORD=${PGPASSWORD:-plane}
-                        - PGHOST=${PGHOST:-plane-db}
-                        - PGDATABASE=${PGDATABASE:-plane}
-                        - DATABASE_URL=${DATABASE_URL:-postgresql://${PGUSER}:${PGPASSWORD}@${PGHOST}/${PGDATABASE}}
-                        - REDIS_HOST=${REDIS_HOST:-plane-redis}
-                        - REDIS_PORT=${REDIS_PORT:-6379}
-                        - REDIS_URL=${REDIS_URL:-redis://${REDIS_HOST}:6379/}
-                        - EMAIL_HOST=${EMAIL_HOST:-""}
-                        - EMAIL_HOST_USER=${EMAIL_HOST_USER:-""}
-                        - EMAIL_HOST_PASSWORD=${EMAIL_HOST_PASSWORD:-""}
-                        - EMAIL_PORT=${EMAIL_PORT:-587}
-                        - EMAIL_FROM=${EMAIL_FROM:-Team Plane <team@mailer.plane.so>}
-                        - EMAIL_USE_TLS=${EMAIL_USE_TLS:-1}
-                        - EMAIL_USE_SSL=${EMAIL_USE_SSL:-0}
-                        - AWS_REGION=${AWS_REGION:-""}
-                        - AWS_ACCESS_KEY_ID=${AWS_ACCESS_KEY_ID:-access-key}
-                        - AWS_SECRET_ACCESS_KEY=${AWS_SECRET_ACCESS_KEY:-secret-key}
-                        - AWS_S3_ENDPOINT_URL=${AWS_S3_ENDPOINT_URL:-http://plane-minio:9000}
-                        - AWS_S3_BUCKET_NAME=${AWS_S3_BUCKET_NAME:-uploads}
-                        - FILE_SIZE_LIMIT=${FILE_SIZE_LIMIT:-5242880}
-                        - OPENAI_API_BASE=${OPENAI_API_BASE:-https://api.openai.com/v1}
-                        - OPENAI_API_KEY=${OPENAI_API_KEY:-sk-}
-                        - GPT_ENGINE=${GPT_ENGINE:-gpt-3.5-turbo}
-                        - GITHUB_CLIENT_SECRET=${GITHUB_CLIENT_SECRET:-""}
-                        - DOCKERIZED=${DOCKERIZED:-1}
-                        - USE_MINIO=${USE_MINIO:-1}
-                        - NGINX_PORT=${NGINX_PORT:-80}
-                        - DEFAULT_EMAIL=${DEFAULT_EMAIL:-captain@plane.so}
-                        - DEFAULT_PASSWORD=${DEFAULT_PASSWORD:-password123}
-                        - ENABLE_SIGNUP=${ENABLE_SIGNUP:-1}
-                        - SECRET_KEY=${SECRET_KEY:-60gp0byfz2dvffa45cxl20p1scy9xbpf6d8c5y0geejgkyp1b5}
+                env_file:
+                        - ./apiserver/.env
                 depends_on:
                         - api
                         - plane-db
@@ -177,11 +67,13 @@ services:
                 command: postgres -c 'max_connections=1000'
                 volumes:
                         - pgdata:/var/lib/postgresql/data
+                env_file:
+                        - .env
                 environment:
-                        - POSTGRES_USER=${POSTGRES_USER:-plane}
-                        - POSTGRES_PASSWORD=${POSTGRES_PASSWORD:-plane}
-                        - POSTGRES_DB=${POSTGRES_DB:-plane}
-                        - PGDATA=${PGDATA:-/var/lib/postgresql/data}
+                        POSTGRES_USER: ${PGUSER}
+                        POSTGRES_DB: ${PGDATABASE}
+                        POSTGRES_PASSWORD: ${PGPASSWORD}
+                        PGDATA: /var/lib/postgresql/data
 
         plane-redis:
                 container_name: plane-redis
@@ -197,32 +89,32 @@ services:
                 command: server /export --console-address ":9090"
                 volumes:
                         - uploads:/export
+                env_file:
+                        - .env
                 environment:
-                        - MINIO_ROOT_USER=${MINIO_ROOT_USER:-access-key}
-                        - MINIO_ROOT_PASSWORD=${MINIO_ROOT_PASSWORD:-secret-key}
+                        MINIO_ROOT_USER: ${AWS_ACCESS_KEY_ID}
+                        MINIO_ROOT_PASSWORD: ${AWS_SECRET_ACCESS_KEY}
 
         createbuckets:
                 image: minio/mc
                 entrypoint: >
                         /bin/sh -c " /usr/bin/mc config host add plane-minio http://plane-minio:9000 \$AWS_ACCESS_KEY_ID \$AWS_SECRET_ACCESS_KEY; /usr/bin/mc mb plane-minio/\$AWS_S3_BUCKET_NAME; /usr/bin/mc anonymous set download plane-minio/\$AWS_S3_BUCKET_NAME; exit 0; "
-                environment:
-                        - AWS_ACCESS_KEY_ID=${AWS_ACCESS_KEY_ID:-access-key}
-                        - AWS_SECRET_ACCESS_KEY=${AWS_SECRET_ACCESS_KEY:-secret-key}
-                        - AWS_S3_BUCKET_NAME=${AWS_S3_BUCKET_NAME:-uploads}
+                env_file:
+                        - .env
                 depends_on:
                         - plane-minio
 
         # Comment this if you already have a reverse proxy running
         proxy:
                 container_name: proxy
-                platform: linux/amd64
                 image: makeplane/plane-proxy:latest
                 ports:
                         - ${NGINX_PORT}:80
+                env_file:
+                        - .env
                 environment:
-                        - NGINX_PORT=${NGINX_PORT:-80}
-                        - FILE_SIZE_LIMIT=${FILE_SIZE_LIMIT:-5242880}
-                        - BUCKET_NAME=${AWS_S3_BUCKET_NAME:-uploads}
+                        FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT:-5242880}
+                        BUCKET_NAME: ${AWS_S3_BUCKET_NAME:-uploads}
                 depends_on:
                         - web
                         - api

package.json

@@ -1,6 +1,5 @@
 {
   "repository": "https://github.com/makeplane/plane.git",
-  "version": "0.13.2",
   "license": "AGPL-3.0",
   "private": true,
   "workspaces": [

packages/eslint-config-custom/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-custom",
-  "version": "0.13.2",
+  "version": "0.0.0",
   "main": "index.js",
   "license": "MIT",
   "dependencies": {

packages/tailwind-config-custom/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-config-custom",
-  "version": "0.13.2",
+  "version": "0.0.1",
   "description": "common tailwind configuration across monorepo",
   "main": "index.js",
   "devDependencies": {

packages/tsconfig/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tsconfig",
-  "version": "0.13.2",
+  "version": "0.0.0",
   "private": true,
   "files": [
     "base.json",

packages/ui/README.md

@@ -1 +0,0 @@
-# UI Package

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui",
-  "version": "0.13.2",
+  "version": "0.0.0",
   "main": "./index.tsx",
   "types": "./index.tsx",
   "license": "MIT",

space/components/accounts/github-login-button.tsx

@@ -10,12 +10,9 @@ import githubWhiteImage from "public/logos/github-white.svg";
 
 export interface GithubLoginButtonProps {
   handleSignIn: React.Dispatch<string>;
-  clientId: string;
 }
 
-export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
-  const { handleSignIn, clientId } = props;
-  // states
+export const GithubLoginButton: FC<GithubLoginButtonProps> = ({ handleSignIn }) => {
   const [loginCallBackURL, setLoginCallBackURL] = useState(undefined);
   const [gitCode, setGitCode] = useState<null | string>(null);
 
@@ -41,7 +38,7 @@ export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
     <div className="w-full flex justify-center items-center">
       <Link
         className="w-full"
-        href={`https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
+        href={`https://github.com/login/oauth/authorize?client_id=${process.env.NEXT_PUBLIC_GITHUB_ID}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
       >
         <button className="flex w-full items-center justify-center gap-2 rounded border border-custom-border-300 p-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-custom-background-80 h-[46px]">
           <Image

space/components/accounts/google-login.tsx

@@ -1,23 +1,22 @@
-import { FC, useEffect, useRef, useCallback, useState } from "react";
+import { FC, CSSProperties, useEffect, useRef, useCallback, useState } from "react";
+
 import Script from "next/script";
 
 export interface IGoogleLoginButton {
-  clientId: string;
+  text?: string;
   handleSignIn: React.Dispatch<any>;
+  styles?: CSSProperties;
 }
 
-export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
-  const { handleSignIn, clientId } = props;
-  // refs
+export const GoogleLoginButton: FC<IGoogleLoginButton> = ({ handleSignIn }) => {
   const googleSignInButton = useRef<HTMLDivElement>(null);
-  // states
   const [gsiScriptLoaded, setGsiScriptLoaded] = useState(false);
 
   const loadScript = useCallback(() => {
     if (!googleSignInButton.current || gsiScriptLoaded) return;
 
     (window as any)?.google?.accounts.id.initialize({
-      client_id: clientId,
+      client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENTID || "",
       callback: handleSignIn,
     });
 

space/components/accounts/sign-in.tsx

@@ -1,30 +1,26 @@
-import React from "react";
-import useSWR from "swr";
+import React, { useEffect } from "react";
+
+import Image from "next/image";
 import { useRouter } from "next/router";
+
 // mobx
 import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 // services
 import authenticationService from "services/authentication.service";
-import { AppConfigService } from "services/app-config.service";
 // hooks
 import useToast from "hooks/use-toast";
 // components
-import { EmailPasswordForm, GoogleLoginButton, EmailCodeForm } from "components/accounts";
+import { EmailPasswordForm, GithubLoginButton, GoogleLoginButton, EmailCodeForm } from "components/accounts";
 // images
 const imagePrefix = Boolean(parseInt(process.env.NEXT_PUBLIC_DEPLOY_WITH_NGINX || "0")) ? "/spaces" : "";
 
-const appConfig = new AppConfigService();
-
 export const SignInView = observer(() => {
   const { user: userStore } = useMobxStore();
-  // router
+
   const router = useRouter();
-  const { next_path } = router.query as { next_path: string };
-  // toast
+
   const { setToastAlert } = useToast();
-  // fetch app config
-  const { data } = useSWR("APP_CONFIG", () => appConfig.envConfig());
 
   const onSignInError = (error: any) => {
     setToastAlert({
@@ -35,17 +31,17 @@ export const SignInView = observer(() => {
   };
 
   const onSignInSuccess = (response: any) => {
+    const isOnboarded = response?.user?.onboarding_step?.profile_complete || false;
+
+    const nextPath = router.asPath.includes("next_path") ? router.asPath.split("/?next_path=")[1] : "/login";
+
     userStore.setCurrentUser(response?.user);
 
-    const isOnboard = response?.user?.onboarding_step?.profile_complete || false;
-
-    if (isOnboard) {
-      if (next_path) router.push(next_path);
-      else router.push("/login");
-    } else {
-      if (next_path) router.push(`/onboarding?next_path=${next_path}`);
-      else router.push("/onboarding");
+    if (!isOnboarded) {
+      router.push(`/onboarding?next_path=${nextPath}`);
+      return;
     }
+    router.push((nextPath ?? "/login").toString());
   };
 
   const handleGoogleSignIn = async ({ clientId, credential }: any) => {
@@ -67,6 +63,24 @@ export const SignInView = observer(() => {
     }
   };
 
+  const handleGitHubSignIn = async (credential: string) => {
+    try {
+      if (process.env.NEXT_PUBLIC_GITHUB_ID && credential) {
+        const socialAuthPayload = {
+          medium: "github",
+          credential,
+          clientId: process.env.NEXT_PUBLIC_GITHUB_ID,
+        };
+        const response = await authenticationService.socialAuth(socialAuthPayload);
+        onSignInSuccess(response);
+      } else {
+        throw Error("Cant find credentials");
+      }
+    } catch (err: any) {
+      onSignInError(err);
+    }
+  };
+
   const handlePasswordSignIn = async (formData: any) => {
     await authenticationService
       .emailLogin(formData)
@@ -104,32 +118,38 @@ export const SignInView = observer(() => {
       </div>
       <div className="grid place-items-center h-full overflow-y-auto py-5 px-7">
         <div>
-          <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">Sign in to Plane</h1>
-          {data?.email_password_login && <EmailPasswordForm onSubmit={handlePasswordSignIn} />}
-
-          {data?.magic_login && (
-            <div className="flex flex-col divide-y divide-custom-border-200">
-              <div className="pb-7">
-                <EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
+          {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
+            <>
+              <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
+                Sign in to Plane
+              </h1>
+              <div className="flex flex-col divide-y divide-custom-border-200">
+                <div className="pb-7">
+                  <EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
+                </div>
+                <div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
+                  <GoogleLoginButton handleSignIn={handleGoogleSignIn} />
+                  {/* <GithubLoginButton handleSignIn={handleGitHubSignIn} /> */}
+                </div>
               </div>
-            </div>
+            </>
+          ) : (
+            <EmailPasswordForm onSubmit={handlePasswordSignIn} />
           )}
 
-          <div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
-            {data?.google && <GoogleLoginButton clientId={data.google} handleSignIn={handleGoogleSignIn} />}
-          </div>
-
-          <p className="pt-16 text-custom-text-200 text-sm text-center">
-            By signing up, you agree to the{" "}
-            <a
-              href="https://plane.so/terms-and-conditions"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="font-medium underline"
-            >
-              Terms & Conditions
-            </a>
-          </p>
+          {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
+            <p className="pt-16 text-custom-text-200 text-sm text-center">
+              By signing up, you agree to the{" "}
+              <a
+                href="https://plane.so/terms-and-conditions"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="font-medium underline"
+              >
+                Terms & Conditions
+              </a>
+            </p>
+          ) : null}
         </div>
       </div>
     </div>

space/components/issues/navbar/index.tsx

@@ -44,43 +44,19 @@ const IssueNavbar = observer(() => {
   }, [projectStore, workspace_slug, project_slug]);
 
   useEffect(() => {
-    if (workspace_slug && project_slug && projectStore?.deploySettings) {
-      const viewsAcceptable: string[] = [];
-      let currentBoard: string | null = null;
-
-      if (projectStore?.deploySettings?.views?.list) viewsAcceptable.push("list");
-      if (projectStore?.deploySettings?.views?.kanban) viewsAcceptable.push("kanban");
-      if (projectStore?.deploySettings?.views?.calendar) viewsAcceptable.push("calendar");
-      if (projectStore?.deploySettings?.views?.gantt) viewsAcceptable.push("gantt");
-      if (projectStore?.deploySettings?.views?.spreadsheet) viewsAcceptable.push("spreadsheet");
-
-      if (board) {
-        if (viewsAcceptable.includes(board.toString())) {
-          currentBoard = board.toString();
-        } else {
-          if (viewsAcceptable && viewsAcceptable.length > 0) {
-            currentBoard = viewsAcceptable[0];
-          }
-        }
-      } else {
-        if (viewsAcceptable && viewsAcceptable.length > 0) {
-          currentBoard = viewsAcceptable[0];
-        }
-      }
-
-      if (currentBoard) {
-        if (projectStore?.activeBoard === null || projectStore?.activeBoard !== currentBoard) {
-          projectStore.setActiveBoard(currentBoard);
-          router.push({
-            pathname: `/${workspace_slug}/${project_slug}`,
-            query: {
-              board: currentBoard,
-            },
-          });
-        }
+    if (workspace_slug && project_slug) {
+      if (!board) {
+        router.push({
+          pathname: `/${workspace_slug}/${project_slug}`,
+          query: {
+            board: "list",
+          },
+        });
+        return projectStore.setActiveBoard("list");
       }
+      projectStore.setActiveBoard(board.toString());
     }
-  }, [board, workspace_slug, project_slug, router, projectStore, projectStore?.deploySettings]);
+  }, [board, workspace_slug, project_slug]);
 
   return (
     <div className="px-5 relative w-full flex items-center gap-4">
@@ -129,7 +105,7 @@ const IssueNavbar = observer(() => {
         </div>
       ) : (
         <div className="flex-shrink-0">
-          <Link href={`/login/?next_path=${router.asPath}`}>
+          <Link href={`/?next_path=${router.asPath}`}>
             <a>
               <PrimaryButton className="flex-shrink-0" outline>
                 Sign in

space/components/views/login.tsx

@@ -7,13 +7,7 @@ import { SignInView, UserLoggedIn } from "components/accounts";
 export const LoginView = observer(() => {
   const { user: userStore } = useMobxStore();
 
-  return (
-    <>
-      {userStore?.loader ? (
-        <div className="relative w-screen h-screen flex justify-center items-center">Loading</div>
-      ) : (
-        <>{userStore.currentUser ? <UserLoggedIn /> : <SignInView />}</>
-      )}
-    </>
-  );
+  if (!userStore.currentUser) return <SignInView />;
+
+  return <UserLoggedIn />;
 });

space/lib/mobx/store-init.tsx

@@ -3,14 +3,12 @@
 import { useEffect } from "react";
 // next imports
 import { useRouter } from "next/router";
-// js cookie
-import Cookie from "js-cookie";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
 
 const MobxStoreInit = () => {
-  const { user: userStore }: RootStore = useMobxStore();
+  const store: RootStore = useMobxStore();
 
   const router = useRouter();
   const { states, labels, priorities } = router.query as { states: string[]; labels: string[]; priorities: string[] };
@@ -21,11 +19,6 @@ const MobxStoreInit = () => {
   //   store.issue.userSelectedStates = states || [];
   // }, [store.issue]);
 
-  useEffect(() => {
-    const authToken = Cookie.get("accessToken") || null;
-    if (authToken) userStore.fetchCurrentUser();
-  }, [userStore]);
-
   return <></>;
 };
 

space/package.json

@@ -1,6 +1,6 @@
 {
   "name": "space",
-  "version": "0.13.2",
+  "version": "0.0.1",
   "private": true,
   "scripts": {
     "dev": "next dev -p 4000",

space/pages/index.tsx

@@ -1,19 +0,0 @@
-import { useEffect } from "react";
-
-// next
-import { NextPage } from "next";
-import { useRouter } from "next/router";
-
-const Index: NextPage = () => {
-  const router = useRouter();
-  const { next_path } = router.query as { next_path: string };
-
-  useEffect(() => {
-    if (next_path) router.push(`/login?next_path=${next_path}`);
-    else router.push(`/login`);
-  }, [router, next_path]);
-
-  return null;
-};
-
-export default Index;

space/pages/login/index.tsx

@@ -5,4 +5,4 @@ import { LoginView } from "components/views";
 
 const LoginPage = () => <LoginView />;
 
-export default LoginPage;
+export default LoginPage;

space/services/app-config.service.ts

@@ -1,30 +0,0 @@
-// services
-import APIService from "services/api.service";
-// helper
-import { API_BASE_URL } from "helpers/common.helper";
-
-export interface IEnvConfig {
-  github: string;
-  google: string;
-  github_app_name: string | null;
-  email_password_login: boolean;
-  magic_login: boolean;
-}
-
-export class AppConfigService extends APIService {
-  constructor() {
-    super(API_BASE_URL);
-  }
-
-  async envConfig(): Promise<IEnvConfig> {
-    return this.get("/api/configs/", {
-      headers: {
-        "Content-Type": "application/json",
-      },
-    })
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-}

space/services/file.service.ts

@@ -74,6 +74,24 @@ class FileServices extends APIService {
         throw error?.response?.data;
       });
   }
+
+  async getUnsplashImages(page: number = 1, query?: string): Promise<UnSplashImage[]> {
+    const url = "/api/unsplash";
+
+    return this.request({
+      method: "get",
+      url,
+      params: {
+        page,
+        per_page: 20,
+        query,
+      },
+    })
+      .then((response) => response?.data?.results ?? response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
 }
 
 const fileServices = new FileServices();

space/store/user.ts

@@ -7,17 +7,12 @@ import { ActorDetail } from "types/issue";
 import { IUser } from "types/user";
 
 export interface IUserStore {
-  loader: boolean;
-  error: any | null;
   currentUser: any | null;
   fetchCurrentUser: () => void;
   currentActor: () => any;
 }
 
 class UserStore implements IUserStore {
-  loader: boolean = false;
-  error: any | null = null;
-
   currentUser: IUser | null = null;
   // root store
   rootStore;
@@ -27,9 +22,6 @@ class UserStore implements IUserStore {
   constructor(_rootStore: any) {
     makeObservable(this, {
       // observable
-      loader: observable.ref,
-      error: observable.ref,
-
       currentUser: observable.ref,
       // actions
       setCurrentUser: action,
@@ -81,19 +73,14 @@ class UserStore implements IUserStore {
 
   fetchCurrentUser = async () => {
     try {
-      this.loader = true;
-      this.error = null;
       const response = await this.userService.currentUser();
       if (response) {
         runInAction(() => {
-          this.loader = false;
           this.currentUser = response;
         });
       }
     } catch (error) {
       console.error("Failed to fetch current user", error);
-      this.loader = false;
-      this.error = error;
     }
   };
 }

turbo.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://turbo.build/schema.json",
   "globalEnv": [
+    "NEXT_PUBLIC_GITHUB_ID",
+    "NEXT_PUBLIC_GOOGLE_CLIENTID",
     "NEXT_PUBLIC_API_BASE_URL",
     "NEXT_PUBLIC_DEPLOY_URL",
     "API_BASE_URL",
@@ -10,6 +12,8 @@
     "NEXT_PUBLIC_GITHUB_APP_NAME",
     "NEXT_PUBLIC_ENABLE_SENTRY",
     "NEXT_PUBLIC_ENABLE_OAUTH",
+    "NEXT_PUBLIC_UNSPLASH_ACCESS",
+    "NEXT_PUBLIC_UNSPLASH_ENABLED",
     "NEXT_PUBLIC_TRACK_EVENTS",
     "NEXT_PUBLIC_PLAUSIBLE_DOMAIN",
     "NEXT_PUBLIC_CRISP_ID",

web/components/account/email-password-form.tsx

@@ -1,5 +1,12 @@
-import React from "react";
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+import Link from "next/link";
+
+// react hook form
 import { useForm } from "react-hook-form";
+// components
+import { EmailResetPasswordForm } from "components/account";
 // ui
 import { Input, PrimaryButton } from "components/ui";
 // types
@@ -11,12 +18,14 @@ type EmailPasswordFormValues = {
 
 type Props = {
   onSubmit: (formData: EmailPasswordFormValues) => Promise<void>;
-  setIsResettingPassword: (value: boolean) => void;
 };
 
-export const EmailPasswordForm: React.FC<Props> = (props) => {
-  const { onSubmit, setIsResettingPassword } = props;
-  // form info
+export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
+  const [isResettingPassword, setIsResettingPassword] = useState(false);
+
+  const router = useRouter();
+  const isSignUpPage = router.pathname === "/sign-up";
+
   const {
     register,
     handleSubmit,
@@ -33,62 +42,94 @@ export const EmailPasswordForm: React.FC<Props> = (props) => {
 
   return (
     <>
-      <form
-        className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto"
-        onSubmit={handleSubmit(onSubmit)}
-      >
-        <div className="space-y-1">
-          <Input
-            id="email"
-            type="email"
-            name="email"
-            register={register}
-            validations={{
-              required: "Email address is required",
-              validate: (value) =>
-                /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
-                  value
-                ) || "Email address is not valid",
-            }}
-            error={errors.email}
-            placeholder="Enter your email address..."
-            className="border-custom-border-300 h-[46px]"
-          />
-        </div>
-        <div className="space-y-1">
-          <Input
-            id="password"
-            type="password"
-            name="password"
-            register={register}
-            validations={{
-              required: "Password is required",
-            }}
-            error={errors.password}
-            placeholder="Enter your password..."
-            className="border-custom-border-300 h-[46px]"
-          />
-        </div>
-        <div className="text-right text-xs">
-          <button
-            type="button"
-            onClick={() => setIsResettingPassword(true)}
-            className="text-custom-text-200 hover:text-custom-primary-100"
-          >
-            Forgot your password?
-          </button>
-        </div>
-        <div>
-          <PrimaryButton
-            type="submit"
-            className="w-full text-center h-[46px]"
-            disabled={!isValid && isDirty}
-            loading={isSubmitting}
-          >
-            {isSubmitting ? "Signing in..." : "Sign in"}
-          </PrimaryButton>
-        </div>
-      </form>
+      <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
+        {isResettingPassword
+          ? "Reset your password"
+          : isSignUpPage
+          ? "Sign up on Plane"
+          : "Sign in to Plane"}
+      </h1>
+      {isResettingPassword ? (
+        <EmailResetPasswordForm setIsResettingPassword={setIsResettingPassword} />
+      ) : (
+        <form
+          className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto"
+          onSubmit={handleSubmit(onSubmit)}
+        >
+          <div className="space-y-1">
+            <Input
+              id="email"
+              type="email"
+              name="email"
+              register={register}
+              validations={{
+                required: "Email address is required",
+                validate: (value) =>
+                  /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+                    value
+                  ) || "Email address is not valid",
+              }}
+              error={errors.email}
+              placeholder="Enter your email address..."
+              className="border-custom-border-300 h-[46px]"
+            />
+          </div>
+          <div className="space-y-1">
+            <Input
+              id="password"
+              type="password"
+              name="password"
+              register={register}
+              validations={{
+                required: "Password is required",
+              }}
+              error={errors.password}
+              placeholder="Enter your password..."
+              className="border-custom-border-300 h-[46px]"
+            />
+          </div>
+          <div className="text-right text-xs">
+            {isSignUpPage ? (
+              <Link href="/">
+                <a className="text-custom-text-200 hover:text-custom-primary-100">
+                  Already have an account? Sign in.
+                </a>
+              </Link>
+            ) : (
+              <button
+                type="button"
+                onClick={() => setIsResettingPassword(true)}
+                className="text-custom-text-200 hover:text-custom-primary-100"
+              >
+                Forgot your password?
+              </button>
+            )}
+          </div>
+          <div>
+            <PrimaryButton
+              type="submit"
+              className="w-full text-center h-[46px]"
+              disabled={!isValid && isDirty}
+              loading={isSubmitting}
+            >
+              {isSignUpPage
+                ? isSubmitting
+                  ? "Signing up..."
+                  : "Sign up"
+                : isSubmitting
+                ? "Signing in..."
+                : "Sign in"}
+            </PrimaryButton>
+            {!isSignUpPage && (
+              <Link href="/sign-up">
+                <a className="block text-custom-text-200 hover:text-custom-primary-100 text-xs mt-4">
+                  Don{"'"}t have an account? Sign up.
+                </a>
+              </Link>
+            )}
+          </div>
+        </form>
+      )}
     </>
   );
 };

web/components/account/email-signup-form.tsx

@@ -1,114 +0,0 @@
-import React from "react";
-import Link from "next/link";
-import { useForm } from "react-hook-form";
-// ui
-import { Input, PrimaryButton } from "components/ui";
-// types
-type EmailPasswordFormValues = {
-  email: string;
-  password?: string;
-  confirm_password: string;
-  medium?: string;
-};
-
-type Props = {
-  onSubmit: (formData: EmailPasswordFormValues) => Promise<void>;
-};
-
-export const EmailSignUpForm: React.FC<Props> = (props) => {
-  const { onSubmit } = props;
-
-  const {
-    register,
-    handleSubmit,
-    watch,
-    formState: { errors, isSubmitting, isValid, isDirty },
-  } = useForm<EmailPasswordFormValues>({
-    defaultValues: {
-      email: "",
-      password: "",
-      confirm_password: "",
-      medium: "email",
-    },
-    mode: "onChange",
-    reValidateMode: "onChange",
-  });
-
-  return (
-    <>
-      <form
-        className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto"
-        onSubmit={handleSubmit(onSubmit)}
-      >
-        <div className="space-y-1">
-          <Input
-            id="email"
-            type="email"
-            name="email"
-            register={register}
-            validations={{
-              required: "Email address is required",
-              validate: (value) =>
-                /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
-                  value
-                ) || "Email address is not valid",
-            }}
-            error={errors.email}
-            placeholder="Enter your email address..."
-            className="border-custom-border-300 h-[46px]"
-          />
-        </div>
-        <div className="space-y-1">
-          <Input
-            id="password"
-            type="password"
-            name="password"
-            register={register}
-            validations={{
-              required: "Password is required",
-            }}
-            error={errors.password}
-            placeholder="Enter your password..."
-            className="border-custom-border-300 h-[46px]"
-          />
-        </div>
-        <div className="space-y-1">
-          <Input
-            id="confirm_password"
-            type="password"
-            name="confirm_password"
-            register={register}
-            validations={{
-              required: "Password is required",
-              validate: (val: string) => {
-                if (watch("password") != val) {
-                  return "Your passwords do no match";
-                }
-              },
-            }}
-            error={errors.confirm_password}
-            placeholder="Confirm your password..."
-            className="border-custom-border-300 h-[46px]"
-          />
-        </div>
-        <div className="text-right text-xs">
-          <Link href="/">
-            <a className="text-custom-text-200 hover:text-custom-primary-100">
-              Already have an account? Sign in.
-            </a>
-          </Link>
-        </div>
-        <div>
-          <PrimaryButton
-            type="submit"
-            className="w-full text-center h-[46px]"
-            disabled={!isValid && isDirty}
-            loading={isSubmitting}
-          >
-            {isSubmitting ? "Signing up..." : "Sign up"}
-          </PrimaryButton>
-        </div>
-      </form>
-    </>
-  );
-};

web/components/account/github-login-button.tsx

@@ -1,27 +1,29 @@
 import { useEffect, useState, FC } from "react";
+
 import Link from "next/link";
 import Image from "next/image";
 import { useRouter } from "next/router";
+
+// next-themes
 import { useTheme } from "next-themes";
 // images
 import githubBlackImage from "/public/logos/github-black.png";
 import githubWhiteImage from "/public/logos/github-white.png";
 
+const { NEXT_PUBLIC_GITHUB_ID } = process.env;
+
 export interface GithubLoginButtonProps {
   handleSignIn: React.Dispatch<string>;
-  clientId: string;
 }
 
-export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
-  const { handleSignIn, clientId } = props;
-  // states
+export const GithubLoginButton: FC<GithubLoginButtonProps> = ({ handleSignIn }) => {
   const [loginCallBackURL, setLoginCallBackURL] = useState(undefined);
   const [gitCode, setGitCode] = useState<null | string>(null);
-  // router
+
   const {
     query: { code },
   } = useRouter();
-  // theme
+
   const { theme } = useTheme();
 
   useEffect(() => {
@@ -40,7 +42,7 @@ export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
   return (
     <div className="w-full flex justify-center items-center">
       <Link
-        href={`https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
+        href={`https://github.com/login/oauth/authorize?client_id=${NEXT_PUBLIC_GITHUB_ID}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
       >
         <button className="flex w-full items-center justify-center gap-2 rounded border border-custom-border-300 p-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-custom-background-80 h-[46px]">
           <Image

web/components/account/google-login.tsx

@@ -1,23 +1,22 @@
-import { FC, useEffect, useRef, useCallback, useState } from "react";
+import { FC, CSSProperties, useEffect, useRef, useCallback, useState } from "react";
+
 import Script from "next/script";
 
 export interface IGoogleLoginButton {
+  text?: string;
   handleSignIn: React.Dispatch<any>;
-  clientId: string;
+  styles?: CSSProperties;
 }
 
-export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
-  const { handleSignIn, clientId } = props;
-  // refs
+export const GoogleLoginButton: FC<IGoogleLoginButton> = ({ handleSignIn }) => {
   const googleSignInButton = useRef<HTMLDivElement>(null);
-  // states
   const [gsiScriptLoaded, setGsiScriptLoaded] = useState(false);
 
   const loadScript = useCallback(() => {
     if (!googleSignInButton.current || gsiScriptLoaded) return;
 
     window?.google?.accounts.id.initialize({
-      client_id: clientId,
+      client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENTID || "",
       callback: handleSignIn,
     });
 
@@ -40,7 +39,7 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
     window?.google?.accounts.id.prompt(); // also display the One Tap dialog
 
     setGsiScriptLoaded(true);
-  }, [handleSignIn, gsiScriptLoaded, clientId]);
+  }, [handleSignIn, gsiScriptLoaded]);
 
   useEffect(() => {
     if (window?.google?.accounts?.id) {

web/components/account/index.ts

@@ -3,4 +3,3 @@ export * from "./email-password-form";
 export * from "./email-reset-password-form";
 export * from "./github-login-button";
 export * from "./google-login";
-export * from "./email-signup-form";

web/components/automation/auto-archive-automation.tsx

@@ -13,14 +13,9 @@ import { IProject } from "types";
 type Props = {
   projectDetails: IProject | undefined;
   handleChange: (formData: Partial<IProject>) => Promise<void>;
-  disabled?: boolean;
 };
 
-export const AutoArchiveAutomation: React.FC<Props> = ({
-  projectDetails,
-  handleChange,
-  disabled = false,
-}) => {
+export const AutoArchiveAutomation: React.FC<Props> = ({ projectDetails, handleChange }) => {
   const [monthModal, setmonthModal] = useState(false);
 
   const initialValues: Partial<IProject> = { archive_in: 1 };
@@ -54,7 +49,6 @@ export const AutoArchiveAutomation: React.FC<Props> = ({
                 : handleChange({ archive_in: 0 })
             }
             size="sm"
-            disabled={disabled}
           />
         </div>
 
@@ -76,7 +70,6 @@ export const AutoArchiveAutomation: React.FC<Props> = ({
                   input
                   verticalPosition="bottom"
                   width="w-full"
-                  disabled={disabled}
                 >
                   <>
                     {PROJECT_AUTOMATION_MONTHS.map((month) => (

web/components/automation/auto-close-automation.tsx

@@ -24,14 +24,9 @@ import { getStatesList } from "helpers/state.helper";
 type Props = {
   projectDetails: IProject | undefined;
   handleChange: (formData: Partial<IProject>) => Promise<void>;
-  disabled?: boolean;
 };
 
-export const AutoCloseAutomation: React.FC<Props> = ({
-  projectDetails,
-  handleChange,
-  disabled = false,
-}) => {
+export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleChange }) => {
   const [monthModal, setmonthModal] = useState(false);
 
   const router = useRouter();
@@ -103,7 +98,6 @@ export const AutoCloseAutomation: React.FC<Props> = ({
                 : handleChange({ close_in: 0, default_state: null })
             }
             size="sm"
-            disabled={disabled}
           />
         </div>
 
@@ -125,7 +119,6 @@ export const AutoCloseAutomation: React.FC<Props> = ({
                     }}
                     input
                     width="w-full"
-                    disabled={disabled}
                   >
                     <>
                       {PROJECT_AUTOMATION_MONTHS.map((month) => (

web/components/command-palette/command-pallette.tsx

@@ -161,6 +161,7 @@ export const CommandPalette: React.FC = observer(() => {
           />
           <CreateUpdateViewModal
             handleClose={() => setIsCreateViewModalOpen(false)}
+            viewType="project"
             isOpen={isCreateViewModalOpen}
             user={user}
           />

web/components/core/activity.tsx

@@ -2,33 +2,13 @@ import { useRouter } from "next/router";
 
 import useSWR from "swr";
 
-// hook
-import useEstimateOption from "hooks/use-estimate-option";
 // services
 import issuesService from "services/issues.service";
 // icons
 import { Icon, Tooltip } from "components/ui";
-import {
-  TagIcon,
-  CopyPlus,
-  Calendar,
-  Link2Icon,
-  RocketIcon,
-  Users2Icon,
-  ArchiveIcon,
-  PaperclipIcon,
-  ContrastIcon,
-  TriangleIcon,
-  LayoutGridIcon,
-  SignalMediumIcon,
-  MessageSquareIcon,
-} from "lucide-react";
-import {
-  BlockedIcon,
-  BlockerIcon,
-  RelatedIcon,
-  StackedLayersHorizontalIcon,
-} from "components/icons";
+import { CopyPlus } from "lucide-react";
+import { Squares2X2Icon } from "@heroicons/react/24/outline";
+import { BlockedIcon, BlockerIcon, RelatedIcon } from "components/icons";
 // helpers
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 import { capitalizeFirstLetter } from "helpers/string.helper";
@@ -56,7 +36,7 @@ const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
         {activity.issue_detail
           ? `${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}`
           : "Issue"}
-        <RocketIcon size={12} color="#6b7280" />
+        <Icon iconName="launch" className="!text-xs" />
       </a>
     </Tooltip>
   );
@@ -97,18 +77,6 @@ const LabelPill = ({ labelId }: { labelId: string }) => {
     />
   );
 };
-const EstimatePoint = ({ point }: { point: string }) => {
-  const { estimateValue, isEstimateActive } = useEstimateOption(Number(point));
-  const currentPoint = Number(point) + 1;
-
-  return (
-    <span className="font-medium text-custom-text-100">
-      {isEstimateActive
-        ? estimateValue
-        : `${currentPoint} ${currentPoint > 1 ? "points" : "point"}`}
-    </span>
-  );
-};
 
 const activityDetails: {
   [key: string]: {
@@ -149,14 +117,14 @@ const activityDetails: {
           </>
         );
     },
-    icon: <Users2Icon size={12} color="#6b7280" aria-hidden="true" />,
+    icon: <Icon iconName="group" className="!text-2xl" aria-hidden="true" />,
   },
   archived_at: {
     message: (activity) => {
       if (activity.new_value === "restore") return "restored the issue.";
       else return "archived the issue.";
     },
-    icon: <ArchiveIcon size={12} color="#6b7280" aria-hidden="true" />,
+    icon: <Icon iconName="archive" className="!text-2xl" aria-hidden="true" />,
   },
   attachment: {
     message: (activity, showIssue) => {
@@ -171,7 +139,7 @@ const activityDetails: {
               className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
             >
               attachment
-              <RocketIcon size={12} color="#6b7280" />
+              <Icon iconName="launch" className="!text-xs" />
             </a>
             {showIssue && (
               <>
@@ -195,7 +163,7 @@ const activityDetails: {
           </>
         );
     },
-    icon: <PaperclipIcon size={12} color="#6b7280" aria-hidden="true" />,
+    icon: <Icon iconName="attach_file" className="!text-2xl" aria-hidden="true" />,
   },
   blocking: {
     message: (activity) => {
@@ -286,7 +254,7 @@ const activityDetails: {
               className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
             >
               {activity.new_value}
-              <RocketIcon size={12} color="#6b7280" />
+              <Icon iconName="launch" className="!text-xs" />
             </a>
           </>
         );
@@ -301,7 +269,7 @@ const activityDetails: {
               className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
             >
               {activity.new_value}
-              <RocketIcon size={12} color="#6b7280" />
+              <Icon iconName="launch" className="!text-xs" />
             </a>
           </>
         );
@@ -316,12 +284,12 @@ const activityDetails: {
               className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
             >
               {activity.old_value}
-              <RocketIcon size={12} color="#6b7280" />
+              <Icon iconName="launch" className="!text-xs" />
             </a>
           </>
         );
     },
-    icon: <ContrastIcon size={12} color="#6b7280" aria-hidden="true" />,
+    icon: <Icon iconName="contrast" className="!text-2xl" aria-hidden="true" />,
   },
   description: {
     message: (activity, showIssue) => (
@@ -336,7 +304,7 @@ const activityDetails: {
         .
       </>
     ),
-    icon: <MessageSquareIcon size={12} color="#6b7280" aria-hidden="true" />,
+    icon: <Icon iconName="chat" className="!text-2xl" aria-hidden="true" />,
   },
   estimate_point: {
     message: (activity, showIssue) => {
@@ -356,7 +324,8 @@ const activityDetails: {
       else
         return (
           <>
-            set the estimate point to <EstimatePoint point={activity.new_value} />
+            set the estimate point to{" "}
+            <span className="font-medium text-custom-text-100">{activity.new_value}</span>
             {showIssue && (
               <>
                 {" "}
@@ -367,14 +336,14 @@ const activityDetails: {
           </>
         );
     },
-    icon: <TriangleIcon size={12} color="#6b7280" aria-hidden="true" />,
+    icon: <Icon iconName="change_history" className="!text-2xl" aria-hidden="true" />,
   },
   issue: {
     message: (activity) => {
       if (activity.verb === "created") return "created the issue.";
       else return "deleted an issue.";
     },
-    icon: <StackedLayersHorizontalIcon width={12} height={12} color="#6b7280" aria-hidden="true" />,
+    icon: <Icon iconName="stack" className="!text-2xl" aria-hidden="true" />,
   },
   labels: {
     message: (activity, showIssue) => {
@@ -411,7 +380,7 @@ const activityDetails: {
           </>
         );
     },
-    icon: <TagIcon size={12} color="#6b7280" aria-hidden="true" />,
+    icon: <Icon iconName="sell" className="!text-2xl" aria-hidden="true" />,
   },
   link: {
     message: (activity, showIssue) => {
@@ -426,7 +395,7 @@ const activityDetails: {
               className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
             >
               link
-              <RocketIcon size={12} color="#6b7280" />
+              <Icon iconName="launch" className="!text-xs" />
             </a>
             {showIssue && (
               <>
@@ -448,7 +417,7 @@ const activityDetails: {
               className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
             >
               link
-              <RocketIcon size={12} color="#6b7280" />
+              <Icon iconName="launch" className="!text-xs" />
             </a>
             {showIssue && (
               <>
@@ -470,7 +439,7 @@ const activityDetails: {
               className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
             >
               link
-              <RocketIcon size={12} color="#6b7280" />
+              <Icon iconName="launch" className="!text-xs" />
             </a>
             {showIssue && (
               <>
@@ -482,7 +451,7 @@ const activityDetails: {
           </>
         );
     },
-    icon: <Link2Icon size={12} color="#6b7280" aria-hidden="true" />,
+    icon: <Icon iconName="link" className="!text-2xl" aria-hidden="true" />,
   },
   modules: {
     message: (activity, showIssue, workspaceSlug) => {
@@ -497,7 +466,7 @@ const activityDetails: {
               className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
             >
               {activity.new_value}
-              <RocketIcon size={12} color="#6b7280" />
+              <Icon iconName="launch" className="!text-xs" />
             </a>
           </>
         );
@@ -512,7 +481,7 @@ const activityDetails: {
               className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
             >
               {activity.new_value}
-              <RocketIcon size={12} color="#6b7280" />
+              <Icon iconName="launch" className="!text-xs" />
             </a>
           </>
         );
@@ -527,12 +496,12 @@ const activityDetails: {
               className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
             >
               {activity.old_value}
-              <RocketIcon size={12} color="#6b7280" />
+              <Icon iconName="launch" className="!text-xs" />
             </a>
           </>
         );
     },
-    icon: <Icon iconName="dataset" className="!text-xs !text-[#6b7280]" aria-hidden="true" />,
+    icon: <Icon iconName="dataset" className="!text-2xl" aria-hidden="true" />,
   },
   name: {
     message: (activity, showIssue) => (
@@ -547,7 +516,7 @@ const activityDetails: {
         .
       </>
     ),
-    icon: <MessageSquareIcon size={12} color="#6b7280" aria-hidden="true" />,
+    icon: <Icon iconName="chat" className="!text-2xl" aria-hidden="true" />,
   },
   parent: {
     message: (activity, showIssue) => {
@@ -580,13 +549,7 @@ const activityDetails: {
           </>
         );
     },
-    icon: (
-      <Icon
-        iconName="supervised_user_circle"
-        className="!text-xs !text-[#6b7280]"
-        aria-hidden="true"
-      />
-    ),
+    icon: <Icon iconName="supervised_user_circle" className="!text-2xl" aria-hidden="true" />,
   },
   priority: {
     message: (activity, showIssue) => (
@@ -604,7 +567,7 @@ const activityDetails: {
         .
       </>
     ),
-    icon: <SignalMediumIcon size={12} color="#6b7280" aria-hidden="true" />,
+    icon: <Icon iconName="signal_cellular_alt" className="!text-2xl" aria-hidden="true" />,
   },
   start_date: {
     message: (activity, showIssue) => {
@@ -638,7 +601,7 @@ const activityDetails: {
           </>
         );
     },
-    icon: <Calendar size={12} color="#6b7280" aria-hidden="true" />,
+    icon: <Icon iconName="calendar_today" className="!text-2xl" aria-hidden="true" />,
   },
   state: {
     message: (activity, showIssue) => (
@@ -654,7 +617,7 @@ const activityDetails: {
         .
       </>
     ),
-    icon: <LayoutGridIcon size={12} color="#6b7280" aria-hidden="true" />,
+    icon: <Squares2X2Icon className="h-6 w-6 text-custom-sidebar-200" aria-hidden="true" />,
   },
   target_date: {
     message: (activity, showIssue) => {
@@ -688,7 +651,7 @@ const activityDetails: {
           </>
         );
     },
-    icon: <Calendar size={12} color="#6b7280" aria-hidden="true" />,
+    icon: <Icon iconName="calendar_today" className="!text-2xl" aria-hidden="true" />,
   },
 };
 

web/components/core/filters/filters-list.tsx

@@ -10,7 +10,14 @@ import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 // helpers
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
-import { IIssueFilterOptions, IIssueLabels, IState, IUserLite, TStateGroups } from "types";
+import {
+  IIssueFilterOptions,
+  IIssueLabels,
+  IProject,
+  IState,
+  IUserLite,
+  TStateGroups,
+} from "types";
 // constants
 import { STATE_GROUP_COLORS } from "constants/state";
 
@@ -20,7 +27,9 @@ type Props = {
   clearAllFilters: (...args: any) => void;
   labels: IIssueLabels[] | undefined;
   members: IUserLite[] | undefined;
-  states: IState[] | undefined;
+  states?: IState[] | undefined;
+  stateGroup?: string[] | undefined;
+  project?: IProject[] | undefined;
 };
 
 export const FiltersList: React.FC<Props> = ({
@@ -30,6 +39,7 @@ export const FiltersList: React.FC<Props> = ({
   labels,
   members,
   states,
+  project,
 }) => {
   if (!filters) return <></>;
 
@@ -155,6 +165,29 @@ export const FiltersList: React.FC<Props> = ({
                     : key === "assignees"
                     ? filters.assignees?.map((memberId: string) => {
                         const member = members?.find((m) => m.id === memberId);
+                        return (
+                          <div
+                            key={memberId}
+                            className="inline-flex items-center gap-x-1 rounded-full bg-custom-background-90 px-1"
+                          >
+                            <Avatar user={member} />
+                            <span>{member?.display_name}</span>
+                            <span
+                              className="cursor-pointer"
+                              onClick={() =>
+                                setFilters({
+                                  assignees: filters.assignees?.filter((p: any) => p !== memberId),
+                                })
+                              }
+                            >
+                              <XMarkIcon className="h-3 w-3" />
+                            </span>
+                          </div>
+                        );
+                      })
+                    : key === "subscriber"
+                    ? filters.subscriber?.map((memberId: string) => {
+                        const member = members?.find((m) => m.id === memberId);
 
                         return (
                           <div
@@ -167,9 +200,7 @@ export const FiltersList: React.FC<Props> = ({
                               className="cursor-pointer"
                               onClick={() =>
                                 setFilters({
-                                  subscriber: filters.subscriber?.filter(
-                                    (p: any) => p !== memberId
-                                  ),
+                                  assignees: filters.assignees?.filter((p: any) => p !== memberId),
                                 })
                               }
                             >
@@ -300,6 +331,30 @@ export const FiltersList: React.FC<Props> = ({
                           </div>
                         );
                       })
+                    : key === "project"
+                    ? filters.project?.map((projectId) => {
+                        const currentProject = project?.find((p) => p.id === projectId);
+                        console.log("currentProject", currentProject);
+                        console.log("currentProject", projectId);
+                        return (
+                          <p
+                            key={currentProject?.id}
+                            className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize"
+                          >
+                            <span>{currentProject?.name}</span>
+                            <span
+                              className="cursor-pointer"
+                              onClick={() =>
+                                setFilters({
+                                  project: filters.project?.filter((p) => p !== projectId),
+                                })
+                              }
+                            >
+                              <XMarkIcon className="h-3 w-3" />
+                            </span>
+                          </p>
+                        );
+                      })
                     : (filters[key] as any)?.join(", ")}
                   <button
                     type="button"

web/components/core/filters/index.ts

@@ -1,5 +1,4 @@
 export * from "./date-filter-modal";
 export * from "./date-filter-select";
 export * from "./filters-list";
-export * from "./workspace-filters-list";
 export * from "./issues-view-filter";

web/components/core/filters/issues-view-filter.tsx

@@ -277,35 +277,33 @@ export const IssuesFilterView: React.FC = () => {
                           </div>
                         </div>
                       )}
-                    {!isArchivedIssues && (
-                      <div className="flex items-center justify-between">
-                        <h4 className="text-custom-text-200">Issue type</h4>
-                        <div className="w-28">
-                          <CustomMenu
-                            label={
-                              FILTER_ISSUE_OPTIONS.find(
-                                (option) => option.key === displayFilters.type
-                              )?.name ?? "Select"
-                            }
-                            className="!w-full"
-                            buttonClassName="w-full"
-                          >
-                            {FILTER_ISSUE_OPTIONS.map((option) => (
-                              <CustomMenu.MenuItem
-                                key={option.key}
-                                onClick={() =>
-                                  setDisplayFilters({
-                                    type: option.key,
-                                  })
-                                }
-                              >
-                                {option.name}
-                              </CustomMenu.MenuItem>
-                            ))}
-                          </CustomMenu>
-                        </div>
+                    <div className="flex items-center justify-between">
+                      <h4 className="text-custom-text-200">Issue type</h4>
+                      <div className="w-28">
+                        <CustomMenu
+                          label={
+                            FILTER_ISSUE_OPTIONS.find(
+                              (option) => option.key === displayFilters.type
+                            )?.name ?? "Select"
+                          }
+                          className="!w-full"
+                          buttonClassName="w-full"
+                        >
+                          {FILTER_ISSUE_OPTIONS.map((option) => (
+                            <CustomMenu.MenuItem
+                              key={option.key}
+                              onClick={() =>
+                                setDisplayFilters({
+                                  type: option.key,
+                                })
+                              }
+                            >
+                              {option.name}
+                            </CustomMenu.MenuItem>
+                          ))}
+                        </CustomMenu>
                       </div>
-                    )}
+                    </div>
 
                     {displayFilters.layout !== "calendar" &&
                       displayFilters.layout !== "spreadsheet" && (

web/components/core/filters/workspace-filters-list.tsx

@@ -1,364 +0,0 @@
-import React from "react";
-
-// icons
-import { XMarkIcon } from "@heroicons/react/24/outline";
-import { PriorityIcon, StateGroupIcon } from "components/icons";
-// ui
-import { Avatar } from "components/ui";
-// helpers
-import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
-// helpers
-import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
-// types
-import {
-  IIssueLabels,
-  IProject,
-  IUserLite,
-  IWorkspaceIssueFilterOptions,
-  TStateGroups,
-} from "types";
-// constants
-import { STATE_GROUP_COLORS } from "constants/state";
-
-type Props = {
-  filters: Partial<IWorkspaceIssueFilterOptions>;
-  setFilters: (updatedFilter: Partial<IWorkspaceIssueFilterOptions>) => void;
-  clearAllFilters: (...args: any) => void;
-  labels: IIssueLabels[] | undefined;
-  members: IUserLite[] | undefined;
-  stateGroup: string[] | undefined;
-  project?: IProject[] | undefined;
-};
-
-export const WorkspaceFiltersList: React.FC<Props> = ({
-  filters,
-  setFilters,
-  clearAllFilters,
-  labels,
-  members,
-  stateGroup,
-  project,
-}) => {
-  if (!filters) return <></>;
-
-  const nullFilters = Object.keys(filters).filter(
-    (key) => filters[key as keyof IWorkspaceIssueFilterOptions] === null
-  );
-
-  return (
-    <div className="flex flex-1 flex-wrap items-center gap-2 text-xs">
-      {Object.keys(filters).map((filterKey) => {
-        const key = filterKey as keyof typeof filters;
-
-        if (filters[key] === null || (filters[key]?.length ?? 0) <= 0) return null;
-
-        return (
-          <div
-            key={key}
-            className="flex items-center gap-x-2 rounded-full border border-custom-border-200 bg-custom-background-80 px-2 py-1"
-          >
-            <span className="capitalize text-custom-text-200">
-              {key === "target_date" ? "Due Date" : replaceUnderscoreIfSnakeCase(key)}:
-            </span>
-            {filters[key] === null || (filters[key]?.length ?? 0) <= 0 ? (
-              <span className="inline-flex items-center px-2 py-0.5 font-medium">None</span>
-            ) : Array.isArray(filters[key]) ? (
-              <div className="space-x-2">
-                <div className="flex flex-wrap items-center gap-1">
-                  {key === "state_group"
-                    ? filters.state_group?.map((stateGroup) => {
-                        const group = stateGroup as TStateGroups;
-
-                        return (
-                          <p
-                            key={group}
-                            className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize"
-                            style={{
-                              color: STATE_GROUP_COLORS[group],
-                              backgroundColor: `${STATE_GROUP_COLORS[group]}20`,
-                            }}
-                          >
-                            <span>
-                              <StateGroupIcon stateGroup={group} color={undefined} />
-                            </span>
-                            <span>{group}</span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  state_group: filters.state_group?.filter((g) => g !== group),
-                                })
-                              }
-                            >
-                              <XMarkIcon className="h-3 w-3" />
-                            </span>
-                          </p>
-                        );
-                      })
-                    : key === "priority"
-                    ? filters.priority?.map((priority: any) => (
-                        <p
-                          key={priority}
-                          className={`inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize ${
-                            priority === "urgent"
-                              ? "bg-red-500/20 text-red-500"
-                              : priority === "high"
-                              ? "bg-orange-500/20 text-orange-500"
-                              : priority === "medium"
-                              ? "bg-yellow-500/20 text-yellow-500"
-                              : priority === "low"
-                              ? "bg-green-500/20 text-green-500"
-                              : "bg-custom-background-90 text-custom-text-200"
-                          }`}
-                        >
-                          <span>
-                            <PriorityIcon priority={priority} />
-                          </span>
-                          <span>{priority === "null" ? "None" : priority}</span>
-                          <span
-                            className="cursor-pointer"
-                            onClick={() =>
-                              setFilters({
-                                priority: filters.priority?.filter((p: any) => p !== priority),
-                              })
-                            }
-                          >
-                            <XMarkIcon className="h-3 w-3" />
-                          </span>
-                        </p>
-                      ))
-                    : key === "assignees"
-                    ? filters.assignees?.map((memberId: string) => {
-                        const member = members?.find((m) => m.id === memberId);
-                        return (
-                          <div
-                            key={memberId}
-                            className="inline-flex items-center gap-x-1 rounded-full bg-custom-background-90 px-1"
-                          >
-                            <Avatar user={member} />
-                            <span>{member?.display_name}</span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  assignees: filters.assignees?.filter((p: any) => p !== memberId),
-                                })
-                              }
-                            >
-                              <XMarkIcon className="h-3 w-3" />
-                            </span>
-                          </div>
-                        );
-                      })
-                    : key === "subscriber"
-                    ? filters.subscriber?.map((memberId: string) => {
-                        const member = members?.find((m) => m.id === memberId);
-
-                        return (
-                          <div
-                            key={memberId}
-                            className="inline-flex items-center gap-x-1 rounded-full bg-custom-background-90 px-1"
-                          >
-                            <Avatar user={member} />
-                            <span>{member?.display_name}</span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  assignees: filters.assignees?.filter((p: any) => p !== memberId),
-                                })
-                              }
-                            >
-                              <XMarkIcon className="h-3 w-3" />
-                            </span>
-                          </div>
-                        );
-                      })
-                    : key === "created_by"
-                    ? filters.created_by?.map((memberId: string) => {
-                        const member = members?.find((m) => m.id === memberId);
-
-                        return (
-                          <div
-                            key={`${memberId}-${key}`}
-                            className="inline-flex items-center gap-x-1 rounded-full bg-custom-background-90 px-1 capitalize"
-                          >
-                            <Avatar user={member} />
-                            <span>{member?.display_name}</span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  created_by: filters.created_by?.filter(
-                                    (p: any) => p !== memberId
-                                  ),
-                                })
-                              }
-                            >
-                              <XMarkIcon className="h-3 w-3" />
-                            </span>
-                          </div>
-                        );
-                      })
-                    : key === "labels"
-                    ? filters.labels?.map((labelId: string) => {
-                        const label = labels?.find((l) => l.id === labelId);
-
-                        if (!label) return null;
-                        const color = label.color !== "" ? label.color : "#0f172a";
-                        return (
-                          <div
-                            className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5"
-                            style={{
-                              color: color,
-                              backgroundColor: `${color}20`, // add 20% opacity
-                            }}
-                            key={labelId}
-                          >
-                            <div
-                              className="h-1.5 w-1.5 rounded-full"
-                              style={{
-                                backgroundColor: color,
-                              }}
-                            />
-                            <span>{label.name}</span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  labels: filters.labels?.filter((l: any) => l !== labelId),
-                                })
-                              }
-                            >
-                              <XMarkIcon
-                                className="h-3 w-3"
-                                style={{
-                                  color: color,
-                                }}
-                              />
-                            </span>
-                          </div>
-                        );
-                      })
-                    : key === "start_date"
-                    ? filters.start_date?.map((date: string) => {
-                        if (filters.start_date && filters.start_date.length <= 0) return null;
-
-                        const splitDate = date.split(";");
-
-                        return (
-                          <div
-                            key={date}
-                            className="inline-flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-100 px-1 py-0.5"
-                          >
-                            <div className="h-1.5 w-1.5 rounded-full" />
-                            <span className="capitalize">
-                              {splitDate[1]} {renderShortDateWithYearFormat(splitDate[0])}
-                            </span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  start_date: filters.start_date?.filter((d: any) => d !== date),
-                                })
-                              }
-                            >
-                              <XMarkIcon className="h-3 w-3" />
-                            </span>
-                          </div>
-                        );
-                      })
-                    : key === "target_date"
-                    ? filters.target_date?.map((date: string) => {
-                        if (filters.target_date && filters.target_date.length <= 0) return null;
-
-                        const splitDate = date.split(";");
-
-                        return (
-                          <div
-                            key={date}
-                            className="inline-flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-100 px-1 py-0.5"
-                          >
-                            <div className="h-1.5 w-1.5 rounded-full" />
-                            <span className="capitalize">
-                              {splitDate[1]} {renderShortDateWithYearFormat(splitDate[0])}
-                            </span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  target_date: filters.target_date?.filter((d: any) => d !== date),
-                                })
-                              }
-                            >
-                              <XMarkIcon className="h-3 w-3" />
-                            </span>
-                          </div>
-                        );
-                      })
-                    : key === "project"
-                    ? filters.project?.map((projectId) => {
-                        const currentProject = project?.find((p) => p.id === projectId);
-                        return (
-                          <p
-                            key={currentProject?.id}
-                            className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize"
-                          >
-                            <span>{currentProject?.name}</span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  project: filters.project?.filter((p) => p !== projectId),
-                                })
-                              }
-                            >
-                              <XMarkIcon className="h-3 w-3" />
-                            </span>
-                          </p>
-                        );
-                      })
-                    : (filters[key] as any)?.join(", ")}
-                  <button
-                    type="button"
-                    onClick={() =>
-                      setFilters({
-                        [key]: null,
-                      })
-                    }
-                  >
-                    <XMarkIcon className="h-3 w-3" />
-                  </button>
-                </div>
-              </div>
-            ) : (
-              <div className="flex items-center gap-x-1 capitalize">
-                {filters[key as keyof typeof filters]}
-                <button
-                  type="button"
-                  onClick={() =>
-                    setFilters({
-                      [key]: null,
-                    })
-                  }
-                >
-                  <XMarkIcon className="h-3 w-3" />
-                </button>
-              </div>
-            )}
-          </div>
-        );
-      })}
-      {Object.keys(filters).length > 0 && nullFilters.length !== Object.keys(filters).length && (
-        <button
-          type="button"
-          onClick={clearAllFilters}
-          className="flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-80 px-3 py-1.5 text-xs"
-        >
-          <span>Clear all filters</span>
-          <XMarkIcon className="h-3 w-3" />
-        </button>
-      )}
-    </div>
-  );
-};

web/components/core/image-picker-popover.tsx

@@ -1,23 +1,32 @@
 import React, { useEffect, useState, useRef, useCallback } from "react";
+
+// next
 import Image from "next/image";
 import { useRouter } from "next/router";
+
+// swr
 import useSWR from "swr";
+
+// react-dropdown
 import { useDropzone } from "react-dropzone";
+
+// headless ui
 import { Tab, Transition, Popover } from "@headlessui/react";
 
 // services
 import fileService from "services/file.service";
+
+// components
+import { Input, Spinner, PrimaryButton, SecondaryButton } from "components/ui";
 // hooks
 import useWorkspaceDetails from "hooks/use-workspace-details";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
-// components
-import { Input, PrimaryButton, SecondaryButton, Loader } from "components/ui";
+
+const unsplashEnabled =
+  process.env.NEXT_PUBLIC_UNSPLASH_ENABLED === "true" ||
+  process.env.NEXT_PUBLIC_UNSPLASH_ENABLED === "1";
 
 const tabOptions = [
-  {
-    key: "unsplash",
-    title: "Unsplash",
-  },
   {
     key: "images",
     title: "Images",
@@ -55,22 +64,8 @@ export const ImagePickerPopover: React.FC<Props> = ({
     search: "",
   });
 
-  const { data: unsplashImages, error: unsplashError } = useSWR(
-    `UNSPLASH_IMAGES_${searchParams}`,
-    () => fileService.getUnsplashImages(searchParams),
-    {
-      revalidateOnFocus: false,
-      revalidateOnReconnect: false,
-    }
-  );
-
-  const { data: projectCoverImages } = useSWR(
-    `PROJECT_COVER_IMAGES`,
-    () => fileService.getProjectCoverImages(),
-    {
-      revalidateOnFocus: false,
-      revalidateOnReconnect: false,
-    }
+  const { data: images } = useSWR(`UNSPLASH_IMAGES_${searchParams}`, () =>
+    fileService.getUnsplashImages(1, searchParams)
   );
 
   const imagePickerRef = useRef<HTMLDivElement>(null);
@@ -120,17 +115,18 @@ export const ImagePickerPopover: React.FC<Props> = ({
   };
 
   useEffect(() => {
-    if (!unsplashImages || value !== null) return;
-
-    onChange(unsplashImages[0].urls.regular);
-  }, [value, onChange, unsplashImages]);
+    if (!images || value !== null) return;
+    onChange(images[0].urls.regular);
+  }, [value, onChange, images]);
 
   useOutsideClickDetector(imagePickerRef, () => setIsOpen(false));
 
+  if (!unsplashEnabled) return null;
+
   return (
     <Popover className="relative z-[2]" ref={ref}>
       <Popover.Button
-        className="rounded border border-custom-border-300 bg-custom-background-100 px-2 py-1 text-xs text-custom-text-200 hover:text-custom-text-100"
+        className="rounded-sm border border-custom-border-300 bg-custom-background-100 px-2 py-1 text-xs text-custom-text-200 hover:text-custom-text-100"
         onClick={() => setIsOpen((prev) => !prev)}
         disabled={disabled}
       >
@@ -145,19 +141,15 @@ export const ImagePickerPopover: React.FC<Props> = ({
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Popover.Panel className="absolute right-0 z-10 mt-2 rounded-md border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-sm">
+        <Popover.Panel className="absolute right-0 z-10 mt-2 rounded-md border border-custom-border-200 bg-custom-background-80 shadow-lg">
           <div
             ref={imagePickerRef}
             className="h-96 md:h-[28rem] w-80 md:w-[36rem] flex flex-col overflow-auto rounded border border-custom-border-300 bg-custom-background-100 p-3 shadow-2xl"
           >
             <Tab.Group>
-              <Tab.List as="span" className="inline-block rounded bg-custom-background-80 p-1">
-                {tabOptions.map((tab) => {
-                  if (!unsplashImages && unsplashError && tab.key === "unsplash") return null;
-                  if (projectCoverImages && projectCoverImages.length === 0 && tab.key === "images")
-                    return null;
-
-                  return (
+              <div>
+                <Tab.List as="span" className="inline-block rounded bg-custom-background-80 p-1">
+                  {tabOptions.map((tab) => (
                     <Tab
                       key={tab.key}
                       className={({ selected }) =>
@@ -168,106 +160,50 @@ export const ImagePickerPopover: React.FC<Props> = ({
                     >
                       {tab.title}
                     </Tab>
-                  );
-                })}
-              </Tab.List>
+                  ))}
+                </Tab.List>
+              </div>
               <Tab.Panels className="h-full w-full flex-1 overflow-y-auto overflow-x-hidden">
-                {(unsplashImages || !unsplashError) && (
-                  <Tab.Panel className="h-full w-full space-y-4 mt-4">
-                    <div className="flex gap-x-2">
-                      <Input
-                        name="search"
-                        className="text-sm"
-                        id="search"
-                        value={formData.search}
-                        onChange={(e) => setFormData({ ...formData, search: e.target.value })}
-                        placeholder="Search for images"
-                      />
-                      <PrimaryButton onClick={() => setSearchParams(formData.search)} size="sm">
-                        Search
-                      </PrimaryButton>
+                <Tab.Panel className="h-full w-full space-y-4">
+                  <div className="flex gap-x-2 pt-7">
+                    <Input
+                      name="search"
+                      className="text-sm"
+                      id="search"
+                      value={formData.search}
+                      onChange={(e) => setFormData({ ...formData, search: e.target.value })}
+                      placeholder="Search for images"
+                    />
+                    <PrimaryButton onClick={() => setSearchParams(formData.search)} size="sm">
+                      Search
+                    </PrimaryButton>
+                  </div>
+                  {images ? (
+                    <div className="grid grid-cols-4 gap-4">
+                      {images.map((image) => (
+                        <div
+                          key={image.id}
+                          className="relative col-span-2 aspect-video md:col-span-1"
+                        >
+                          <img
+                            src={image.urls.small}
+                            alt={image.alt_description}
+                            className="cursor-pointer rounded absolute top-0 left-0 h-full w-full object-cover"
+                            onClick={() => {
+                              setIsOpen(false);
+                              onChange(image.urls.regular);
+                            }}
+                          />
+                        </div>
+                      ))}
                     </div>
-                    {unsplashImages ? (
-                      unsplashImages.length > 0 ? (
-                        <div className="grid grid-cols-4 gap-4">
-                          {unsplashImages.map((image) => (
-                            <div
-                              key={image.id}
-                              className="relative col-span-2 aspect-video md:col-span-1"
-                              onClick={() => {
-                                setIsOpen(false);
-                                onChange(image.urls.regular);
-                              }}
-                            >
-                              <img
-                                src={image.urls.small}
-                                alt={image.alt_description}
-                                className="cursor-pointer rounded absolute top-0 left-0 h-full w-full object-cover"
-                              />
-                            </div>
-                          ))}
-                        </div>
-                      ) : (
-                        <p className="text-center text-custom-text-300 text-xs pt-7">
-                          No images found.
-                        </p>
-                      )
-                    ) : (
-                      <Loader className="grid grid-cols-4 gap-4">
-                        <Loader.Item height="80px" width="100%" />
-                        <Loader.Item height="80px" width="100%" />
-                        <Loader.Item height="80px" width="100%" />
-                        <Loader.Item height="80px" width="100%" />
-                        <Loader.Item height="80px" width="100%" />
-                        <Loader.Item height="80px" width="100%" />
-                        <Loader.Item height="80px" width="100%" />
-                        <Loader.Item height="80px" width="100%" />
-                      </Loader>
-                    )}
-                  </Tab.Panel>
-                )}
-                {(!projectCoverImages || projectCoverImages.length !== 0) && (
-                  <Tab.Panel className="h-full w-full space-y-4 mt-4">
-                    {projectCoverImages ? (
-                      projectCoverImages.length > 0 ? (
-                        <div className="grid grid-cols-4 gap-4">
-                          {projectCoverImages.map((image, index) => (
-                            <div
-                              key={image}
-                              className="relative col-span-2 aspect-video md:col-span-1"
-                              onClick={() => {
-                                setIsOpen(false);
-                                onChange(image);
-                              }}
-                            >
-                              <img
-                                src={image}
-                                alt={`Default project cover image- ${index}`}
-                                className="cursor-pointer rounded absolute top-0 left-0 h-full w-full object-cover"
-                              />
-                            </div>
-                          ))}
-                        </div>
-                      ) : (
-                        <p className="text-center text-custom-text-300 text-xs pt-7">
-                          No images found.
-                        </p>
-                      )
-                    ) : (
-                      <Loader className="grid grid-cols-4 gap-4 pt-4">
-                        <Loader.Item height="80px" width="100%" />
-                        <Loader.Item height="80px" width="100%" />
-                        <Loader.Item height="80px" width="100%" />
-                        <Loader.Item height="80px" width="100%" />
-                        <Loader.Item height="80px" width="100%" />
-                        <Loader.Item height="80px" width="100%" />
-                        <Loader.Item height="80px" width="100%" />
-                        <Loader.Item height="80px" width="100%" />
-                      </Loader>
-                    )}
-                  </Tab.Panel>
-                )}
-                <Tab.Panel className="h-full w-full mt-4">
+                  ) : (
+                    <div className="flex justify-center pt-20">
+                      <Spinner />
+                    </div>
+                  )}
+                </Tab.Panel>
+                <Tab.Panel className="h-full w-full pt-5">
                   <div className="w-full h-full flex flex-col gap-y-2">
                     <div className="flex items-center gap-3 w-full flex-1">
                       <div

web/components/core/views/board-view/inline-create-issue-form.tsx

@@ -48,7 +48,7 @@ const InlineInput = () => {
 export const BoardInlineCreateIssueForm: React.FC<Props> = (props) => (
   <>
     <InlineCreateIssueFormWrapper
-      className="flex flex-col border-[0.5px] border-custom-border-100 justify-between gap-1.5 group/card relative select-none px-3.5 py-3 h-[118px] mb-3 rounded bg-custom-background-100 shadow-custom-shadow-sm"
+      className="flex flex-col justify-between gap-1.5 group/card relative select-none px-3.5 py-3 h-[118px] mb-3 rounded bg-custom-background-100 shadow-custom-shadow-sm"
       {...props}
     >
       <InlineInput />

web/components/core/views/board-view/single-board.tsx

@@ -6,7 +6,6 @@ import { useRouter } from "next/router";
 import StrictModeDroppable from "components/dnd/StrictModeDroppable";
 import { Draggable } from "react-beautiful-dnd";
 // components
-import { CreateUpdateDraftIssueModal } from "components/issues";
 import { BoardHeader, SingleBoardIssue, BoardInlineCreateIssueForm } from "components/core";
 // ui
 import { CustomMenu } from "components/ui";
@@ -58,7 +57,6 @@ export const SingleBoard: React.FC<Props> = (props) => {
   const [isCollapsed, setIsCollapsed] = useState(true);
 
   const [isInlineCreateIssueFormOpen, setIsInlineCreateIssueFormOpen] = useState(false);
-  const [isCreateDraftIssueModalOpen, setIsCreateDraftIssueModalOpen] = useState(false);
 
   const { displayFilters, groupedIssues } = viewProps;
 
@@ -77,7 +75,9 @@ export const SingleBoard: React.FC<Props> = (props) => {
 
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disableUserActions;
 
-  const scrollToBottom = () => {
+  const onCreateClick = () => {
+    setIsInlineCreateIssueFormOpen(true);
+
     const boardListElement = document.getElementById(`board-list-${groupTitle}`);
 
     // timeout is needed because the animation
@@ -93,32 +93,10 @@ export const SingleBoard: React.FC<Props> = (props) => {
     }, 10);
   };
 
-  const onCreateClick = () => {
-    setIsInlineCreateIssueFormOpen(true);
-    scrollToBottom();
-  };
-
-  const handleAddIssueToGroup = () => {
-    if (isDraftIssuesPage) setIsCreateDraftIssueModalOpen(true);
-    else if (isMyIssuesPage || isProfileIssuesPage) addIssueToGroup();
-    else onCreateClick();
-  };
-
   return (
     <div className={`flex-shrink-0 ${!isCollapsed ? "" : "flex h-full flex-col w-96"}`}>
-      <CreateUpdateDraftIssueModal
-        isOpen={isCreateDraftIssueModalOpen}
-        handleClose={() => setIsCreateDraftIssueModalOpen(false)}
-        prePopulateData={{
-          ...(cycleId && { cycle: cycleId.toString() }),
-          ...(moduleId && { module: moduleId.toString() }),
-          [displayFilters?.group_by! === "labels" ? "labels_list" : displayFilters?.group_by!]:
-            displayFilters?.group_by === "labels" ? [groupTitle] : groupTitle,
-        }}
-      />
-
       <BoardHeader
-        addIssueToGroup={handleAddIssueToGroup}
+        addIssueToGroup={addIssueToGroup}
         currentState={currentState}
         groupTitle={groupTitle}
         isCollapsed={isCollapsed}
@@ -223,7 +201,6 @@ export const SingleBoard: React.FC<Props> = (props) => {
                 <BoardInlineCreateIssueForm
                   isOpen={isInlineCreateIssueFormOpen}
                   handleClose={() => setIsInlineCreateIssueFormOpen(false)}
-                  onSuccess={() => scrollToBottom()}
                   prePopulatedData={{
                     ...(cycleId && { cycle: cycleId.toString() }),
                     ...(moduleId && { module: moduleId.toString() }),
@@ -237,22 +214,21 @@ export const SingleBoard: React.FC<Props> = (props) => {
               {displayFilters?.group_by !== "created_by" && (
                 <div>
                   {type === "issue"
-                    ? !disableAddIssueOption &&
-                      !isDraftIssuesPage && (
+                    ? !disableAddIssueOption && (
                         <button
                           type="button"
                           className="flex items-center gap-2 font-medium text-custom-primary outline-none p-1"
                           onClick={() => {
-                            if (isMyIssuesPage || isProfileIssuesPage) addIssueToGroup();
-                            else onCreateClick();
+                            if (isDraftIssuesPage || isMyIssuesPage || isProfileIssuesPage) {
+                              addIssueToGroup();
+                            } else onCreateClick();
                           }}
                         >
                           <PlusIcon className="h-4 w-4" />
                           Add Issue
                         </button>
                       )
-                    : !disableUserActions &&
-                      !isDraftIssuesPage && (
+                    : !disableUserActions && (
                         <CustomMenu
                           customButton={
                             <button
@@ -266,13 +242,7 @@ export const SingleBoard: React.FC<Props> = (props) => {
                           position="left"
                           noBorder
                         >
-                          <CustomMenu.MenuItem
-                            onClick={() => {
-                              if (isDraftIssuesPage) setIsCreateDraftIssueModalOpen(true);
-                              else if (isMyIssuesPage || isProfileIssuesPage) addIssueToGroup();
-                              else onCreateClick();
-                            }}
-                          >
+                          <CustomMenu.MenuItem onClick={() => onCreateClick()}>
                             Create new
                           </CustomMenu.MenuItem>
                           {openIssuesListModal && (

web/components/core/views/calendar-view/inline-create-issue-form.tsx

@@ -67,7 +67,7 @@ const InlineInput = () => {
         {...register("name", {
           required: "Issue title is required.",
         })}
-        className="w-full pr-2 py-2.5 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
+        className="w-full px-2 py-1.5 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
       />
     </>
   );
@@ -84,13 +84,13 @@ export const CalendarInlineCreateIssueForm: React.FC<Props> = (props) => {
     <>
       <div
         ref={ref}
-        className={`absolute top-10 transition-all z-20 w-full max-w-[calc(100%-1.25rem)] ${
+        className={`absolute w-60 top-5 transition-all z-20 ${
           isOpen ? "opacity-100 scale-100" : "opacity-0 pointer-events-none scale-95"
-        } right-2.5`}
+        } right-0`}
       >
         <InlineCreateIssueFormWrapper
           {...props}
-          className="flex w-full px-1.5 border-[0.5px] border-custom-border-100 rounded z-50 items-center gap-x-2 bg-custom-background-100 shadow-custom-shadow-sm transition-opacity"
+          className="flex w-full p-1 px-1.5 rounded z-50 items-center gap-x-3 bg-custom-background-100 shadow-custom-shadow-sm transition-opacity"
         >
           <InlineInput />
         </InlineCreateIssueFormWrapper>

web/components/core/views/calendar-view/single-date.tsx

@@ -80,17 +80,23 @@ export const SingleCalendarDate: React.FC<Props> = (props) => {
                   )}
                 </Draggable>
               ))}
-
-            <CalendarInlineCreateIssueForm
-              isOpen={isCreateIssueFormOpen}
-              dependencies={[showWeekEnds]}
-              handleClose={() => setIsCreateIssueFormOpen(false)}
-              prePopulatedData={{
-                target_date: date.date,
-                ...(cycleId && { cycle: cycleId.toString() }),
-                ...(moduleId && { module: moduleId.toString() }),
+            <div
+              className="fixed top-0 left-0 z-50"
+              style={{
+                transform: `translate(${formPosition.x}px, ${formPosition.y}px)`,
               }}
-            />
+            >
+              <CalendarInlineCreateIssueForm
+                isOpen={isCreateIssueFormOpen}
+                dependencies={[showWeekEnds]}
+                handleClose={() => setIsCreateIssueFormOpen(false)}
+                prePopulatedData={{
+                  target_date: date.date,
+                  ...(cycleId && { cycle: cycleId.toString() }),
+                  ...(moduleId && { module: moduleId.toString() }),
+                }}
+              />
+            </div>
 
             {totalIssues > 4 && (
               <button

web/components/core/views/gantt-chart-view/inline-create-issue-form.tsx

@@ -48,7 +48,7 @@ const InlineInput = () => {
 export const GanttInlineCreateIssueForm: React.FC<Props> = (props) => (
   <>
     <InlineCreateIssueFormWrapper
-      className="flex py-3 px-4 border-[0.5px] border-custom-border-100 mr-2.5 items-center rounded gap-x-2 bg-custom-background-100 shadow-custom-shadow-sm"
+      className="flex py-3 px-4 mr-2.5 items-center rounded gap-x-2 border bg-custom-background-100 shadow-custom-shadow-sm"
       {...props}
     >
       <InlineInput />

web/components/core/views/inline-issue-create-wrapper.tsx

@@ -197,7 +197,7 @@ export const InlineCreateIssueFormWrapper: React.FC<Props> = (props) => {
         )
     )
       .then(async (res) => {
-        await mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params));
+        mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params));
         if (formData.cycle && formData.cycle !== "")
           await addIssueToCycle(
             workspaceSlug.toString(),

web/components/core/views/issues-view.tsx

@@ -81,9 +81,7 @@ export const IssuesView: React.FC<Props> = ({
 
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
-
-  const isDraftIssues = router.pathname?.split("/")?.[4] === "draft-issues";
-  const isArchivedIssues = router.pathname?.split("/")?.[4] === "archived-issues";
+  const isDraftIssues = router.asPath.includes("draft-issues");
 
   const { user } = useUserAuth();
 
@@ -483,6 +481,7 @@ export const IssuesView: React.FC<Props> = ({
       <CreateUpdateViewModal
         isOpen={createViewModal !== null}
         handleClose={() => setCreateViewModal(null)}
+        viewType="project"
         preLoadedData={createViewModal}
         user={user}
       />
@@ -626,7 +625,6 @@ export const IssuesView: React.FC<Props> = ({
           params,
           properties,
         }}
-        disableAddIssueOption={isArchivedIssues}
       />
     </>
   );

web/components/core/views/list-view/inline-create-issue-form.tsx

@@ -39,7 +39,7 @@ const InlineInput = () => {
         {...register("name", {
           required: "Issue title is required.",
         })}
-        className="w-full px-2 py-3 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
+        className="w-full px-2 py-1.5 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
       />
     </>
   );
@@ -48,7 +48,7 @@ const InlineInput = () => {
 export const ListInlineCreateIssueForm: React.FC<Props> = (props) => (
   <>
     <InlineCreateIssueFormWrapper
-      className="flex border-[0.5px] border-t-0 border-custom-border-100 px-4 items-center gap-x-5 bg-custom-background-100 shadow-custom-shadow-sm z-10"
+      className="flex py-3 px-4 items-center gap-x-5 bg-custom-background-100 shadow-custom-shadow-sm z-10"
       {...props}
     >
       <InlineInput />

web/components/core/views/list-view/single-issue.tsx

@@ -328,7 +328,7 @@ export const SingleListIssue: React.FC<Props> = ({
       </ContextMenu>
 
       <div
-        className="flex items-center justify-between px-4 py-2.5 gap-10 border-b-[0.5px] border-custom-border-100 bg-custom-background-100 last:border-b-0"
+        className="flex items-center justify-between px-4 py-2.5 gap-10 border-b border-custom-border-200 bg-custom-background-100 last:border-b-0"
         onContextMenu={(e) => {
           e.preventDefault();
           setContextMenu(true);
@@ -352,7 +352,6 @@ export const SingleListIssue: React.FC<Props> = ({
                 type="button"
                 className="truncate text-[0.825rem] text-custom-text-100"
                 onClick={() => {
-                  if (isArchivedIssues) return router.push(issuePath);
                   if (!isDraftIssues) openPeekOverview(issue);
                   if (isDraftIssues && handleDraftIssueSelect) handleDraftIssueSelect(issue);
                 }}

web/components/core/views/list-view/single-list.tsx

@@ -13,7 +13,6 @@ import projectService from "services/project.service";
 // hooks
 import useProjects from "hooks/use-projects";
 // components
-import { CreateUpdateDraftIssueModal } from "components/issues";
 import { SingleListIssue, ListInlineCreateIssueForm } from "components/core";
 // ui
 import { Avatar, CustomMenu } from "components/ui";
@@ -76,7 +75,6 @@ export const SingleList: React.FC<Props> = (props) => {
   const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
 
   const [isCreateIssueFormOpen, setIsCreateIssueFormOpen] = useState(false);
-  const [isDraftIssuesModalOpen, setIsDraftIssuesModalOpen] = useState(false);
 
   const isMyIssuesPage = router.pathname.split("/")[3] === "my-issues";
   const isProfileIssuesPage = router.pathname.split("/")[2] === "profile";
@@ -210,169 +208,149 @@ export const SingleList: React.FC<Props> = (props) => {
   if (!groupedIssues) return null;
 
   return (
-    <>
-      <CreateUpdateDraftIssueModal
-        isOpen={isDraftIssuesModalOpen}
-        handleClose={() => setIsDraftIssuesModalOpen(false)}
-        prePopulateData={{
-          ...(cycleId && { cycle: cycleId.toString() }),
-          ...(moduleId && { module: moduleId.toString() }),
-          [displayFilters?.group_by! === "labels" ? "labels_list" : displayFilters?.group_by!]:
-            displayFilters?.group_by === "labels" ? [groupTitle] : groupTitle,
-        }}
-      />
+    <Disclosure as="div" defaultOpen>
+      {({ open }) => (
+        <div>
+          <div className="flex items-center justify-between px-4 py-2.5 bg-custom-background-90">
+            <Disclosure.Button>
+              <div className="flex items-center gap-x-3">
+                {displayFilters?.group_by !== null && (
+                  <div className="flex items-center">{getGroupIcon()}</div>
+                )}
+                {displayFilters?.group_by !== null ? (
+                  <h2
+                    className={`text-sm font-semibold leading-6 text-custom-text-100 ${
+                      displayFilters?.group_by === "created_by" ? "" : "capitalize"
+                    }`}
+                  >
+                    {getGroupTitle()}
+                  </h2>
+                ) : (
+                  <h2 className="font-medium leading-5">All Issues</h2>
+                )}
+                <span className="text-custom-text-200 min-w-[2.5rem] rounded-full bg-custom-background-80 py-1 text-center text-xs">
+                  {groupedIssues[groupTitle as keyof IIssue].length}
+                </span>
+              </div>
+            </Disclosure.Button>
+            {isArchivedIssues ? (
+              ""
+            ) : type === "issue" ? (
+              !disableAddIssueOption && (
+                <button
+                  type="button"
+                  className="p-1  text-custom-text-200 hover:bg-custom-background-80"
+                  onClick={() => setIsCreateIssueFormOpen(true)}
+                >
+                  <PlusIcon className="h-4 w-4" />
+                </button>
+              )
+            ) : disableUserActions ? (
+              ""
+            ) : (
+              <CustomMenu
+                customButton={
+                  <div className="flex cursor-pointer items-center">
+                    <PlusIcon className="h-4 w-4" />
+                  </div>
+                }
+                position="right"
+                noBorder
+              >
+                <CustomMenu.MenuItem onClick={() => setIsCreateIssueFormOpen(true)}>
+                  Create new
+                </CustomMenu.MenuItem>
+                {openIssuesListModal && (
+                  <CustomMenu.MenuItem onClick={openIssuesListModal}>
+                    Add an existing issue
+                  </CustomMenu.MenuItem>
+                )}
+              </CustomMenu>
+            )}
+          </div>
+          <Transition
+            show={open}
+            enter="transition duration-100 ease-out"
+            enterFrom="transform opacity-0"
+            enterTo="transform opacity-100"
+            leave="transition duration-75 ease-out"
+            leaveFrom="transform opacity-100"
+            leaveTo="transform opacity-0"
+          >
+            <Disclosure.Panel>
+              {groupedIssues[groupTitle] ? (
+                groupedIssues[groupTitle].length > 0 ? (
+                  groupedIssues[groupTitle].map((issue, index) => (
+                    <SingleListIssue
+                      key={issue.id}
+                      type={type}
+                      issue={issue}
+                      projectId={issue.project_detail.id}
+                      groupTitle={groupTitle}
+                      index={index}
+                      editIssue={() => handleIssueAction(issue, "edit")}
+                      makeIssueCopy={() => handleIssueAction(issue, "copy")}
+                      handleDeleteIssue={() => handleIssueAction(issue, "delete")}
+                      handleDraftIssueSelect={
+                        handleDraftIssueAction
+                          ? () => handleDraftIssueAction(issue, "edit")
+                          : undefined
+                      }
+                      handleDraftIssueDelete={
+                        handleDraftIssueAction
+                          ? () => handleDraftIssueAction(issue, "delete")
+                          : undefined
+                      }
+                      handleMyIssueOpen={handleMyIssueOpen}
+                      removeIssue={() => {
+                        if (removeIssue !== null && issue.bridge_id)
+                          removeIssue(issue.bridge_id, issue.id);
+                      }}
+                      disableUserActions={disableUserActions}
+                      user={user}
+                      userAuth={userAuth}
+                      viewProps={viewProps}
+                    />
+                  ))
+                ) : (
+                  <p className="bg-custom-background-100 px-4 py-2.5 text-sm text-custom-text-200">
+                    No issues.
+                  </p>
+                )
+              ) : (
+                <div className="flex h-full w-full items-center justify-center">Loading...</div>
+              )}
 
-      <Disclosure as="div" defaultOpen>
-        {({ open }) => (
-          <div>
-            <div className="flex items-center justify-between px-4 py-2.5 bg-custom-background-90">
-              <Disclosure.Button>
-                <div className="flex items-center gap-x-3">
-                  {displayFilters?.group_by !== null && (
-                    <div className="flex items-center">{getGroupIcon()}</div>
-                  )}
-                  {displayFilters?.group_by !== null ? (
-                    <h2
-                      className={`text-sm font-semibold leading-6 text-custom-text-100 ${
-                        displayFilters?.group_by === "created_by" ? "" : "capitalize"
-                      }`}
-                    >
-                      {getGroupTitle()}
-                    </h2>
-                  ) : (
-                    <h2 className="font-medium leading-5">All Issues</h2>
-                  )}
-                  <span className="text-custom-text-200 min-w-[2.5rem] rounded-full bg-custom-background-80 py-1 text-center text-xs">
-                    {groupedIssues[groupTitle as keyof IIssue].length}
-                  </span>
-                </div>
-              </Disclosure.Button>
-              {isArchivedIssues ? (
-                ""
-              ) : type === "issue" ? (
-                !disableAddIssueOption && (
+              <ListInlineCreateIssueForm
+                isOpen={isCreateIssueFormOpen && !disableAddIssueOption}
+                handleClose={() => setIsCreateIssueFormOpen(false)}
+                prePopulatedData={{
+                  ...(cycleId && { cycle: cycleId.toString() }),
+                  ...(moduleId && { module: moduleId.toString() }),
+                  [displayFilters?.group_by!]: groupTitle,
+                }}
+              />
+
+              {!disableAddIssueOption && !isCreateIssueFormOpen && (
+                <div className="w-full bg-custom-background-100 px-6 py-3">
                   <button
                     type="button"
-                    className="p-1 text-custom-text-200 hover:bg-custom-background-80"
                     onClick={() => {
-                      if (isDraftIssuesPage) setIsDraftIssuesModalOpen(true);
-                      else if (isMyIssuesPage || isProfileIssuesPage) addIssueToGroup();
-                      else setIsCreateIssueFormOpen(true);
+                      if (isDraftIssuesPage || isMyIssuesPage || isProfileIssuesPage) {
+                        addIssueToGroup();
+                      } else setIsCreateIssueFormOpen(true);
                     }}
+                    className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md"
                   >
                     <PlusIcon className="h-4 w-4" />
+                    <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
                   </button>
-                )
-              ) : disableUserActions ? (
-                ""
-              ) : (
-                <CustomMenu
-                  customButton={
-                    <div className="flex cursor-pointer items-center">
-                      <PlusIcon className="h-4 w-4" />
-                    </div>
-                  }
-                  position="right"
-                  noBorder
-                >
-                  <CustomMenu.MenuItem onClick={() => setIsCreateIssueFormOpen(true)}>
-                    Create new
-                  </CustomMenu.MenuItem>
-                  {openIssuesListModal && (
-                    <CustomMenu.MenuItem onClick={openIssuesListModal}>
-                      Add an existing issue
-                    </CustomMenu.MenuItem>
-                  )}
-                </CustomMenu>
+                </div>
               )}
-            </div>
-            <Transition
-              show={open}
-              enter="transition duration-100 ease-out"
-              enterFrom="transform opacity-0"
-              enterTo="transform opacity-100"
-              leave="transition duration-75 ease-out"
-              leaveFrom="transform opacity-100"
-              leaveTo="transform opacity-0"
-            >
-              <Disclosure.Panel>
-                {groupedIssues[groupTitle] ? (
-                  groupedIssues[groupTitle].length > 0 ? (
-                    groupedIssues[groupTitle].map((issue, index) => (
-                      <SingleListIssue
-                        key={issue.id}
-                        type={type}
-                        issue={issue}
-                        projectId={issue.project_detail.id}
-                        groupTitle={groupTitle}
-                        index={index}
-                        editIssue={() => handleIssueAction(issue, "edit")}
-                        makeIssueCopy={() => handleIssueAction(issue, "copy")}
-                        handleDeleteIssue={() => handleIssueAction(issue, "delete")}
-                        handleDraftIssueSelect={
-                          handleDraftIssueAction
-                            ? () => handleDraftIssueAction(issue, "edit")
-                            : undefined
-                        }
-                        handleDraftIssueDelete={
-                          handleDraftIssueAction
-                            ? () => handleDraftIssueAction(issue, "delete")
-                            : undefined
-                        }
-                        handleMyIssueOpen={handleMyIssueOpen}
-                        removeIssue={() => {
-                          if (removeIssue !== null && issue.bridge_id)
-                            removeIssue(issue.bridge_id, issue.id);
-                        }}
-                        disableUserActions={disableUserActions}
-                        user={user}
-                        userAuth={userAuth}
-                        viewProps={viewProps}
-                      />
-                    ))
-                  ) : (
-                    <p className="bg-custom-background-100 px-4 py-2.5 text-sm text-custom-text-200">
-                      No issues.
-                    </p>
-                  )
-                ) : (
-                  <div className="flex h-full w-full items-center justify-center">Loading...</div>
-                )}
-
-                <ListInlineCreateIssueForm
-                  isOpen={isCreateIssueFormOpen && !disableAddIssueOption}
-                  handleClose={() => setIsCreateIssueFormOpen(false)}
-                  prePopulatedData={{
-                    ...(cycleId && { cycle: cycleId.toString() }),
-                    ...(moduleId && { module: moduleId.toString() }),
-                    [displayFilters?.group_by! === "labels"
-                      ? "labels_list"
-                      : displayFilters?.group_by!]:
-                      displayFilters?.group_by === "labels" ? [groupTitle] : groupTitle,
-                  }}
-                />
-
-                {!disableAddIssueOption && !isCreateIssueFormOpen && !isDraftIssuesPage && (
-                  <div className="w-full bg-custom-background-100 px-6 py-3 border-b border-custom-border-100">
-                    <button
-                      type="button"
-                      onClick={() => {
-                        if (isDraftIssuesPage) setIsDraftIssuesModalOpen(true);
-                        else if (isMyIssuesPage || isProfileIssuesPage) addIssueToGroup();
-                        else setIsCreateIssueFormOpen(true);
-                      }}
-                      className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md"
-                    >
-                      <PlusIcon className="h-4 w-4" />
-                      <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
-                    </button>
-                  </div>
-                )}
-              </Disclosure.Panel>
-            </Transition>
-          </div>
-        )}
-      </Disclosure>
-    </>
+            </Disclosure.Panel>
+          </Transition>
+        </div>
+      )}
+    </Disclosure>
   );
 };

web/components/core/views/spreadsheet-view/assignee-column/assignee-column.tsx

@@ -54,7 +54,7 @@ export const AssigneeColumn: React.FC<Props> = ({
 
   return (
     <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
+      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-200">
         {properties.assignee && (
           <MembersSelect
             value={issue.assignees}

web/components/core/views/spreadsheet-view/created-on-column/created-on-column.tsx

@@ -23,7 +23,7 @@ export const CreatedOnColumn: React.FC<Props> = ({
   isNotAllowed,
 }) => (
   <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-    <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
+    <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-200">
       {properties.created_on && (
         <div className="flex items-center text-xs cursor-default text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
           {renderLongDetailDateFormat(issue.created_at)}

web/components/core/views/spreadsheet-view/due-date-column/due-date-column.tsx

@@ -23,7 +23,7 @@ export const DueDateColumn: React.FC<Props> = ({
   isNotAllowed,
 }) => (
   <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-    <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
+    <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-200">
       {properties.due_date && (
         <ViewDueDateSelect
           issue={issue}

web/components/core/views/spreadsheet-view/estimate-column/estimate-column.tsx

@@ -23,7 +23,7 @@ export const EstimateColumn: React.FC<Props> = ({
   isNotAllowed,
 }) => (
   <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-    <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
+    <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-200">
       {properties.estimate && (
         <ViewEstimateSelect
           issue={issue}

web/components/core/views/spreadsheet-view/index.ts

@@ -10,4 +10,5 @@ export * from "./state-column";
 export * from "./updated-on-column";
 export * from "./spreadsheet-view";
 export * from "./issue-column/issue-column";
+export * from "./spreadsheet-columns";
 export * from "./issue-column/spreadsheet-issue-column";

web/components/core/views/spreadsheet-view/issue-column/issue-column.tsx

@@ -82,90 +82,89 @@ export const IssueColumn: React.FC<Props> = ({
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
   return (
-    <div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-r border-custom-border-100">
-      {properties.key && (
-        <div
-          className="flex gap-1.5 px-4 pr-0 py-2.5 items-center min-w-[96px]"
-          style={issue.parent && nestingLevel !== 0 ? { paddingLeft } : {}}
-        >
-          <div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100">
-            <span className="flex items-center justify-center font-medium opacity-100 group-hover:opacity-0 ">
+    <div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-r border-custom-border-200 ">
+      <div
+        className="flex gap-1.5 px-4 pr-0 py-2.5 items-center"
+        style={issue.parent ? { paddingLeft } : {}}
+      >
+        <div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100">
+          {properties.key && (
+            <span className="flex items-center justify-center font-medium opacity-100 group-hover:opacity-0">
               {issue.project_detail?.identifier}-{issue.sequence_id}
             </span>
-
-            {!isNotAllowed && !disableUserActions && (
-              <div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">
-                <Popover2
-                  isOpen={isOpen}
-                  canEscapeKeyClose
-                  onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
-                  content={
-                    <div
-                      className={`flex flex-col gap-1.5 overflow-y-scroll whitespace-nowrap rounded-md border p-1 text-xs shadow-lg focus:outline-none max-h-44 min-w-full border-custom-border-100 bg-custom-background-90`}
+          )}
+          {!isNotAllowed && !disableUserActions && (
+            <div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">
+              <Popover2
+                isOpen={isOpen}
+                canEscapeKeyClose
+                onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
+                content={
+                  <div
+                    className={`flex flex-col gap-1.5 overflow-y-scroll whitespace-nowrap rounded-md border p-1 text-xs shadow-lg focus:outline-none max-h-44 min-w-full border-custom-border-200 bg-custom-background-90`}
+                  >
+                    <button
+                      type="button"
+                      className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
+                      onClick={() => {
+                        handleEditIssue(issue);
+                        setIsOpen(false);
+                      }}
                     >
-                      <button
-                        type="button"
-                        className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
-                        onClick={() => {
-                          handleEditIssue(issue);
-                          setIsOpen(false);
-                        }}
-                      >
-                        <div className="flex items-center justify-start gap-2">
-                          <PencilIcon className="h-4 w-4" />
-                          <span>Edit issue</span>
-                        </div>
-                      </button>
+                      <div className="flex items-center justify-start gap-2">
+                        <PencilIcon className="h-4 w-4" />
+                        <span>Edit issue</span>
+                      </div>
+                    </button>
 
-                      <button
-                        type="button"
-                        className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
-                        onClick={() => {
-                          handleDeleteIssue(issue);
-                          setIsOpen(false);
-                        }}
-                      >
-                        <div className="flex items-center justify-start gap-2">
-                          <TrashIcon className="h-4 w-4" />
-                          <span>Delete issue</span>
-                        </div>
-                      </button>
+                    <button
+                      type="button"
+                      className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
+                      onClick={() => {
+                        handleDeleteIssue(issue);
+                        setIsOpen(false);
+                      }}
+                    >
+                      <div className="flex items-center justify-start gap-2">
+                        <TrashIcon className="h-4 w-4" />
+                        <span>Delete issue</span>
+                      </div>
+                    </button>
 
-                      <button
-                        type="button"
-                        className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
-                        onClick={() => {
-                          handleCopyText();
-                          setIsOpen(false);
-                        }}
-                      >
-                        <div className="flex items-center justify-start gap-2">
-                          <LinkIcon className="h-4 w-4" />
-                          <span>Copy issue link</span>
-                        </div>
-                      </button>
-                    </div>
-                  }
-                  placement="bottom-start"
-                >
-                  <EllipsisHorizontalIcon className="h-5 w-5 text-custom-text-200" />
-                </Popover2>
-              </div>
-            )}
-          </div>
-
-          {issue.sub_issues_count > 0 && (
-            <div className="h-6 w-6 flex justify-center items-center">
-              <button
-                className="h-5 w-5 hover:bg-custom-background-90 hover:text-custom-text-100 rounded-sm cursor-pointer"
-                onClick={() => handleToggleExpand(issue.id)}
+                    <button
+                      type="button"
+                      className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
+                      onClick={() => {
+                        handleCopyText();
+                        setIsOpen(false);
+                      }}
+                    >
+                      <div className="flex items-center justify-start gap-2">
+                        <LinkIcon className="h-4 w-4" />
+                        <span>Copy issue link</span>
+                      </div>
+                    </button>
+                  </div>
+                }
+                placement="bottom-start"
               >
-                <Icon iconName="chevron_right" className={`${expanded ? "rotate-90" : ""}`} />
-              </button>
+                <EllipsisHorizontalIcon className="h-5 w-5 text-custom-text-200" />
+              </Popover2>
             </div>
           )}
         </div>
-      )}
+
+        {issue.sub_issues_count > 0 && (
+          <div className="h-6 w-6 flex justify-center items-center">
+            <button
+              className="h-5 w-5 hover:bg-custom-background-90 hover:text-custom-text-100 rounded-sm cursor-pointer"
+              onClick={() => handleToggleExpand(issue.id)}
+            >
+              <Icon iconName="chevron_right" className={`${expanded ? "rotate-90" : ""}`} />
+            </button>
+          </div>
+        )}
+      </div>
       <span className="flex items-center px-4 py-2.5 h-full  truncate flex-grow">
         <button
           type="button"

web/components/core/views/spreadsheet-view/label-column/label-column.tsx

@@ -28,7 +28,7 @@ export const LabelColumn: React.FC<Props> = ({
 
   return (
     <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
+      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-200">
         {properties.labels && (
           <LabelSelect
             value={issue.labels}

web/components/core/views/spreadsheet-view/priority-column/priority-column.tsx

@@ -48,7 +48,7 @@ export const PriorityColumn: React.FC<Props> = ({
 
   return (
     <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
+      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-200">
         {properties.priority && (
           <PrioritySelect
             value={issue.priority}

web/components/core/views/spreadsheet-view/spreadsheet-columns.tsx

@@ -0,0 +1,274 @@
+import React from "react";
+// hooks
+import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
+import useLocalStorage from "hooks/use-local-storage";
+// component
+import { CustomMenu, Icon } from "components/ui";
+// icon
+import { CheckIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
+// types
+import { TIssueOrderByOptions } from "types";
+
+type Props = {
+  columnData: any;
+  gridTemplateColumns: string;
+};
+
+export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateColumns }) => {
+  const { storedValue: selectedMenuItem, setValue: setSelectedMenuItem } = useLocalStorage(
+    "spreadsheetViewSorting",
+    ""
+  );
+  const { storedValue: activeSortingProperty, setValue: setActiveSortingProperty } =
+    useLocalStorage("spreadsheetViewActiveSortingProperty", "");
+
+  const { displayFilters, setDisplayFilters } = useSpreadsheetIssuesView();
+
+  const handleOrderBy = (order: TIssueOrderByOptions, itemKey: string) => {
+    setDisplayFilters({ order_by: order });
+    setSelectedMenuItem(`${order}_${itemKey}`);
+    setActiveSortingProperty(order === "-created_at" ? "" : itemKey);
+  };
+
+  return (
+    <div
+      className={`grid auto-rows-[minmax(36px,1fr)] w-full min-w-max`}
+      style={{ gridTemplateColumns }}
+    >
+      {columnData.map((col: any) => {
+        if (col.isActive) {
+          return (
+            <div
+              className={`bg-custom-background-90 w-full ${
+                col.propertyName === "title"
+                  ? "sticky left-0 z-20 bg-custom-background-90 pl-24"
+                  : ""
+              }`}
+            >
+              {col.propertyName === "title" ? (
+                <div
+                  className={`flex items-center justify-start gap-1.5 cursor-default text-sm text-custom-text-200 text-current w-full py-2.5 px-2`}
+                >
+                  {col.colName}
+                </div>
+              ) : (
+                <CustomMenu
+                  className="!w-full"
+                  customButton={
+                    <div
+                      className={`relative group flex items-center justify-start gap-1.5 cursor-pointer text-sm text-custom-text-200 hover:text-custom-text-100 w-full py-3 px-2 ${
+                        activeSortingProperty === col.propertyName ? "bg-custom-background-80" : ""
+                      }`}
+                    >
+                      {activeSortingProperty === col.propertyName && (
+                        <div className="absolute top-1 right-1.5">
+                          <Icon
+                            iconName="filter_list"
+                            className="flex items-center justify-center h-3.5 w-3.5 rounded-full bg-custom-primary text-xs text-white"
+                          />
+                        </div>
+                      )}
+
+                      {col.icon ? (
+                        <col.icon
+                          className={`text-custom-text-200 group-hover:text-custom-text-100 ${
+                            col.propertyName === "estimate" ? "-rotate-90" : ""
+                          }`}
+                          aria-hidden="true"
+                          height="14"
+                          width="14"
+                        />
+                      ) : col.propertyName === "priority" ? (
+                        <span className="text-sm material-symbols-rounded text-custom-text-200">
+                          signal_cellular_alt
+                        </span>
+                      ) : (
+                        ""
+                      )}
+
+                      {col.colName}
+                      <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+                    </div>
+                  }
+                  width="xl"
+                >
+                  <CustomMenu.MenuItem
+                    onClick={() => {
+                      handleOrderBy(col.ascendingOrder, col.propertyName);
+                    }}
+                  >
+                    <div
+                      className={`group flex gap-1.5 px-1 items-center justify-between ${
+                        selectedMenuItem === `${col.ascendingOrder}_${col.propertyName}`
+                          ? "text-custom-text-100"
+                          : "text-custom-text-200 hover:text-custom-text-100"
+                      }`}
+                    >
+                      <div className="flex gap-2 items-center">
+                        {col.propertyName === "assignee" || col.propertyName === "labels" ? (
+                          <>
+                            <span className="relative flex items-center h-6 w-6">
+                              <Icon
+                                iconName="east"
+                                className="absolute left-0 rotate-90 text-xs leading-3"
+                              />
+                              <Icon iconName="sort" className="absolute right-0 text-sm" />
+                            </span>
+                            <span>A</span>
+                            <Icon iconName="east" className="text-sm" />
+                            <span>Z</span>
+                          </>
+                        ) : col.propertyName === "due_date" ||
+                          col.propertyName === "created_on" ||
+                          col.propertyName === "updated_on" ? (
+                          <>
+                            <span className="relative flex items-center h-6 w-6">
+                              <Icon
+                                iconName="east"
+                                className="absolute left-0 rotate-90 text-xs leading-3"
+                              />
+                              <Icon iconName="sort" className="absolute right-0 text-sm" />
+                            </span>
+                            <span>New</span>
+                            <Icon iconName="east" className="text-sm" />
+                            <span>Old</span>
+                          </>
+                        ) : (
+                          <>
+                            <span className="relative flex items-center h-6 w-6">
+                              <Icon
+                                iconName="east"
+                                className="absolute left-0 rotate-90 text-xs leading-3"
+                              />
+                              <Icon iconName="sort" className="absolute right-0 text-sm" />
+                            </span>
+                            <span>First</span>
+                            <Icon iconName="east" className="text-sm" />
+                            <span>Last</span>
+                          </>
+                        )}
+                      </div>
+
+                      <CheckIcon
+                        className={`h-3.5 w-3.5 opacity-0 group-hover:opacity-100 ${
+                          selectedMenuItem === `${col.ascendingOrder}_${col.propertyName}`
+                            ? "opacity-100"
+                            : ""
+                        }`}
+                      />
+                    </div>
+                  </CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem
+                    className={`mt-0.5 ${
+                      selectedMenuItem === `${col.descendingOrder}_${col.propertyName}`
+                        ? "bg-custom-background-80"
+                        : ""
+                    }`}
+                    key={col.property}
+                    onClick={() => {
+                      handleOrderBy(col.descendingOrder, col.propertyName);
+                    }}
+                  >
+                    <div
+                      className={`group flex gap-1.5 px-1 items-center justify-between ${
+                        selectedMenuItem === `${col.descendingOrder}_${col.propertyName}`
+                          ? "text-custom-text-100"
+                          : "text-custom-text-200 hover:text-custom-text-100"
+                      }`}
+                    >
+                      <div className="flex gap-2 items-center">
+                        {col.propertyName === "assignee" || col.propertyName === "labels" ? (
+                          <>
+                            <span className="relative flex items-center h-6 w-6">
+                              <Icon
+                                iconName="east"
+                                className="absolute left-0 -rotate-90 text-xs leading-3"
+                              />
+                              <Icon
+                                iconName="sort"
+                                className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
+                              />
+                            </span>
+                            <span>Z</span>
+                            <Icon iconName="east" className="text-sm" />
+                            <span>A</span>
+                          </>
+                        ) : col.propertyName === "due_date" ? (
+                          <>
+                            <span className="relative flex items-center h-6 w-6">
+                              <Icon
+                                iconName="east"
+                                className="absolute left-0 -rotate-90 text-xs leading-3"
+                              />
+                              <Icon
+                                iconName="sort"
+                                className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
+                              />
+                            </span>
+                            <span>Old</span>
+                            <Icon iconName="east" className="text-sm" />
+                            <span>New</span>
+                          </>
+                        ) : (
+                          <>
+                            <span className="relative flex items-center h-6 w-6">
+                              <Icon
+                                iconName="east"
+                                className="absolute left-0 -rotate-90 text-xs leading-3"
+                              />
+                              <Icon
+                                iconName="sort"
+                                className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
+                              />
+                            </span>
+                            <span>Last</span>
+                            <Icon iconName="east" className="text-sm" />
+                            <span>First</span>
+                          </>
+                        )}
+                      </div>
+
+                      <CheckIcon
+                        className={`h-3.5 w-3.5 opacity-0 group-hover:opacity-100 ${
+                          selectedMenuItem === `${col.descendingOrder}_${col.propertyName}`
+                            ? "opacity-100"
+                            : ""
+                        }`}
+                      />
+                    </div>
+                  </CustomMenu.MenuItem>
+                  {selectedMenuItem &&
+                    selectedMenuItem !== "" &&
+                    displayFilters?.order_by !== "-created_at" &&
+                    selectedMenuItem.includes(col.propertyName) && (
+                      <CustomMenu.MenuItem
+                        className={`mt-0.5${
+                          selectedMenuItem === `-created_at_${col.propertyName}`
+                            ? "bg-custom-background-80"
+                            : ""
+                        }`}
+                        key={col.property}
+                        onClick={() => {
+                          handleOrderBy("-created_at", col.propertyName);
+                        }}
+                      >
+                        <div className={`group flex gap-1.5 px-1 items-center justify-between `}>
+                          <div className="flex gap-1.5 items-center">
+                            <span className="relative flex items-center justify-center h-6 w-6">
+                              <Icon iconName="ink_eraser" className="text-sm" />
+                            </span>
+
+                            <span>Clear sorting</span>
+                          </div>
+                        </div>
+                      </CustomMenu.MenuItem>
+                    )}
+                </CustomMenu>
+              )}
+            </div>
+          );
+        }
+      })}
+    </div>
+  );
+};

web/components/core/views/spreadsheet-view/spreadsheet-view.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useState } from "react";
 
 // next
 import { useRouter } from "next/router";
@@ -19,20 +19,13 @@ import {
   SpreadsheetStateColumn,
   SpreadsheetUpdatedOnColumn,
 } from "components/core";
-import { CustomMenu, Icon, Spinner } from "components/ui";
+import { CustomMenu, Spinner } from "components/ui";
 import { IssuePeekOverview } from "components/issues";
 // hooks
 import useIssuesProperties from "hooks/use-issue-properties";
-import useLocalStorage from "hooks/use-local-storage";
-import { useWorkspaceView } from "hooks/use-workspace-view";
 // types
-import {
-  ICurrentUserResponse,
-  IIssue,
-  ISubIssueResponse,
-  TIssueOrderByOptions,
-  UserAuth,
-} from "types";
+import { ICurrentUserResponse, IIssue, ISubIssueResponse, UserAuth } from "types";
+import useWorkspaceIssuesFilters from "hooks/use-worskpace-issue-filter";
 import {
   CYCLE_DETAILS,
   CYCLE_ISSUES_WITH_PARAMS,
@@ -46,7 +39,7 @@ import {
 import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
 import projectIssuesServices from "services/issues.service";
 // icon
-import { CheckIcon, ChevronDownIcon, PlusIcon } from "lucide-react";
+import { PlusIcon } from "lucide-react";
 
 type Props = {
   spreadsheetIssues: IIssue[];
@@ -77,24 +70,13 @@ export const SpreadsheetView: React.FC<Props> = ({
 
   const [isInlineCreateIssueFormOpen, setIsInlineCreateIssueFormOpen] = useState(false);
 
-  const [isScrolled, setIsScrolled] = useState(false);
-
-  const containerRef = useRef<HTMLDivElement | null>(null);
-
   const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId, viewId, globalViewId } = router.query;
+  const { workspaceSlug, projectId, cycleId, moduleId, viewId, workspaceViewId } = router.query;
 
   const type = cycleId ? "cycle" : moduleId ? "module" : "issue";
 
   const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
 
-  const { storedValue: selectedMenuItem, setValue: setSelectedMenuItem } = useLocalStorage(
-    "spreadsheetViewSorting",
-    ""
-  );
-  const { storedValue: activeSortingProperty, setValue: setActiveSortingProperty } =
-    useLocalStorage("spreadsheetViewActiveSortingProperty", "");
-
   const workspaceIssuesPath = [
     {
       params: {
@@ -129,19 +111,12 @@ export const SpreadsheetView: React.FC<Props> = ({
     router.pathname.includes(path.path)
   );
 
-  const {
-    params: workspaceViewParams,
-    filters: workspaceViewFilters,
-    handleFilters,
-  } = useWorkspaceView();
+  const { params: workspaceViewParams } = useWorkspaceIssuesFilters(
+    workspaceSlug?.toString(),
+    workspaceViewId?.toString()
+  );
 
-  const workspaceViewProperties = workspaceViewFilters.display_properties;
-
-  const isWorkspaceView = globalViewId || currentWorkspaceIssuePath;
-
-  const currentViewProperties = isWorkspaceView ? workspaceViewProperties : properties;
-
-  const { params, displayFilters, setDisplayFilters } = useSpreadsheetIssuesView();
+  const { params } = useSpreadsheetIssuesView();
 
   const partialUpdateIssue = useCallback(
     (formData: Partial<IIssue>, issue: IIssue) => {
@@ -153,8 +128,8 @@ export const SpreadsheetView: React.FC<Props> = ({
         ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), params)
         : viewId
         ? VIEW_ISSUES(viewId.toString(), params)
-        : globalViewId
-        ? WORKSPACE_VIEW_ISSUES(globalViewId.toString(), workspaceViewParams)
+        : workspaceViewId
+        ? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), workspaceViewParams)
         : currentWorkspaceIssuePath
         ? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), currentWorkspaceIssuePath?.params)
         : PROJECT_ISSUES_LIST_WITH_PARAMS(issue.project_detail.id, params);
@@ -223,9 +198,9 @@ export const SpreadsheetView: React.FC<Props> = ({
       cycleId,
       moduleId,
       viewId,
-      globalViewId,
-      workspaceViewParams,
+      workspaceViewId,
       currentWorkspaceIssuePath,
+      workspaceViewParams,
       params,
       user,
     ]
@@ -233,219 +208,10 @@ export const SpreadsheetView: React.FC<Props> = ({
 
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
-  const handleOrderBy = (order: TIssueOrderByOptions, itemKey: string) => {
-    if (globalViewId) handleFilters("display_filters", { order_by: order });
-    else setDisplayFilters({ order_by: order });
-    setSelectedMenuItem(`${order}_${itemKey}`);
-    setActiveSortingProperty(order === "-created_at" ? "" : itemKey);
-  };
-
-  const renderColumn = (
-    header: string,
-    propertyName: string,
-    Component: React.ComponentType<any>,
-    ascendingOrder: TIssueOrderByOptions,
-    descendingOrder: TIssueOrderByOptions
-  ) => (
-    <div className="relative flex flex-col h-max w-full bg-custom-background-100">
-      <div className="flex items-center min-w-[9rem] px-4 py-2.5 text-sm font-medium z-[1] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-100">
-        {currentWorkspaceIssuePath ? (
-          <span>{header}</span>
-        ) : (
-          <CustomMenu
-            customButtonClassName="!w-full"
-            className="!w-full"
-            position="left"
-            customButton={
-              <div
-                className={`relative group flex items-center justify-between gap-1.5 cursor-pointer text-sm text-custom-text-200 hover:text-custom-text-100 w-full py-3 px-2 ${
-                  activeSortingProperty === propertyName ? "bg-custom-background-80" : ""
-                }`}
-              >
-                {activeSortingProperty === propertyName && (
-                  <div className="absolute top-1 right-1.5">
-                    <Icon
-                      iconName="filter_list"
-                      className="flex items-center justify-center h-3.5 w-3.5 rounded-full bg-custom-primary text-xs text-white"
-                    />
-                  </div>
-                )}
-
-                {header}
-                <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
-              </div>
-            }
-            width="xl"
-          >
-            <CustomMenu.MenuItem
-              onClick={() => {
-                handleOrderBy(ascendingOrder, propertyName);
-              }}
-            >
-              <div
-                className={`group flex gap-1.5 px-1 items-center justify-between ${
-                  selectedMenuItem === `${ascendingOrder}_${propertyName}`
-                    ? "text-custom-text-100"
-                    : "text-custom-text-200 hover:text-custom-text-100"
-                }`}
-              >
-                <div className="flex gap-2 items-center">
-                  {propertyName === "assignee" || propertyName === "labels" ? (
-                    <>
-                      <span className="relative flex items-center h-6 w-6">
-                        <Icon
-                          iconName="east"
-                          className="absolute left-0 rotate-90 text-xs leading-3"
-                        />
-                        <Icon iconName="sort" className="absolute right-0 text-sm" />
-                      </span>
-                      <span>A</span>
-                      <Icon iconName="east" className="text-sm" />
-                      <span>Z</span>
-                    </>
-                  ) : propertyName === "due_date" ||
-                    propertyName === "created_on" ||
-                    propertyName === "updated_on" ? (
-                    <>
-                      <span className="relative flex items-center h-6 w-6">
-                        <Icon
-                          iconName="east"
-                          className="absolute left-0 rotate-90 text-xs leading-3"
-                        />
-                        <Icon iconName="sort" className="absolute right-0 text-sm" />
-                      </span>
-                      <span>New</span>
-                      <Icon iconName="east" className="text-sm" />
-                      <span>Old</span>
-                    </>
-                  ) : (
-                    <>
-                      <span className="relative flex items-center h-6 w-6">
-                        <Icon
-                          iconName="east"
-                          className="absolute left-0 rotate-90 text-xs leading-3"
-                        />
-                        <Icon iconName="sort" className="absolute right-0 text-sm" />
-                      </span>
-                      <span>First</span>
-                      <Icon iconName="east" className="text-sm" />
-                      <span>Last</span>
-                    </>
-                  )}
-                </div>
-
-                <CheckIcon
-                  className={`h-3.5 w-3.5 opacity-0 group-hover:opacity-100 ${
-                    selectedMenuItem === `${ascendingOrder}_${propertyName}` ? "opacity-100" : ""
-                  }`}
-                />
-              </div>
-            </CustomMenu.MenuItem>
-            <CustomMenu.MenuItem
-              className={`mt-0.5 ${
-                selectedMenuItem === `${descendingOrder}_${propertyName}`
-                  ? "bg-custom-background-80"
-                  : ""
-              }`}
-              key={propertyName}
-              onClick={() => {
-                handleOrderBy(descendingOrder, propertyName);
-              }}
-            >
-              <div
-                className={`group flex gap-1.5 px-1 items-center justify-between ${
-                  selectedMenuItem === `${descendingOrder}_${propertyName}`
-                    ? "text-custom-text-100"
-                    : "text-custom-text-200 hover:text-custom-text-100"
-                }`}
-              >
-                <div className="flex gap-2 items-center">
-                  {propertyName === "assignee" || propertyName === "labels" ? (
-                    <>
-                      <span className="relative flex items-center h-6 w-6">
-                        <Icon
-                          iconName="east"
-                          className="absolute left-0 -rotate-90 text-xs leading-3"
-                        />
-                        <Icon
-                          iconName="sort"
-                          className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
-                        />
-                      </span>
-                      <span>Z</span>
-                      <Icon iconName="east" className="text-sm" />
-                      <span>A</span>
-                    </>
-                  ) : propertyName === "due_date" ? (
-                    <>
-                      <span className="relative flex items-center h-6 w-6">
-                        <Icon
-                          iconName="east"
-                          className="absolute left-0 -rotate-90 text-xs leading-3"
-                        />
-                        <Icon
-                          iconName="sort"
-                          className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
-                        />
-                      </span>
-                      <span>Old</span>
-                      <Icon iconName="east" className="text-sm" />
-                      <span>New</span>
-                    </>
-                  ) : (
-                    <>
-                      <span className="relative flex items-center h-6 w-6">
-                        <Icon
-                          iconName="east"
-                          className="absolute left-0 -rotate-90 text-xs leading-3"
-                        />
-                        <Icon
-                          iconName="sort"
-                          className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
-                        />
-                      </span>
-                      <span>Last</span>
-                      <Icon iconName="east" className="text-sm" />
-                      <span>First</span>
-                    </>
-                  )}
-                </div>
-
-                <CheckIcon
-                  className={`h-3.5 w-3.5 opacity-0 group-hover:opacity-100 ${
-                    selectedMenuItem === `${descendingOrder}_${propertyName}` ? "opacity-100" : ""
-                  }`}
-                />
-              </div>
-            </CustomMenu.MenuItem>
-            {selectedMenuItem &&
-              selectedMenuItem !== "" &&
-              displayFilters?.order_by !== "-created_at" &&
-              selectedMenuItem.includes(propertyName) && (
-                <CustomMenu.MenuItem
-                  className={`mt-0.5${
-                    selectedMenuItem === `-created_at_${propertyName}`
-                      ? "bg-custom-background-80"
-                      : ""
-                  }`}
-                  key={propertyName}
-                  onClick={() => {
-                    handleOrderBy("-created_at", propertyName);
-                  }}
-                >
-                  <div className={`group flex gap-1.5 px-1 items-center justify-between `}>
-                    <div className="flex gap-1.5 items-center">
-                      <span className="relative flex items-center justify-center h-6 w-6">
-                        <Icon iconName="ink_eraser" className="text-sm" />
-                      </span>
-
-                      <span>Clear sorting</span>
-                    </div>
-                  </div>
-                </CustomMenu.MenuItem>
-              )}
-          </CustomMenu>
-        )}
+  const renderColumn = (header: string, Component: React.ComponentType<any>) => (
+    <div className="relative flex flex-col h-max w-full bg-custom-background-100 rounded-sm">
+      <div className="flex items-center min-w-[9rem] px-4 py-2.5 text-sm font-medium z-[1] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-200">
+        {header}
       </div>
       <div className="h-full min-w-[9rem] w-full">
         {spreadsheetIssues.map((issue: IIssue, index) => (
@@ -455,7 +221,7 @@ export const SpreadsheetView: React.FC<Props> = ({
             projectId={issue.project_detail.id}
             partialUpdateIssue={partialUpdateIssue}
             expandedIssues={expandedIssues}
-            properties={currentViewProperties}
+            properties={properties}
             user={user}
             isNotAllowed={isNotAllowed}
           />
@@ -464,27 +230,6 @@ export const SpreadsheetView: React.FC<Props> = ({
     </div>
   );
 
-  const handleScroll = () => {
-    if (containerRef.current) {
-      const scrollLeft = containerRef.current.scrollLeft;
-      setIsScrolled(scrollLeft > 0);
-    }
-  };
-
-  useEffect(() => {
-    const currentContainerRef = containerRef.current;
-
-    if (currentContainerRef) {
-      currentContainerRef.addEventListener("scroll", handleScroll);
-    }
-
-    return () => {
-      if (currentContainerRef) {
-        currentContainerRef.removeEventListener("scroll", handleScroll);
-      }
-    };
-  }, []);
-
   return (
     <>
       <IssuePeekOverview
@@ -493,24 +238,17 @@ export const SpreadsheetView: React.FC<Props> = ({
         workspaceSlug={workspaceSlug?.toString() ?? ""}
         readOnly={disableUserActions}
       />
-      <div className="relative flex h-full w-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-200">
+      <div className="relative flex h-full w-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-100">
         <div className="h-full w-full flex flex-col">
-          <div ref={containerRef} className="flex max-h-full h-full overflow-y-auto">
+          <div className="flex max-h-full overflow-y-auto">
             {spreadsheetIssues ? (
               <>
                 <div className="sticky left-0 w-[28rem] z-[2]">
-                  <div
-                    className="relative flex flex-col h-max w-full bg-custom-background-100 z-[2]"
-                    style={{
-                      boxShadow: isScrolled ? "8px -9px 12px rgba(0, 0, 0, 0.15)" : "",
-                    }}
-                  >
-                    <div className="flex items-center text-sm font-medium z-[2] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-100">
-                      {currentViewProperties.key && (
-                        <span className="flex items-center px-4 py-2.5 h-full w-24 flex-shrink-0">
-                          ID
-                        </span>
-                      )}
+                  <div className="relative flex flex-col h-max w-full bg-custom-background-100 rounded-sm z-[2]">
+                    <div className="flex items-center text-sm font-medium z-[2] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-200">
+                      <span className="flex items-center px-4 py-2.5 h-full w-20 flex-shrink-0">
+                        ID
+                      </span>
                       <span className="flex items-center px-4 py-2.5 h-full w-full flex-grow">
                         Issue
                       </span>
@@ -524,7 +262,7 @@ export const SpreadsheetView: React.FC<Props> = ({
                         expandedIssues={expandedIssues}
                         setExpandedIssues={setExpandedIssues}
                         setCurrentProjectId={setCurrentProjectId}
-                        properties={currentViewProperties}
+                        properties={properties}
                         handleIssueAction={handleIssueAction}
                         disableUserActions={disableUserActions}
                         userAuth={userAuth}
@@ -532,79 +270,15 @@ export const SpreadsheetView: React.FC<Props> = ({
                     ))}
                   </div>
                 </div>
-                {currentViewProperties.state &&
-                  renderColumn(
-                    "State",
-                    "state",
-                    SpreadsheetStateColumn,
-                    "state__name",
-                    "-state__name"
-                  )}
-
-                {currentViewProperties.priority &&
-                  renderColumn(
-                    "Priority",
-                    "priority",
-                    SpreadsheetPriorityColumn,
-                    "priority",
-                    "-priority"
-                  )}
-                {currentViewProperties.assignee &&
-                  renderColumn(
-                    "Assignees",
-                    "assignee",
-                    SpreadsheetAssigneeColumn,
-                    "assignees__first_name",
-                    "-assignees__first_name"
-                  )}
-                {currentViewProperties.labels &&
-                  renderColumn(
-                    "Label",
-                    "labels",
-                    SpreadsheetLabelColumn,
-                    "labels__name",
-                    "-labels__name"
-                  )}
-                {currentViewProperties.start_date &&
-                  renderColumn(
-                    "Start Date",
-                    "start_date",
-                    SpreadsheetStartDateColumn,
-                    "-start_date",
-                    "start_date"
-                  )}
-                {currentViewProperties.due_date &&
-                  renderColumn(
-                    "Due Date",
-                    "due_date",
-                    SpreadsheetDueDateColumn,
-                    "-target_date",
-                    "target_date"
-                  )}
-                {currentViewProperties.estimate &&
-                  renderColumn(
-                    "Estimate",
-                    "estimate",
-                    SpreadsheetEstimateColumn,
-                    "estimate_point",
-                    "-estimate_point"
-                  )}
-                {currentViewProperties.created_on &&
-                  renderColumn(
-                    "Created On",
-                    "created_on",
-                    SpreadsheetCreatedOnColumn,
-                    "-created_at",
-                    "created_at"
-                  )}
-                {currentViewProperties.updated_on &&
-                  renderColumn(
-                    "Updated On",
-                    "updated_on",
-                    SpreadsheetUpdatedOnColumn,
-                    "-updated_at",
-                    "updated_at"
-                  )}
+                {renderColumn("State", SpreadsheetStateColumn)}
+                {renderColumn("Priority", SpreadsheetPriorityColumn)}
+                {renderColumn("Assignees", SpreadsheetAssigneeColumn)}
+                {renderColumn("Label", SpreadsheetLabelColumn)}
+                {renderColumn("Start Date", SpreadsheetStartDateColumn)}
+                {renderColumn("Due Date", SpreadsheetDueDateColumn)}
+                {renderColumn("Estimate", SpreadsheetEstimateColumn)}
+                {renderColumn("Created On", SpreadsheetCreatedOnColumn)}
+                {renderColumn("Updated On", SpreadsheetUpdatedOnColumn)}
               </>
             ) : (
               <div className="flex flex-col justify-center items-center h-full w-full">
@@ -613,27 +287,25 @@ export const SpreadsheetView: React.FC<Props> = ({
             )}
           </div>
 
-          <div className="border-t border-custom-border-100">
-            <div className="mb-3 z-50 sticky bottom-0 left-0">
-              <ListInlineCreateIssueForm
-                isOpen={isInlineCreateIssueFormOpen}
-                handleClose={() => setIsInlineCreateIssueFormOpen(false)}
-                prePopulatedData={{
-                  ...(cycleId && { cycle: cycleId.toString() }),
-                  ...(moduleId && { module: moduleId.toString() }),
-                }}
-              />
-            </div>
+          <div>
+            <ListInlineCreateIssueForm
+              isOpen={isInlineCreateIssueFormOpen}
+              handleClose={() => setIsInlineCreateIssueFormOpen(false)}
+              prePopulatedData={{
+                ...(cycleId && { cycle: cycleId.toString() }),
+                ...(moduleId && { module: moduleId.toString() }),
+              }}
+            />
 
             {type === "issue"
               ? !disableUserActions &&
                 !isInlineCreateIssueFormOpen && (
                   <button
-                    className="flex gap-1.5 items-center text-custom-primary-100 pl-4 py-2.5 text-sm sticky left-0 z-[1] w-full"
+                    className="flex gap-1.5 items-center text-custom-primary-100 pl-7 py-2.5 text-sm sticky left-0 z-[1] border-custom-border-200 w-full"
                     onClick={() => setIsInlineCreateIssueFormOpen(true)}
                   >
                     <PlusIcon className="h-4 w-4" />
-                    New Issue
+                    Add Issue
                   </button>
                 )
               : !disableUserActions &&
@@ -642,11 +314,11 @@ export const SpreadsheetView: React.FC<Props> = ({
                     className="sticky left-0 z-10"
                     customButton={
                       <button
-                        className="flex gap-1.5 items-center text-custom-primary-100 pl-4 py-2.5 text-sm sticky left-0 z-[1] border-custom-border-200 w-full"
+                        className="flex gap-1.5 items-center text-custom-primary-100 pl-7 py-2.5 text-sm sticky left-0 z-[1] border-custom-border-200 w-full"
                         type="button"
                       >
                         <PlusIcon className="h-4 w-4" />
-                        New Issue
+                        Add Issue
                       </button>
                     }
                     position="left"

web/components/core/views/spreadsheet-view/start-date-column/start-date-column.tsx

@@ -23,7 +23,7 @@ export const StartDateColumn: React.FC<Props> = ({
   isNotAllowed,
 }) => (
   <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-    <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
+    <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-200">
       {properties.due_date && (
         <ViewStartDateSelect
           issue={issue}

web/components/core/views/spreadsheet-view/state-column/state-column.tsx

@@ -70,13 +70,13 @@ export const StateColumn: React.FC<Props> = ({
 
   return (
     <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
+      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-200">
         {properties.state && (
           <StateSelect
             value={issue.state_detail}
             projectId={projectId}
             onChange={handleStateChange}
-            buttonClassName="!shadow-none !border-0"
+            buttonClassName="!p-0 !rounded-none !shadow-none !border-0"
             hideDropdownArrow
             disabled={isNotAllowed}
           />

web/components/core/views/spreadsheet-view/updated-on-column/updated-on-column.tsx

@@ -23,7 +23,7 @@ export const UpdatedOnColumn: React.FC<Props> = ({
   isNotAllowed,
 }) => (
   <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-    <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
+    <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-200">
       {properties.updated_on && (
         <div className="flex items-center text-xs cursor-default text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
           {renderLongDetailDateFormat(issue.updated_at)}

web/components/emoji-icon-picker/index.tsx

@@ -4,7 +4,6 @@ import { Tab, Transition, Popover } from "@headlessui/react";
 // react colors
 import { TwitterPicker } from "react-color";
 // hooks
-import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // types
 import { Props } from "./types";
@@ -39,7 +38,6 @@ const EmojiIconPicker: React.FC<Props> = ({
 
   const [recentEmojis, setRecentEmojis] = useState<string[]>([]);
 
-  const buttonRef = useRef<HTMLButtonElement>(null);
   const emojiPickerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -51,12 +49,10 @@ const EmojiIconPicker: React.FC<Props> = ({
   }, [value, onChange]);
 
   useOutsideClickDetector(emojiPickerRef, () => setIsOpen(false));
-  useDynamicDropdownPosition(isOpen, () => setIsOpen(false), buttonRef, emojiPickerRef);
 
   return (
     <Popover className="relative z-[1]">
       <Popover.Button
-        ref={buttonRef}
         onClick={() => setIsOpen((prev) => !prev)}
         className="outline-none"
         disabled={disabled}
@@ -65,8 +61,6 @@ const EmojiIconPicker: React.FC<Props> = ({
       </Popover.Button>
       <Transition
         show={isOpen}
-        static
-        as={React.Fragment}
         enter="transition ease-out duration-100"
         enterFrom="transform opacity-0 scale-95"
         enterTo="transform opacity-100 scale-100"
@@ -74,11 +68,11 @@ const EmojiIconPicker: React.FC<Props> = ({
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Popover.Panel
-          ref={emojiPickerRef}
-          className="fixed z-10 mt-2 w-[250px] rounded-[4px] border border-custom-border-200 bg-custom-background-80 shadow-lg"
-        >
-          <div className="h-[230px] w-[250px] overflow-auto rounded-[4px] border border-custom-border-200 bg-custom-background-80 p-2 shadow-xl">
+        <Popover.Panel className="absolute z-10 mt-2 w-[250px] rounded-[4px] border border-custom-border-200 bg-custom-background-80 shadow-lg">
+          <div
+            ref={emojiPickerRef}
+            className="h-[230px] w-[250px] overflow-auto rounded-[4px] border border-custom-border-200 bg-custom-background-80 p-2 shadow-xl"
+          >
             <Tab.Group as="div" className="flex h-full w-full flex-col">
               <Tab.List className="flex-0 -mx-2 flex justify-around gap-1 p-1">
                 {tabOptions.map((tab) => (

web/components/gantt-chart/chart/index.tsx

@@ -80,9 +80,6 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
   const router = useRouter();
   const { cycleId, moduleId } = router.query;
 
-  const isCyclePage = router.pathname.split("/")[4] === "cycles" && !cycleId;
-  const isModulePage = router.pathname.split("/")[4] === "modules" && !moduleId;
-
   const renderBlockStructure = (view: any, blocks: IGanttBlock[] | null) =>
     blocks && blocks.length > 0
       ? blocks.map((block: any) => ({
@@ -320,7 +317,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
             SidebarBlockRender={SidebarBlockRender}
             enableReorder={enableReorder}
           />
-          {chartBlocks && !(isCyclePage || isModulePage) && (
+          {chartBlocks && (
             <div className="pl-2.5 py-3">
               <GanttInlineCreateIssueForm
                 isOpen={isCreateIssueFormOpen}
@@ -350,7 +347,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
                 <button
                   type="button"
                   onClick={() => setIsCreateIssueFormOpen(true)}
-                  className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 pl-[1.875rem] py-1 rounded-md"
+                  className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md"
                 >
                   <PlusIcon className="h-4 w-4" />
                   <span className="text-sm font-medium text-custom-primary-100">New Issue</span>

web/components/icons/state/backlog.tsx

@@ -15,28 +15,10 @@ export const StateGroupBacklogIcon: React.FC<Props> = ({
     height={height}
     width={width}
     className={className}
+    viewBox="0 0 12 12"
+    fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 323.15 323.03"
   >
-    <g id="Layer_2" data-name="Layer 2">
-      <g id="Layer_1-2" data-name="Layer 1">
-        <path
-          fill={color}
-          d="M163.42,322.92A172.12,172.12,0,0,1,104.8,312.7c-3.92-1.4-5.22-3.05-3.07-7.1,2.4-4.52,3-11.38,6.64-13.48s9.34,2.47,14.23,3.81c29.55,8.11,58.78,7.25,87.57-3.31,4.08-1.5,5.86-1.05,7.09,3.21a82.63,82.63,0,0,0,4.6,11c1.19,2.57,1,4.06-2,5.2a163.84,163.84,0,0,1-40.05,9.76C173.84,322.45,167.89,323.34,163.42,322.92Z"
-        />
-        <path
-          fill={color}
-          d="M.07,163a174.76,174.76,0,0,1,10.07-58c1.59-4.57,3.53-5.59,7.8-3.2a61,61,0,0,0,10.11,4.19c3.11,1.06,4.07,2.46,2.71,5.79-6.43,15.73-9.17,32.33-9.23,49.14a132.65,132.65,0,0,0,8.17,47.35c2.44,6.5,2.33,6.57-4.06,9.35-3.35,1.45-6.83,2.63-10.11,4.23-2.44,1.19-3.54.49-4.43-1.86a162.3,162.3,0,0,1-10-41C.51,173.12-.24,167.17.07,163Z"
-        />
-        <path
-          fill={color}
-          d="M323,160.16a169.68,169.68,0,0,1-10.2,58.09c-1.45,4.08-3.21,5.07-7.14,3a105.3,105.3,0,0,0-11.48-4.81c-2.23-.85-3.2-1.85-2.16-4.41a133.86,133.86,0,0,0,9.57-48.59,132,132,0,0,0-8.9-50.69c-1.67-4.24-.8-5.79,3.29-7a84,84,0,0,0,11-4.62c2.65-1.24,4.05-.82,5.16,2.12a159.68,159.68,0,0,1,9.68,39C322.56,148.71,323.52,155.17,323,160.16Z"
-        />
-        <path
-          fill={color}
-          d="M161.59,0a164.28,164.28,0,0,1,58,10.72c2.81,1,3.75,2,2.41,4.93-2,4.38-3.86,8.84-5.5,13.37-.93,2.56-2.28,2.77-4.53,1.87a137.94,137.94,0,0,0-99.35-.52c-3.43,1.32-5.3,1.35-6.45-2.69a50.33,50.33,0,0,0-4.55-11c-2.25-3.93-.36-5.11,2.9-6.29A165.32,165.32,0,0,1,161.59,0Z"
-        />
-      </g>
-    </g>
+    <circle cx="6" cy="6" r="5.6" stroke={color} strokeWidth="0.8" strokeDasharray="4 4" />
   </svg>
 );

web/components/icons/state/started.tsx

@@ -9,38 +9,17 @@ export const StateGroupStartedIcon: React.FC<Props> = ({
   width = "20",
   height = "20",
   className,
-  color = "#f39e1f",
+  color = "#f59e0b",
 }) => (
   <svg
     height={height}
     width={width}
     className={className}
     xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 152.93 152.95"
+    viewBox="0 0 12 12"
+    fill="none"
   >
-    <g id="Layer_2" data-name="Layer 2">
-      <g id="Layer_1-2" data-name="Layer 1">
-        <path
-          fill={color}
-          d="M77.74,0C35.63-.62.78,32.9,0,74.94c-.77,42.74,33,77.34,76.23,78A76.48,76.48,0,0,0,77.74,0ZM75.46,142.68a66.24,66.24,0,1,1,3-132.45c35.71,1,66.31,31.26,64.16,70.08A66.23,66.23,0,0,1,75.46,142.68Z"
-        />
-        <path
-          fill={color}
-          d="M124.29,76.58a49.52,49.52,0,0,1-3.11,16.9c-.38,1-.77,1.27-1.81.78-2.15-1-4.34-1.92-6.56-2.72-1.3-.46-1.51-1-1-2.3a36.61,36.61,0,0,0,.64-23.77c-1-3.48-1.06-3.47,2.38-4.88,1.57-.65,3.15-1.27,4.68-2,.94-.44,1.34-.22,1.69.75A49.74,49.74,0,0,1,124.29,76.58Z"
-        />
-        <path
-          fill={color}
-          d="M94.65,32.63c-.1.22-.19.42-.27.63-1,2.5-2.08,5-3.09,7.51-.28.69-.55.89-1.37.59a37.3,37.3,0,0,0-26.82,0c-.91.34-1.15.08-1.46-.7-1-2.46-2-4.92-3.06-7.34-.42-.92-.07-1.18.69-1.46a47.66,47.66,0,0,1,34.43,0C94.06,32,94.68,32,94.65,32.63Z"
-        />
-        <path
-          fill={color}
-          d="M28.72,76.67a48.27,48.27,0,0,1,3-17.13c.45-1.25.92-1.34,2-.83,2.25,1,4.56,2,6.87,2.87.86.34,1.05.67.71,1.58a36.85,36.85,0,0,0-.07,26.36c.36,1,.3,1.46-.75,1.86-2.38.9-4.72,1.88-7,2.92-1,.43-1.33.2-1.68-.76A46.76,46.76,0,0,1,28.72,76.67Z"
-        />
-        <path
-          fill={color}
-          d="M76.37,124.22a48.11,48.11,0,0,1-16.91-3.08c-1.05-.38-1.26-.8-.79-1.82,1-2.31,2-4.66,2.93-7,.34-.87.69-1.06,1.61-.72a37.06,37.06,0,0,0,26.67,0c.75-.28,1.09-.23,1.39.55,1,2.56,2,5.13,3.18,7.65.49,1.08-.3,1.13-.86,1.34A46.53,46.53,0,0,1,76.37,124.22Z"
-        />
-      </g>
-    </g>
+    <circle cx="6" cy="6" r="5.6" stroke={color} strokeWidth="0.8" />
+    <circle cx="6" cy="6" r="3.35" stroke={color} strokeWidth="0.8" strokeDasharray="2.4 2.4" />
   </svg>
 );

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

@@ -8,7 +8,6 @@ import { Controller, useForm } from "react-hook-form";
 import aiService from "services/ai.service";
 // hooks
 import useToast from "hooks/use-toast";
-import useLocalStorage from "hooks/use-local-storage";
 // components
 import { GptAssistantModal } from "components/core";
 import { ParentIssuesListModal } from "components/issues";
@@ -61,7 +60,6 @@ interface IssueFormProps {
     action?: "createDraft" | "createNewIssue" | "updateDraft" | "convertToNewIssue"
   ) => Promise<void>;
   data?: Partial<IIssue> | null;
-  isOpen: boolean;
   prePopulatedData?: Partial<IIssue> | null;
   projectId: string;
   setActiveProject: React.Dispatch<React.SetStateAction<string | null>>;
@@ -91,7 +89,6 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
   const {
     handleFormSubmit,
     data,
-    isOpen,
     prePopulatedData,
     projectId,
     setActiveProject,
@@ -112,8 +109,6 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
   const [gptAssistantModal, setGptAssistantModal] = useState(false);
   const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
 
-  const { setValue: setLocalStorageValue } = useLocalStorage("draftedIssue", {});
-
   const editorRef = useRef<any>(null);
 
   const router = useRouter();
@@ -138,33 +133,6 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
 
   const issueName = watch("name");
 
-  const payload: Partial<IIssue> = {
-    name: watch("name"),
-    description: watch("description"),
-    description_html: watch("description_html"),
-    state: watch("state"),
-    priority: watch("priority"),
-    assignees: watch("assignees"),
-    labels: watch("labels"),
-    start_date: watch("start_date"),
-    target_date: watch("target_date"),
-    project: watch("project"),
-    parent: watch("parent"),
-    cycle: watch("cycle"),
-    module: watch("module"),
-  };
-
-  useEffect(() => {
-    if (!isOpen || data) return;
-
-    setLocalStorageValue(
-      JSON.stringify({
-        ...payload,
-      })
-    );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [JSON.stringify(payload), isOpen, data]);
-
   const onClose = () => {
     handleClose();
   };
@@ -305,7 +273,7 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
       )}
       <form
         onSubmit={handleSubmit((formData) =>
-          handleCreateUpdateIssue(formData, data ? "convertToNewIssue" : "createDraft")
+          handleCreateUpdateIssue(formData, "convertToNewIssue")
         )}
       >
         <div className="space-y-5">

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

@@ -385,7 +385,6 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
               >
                 <Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
                   <DraftIssueForm
-                    isOpen={isOpen}
                     handleFormSubmit={handleFormSubmit}
                     prePopulatedData={prePopulateData}
                     data={data}

web/components/issues/form.tsx

@@ -129,19 +129,18 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
   const issueName = watch("name");
 
   const payload: Partial<IIssue> = {
-    name: watch("name"),
-    description: watch("description"),
-    description_html: watch("description_html"),
-    state: watch("state"),
-    priority: watch("priority"),
-    assignees: watch("assignees"),
-    labels: watch("labels"),
-    start_date: watch("start_date"),
-    target_date: watch("target_date"),
-    project: watch("project"),
-    parent: watch("parent"),
-    cycle: watch("cycle"),
-    module: watch("module"),
+    name: getValues("name"),
+    description: getValues("description"),
+    state: getValues("state"),
+    priority: getValues("priority"),
+    assignees: getValues("assignees"),
+    labels: getValues("labels"),
+    start_date: getValues("start_date"),
+    target_date: getValues("target_date"),
+    project: getValues("project"),
+    parent: getValues("parent"),
+    cycle: getValues("cycle"),
+    module: getValues("module"),
   };
 
   useEffect(() => {

web/components/issues/modal.tsx

@@ -20,7 +20,6 @@ import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
 import useProjects from "hooks/use-projects";
 import useMyIssues from "hooks/my-issues/use-my-issues";
 import useLocalStorage from "hooks/use-local-storage";
-import { useWorkspaceView } from "hooks/use-workspace-view";
 // components
 import { IssueForm, ConfirmIssueDiscard } from "components/issues";
 // types
@@ -38,7 +37,6 @@ import {
   VIEW_ISSUES,
   INBOX_ISSUES,
   PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS,
-  WORKSPACE_VIEW_ISSUES,
 } from "constants/fetch-keys";
 // constants
 import { INBOX_ISSUE_SOURCE } from "constants/inbox";
@@ -83,8 +81,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
   const [prePopulateData, setPreloadedData] = useState<Partial<IIssue>>({});
 
   const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId, viewId, globalViewId, inboxId } =
-    router.query;
+  const { workspaceSlug, projectId, cycleId, moduleId, viewId, inboxId } = router.query;
 
   const { displayFilters, params } = useIssuesView();
   const { params: calendarParams } = useCalendarIssuesView();
@@ -97,8 +94,6 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
 
   const { groupedIssues, mutateMyIssues } = useMyIssues(workspaceSlug?.toString());
 
-  const { params: globalViewParams } = useWorkspaceView();
-
   const { setValue: setValueInLocalStorage, clearValue: clearLocalStorageValue } =
     useLocalStorage<any>("draftedIssue", {});
 
@@ -281,40 +276,6 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
       });
   };
 
-  const workspaceIssuesPath = [
-    {
-      params: {
-        sub_issue: false,
-      },
-      path: "workspace-views/all-issues",
-    },
-    {
-      params: {
-        assignees: user?.id ?? undefined,
-        sub_issue: false,
-      },
-      path: "workspace-views/assigned",
-    },
-    {
-      params: {
-        created_by: user?.id ?? undefined,
-        sub_issue: false,
-      },
-      path: "workspace-views/created",
-    },
-    {
-      params: {
-        subscriber: user?.id ?? undefined,
-        sub_issue: false,
-      },
-      path: "workspace-views/subscribed",
-    },
-  ];
-
-  const currentWorkspaceIssuePath = workspaceIssuesPath.find((path) =>
-    router.pathname.includes(path.path)
-  );
-
   const calendarFetchKey = cycleId
     ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), calendarParams)
     : moduleId
@@ -371,14 +332,6 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
             mutate(USER_ISSUE(workspaceSlug as string));
 
           if (payload.parent && payload.parent !== "") mutate(SUB_ISSUES(payload.parent));
-
-          if (globalViewId)
-            mutate(WORKSPACE_VIEW_ISSUES(globalViewId.toString(), globalViewParams));
-
-          if (currentWorkspaceIssuePath)
-            mutate(
-              WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), currentWorkspaceIssuePath?.params)
-            );
         })
         .catch(() => {
           setToastAlert({

web/components/issues/my-issues/my-issues-select-filters.tsx

@@ -4,18 +4,21 @@ import { useRouter } from "next/router";
 
 import useSWR from "swr";
 
+// hook
+import useProjects from "hooks/use-projects";
+import useWorkspaceMembers from "hooks/use-workspace-members";
 // services
 import issuesService from "services/issues.service";
 // components
 import { DateFilterModal } from "components/core";
 // ui
-import { MultiLevelDropdown } from "components/ui";
+import { Avatar, MultiLevelDropdown } from "components/ui";
 // icons
 import { PriorityIcon, StateGroupIcon } from "components/icons";
 // helpers
 import { checkIfArraysHaveSameElements } from "helpers/array.helper";
 // types
-import { IIssueFilterOptions, IQuery, TStateGroups } from "types";
+import { IIssueFilterOptions, TStateGroups } from "types";
 // fetch-keys
 import { WORKSPACE_LABELS } from "constants/fetch-keys";
 // constants
@@ -23,7 +26,7 @@ import { GROUP_CHOICES, PRIORITIES } from "constants/project";
 import { DATE_FILTER_OPTIONS } from "constants/filters";
 
 type Props = {
-  filters: Partial<IIssueFilterOptions> | IQuery;
+  filters: Partial<IIssueFilterOptions>;
   onSelect: (option: any) => void;
   direction?: "left" | "right";
   height?: "sm" | "md" | "rg" | "lg";
@@ -55,6 +58,11 @@ export const MyIssuesSelectFilters: React.FC<Props> = ({
       : null
   );
 
+  const { projects: allProjects } = useProjects();
+  const joinedProjects = allProjects?.filter((p) => p.is_member);
+
+  const { workspaceMembers } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
+
   return (
     <>
       {isDateFilterModalOpen && (
@@ -74,25 +82,19 @@ export const MyIssuesSelectFilters: React.FC<Props> = ({
         height={height}
         options={[
           {
-            id: "priority",
-            label: "Priority",
-            value: PRIORITIES,
+            id: "project",
+            label: "Project",
+            value: joinedProjects,
             hasChildren: true,
-            children: [
-              ...PRIORITIES.map((priority) => ({
-                id: priority === null ? "null" : priority,
-                label: (
-                  <div className="flex items-center gap-2 capitalize">
-                    <PriorityIcon priority={priority} /> {priority ?? "None"}
-                  </div>
-                ),
-                value: {
-                  key: "priority",
-                  value: priority === null ? "null" : priority,
-                },
-                selected: filters?.priority?.includes(priority === null ? "null" : priority),
-              })),
-            ],
+            children: joinedProjects?.map((project) => ({
+              id: project.id,
+              label: <div className="flex items-center gap-2">{project.name}</div>,
+              value: {
+                key: "project",
+                value: project.id,
+              },
+              selected: filters?.project?.includes(project.id),
+            })),
           },
           {
             id: "state_group",
@@ -142,6 +144,87 @@ export const MyIssuesSelectFilters: React.FC<Props> = ({
               selected: filters?.labels?.includes(label.id),
             })),
           },
+          {
+            id: "priority",
+            label: "Priority",
+            value: PRIORITIES,
+            hasChildren: true,
+            children: [
+              ...PRIORITIES.map((priority) => ({
+                id: priority === null ? "null" : priority,
+                label: (
+                  <div className="flex items-center gap-2 capitalize">
+                    <PriorityIcon priority={priority} /> {priority ?? "None"}
+                  </div>
+                ),
+                value: {
+                  key: "priority",
+                  value: priority === null ? "null" : priority,
+                },
+                selected: filters?.priority?.includes(priority === null ? "null" : priority),
+              })),
+            ],
+          },
+          {
+            id: "created_by",
+            label: "Created by",
+            value: workspaceMembers,
+            hasChildren: true,
+            children: workspaceMembers?.map((member) => ({
+              id: member.member.id,
+              label: (
+                <div className="flex items-center gap-2">
+                  <Avatar user={member.member} />
+                  {member.member.display_name}
+                </div>
+              ),
+              value: {
+                key: "created_by",
+                value: member.member.id,
+              },
+              selected: filters?.created_by?.includes(member.member.id),
+            })),
+          },
+          {
+            id: "assignees",
+            label: "Assignees",
+            value: workspaceMembers,
+            hasChildren: true,
+            children: workspaceMembers?.map((member) => ({
+              id: member.member.id,
+              label: (
+                <div className="flex items-center gap-2">
+                  <Avatar user={member.member} />
+                  {member.member.display_name}
+                </div>
+              ),
+              value: {
+                key: "assignees",
+                value: member.member.id,
+              },
+              selected: filters?.assignees?.includes(member.member.id),
+            })),
+          },
+          {
+            id: "subscriber",
+            label: "Subscriber",
+            value: workspaceMembers,
+            hasChildren: true,
+            children: workspaceMembers?.map((member) => ({
+              id: member.member.id,
+              label: (
+                <div className="flex items-center gap-2">
+                  <Avatar user={member.member} />
+                  {member.member.display_name}
+                </div>
+              ),
+              value: {
+                key: "subscriber",
+                value: member.member.id,
+              },
+              selected: filters?.subscriber?.includes(member.member.id),
+            })),
+          },
           {
             id: "start_date",
             label: "Start date",

web/components/issues/my-issues/my-issues-view-options.tsx

@@ -30,7 +30,7 @@ const issueViewOptions: { type: TIssueViewOptions; Icon: any }[] = [
 
 export const MyIssuesViewOptions: React.FC = () => {
   const router = useRouter();
-  const { workspaceSlug, globalViewId } = router.query;
+  const { workspaceSlug, workspaceViewId } = router.query;
 
   const { displayFilters, setDisplayFilters, filters, setFilters } = useMyIssuesFilters(
     workspaceSlug?.toString()
@@ -42,7 +42,7 @@ export const MyIssuesViewOptions: React.FC = () => {
     router.pathname.includes(pathname)
   );
 
-  const showFilters = isWorkspaceViewPath || globalViewId;
+  const showFilters = isWorkspaceViewPath || workspaceViewId;
 
   return (
     <div className="flex items-center gap-2">

web/components/issues/sidebar-select/blocked.tsx

@@ -14,7 +14,7 @@ import { ExistingIssuesListModal } from "components/core";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { BlockedIcon } from "components/icons";
 // types
-import { BlockeIssueDetail, IIssue, ISearchIssueResponse } from "types";
+import { BlockeIssueDetail, IIssue, ISearchIssueResponse, UserAuth } from "types";
 
 type Props = {
   issueId?: string;
@@ -41,9 +41,6 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
     setIsBlockedModalOpen(false);
   };
 
-  const blockedByIssue =
-    watch("related_issues")?.filter((i) => i.relation_type === "blocked_by") || [];
-
   const onSubmit = async (data: ISearchIssueResponse[]) => {
     if (data.length === 0) {
       setToastAlert({
@@ -83,13 +80,18 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
       })
       .then((response) => {
         submitChanges({
-          related_issues: [...watch("related_issues"), ...response],
+          related_issues: [
+            ...watch("related_issues")?.filter((i) => i.relation_type !== "blocked_by"),
+            ...response,
+          ],
         });
       });
 
     handleClose();
   };
 
+  const blockedByIssue = watch("related_issues")?.filter((i) => i.relation_type === "blocked_by");
+
   return (
     <>
       <ExistingIssuesListModal

web/components/issues/sidebar-select/blocker.tsx

@@ -15,7 +15,7 @@ import issuesService from "services/issues.service";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { BlockerIcon } from "components/icons";
 // types
-import { BlockeIssueDetail, IIssue, ISearchIssueResponse } from "types";
+import { BlockeIssueDetail, IIssue, ISearchIssueResponse, UserAuth } from "types";
 
 type Props = {
   issueId?: string;