github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' of github.com:makeplane/plane into feat/workspace_views

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2023-09-22 15:27:33 +05:30
commit 8c294e8d5d
35 changed files with 1260 additions and 537 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
apiserver/plane/api/views/cycle.py
View File

@ -102,48 +102,84 @@ class CycleViewSet(BaseViewSet):
.select_related("workspace")
.select_related("owned_by")
.annotate(is_favorite=Exists(subquery))
.annotate(total_issues=Count("issue_cycle"))
.annotate(
total_issues=Count(
"issue_cycle",
filter=Q(
issue_cycle__issue__archived_at__isnull=True,
issue_cycle__issue__is_draft=False,
),
)
)
.annotate(
completed_issues=Count(
"issue_cycle__issue__state__group",
filter=Q(issue_cycle__issue__state__group="completed"),
filter=Q(
issue_cycle__issue__state__group="completed",
issue_cycle__issue__archived_at__isnull=True,
issue_cycle__issue__is_draft=False,
),
)
)
.annotate(
cancelled_issues=Count(
"issue_cycle__issue__state__group",
filter=Q(issue_cycle__issue__state__group="cancelled"),
filter=Q(
issue_cycle__issue__state__group="cancelled",
issue_cycle__issue__archived_at__isnull=True,
issue_cycle__issue__is_draft=False,
),
)
)
.annotate(
started_issues=Count(
"issue_cycle__issue__state__group",
filter=Q(issue_cycle__issue__state__group="started"),
filter=Q(
issue_cycle__issue__state__group="started",
issue_cycle__issue__archived_at__isnull=True,
issue_cycle__issue__is_draft=False,
),
)
)
.annotate(
unstarted_issues=Count(
"issue_cycle__issue__state__group",
filter=Q(issue_cycle__issue__state__group="unstarted"),
filter=Q(
issue_cycle__issue__state__group="unstarted",
issue_cycle__issue__archived_at__isnull=True,
issue_cycle__issue__is_draft=False,
),
)
)
.annotate(
backlog_issues=Count(
"issue_cycle__issue__state__group",
filter=Q(issue_cycle__issue__state__group="backlog"),
filter=Q(
issue_cycle__issue__state__group="backlog",
issue_cycle__issue__archived_at__isnull=True,
issue_cycle__issue__is_draft=False,
),
)
)
.annotate(total_estimates=Sum("issue_cycle__issue__estimate_point"))
.annotate(
completed_estimates=Sum(
"issue_cycle__issue__estimate_point",
filter=Q(issue_cycle__issue__state__group="completed"),
filter=Q(
issue_cycle__issue__state__group="completed",
issue_cycle__issue__archived_at__isnull=True,
issue_cycle__issue__is_draft=False,
),
)
)
.annotate(
started_estimates=Sum(
"issue_cycle__issue__estimate_point",
filter=Q(issue_cycle__issue__state__group="started"),
filter=Q(
issue_cycle__issue__state__group="started",
issue_cycle__issue__archived_at__isnull=True,
issue_cycle__issue__is_draft=False,
),
)
)
.prefetch_related(
@ -196,17 +232,30 @@ class CycleViewSet(BaseViewSet):
.annotate(assignee_id=F("assignees__id"))
.annotate(avatar=F("assignees__avatar"))
.values("display_name", "assignee_id", "avatar")
.annotate(total_issues=Count("assignee_id"))
.annotate(
total_issues=Count(
"assignee_id",
filter=Q(archived_at__isnull=True, is_draft=False),
),
)
.annotate(
completed_issues=Count(
"assignee_id",
filter=Q(completed_at__isnull=False),
filter=Q(
completed_at__isnull=False,
archived_at__isnull=True,
is_draft=False,
),
)
)
.annotate(
pending_issues=Count(
"assignee_id",
filter=Q(completed_at__isnull=True),
filter=Q(
completed_at__isnull=True,
archived_at__isnull=True,
is_draft=False,
),
)
)
.order_by("display_name")
@ -222,17 +271,30 @@ class CycleViewSet(BaseViewSet):
.annotate(color=F("labels__color"))
.annotate(label_id=F("labels__id"))
.values("label_name", "color", "label_id")
.annotate(total_issues=Count("label_id"))
.annotate(
total_issues=Count(
"label_id",
filter=Q(archived_at__isnull=True, is_draft=False),
)
)
.annotate(
completed_issues=Count(
"label_id",
filter=Q(completed_at__isnull=False),
filter=Q(
completed_at__isnull=False,
archived_at__isnull=True,
is_draft=False,
),
)
)
.annotate(
pending_issues=Count(
"label_id",
filter=Q(completed_at__isnull=True),
filter=Q(
completed_at__isnull=True,
archived_at__isnull=True,
is_draft=False,
),
)
)
.order_by("label_name")
@ -385,17 +447,30 @@ class CycleViewSet(BaseViewSet):
.values(
"first_name", "last_name", "assignee_id", "avatar", "display_name"
)
.annotate(total_issues=Count("assignee_id"))
.annotate(
total_issues=Count(
"assignee_id",
filter=Q(archived_at__isnull=True, is_draft=False),
),
)
.annotate(
completed_issues=Count(
"assignee_id",
filter=Q(completed_at__isnull=False),
filter=Q(
completed_at__isnull=False,
archived_at__isnull=True,
is_draft=False,
),
)
)
.annotate(
pending_issues=Count(
"assignee_id",
filter=Q(completed_at__isnull=True),
filter=Q(
completed_at__isnull=True,
archived_at__isnull=True,
is_draft=False,
),
)
)
.order_by("first_name", "last_name")
@ -412,17 +487,30 @@ class CycleViewSet(BaseViewSet):
.annotate(color=F("labels__color"))
.annotate(label_id=F("labels__id"))
.values("label_name", "color", "label_id")
.annotate(total_issues=Count("label_id"))
.annotate(
total_issues=Count(
"label_id",
filter=Q(archived_at__isnull=True, is_draft=False),
),
)
.annotate(
completed_issues=Count(
"label_id",
filter=Q(completed_at__isnull=False),
filter=Q(
completed_at__isnull=False,
archived_at__isnull=True,
is_draft=False,
),
)
)
.annotate(
pending_issues=Count(
"label_id",
filter=Q(completed_at__isnull=True),
filter=Q(
completed_at__isnull=True,
archived_at__isnull=True,
is_draft=False,
),
)
)
.order_by("label_name")

2
apiserver/plane/api/views/importer.py
View File

@ -384,7 +384,7 @@ class BulkImportIssuesEndpoint(BaseAPIView):
sort_order=largest_sort_order,
start_date=issue_data.get("start_date", None),
target_date=issue_data.get("target_date", None),
priority=issue_data.get("priority", None),
priority=issue_data.get("priority", "none"),
created_by=request.user,
)
)

8
apiserver/plane/api/views/inbox.py
View File

@ -173,12 +173,12 @@ class InboxIssueViewSet(BaseViewSet):
)
# Check for valid priority
if not request.data.get("issue", {}).get("priority", None) in [
if not request.data.get("issue", {}).get("priority", "none") in [
"low",
"medium",
"high",
"urgent",
None,
"none",
]:
return Response(
{"error": "Invalid priority"}, status=status.HTTP_400_BAD_REQUEST
@ -480,12 +480,12 @@ class InboxIssuePublicViewSet(BaseViewSet):
)
# Check for valid priority
if not request.data.get("issue", {}).get("priority", None) in [
if not request.data.get("issue", {}).get("priority", "none") in [
"low",
"medium",
"high",
"urgent",
None,
"none",
]:
return Response(
{"error": "Invalid priority"}, status=status.HTTP_400_BAD_REQUEST

90
apiserver/plane/api/views/module.py
View File

@ -40,6 +40,7 @@ from plane.utils.grouper import group_results
from plane.utils.issue_filters import issue_filters
from plane.utils.analytics_plot import burndown_plot
class ModuleViewSet(BaseViewSet):
model = Module
permission_classes = [
@ -78,35 +79,63 @@ class ModuleViewSet(BaseViewSet):
queryset=ModuleLink.objects.select_related("module", "created_by"),
)
)
.annotate(total_issues=Count("issue_module"))
.annotate(
total_issues=Count(
"issue_module",
filter=Q(
issue_module__issue__archived_at__isnull=True,
issue_module__issue__is_draft=False,
),
),
)
.annotate(
completed_issues=Count(
"issue_module__issue__state__group",
filter=Q(issue_module__issue__state__group="completed"),
filter=Q(
issue_module__issue__state__group="completed",
issue_module__issue__archived_at__isnull=True,
issue_module__issue__is_draft=False,
),
)
)
.annotate(
cancelled_issues=Count(
"issue_module__issue__state__group",
filter=Q(issue_module__issue__state__group="cancelled"),
filter=Q(
issue_module__issue__state__group="cancelled",
issue_module__issue__archived_at__isnull=True,
issue_module__issue__is_draft=False,
),
)
)
.annotate(
started_issues=Count(
"issue_module__issue__state__group",
filter=Q(issue_module__issue__state__group="started"),
filter=Q(
issue_module__issue__state__group="started",
issue_module__issue__archived_at__isnull=True,
issue_module__issue__is_draft=False,
),
)
)
.annotate(
unstarted_issues=Count(
"issue_module__issue__state__group",
filter=Q(issue_module__issue__state__group="unstarted"),
filter=Q(
issue_module__issue__state__group="unstarted",
issue_module__issue__archived_at__isnull=True,
issue_module__issue__is_draft=False,
),
)
)
.annotate(
backlog_issues=Count(
"issue_module__issue__state__group",
filter=Q(issue_module__issue__state__group="backlog"),
filter=Q(
issue_module__issue__state__group="backlog",
issue_module__issue__archived_at__isnull=True,
issue_module__issue__is_draft=False,
),
)
)
.order_by(order_by, "name")
@ -179,18 +208,36 @@ class ModuleViewSet(BaseViewSet):
.annotate(assignee_id=F("assignees__id"))
.annotate(display_name=F("assignees__display_name"))
.annotate(avatar=F("assignees__avatar"))
.values("first_name", "last_name", "assignee_id", "avatar", "display_name")
.annotate(total_issues=Count("assignee_id"))
.values(
"first_name", "last_name", "assignee_id", "avatar", "display_name"
)
.annotate(
total_issues=Count(
"assignee_id",
filter=Q(
archived_at__isnull=True,
is_draft=False,
),
)
)
.annotate(
completed_issues=Count(
"assignee_id",
filter=Q(completed_at__isnull=False),
filter=Q(
completed_at__isnull=False,
archived_at__isnull=True,
is_draft=False,
),
)
)
.annotate(
pending_issues=Count(
"assignee_id",
filter=Q(completed_at__isnull=True),
filter=Q(
completed_at__isnull=True,
archived_at__isnull=True,
is_draft=False,
),
)
)
.order_by("first_name", "last_name")
@ -206,17 +253,33 @@ class ModuleViewSet(BaseViewSet):
.annotate(color=F("labels__color"))
.annotate(label_id=F("labels__id"))
.values("label_name", "color", "label_id")
.annotate(total_issues=Count("label_id"))
.annotate(
total_issues=Count(
"label_id",
filter=Q(
archived_at__isnull=True,
is_draft=False,
),
),
)
.annotate(
completed_issues=Count(
"label_id",
filter=Q(completed_at__isnull=False),
filter=Q(
completed_at__isnull=False,
archived_at__isnull=True,
is_draft=False,
),
)
)
.annotate(
pending_issues=Count(
"label_id",
filter=Q(completed_at__isnull=True),
filter=Q(
completed_at__isnull=True,
archived_at__isnull=True,
is_draft=False,
),
)
)
.order_by("label_name")
@ -494,7 +557,6 @@ class ModuleLinkViewSet(BaseViewSet):
class ModuleFavoriteViewSet(BaseViewSet):
serializer_class = ModuleFavoriteSerializer
model = ModuleFavorite

21
apiserver/plane/api/views/workspace.py
View File

@ -1239,13 +1239,21 @@ class WorkspaceUserProfileEndpoint(BaseAPIView):
.annotate(
created_issues=Count(
"project_issue",
filter=Q(project_issue__created_by_id=user_id),
filter=Q(
project_issue__created_by_id=user_id,
project_issue__archived_at__isnull=True,
project_issue__is_draft=False,
),
)
)
.annotate(
assigned_issues=Count(
"project_issue",
filter=Q(project_issue__assignees__in=[user_id]),
filter=Q(
project_issue__assignees__in=[user_id],
project_issue__archived_at__isnull=True,
project_issue__is_draft=False,
),
)
)
.annotate(
@ -1254,6 +1262,8 @@ class WorkspaceUserProfileEndpoint(BaseAPIView):
filter=Q(
project_issue__completed_at__isnull=False,
project_issue__assignees__in=[user_id],
project_issue__archived_at__isnull=True,
project_issue__is_draft=False,
),
)
)
@ -1267,6 +1277,8 @@ class WorkspaceUserProfileEndpoint(BaseAPIView):
"started",
],
project_issue__assignees__in=[user_id],
project_issue__archived_at__isnull=True,
project_issue__is_draft=False,
),
)
)
@ -1317,6 +1329,11 @@ class WorkspaceUserProfileIssuesEndpoint(BaseAPIView):
def get(self, request, slug, user_id):
try:
filters = issue_filters(request.query_params, "GET")
# Custom ordering for priority and state
priority_order = ["urgent", "high", "medium", "low", "none"]
state_order = ["backlog", "unstarted", "started", "completed", "cancelled"]
order_by_param = request.GET.get("order_by", "-created_at")
issue_queryset = (
Issue.issue_objects.filter(

2
apiserver/plane/bgtasks/exporter_expired_task.py
View File

@ -32,7 +32,7 @@ def delete_old_s3_link():
else:
s3 = boto3.client(
"s3",
region_name="ap-south-1",
region_name=settings.AWS_REGION,
aws_access_key_id=settings.AWS_ACCESS_KEY_ID,
aws_secret_access_key=settings.AWS_SECRET_ACCESS_KEY,
config=Config(signature_version="s3v4"),

42
apiserver/plane/bgtasks/issue_activites_task.py
View File

@ -121,36 +121,20 @@ def track_priority(
epoch
):
if current_instance.get("priority") != requested_data.get("priority"):
if requested_data.get("priority") == None:
issue_activities.append(
IssueActivity(
issue_id=issue_id,
actor=actor,
verb="updated",
old_value=current_instance.get("priority"),
new_value=None,
field="priority",
project=project,
workspace=project.workspace,
comment=f"updated the priority to None",
epoch=epoch,
)
)
else:
issue_activities.append(
IssueActivity(
issue_id=issue_id,
actor=actor,
verb="updated",
old_value=current_instance.get("priority"),
new_value=requested_data.get("priority"),
field="priority",
project=project,
workspace=project.workspace,
comment=f"updated the priority to {requested_data.get('priority')}",
epoch=epoch,
)
issue_activities.append(
IssueActivity(
issue_id=issue_id,
actor=actor,
verb="updated",
old_value=current_instance.get("priority"),
new_value=requested_data.get("priority"),
field="priority",
project=project,
workspace=project.workspace,
comment=f"updated the priority to {requested_data.get('priority')}",
epoch=epoch,
)
)
# Track chnages in state of the issue

27
apiserver/plane/db/migrations/0047_auto_20230921_0758.py Normal file
View File

@ -0,0 +1,27 @@
# Generated by Django 4.2.3 on 2023-09-21 07:58
from django.db import migrations
def update_priority_history(apps, schema_editor):
IssueActivity = apps.get_model("db", "IssueActivity")
updated_issue_activity = []
for obj in IssueActivity.objects.all():
if obj.field == "priority":
obj.new_value = obj.new_value or "none"
obj.old_value = obj.old_value or "none"
updated_issue_activity.append(obj)
IssueActivity.objects.bulk_update(
updated_issue_activity, ["new_value", "old_value"], batch_size=100
)
class Migration(migrations.Migration):
dependencies = [
("db", "0046_auto_20230919_1421"),
]
operations = [
migrations.RunPython(update_priority_history),
]

2
apiserver/plane/db/models/project.py
View File

@ -26,7 +26,7 @@ ROLE_CHOICES = (
def get_default_props():
return {
"filters": {
"priority": None,
"priority": "none",
"state": None,
"state_group": None,
"assignees": None,

2
apiserver/plane/db/models/workspace.py
View File

@ -17,7 +17,7 @@ ROLE_CHOICES = (
def get_default_props():
return {
"filters": {
"priority": None,
"priority": "none",
"state": None,
"state_group": None,
"assignees": None,

4
apiserver/plane/utils/analytics_plot.py
View File

@ -74,10 +74,10 @@ def build_graph_plot(queryset, x_axis, y_axis, segment=None):
sorted_data = grouped_data
if temp_axis == "priority":
order = ["low", "medium", "high", "urgent", "None"]
order = ["low", "medium", "high", "urgent", "none"]
sorted_data = {key: grouped_data[key] for key in order if key in grouped_data}
else:
sorted_data = dict(sorted(grouped_data.items(), key=lambda x: (x[0] == "None", x[0])))
sorted_data = dict(sorted(grouped_data.items(), key=lambda x: (x[0] == "none", x[0])))
return sorted_data

3
apiserver/plane/utils/issue_filters.py
View File

@ -40,9 +40,6 @@ def filter_priority(params, filter, method):
priorities = params.get("priority").split(",")
if len(priorities) and "" not in priorities:
filter["priority__in"] = priorities
else:
if params.get("priority", None) and len(params.get("priority")):
filter["priority__in"] = params.get("priority")
return filter

107
docker-compose-hub.yml
View File

@ -1,113 +1,61 @@
version: "3.8"
x-api-and-worker-env:
&api-and-worker-env
DEBUG: ${DEBUG}
SENTRY_DSN: ${SENTRY_DSN}
DJANGO_SETTINGS_MODULE: plane.settings.selfhosted
DATABASE_URL: postgres://${PGUSER}:${PGPASSWORD}@${PGHOST}:5432/${PGDATABASE}
REDIS_URL: redis://plane-redis:6379/
EMAIL_HOST: ${EMAIL_HOST}
EMAIL_HOST_USER: ${EMAIL_HOST_USER}
EMAIL_HOST_PASSWORD: ${EMAIL_HOST_PASSWORD}
EMAIL_PORT: ${EMAIL_PORT}
EMAIL_FROM: ${EMAIL_FROM}
EMAIL_USE_TLS: ${EMAIL_USE_TLS}
EMAIL_USE_SSL: ${EMAIL_USE_SSL}
AWS_REGION: ${AWS_REGION}
AWS_ACCESS_KEY_ID: ${AWS_ACCESS_KEY_ID}
AWS_SECRET_ACCESS_KEY: ${AWS_SECRET_ACCESS_KEY}
AWS_S3_BUCKET_NAME: ${AWS_S3_BUCKET_NAME}
AWS_S3_ENDPOINT_URL: ${AWS_S3_ENDPOINT_URL}
FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT}
WEB_URL: ${WEB_URL}
GITHUB_CLIENT_SECRET: ${GITHUB_CLIENT_SECRET}
DISABLE_COLLECTSTATIC: 1
DOCKERIZED: 1
OPENAI_API_BASE: ${OPENAI_API_BASE}
OPENAI_API_KEY: ${OPENAI_API_KEY}
GPT_ENGINE: ${GPT_ENGINE}
SECRET_KEY: ${SECRET_KEY}
DEFAULT_EMAIL: ${DEFAULT_EMAIL}
DEFAULT_PASSWORD: ${DEFAULT_PASSWORD}
USE_MINIO: ${USE_MINIO}
ENABLE_SIGNUP: ${ENABLE_SIGNUP}
services:
plane-web:
container_name: planefrontend
web:
container_name: web
image: makeplane/plane-frontend:latest
restart: always
command: /usr/local/bin/start.sh web/server.js web
env_file:
- .env
environment:
NEXT_PUBLIC_API_BASE_URL: ${NEXT_PUBLIC_API_BASE_URL}
NEXT_PUBLIC_DEPLOY_URL: ${NEXT_PUBLIC_DEPLOY_URL}
NEXT_PUBLIC_GOOGLE_CLIENTID: "0"
NEXT_PUBLIC_GITHUB_APP_NAME: "0"
NEXT_PUBLIC_GITHUB_ID: "0"
NEXT_PUBLIC_SENTRY_DSN: "0"
NEXT_PUBLIC_ENABLE_OAUTH: "0"
NEXT_PUBLIC_ENABLE_SENTRY: "0"
NEXT_PUBLIC_ENABLE_SESSION_RECORDER: "0"
NEXT_PUBLIC_TRACK_EVENTS: "0"
- ./web/.env
depends_on:
- plane-api
- plane-worker
- api
- worker
plane-deploy:
container_name: planedeploy
image: makeplane/plane-deploy:latest
space:
container_name: space
image: makeplane/plane-space:latest
restart: always
command: /usr/local/bin/start.sh space/server.js space
env_file:
- .env
environment:
NEXT_PUBLIC_API_BASE_URL: ${NEXT_PUBLIC_API_BASE_URL}
- ./space/.env
depends_on:
- plane-api
- plane-worker
- plane-web
- api
- worker
- web
plane-api:
container_name: planebackend
api:
container_name: api
image: makeplane/plane-backend:latest
restart: always
command: ./bin/takeoff
env_file:
- .env
environment:
<<: *api-and-worker-env
- ./apiserver/.env
depends_on:
- plane-db
- plane-redis
plane-worker:
container_name: planebgworker
worker:
container_name: bgworker
image: makeplane/plane-backend:latest
restart: always
command: ./bin/worker
env_file:
- .env
environment:
<<: *api-and-worker-env
- ./apiserver/.env
depends_on:
- plane-api
- api
- plane-db
- plane-redis
plane-beat-worker:
container_name: planebeatworker
beat-worker:
container_name: beatworker
image: makeplane/plane-backend:latest
restart: always
command: ./bin/beat
env_file:
- .env
environment:
<<: *api-and-worker-env
- ./apiserver/.env
depends_on:
- plane-api
- api
- plane-db
- plane-redis
@ -157,8 +105,8 @@ services:
- plane-minio
# Comment this if you already have a reverse proxy running
plane-proxy:
container_name: planeproxy
proxy:
container_name: proxy
image: makeplane/plane-proxy:latest
ports:
- ${NGINX_PORT}:80
@ -168,8 +116,9 @@ services:
FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT:-5242880}
BUCKET_NAME: ${AWS_S3_BUCKET_NAME:-uploads}
depends_on:
- plane-web
- plane-api
- web
- api
- space
volumes:
pgdata:

43
docker-compose.yml
View File

@ -1,8 +1,8 @@
version: "3.8"
services:
plane-web:
container_name: planefrontend
web:
container_name: web
build:
context: .
dockerfile: ./web/Dockerfile.web
@ -11,11 +11,11 @@ services:
restart: always
command: /usr/local/bin/start.sh web/server.js web
depends_on:
- plane-api
- plane-worker
- api
- worker
plane-deploy:
container_name: planedeploy
space:
container_name: space
build:
context: .
dockerfile: ./space/Dockerfile.space
@ -24,12 +24,12 @@ services:
restart: always
command: /usr/local/bin/start.sh space/server.js space
depends_on:
- plane-api
- plane-worker
- plane-web
- api
- worker
- web
plane-api:
container_name: planebackend
api:
container_name: api
build:
context: ./apiserver
dockerfile: Dockerfile.api
@ -43,8 +43,8 @@ services:
- plane-db
- plane-redis
plane-worker:
container_name: planebgworker
worker:
container_name: bgworker
build:
context: ./apiserver
dockerfile: Dockerfile.api
@ -55,12 +55,12 @@ services:
env_file:
- ./apiserver/.env
depends_on:
- plane-api
- api
- plane-db
- plane-redis
plane-beat-worker:
container_name: planebeatworker
beat-worker:
container_name: beatworker
build:
context: ./apiserver
dockerfile: Dockerfile.api
@ -71,7 +71,7 @@ services:
env_file:
- ./apiserver/.env
depends_on:
- plane-api
- api
- plane-db
- plane-redis
@ -118,8 +118,8 @@ services:
- plane-minio
# Comment this if you already have a reverse proxy running
plane-proxy:
container_name: planeproxy
proxy:
container_name: proxy
build:
context: ./nginx
dockerfile: Dockerfile
@ -130,8 +130,9 @@ services:
FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT:-5242880}
BUCKET_NAME: ${AWS_S3_BUCKET_NAME:-uploads}
depends_on:
- plane-web
- plane-api
- web
- api
- space
volumes:
pgdata:

13
nginx/nginx.conf.template
View File

@ -1,25 +1,26 @@
events { }
events {
}
http {
sendfile on;
server {
listen 80;
root /www/data/;
listen 80;
root /www/data/;
access_log /var/log/nginx/access.log;
client_max_body_size ${FILE_SIZE_LIMIT};
location / {
proxy_pass http://planefrontend:3000/;
proxy_pass http://web:3000/;
}
location /api/ {
proxy_pass http://planebackend:8000/api/;
proxy_pass http://api:8000/api/;
}
location /spaces/ {
proxy_pass http://planedeploy:3000/spaces/;
proxy_pass http://space:3000/spaces/;
}
location /${BUCKET_NAME}/ {

2
space/.env.example
View File

@ -1,4 +1,2 @@
# Google Client ID for Google OAuth
NEXT_PUBLIC_GOOGLE_CLIENTID=""
# Flag to toggle OAuth
NEXT_PUBLIC_ENABLE_OAUTH=0

22
web/.env.example
View File

@ -1,24 +1,4 @@
# Extra image domains that need to be added for Next Image
NEXT_PUBLIC_EXTRA_IMAGE_DOMAINS=
# Google Client ID for Google OAuth
NEXT_PUBLIC_GOOGLE_CLIENTID=""
# GitHub App ID for GitHub OAuth
NEXT_PUBLIC_GITHUB_ID=""
# GitHub App Name for GitHub Integration
NEXT_PUBLIC_GITHUB_APP_NAME=""
# Sentry DSN for error monitoring
NEXT_PUBLIC_SENTRY_DSN=""
# Enable/Disable OAUTH - default 0 for selfhosted instance
NEXT_PUBLIC_ENABLE_OAUTH=0
# Enable/Disable Sentry
NEXT_PUBLIC_ENABLE_SENTRY=0
# Enable/Disable session recording
NEXT_PUBLIC_ENABLE_SESSION_RECORDER=0
# Enable/Disable event tracking
NEXT_PUBLIC_TRACK_EVENTS=0
# Slack Client ID for Slack Integration
NEXT_PUBLIC_SLACK_CLIENT_ID=""
# For Telemetry, set it to "app.plane.so"
NEXT_PUBLIC_PLAUSIBLE_DOMAIN=""
# Public boards deploy URL
NEXT_PUBLIC_DEPLOY_URL="http://localhost:3000/spaces"
NEXT_PUBLIC_DEPLOY_URL="http://localhost/spaces"

1
web/components/analytics/custom-analytics/graph/index.tsx
View File

@ -9,7 +9,6 @@ import { findStringWithMostCharacters } from "helpers/array.helper";
import { generateBarColor } from "helpers/analytics.helper";
// types
import { IAnalyticsParams, IAnalyticsResponse } from "types";
// constants
type Props = {
analytics: IAnalyticsResponse;

44
web/components/core/activity.tsx
View File

@ -1,5 +1,9 @@
import { useRouter } from "next/router";
import useSWR from "swr";
// services
import issuesService from "services/issues.service";
// icons
import { Icon, Tooltip } from "components/ui";
import { CopyPlus } from "lucide-react";
@ -10,6 +14,8 @@ import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
import { capitalizeFirstLetter } from "helpers/string.helper";
// types
import { IIssueActivity } from "types";
// fetch-keys
import { WORKSPACE_LABELS } from "constants/fetch-keys";
const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
const router = useRouter();
@ -52,6 +58,26 @@ const UserLink = ({ activity }: { activity: IIssueActivity }) => {
);
};
const LabelPill = ({ labelId }: { labelId: string }) => {
const router = useRouter();
const { workspaceSlug } = router.query;
const { data: labels } = useSWR(
workspaceSlug ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
workspaceSlug ? () => issuesService.getWorkspaceLabels(workspaceSlug.toString()) : null
);
return (
<span
className="h-1.5 w-1.5 rounded-full"
style={{
backgroundColor: labels?.find((l) => l.id === labelId)?.color ?? "#000000",
}}
aria-hidden="true"
/>
);
};
const activityDetails: {
[key: string]: {
message: (
@ -325,14 +351,8 @@ const activityDetails: {
return (
<>
added a new label{" "}
<span className="inline-flex items-center gap-3 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
<span
className="h-1.5 w-1.5 rounded-full"
style={{
backgroundColor: "#000000",
}}
aria-hidden="true"
/>
<span className="inline-flex items-center gap-2 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
<LabelPill labelId={activity.new_identifier ?? ""} />
<span className="font-medium text-custom-text-100">{activity.new_value}</span>
</span>
{showIssue && (
@ -348,13 +368,7 @@ const activityDetails: {
<>
removed the label{" "}
<span className="inline-flex items-center gap-3 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
<span
className="h-1.5 w-1.5 rounded-full"
style={{
backgroundColor: "#000000",
}}
aria-hidden="true"
/>
<LabelPill labelId={activity.old_identifier ?? ""} />
<span className="font-medium text-custom-text-100">{activity.old_value}</span>
</span>
{showIssue && (

2
web/components/core/views/board-view/all-boards.tsx
View File

@ -76,7 +76,7 @@ export const AllBoards: React.FC<Props> = ({
readOnly={disableUserActions}
/>
{groupedIssues ? (
<div className="horizontal-scroll-enable flex h-full gap-x-4 p-8">
<div className="horizontal-scroll-enable flex h-full gap-x-4 p-8 bg-custom-background-90">
{Object.keys(groupedIssues).map((singleGroup, index) => {
const currentState =
displayFilters?.group_by === "state"

4
web/components/issues/delete-issue-modal.tsx
View File

@ -35,6 +35,7 @@ type Props = {
data: IIssue | null;
user: ICurrentUserResponse | undefined;
onSubmit?: () => Promise<void>;
redirection?: boolean;
};
export const DeleteIssueModal: React.FC<Props> = ({
@ -43,6 +44,7 @@ export const DeleteIssueModal: React.FC<Props> = ({
data,
user,
onSubmit,
redirection = true,
}) => {
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
@ -132,7 +134,7 @@ export const DeleteIssueModal: React.FC<Props> = ({
message: "Issue deleted successfully",
});
if (issueId) router.back();
if (issueId && redirection) router.back();
})
.catch((error) => {
console.log(error);

1
web/components/issues/index.ts
View File

@ -12,7 +12,6 @@ export * from "./main-content";
export * from "./modal";
export * from "./parent-issues-list-modal";
export * from "./sidebar";
export * from "./sub-issues-list";
export * from "./label";
export * from "./issue-reaction";
export * from "./peek-overview";

6
web/components/issues/main-content.tsx
View File

@ -18,9 +18,9 @@ import {
IssueAttachmentUpload,
IssueAttachments,
IssueDescriptionForm,
SubIssuesList,
IssueReaction,
} from "components/issues";
import { SubIssuesRoot } from "./sub-issues";
// ui
import { CustomMenu } from "components/ui";
// icons
@ -43,7 +43,7 @@ export const IssueMainContent: React.FC<Props> = ({
uneditable = false,
}) => {
const router = useRouter();
const { workspaceSlug, projectId, issueId, archivedIssueId } = router.query;
const { workspaceSlug, projectId, issueId } = router.query;
const { setToastAlert } = useToast();
@ -206,7 +206,7 @@ export const IssueMainContent: React.FC<Props> = ({
<IssueReaction workspaceSlug={workspaceSlug} issueId={issueId} projectId={projectId} />
<div className="mt-2 space-y-2">
<SubIssuesList parentIssue={issueDetails} user={user} disabled={uneditable} />
<SubIssuesRoot parentIssue={issueDetails} user={user} />
</div>
</div>
<div className="flex flex-col gap-3 py-3">

251
web/components/issues/sub-issues-list.tsx
View File

@ -1,251 +0,0 @@
import { FC, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import useSWR, { mutate } from "swr";
// headless ui
import { Disclosure, Transition } from "@headlessui/react";
// services
import issuesService from "services/issues.service";
// contexts
import { useProjectMyMembership } from "contexts/project-member.context";
// components
import { ExistingIssuesListModal } from "components/core";
import { CreateUpdateIssueModal } from "components/issues";
// ui
import { CustomMenu } from "components/ui";
// icons
import { ChevronRightIcon, PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
// types
import { ICurrentUserResponse, IIssue, ISearchIssueResponse, ISubIssueResponse } from "types";
// fetch-keys
import { SUB_ISSUES } from "constants/fetch-keys";
type Props = {
parentIssue: IIssue;
user: ICurrentUserResponse | undefined;
disabled?: boolean;
};
export const SubIssuesList: FC<Props> = ({ parentIssue, user, disabled = false }) => {
// states
const [createIssueModal, setCreateIssueModal] = useState(false);
const [subIssuesListModal, setSubIssuesListModal] = useState(false);
const [preloadedData, setPreloadedData] = useState<Partial<IIssue> | null>(null);
const router = useRouter();
const { workspaceSlug } = router.query;
const { memberRole } = useProjectMyMembership();
const { data: subIssuesResponse } = useSWR(
workspaceSlug && parentIssue ? SUB_ISSUES(parentIssue.id) : null,
workspaceSlug && parentIssue
? () => issuesService.subIssues(workspaceSlug as string, parentIssue.project, parentIssue.id)
: null
);
const addAsSubIssue = async (data: ISearchIssueResponse[]) => {
if (!workspaceSlug || !parentIssue) return;
const payload = {
sub_issue_ids: data.map((i) => i.id),
};
await issuesService
.addSubIssues(workspaceSlug as string, parentIssue.project, parentIssue.id, payload)
.finally(() => mutate(SUB_ISSUES(parentIssue.id)));
};
const handleSubIssueRemove = (issue: IIssue) => {
if (!workspaceSlug || !parentIssue) return;
mutate<ISubIssueResponse>(
SUB_ISSUES(parentIssue.id),
(prevData) => {
if (!prevData) return prevData;
const stateDistribution = { ...prevData.state_distribution };
const issueGroup = issue.state_detail.group;
stateDistribution[issueGroup] = stateDistribution[issueGroup] - 1;
return {
state_distribution: stateDistribution,
sub_issues: prevData.sub_issues.filter((i) => i.id !== issue.id),
};
},
false
);
issuesService
.patchIssue(workspaceSlug.toString(), issue.project, issue.id, { parent: null }, user)
.finally(() => mutate(SUB_ISSUES(parentIssue.id)));
};
const handleCreateIssueModal = () => {
setCreateIssueModal(true);
setPreloadedData({
parent: parentIssue.id,
});
};
const completedSubIssue = subIssuesResponse?.state_distribution.completed ?? 0;
const cancelledSubIssue = subIssuesResponse?.state_distribution.cancelled ?? 0;
const totalCompletedSubIssues = completedSubIssue + cancelledSubIssue;
const totalSubIssues = subIssuesResponse ? subIssuesResponse.sub_issues.length : 0;
const completionPercentage = (totalCompletedSubIssues / totalSubIssues) * 100;
const isNotAllowed = memberRole.isGuest || memberRole.isViewer || disabled;
return (
<>
<CreateUpdateIssueModal
isOpen={createIssueModal}
prePopulateData={{ ...preloadedData }}
handleClose={() => setCreateIssueModal(false)}
/>
<ExistingIssuesListModal
isOpen={subIssuesListModal}
handleClose={() => setSubIssuesListModal(false)}
searchParams={{ sub_issue: true, issue_id: parentIssue?.id }}
handleOnSubmit={addAsSubIssue}
workspaceLevelToggle
/>
{subIssuesResponse && subIssuesResponse.sub_issues.length > 0 ? (
<Disclosure defaultOpen={true}>
{({ open }) => (
<>
<div className="flex items-center justify-between">
<div className="flex items-center justify-start gap-3 text-custom-text-200">
<Disclosure.Button className="flex items-center gap-1 rounded px-2 py-1 text-xs text-custom-text-100 hover:bg-custom-background-80">
<ChevronRightIcon className={`h-3 w-3 ${open ? "rotate-90" : ""}`} />
Sub-issues{" "}
<span className="ml-1 text-custom-text-200">
{subIssuesResponse.sub_issues.length}
</span>
</Disclosure.Button>
<div className="flex w-60 items-center gap-2">
<div className="bar relative h-1.5 w-full rounded bg-custom-background-80">
<div
className="absolute top-0 left-0 h-1.5 rounded bg-green-500 duration-300"
style={{
width: `${
isNaN(completionPercentage)
? 0
: completionPercentage > 100
? 100
: completionPercentage.toFixed(0)
}%`,
}}
/>
</div>
<span className="whitespace-nowrap text-xs">
{isNaN(completionPercentage)
? 0
: completionPercentage > 100
? 100
: completionPercentage.toFixed(0)}
% Done
</span>
</div>
</div>
{open && !isNotAllowed ? (
<div className="flex items-center">
<button
type="button"
className="flex items-center gap-1 rounded px-2 py-1 text-xs text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-80"
onClick={handleCreateIssueModal}
>
<PlusIcon className="h-3 w-3" />
Create new
</button>
<CustomMenu ellipsis>
<CustomMenu.MenuItem onClick={() => setSubIssuesListModal(true)}>
Add an existing issue
</CustomMenu.MenuItem>
</CustomMenu>
</div>
) : null}
</div>
<Transition
enter="transition duration-100 ease-out"
enterFrom="transform scale-95 opacity-0"
enterTo="transform scale-100 opacity-100"
leave="transition duration-75 ease-out"
leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0"
>
<Disclosure.Panel className="mt-3 flex flex-col gap-y-1">
{subIssuesResponse.sub_issues.map((issue) => (
<Link
key={issue.id}
href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}
>
<a className="group flex items-center justify-between gap-2 rounded p-2 hover:bg-custom-background-90">
<div className="flex items-center gap-2 rounded text-xs">
<span
className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
style={{
backgroundColor: issue.state_detail.color,
}}
/>
<span className="flex-shrink-0 text-custom-text-200">
{issue.project_detail.identifier}-{issue.sequence_id}
</span>
<span className="max-w-sm break-words font-medium">{issue.name}</span>
</div>
{!isNotAllowed && (
<button
type="button"
className="cursor-pointer opacity-0 group-hover:opacity-100"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
handleSubIssueRemove(issue);
}}
>
<XMarkIcon className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" />
</button>
)}
</a>
</Link>
))}
</Disclosure.Panel>
</Transition>
</>
)}
</Disclosure>
) : (
!isNotAllowed && (
<CustomMenu
label={
<>
<PlusIcon className="h-3 w-3" />
Add sub-issue
</>
}
buttonClassName="whitespace-nowrap"
position="left"
noBorder
noChevron
>
<CustomMenu.MenuItem onClick={handleCreateIssueModal}>Create new</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={() => setSubIssuesListModal(true)}>
Add an existing issue
</CustomMenu.MenuItem>
</CustomMenu>
)
)}
</>
);
};

1
web/components/issues/sub-issues/index.ts Normal file
View File

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

188
web/components/issues/sub-issues/issue.tsx Normal file
View File

@ -0,0 +1,188 @@
import React from "react";
// next imports
import Link from "next/link";
// lucide icons
import {
ChevronDown,
ChevronRight,
X,
Pencil,
Trash,
Link as LinkIcon,
Loader,
} from "lucide-react";
// components
import { SubIssuesRootList } from "./issues-list";
import { IssueProperty } from "./properties";
// ui
import { Tooltip, CustomMenu } from "components/ui";
// types
import { ICurrentUserResponse, IIssue } from "types";
import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root";
export interface ISubIssues {
workspaceSlug: string;
projectId: string;
parentIssue: IIssue;
issue: any;
spacingLeft?: number;
user: ICurrentUserResponse | undefined;
editable: boolean;
removeIssueFromSubIssues: (parentIssueId: string, issue: IIssue) => void;
issuesLoader: ISubIssuesRootLoaders;
handleIssuesLoader: ({ key, issueId }: ISubIssuesRootLoadersHandler) => void;
copyText: (text: string) => void;
handleIssueCrudOperation: (
key: "create" | "existing" | "edit" | "delete",
issueId: string,
issue?: IIssue | null
) => void;
}
export const SubIssues: React.FC<ISubIssues> = ({
workspaceSlug,
projectId,
parentIssue,
issue,
spacingLeft = 0,
user,
editable,
removeIssueFromSubIssues,
issuesLoader,
handleIssuesLoader,
copyText,
handleIssueCrudOperation,
}) => (
<div>
{issue && (
<div
className="relative flex items-center gap-2 py-1 px-2 w-full h-full hover:bg-custom-background-90 group transition-all border-b border-custom-border-100"
style={{ paddingLeft: `${spacingLeft}px` }}
>
<div className="flex-shrink-0 w-[22px] h-[22px]">
{issue?.sub_issues_count > 0 && (
<>
{issuesLoader.sub_issues.includes(issue?.id) ? (
<div className="w-full h-full flex justify-center items-center rounded-sm bg-custom-background-80 transition-all cursor-not-allowed">
<Loader width={14} strokeWidth={2} className="animate-spin" />
</div>
) : (
<div
className="w-full h-full flex justify-center items-center rounded-sm hover:bg-custom-background-80 transition-all cursor-pointer"
onClick={() => handleIssuesLoader({ key: "visibility", issueId: issue?.id })}
>
{issuesLoader && issuesLoader.visibility.includes(issue?.id) ? (
<ChevronDown width={14} strokeWidth={2} />
) : (
<ChevronRight width={14} strokeWidth={2} />
)}
</div>
)}
</>
)}
</div>
<Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
<a className="w-full flex items-center gap-2">
<div
className="flex-shrink-0 w-[6px] h-[6px] rounded-full"
style={{
backgroundColor: issue.state_detail.color,
}}
/>
<div className="flex-shrink-0 text-xs text-custom-text-200">
{issue.project_detail.identifier}-{issue?.sequence_id}
</div>
<Tooltip tooltipHeading="Title" tooltipContent={`${issue?.name}`}>
<div className="line-clamp-1 text-xs text-custom-text-100 pr-2">{issue?.name}</div>
</Tooltip>
</a>
</Link>
<div className="flex-shrink-0 text-sm">
<IssueProperty
workspaceSlug={workspaceSlug}
projectId={projectId}
parentIssue={parentIssue}
issue={issue}
user={user}
editable={editable}
/>
</div>
<div className="flex-shrink-0 text-sm">
<CustomMenu width="auto" ellipsis>
{editable && (
<CustomMenu.MenuItem
onClick={() => handleIssueCrudOperation("edit", parentIssue?.id, issue)}
>
<div className="flex items-center justify-start gap-2">
<Pencil width={14} strokeWidth={2} />
<span>Edit issue</span>
</div>
</CustomMenu.MenuItem>
)}
{editable && (
<CustomMenu.MenuItem
onClick={() => handleIssueCrudOperation("delete", parentIssue?.id, issue)}
>
<div className="flex items-center justify-start gap-2">
<Trash width={14} strokeWidth={2} />
<span>Delete issue</span>
</div>
</CustomMenu.MenuItem>
)}
<CustomMenu.MenuItem
onClick={() =>
copyText(`${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`)
}
>
<div className="flex items-center justify-start gap-2">
<LinkIcon width={14} strokeWidth={2} />
<span>Copy issue link</span>
</div>
</CustomMenu.MenuItem>
</CustomMenu>
</div>
{editable && (
<>
{issuesLoader.delete.includes(issue?.id) ? (
<div className="flex-shrink-0 w-[22px] h-[22px] rounded-sm bg-red-200/10 text-red-500 transition-all cursor-not-allowed overflow-hidden flex justify-center items-center">
<Loader width={14} strokeWidth={2} className="animate-spin" />
</div>
) : (
<div
className="flex-shrink-0 invisible group-hover:visible w-[22px] h-[22px] rounded-sm hover:bg-custom-background-80 transition-all cursor-pointer overflow-hidden flex justify-center items-center"
onClick={() => {
handleIssuesLoader({ key: "delete", issueId: issue?.id });
removeIssueFromSubIssues(parentIssue?.id, issue);
}}
>
<X width={14} strokeWidth={2} />
</div>
)}
</>
)}
</div>
)}
{issuesLoader.visibility.includes(issue?.id) && issue?.sub_issues_count > 0 && (
<SubIssuesRootList
workspaceSlug={workspaceSlug}
projectId={projectId}
parentIssue={issue}
spacingLeft={spacingLeft + 22}
user={user}
editable={editable}
removeIssueFromSubIssues={removeIssueFromSubIssues}
issuesLoader={issuesLoader}
handleIssuesLoader={handleIssuesLoader}
copyText={copyText}
handleIssueCrudOperation={handleIssueCrudOperation}
/>
)}
</div>
);

95
web/components/issues/sub-issues/issues-list.tsx Normal file
View File

@ -0,0 +1,95 @@
import React from "react";
// swr
import useSWR from "swr";
// components
import { SubIssues } from "./issue";
// types
import { ICurrentUserResponse, IIssue } from "types";
import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root";
// services
import issuesService from "services/issues.service";
// fetch keys
import { SUB_ISSUES } from "constants/fetch-keys";
export interface ISubIssuesRootList {
workspaceSlug: string;
projectId: string;
parentIssue: IIssue;
spacingLeft?: number;
user: ICurrentUserResponse | undefined;
editable: boolean;
removeIssueFromSubIssues: (parentIssueId: string, issue: IIssue) => void;
issuesLoader: ISubIssuesRootLoaders;
handleIssuesLoader: ({ key, issueId }: ISubIssuesRootLoadersHandler) => void;
copyText: (text: string) => void;
handleIssueCrudOperation: (
key: "create" | "existing" | "edit" | "delete",
issueId: string,
issue?: IIssue | null
) => void;
}
export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
workspaceSlug,
projectId,
parentIssue,
spacingLeft = 10,
user,
editable,
removeIssueFromSubIssues,
issuesLoader,
handleIssuesLoader,
copyText,
handleIssueCrudOperation,
}) => {
const { data: issues, isLoading } = useSWR(
workspaceSlug && projectId && parentIssue && parentIssue?.id
? SUB_ISSUES(parentIssue?.id)
: null,
workspaceSlug && projectId && parentIssue && parentIssue?.id
? () => issuesService.subIssues(workspaceSlug, projectId, parentIssue.id)
: null
);
React.useEffect(() => {
if (isLoading) {
handleIssuesLoader({ key: "sub_issues", issueId: parentIssue?.id });
} else {
if (issuesLoader.sub_issues.includes(parentIssue?.id)) {
handleIssuesLoader({ key: "sub_issues", issueId: parentIssue?.id });
}
}
}, [isLoading]);
return (
<div className="relative">
{issues &&
issues.sub_issues &&
issues.sub_issues.length > 0 &&
issues.sub_issues.map((issue: IIssue) => (
<SubIssues
key={`${issue?.id}`}
workspaceSlug={workspaceSlug}
projectId={projectId}
parentIssue={parentIssue}
issue={issue}
spacingLeft={spacingLeft}
user={user}
editable={editable}
removeIssueFromSubIssues={removeIssueFromSubIssues}
issuesLoader={issuesLoader}
handleIssuesLoader={handleIssuesLoader}
copyText={copyText}
handleIssueCrudOperation={handleIssueCrudOperation}
/>
))}
<div
className={`absolute top-0 bottom-0 ${
spacingLeft > 10 ? `border-l border-custom-border-100` : ``
}`}
style={{ left: `${spacingLeft - 12}px` }}
/>
</div>
);
};

25
web/components/issues/sub-issues/progressbar.tsx Normal file
View File

@ -0,0 +1,25 @@
export interface IProgressBar {
total: number;
done: number;
}
export const ProgressBar = ({ total = 0, done = 0 }: IProgressBar) => {
const calPercentage = (doneValue: number, totalValue: number): string => {
if (doneValue === 0 || totalValue === 0) return (0).toFixed(0);
return ((100 * doneValue) / totalValue).toFixed(0);
};
return (
<div className="relative flex items-center gap-2">
<div className="w-full">
<div className="w-full rounded-full bg-custom-background-80 overflow-hidden shadow">
<div
className="bg-green-500 h-[6px] rounded-full transition-all"
style={{ width: `${calPercentage(done, total)}%` }}
/>
</div>
</div>
<div className="flex-shrink-0 text-xs font-medium">{calPercentage(done, total)}% Done</div>
</div>
);
};

206
web/components/issues/sub-issues/properties.tsx Normal file
View File

@ -0,0 +1,206 @@
import React from "react";
// swr
import { mutate } from "swr";
// components
import { ViewDueDateSelect, ViewStartDateSelect } from "components/issues";
import { MembersSelect, PrioritySelect } from "components/project";
import { StateSelect } from "components/states";
// hooks
import useIssuesProperties from "hooks/use-issue-properties";
// types
import { ICurrentUserResponse, IIssue, IState } from "types";
// fetch-keys
import { SUB_ISSUES } from "constants/fetch-keys";
// services
import issuesService from "services/issues.service";
import trackEventServices from "services/track-event.service";
export interface IIssueProperty {
workspaceSlug: string;
projectId: string;
parentIssue: IIssue;
issue: IIssue;
user: ICurrentUserResponse | undefined;
editable: boolean;
}
export const IssueProperty: React.FC<IIssueProperty> = ({
workspaceSlug,
projectId,
parentIssue,
issue,
user,
editable,
}) => {
const [properties] = useIssuesProperties(workspaceSlug, projectId);
const handlePriorityChange = (data: any) => {
partialUpdateIssue({ priority: data });
trackEventServices.trackIssuePartialPropertyUpdateEvent(
{
workspaceSlug,
workspaceId: issue.workspace,
projectId: issue.project_detail.id,
projectIdentifier: issue.project_detail.identifier,
projectName: issue.project_detail.name,
issueId: issue.id,
},
"ISSUE_PROPERTY_UPDATE_PRIORITY",
user
);
};
const handleStateChange = (data: string, states: IState[] | undefined) => {
const oldState = states?.find((s) => s.id === issue.state);
const newState = states?.find((s) => s.id === data);
partialUpdateIssue({
state: data,
state_detail: newState,
});
trackEventServices.trackIssuePartialPropertyUpdateEvent(
{
workspaceSlug,
workspaceId: issue.workspace,
projectId: issue.project_detail.id,
projectIdentifier: issue.project_detail.identifier,
projectName: issue.project_detail.name,
issueId: issue.id,
},
"ISSUE_PROPERTY_UPDATE_STATE",
user
);
if (oldState?.group !== "completed" && newState?.group !== "completed") {
trackEventServices.trackIssueMarkedAsDoneEvent(
{
workspaceSlug: issue.workspace_detail.slug,
workspaceId: issue.workspace_detail.id,
projectId: issue.project_detail.id,
projectIdentifier: issue.project_detail.identifier,
projectName: issue.project_detail.name,
issueId: issue.id,
},
user
);
}
};
const handleAssigneeChange = (data: any) => {
let newData = issue.assignees ?? [];
if (newData && newData.length > 0) {
if (newData.includes(data)) newData = newData.splice(newData.indexOf(data), 1);
else newData = [...newData, data];
} else newData = [...newData, data];
partialUpdateIssue({ assignees_list: data, assignees: data });
trackEventServices.trackIssuePartialPropertyUpdateEvent(
{
workspaceSlug,
workspaceId: issue.workspace,
projectId: issue.project_detail.id,
projectIdentifier: issue.project_detail.identifier,
projectName: issue.project_detail.name,
issueId: issue.id,
},
"ISSUE_PROPERTY_UPDATE_ASSIGNEE",
user
);
};
const partialUpdateIssue = async (data: Partial<IIssue>) => {
mutate(
workspaceSlug && parentIssue ? SUB_ISSUES(parentIssue.id) : null,
(elements: any) => {
const _elements = { ...elements };
const _issues = _elements.sub_issues.map((element: IIssue) =>
element.id === issue.id ? { ...element, ...data } : element
);
_elements["sub_issues"] = [..._issues];
return _elements;
},
false
);
const issueResponse = await issuesService.patchIssue(
workspaceSlug as string,
issue.project,
issue.id,
data,
user
);
mutate(
SUB_ISSUES(parentIssue.id),
(elements: any) => {
const _elements = elements.sub_issues.map((element: IIssue) =>
element.id === issue.id ? issueResponse : element
);
elements["sub_issues"] = _elements;
return elements;
},
true
);
};
return (
<div className="relative flex items-center gap-1">
{properties.priority && (
<div className="flex-shrink-0">
<PrioritySelect
value={issue.priority}
onChange={handlePriorityChange}
hideDropdownArrow
disabled={!editable}
/>
</div>
)}
{properties.state && (
<div className="flex-shrink-0">
<StateSelect
value={issue.state_detail}
onChange={handleStateChange}
hideDropdownArrow
disabled={!editable}
/>
</div>
)}
{properties.start_date && issue.start_date && (
<div className="flex-shrink-0 w-[104px]">
<ViewStartDateSelect
issue={issue}
partialUpdateIssue={partialUpdateIssue}
user={user}
isNotAllowed={!editable}
/>
</div>
)}
{properties.due_date && issue.target_date && (
<div className="flex-shrink-0 w-[104px]">
<ViewDueDateSelect
issue={issue}
partialUpdateIssue={partialUpdateIssue}
user={user}
isNotAllowed={!editable}
/>
</div>
)}
{properties.assignee && (
<div className="flex-shrink-0">
<MembersSelect
value={issue.assignees}
onChange={handleAssigneeChange}
membersDetails={issue.assignee_details}
hideDropdownArrow
disabled={!editable}
/>
</div>
)}
</div>
);
};

328
web/components/issues/sub-issues/root.tsx Normal file
View File

@ -0,0 +1,328 @@
import React from "react";
// next imports
import { useRouter } from "next/router";
// swr
import useSWR, { mutate } from "swr";
// lucide icons
import { Plus, ChevronRight, ChevronDown } from "lucide-react";
// components
import { ExistingIssuesListModal } from "components/core";
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
import { SubIssuesRootList } from "./issues-list";
import { ProgressBar } from "./progressbar";
// ui
import { CustomMenu } from "components/ui";
// hooks
import { useProjectMyMembership } from "contexts/project-member.context";
import useToast from "hooks/use-toast";
// helpers
import { copyTextToClipboard } from "helpers/string.helper";
// types
import { ICurrentUserResponse, IIssue, ISearchIssueResponse } from "types";
// services
import issuesService from "services/issues.service";
// fetch keys
import { SUB_ISSUES } from "constants/fetch-keys";
export interface ISubIssuesRoot {
parentIssue: IIssue;
user: ICurrentUserResponse | undefined;
}
export interface ISubIssuesRootLoaders {
visibility: string[];
delete: string[];
sub_issues: string[];
}
export interface ISubIssuesRootLoadersHandler {
key: "visibility" | "delete" | "sub_issues";
issueId: string;
}
export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
const { memberRole } = useProjectMyMembership();
const { setToastAlert } = useToast();
const { data: issues, isLoading } = useSWR(
workspaceSlug && projectId && parentIssue && parentIssue?.id
? SUB_ISSUES(parentIssue?.id)
: null,
workspaceSlug && projectId && parentIssue && parentIssue?.id
? () => issuesService.subIssues(workspaceSlug, projectId, parentIssue.id)
: null
);
const [issuesLoader, setIssuesLoader] = React.useState<ISubIssuesRootLoaders>({
visibility: [parentIssue?.id],
delete: [],
sub_issues: [],
});
const handleIssuesLoader = ({ key, issueId }: ISubIssuesRootLoadersHandler) => {
setIssuesLoader((previousData: ISubIssuesRootLoaders) => ({
...previousData,
[key]: previousData[key].includes(issueId)
? previousData[key].filter((i: string) => i !== issueId)
: [...previousData[key], issueId],
}));
};
const [issueCrudOperation, setIssueCrudOperation] = React.useState<{
create: { toggle: boolean; issueId: string | null };
existing: { toggle: boolean; issueId: string | null };
edit: { toggle: boolean; issueId: string | null; issue: IIssue | null };
delete: { toggle: boolean; issueId: string | null; issue: IIssue | null };
}>({
create: {
toggle: false,
issueId: null,
},
existing: {
toggle: false,
issueId: null,
},
edit: {
toggle: false,
issueId: null, // parent issue id for mutation
issue: null,
},
delete: {
toggle: false,
issueId: null, // parent issue id for mutation
issue: null,
},
});
const handleIssueCrudOperation = (
key: "create" | "existing" | "edit" | "delete",
issueId: string | null,
issue: IIssue | null = null
) => {
setIssueCrudOperation({
...issueCrudOperation,
[key]: {
toggle: !issueCrudOperation[key].toggle,
issueId: issueId,
issue: issue,
},
});
};
const addAsSubIssueFromExistingIssues = async (data: ISearchIssueResponse[]) => {
if (!workspaceSlug || !parentIssue || issueCrudOperation?.existing?.issueId === null) return;
const issueId = issueCrudOperation?.existing?.issueId;
const payload = {
sub_issue_ids: data.map((i) => i.id),
};
await issuesService.addSubIssues(workspaceSlug, projectId, issueId, payload).finally(() => {
if (issueId) mutate(SUB_ISSUES(issueId));
});
};
const removeIssueFromSubIssues = async (parentIssueId: string, issue: IIssue) => {
if (!workspaceSlug || !parentIssue || !issue?.id) return;
issuesService
.patchIssue(workspaceSlug, projectId, issue.id, { parent: null }, user)
.then(async () => {
if (parentIssueId) await mutate(SUB_ISSUES(parentIssueId));
handleIssuesLoader({ key: "delete", issueId: issue?.id });
setToastAlert({
type: "success",
title: `Issue removed!`,
message: `Issue removed successfully.`,
});
})
.catch(() => {
handleIssuesLoader({ key: "delete", issueId: issue?.id });
setToastAlert({
type: "warning",
title: `Error!`,
message: `Error, Please try again later.`,
});
});
};
const copyText = (text: string) => {
const originURL =
typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
copyTextToClipboard(`${originURL}/${text}`).then(() => {
setToastAlert({
type: "success",
title: "Link Copied!",
message: "Issue link copied to clipboard.",
});
});
};
const isEditable = memberRole?.isGuest || memberRole?.isViewer ? false : true;
const mutateSubIssues = (parentIssueId: string | null) => {
if (parentIssueId) mutate(SUB_ISSUES(parentIssueId));
};
return (
<div className="w-full h-full space-y-2">
{!issues && isLoading ? (
<div className="py-3 text-center text-sm text-custom-text-300 font-medium">Loading...</div>
) : (
<>
{issues && issues?.sub_issues && issues?.sub_issues?.length > 0 ? (
<>
{/* header */}
<div className="relative flex items-center gap-4 text-xs">
<div
className="rounded border border-custom-border-100 shadow p-1.5 px-2 flex items-center gap-1 hover:bg-custom-background-80 transition-all cursor-pointer select-none"
onClick={() =>
handleIssuesLoader({ key: "visibility", issueId: parentIssue?.id })
}
>
<div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
{issuesLoader.visibility.includes(parentIssue?.id) ? (
<ChevronDown width={16} strokeWidth={2} />
) : (
<ChevronRight width={14} strokeWidth={2} />
)}
</div>
<div>Sub-issues</div>
<div>({issues?.sub_issues?.length || 0})</div>
</div>
<div className="w-full max-w-[250px] select-none">
<ProgressBar
total={issues?.sub_issues?.length || 0}
done={
(issues?.state_distribution?.cancelled || 0) +
(issues?.state_distribution?.completed || 0)
}
/>
</div>
{isEditable && issuesLoader.visibility.includes(parentIssue?.id) && (
<div className="ml-auto flex-shrink-0 flex items-center gap-2 select-none">
<div
className="hover:bg-custom-background-80 transition-all cursor-pointer p-1.5 px-2 rounded border border-custom-border-100 shadow"
onClick={() => handleIssueCrudOperation("create", parentIssue?.id)}
>
Add sub-issue
</div>
<div
className="hover:bg-custom-background-80 transition-all cursor-pointer p-1.5 px-2 rounded border border-custom-border-100 shadow"
onClick={() => handleIssueCrudOperation("existing", parentIssue?.id)}
>
Add an existing issue
</div>
</div>
)}
</div>
{/* issues */}
{issuesLoader.visibility.includes(parentIssue?.id) && (
<div className="border border-b-0 border-custom-border-100">
<SubIssuesRootList
workspaceSlug={workspaceSlug}
projectId={projectId}
parentIssue={parentIssue}
user={undefined}
editable={isEditable}
removeIssueFromSubIssues={removeIssueFromSubIssues}
issuesLoader={issuesLoader}
handleIssuesLoader={handleIssuesLoader}
copyText={copyText}
handleIssueCrudOperation={handleIssueCrudOperation}
/>
</div>
)}
</>
) : (
isEditable && (
<div className="text-xs py-2 text-custom-text-300 font-medium">
<div className="py-3 text-center">No sub issues are available</div>
<>
<CustomMenu
label={
<>
<Plus className="h-3 w-3" />
Add sub-issue
</>
}
buttonClassName="whitespace-nowrap"
position="left"
noBorder
noChevron
>
<CustomMenu.MenuItem
onClick={() => {
mutateSubIssues(parentIssue?.id);
handleIssueCrudOperation("create", parentIssue?.id);
}}
>
Create new
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
mutateSubIssues(parentIssue?.id);
handleIssueCrudOperation("existing", parentIssue?.id);
}}
>
Add an existing issue
</CustomMenu.MenuItem>
</CustomMenu>
</>
</div>
)
)}
{isEditable && issueCrudOperation?.create?.toggle && (
<CreateUpdateIssueModal
isOpen={issueCrudOperation?.create?.toggle}
prePopulateData={{
parent: issueCrudOperation?.create?.issueId,
}}
handleClose={() => {
mutateSubIssues(issueCrudOperation?.create?.issueId);
handleIssueCrudOperation("create", null);
}}
/>
)}
{isEditable &&
issueCrudOperation?.existing?.toggle &&
issueCrudOperation?.existing?.issueId && (
<ExistingIssuesListModal
isOpen={issueCrudOperation?.existing?.toggle}
handleClose={() => handleIssueCrudOperation("existing", null)}
searchParams={{ sub_issue: true, issue_id: issueCrudOperation?.existing?.issueId }}
handleOnSubmit={addAsSubIssueFromExistingIssues}
workspaceLevelToggle
/>
)}
{isEditable && issueCrudOperation?.edit?.toggle && issueCrudOperation?.edit?.issueId && (
<>
<CreateUpdateIssueModal
isOpen={issueCrudOperation?.edit?.toggle}
handleClose={() => {
mutateSubIssues(issueCrudOperation?.edit?.issueId);
handleIssueCrudOperation("edit", null, null);
}}
data={issueCrudOperation?.edit?.issue}
/>
</>
)}
{isEditable &&
issueCrudOperation?.delete?.toggle &&
issueCrudOperation?.delete?.issueId && (
<DeleteIssueModal
isOpen={issueCrudOperation?.delete?.toggle}
handleClose={() => {
mutateSubIssues(issueCrudOperation?.delete?.issueId);
handleIssueCrudOperation("delete", null, null);
}}
data={issueCrudOperation?.delete?.issue}
user={user}
redirection={false}
/>
)}
</>
)}
</div>
);
};

1
web/components/profile/profile-issues-view.tsx
View File

@ -51,7 +51,6 @@ export const ProfileIssuesView = () => {
groupedIssues,
mutateProfileIssues,
displayFilters,
setDisplayFilters,
isEmpty,
filters,
setFilters,

2
web/components/project/members-select.tsx
View File

@ -82,7 +82,7 @@ export const MembersSelect: React.FC<Props> = ({
<Tooltip
tooltipHeading="Assignee"
tooltipContent={
membersDetails.length > 0
membersDetails && membersDetails.length > 0
? membersDetails.map((assignee) => assignee?.display_name).join(", ")
: "No Assignee"
}

110
web/components/ui/product-updates-modal.tsx
View File

@ -1,15 +1,16 @@
import React from "react";
import useSWR from "swr";
// headless ui
import { Dialog, Transition } from "@headlessui/react";
// component
import { MarkdownRenderer, Spinner } from "components/ui";
// icons
import { XMarkIcon } from "@heroicons/react/20/solid";
// services
import workspaceService from "services/workspace.service";
// helper
// components
import { Loader, MarkdownRenderer } from "components/ui";
// icons
import { XMarkIcon } from "@heroicons/react/20/solid";
// helpers
import { renderLongDateFormat } from "helpers/date-time.helper";
type Props = {
@ -34,8 +35,8 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
<div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto">
<div className="grid place-items-center min-h-full text-center p-4">
<div className="fixed inset-0 z-20 h-full w-full">
<div className="grid place-items-center h-full w-full p-4">
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
@ -45,49 +46,62 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 border border-custom-border-100 text-left shadow-xl transition-all grid place-items-center sm:w-full sm:max-w-2xl">
<div className="max-h-[90vh] overflow-y-auto p-5">
<div className="sm:flex sm:items-start">
<div className="flex w-full flex-col gap-y-4 text-center sm:text-left">
<Dialog.Title
as="h3"
className="flex justify-between text-lg font-medium leading-6 text-custom-text-100"
>
<span>Product Updates</span>
<span>
<button type="button" onClick={() => setIsOpen(false)}>
<XMarkIcon
className="h-6 w-6 text-custom-text-200 hover:text-custom-text-100"
aria-hidden="true"
/>
</button>
</span>
</Dialog.Title>
{updates && updates.length > 0 ? (
updates.map((item, index) => (
<React.Fragment key={item.id}>
<div className="flex items-center gap-3 text-xs text-custom-text-200">
<span className="flex items-center rounded-full border border-custom-border-200 bg-custom-background-90 px-3 py-1.5 text-xs">
{item.tag_name}
<Dialog.Panel className="relative overflow-hidden rounded-lg bg-custom-background-100 border border-custom-border-100 shadow-custom-shadow-rg] min-w-[100%] sm:min-w-[50%] sm:max-w-[50%]">
<div className="flex flex-col p-4 max-h-[90vh] w-full">
<Dialog.Title
as="h3"
className="flex items-center justify-between text-lg font-semibold"
>
<span>Product Updates</span>
<span>
<button type="button" onClick={() => setIsOpen(false)}>
<XMarkIcon
className="h-6 w-6 text-custom-text-200 hover:text-custom-text-100"
aria-hidden="true"
/>
</button>
</span>
</Dialog.Title>
{updates && updates.length > 0 ? (
<div className="h-full overflow-y-auto mt-4 space-y-4">
{updates.map((item, index) => (
<React.Fragment key={item.id}>
<div className="flex items-center gap-3 text-xs text-custom-text-200">
<span className="flex items-center rounded-full border border-custom-border-200 bg-custom-background-90 px-3 py-1.5 text-xs">
{item.tag_name}
</span>
<span>{renderLongDateFormat(item.published_at)}</span>
{index === 0 && (
<span className="flex items-center rounded-full border border-custom-border-200 bg-custom-primary px-3 py-1.5 text-xs text-white">
New
</span>
<span>{renderLongDateFormat(item.published_at)}</span>
{index === 0 && (
<span className="flex items-center rounded-full border border-custom-border-200 bg-custom-primary px-3 py-1.5 text-xs text-white">
New
</span>
)}
</div>
<MarkdownRenderer markdown={item.body} />
</React.Fragment>
))
) : (
<div className="flex h-full w-full items-center justify-center">
<Spinner />
Loading...
</div>
)}
)}
</div>
<MarkdownRenderer markdown={item.body} />
</React.Fragment>
))}
</div>
</div>
) : (
<div className="grid place-items-center w-full mt-4">
<Loader className="space-y-6 w-full">
<div className="space-y-3">
<Loader.Item height="30px" />
<Loader.Item height="20px" width="80%" />
<Loader.Item height="20px" width="80%" />
</div>
<div className="space-y-3">
<Loader.Item height="30px" />
<Loader.Item height="20px" width="80%" />
<Loader.Item height="20px" width="80%" />
</div>
<div className="space-y-3">
<Loader.Item height="30px" />
<Loader.Item height="20px" width="80%" />
<Loader.Item height="20px" width="80%" />
</div>
</Loader>
</div>
)}
</div>
</Dialog.Panel>
</Transition.Child>

7
web/contexts/profile-issues-context.tsx
View File

@ -71,9 +71,8 @@ export const reducer: ReducerFunctionType = (state, action) => {
...state,
display_filters: {
...state.display_filters,
...payload,
...payload?.display_filters,
},
issueView: payload?.display_filters?.layout || "list",
};
return {
@ -100,7 +99,7 @@ export const reducer: ReducerFunctionType = (state, action) => {
case "SET_PROPERTIES": {
const newState = {
...state,
properties: {
display_properties: {
...state.display_properties,
...payload?.display_properties,
},
@ -129,7 +128,6 @@ export const ProfileIssuesContextProvider: React.FC<{ children: React.ReactNode
type: "SET_DISPLAY_FILTERS",
payload: {
display_filters: {
...state.display_filters,
...displayFilter,
},
},
@ -179,7 +177,6 @@ export const ProfileIssuesContextProvider: React.FC<{ children: React.ReactNode
type: "SET_PROPERTIES",
payload: {
display_properties: {
...state.display_properties,
[key]: !state.display_properties[key],
},
},

7
web/helpers/array.helper.ts
View File

@ -38,10 +38,13 @@ export const orderArrayBy = (
export const checkDuplicates = (array: any[]) => new Set(array).size !== array.length;
export const findStringWithMostCharacters = (strings: string[]) =>
strings.reduce((longestString, currentString) =>
export const findStringWithMostCharacters = (strings: string[]): string => {
if (!strings || strings.length === 0) return "";
return strings.reduce((longestString, currentString) =>
currentString.length > longestString.length ? currentString : longestString
);
};
export const checkIfArraysHaveSameElements = (arr1: any[] | null, arr2: any[] | null): boolean => {
if (!arr1 || !arr2) return false;