Merge branch 'develop' of github.com:makeplane/plane into chore/space_sign_in_improvement

apiserver/.env.example

@@ -14,6 +14,11 @@ PGHOST="plane-db"
 PGDATABASE="plane"
 DATABASE_URL=postgresql://${PGUSER}:${PGPASSWORD}@${PGHOST}/${PGDATABASE}
 
+# Oauth variables
+GOOGLE_CLIENT_ID=""
+GITHUB_CLIENT_ID=""
+GITHUB_CLIENT_SECRET=""
+
 # Redis Settings
 REDIS_HOST="plane-redis"
 REDIS_PORT="6379"
@@ -50,7 +55,6 @@ NGINX_PORT=80
 # SignUps
 ENABLE_SIGNUP="1"
 
-
 # Enable Email/Password Signup
 ENABLE_EMAIL_PASSWORD="1"
 

apiserver/plane/api/serializers/cycle.py

@@ -30,6 +30,11 @@ class CycleSerializer(BaseSerializer):
         model = Cycle
         fields = "__all__"
         read_only_fields = [
+            "id",
+            "created_at",
+            "updated_at",
+            "created_by",
+            "updated_by",
             "workspace",
             "project",
             "owned_by",

apiserver/plane/api/serializers/issue.py

@@ -1,3 +1,6 @@
+from lxml import html
+
+
 # Django imports
 from django.utils import timezone
 
@@ -21,7 +24,8 @@ from plane.db.models import (
 from .base import BaseSerializer
 from .cycle import CycleSerializer, CycleLiteSerializer
 from .module import ModuleSerializer, ModuleLiteSerializer
-
+from .user import UserLiteSerializer
+from .state import StateLiteSerializer
 
 class IssueSerializer(BaseSerializer):
     assignees = serializers.ListField(
@@ -42,7 +46,6 @@ class IssueSerializer(BaseSerializer):
 
     class Meta:
         model = Issue
-        fields = "__all__"
         read_only_fields = [
             "id",
             "workspace",
@@ -52,6 +55,10 @@ class IssueSerializer(BaseSerializer):
             "created_at",
             "updated_at",
         ]
+        exclude = [
+            "description",
+            "description_stripped",
+        ]
 
     def validate(self, data):
         if (
@@ -61,6 +68,15 @@ class IssueSerializer(BaseSerializer):
         ):
             raise serializers.ValidationError("Start date cannot exceed target date")
         
+        try:
+            if(data.get("description_html", None) is not None):
+                parsed = html.fromstring(data["description_html"])
+                parsed_str = html.tostring(parsed, encoding='unicode')
+                data["description_html"] = parsed_str
+            
+        except Exception as e:
+            raise serializers.ValidationError(f"Invalid HTML: {str(e)}")
+
         # Validate assignees are from project
         if data.get("assignees", []):
             data["assignees"] = ProjectMember.objects.filter(
@@ -291,7 +307,6 @@ class IssueCommentSerializer(BaseSerializer):
 
     class Meta:
         model = IssueComment
-        fields = "__all__"
         read_only_fields = [
             "id",
             "workspace",
@@ -302,6 +317,21 @@ class IssueCommentSerializer(BaseSerializer):
             "created_at",
             "updated_at",
         ]
+        exclude = [
+            "comment_stripped",
+            "comment_json",
+        ]
+
+    def validate(self, data):
+        try:
+            if(data.get("comment_html", None) is not None):
+                parsed = html.fromstring(data["comment_html"])
+                parsed_str = html.tostring(parsed, encoding='unicode')
+                data["comment_html"] = parsed_str
+            
+        except Exception as e:
+            raise serializers.ValidationError(f"Invalid HTML: {str(e)}")
+        return data
 
 
 class IssueActivitySerializer(BaseSerializer):
@@ -331,12 +361,23 @@ class ModuleIssueSerializer(BaseSerializer):
         ]
 
 
-class IssueExpandSerializer(BaseSerializer):
+class LabelLiteSerializer(BaseSerializer):
-    # Serialize the related cycle. It's a OneToOne relation.
-    cycle = CycleLiteSerializer(source="issue_cycle.cycle", read_only=True)
 
-    # Serialize the related module. It's a OneToOne relation.
+    class Meta:
+        model = Label
+        fields = [
+            "id",
+            "name",
+            "color",
+        ]
+
+
+class IssueExpandSerializer(BaseSerializer):
+    cycle = CycleLiteSerializer(source="issue_cycle.cycle", read_only=True)
     module = ModuleLiteSerializer(source="issue_module.module", read_only=True)
+    labels = LabelLiteSerializer(read_only=True, many=True)
+    assignees = UserLiteSerializer(read_only=True, many=True)
+    state = StateLiteSerializer(read_only=True)
 
     class Meta:
         model = Issue

apiserver/plane/api/serializers/project.py

@@ -21,6 +21,7 @@ class ProjectSerializer(BaseSerializer):
         fields = "__all__"
         read_only_fields = [
             "id",
+            'emoji',
             "workspace",
             "created_at",
             "updated_at",

apiserver/plane/api/serializers/state.py

@@ -16,6 +16,11 @@ class StateSerializer(BaseSerializer):
         model = State
         fields = "__all__"
         read_only_fields = [
+            "id",
+            "created_by",
+            "updated_by",
+            "created_at",
+            "updated_at",
             "workspace",
             "project",
         ]

apiserver/plane/api/serializers/user.py

@@ -11,10 +11,6 @@ class UserLiteSerializer(BaseSerializer):
             "first_name",
             "last_name",
             "avatar",
-            "is_bot",
             "display_name",
         ]
-        read_only_fields = [
+        read_only_fields = fields
-            "id",
-            "is_bot",
-        ]

apiserver/plane/api/views/state.py

@@ -64,7 +64,7 @@ class StateAPIEndpoint(BaseAPIView):
         )
 
         if state.default:
-            return Response({"error": "Default state cannot be deleted"}, status=False)
+            return Response({"error": "Default state cannot be deleted"}, status=status.HTTP_400_BAD_REQUEST)
 
         # Check for any issues in the state
         issue_exist = Issue.issue_objects.filter(state=state_id).exists()

apiserver/plane/app/serializers/user.py

@@ -169,8 +169,8 @@ class ChangePasswordSerializer(serializers.Serializer):
     Serializer for password change endpoint.
     """
     old_password = serializers.CharField(required=True)
-    new_password = serializers.CharField(required=True)
+    new_password = serializers.CharField(required=True, min_length=8)
-    confirm_password = serializers.CharField(required=True)
+    confirm_password = serializers.CharField(required=True, min_length=8)
 
     def validate(self, data):
         if data.get("old_password") == data.get("new_password"):
@@ -187,9 +187,7 @@ class ChangePasswordSerializer(serializers.Serializer):
 
 
 class ResetPasswordSerializer(serializers.Serializer):
-    model = User
-
     """
     Serializer for password change endpoint.
     """
-    new_password = serializers.CharField(required=True)
+    new_password = serializers.CharField(required=True, min_length=8)

apiserver/plane/app/views/auth_extended.py

@@ -105,17 +105,21 @@ class ForgotPasswordEndpoint(BaseAPIView):
     def post(self, request):
         email = request.data.get("email")
 
-        if User.objects.filter(email=email).exists():
+        try:
-            user = User.objects.get(email=email)
+            validate_email(email)
-            uidb64 = urlsafe_base64_encode(smart_bytes(user.id))
+        except ValidationError:
-            token = PasswordResetTokenGenerator().make_token(user)
+            return Response({"error": "Please enter a valid email"}, status=status.HTTP_400_BAD_REQUEST)
 
+        # Get the user
+        user = User.objects.filter(email=email).first()
+        if user:
+            # Get the reset token for user
+            uidb64, token = get_tokens_for_user(user=user)
             current_site = request.META.get("HTTP_ORIGIN")
-
+            # send the forgot password email
             forgot_password.delay(
                 user.first_name, user.email, uidb64, token, current_site
             )
-
             return Response(
                 {"message": "Check your email to reset your password"},
                 status=status.HTTP_200_OK,
@@ -130,14 +134,18 @@ class ResetPasswordEndpoint(BaseAPIView):
 
     def post(self, request, uidb64, token):
         try:
+            # Decode the id from the uidb64
             id = smart_str(urlsafe_base64_decode(uidb64))
             user = User.objects.get(id=id)
+
+            # check if the token is valid for the user
             if not PasswordResetTokenGenerator().check_token(user, token):
                 return Response(
                     {"error": "Token is invalid"},
                     status=status.HTTP_401_UNAUTHORIZED,
                 )
 
+            # Reset the password
             serializer = ResetPasswordSerializer(data=request.data)
             if serializer.is_valid():
                 # set_password also hashes the password that the user will get
@@ -145,9 +153,9 @@ class ResetPasswordEndpoint(BaseAPIView):
                 user.is_password_autoset = False
                 user.save()
 
+                # Log the user in
                 # Generate access token for the user
                 access_token, refresh_token = get_tokens_for_user(user)
-
                 data = {
                     "access_token": access_token,
                     "refresh_token": refresh_token,
@@ -166,7 +174,6 @@ class ResetPasswordEndpoint(BaseAPIView):
 class ChangePasswordEndpoint(BaseAPIView):
     def post(self, request):
         serializer = ChangePasswordSerializer(data=request.data)
-
         user = User.objects.get(pk=request.user.id)
         if serializer.is_valid():
             if not user.check_password(serializer.data.get("old_password")):
@@ -218,16 +225,15 @@ class EmailCheckEndpoint(BaseAPIView):
     ]
 
     def post(self, request):
-        # get the email
-
         # Check the instance registration
         instance = Instance.objects.first()
-        if instance is None:
+        if instance is None or not instance.is_setup_done:
             return Response(
                 {"error": "Instance is not configured"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        # Get the configurations
         instance_configuration = InstanceConfiguration.objects.values("key", "value")
 
         email = request.data.get("email", False)
@@ -267,7 +273,7 @@ class EmailCheckEndpoint(BaseAPIView):
                     status=status.HTTP_400_BAD_REQUEST,
                 )
 
-
+            # Create the user with default values
             user = User.objects.create(
                 email=email,
                 username=uuid.uuid4().hex,
@@ -325,7 +331,7 @@ class EmailCheckEndpoint(BaseAPIView):
                         first_time=True,
                     )
                 # Automatically send the email
-                return Response({"is_password_autoset": user.is_password_autoset}, status=status.HTTP_400_BAD_REQUEST)
+                return Response({"is_password_autoset": user.is_password_autoset}, status=status.HTTP_200_OK)
         # Existing user
         else:
             if type == "magic_code":

apiserver/plane/app/views/authentication.py

@@ -10,14 +10,12 @@ from django.utils import timezone
 from django.core.exceptions import ValidationError
 from django.core.validators import validate_email
 from django.conf import settings
-from django.contrib.auth.hashers import make_password
 
 # Third party imports
 from rest_framework.response import Response
 from rest_framework.permissions import AllowAny
 from rest_framework import status
 from rest_framework_simplejwt.tokens import RefreshToken
-
 from sentry_sdk import capture_message
 
 # Module imports
@@ -33,7 +31,6 @@ from plane.settings.redis import redis_instance
 from plane.license.models import InstanceConfiguration, Instance
 from plane.license.utils.instance_value import get_configuration_value
 from plane.bgtasks.event_tracking_task import auth_events
-from plane.bgtasks.magic_link_code_task import magic_link
 from plane.bgtasks.user_count_task import update_user_instance_user_count
 
 
@@ -49,6 +46,14 @@ class SignUpEndpoint(BaseAPIView):
     permission_classes = (AllowAny,)
 
     def post(self, request):
+        # Check if the instance configuration is done
+        instance = Instance.objects.first()
+        if instance is None or not instance.is_setup_done:
+            return Response(
+                {"error": "Instance is not configured"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
         instance_configuration = InstanceConfiguration.objects.values("key", "value")
 
         email = request.data.get("email", False)
@@ -71,6 +76,7 @@ class SignUpEndpoint(BaseAPIView):
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        # If the sign up is not enabled and the user does not have invite disallow him from creating the account
         if (
             get_configuration_value(
                 instance_configuration,
@@ -124,6 +130,14 @@ class SignInEndpoint(BaseAPIView):
     permission_classes = (AllowAny,)
 
     def post(self, request):
+        # Check if the instance configuration is done
+        instance = Instance.objects.first()
+        if instance is None or not instance.is_setup_done:
+            return Response(
+                {"error": "Instance is not configured"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
         email = request.data.get("email", False)
         password = request.data.get("password", False)
 
@@ -144,14 +158,6 @@ class SignInEndpoint(BaseAPIView):
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-        # Check if the instance setup is done or not
-        instance = Instance.objects.first()
-        if instance is None or not instance.is_setup_done:
-            return Response(
-                {"error": "Instance is not configured"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
         # Get the user
         user = User.objects.filter(email=email).first()
 
@@ -288,6 +294,7 @@ class MagicSignInEndpoint(BaseAPIView):
     ]
 
     def post(self, request):
+        # Check if the instance configuration is done
         instance = Instance.objects.first()
         if instance is None or not instance.is_setup_done:
             return Response(

apiserver/plane/app/views/oauth.py

@@ -303,14 +303,6 @@ class OauthEndpoint(BaseAPIView):
             instance_configuration = InstanceConfiguration.objects.values(
                 "key", "value"
             )
-            # Check if instance is registered or not
-            instance = Instance.objects.first()
-            if instance is None and not instance.is_setup_done:
-                return Response(
-                    {"error": "Instance is not configured"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
             if (
                 get_configuration_value(
                     instance_configuration,

apiserver/plane/app/views/state.py

@@ -77,7 +77,7 @@ class StateViewSet(BaseViewSet):
         )
 
         if state.default:
-            return Response({"error": "Default state cannot be deleted"}, status=False)
+            return Response({"error": "Default state cannot be deleted"}, status=status.HTTP_400_BAD_REQUEST)
 
         # Check for any issues in the state
         issue_exist = Issue.issue_objects.filter(state=pk).exists()

apiserver/plane/bgtasks/analytic_plot_export.py

@@ -1,7 +1,8 @@
 # Python imports
 import csv
 import io
-import os
+import requests
+import json
 
 # Django imports
 from django.core.mail import EmailMultiAlternatives, get_connection
@@ -17,8 +18,8 @@ from sentry_sdk import capture_exception
 from plane.db.models import Issue
 from plane.utils.analytics_plot import build_graph_plot
 from plane.utils.issue_filters import issue_filters
-from plane.license.models import InstanceConfiguration
+from plane.license.models import InstanceConfiguration, Instance
-from plane.license.utils.instance_value import get_configuration_value
+from plane.license.utils.instance_value import get_email_configuration
 
 row_mapping = {
     "state__name": "State",
@@ -43,7 +44,7 @@ CYCLE_ID = "issue_cycle__cycle_id"
 MODULE_ID = "issue_module__module_id"
 
 
-def send_export_email(email, slug, csv_buffer):
+def send_export_email(email, slug, csv_buffer, rows):
     """Helper function to send export email."""
     subject = "Your Export is ready"
     html_content = render_to_string("emails/exports/analytics.html", {})
@@ -55,47 +56,58 @@ def send_export_email(email, slug, csv_buffer):
     instance_configuration = InstanceConfiguration.objects.filter(
         key__startswith="EMAIL_"
     ).values("key", "value")
+
+    (
+        EMAIL_HOST,
+        EMAIL_HOST_USER,
+        EMAIL_HOST_PASSWORD,
+        EMAIL_PORT,
+        EMAIL_USE_TLS,
+        EMAIL_FROM,
+    ) = get_email_configuration(instance_configuration=instance_configuration)
+
+    # Send the email if the users don't have smtp configured
+    if EMAIL_HOST and EMAIL_HOST_USER and EMAIL_HOST_PASSWORD:
+        # Check the instance registration
+        instance = Instance.objects.first()
+
+        headers = {
+            "Content-Type": "application/json",
+            "x-instance-id": instance.instance_id,
+            "x-api-key": instance.api_key,
+        }
+
+        payload = {
+            "email": email,
+            "slug": slug,
+            "rows": rows,
+        }
+
+        _ = requests.post(
+            f"{settings.LICENSE_ENGINE_BASE_URL}/api/instances/users/analytics/",
+            headers=headers,
+            json=payload,
+        )
+        return
+
     connection = get_connection(
-        host=get_configuration_value(
+        host=EMAIL_HOST,
-            instance_configuration, "EMAIL_HOST", os.environ.get("EMAIL_HOST")
+        port=int(EMAIL_PORT),
-        ),
+        username=EMAIL_HOST_USER,
-        port=int(
+        password=EMAIL_HOST_PASSWORD,
-            get_configuration_value(
+        use_tls=bool(EMAIL_USE_TLS),
-                instance_configuration, "EMAIL_PORT", os.environ.get("EMAIL_PORT")
-            )
-        ),
-        username=get_configuration_value(
-            instance_configuration,
-            "EMAIL_HOST_USER",
-            os.environ.get("EMAIL_HOST_USER"),
-        ),
-        password=get_configuration_value(
-            instance_configuration,
-            "EMAIL_HOST_PASSWORD",
-            os.environ.get("EMAIL_HOST_PASSWORD"),
-        ),
-        use_tls=bool(
-            get_configuration_value(
-                instance_configuration,
-                "EMAIL_USE_TLS",
-                os.environ.get("EMAIL_USE_TLS", "1"),
-            )
-        ),
     )
 
     msg = EmailMultiAlternatives(
         subject=subject,
         body=text_content,
-        from_email=get_configuration_value(
+        from_email=EMAIL_FROM,
-            instance_configuration,
-            "EMAIL_FROM",
-            os.environ.get("EMAIL_FROM", "Team Plane <team@mailer.plane.so>"),
-        ),
         to=[email],
         connection=connection,
     )
     msg.attach(f"{slug}-analytics.csv", csv_buffer.getvalue())
     msg.send(fail_silently=False)
+    return
 
 
 def get_assignee_details(slug, filters):
@@ -463,8 +475,11 @@ def analytic_export_task(email, data, slug):
             )
 
         csv_buffer = generate_csv_from_rows(rows)
-        send_export_email(email, slug, csv_buffer)
+        send_export_email(email, slug, csv_buffer, rows)
+        return
     except Exception as e:
+        print(e)
         if settings.DEBUG:
             print(e)
         capture_exception(e)
+        return

apiserver/plane/bgtasks/forgot_password_task.py

@@ -40,13 +40,10 @@ def forgot_password(first_name, email, uidb64, token, current_site):
         ) = get_email_configuration(instance_configuration=instance_configuration)
 
         # Send the email if the users don't have smtp configured
-        if not EMAIL_HOST or not EMAIL_HOST_USER or not EMAIL_HOST_PASSWORD:
+        if not (EMAIL_HOST and EMAIL_HOST_USER and EMAIL_HOST_PASSWORD):
             # Check the instance registration
             instance = Instance.objects.first()
 
-            # send the emails through control center
-            license_engine_base_url = os.environ.get("LICENSE_ENGINE_BASE_URL", False)
-
             # headers
             headers = {
                 "Content-Type": "application/json",
@@ -61,7 +58,7 @@ def forgot_password(first_name, email, uidb64, token, current_site):
             }
 
             _ = requests.post(
-                f"{license_engine_base_url}/api/instances/users/forgot-password/",
+                f"{settings.LICENSE_ENGINE_BASE_URL}/api/instances/users/forgot-password/",
                 headers=headers,
                 data=json.dumps(payload),
             )

apiserver/plane/bgtasks/magic_link_code_task.py

@@ -21,7 +21,6 @@ from plane.license.utils.instance_value import get_email_configuration
 @shared_task
 def magic_link(email, key, token, current_site):
     try:
-
         instance_configuration = InstanceConfiguration.objects.filter(
             key__startswith="EMAIL_"
         ).values("key", "value")
@@ -36,13 +35,10 @@ def magic_link(email, key, token, current_site):
         ) = get_email_configuration(instance_configuration=instance_configuration)
 
         # Send the email if the users don't have smtp configured
-        if not EMAIL_HOST or not EMAIL_HOST_USER or not EMAIL_HOST_PASSWORD:
+        if not (EMAIL_HOST and EMAIL_HOST_USER and EMAIL_HOST_PASSWORD):
             # Check the instance registration
             instance = Instance.objects.first()
 
-            # send the emails through control center
-            license_engine_base_url = os.environ.get("LICENSE_ENGINE_BASE_URL", False)
-
             headers = {
                 "Content-Type": "application/json",
                 "x-instance-id": instance.instance_id,
@@ -55,7 +51,7 @@ def magic_link(email, key, token, current_site):
             }
 
             _ = requests.post(
-                f"{license_engine_base_url}/api/instances/users/magic-code/",
+                f"{settings.LICENSE_ENGINE_BASE_URL}/api/instances/users/magic-code/",
                 headers=headers,
                 data=json.dumps(payload),
             )

apiserver/plane/bgtasks/user_count_task.py

@@ -32,13 +32,9 @@ def update_user_instance_user_count():
             "x-api-key": instance.api_key,
         }
 
-        license_engine_base_url = os.environ.get("LICENSE_ENGINE_BASE_URL")
-        if not license_engine_base_url:
-            raise Exception("License Engine base url is required")
-        
         # Update the license engine
         _ = requests.post(
-            f"{license_engine_base_url}/api/instances/",
+            f"{settings.LICENSE_ENGINE_BASE_URL}/api/instances/",
             headers=headers,
             data=json.dumps(payload),
         )

apiserver/plane/bgtasks/webhook_task.py

@@ -109,7 +109,7 @@ def webhook_task(self, webhook, slug, event, event_data, action):
         if webhook.secret_key:
             hmac_signature = hmac.new(
                 webhook.secret_key.encode("utf-8"),
-                json.dumps(payload, sort_keys=True).encode("utf-8"),
+                json.dumps(payload).encode("utf-8"),
                 hashlib.sha256,
             )
             signature = hmac_signature.hexdigest()

apiserver/plane/bgtasks/workspace_invitation_task.py

@@ -51,15 +51,10 @@ def workspace_invitation(email, workspace_id, token, current_site, invitor):
         ) = get_email_configuration(instance_configuration=instance_configuration)
 
         # Send the email if the users don't have smtp configured
-        if not EMAIL_HOST or not EMAIL_HOST_USER or not EMAIL_HOST_PASSWORD:
+        if not (EMAIL_HOST and EMAIL_HOST_USER and EMAIL_HOST_PASSWORD):
             # Check the instance registration
             instance = Instance.objects.first()
 
-            # send the emails through control center
-            license_engine_base_url = os.environ.get("LICENSE_ENGINE_BASE_URL", False)
-            if not license_engine_base_url:
-                raise Exception("License engine base url is required")
-
             headers = {
                 "Content-Type": "application/json",
                 "x-instance-id": instance.instance_id,
@@ -73,7 +68,7 @@ def workspace_invitation(email, workspace_id, token, current_site, invitor):
                 "email": email,
             }
             _ = requests.post(
-                f"{license_engine_base_url}/api/instances/users/workspace-invitation/",
+                f"{settings.LICENSE_ENGINE_BASE_URL}/api/instances/users/workspace-invitation/",
                 headers=headers,
                 data=json.dumps(payload),
             )

apiserver/plane/license/api/views/instance.py

@@ -11,6 +11,7 @@ from django.utils import timezone
 from django.contrib.auth.hashers import make_password
 from django.core.validators import validate_email
 from django.core.exceptions import ValidationError
+from django.conf import settings
 
 # Third party imports
 from rest_framework import status
@@ -34,7 +35,6 @@ from plane.db.models import User
 from plane.license.utils.encryption import encrypt_data
 from plane.settings.redis import redis_instance
 from plane.bgtasks.magic_link_code_task import magic_link
-from plane.license.utils.instance_value import get_configuration_value
 
 
 class InstanceEndpoint(BaseAPIView):
@@ -57,25 +57,17 @@ class InstanceEndpoint(BaseAPIView):
                 # Load JSON content from the file
                 data = json.load(file)
 
-            license_engine_base_url = os.environ.get("LICENSE_ENGINE_BASE_URL")
-
-            if not license_engine_base_url:
-                raise Response(
-                    {"error": "LICENSE_ENGINE_BASE_URL is required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
             headers = {"Content-Type": "application/json"}
 
             payload = {
-                "instance_key": os.environ.get("INSTANCE_KEY"),
+                "instance_key":settings.INSTANCE_KEY,
                 "version": data.get("version", 0.1),
                 "machine_signature": os.environ.get("MACHINE_SIGNATURE"),
                 "user_count": User.objects.filter(is_bot=False).count(),
             }
 
             response = requests.post(
-                f"{license_engine_base_url}/api/instances/",
+                f"{settings.LICENSE_ENGINE_BASE_URL}/api/instances/",
                 headers=headers,
                 data=json.dumps(payload),
             )
@@ -130,6 +122,24 @@ class InstanceEndpoint(BaseAPIView):
         serializer = InstanceSerializer(instance, data=request.data, partial=True)
         if serializer.is_valid():
             serializer.save()
+            # Save the user in control center
+            headers = {
+                "Content-Type": "application/json",
+                "x-instance-id": instance.instance_id,
+                "x-api-key": instance.api_key,
+            }
+            # Update instance settings in the license engine
+            _ = requests.patch(
+                f"{settings.LICENSE_ENGINE_BASE_URL}/api/instances/",
+                headers=headers,
+                data=json.dumps(
+                    {
+                        "is_support_required": serializer.data["is_support_required"],
+                        "is_telemetry_enabled": serializer.data["is_telemetry_enabled"],
+                        "version": serializer.data["version"],
+                    }
+                ),
+            )
             return Response(serializer.data, status=status.HTTP_200_OK)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
@@ -251,7 +261,6 @@ class AdminMagicSignInGenerateEndpoint(BaseAPIView):
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-
         if not email:
             return Response(
                 {"error": "Please provide a valid email address"},
@@ -409,13 +418,6 @@ class AdminSetUserPasswordEndpoint(BaseAPIView):
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-        license_engine_base_url = os.environ.get("LICENSE_ENGINE_BASE_URL", False)
-        if not license_engine_base_url:
-            return Response(
-                {"error": "License engine base url is required"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
         # Save the user in control center
         headers = {
             "Content-Type": "application/json",
@@ -423,14 +425,14 @@ class AdminSetUserPasswordEndpoint(BaseAPIView):
             "x-api-key": instance.api_key,
         }
         _ = requests.patch(
-            f"{license_engine_base_url}/api/instances/",
+            f"{settings.LICENSE_ENGINE_BASE_URL}/api/instances/",
             headers=headers,
             data=json.dumps({"is_setup_done": True}),
         )
 
         # Also register the user as admin
         _ = requests.post(
-            f"{license_engine_base_url}/api/instances/users/register/",
+            f"{settings.LICENSE_ENGINE_BASE_URL}/api/instances/users/register/",
             headers=headers,
             data=json.dumps(
                 {
@@ -472,23 +474,19 @@ class SignUpScreenVisitedEndpoint(BaseAPIView):
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-        license_engine_base_url = os.environ.get("LICENSE_ENGINE_BASE_URL", False)
+        if not instance.is_signup_screen_visited:
-
+            instance.is_signup_screen_visited = True
-        if not license_engine_base_url:
+            instance.save()
-            return Response(
+            # set the headers
-                {"error": "License engine base url is required"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
             headers = {
                 "Content-Type": "application/json",
                 "x-instance-id": instance.instance_id,
                 "x-api-key": instance.api_key,
             }
-
+            # create the payload
             payload = {"is_signup_screen_visited": True}
-        response = requests.patch(
+            _ = requests.patch(
-            f"{license_engine_base_url}/api/instances/",
+                f"{settings.LICENSE_ENGINE_BASE_URL}/api/instances/",
                 headers=headers,
                 data=json.dumps(payload),
             )

apiserver/plane/license/management/commands/register_instance.py

@@ -6,6 +6,7 @@ import requests
 # Django imports
 from django.core.management.base import BaseCommand, CommandError
 from django.utils import timezone
+from django.conf import settings
 
 # Module imports
 from plane.license.models import Instance
@@ -30,31 +31,22 @@ class Command(BaseCommand):
                 data = json.load(file)
 
             machine_signature = options.get("machine_signature", False)
-            instance_key = os.environ.get("INSTANCE_KEY", False)
             
-            # Raise an exception if the admin email is not provided
-            if not instance_key:
-                raise CommandError("INSTANCE_KEY is required")
 
             if not machine_signature:
                 raise CommandError("Machine signature is required")
 
-            license_engine_base_url = os.environ.get("LICENSE_ENGINE_BASE_URL")
-
-            if not license_engine_base_url:
-                raise CommandError("LICENSE_ENGINE_BASE_URL is required")
-
             headers = {"Content-Type": "application/json"}
 
             payload = {
-                "instance_key": instance_key,
+                "instance_key": settings.INSTANCE_KEY,
                 "version": data.get("version", 0.1),
                 "machine_signature": machine_signature,
                 "user_count": User.objects.filter(is_bot=False).count(),
             }
 
             response = requests.post(
-                f"{license_engine_base_url}/api/instances/",
+                f"{settings.LICENSE_ENGINE_BASE_URL}/api/instances/",
                 headers=headers,
                 data=json.dumps(payload),
             )

apiserver/plane/settings/common.py

@@ -290,7 +290,7 @@ CELERY_IMPORTS = (
 
 # Sentry Settings
 # Enable Sentry Settings
-if bool(os.environ.get("SENTRY_DSN", False)):
+if bool(os.environ.get("SENTRY_DSN", False)) and os.environ.get("SENTRY_DSN").startswith("https://"):
     sentry_sdk.init(
         dsn=os.environ.get("SENTRY_DSN", ""),
         integrations=[
@@ -325,3 +325,9 @@ USE_MINIO = int(os.environ.get("USE_MINIO", 0)) == 1
 # Posthog settings
 POSTHOG_API_KEY = os.environ.get("POSTHOG_API_KEY", False)
 POSTHOG_HOST = os.environ.get("POSTHOG_HOST", False)
+
+# License engine base url
+LICENSE_ENGINE_BASE_URL = os.environ.get("LICENSE_ENGINE_BASE_URL", "https://control-center.plane.so")
+
+# instance key
+INSTANCE_KEY = os.environ.get("INSTANCE_KEY", "ae6517d563dfc13d8270bd45cf17b08f70b37d989128a9dab46ff687603333c3")

apiserver/plane/utils/issue_filters.py

@@ -63,7 +63,7 @@ def date_filter(filter, date_term, queries):
                         duration=int(digit),
                         subsequent=date_query[1],
                         term=term,
-                        date_filter="created_at__date",
+                        date_filter=date_term,
                         offset=date_query[2],
                     )
             else:

apiserver/requirements/base.txt

@@ -38,3 +38,4 @@ beautifulsoup4==4.12.2
 dj-database-url==2.1.0
 posthog==3.0.2
 cryptography==41.0.5
+lxml==4.9.3

apiserver/templates/emails/auth/magic_signin.html

@@ -149,20 +149,20 @@
           padding-top: 10px !important;
         }
         .r13-o {
-          border-bottom-color: #efefef !important;
+          border-bottom-color: #d9e4ff !important;
           border-bottom-width: 1px !important;
-          border-left-color: #efefef !important;
+          border-left-color: #d9e4ff !important;
           border-left-width: 1px !important;
-          border-right-color: #efefef !important;
+          border-right-color: #d9e4ff !important;
           border-right-width: 1px !important;
           border-style: solid !important;
-          border-top-color: #efefef !important;
+          border-top-color: #d9e4ff !important;
           border-top-width: 1px !important;
           margin: 0 auto 0 0 !important;
           width: 100% !important;
         }
         .r14-i {
-          background-color: #e3e6f1 !important;
+          background-color: #ecf1ff !important;
           padding-bottom: 10px !important;
           padding-left: 10px !important;
           padding-right: 10px !important;
@@ -225,16 +225,11 @@
           padding-top: 5px !important;
         }
         .r24-o {
-          border-style: solid !important;
-          margin-right: 8px !important;
-          width: 32px !important;
-        }
-        .r25-o {
           border-style: solid !important;
           margin-right: 0px !important;
           width: 32px !important;
         }
-        .r26-i {
+        .r25-i {
           padding-bottom: 0px !important;
           padding-top: 5px !important;
           text-align: center !important;
@@ -664,17 +659,17 @@
                                           width="100%"
                                           class="r13-o"
                                           style="
-                                            background-color: #e3e6f1;
+                                            background-color: #ecf1ff;
-                                            border-bottom-color: #efefef;
+                                            border-bottom-color: #d9e4ff;
                                             border-bottom-width: 1px;
                                             border-collapse: separate;
-                                            border-left-color: #efefef;
+                                            border-left-color: #d9e4ff;
                                             border-left-width: 1px;
                                             border-radius: 5px;
-                                            border-right-color: #efefef;
+                                            border-right-color: #d9e4ff;
                                             border-right-width: 1px;
                                             border-style: solid;
-                                            border-top-color: #efefef;
+                                            border-top-color: #d9e4ff;
                                             border-top-width: 1px;
                                             table-layout: fixed;
                                             width: 100%;
@@ -690,7 +685,7 @@
                                                 font-family: georgia, serif;
                                                 font-size: 16px;
                                                 word-break: break-word;
-                                                background-color: #e3e6f1;
+                                                background-color: #ecf1ff;
                                                 border-radius: 4px;
                                                 line-height: 3;
                                                 padding-bottom: 10px;
@@ -714,10 +709,10 @@
                                                 <p style="margin: 0">
                                                   <span
                                                     style="
-                                                      color: #716c6c;
+                                                      color: #5f5e5e;
                                                       font-family: Arial,
                                                         helvetica, sans-serif;
-                                                      font-size: 15px;
+                                                      font-size: 14px;
                                                     "
                                                     >Please copy and paste this
                                                     on the screen where you
@@ -1251,13 +1246,14 @@
                                                                   role="presentation"
                                                                   width="100%"
                                                                   class="r22-o"
-                                                                  class="r24-o"
                                                                   style="
+                                                                    table-layout: fixed;
+                                                                    width: 100%;
+                                                                  "
                                                                 >
                                                                   <tr>
                                                                     <td
                                                                       class="r23-i"
-                                                                      class="r17-i"
                                                                       style="
                                                                         font-size: 0px;
                                                                         line-height: 0px;
@@ -1309,7 +1305,7 @@
                                                                   border="0"
                                                                   role="presentation"
                                                                   width="100%"
-                                                                  class="r25-o"
+                                                                  class="r24-o"
                                                                   style="
                                                                     table-layout: fixed;
                                                                     width: 100%;
@@ -1441,7 +1437,7 @@
                                             <td
                                               align="center"
                                               valign="top"
-                                              class="r26-i nl2go-default-textstyle"
+                                              class="r25-i nl2go-default-textstyle"
                                               style="
                                                 color: #3b3f44;
                                                 font-family: georgia, serif;

apiserver/templates/emails/exports/issues.html

@@ -1,9 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html>
-    Dear {{username}},<br/>
-    Your requested Issue's data has been successfully exported from Plane. The export includes all relevant information about issues you requested from your selected projects.</br>
-    Please find the attachment and download the CSV file. If you have any questions or need further assistance, please don't hesitate to contact our support team at <a href = "mailto: engineering@plane.com">engineering@plane.so</a>. We're here to help!</br>
-    Thank you for using Plane. We hope this export will aid you in effectively managing your projects.</br>
-    Regards,
-    Team Plane
-</html>

deploy/coolify/coolify-docker-compose.yml

@@ -71,7 +71,6 @@ services:
       - ENABLE_MAGIC_LINK_LOGIN=${ENABLE_MAGIC_LINK_LOGIN:-0}
       - SECRET_KEY=${SECRET_KEY:-60gp0byfz2dvffa45cxl20p1scy9xbpf6d8c5y0geejgkyp1b5}
       - WEB_URL=$SERVICE_FQDN_PLANE_8082
-      - LICENSE_ENGINE_BASE_URL=${LICENSE_ENGINE_BASE_URL:-"https://control-center.plane.so"}
     depends_on:
       - plane-db
       - plane-redis
@@ -117,7 +116,6 @@ services:
       - DEFAULT_PASSWORD=${DEFAULT_PASSWORD:-password123}
       - ENABLE_SIGNUP=${ENABLE_SIGNUP:-1}
       - SECRET_KEY=${SECRET_KEY:-60gp0byfz2dvffa45cxl20p1scy9xbpf6d8c5y0geejgkyp1b5}
-      - LICENSE_ENGINE_BASE_URL=${LICENSE_ENGINE_BASE_URL:-"https://control-center.plane.so"}
     depends_on:
       - api
       - plane-db
@@ -164,7 +162,6 @@ services:
       - DEFAULT_PASSWORD=${DEFAULT_PASSWORD:-password123}
       - ENABLE_SIGNUP=${ENABLE_SIGNUP:-1}
       - SECRET_KEY=${SECRET_KEY:-60gp0byfz2dvffa45cxl20p1scy9xbpf6d8c5y0geejgkyp1b5}
-      - LICENSE_ENGINE_BASE_URL=${LICENSE_ENGINE_BASE_URL:-"https://control-center.plane.so"}
     depends_on:
       - api
       - plane-db

deploy/selfhost/docker-compose.yml

@@ -5,15 +5,16 @@ x-app-env : &app-env
     - NGINX_PORT=${NGINX_PORT:-80}
     - WEB_URL=${WEB_URL:-http://localhost}
     - DEBUG=${DEBUG:-0}
-    - NEXT_PUBLIC_ENABLE_OAUTH=${NEXT_PUBLIC_ENABLE_OAUTH:-0}
+    - DJANGO_SETTINGS_MODULE=${DJANGO_SETTINGS_MODULE:-plane.settings.production} # deprecated
-    - NEXT_PUBLIC_DEPLOY_URL=${NEXT_PUBLIC_DEPLOY_URL:-http://localhost/spaces}
+    - NEXT_PUBLIC_ENABLE_OAUTH=${NEXT_PUBLIC_ENABLE_OAUTH:-0} # deprecated
+    - NEXT_PUBLIC_DEPLOY_URL=${NEXT_PUBLIC_DEPLOY_URL:-http://localhost/spaces} # deprecated
     - SENTRY_DSN=${SENTRY_DSN:-""}
+    - SENTRY_ENVIRONMENT=${SENTRY_ENVIRONMENT:-"production"}
+    - GOOGLE_CLIENT_ID=${GOOGLE_CLIENT_ID:-""}
+    - GITHUB_CLIENT_ID=${GITHUB_CLIENT_ID:-""}
     - GITHUB_CLIENT_SECRET=${GITHUB_CLIENT_SECRET:-""}
     - DOCKERIZED=${DOCKERIZED:-1}  # deprecated
     - CORS_ALLOWED_ORIGINS=${CORS_ALLOWED_ORIGINS:-""}
-    - SENTRY_ENVIRONMENT=${SENTRY_ENVIRONMENT:-"production"}
-    - ADMIN_EMAIL=${ADMIN_EMAIL:-""}
-    - LICENSE_ENGINE_BASE_URL=${LICENSE_ENGINE_BASE_URL:-""}
     # Gunicorn Workers
     - GUNICORN_WORKERS=${GUNICORN_WORKERS:-2}
     #DB SETTINGS
@@ -28,12 +29,12 @@ x-app-env : &app-env
     - REDIS_HOST=${REDIS_HOST:-plane-redis}
     - REDIS_PORT=${REDIS_PORT:-6379}
     - REDIS_URL=${REDIS_URL:-redis://${REDIS_HOST}:6379/}
-    # EMAIL SETTINGS
+    # EMAIL SETTINGS - Deprecated can be configured through admin panel
     - 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_FROM=${EMAIL_FROM:-"Team Plane <team@mailer.plane.so>"}
     - EMAIL_USE_TLS=${EMAIL_USE_TLS:-1}
     - EMAIL_USE_SSL=${EMAIL_USE_SSL:-0}
     - DEFAULT_EMAIL=${DEFAULT_EMAIL:-captain@plane.so}
@@ -42,10 +43,11 @@ x-app-env : &app-env
     - 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"}
-    # LOGIN/SIGNUP SETTINGS
+    # LOGIN/SIGNUP SETTINGS - Deprecated can be configured through admin panel
     - ENABLE_SIGNUP=${ENABLE_SIGNUP:-1}
     - ENABLE_EMAIL_PASSWORD=${ENABLE_EMAIL_PASSWORD:-1}
     - ENABLE_MAGIC_LINK_LOGIN=${ENABLE_MAGIC_LINK_LOGIN:-0}
+    # Application secret
     - SECRET_KEY=${SECRET_KEY:-60gp0byfz2dvffa45cxl20p1scy9xbpf6d8c5y0geejgkyp1b5}
     # DATA STORE SETTINGS
     - USE_MINIO=${USE_MINIO:-1}

deploy/selfhost/variables.env

@@ -10,10 +10,12 @@ DEBUG=0
 NEXT_PUBLIC_ENABLE_OAUTH=0
 NEXT_PUBLIC_DEPLOY_URL=http://localhost/spaces
 SENTRY_DSN=""
+SENTRY_ENVIRONMENT="production"
+GOOGLE_CLIENT_ID=""
+GITHUB_CLIENT_ID=""
 GITHUB_CLIENT_SECRET=""
 DOCKERIZED=1 # deprecated
 CORS_ALLOWED_ORIGINS="http://localhost"
-SENTRY_ENVIRONMENT="production"
 
 #DB SETTINGS
 PGHOST=plane-db
@@ -34,7 +36,7 @@ EMAIL_HOST=""
 EMAIL_HOST_USER=""
 EMAIL_HOST_PASSWORD=""
 EMAIL_PORT=587
-EMAIL_FROM="Team Plane <team@mailer.plane.so>"
+EMAIL_FROM="Team Plane <team@mailer.plane.so>"
 EMAIL_USE_TLS=1
 EMAIL_USE_SSL=0
 
@@ -63,9 +65,3 @@ FILE_SIZE_LIMIT=5242880
 
 # Gunicorn Workers
 GUNICORN_WORKERS=2
-
-# Admin Email
-ADMIN_EMAIL=""
-
-# License Engine url
-LICENSE_ENGINE_BASE_URL=""

space/components/accounts/email-code-form.tsx

@@ -11,7 +11,7 @@ import useToast from "hooks/use-toast";
 import useTimer from "hooks/use-timer";
 
 // ui
-import { Input, PrimaryButton } from "components/ui";
+import { Button, Input } from "@plane/ui";
 
 // types
 type EmailCodeFormValues = {
@@ -133,7 +133,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
             id="email"
             type="email"
             placeholder="Enter your email address..."
-            className="border-custom-border-300 h-[46px]"
+            className="border-custom-border-300 h-[46px] w-full"
             {...register("email", {
               required: "Email address is required",
               validate: (value) =>
@@ -154,7 +154,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
                 required: "Code is required",
               })}
               placeholder="Enter code..."
-              className="border-custom-border-300 h-[46px]"
+              className="border-custom-border-300 h-[46px] w-full"
             />
             {errors.token && <div className="text-sm text-red-500">{errors.token.message}</div>}
             <button
@@ -185,20 +185,22 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
           </>
         )}
         {codeSent ? (
-          <PrimaryButton
+          <Button
+            variant="primary"
             type="submit"
-            className="w-full text-center h-[46px]"
+            className="w-full"
-            size="md"
+            size="xl"
             onClick={handleSubmit(handleSignin)}
             disabled={!isValid && isDirty}
             loading={isLoading}
           >
             {isLoading ? "Signing in..." : "Sign in"}
-          </PrimaryButton>
+          </Button>
         ) : (
-          <PrimaryButton
+          <Button
-            className="w-full text-center h-[46px]"
+            variant="primary"
-            size="md"
+            className="w-full"
+            size="xl"
             onClick={() => {
               handleSubmit(onSubmit)().then(() => {
                 setResendCodeTimer(30);
@@ -208,7 +210,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
             loading={isSubmitting}
           >
             {isSubmitting ? "Sending code..." : "Send sign in code"}
-          </PrimaryButton>
+          </Button>
         )}
       </form>
     </>

space/components/accounts/email-password-form.tsx

@@ -5,7 +5,8 @@ import { useForm } from "react-hook-form";
 // components
 import { EmailResetPasswordForm } from "./email-reset-password-form";
 // ui
-import { Input, PrimaryButton } from "components/ui";
+import { Button, Input } from "@plane/ui";
+
 // types
 type EmailPasswordFormValues = {
   email: string;
@@ -58,7 +59,7 @@ export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
                   ) || "Email address is not valid",
               })}
               placeholder="Enter your email address..."
-              className="border-custom-border-300 h-[46px]"
+              className="border-custom-border-300 h-[46px] w-full"
             />
             {errors.email && <div className="text-sm text-red-500">{errors.email.message}</div>}
           </div>
@@ -70,7 +71,7 @@ export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
                 required: "Password is required",
               })}
               placeholder="Enter your password..."
-              className="border-custom-border-300 h-[46px]"
+              className="border-custom-border-300 h-[46px] w-full"
             />
             {errors.password && <div className="text-sm text-red-500">{errors.password.message}</div>}
           </div>
@@ -92,14 +93,16 @@ export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
             )}
           </div>
           <div>
-            <PrimaryButton
+            <Button
+              variant="primary"
               type="submit"
-              className="w-full text-center h-[46px]"
+              size="xl"
+              className="w-full"
               disabled={!isValid && isDirty}
               loading={isSubmitting}
             >
               {isSignUpPage ? (isSubmitting ? "Signing up..." : "Sign up") : isSubmitting ? "Signing in..." : "Sign in"}
-            </PrimaryButton>
+            </Button>
             {!isSignUpPage && (
               <Link href="/sign-up">
                 <span className="block text-custom-text-200 hover:text-custom-primary-100 text-xs mt-4">

space/components/accounts/email-reset-password-form.tsx

@@ -1,8 +1,7 @@
 import React from "react";
 import { useForm } from "react-hook-form";
 // ui
-import { Input } from "components/ui";
+import { Button, Input } from "@plane/ui";
-import { Button } from "@plane/ui";
 // types
 type Props = {
   setIsResettingPassword: React.Dispatch<React.SetStateAction<boolean>>;
@@ -66,15 +65,15 @@ export const EmailResetPasswordForm: React.FC<Props> = ({ setIsResettingPassword
               ) || "Email address is not valid",
           })}
           placeholder="Enter registered email address.."
-          className="h-[46px] border-custom-border-300"
+          className="h-[46px] border-custom-border-300 w-full"
         />
         {errors.email && <div className="text-sm text-red-500">{errors.email.message}</div>}
       </div>
       <div className="mt-5 flex flex-col-reverse items-center gap-2 sm:flex-row">
-        <Button variant="neutral-primary" className="w-full" onClick={() => setIsResettingPassword(false)}>
+        <Button variant="neutral-primary" className="w-full" size="xl" onClick={() => setIsResettingPassword(false)}>
           Go Back
         </Button>
-        <Button variant="primary" className="w-full" type="submit" loading={isSubmitting}>
+        <Button variant="primary" className="w-full" size="xl" type="submit" loading={isSubmitting}>
           {isSubmitting ? "Sending link..." : "Send reset link"}
         </Button>
       </div>

space/components/accounts/onboarding-form.tsx

@@ -13,7 +13,7 @@ import useToast from "hooks/use-toast";
 // services
 import UserService from "services/user.service";
 // ui
-import { Input, PrimaryButton } from "components/ui";
+import { Button, Input } from "@plane/ui";
 
 const defaultValues = {
   first_name: "",
@@ -173,9 +173,9 @@ export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
         </div>
       </div>
 
-      <PrimaryButton type="submit" size="md" disabled={!isValid} loading={isSubmitting}>
+      <Button variant="primary" type="submit" className="w-full" size="xl" disabled={!isValid} loading={isSubmitting}>
         {isSubmitting ? "Updating..." : "Continue"}
-      </PrimaryButton>
+      </Button>
     </form>
   );
 });

space/components/issues/board-views/kanban/block.tsx

@@ -13,7 +13,7 @@ import { IIssue } from "types/issue";
 import { RootStore } from "store/root";
 import { useRouter } from "next/router";
 
-export const IssueListBlock = observer(({ issue }: { issue: IIssue }) => {
+export const IssueKanBanBlock = observer(({ issue }: { issue: IIssue }) => {
   const { project: projectStore, issueDetails: issueDetailStore }: RootStore = useMobxStore();
 
   // router

space/components/issues/board-views/kanban/header.tsx

@@ -10,7 +10,7 @@ import { StateGroupIcon } from "@plane/ui";
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
 
-export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
+export const IssueKanBanHeader = observer(({ state }: { state: IIssueState }) => {
   const store: RootStore = useMobxStore();
 
   const stateGroup = issueGroupFilter(state.group);

space/components/issues/board-views/kanban/index.tsx

@@ -3,8 +3,8 @@
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // components
-import { IssueListHeader } from "components/issues/board-views/kanban/header";
+import { IssueKanBanHeader } from "components/issues/board-views/kanban/header";
-import { IssueListBlock } from "components/issues/board-views/kanban/block";
+import { IssueKanBanBlock } from "components/issues/board-views/kanban/block";
 // ui
 import { Icon } from "components/ui";
 // interfaces
@@ -23,14 +23,14 @@ export const IssueKanbanView = observer(() => {
         store?.issue?.states.map((_state: IIssueState) => (
           <div key={_state.id} className="flex-shrink-0 relative w-[340px] h-full flex flex-col">
             <div className="flex-shrink-0">
-              <IssueListHeader state={_state} />
+              <IssueKanBanHeader state={_state} />
             </div>
             <div className="w-full h-full overflow-hidden overflow-y-auto hide-vertical-scrollbar">
               {store.issue.getFilteredIssuesByState(_state.id) &&
               store.issue.getFilteredIssuesByState(_state.id).length > 0 ? (
                 <div className="space-y-3 pb-2 px-2">
                   {store.issue.getFilteredIssuesByState(_state.id).map((_issue: IIssue) => (
-                    <IssueListBlock key={_issue.id} issue={_issue} />
+                    <IssueKanBanBlock key={_issue.id} issue={_issue} />
                   ))}
                 </div>
               ) : (

space/components/issues/filters-render/index.tsx

@@ -1,53 +0,0 @@
-import { useRouter } from "next/router";
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// components
-import IssueStateFilter from "./state";
-import IssueLabelFilter from "./label";
-import IssuePriorityFilter from "./priority";
-// mobx hook
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
-
-const IssueFilter = observer(() => {
-  const store: RootStore = useMobxStore();
-
-  const router = useRouter();
-  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
-
-  const clearAllFilters = () => {
-    // router.replace(
-    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
-    //     key: "all",
-    //     removeAll: true,
-    //   })
-    // );
-  };
-
-  // if (store.issue.getIfFiltersIsEmpty()) return null;
-
-  return (
-    <div className="flex-shrink-0 min-h-[50px] h-auto py-1.5 border-b border-custom-border-200 relative flex items-center shadow-md bg-whiate select-none">
-      <div className="px-5 flex justify-start items-center flex-wrap gap-2 text-sm">
-        {/* state */}
-        {/* {store.issue.checkIfFilterExistsForKey("state") && <IssueStateFilter />} */}
-        {/* labels */}
-        {/* {store.issue.checkIfFilterExistsForKey("label") && <IssueLabelFilter />} */}
-        {/* priority */}
-        {/* {store.issue.checkIfFilterExistsForKey("priority") && <IssuePriorityFilter />} */}
-        {/* clear all filters */}
-        <div
-          className="flex items-center gap-2 border border-custom-border-200 px-2 py-1 cursor-pointer text-xs rounded-full"
-          onClick={clearAllFilters}
-        >
-          <div>Clear all filters</div>
-          <div className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-sm">
-            <span className="material-symbols-rounded text-[12px]">close</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-});
-
-export default IssueFilter;

space/components/issues/filters-render/label/filter-label-block.tsx

@@ -1,43 +0,0 @@
-import { useRouter } from "next/router";
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// mobx hook
-import { useMobxStore } from "lib/mobx/store-provider";
-// interfaces
-import { IIssueLabel } from "types/issue";
-
-export const RenderIssueLabel = observer(({ label }: { label: IIssueLabel }) => {
-  const store = useMobxStore();
-
-  const router = useRouter();
-  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
-
-  const removeLabelFromFilter = () => {
-    // router.replace(
-    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
-    //     key: "label",
-    //     value: label?.id,
-    //   })
-    // );
-  };
-
-  return (
-    <div
-      className="flex-shrink-0 relative flex items-center flex-wrap gap-1 px-2 py-0.5 rounded-full select-none"
-      style={{ color: label?.color, backgroundColor: `${label?.color}10` }}
-    >
-      <div
-        className="flex-shrink-0 w-1.5 h-1.5 flex justify-center items-center overflow-hidden rounded-full"
-        style={{ backgroundColor: `${label?.color}` }}
-      />
-
-      <div className="font-medium whitespace-nowrap text-xs">{label?.name}</div>
-      <div
-        className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-full"
-        onClick={removeLabelFromFilter}
-      >
-        <span className="material-symbols-rounded text-xs">close</span>
-      </div>
-    </div>
-  );
-});

space/components/issues/filters-render/label/index.tsx

@@ -1,51 +0,0 @@
-import { useRouter } from "next/router";
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// components
-import { RenderIssueLabel } from "./filter-label-block";
-// interfaces
-import { IIssueLabel } from "types/issue";
-// mobx hook
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
-
-const IssueLabelFilter = observer(() => {
-  const store: RootStore = useMobxStore();
-
-  const router = useRouter();
-  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
-
-  const clearLabelFilters = () => {
-    // router.replace(
-    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
-    //     key: "label",
-    //     removeAll: true,
-    //   })
-    // );
-  };
-
-  return (
-    <>
-      <div className="flex items-center gap-2 border border-custom-border-300 px-2 py-1 rounded-full text-xs">
-        <div className="flex-shrink-0 text-custom-text-200">Labels</div>
-        <div className="relative flex flex-wrap items-center gap-1">
-          {/* {store?.issue?.labels &&
-            store?.issue?.labels.map(
-              (_label: IIssueLabel, _index: number) =>
-                store.issue.getUserSelectedFilter("label", _label.id) && (
-                  <RenderIssueLabel key={_label.id} label={_label} />
-                )
-            )} */}
-        </div>
-        <div
-          className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-sm"
-          onClick={clearLabelFilters}
-        >
-          <span className="material-symbols-rounded text-[12px]">close</span>
-        </div>
-      </div>
-    </>
-  );
-});
-
-export default IssueLabelFilter;

space/components/issues/filters-render/priority/filter-priority-block.tsx

@@ -1,42 +0,0 @@
-import { useRouter } from "next/router";
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// mobx hook
-import { useMobxStore } from "lib/mobx/store-provider";
-// interfaces
-import { IIssuePriorityFilters } from "types/issue";
-
-export const RenderIssuePriority = observer(({ priority }: { priority: IIssuePriorityFilters }) => {
-  const store = useMobxStore();
-
-  const router = useRouter();
-  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
-
-  const removePriorityFromFilter = () => {
-    // router.replace(
-    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
-    //     key: "priority",
-    //     value: priority?.key,
-    //   })
-    // );
-  };
-
-  return (
-    <div
-      className={`flex-shrink-0 relative flex items-center flex-wrap gap-1 px-2 py-0.5 text-xs rounded-full select-none ${
-        priority.className || ``
-      }`}
-    >
-      <div className="flex-shrink-0 flex justify-center items-center overflow-hidden rounded-full">
-        <span className="material-symbols-rounded text-xs">{priority?.icon}</span>
-      </div>
-      <div className="whitespace-nowrap">{priority?.title}</div>
-      <div
-        className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-full"
-        onClick={removePriorityFromFilter}
-      >
-        <span className="material-symbols-rounded text-xs">close</span>
-      </div>
-    </div>
-  );
-});

space/components/issues/filters-render/priority/index.tsx

@@ -1,53 +0,0 @@
-import { useRouter } from "next/router";
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// mobx hook
-import { useMobxStore } from "lib/mobx/store-provider";
-// components
-import { RenderIssuePriority } from "./filter-priority-block";
-// interfaces
-import { IIssuePriorityFilters } from "types/issue";
-// constants
-import { issuePriorityFilters } from "constants/data";
-
-const IssuePriorityFilter = observer(() => {
-  const store = useMobxStore();
-
-  const router = useRouter();
-  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
-
-  const clearPriorityFilters = () => {
-    // router.replace(
-    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
-    //     key: "priority",
-    //     removeAll: true,
-    //   })
-    // );
-  };
-
-  return (
-    <>
-      <div className="flex items-center gap-2 border border-custom-border-300 px-2 py-1 rounded-full text-xs">
-        <div className="flex-shrink-0 text-custom-text-200">Priority</div>
-        <div className="relative flex flex-wrap items-center gap-1">
-          {/* {issuePriorityFilters.map(
-            (_priority: IIssuePriorityFilters, _index: number) =>
-              store.issue.getUserSelectedFilter("priority", _priority.key) && (
-                <RenderIssuePriority key={_priority.key} priority={_priority} />
-              )
-          )} */}
-        </div>
-        <div
-          className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-sm"
-          onClick={() => {
-            clearPriorityFilters();
-          }}
-        >
-          <span className="material-symbols-rounded text-[12px]">close</span>
-        </div>
-      </div>
-    </>
-  );
-});
-
-export default IssuePriorityFilter;

space/components/issues/filters-render/state/filter-state-block.tsx

@@ -1,34 +0,0 @@
-import { observer } from "mobx-react-lite";
-// interfaces
-import { IIssueState } from "types/issue";
-// constants
-import { issueGroupFilter } from "constants/data";
-
-export const RenderIssueState = observer(({ state }: { state: IIssueState }) => {
-  const stateGroup = issueGroupFilter(state.group);
-
-  const removeStateFromFilter = () => {
-    // router.replace(
-    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
-    //     key: "state",
-    //     value: state?.id,
-    //   })
-    // );
-  };
-
-  if (stateGroup === null) return <></>;
-  return (
-    <div className={`inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 ${stateGroup.className || ``}`}>
-      <div className="flex h-3 w-3 flex-shrink-0 items-center justify-center overflow-hidden rounded-full">
-        {/* <stateGroup.icon /> */}
-      </div>
-      <div className="whitespace-nowrap text-xs font-medium">{state?.name}</div>
-      <div
-        className="flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full"
-        onClick={removeStateFromFilter}
-      >
-        <span className="material-symbols-rounded text-xs">close</span>
-      </div>
-    </div>
-  );
-});

space/components/issues/filters-render/state/index.tsx

@@ -1,51 +0,0 @@
-import { useRouter } from "next/router";
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// components
-import { RenderIssueState } from "./filter-state-block";
-// interfaces
-import { IIssueState } from "types/issue";
-// mobx hook
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
-
-const IssueStateFilter = observer(() => {
-  const store: RootStore = useMobxStore();
-
-  const router = useRouter();
-  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
-
-  const clearStateFilters = () => {
-    // router.replace(
-    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
-    //     key: "state",
-    //     removeAll: true,
-    //   })
-    // );
-  };
-
-  return (
-    <>
-      <div className="flex items-center gap-2 border border-custom-border-300 px-2 py-1 rounded-full text-xs">
-        <div className="flex-shrink-0 text-custom-text-200">State</div>
-        <div className="relative flex flex-wrap items-center gap-1">
-          {/* {store?.issue?.states &&
-            store?.issue?.states.map(
-              (_state: IIssueState, _index: number) =>
-                store.issue.getUserSelectedFilter("state", _state.id) && (
-                  <RenderIssueState key={_state.id} state={_state} />
-                )
-            )} */}
-        </div>
-        <div
-          className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-sm"
-          onClick={clearStateFilters}
-        >
-          <span className="material-symbols-rounded text-[12px]">close</span>
-        </div>
-      </div>
-    </>
-  );
-});
-
-export default IssueStateFilter;

space/components/issues/filters/applied-filters/filters-list.tsx

@@ -0,0 +1,80 @@
+// components
+import { AppliedLabelsFilters } from "./label";
+import { AppliedPriorityFilters } from "./priority";
+import { AppliedStateFilters } from "./state";
+// icons
+import { X } from "lucide-react";
+// helpers
+import { IIssueFilterOptions } from "store/issues/types";
+import { IIssueLabel, IIssueState } from "types/issue";
+// types
+
+type Props = {
+  appliedFilters: IIssueFilterOptions;
+  handleRemoveAllFilters: () => void;
+  handleRemoveFilter: (key: keyof IIssueFilterOptions, value: string | null) => void;
+  labels?: IIssueLabel[] | undefined;
+  states?: IIssueState[] | undefined;
+};
+
+export const replaceUnderscoreIfSnakeCase = (str: string) => str.replace(/_/g, " ");
+
+export const AppliedFiltersList: React.FC<Props> = (props) => {
+  const { appliedFilters, handleRemoveAllFilters, handleRemoveFilter, labels, states } = props;
+
+  return (
+    <div className="flex items-stretch gap-2 flex-wrap bg-custom-background-100">
+      {Object.entries(appliedFilters).map(([key, value]) => {
+        const filterKey = key as keyof IIssueFilterOptions;
+
+        if (!value) return;
+
+        return (
+          <div
+            key={filterKey}
+            className="capitalize py-1 px-2 border border-custom-border-200 rounded-md flex items-center gap-2 flex-wrap"
+          >
+            <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
+            <div className="flex items-center gap-1 flex-wrap">
+              {filterKey === "priority" && (
+                <AppliedPriorityFilters handleRemove={(val) => handleRemoveFilter("priority", val)} values={value} />
+              )}
+
+              {filterKey === "labels" && labels && (
+                <AppliedLabelsFilters
+                  handleRemove={(val) => handleRemoveFilter("labels", val)}
+                  labels={labels}
+                  values={value}
+                />
+              )}
+
+              {filterKey === "state" && states && (
+                <AppliedStateFilters
+                  handleRemove={(val) => handleRemoveFilter("state", val)}
+                  states={states}
+                  values={value}
+                />
+              )}
+
+              <button
+                type="button"
+                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                onClick={() => handleRemoveFilter(filterKey, null)}
+              >
+                <X size={12} strokeWidth={2} />
+              </button>
+            </div>
+          </div>
+        );
+      })}
+      <button
+        type="button"
+        onClick={handleRemoveAllFilters}
+        className="flex items-center gap-2 text-xs border border-custom-border-200 py-1 px-2 rounded-md text-custom-text-300 hover:text-custom-text-200"
+      >
+        Clear all
+        <X size={12} strokeWidth={2} />
+      </button>
+    </div>
+  );
+};

space/components/issues/filters/applied-filters/label.tsx

@@ -0,0 +1,42 @@
+import { X } from "lucide-react";
+// types
+import { IIssueLabel } from "types/issue";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  labels: IIssueLabel[] | undefined;
+  values: string[];
+};
+
+export const AppliedLabelsFilters: React.FC<Props> = (props) => {
+  const { handleRemove, labels, values } = props;
+
+  return (
+    <>
+      {values.map((labelId) => {
+        const labelDetails = labels?.find((l) => l.id === labelId);
+
+        if (!labelDetails) return null;
+
+        return (
+          <div key={labelId} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
+            <span
+              className="h-1.5 w-1.5 rounded-full"
+              style={{
+                backgroundColor: labelDetails.color,
+              }}
+            />
+            <span className="normal-case">{labelDetails.name}</span>
+            <button
+              type="button"
+              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              onClick={() => handleRemove(labelId)}
+            >
+              <X size={10} strokeWidth={2} />
+            </button>
+          </div>
+        );
+      })}
+    </>
+  );
+};

space/components/issues/filters/applied-filters/priority.tsx

@@ -0,0 +1,31 @@
+import { PriorityIcon } from "@plane/ui";
+import { X } from "lucide-react";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: string[];
+};
+
+export const AppliedPriorityFilters: React.FC<Props> = (props) => {
+  const { handleRemove, values } = props;
+
+  return (
+    <>
+      {values &&
+        values.length > 0 &&
+        values.map((priority) => (
+          <div key={priority} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
+            <PriorityIcon priority={priority as any} className={`h-3 w-3`} />
+            {priority}
+            <button
+              type="button"
+              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              onClick={() => handleRemove(priority)}
+            >
+              <X size={10} strokeWidth={2} />
+            </button>
+          </div>
+        ))}
+    </>
+  );
+};

space/components/issues/filters/applied-filters/root.tsx

@@ -0,0 +1,90 @@
+import { FC, useCallback } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// components
+import { AppliedFiltersList } from "./filters-list";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+import { IIssueFilterOptions } from "store/issues/types";
+
+export const IssueAppliedFilters: FC = observer(() => {
+  const router = useRouter();
+  const { workspace_slug: workspaceSlug, project_slug: projectId } = router.query as {
+    workspace_slug: string;
+    project_slug: string;
+  };
+
+  const {
+    issuesFilter: { issueFilters, updateFilters },
+    issue: { states, labels },
+    project: { activeBoard },
+  }: RootStore = useMobxStore();
+
+  const userFilters = issueFilters?.filters || {};
+
+  const appliedFilters: IIssueFilterOptions = {};
+  Object.entries(userFilters).forEach(([key, value]) => {
+    if (!value) return;
+    if (Array.isArray(value) && value.length === 0) return;
+    appliedFilters[key as keyof IIssueFilterOptions] = value;
+  });
+
+  const updateRouteParams = useCallback(
+    (key: keyof IIssueFilterOptions | null, value: string[] | null, clearFields: boolean = false) => {
+      const state = key === "state" ? value || [] : issueFilters?.filters?.state ?? [];
+      const priority = key === "priority" ? value || [] : issueFilters?.filters?.priority ?? [];
+      const labels = key === "labels" ? value || [] : issueFilters?.filters?.labels ?? [];
+
+      let params: any = { board: activeBoard || "list" };
+      if (!clearFields) {
+        if (priority.length > 0) params = { ...params, priorities: priority.join(",") };
+        if (state.length > 0) params = { ...params, states: state.join(",") };
+        if (labels.length > 0) params = { ...params, labels: labels.join(",") };
+      }
+
+      router.push({ pathname: `/${workspaceSlug}/${projectId}`, query: { ...params } }, undefined, { shallow: true });
+    },
+    [workspaceSlug, projectId, activeBoard, issueFilters, router]
+  );
+
+  const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
+    if (!projectId) return;
+    if (!value) {
+      updateFilters(projectId, { [key]: null });
+      return;
+    }
+
+    let newValues = issueFilters?.filters?.[key] ?? [];
+    newValues = newValues.filter((val) => val !== value);
+
+    updateFilters(projectId, { [key]: newValues });
+    updateRouteParams(key, newValues);
+  };
+
+  const handleRemoveAllFilters = () => {
+    if (!projectId) return;
+
+    const newFilters: IIssueFilterOptions = {};
+    Object.keys(userFilters).forEach((key) => {
+      newFilters[key as keyof IIssueFilterOptions] = null;
+    });
+
+    updateFilters(projectId, { ...newFilters });
+    updateRouteParams(null, null, true);
+  };
+
+  if (Object.keys(appliedFilters).length === 0) return null;
+
+  return (
+    <div className="p-5 py-3 border-b border-custom-border-200">
+      <AppliedFiltersList
+        appliedFilters={appliedFilters || {}}
+        handleRemoveFilter={handleRemoveFilter}
+        handleRemoveAllFilters={handleRemoveAllFilters}
+        labels={labels ?? []}
+        states={states ?? []}
+      />
+    </div>
+  );
+});

space/components/issues/filters/applied-filters/state.tsx

@@ -0,0 +1,39 @@
+import { X } from "lucide-react";
+import { StateGroupIcon } from "@plane/ui";
+// icons
+import { IIssueState } from "types/issue";
+// types
+
+type Props = {
+  handleRemove: (val: string) => void;
+  states: IIssueState[];
+  values: string[];
+};
+
+export const AppliedStateFilters: React.FC<Props> = (props) => {
+  const { handleRemove, states, values } = props;
+
+  return (
+    <>
+      {values.map((stateId) => {
+        const stateDetails = states?.find((s) => s.id === stateId);
+
+        if (!stateDetails) return null;
+
+        return (
+          <div key={stateId} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
+            <StateGroupIcon color={stateDetails.color} stateGroup={stateDetails.group} height="12px" width="12px" />
+            {stateDetails.name}
+            <button
+              type="button"
+              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              onClick={() => handleRemove(stateId)}
+            >
+              <X size={10} strokeWidth={2} />
+            </button>
+          </div>
+        );
+      })}
+    </>
+  );
+};

space/components/issues/filters/helpers/dropdown.tsx

@@ -0,0 +1,72 @@
+import React, { Fragment, useState } from "react";
+import { usePopper } from "react-popper";
+import { Popover, Transition } from "@headlessui/react";
+import { Placement } from "@popperjs/core";
+// ui
+import { Button } from "@plane/ui";
+// icons
+import { ChevronUp } from "lucide-react";
+
+type Props = {
+  children: React.ReactNode;
+  title?: string;
+  placement?: Placement;
+};
+
+export const FiltersDropdown: React.FC<Props> = (props) => {
+  const { children, title = "Dropdown", placement } = props;
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "auto",
+  });
+
+  return (
+    <Popover as="div">
+      {({ open }) => {
+        if (open) {
+        }
+        return (
+          <>
+            <Popover.Button as={React.Fragment}>
+              <Button
+                ref={setReferenceElement}
+                variant="neutral-primary"
+                size="sm"
+                appendIcon={
+                  <ChevronUp className={`transition-all ${open ? "" : "rotate-180"}`} size={14} strokeWidth={2} />
+                }
+              >
+                <div className={`${open ? "text-custom-text-100" : "text-custom-text-200"}`}>
+                  <span>{title}</span>
+                </div>
+              </Button>
+            </Popover.Button>
+            <Transition
+              as={Fragment}
+              enter="transition ease-out duration-200"
+              enterFrom="opacity-0 translate-y-1"
+              enterTo="opacity-100 translate-y-0"
+              leave="transition ease-in duration-150"
+              leaveFrom="opacity-100 translate-y-0"
+              leaveTo="opacity-0 translate-y-1"
+            >
+              <Popover.Panel>
+                <div
+                  className="z-10 bg-custom-background-100 border border-custom-border-200 shadow-custom-shadow-rg rounded overflow-hidden"
+                  ref={setPopperElement}
+                  style={styles.popper}
+                  {...attributes.popper}
+                >
+                  <div className="w-[18.75rem] max-h-[37.5rem] flex flex-col overflow-hidden">{children}</div>
+                </div>
+              </Popover.Panel>
+            </Transition>
+          </>
+        );
+      }}
+    </Popover>
+  );
+};

space/components/issues/filters/helpers/filter-header.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+// lucide icons
+import { ChevronDown, ChevronUp } from "lucide-react";
+
+interface IFilterHeader {
+  title: string;
+  isPreviewEnabled: boolean;
+  handleIsPreviewEnabled: () => void;
+}
+
+export const FilterHeader = ({ title, isPreviewEnabled, handleIsPreviewEnabled }: IFilterHeader) => (
+  <div className="flex items-center justify-between gap-2 bg-custom-background-100 sticky top-0">
+    <div className="text-custom-text-300 text-xs font-medium flex-grow truncate">{title}</div>
+    <button
+      type="button"
+      className="flex-shrink-0 w-5 h-5 grid place-items-center rounded hover:bg-custom-background-80"
+      onClick={handleIsPreviewEnabled}
+    >
+      {isPreviewEnabled ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+    </button>
+  </div>
+);

space/components/issues/filters/helpers/filter-option.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+// lucide icons
+import { Check } from "lucide-react";
+
+type Props = {
+  icon?: React.ReactNode;
+  isChecked: boolean;
+  title: React.ReactNode;
+  onClick?: () => void;
+  multiple?: boolean;
+};
+
+export const FilterOption: React.FC<Props> = (props) => {
+  const { icon, isChecked, multiple = true, onClick, title } = props;
+
+  return (
+    <button
+      type="button"
+      className="flex items-center gap-2 rounded hover:bg-custom-background-80 w-full p-1.5"
+      onClick={onClick}
+    >
+      <div
+        className={`flex-shrink-0 w-3 h-3 grid place-items-center bg-custom-background-90 border ${
+          isChecked ? "bg-custom-primary-100 border-custom-primary-100 text-white" : "border-custom-border-300"
+        } ${multiple ? "rounded-sm" : "rounded-full"}`}
+      >
+        {isChecked && <Check size={10} strokeWidth={3} />}
+      </div>
+      <div className="flex items-center gap-2 truncate">
+        {icon && <div className="flex-shrink-0 grid place-items-center w-5">{icon}</div>}
+        <div className="flex-grow truncate text-custom-text-200 text-xs">{title}</div>
+      </div>
+    </button>
+  );
+};

space/components/issues/filters/helpers/index.ts

@@ -0,0 +1,3 @@
+export * from "./dropdown";
+export * from "./filter-header";
+export * from "./filter-option";

space/components/issues/filters/index.ts

@@ -0,0 +1,11 @@
+// filters
+export * from "./root";
+export * from "./selection";
+
+// properties
+export * from "./state";
+export * from "./priority";
+export * from "./labels";
+
+// helpers
+export * from "./helpers";

space/components/issues/filters/labels.tsx

@@ -0,0 +1,83 @@
+import React, { useState } from "react";
+
+// components
+import { FilterHeader, FilterOption } from "./helpers";
+// ui
+import { Loader } from "@plane/ui";
+// types
+import { IIssueLabel } from "types/issue";
+
+const LabelIcons = ({ color }: { color: string }) => (
+  <span className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: color }} />
+);
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  labels: IIssueLabel[] | undefined;
+  searchQuery: string;
+};
+
+export const FilterLabels: React.FC<Props> = (props) => {
+  const { appliedFilters, handleUpdate, labels, searchQuery } = props;
+
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = labels?.filter((label) => label.name.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  const handleViewToggle = () => {
+    if (!filteredOptions) return;
+
+    if (itemsToRender === filteredOptions.length) setItemsToRender(5);
+    else setItemsToRender(filteredOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`Label${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              <>
+                {filteredOptions.slice(0, itemsToRender).map((label) => (
+                  <FilterOption
+                    key={label?.id}
+                    isChecked={appliedFilters?.includes(label?.id) ? true : false}
+                    onClick={() => handleUpdate(label?.id)}
+                    icon={<LabelIcons color={label.color} />}
+                    title={label.name}
+                  />
+                ))}
+                {filteredOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="text-custom-primary-100 text-xs font-medium ml-8"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === filteredOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-xs text-custom-text-400 italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+};

space/components/issues/filters/priority.tsx

@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+// ui
+import { PriorityIcon } from "@plane/ui";
+// components
+import { FilterHeader, FilterOption } from "./helpers";
+// constants
+import { issuePriorityFilters } from "constants/data";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  searchQuery: string;
+};
+
+export const FilterPriority: React.FC<Props> = observer((props) => {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = issuePriorityFilters.filter((p) => p.key.includes(searchQuery.toLowerCase()));
+
+  return (
+    <>
+      <FilterHeader
+        title={`Priority${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            filteredOptions.map((priority) => (
+              <FilterOption
+                key={priority.key}
+                isChecked={appliedFilters?.includes(priority.key) ? true : false}
+                onClick={() => handleUpdate(priority.key)}
+                icon={<PriorityIcon priority={priority.key} className="h-3.5 w-3.5" />}
+                title={priority.title}
+              />
+            ))
+          ) : (
+            <p className="text-xs text-custom-text-400 italic">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});

space/components/issues/filters/root.tsx

@@ -0,0 +1,77 @@
+import { FC, useCallback } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// components
+import { FiltersDropdown } from "./helpers/dropdown";
+import { FilterSelection } from "./selection";
+// types
+import { IIssueFilterOptions } from "store/issues/types";
+// helpers
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "store/issues/helpers";
+// store
+import { RootStore } from "store/root";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+export const IssueFiltersDropdown: FC = observer(() => {
+  const router = useRouter();
+  const { workspace_slug: workspaceSlug, project_slug: projectId } = router.query as {
+    workspace_slug: string;
+    project_slug: string;
+  };
+
+  const {
+    project: { activeBoard },
+    issue: { states, labels },
+    issuesFilter: { issueFilters, updateFilters },
+  }: RootStore = useMobxStore();
+
+  const updateRouteParams = useCallback(
+    (key: keyof IIssueFilterOptions, value: string[]) => {
+      const state = key === "state" ? value : issueFilters?.filters?.state ?? [];
+      const priority = key === "priority" ? value : issueFilters?.filters?.priority ?? [];
+      const labels = key === "labels" ? value : issueFilters?.filters?.labels ?? [];
+
+      let params: any = { board: activeBoard || "list" };
+      if (priority.length > 0) params = { ...params, priorities: priority.join(",") };
+      if (state.length > 0) params = { ...params, states: state.join(",") };
+      if (labels.length > 0) params = { ...params, labels: labels.join(",") };
+
+      router.push({ pathname: `/${workspaceSlug}/${projectId}`, query: { ...params } }, undefined, { shallow: true });
+    },
+    [workspaceSlug, projectId, activeBoard, issueFilters, router]
+  );
+
+  const handleFilters = useCallback(
+    (key: keyof IIssueFilterOptions, value: string | string[]) => {
+      if (!projectId) return;
+      const newValues = issueFilters?.filters?.[key] ?? [];
+
+      if (Array.isArray(value)) {
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+        });
+      } else {
+        if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      updateFilters(projectId, { [key]: newValues });
+      updateRouteParams(key, newValues);
+    },
+    [projectId, issueFilters, updateFilters, updateRouteParams]
+  );
+
+  return (
+    <div className="w-full h-full flex flex-col z-50">
+      <FiltersDropdown title="Filters" placement="bottom-end">
+        <FilterSelection
+          filters={issueFilters?.filters ?? {}}
+          handleFilters={handleFilters}
+          layoutDisplayFiltersOptions={activeBoard ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeBoard] : undefined}
+          states={states ?? undefined}
+          labels={labels ?? undefined}
+        />
+      </FiltersDropdown>
+    </div>
+  );
+});

space/components/issues/filters/selection.tsx

@@ -0,0 +1,86 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+import { Search, X } from "lucide-react";
+// components
+import { FilterLabels, FilterPriority, FilterState } from "./";
+// types
+
+// filter helpers
+import { ILayoutDisplayFiltersOptions } from "store/issues/helpers";
+import { IIssueFilterOptions } from "store/issues/types";
+import { IIssueState, IIssueLabel } from "types/issue";
+
+type Props = {
+  filters: IIssueFilterOptions;
+  handleFilters: (key: keyof IIssueFilterOptions, value: string | string[]) => void;
+  layoutDisplayFiltersOptions: ILayoutDisplayFiltersOptions | undefined;
+  labels?: IIssueLabel[] | undefined;
+  states?: IIssueState[] | undefined;
+};
+
+export const FilterSelection: React.FC<Props> = observer((props) => {
+  const { filters, handleFilters, layoutDisplayFiltersOptions, labels, states } = props;
+
+  const [filtersSearchQuery, setFiltersSearchQuery] = useState("");
+
+  const isFilterEnabled = (filter: keyof IIssueFilterOptions) => layoutDisplayFiltersOptions?.filters.includes(filter);
+
+  return (
+    <div className="w-full h-full flex flex-col overflow-hidden">
+      <div className="p-2.5 pb-0 bg-custom-background-100">
+        <div className="bg-custom-background-90 border-[0.5px] border-custom-border-200 text-xs rounded flex items-center gap-1.5 px-1.5 py-1">
+          <Search className="text-custom-text-400" size={12} strokeWidth={2} />
+          <input
+            type="text"
+            className="bg-custom-background-90 placeholder:text-custom-text-400 w-full outline-none"
+            placeholder="Search"
+            value={filtersSearchQuery}
+            onChange={(e) => setFiltersSearchQuery(e.target.value)}
+            autoFocus
+          />
+          {filtersSearchQuery !== "" && (
+            <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
+              <X className="text-custom-text-300" size={12} strokeWidth={2} />
+            </button>
+          )}
+        </div>
+      </div>
+      <div className="w-full h-full divide-y divide-custom-border-200 px-2.5 overflow-y-auto">
+        {/* priority */}
+        {isFilterEnabled("priority") && (
+          <div className="py-2">
+            <FilterPriority
+              appliedFilters={filters.priority ?? null}
+              handleUpdate={(val) => handleFilters("priority", val)}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+
+        {/* state */}
+        {isFilterEnabled("state") && (
+          <div className="py-2">
+            <FilterState
+              appliedFilters={filters.state ?? null}
+              handleUpdate={(val) => handleFilters("state", val)}
+              searchQuery={filtersSearchQuery}
+              states={states}
+            />
+          </div>
+        )}
+
+        {/* labels */}
+        {isFilterEnabled("labels") && (
+          <div className="py-2">
+            <FilterLabels
+              appliedFilters={filters.labels ?? null}
+              handleUpdate={(val) => handleFilters("labels", val)}
+              labels={labels}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});

space/components/issues/filters/state.tsx

@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+// components
+import { FilterHeader, FilterOption } from "./helpers";
+// ui
+import { Loader, StateGroupIcon } from "@plane/ui";
+// types
+import { IIssueState } from "types/issue";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  searchQuery: string;
+  states: IIssueState[] | undefined;
+};
+
+export const FilterState: React.FC<Props> = (props) => {
+  const { appliedFilters, handleUpdate, searchQuery, states } = props;
+
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = states?.filter((s) => s.name.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  const handleViewToggle = () => {
+    if (!filteredOptions) return;
+
+    if (itemsToRender === filteredOptions.length) setItemsToRender(5);
+    else setItemsToRender(filteredOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`State${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              <>
+                {filteredOptions.slice(0, itemsToRender).map((state) => (
+                  <FilterOption
+                    key={state.id}
+                    isChecked={appliedFilters?.includes(state.id) ? true : false}
+                    onClick={() => handleUpdate(state.id)}
+                    icon={<StateGroupIcon stateGroup={state.group} color={state.color} />}
+                    title={state.name}
+                  />
+                ))}
+                {filteredOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="text-custom-primary-100 text-xs font-medium ml-8"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === filteredOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-xs text-custom-text-400 italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+};

space/components/issues/navbar/index.tsx

@@ -1,7 +1,6 @@
 import { useEffect } from "react";
 
 import Link from "next/link";
-import Image from "next/image";
 import { useRouter } from "next/router";
 
 // mobx
@@ -10,12 +9,15 @@ import { observer } from "mobx-react-lite";
 // import { NavbarSearch } from "./search";
 import { NavbarIssueBoardView } from "./issue-board-view";
 import { NavbarTheme } from "./theme";
+import { IssueFiltersDropdown } from "components/issues/filters";
 // ui
-import { PrimaryButton } from "components/ui";
+import { Avatar, Button } from "@plane/ui";
+import { Briefcase } from "lucide-react";
 // lib
 import { useMobxStore } from "lib/mobx/store-provider";
 // store
 import { RootStore } from "store/root";
+import { TIssueBoardKeys } from "types/issue";
 
 const renderEmoji = (emoji: string | { name: string; color: string }) => {
   if (!emoji) return;
@@ -30,10 +32,21 @@ const renderEmoji = (emoji: string | { name: string; color: string }) => {
 };
 
 const IssueNavbar = observer(() => {
-  const { project: projectStore, user: userStore }: RootStore = useMobxStore();
+  const {
+    project: projectStore,
+    user: userStore,
+    issuesFilter: { updateFilters },
+  }: RootStore = useMobxStore();
   // router
   const router = useRouter();
-  const { workspace_slug, project_slug, board } = router.query;
+  const { workspace_slug, project_slug, board, states, priorities, labels } = router.query as {
+    workspace_slug: string;
+    project_slug: string;
+    board: string;
+    states: string;
+    priorities: string;
+    labels: string;
+  };
 
   const user = userStore?.currentUser;
 
@@ -46,7 +59,7 @@ const IssueNavbar = observer(() => {
   useEffect(() => {
     if (workspace_slug && project_slug && projectStore?.deploySettings) {
       const viewsAcceptable: string[] = [];
-      let currentBoard: string | null = null;
+      let currentBoard: TIssueBoardKeys | null = null;
 
       if (projectStore?.deploySettings?.views?.list) viewsAcceptable.push("list");
       if (projectStore?.deploySettings?.views?.kanban) viewsAcceptable.push("kanban");
@@ -56,41 +69,65 @@ const IssueNavbar = observer(() => {
 
       if (board) {
         if (viewsAcceptable.includes(board.toString())) {
-          currentBoard = board.toString();
+          currentBoard = board.toString() as TIssueBoardKeys;
         } else {
           if (viewsAcceptable && viewsAcceptable.length > 0) {
-            currentBoard = viewsAcceptable[0];
+            currentBoard = viewsAcceptable[0] as TIssueBoardKeys;
           }
         }
       } else {
         if (viewsAcceptable && viewsAcceptable.length > 0) {
-          currentBoard = viewsAcceptable[0];
+          currentBoard = viewsAcceptable[0] as TIssueBoardKeys;
         }
       }
 
       if (currentBoard) {
         if (projectStore?.activeBoard === null || projectStore?.activeBoard !== currentBoard) {
+          let params: any = { board: currentBoard };
+          if (priorities && priorities.length > 0) params = { ...params, priorities: priorities };
+          if (states && states.length > 0) params = { ...params, states: states };
+          if (labels && labels.length > 0) params = { ...params, labels: labels };
+
+          let storeParams: any = {};
+          if (priorities && priorities.length > 0) storeParams = { ...storeParams, priority: priorities.split(",") };
+          if (states && states.length > 0) storeParams = { ...storeParams, state: states.split(",") };
+          if (labels && labels.length > 0) storeParams = { ...storeParams, labels: labels.split(",") };
+
+          if (storeParams) updateFilters(project_slug, storeParams);
+
           projectStore.setActiveBoard(currentBoard);
           router.push({
             pathname: `/${workspace_slug}/${project_slug}`,
-            query: {
+            query: { ...params },
-              board: currentBoard,
-            },
           });
         }
       }
     }
-  }, [board, workspace_slug, project_slug, router, projectStore, projectStore?.deploySettings]);
+  }, [board, workspace_slug, project_slug, router, projectStore, projectStore?.deploySettings, updateFilters]);
 
   return (
     <div className="relative flex w-full items-center gap-4 px-5">
       {/* project detail */}
       <div className="flex flex-shrink-0 items-center gap-2">
         <div className="flex h-4 w-4 items-center justify-center">
-          {projectStore?.project && projectStore?.project?.emoji ? (
+          {projectStore.project ? (
-            renderEmoji(projectStore?.project?.emoji)
+            projectStore.project?.emoji ? (
+              <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                {renderEmoji(projectStore.project.emoji)}
+              </span>
+            ) : projectStore.project?.icon_prop ? (
+              <div className="h-7 w-7 flex-shrink-0 grid place-items-center">
+                {renderEmoji(projectStore.project.icon_prop)}
+              </div>
             ) : (
-            <Image src="/plane-logo.webp" alt="plane logo" className="h-[24px] w-[24px]" height="24" width="24" />
+              <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                {projectStore.project?.name.charAt(0)}
+              </span>
+            )
+          ) : (
+            <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+              <Briefcase className="h-4 w-4" />
+            </span>
           )}
         </div>
         <div className="line-clamp-1 max-w-[300px] overflow-hidden text-lg font-medium">
@@ -106,6 +143,11 @@ const IssueNavbar = observer(() => {
         <NavbarIssueBoardView />
       </div>
 
+      {/* issue filters */}
+      <div className="relative flex flex-shrink-0 items-center gap-1 transition-all delay-150 ease-in-out">
+        <IssueFiltersDropdown />
+      </div>
+
       {/* theming */}
       <div className="relative flex-shrink-0">
         <NavbarTheme />
@@ -113,26 +155,13 @@ const IssueNavbar = observer(() => {
 
       {user ? (
         <div className="flex items-center gap-2 rounded border border-custom-border-200 p-2">
-          {user.avatar && user.avatar !== "" ? (
+          <Avatar name={user?.display_name} src={user?.avatar} size={24} shape="square" className="!text-base" />
-            <div className="h-5 w-5 rounded-full">
-              {/* eslint-disable-next-line @next/next/no-img-element */}
-              <img src={user.avatar} alt={user.display_name ?? ""} className="rounded-full" />
-            </div>
-          ) : (
-            <div className="grid h-5 w-5 place-items-center rounded-full bg-custom-background-80 text-[10px] capitalize">
-              {(user.display_name ?? "A")[0]}
-            </div>
-          )}
           <h6 className="text-xs font-medium">{user.display_name}</h6>
         </div>
       ) : (
         <div className="flex-shrink-0">
           <Link href={`/login/?next_path=${router.asPath}`}>
-            <span>
+            <Button variant="outline-primary">Sign in</Button>
-              <PrimaryButton className="flex-shrink-0" outline>
-                Sign in
-              </PrimaryButton>
-            </span>
           </Link>
         </div>
       )}

space/components/issues/navbar/issue-board-view.tsx

@@ -5,6 +5,7 @@ import { issueViews } from "constants/data";
 // mobx
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
+import { TIssueBoardKeys } from "types/issue";
 
 export const NavbarIssueBoardView = observer(() => {
   const {
@@ -15,7 +16,7 @@ export const NavbarIssueBoardView = observer(() => {
   const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
 
   const handleCurrentBoardView = (boardView: string) => {
-    setActiveBoard(boardView);
+    setActiveBoard(boardView as TIssueBoardKeys);
     router.push(`/${workspace_slug}/${project_slug}?board=${boardView}`);
   };
 

space/components/issues/navbar/issue-filter.tsx

@@ -1,110 +0,0 @@
-import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
-import { ChevronDown } from "lucide-react";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
-// components
-import { Dropdown } from "components/ui/dropdown";
-// constants
-import { issueGroupFilter } from "constants/data";
-
-const PRIORITIES = ["urgent", "high", "medium", "low"];
-
-export const NavbarIssueFilter = observer(() => {
-  const store: RootStore = useMobxStore();
-
-  const router = useRouter();
-  const pathName = router.asPath;
-
-  const handleOnSelect = (key: "states" | "labels" | "priorities", value: string) => {
-    // if (key === "states") {
-    //   store.issue.userSelectedStates = store.issue.userSelectedStates.includes(value)
-    //     ? store.issue.userSelectedStates.filter((s) => s !== value)
-    //     : [...store.issue.userSelectedStates, value];
-    // } else if (key === "labels") {
-    //   store.issue.userSelectedLabels = store.issue.userSelectedLabels.includes(value)
-    //     ? store.issue.userSelectedLabels.filter((l) => l !== value)
-    //     : [...store.issue.userSelectedLabels, value];
-    // } else if (key === "priorities") {
-    //   store.issue.userSelectedPriorities = store.issue.userSelectedPriorities.includes(value)
-    //     ? store.issue.userSelectedPriorities.filter((p) => p !== value)
-    //     : [...store.issue.userSelectedPriorities, value];
-    // }
-    // const paramsCommaSeparated = `${`board=${store.issue.currentIssueBoardView || "list"}`}${
-    //   store.issue.userSelectedPriorities.length > 0 ? `&priorities=${store.issue.userSelectedPriorities.join(",")}` : ""
-    // }${store.issue.userSelectedStates.length > 0 ? `&states=${store.issue.userSelectedStates.join(",")}` : ""}${
-    //   store.issue.userSelectedLabels.length > 0 ? `&labels=${store.issue.userSelectedLabels.join(",")}` : ""
-    // }`;
-    // router.replace(`${pathName}?${paramsCommaSeparated}`);
-  };
-
-  return (
-    <Dropdown
-      button={
-        <>
-          <span>Filters</span>
-          <ChevronDown className="h-3 w-3" aria-hidden="true" />
-        </>
-      }
-      items={[
-        {
-          display: "Priority",
-          children: PRIORITIES.map((priority) => ({
-            display: (
-              <span className="capitalize flex items-center gap-x-2">
-                <span className="material-symbols-rounded text-[14px]">
-                  {priority === "urgent"
-                    ? "error"
-                    : priority === "high"
-                    ? "signal_cellular_alt"
-                    : priority === "medium"
-                    ? "signal_cellular_alt_2_bar"
-                    : "signal_cellular_alt_1_bar"}
-                </span>
-                {priority}
-              </span>
-            ),
-            onClick: () => handleOnSelect("priorities", priority),
-            isSelected: store.issue.filteredPriorities.includes(priority),
-          })),
-        },
-        {
-          display: "State",
-          children: (store.issue.states || []).map((state) => {
-            const stateGroup = issueGroupFilter(state.group);
-
-            return {
-              display: (
-                <span className="capitalize flex items-center gap-x-2">
-                  {/* {stateGroup && <stateGroup.icon />} */}
-                  {state.name}
-                </span>
-              ),
-              onClick: () => handleOnSelect("states", state.id),
-              isSelected: store.issue.filteredStates.includes(state.id),
-            };
-          }),
-        },
-        {
-          display: "Labels",
-          children: [...(store.issue.labels || [])].map((label) => ({
-            display: (
-              <span className="capitalize flex items-center gap-x-2">
-                <span
-                  className="w-3 h-3 rounded-full"
-                  style={{
-                    backgroundColor: label.color || "#000",
-                  }}
-                />
-                {label.name}
-              </span>
-            ),
-            onClick: () => handleOnSelect("labels", label.id),
-            isSelected: store.issue.filteredLabels.includes(label.id),
-          })),
-        },
-      ]}
-    />
-  );
-});

space/components/issues/peek-overview/comment/comment-reactions.tsx

@@ -6,7 +6,8 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 // ui
-import { ReactionSelector, Tooltip } from "components/ui";
+import { ReactionSelector } from "components/ui";
+import { Tooltip } from "@plane/ui";
 // helpers
 import { groupReactions, renderEmoji } from "helpers/emoji.helper";
 

space/components/issues/peek-overview/full-screen-peek-view.tsx

@@ -7,7 +7,7 @@ import {
   PeekOverviewIssueProperties,
 } from "components/issues/peek-overview";
 // types
-import { Loader } from "components/ui/loader";
+import { Loader } from "@plane/ui";
 import { IIssue } from "types/issue";
 
 type Props = {

space/components/issues/peek-overview/issue-activity.tsx

@@ -10,7 +10,8 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { CommentCard, AddComment } from "components/issues/peek-overview";
 // ui
-import { Icon, PrimaryButton } from "components/ui";
+import { Icon } from "components/ui";
+import { Button } from "@plane/ui";
 // types
 import { IIssue } from "types/issue";
 
@@ -55,9 +56,7 @@ export const PeekOverviewIssueActivity: React.FC<Props> = observer(() => {
                 Sign in to add your comment
               </p>
               <Link href={`/?next_path=${router.asPath}`}>
-                <span>
+                <Button variant="primary">Sign in</Button>
-                  <PrimaryButton className="flex-shrink-0 !px-7">Sign in</PrimaryButton>
-                </span>
               </Link>
             </div>
           )}

space/components/issues/peek-overview/issue-emoji-reactions.tsx

@@ -6,7 +6,8 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // helpers
 import { groupReactions, renderEmoji } from "helpers/emoji.helper";
 // components
-import { ReactionSelector, Tooltip } from "components/ui";
+import { ReactionSelector } from "components/ui";
+import { Tooltip } from "@plane/ui";
 
 export const IssueEmojiReactions: React.FC = observer(() => {
   // router

space/components/issues/peek-overview/issue-vote-reactions.tsx

@@ -6,7 +6,8 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // lib
 import { useMobxStore } from "lib/mobx/store-provider";
-import { Tooltip } from "components/ui";
+// ui
+import { Tooltip } from "@plane/ui";
 
 export const IssueVotes: React.FC = observer(() => {
   const [isSubmitting, setIsSubmitting] = useState(false);

space/components/issues/peek-overview/side-peek-view.tsx

@@ -7,7 +7,7 @@ import {
   PeekOverviewIssueProperties,
 } from "components/issues/peek-overview";
 
-import { Loader } from "components/ui/loader";
+import { Loader } from "@plane/ui";
 import { IIssue } from "types/issue";
 
 type Props = {

space/components/ui/index.ts

@@ -1,8 +1,3 @@
 export * from "./dropdown";
-export * from "./input";
-export * from "./loader";
-export * from "./primary-button";
-export * from "./secondary-button";
 export * from "./icon";
 export * from "./reaction-selector";
-export * from "./tooltip";

space/components/ui/input.tsx

@@ -1,37 +0,0 @@
-import React, { forwardRef, Ref } from "react";
-
-// types
-interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
-  mode?: "primary" | "transparent" | "trueTransparent";
-  error?: boolean;
-  inputSize?: "rg" | "lg";
-  fullWidth?: boolean;
-}
-
-export const Input = forwardRef((props: Props, ref: Ref<HTMLInputElement>) => {
-  const { mode = "primary", error, className = "", type, fullWidth = true, id, inputSize = "rg", ...rest } = props;
-
-  return (
-    <input
-      id={id}
-      ref={ref}
-      type={type}
-      className={`block rounded-md bg-transparent text-sm focus:outline-none placeholder-custom-text-400 ${
-        mode === "primary"
-          ? "rounded-md border border-custom-border-200"
-          : mode === "transparent"
-          ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary"
-          : mode === "trueTransparent"
-          ? "rounded border-none bg-transparent ring-0"
-          : ""
-      } ${error ? "border-red-500" : ""} ${error && mode === "primary" ? "bg-red-500/20" : ""} ${
-        fullWidth ? "w-full" : ""
-      } ${inputSize === "rg" ? "px-3 py-2" : inputSize === "lg" ? "p-3" : ""} ${className}`}
-      {...rest}
-    />
-  );
-});
-
-Input.displayName = "Input";
-
-export default Input;

space/components/ui/loader.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-
-type Props = {
-  children: React.ReactNode;
-  className?: string;
-};
-
-const Loader = ({ children, className = "" }: Props) => (
-  <div className={`${className} animate-pulse`} role="status">
-    {children}
-  </div>
-);
-
-type ItemProps = {
-  height?: string;
-  width?: string;
-};
-
-const Item: React.FC<ItemProps> = ({ height = "auto", width = "auto" }) => (
-  <div className="rounded-md bg-custom-background-80" style={{ height: height, width: width }} />
-);
-
-Loader.Item = Item;
-
-export { Loader };

space/components/ui/primary-button.tsx

@@ -1,35 +0,0 @@
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  size?: "sm" | "md" | "lg";
-  outline?: boolean;
-  loading?: boolean;
-}
-
-export const PrimaryButton: React.FC<ButtonProps> = ({
-  children,
-  className = "",
-  onClick,
-  type = "button",
-  disabled = false,
-  loading = false,
-  size = "sm",
-  outline = false,
-}) => (
-  <button
-    type={type}
-    className={`${className} border border-custom-primary font-medium duration-300 ${
-      size === "sm"
-        ? "rounded px-3 py-2 text-xs"
-        : size === "md"
-        ? "rounded-md px-3.5 py-2 text-sm"
-        : "rounded-lg px-4 py-2 text-base"
-    } ${disabled ? "cursor-not-allowed opacity-70 hover:opacity-70" : ""} ${
-      outline
-        ? "bg-transparent text-custom-primary hover:bg-custom-primary hover:text-white"
-        : "text-white bg-custom-primary hover:border-opacity-90 hover:bg-opacity-90"
-    }  ${loading ? "cursor-wait" : ""}`}
-    onClick={onClick}
-    disabled={disabled || loading}
-  >
-    {children}
-  </button>
-);

space/components/ui/secondary-button.tsx

@@ -1,35 +0,0 @@
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  size?: "sm" | "md" | "lg";
-  outline?: boolean;
-  loading?: boolean;
-}
-
-export const SecondaryButton: React.FC<ButtonProps> = ({
-  children,
-  className = "",
-  onClick,
-  type = "button",
-  disabled = false,
-  loading = false,
-  size = "sm",
-  outline = false,
-}) => (
-  <button
-    type={type}
-    className={`${className} border border-custom-border-200 font-medium duration-300 ${
-      size === "sm"
-        ? "rounded px-3 py-2 text-xs"
-        : size === "md"
-        ? "rounded-md px-3.5 py-2 text-sm"
-        : "rounded-lg px-4 py-2 text-base"
-    } ${disabled ? "cursor-not-allowed border-custom-border-200 bg-custom-background-90" : ""} ${
-      outline
-        ? "bg-transparent hover:bg-custom-background-80"
-        : "bg-custom-background-100 hover:border-opacity-70 hover:bg-opacity-70"
-    } ${loading ? "cursor-wait" : ""}`}
-    onClick={onClick}
-    disabled={disabled || loading}
-  >
-    {children}
-  </button>
-);

space/components/ui/tooltip.tsx

@@ -1,70 +0,0 @@
-import React from "react";
-// next-themes
-import { useTheme } from "next-themes";
-// tooltip2
-import { Tooltip2 } from "@blueprintjs/popover2";
-
-type Props = {
-  tooltipHeading?: string;
-  tooltipContent: string | React.ReactNode;
-  position?:
-    | "top"
-    | "right"
-    | "bottom"
-    | "left"
-    | "auto"
-    | "auto-end"
-    | "auto-start"
-    | "bottom-left"
-    | "bottom-right"
-    | "left-bottom"
-    | "left-top"
-    | "right-bottom"
-    | "right-top"
-    | "top-left"
-    | "top-right";
-  children: JSX.Element;
-  disabled?: boolean;
-  className?: string;
-  openDelay?: number;
-  closeDelay?: number;
-};
-
-export const Tooltip: React.FC<Props> = ({
-  tooltipHeading,
-  tooltipContent,
-  position = "top",
-  children,
-  disabled = false,
-  className = "",
-  openDelay = 200,
-  closeDelay,
-}) => {
-  const { theme } = useTheme();
-
-  return (
-    <Tooltip2
-      disabled={disabled}
-      hoverOpenDelay={openDelay}
-      hoverCloseDelay={closeDelay}
-      content={
-        <div
-          className={`relative z-50 max-w-xs gap-1 rounded-md border border-custom-border-200 p-2 text-xs shadow-md ${
-            theme === "custom" ? "bg-custom-background-100 text-custom-text-200" : "bg-black text-gray-400"
-          } overflow-hidden break-words ${className}`}
-        >
-          {tooltipHeading && (
-            <h5 className={`font-medium ${theme === "custom" ? "text-custom-text-100" : "text-white"}`}>
-              {tooltipHeading}
-            </h5>
-          )}
-          {tooltipContent}
-        </div>
-      }
-      position={position}
-      renderTarget={({ isOpen: isTooltipOpen, ref: eleReference, ...tooltipProps }) =>
-        React.cloneElement(children, { ref: eleReference, ...tooltipProps, ...children.props })
-      }
-    />
-  );
-};

space/components/views/project-details.tsx

@@ -9,6 +9,7 @@ import { IssueCalendarView } from "components/issues/board-views/calendar";
 import { IssueSpreadsheetView } from "components/issues/board-views/spreadsheet";
 import { IssueGanttView } from "components/issues/board-views/gantt";
 import { IssuePeekOverview } from "components/issues/peek-overview";
+import { IssueAppliedFilters } from "components/issues/filters/applied-filters/root";
 // mobx store
 import { RootStore } from "store/root";
 import { useMobxStore } from "lib/mobx/store-provider";
@@ -71,7 +72,10 @@ export const ProjectDetailsView = observer(() => {
             </div>
           ) : (
             projectStore?.activeBoard && (
-              <>
+              <div className="relative w-full h-full overflow-hidden flex flex-col">
+                {/* applied filters */}
+                <IssueAppliedFilters />
+
                 {projectStore?.activeBoard === "list" && (
                   <div className="relative h-full w-full overflow-y-auto">
                     <IssueListView />
@@ -85,7 +89,7 @@ export const ProjectDetailsView = observer(() => {
                 {projectStore?.activeBoard === "calendar" && <IssueCalendarView />}
                 {projectStore?.activeBoard === "spreadsheet" && <IssueSpreadsheetView />}
                 {projectStore?.activeBoard === "gantt" && <IssueGanttView />}
-              </>
+              </div>
             )
           )}
         </>

space/layouts/project-layout.tsx

@@ -1,4 +1,3 @@
-import Link from "next/link";
 import Image from "next/image";
 
 // mobx

space/store/issue.ts

@@ -1,4 +1,4 @@
-import { observable, action, computed, makeObservable, runInAction, reaction } from "mobx";
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
 // services
 import IssueService from "services/issue.service";
 // store

space/store/issues/base-issue-filter.store.ts

@@ -0,0 +1,29 @@
+// types
+import { RootStore } from "store/root";
+
+export interface IIssueFilterBaseStore {
+  // helper methods
+  computedFilter(filters: any, filteredParams: any): any;
+}
+
+export class IssueFilterBaseStore implements IIssueFilterBaseStore {
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    // root store
+    this.rootStore = _rootStore;
+  }
+
+  // helper methods
+  computedFilter = (filters: any, filteredParams: any) => {
+    const computedFilters: any = {};
+    Object.keys(filters).map((key) => {
+      if (filters[key] != undefined && filteredParams.includes(key))
+        computedFilters[key] =
+          typeof filters[key] === "string" || typeof filters[key] === "boolean" ? filters[key] : filters[key].join(",");
+    });
+
+    return computedFilters;
+  };
+}

space/store/issues/helpers.ts

@@ -0,0 +1,52 @@
+import { TIssueBoardKeys } from "types/issue";
+import { IIssueFilterOptions, TIssueParams } from "./types";
+
+export const isNil = (value: any) => {
+  if (value === undefined || value === null) return true;
+
+  return false;
+};
+
+export interface ILayoutDisplayFiltersOptions {
+  filters: (keyof IIssueFilterOptions)[];
+  display_properties: boolean | null;
+  display_filters: null;
+  extra_options: null;
+}
+
+export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
+  [pageType: string]: { [layoutType: string]: ILayoutDisplayFiltersOptions };
+} = {
+  issues: {
+    list: {
+      filters: ["priority", "state", "labels"],
+      display_properties: null,
+      display_filters: null,
+      extra_options: null,
+    },
+    kanban: {
+      filters: ["priority", "state", "labels"],
+      display_properties: null,
+      display_filters: null,
+      extra_options: null,
+    },
+  },
+};
+
+export const handleIssueQueryParamsByLayout = (
+  layout: TIssueBoardKeys | undefined,
+  viewType: "issues"
+): TIssueParams[] | null => {
+  const queryParams: TIssueParams[] = [];
+
+  if (!layout) return null;
+
+  const layoutOptions = ISSUE_DISPLAY_FILTERS_BY_LAYOUT[viewType][layout];
+
+  // add filters query params
+  layoutOptions.filters.forEach((option) => {
+    queryParams.push(option);
+  });
+
+  return queryParams;
+};

space/store/issues/issue-filters.store.ts

@@ -0,0 +1,106 @@
+import { action, makeObservable, observable, runInAction, computed } from "mobx";
+// types
+import { RootStore } from "store/root";
+import { IIssueFilterOptions, TIssueParams } from "./types";
+import { handleIssueQueryParamsByLayout } from "./helpers";
+import { IssueFilterBaseStore } from "./base-issue-filter.store";
+
+interface IFiltersOptions {
+  filters: IIssueFilterOptions;
+}
+
+export interface IIssuesFilterStore {
+  // observables
+  projectIssueFilters: { [projectId: string]: IFiltersOptions } | undefined;
+  // computed
+  issueFilters: IFiltersOptions | undefined;
+  appliedFilters: TIssueParams[] | undefined;
+  // helpers
+  issueDisplayFilters: (projectId: string) => IFiltersOptions | undefined;
+  // actions
+  updateFilters: (projectId: string, filters: IIssueFilterOptions) => Promise<IFiltersOptions>;
+}
+
+export class IssuesFilterStore extends IssueFilterBaseStore implements IIssuesFilterStore {
+  // observables
+  projectIssueFilters: { [projectId: string]: IFiltersOptions } | undefined = undefined;
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    super(_rootStore);
+
+    makeObservable(this, {
+      // observables
+      projectIssueFilters: observable.ref,
+      // computed
+      issueFilters: computed,
+      appliedFilters: computed,
+      // actions
+      updateFilters: action,
+    });
+    // root store
+    this.rootStore = _rootStore;
+  }
+
+  // helpers
+  issueDisplayFilters = (projectId: string) => {
+    if (!projectId) return undefined;
+    return this.projectIssueFilters?.[projectId] || undefined;
+  };
+
+  // actions
+
+  updateFilters = async (projectId: string, filters: IIssueFilterOptions) => {
+    try {
+      let _projectIssueFilters = { ...this.projectIssueFilters };
+      if (!_projectIssueFilters) _projectIssueFilters = {};
+      if (!_projectIssueFilters[projectId]) _projectIssueFilters[projectId] = { filters: {} };
+
+      const _filters = {
+        filters: { ..._projectIssueFilters[projectId].filters },
+      };
+
+      _filters.filters = { ..._filters.filters, ...filters };
+
+      _projectIssueFilters[projectId] = {
+        filters: _filters.filters,
+      };
+
+      runInAction(() => {
+        this.projectIssueFilters = _projectIssueFilters;
+      });
+
+      return _filters;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  get issueFilters() {
+    const projectId = this.rootStore.project.project?.id;
+    if (!projectId) return undefined;
+
+    const issueFilters = this.issueDisplayFilters(projectId);
+    if (!issueFilters) return undefined;
+
+    return issueFilters;
+  }
+
+  get appliedFilters() {
+    const userFilters = this.issueFilters;
+    const layout = this.rootStore.project?.activeBoard;
+    if (!userFilters || !layout) return undefined;
+
+    let filteredRouteParams: any = {
+      priority: userFilters?.filters?.priority || undefined,
+      state: userFilters?.filters?.state || undefined,
+      labels: userFilters?.filters?.labels || undefined,
+    };
+
+    const filteredParams = handleIssueQueryParamsByLayout(layout, "issues");
+    if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
+
+    return filteredRouteParams;
+  }
+}

space/store/issues/types.ts

@@ -0,0 +1,36 @@
+import { IIssue } from "types/issue";
+
+export type TIssueGroupByOptions = "state" | "priority" | "labels" | null;
+
+export type TIssueParams = "priority" | "state" | "labels";
+
+export interface IIssueFilterOptions {
+  state?: string[] | null;
+  labels?: string[] | null;
+  priority?: string[] | null;
+}
+
+// issues
+export interface IGroupedIssues {
+  [group_id: string]: string[];
+}
+
+export interface ISubGroupedIssues {
+  [sub_grouped_id: string]: {
+    [group_id: string]: string[];
+  };
+}
+
+export type TUnGroupedIssues = string[];
+
+export interface IIssueResponse {
+  [issue_id: string]: IIssue;
+}
+
+export type TLoader = "init-loader" | "mutation" | undefined;
+
+export interface ViewFlags {
+  enableQuickAdd: boolean;
+  enableIssueCreation: boolean;
+  enableInlineEditing: boolean;
+}

space/store/project.ts

@@ -2,6 +2,7 @@
 import { observable, action, makeObservable, runInAction } from "mobx";
 // service
 import ProjectService from "services/project.service";
+import { TIssueBoardKeys } from "types/issue";
 // types
 import { IWorkspace, IProject, IProjectSettings } from "types/project";
 
@@ -12,9 +13,9 @@ export interface IProjectStore {
   project: IProject | null;
   deploySettings: IProjectSettings | null;
   viewOptions: any;
-  activeBoard: string | null;
+  activeBoard: TIssueBoardKeys | null;
   fetchProjectSettings: (workspace_slug: string, project_slug: string) => Promise<void>;
-  setActiveBoard: (value: string) => void;
+  setActiveBoard: (value: TIssueBoardKeys) => void;
 }
 
 class ProjectStore implements IProjectStore {
@@ -25,7 +26,7 @@ class ProjectStore implements IProjectStore {
   project: IProject | null = null;
   deploySettings: IProjectSettings | null = null;
   viewOptions: any = null;
-  activeBoard: string | null = null;
+  activeBoard: TIssueBoardKeys | null = null;
   // root store
   rootStore;
   // service
@@ -80,7 +81,7 @@ class ProjectStore implements IProjectStore {
     }
   };
 
-  setActiveBoard = (boardValue: string) => {
+  setActiveBoard = (boardValue: TIssueBoardKeys) => {
     this.activeBoard = boardValue;
   };
 }

space/store/root.ts

@@ -6,6 +6,7 @@ import IssueStore, { IIssueStore } from "./issue";
 import ProjectStore, { IProjectStore } from "./project";
 import IssueDetailStore, { IIssueDetailStore } from "./issue_details";
 import { IMentionsStore, MentionsStore } from "./mentions.store";
+import { IIssuesFilterStore, IssuesFilterStore } from "./issues/issue-filters.store";
 
 enableStaticRendering(typeof window === "undefined");
 
@@ -15,6 +16,7 @@ export class RootStore {
   issueDetails: IIssueDetailStore;
   project: IProjectStore;
   mentionsStore: IMentionsStore;
+  issuesFilter: IIssuesFilterStore;
 
   constructor() {
     this.user = new UserStore(this);
@@ -22,5 +24,6 @@ export class RootStore {
     this.project = new ProjectStore(this);
     this.issueDetails = new IssueDetailStore(this);
     this.mentionsStore = new MentionsStore(this);
+    this.issuesFilter = new IssuesFilterStore(this);
   }
 }

web/components/account/sign-in-forms/email-form.tsx

@@ -84,7 +84,7 @@ export const EmailForm: React.FC<Props> = (props) => {
   return (
     <>
       <h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
-        Get on your flight deck!
+        Get on your flight deck
       </h1>
       <p className="text-center text-sm text-onboarding-text-200 mt-3">
         Sign in with the email you used to sign up for Plane

web/components/account/sign-in-forms/password.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 import { XCircle } from "lucide-react";
@@ -36,6 +36,8 @@ const authService = new AuthService();
 
 export const PasswordForm: React.FC<Props> = (props) => {
   const { email, updateEmail, handleStepChange, handleSignInRedirection } = props;
+  // states
+  const [isSendingResetPasswordLink, setIsSendingResetPasswordLink] = useState(false);
   // toast alert
   const { setToastAlert } = useToast();
   // form info
@@ -113,6 +115,8 @@ export const PasswordForm: React.FC<Props> = (props) => {
       return;
     }
 
+    setIsSendingResetPasswordLink(true);
+
     authService
       .sendResetPasswordLink({ email: emailFormValue })
       .then(() => handleStepChange(ESignInSteps.SET_PASSWORD_LINK))
@@ -122,7 +126,8 @@ export const PasswordForm: React.FC<Props> = (props) => {
           title: "Error!",
           message: err?.error ?? "Something went wrong. Please try again.",
         })
-      );
+      )
+      .finally(() => setIsSendingResetPasswordLink(false));
   };
 
   return (
@@ -189,9 +194,12 @@ export const PasswordForm: React.FC<Props> = (props) => {
             <button
               type="button"
               onClick={handleForgotPassword}
-              className="text-xs font-medium text-custom-primary-100"
+              className={`text-xs font-medium ${
+                isSendingResetPasswordLink ? "text-onboarding-text-300" : "text-custom-primary-100"
+              }`}
+              disabled={isSendingResetPasswordLink}
             >
-              Forgot your password?
+              {isSendingResetPasswordLink ? "Sending link..." : "Forgot your password?"}
             </button>
           </div>
         </div>

web/components/account/sign-in-forms/root.tsx

@@ -1,4 +1,6 @@
 import React, { useState } from "react";
+// hooks
+import useSignInRedirection from "hooks/use-sign-in-redirection";
 // components
 import {
   EmailForm,
@@ -19,33 +21,27 @@ export enum ESignInSteps {
   CREATE_PASSWORD = "CREATE_PASSWORD",
 }
 
-type Props = {
-  handleSignInRedirection: () => Promise<void>;
-};
-
 const OAUTH_HIDDEN_STEPS = [ESignInSteps.OPTIONAL_SET_PASSWORD, ESignInSteps.CREATE_PASSWORD];
 
-export const SignInRoot: React.FC<Props> = (props) => {
+export const SignInRoot = () => {
-  const { handleSignInRedirection } = props;
   // states
   const [signInStep, setSignInStep] = useState<ESignInSteps>(ESignInSteps.EMAIL);
   const [email, setEmail] = useState("");
+  // sign in redirection hook
+  const { handleRedirection } = useSignInRedirection();
 
   return (
     <>
       <div className="mx-auto flex flex-col">
         {signInStep === ESignInSteps.EMAIL && (
-          <EmailForm
+          <EmailForm handleStepChange={(step) => setSignInStep(step)} updateEmail={(newEmail) => setEmail(newEmail)} />
-            handleStepChange={(step: ESignInSteps) => setSignInStep(step)}
-            updateEmail={(newEmail) => setEmail(newEmail)}
-          />
         )}
         {signInStep === ESignInSteps.PASSWORD && (
           <PasswordForm
             email={email}
             updateEmail={(newEmail) => setEmail(newEmail)}
-            handleStepChange={(step: ESignInSteps) => setSignInStep(step)}
+            handleStepChange={(step) => setSignInStep(step)}
-            handleSignInRedirection={handleSignInRedirection}
+            handleSignInRedirection={handleRedirection}
           />
         )}
         {signInStep === ESignInSteps.SET_PASSWORD_LINK && (
@@ -55,30 +51,30 @@ export const SignInRoot: React.FC<Props> = (props) => {
           <UniqueCodeForm
             email={email}
             updateEmail={(newEmail) => setEmail(newEmail)}
-            handleStepChange={(step: ESignInSteps) => setSignInStep(step)}
+            handleStepChange={(step) => setSignInStep(step)}
-            handleSignInRedirection={handleSignInRedirection}
+            handleSignInRedirection={handleRedirection}
           />
         )}
         {signInStep === ESignInSteps.OPTIONAL_SET_PASSWORD && (
           <OptionalSetPasswordForm
             email={email}
-            handleStepChange={(step: ESignInSteps) => setSignInStep(step)}
+            handleStepChange={(step) => setSignInStep(step)}
-            handleSignInRedirection={handleSignInRedirection}
+            handleSignInRedirection={handleRedirection}
           />
         )}
         {signInStep === ESignInSteps.CREATE_PASSWORD && (
           <CreatePasswordForm
             email={email}
-            handleStepChange={(step: ESignInSteps) => setSignInStep(step)}
+            handleStepChange={(step) => setSignInStep(step)}
-            handleSignInRedirection={handleSignInRedirection}
+            handleSignInRedirection={handleRedirection}
           />
         )}
       </div>
       {!OAUTH_HIDDEN_STEPS.includes(signInStep) && (
         <OAuthOptions
           updateEmail={(newEmail) => setEmail(newEmail)}
-          handleStepChange={(step: ESignInSteps) => setSignInStep(step)}
+          handleStepChange={(step) => setSignInStep(step)}
-          handleSignInRedirection={handleSignInRedirection}
+          handleSignInRedirection={handleRedirection}
         />
       )}
     </>

web/components/account/sign-in-forms/set-password-link.tsx

@@ -30,7 +30,7 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
   const {
     control,
     formState: { errors, isValid },
-    watch,
+    handleSubmit,
   } = useForm({
     defaultValues: {
       email,
@@ -39,11 +39,13 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
     reValidateMode: "onChange",
   });
 
-  const handleSendNewLink = async () => {
+  const handleSendNewLink = async (formData: { email: string }) => {
     setIsSendingNewLink(true);
 
+    updateEmail(formData.email);
+
     const payload: IEmailCheckData = {
-      email: watch("email"),
+      email: formData.email,
       type: "password",
     };
 
@@ -76,7 +78,7 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
         password
       </p>
 
-      <form className="mt-5 sm:w-96 mx-auto space-y-4">
+      <form onSubmit={handleSubmit(handleSendNewLink)} className="mt-5 sm:w-96 mx-auto space-y-4">
         <div className="space-y-1">
           <Controller
             control={control}
@@ -92,10 +94,7 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
                   name="email"
                   type="email"
                   value={value}
-                  onChange={(e) => {
+                  onChange={onChange}
-                    updateEmail(e.target.value);
-                    onChange(e.target.value);
-                  }}
                   ref={ref}
                   hasError={Boolean(errors.email)}
                   placeholder="orville.wright@firstflight.com"
@@ -112,11 +111,10 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
           />
         </div>
         <Button
-          type="button"
+          type="submit"
           variant="primary"
           className="w-full"
           size="xl"
-          onClick={handleSendNewLink}
           disabled={!isValid}
           loading={isSendingNewLink}
         >

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

@@ -11,6 +11,7 @@ import { ArchiveRestore } from "lucide-react";
 import { PROJECT_AUTOMATION_MONTHS } from "constants/project";
 // types
 import { IProject } from "types";
+import { EUserWorkspaceRoles } from "constants/workspace";
 
 type Props = {
   handleChange: (formData: Partial<IProject>) => Promise<void>;
@@ -28,6 +29,8 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
   const projectDetails = projectStore.currentProjectDetails;
   const userRole = userStore.currentProjectRole;
 
+  const isAdmin = userRole === EUserWorkspaceRoles.ADMIN;
+
   return (
     <>
       <SelectMonthModal
@@ -56,7 +59,7 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
               projectDetails?.archive_in === 0 ? handleChange({ archive_in: 1 }) : handleChange({ archive_in: 0 })
             }
             size="sm"
-            disabled={userRole !== 20}
+            disabled={!isAdmin}
           />
         </div>
 
@@ -74,7 +77,7 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
                     }}
                     input
                     width="w-full"
-                    disabled={userRole !== 20}
+                    disabled={!isAdmin}
                   >
                     <>
                       {PROJECT_AUTOMATION_MONTHS.map((month) => (

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

@@ -11,6 +11,7 @@ import { ArchiveX } from "lucide-react";
 import { IProject } from "types";
 // fetch keys
 import { PROJECT_AUTOMATION_MONTHS } from "constants/project";
+import { EUserWorkspaceRoles } from "constants/workspace";
 
 type Props = {
   handleChange: (formData: Partial<IProject>) => Promise<void>;
@@ -53,6 +54,8 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
     default_state: defaultState,
   };
 
+  const isAdmin = userRole === EUserWorkspaceRoles.ADMIN;
+
   return (
     <>
       <SelectMonthModal
@@ -83,7 +86,7 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
                 : handleChange({ close_in: 0, default_state: null })
             }
             size="sm"
-            disabled={userRole !== 20}
+            disabled={!isAdmin}
           />
         </div>
 
@@ -102,7 +105,7 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
                       }}
                       input
                       width="w-full"
-                      disabled={userRole !== 20}
+                      disabled={!isAdmin}
                     >
                       <>
                         {PROJECT_AUTOMATION_MONTHS.map((month) => (

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

@@ -324,7 +324,7 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
                       File formats supported- .jpeg, .jpg, .png, .webp, .svg
                     </p>
 
-                    <div className="flex items-center justify-end gap-2">
+                    <div className="flex items-start h-12 justify-end gap-2">
                       <Button
                         variant="neutral-primary"
                         onClick={() => {

web/components/cycles/sidebar.tsx

@@ -52,7 +52,10 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
   const router = useRouter();
   const { workspaceSlug, projectId, peekCycle } = router.query;
 
-  const { cycle: cycleDetailsStore, trackEvent: { setTrackElement, postHogEventTracker } } = useMobxStore();
+  const {
+    cycle: cycleDetailsStore,
+    trackEvent: { setTrackElement, postHogEventTracker },
+  } = useMobxStore();
 
   const cycleDetails = cycleDetailsStore.cycle_details[cycleId] ?? undefined;
 
@@ -70,31 +73,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
   const submitChanges = (data: Partial<ICycle>) => {
     if (!workspaceSlug || !projectId || !cycleId) return;
 
-    mutate<ICycle>(CYCLE_DETAILS(cycleId as string), (prevData) => ({ ...(prevData as ICycle), ...data }), false);
+    cycleDetailsStore.patchCycle(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), data);
-
-    cycleService
-      .patchCycle(workspaceSlug as string, projectId as string, cycleId as string, data)
-      .then((res) => {
-        mutate(CYCLE_DETAILS(cycleId as string));
-        postHogEventTracker(
-          "CYCLE_UPDATE",
-          {
-            ...res,
-            state: "SUCCESS"
-          }
-        );
-      }
-      )
-      .catch((e) => {
-        console.log(e);
-        postHogEventTracker(
-          "CYCLE_UPDATE",
-          {
-            state: "FAILED"
-          }
-        );
-      }
-      );
   };
 
   const handleCopyText = () => {
@@ -337,11 +316,12 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
             </button>
             {!isCompleted && (
               <CustomMenu width="lg" placement="bottom-end" ellipsis>
-                <CustomMenu.MenuItem onClick={() => {
+                <CustomMenu.MenuItem
+                  onClick={() => {
                     setTrackElement("CYCLE_PAGE_SIDEBAR");
-                  setCycleDeleteModal(true)
+                    setCycleDeleteModal(true);
-                }
+                  }}
-                }>
+                >
                   <span className="flex items-center justify-start gap-2">
                     <Trash2 className="h-3 w-3" />
                     <span>Delete cycle</span>

web/components/cycles/transfer-issues-modal.tsx

@@ -2,10 +2,12 @@ import React, { useState } from "react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
 import { Dialog, Transition } from "@headlessui/react";
+import { observer } from "mobx-react-lite";
 // services
 import { CycleService } from "services/cycle.service";
 // hooks
 import useToast from "hooks/use-toast";
+import { useMobxStore } from "lib/mobx/store-provider";
 //icons
 import { ContrastIcon, TransferIcon } from "@plane/ui";
 import { AlertCircle, Search, X } from "lucide-react";
@@ -23,17 +25,19 @@ type Props = {
 
 const cycleService = new CycleService();
 
-export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) => {
+export const TransferIssuesModal: React.FC<Props> = observer(({ isOpen, handleClose }) => {
   const [query, setQuery] = useState("");
 
+  const { cycleIssues: cycleIssueStore } = useMobxStore();
+
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId } = router.query;
 
   const { setToastAlert } = useToast();
 
   const transferIssue = async (payload: any) => {
-    await cycleService
+    await cycleIssueStore
-      .transferIssues(workspaceSlug as string, projectId as string, cycleId as string, payload)
+      .transferIssuesFromCycle(workspaceSlug as string, projectId as string, cycleId as string, payload)
       .then(() => {
         setToastAlert({
           type: "success",
@@ -159,4 +163,4 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
       </Dialog>
     </Transition.Root>
   );
-};
+});

web/components/inbox/actions-header.tsx

@@ -22,6 +22,7 @@ import { Button } from "@plane/ui";
 import { CheckCircle2, ChevronDown, ChevronUp, Clock, FileStack, Inbox, Trash2, XCircle } from "lucide-react";
 // types
 import type { TInboxStatus } from "types";
+import { EUserWorkspaceRoles } from "constants/workspace";
 
 export const InboxActionsHeader = observer(() => {
   const [date, setDate] = useState(new Date());
@@ -71,7 +72,7 @@ export const InboxActionsHeader = observer(() => {
   }, [issue]);
 
   const issueStatus = issue?.issue_inbox[0].status;
-  const isAllowed = userRole === 15 || userRole === 20;
+  const isAllowed = !!userRole && userRole >= EUserWorkspaceRoles.MEMBER;
 
   const today = new Date();
   const tomorrow = new Date(today);

web/components/inbox/main-content.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useState } from "react";
 import Router, { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import useSWR from "swr";
@@ -8,14 +8,15 @@ import { AlertTriangle, CheckCircle2, Clock, Copy, ExternalLink, Inbox, XCircle
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { IssueDescriptionForm, IssueDetailsSidebar, IssueReaction } from "components/issues";
+import { IssueDescriptionForm, IssueDetailsSidebar, IssueReaction, IssueUpdateStatus } from "components/issues";
 import { InboxIssueActivity } from "components/inbox";
 // ui
-import { Loader } from "@plane/ui";
+import { Loader, StateGroupIcon } from "@plane/ui";
 // helpers
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
 import { IInboxIssue, IIssue } from "types";
+import { EUserWorkspaceRoles } from "constants/workspace";
 
 const defaultValues: Partial<IInboxIssue> = {
   name: "",
@@ -30,7 +31,15 @@ export const InboxMainContent: React.FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, projectId, inboxId, inboxIssueId } = router.query;
 
-  const { inboxIssues: inboxIssuesStore, inboxIssueDetails: inboxIssueDetailsStore, user: userStore } = useMobxStore();
+  // states
+  const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
+
+  const {
+    inboxIssues: inboxIssuesStore,
+    inboxIssueDetails: inboxIssueDetailsStore,
+    user: userStore,
+    projectState: { states },
+  } = useMobxStore();
 
   const user = userStore.currentUser;
   const userRole = userStore.currentProjectRole;
@@ -54,6 +63,9 @@ export const InboxMainContent: React.FC = observer(() => {
 
   const issuesList = inboxId ? inboxIssuesStore.inboxIssues[inboxId.toString()] : undefined;
   const issueDetails = inboxIssueId ? inboxIssueDetailsStore.issueDetails[inboxIssueId.toString()] : undefined;
+  const currentIssueState = projectId
+    ? states[projectId.toString()]?.find((s) => s.id === issueDetails?.state)
+    : undefined;
 
   const submitChanges = useCallback(
     async (formData: Partial<IInboxIssue>) => {
@@ -144,6 +156,8 @@ export const InboxMainContent: React.FC = observer(() => {
       </div>
     );
 
+  const isAllowed = !!userRole && userRole >= EUserWorkspaceRoles.MEMBER;
+
   return (
     <>
       {issueDetails ? (
@@ -214,15 +228,27 @@ export const InboxMainContent: React.FC = observer(() => {
                 </>
               ) : null}
             </div>
+            <div className="flex items-center mb-5">
+              {currentIssueState && (
+                <StateGroupIcon
+                  className="h-4 w-4 mr-3"
+                  stateGroup={currentIssueState.group}
+                  color={currentIssueState.color}
+                />
+              )}
+              <IssueUpdateStatus isSubmitting={isSubmitting} issueDetail={issueDetails} />
+            </div>
             <div>
               <IssueDescriptionForm
+                setIsSubmitting={(value) => setIsSubmitting(value)}
+                isSubmitting={isSubmitting}
                 workspaceSlug={workspaceSlug as string}
                 issue={{
                   name: issueDetails.name,
                   description_html: issueDetails.description_html,
                 }}
                 handleFormSubmit={submitChanges}
-                isAllowed={userRole === 15 || userRole === 20 || user?.id === issueDetails.created_by}
+                isAllowed={isAllowed || user?.id === issueDetails.created_by}
               />
             </div>
 

web/components/issues/description-form.tsx

@@ -26,14 +26,15 @@ export interface IssueDetailsProps {
   workspaceSlug: string;
   handleFormSubmit: (value: IssueDescriptionFormValues) => Promise<void>;
   isAllowed: boolean;
+  isSubmitting: "submitting" | "submitted" | "saved";
+  setIsSubmitting: (value: "submitting" | "submitted" | "saved") => void;
 }
 
 const fileService = new FileService();
 
 export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
-  const { issue, handleFormSubmit, workspaceSlug, isAllowed } = props;
+  const { issue, handleFormSubmit, workspaceSlug, isAllowed, isSubmitting, setIsSubmitting } = props;
   // states
-  const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
   const [characterLimit, setCharacterLimit] = useState(false);
 
   const { setShowAlert } = useReloadConfirmations();
@@ -166,13 +167,6 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
             />
           )}
         />
-        <div
-          className={`absolute right-5 bottom-5 text-xs text-custom-text-200 border border-custom-border-400 rounded-xl w-[6.5rem] py-1 z-10 flex items-center justify-center ${
-            isSubmitting === "saved" ? "fadeOut" : "fadeIn"
-          }`}
-        >
-          {isSubmitting === "submitting" ? "Saving..." : "Saved"}
-        </div>
       </div>
     </div>
   );

web/components/issues/index.ts

@@ -15,6 +15,7 @@ export * from "./sidebar";
 export * from "./label";
 export * from "./issue-reaction";
 export * from "./confirm-issue-discard";
+export * from "./issue-update-status";
 
 // draft issue
 export * from "./draft-issue-form";

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

@@ -25,6 +25,7 @@ import {
   IViewIssuesStore,
 } from "store/issues";
 import { TUnGroupedIssues } from "store/issues/types";
+import { EUserWorkspaceRoles } from "constants/workspace";
 
 interface IBaseGanttRoot {
   issueFiltersStore:
@@ -69,7 +70,7 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
     );
   };
 
-  const isAllowed = currentProjectRole && currentProjectRole >= 15;
+  const isAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
 
   return (
     <>

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

@@ -31,6 +31,7 @@ import { KanBan } from "./default";
 import { KanBanSwimLanes } from "./swimlanes";
 import { EProjectStore } from "store/command-palette.store";
 import { IssuePeekOverview } from "components/issues";
+import { EUserWorkspaceRoles } from "constants/workspace";
 
 export interface IBaseKanBanLayout {
   issueStore:
@@ -93,7 +94,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
   } = useMobxStore();
 
   const { currentProjectRole } = userStore;
-  const isEditingAllowed = [15, 20].includes(currentProjectRole || 0);
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
 
   const issues = issueStore?.getIssues || {};
   const issueIds = issueStore?.getIssuesIds || [];
@@ -223,7 +224,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
               isDragStarted={isDragStarted}
               quickAddCallback={issueStore?.quickAddIssue}
               viewId={viewId}
-              disableIssueCreation={!enableIssueCreation}
+              disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
               isReadOnly={!enableInlineEditing || !isEditingAllowed}
               currentStore={currentStore}
               addIssuesToView={addIssuesToView}

web/components/issues/issue-layouts/kanban/block.tsx

@@ -1,4 +1,6 @@
+import { memo } from "react";
 import { Draggable } from "@hello-pangea/dnd";
+import isEqual from "lodash/isEqual";
 // components
 import { KanBanProperties } from "./properties";
 // ui
@@ -21,7 +23,7 @@ interface IssueBlockProps {
   isReadOnly: boolean;
 }
 
-export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
+export const KanBanIssueMemoBlock: React.FC<IssueBlockProps> = (props) => {
   const {
     sub_group_id,
     columnId,
@@ -63,30 +65,36 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
             {...provided.draggableProps}
             {...provided.dragHandleProps}
             ref={provided.innerRef}
-            onClick={handleIssuePeekOverview}
           >
             {issue.tempId !== undefined && (
               <div className="absolute top-0 left-0 w-full h-full animate-pulse bg-custom-background-100/20 z-[99999]" />
             )}
-            <div className="absolute top-3 right-3 hidden group-hover/kanban-block:block">
-              {quickActions(
-                !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
-                !columnId && columnId === "null" ? null : columnId,
-                issue
-              )}
-            </div>
             <div
               className={`text-sm rounded py-2 px-3 shadow-custom-shadow-2xs space-y-2 border-[0.5px] border-custom-border-200 transition-all bg-custom-background-100 ${
                 isDragDisabled ? "" : "hover:cursor-grab"
               } ${snapshot.isDragging ? `border-custom-primary-100` : `border-transparent`}`}
             >
               {displayProperties && displayProperties?.key && (
+                <div className="relative">
                   <div className="text-xs line-clamp-1 text-custom-text-300">
                     {issue.project_detail.identifier}-{issue.sequence_id}
                   </div>
+                  <div className="absolute -top-1 right-0 hidden group-hover/kanban-block:block">
+                    {quickActions(
+                      !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+                      !columnId && columnId === "null" ? null : columnId,
+                      issue
+                    )}
+                  </div>
+                </div>
               )}
               <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
-                <div className="line-clamp-2 text-sm font-medium text-custom-text-100">{issue.name}</div>
+                <div
+                  className="line-clamp-2 text-sm font-medium text-custom-text-100"
+                  onClick={handleIssuePeekOverview}
+                >
+                  {issue.name}
+                </div>
               </Tooltip>
               <div>
                 <KanBanProperties
@@ -106,3 +114,10 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
     </>
   );
 };
+
+const validateMemo = (prevProps: IssueBlockProps, nextProps: IssueBlockProps) => {
+  if (prevProps.issue != nextProps.issue) return true;
+  return false;
+};
+
+export const KanbanIssueBlock = memo(KanBanIssueMemoBlock, validateMemo);

web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx

@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
 // components
 import { CustomMenu } from "@plane/ui";
 import { CreateUpdateIssueModal } from "components/issues/modal";
+import { CreateUpdateDraftIssueModal } from "components/issues/draft-issue-modal";
 import { ExistingIssuesListModal } from "components/core";
 // lucide icons
 import { Minimize2, Maximize2, Circle, Plus } from "lucide-react";
@@ -51,6 +52,8 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
   const router = useRouter();
   const { workspaceSlug, projectId, moduleId, cycleId } = router.query;
 
+  const isDraftIssue = router.pathname.includes("draft-issue");
+
   const { setToastAlert } = useToast();
 
   const renderExistingIssueModal = moduleId || cycleId;
@@ -73,12 +76,21 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
 
   return (
     <>
+      {isDraftIssue ? (
+        <CreateUpdateDraftIssueModal
+          isOpen={isOpen}
+          handleClose={() => setIsOpen(false)}
+          prePopulateData={issuePayload}
+          fieldsToShow={["all"]}
+        />
+      ) : (
         <CreateUpdateIssueModal
           isOpen={isOpen}
           handleClose={() => setIsOpen(false)}
           prePopulateData={issuePayload}
           currentStore={currentStore}
         />
+      )}
       {renderExistingIssueModal && (
         <ExistingIssuesListModal
           isOpen={openExistingIssueListModal}

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

@@ -25,6 +25,7 @@ import { IIssueResponse } from "store/issues/types";
 import { EProjectStore } from "store/command-palette.store";
 import { IssuePeekOverview } from "components/issues";
 import { useRouter } from "next/router";
+import { EUserWorkspaceRoles } from "constants/workspace";
 
 enum EIssueActions {
   UPDATE = "update",
@@ -83,7 +84,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
   } = useMobxStore();
 
   const { currentProjectRole } = userStore;
-  const isEditingAllowed = [15, 20].includes(currentProjectRole || 0);
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
 
   const issueIds = issueStore?.getIssuesIds || [];
   const issues = issueStore?.getIssues;
@@ -147,7 +148,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
             quickAddCallback={issueStore?.quickAddIssue}
             enableIssueQuickAdd={!!enableQuickAdd}
             isReadonly={!enableInlineEditing || !isEditingAllowed}
-            disableIssueCreation={!enableIssueCreation}
+            disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
             currentStore={currentStore}
             addIssuesToView={addIssuesToView}
           />

web/components/issues/issue-layouts/list/headers/group-by-card.tsx

@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
 // lucide icons
 import { CircleDashed, Plus } from "lucide-react";
 // components
+import { CreateUpdateDraftIssueModal } from "components/issues/draft-issue-modal";
 import { CreateUpdateIssueModal } from "components/issues/modal";
 import { ExistingIssuesListModal } from "components/core";
 import { CustomMenu } from "@plane/ui";
@@ -32,6 +33,8 @@ export const HeaderGroupByCard = observer(
 
     const [openExistingIssueListModal, setOpenExistingIssueListModal] = React.useState(false);
 
+    const isDraftIssue = router.pathname.includes("draft-issue");
+
     const { setToastAlert } = useToast();
 
     const renderExistingIssueModal = moduleId || cycleId;
@@ -90,12 +93,21 @@ export const HeaderGroupByCard = observer(
               </div>
             ))}
 
+          {isDraftIssue ? (
+            <CreateUpdateDraftIssueModal
+              isOpen={isOpen}
+              handleClose={() => setIsOpen(false)}
+              prePopulateData={issuePayload}
+              fieldsToShow={["all"]}
+            />
+          ) : (
             <CreateUpdateIssueModal
               isOpen={isOpen}
               handleClose={() => setIsOpen(false)}
               currentStore={currentStore}
               prePopulateData={issuePayload}
             />
+          )}
 
           {renderExistingIssueModal && (
             <ExistingIssuesListModal