Merge branch 'develop' of github.com:makeplane/plane into dev/private_bucket_for_attachments

apiserver/plane/bgtasks/exporter_expired_task.py

@@ -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"),

docker-compose-hub.yml

@@ -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:
+        web:
-                container_name: planefrontend
+                container_name: web
                 image: makeplane/plane-frontend:latest
                 restart: always
                 command: /usr/local/bin/start.sh web/server.js web
                 env_file:
-                        - .env
+                        - ./web/.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"
                 depends_on:
-                        - plane-api
+                        - api
-                        - plane-worker
+                        - worker
 
-        plane-deploy:
+        space:
-                container_name: planedeploy
+                container_name: space
-                image: makeplane/plane-deploy:latest
+                image: makeplane/plane-space:latest
                 restart: always
                 command: /usr/local/bin/start.sh space/server.js space
                 env_file:
-                        - .env
+                        - ./space/.env
-                environment:
-                        NEXT_PUBLIC_API_BASE_URL: ${NEXT_PUBLIC_API_BASE_URL}
                 depends_on:
-                        - plane-api
+                        - api
-                        - plane-worker
+                        - worker
-                        - plane-web
+                        - web
 
-        plane-api:
+        api:
-                container_name: planebackend
+                container_name: api
                 image: makeplane/plane-backend:latest
                 restart: always
                 command: ./bin/takeoff
                 env_file:
-                        - .env
+                        - ./apiserver/.env
-                environment:
-                        <<: *api-and-worker-env
                 depends_on:
                         - plane-db
                         - plane-redis
 
-        plane-worker:
+        worker:
-                container_name: planebgworker
+                container_name: bgworker
                 image: makeplane/plane-backend:latest
                 restart: always
                 command: ./bin/worker
                 env_file:
-                        - .env
+                        - ./apiserver/.env
-                environment:
-                        <<: *api-and-worker-env
                 depends_on:
-                        - plane-api
+                        - api
                         - plane-db
                         - plane-redis
 
-        plane-beat-worker:
+        beat-worker:
-                container_name: planebeatworker
+                container_name: beatworker
                 image: makeplane/plane-backend:latest
                 restart: always
                 command: ./bin/beat
                 env_file:
-                        - .env
+                        - ./apiserver/.env
-                environment:
-                        <<: *api-and-worker-env
                 depends_on:
-                        - plane-api
+                        - api
                         - plane-db
                         - plane-redis
 
@@ -162,8 +110,8 @@ services:
                         - plane-minio
 
         # Comment this if you already have a reverse proxy running
-        plane-proxy:
+        proxy:
-                container_name: planeproxy
+                container_name: proxy
                 image: makeplane/plane-proxy:latest
                 ports:
                         - ${NGINX_PORT}:80
@@ -173,8 +121,9 @@ services:
                         FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT:-5242880}
                         BUCKET_NAME: ${AWS_S3_BUCKET_NAME:-uploads}
                 depends_on:
-                        - plane-web
+                        - web
-                        - plane-api
+                        - api
+                        - space
 
 volumes:
         pgdata:

docker-compose.yml

@@ -1,8 +1,8 @@
 version: "3.8"
 
 services:
-  plane-web:
+  web:
-    container_name: planefrontend
+    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
+      - api
-      - plane-worker
+      - worker
 
-  plane-deploy:
+  space:
-    container_name: planedeploy
+    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
+      - api
-      - plane-worker
+      - worker
-      - plane-web
+      - web
 
-  plane-api:
+  api:
-    container_name: planebackend
+    container_name: api
     build:
       context: ./apiserver
       dockerfile: Dockerfile.api
@@ -43,8 +43,8 @@ services:
       - plane-db
       - plane-redis
 
-  plane-worker:
+  worker:
-    container_name: planebgworker
+    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:
+  beat-worker:
-    container_name: planebeatworker
+    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
 
@@ -123,8 +123,8 @@ services:
       - plane-minio
 
   # Comment this if you already have a reverse proxy running
-  plane-proxy:
+  proxy:
-    container_name: planeproxy
+    container_name: proxy
     build:
       context: ./nginx
       dockerfile: Dockerfile
@@ -136,8 +136,9 @@ services:
       PUBLIC_BUCKET_NAME: ${AWS_PUBLIC_STORAGE_BUCKET_NAME:-uploads}
       PRIVATE_BUCKET_NAME: ${AWS_PRIVATE_STORAGE_BUCKET_NAME:-uploads-private}
     depends_on:
-      - plane-web
+      - web
-      - plane-api
+      - api
+      - space
 
 volumes:
   pgdata:

nginx/nginx.conf.template

@@ -1,4 +1,5 @@
-events { }
+events {
+}
 
 http {
     sendfile on;
@@ -11,15 +12,15 @@ http {
         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 /${PUBLIC_BUCKET_NAME}/ {

space/.env.example

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

web/.env.example

@@ -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"

web/components/analytics/custom-analytics/graph/index.tsx

@@ -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;

web/components/core/activity.tsx

@@ -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="inline-flex items-center gap-2 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
-              <span
+              <LabelPill labelId={activity.new_identifier ?? ""} />
-                className="h-1.5 w-1.5 rounded-full"
-                style={{
-                  backgroundColor: "#000000",
-                }}
-                aria-hidden="true"
-              />
               <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
+              <LabelPill labelId={activity.old_identifier ?? ""} />
-                className="h-1.5 w-1.5 rounded-full"
-                style={{
-                  backgroundColor: "#000000",
-                }}
-                aria-hidden="true"
-              />
               <span className="font-medium text-custom-text-100">{activity.old_value}</span>
             </span>
             {showIssue && (

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

@@ -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"

web/components/issues/main-content.tsx

@@ -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">
-          <SubIssuesRoot parentIssue={issueDetails} user={user} editable={uneditable} />
+          <SubIssuesRoot parentIssue={issueDetails} user={user} />
         </div>
       </div>
       <div className="flex flex-col gap-3 py-3">

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

@@ -16,9 +16,9 @@ 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;
@@ -29,8 +29,8 @@ export interface ISubIssues {
   user: ICurrentUserResponse | undefined;
   editable: boolean;
   removeIssueFromSubIssues: (parentIssueId: string, issue: IIssue) => void;
-  issuesVisibility: string[];
+  issuesLoader: ISubIssuesRootLoaders;
-  handleIssuesVisibility: (issueId: string) => void;
+  handleIssuesLoader: ({ key, issueId }: ISubIssuesRootLoadersHandler) => void;
   copyText: (text: string) => void;
   handleIssueCrudOperation: (
     key: "create" | "existing" | "edit" | "delete",
@@ -48,8 +48,8 @@ export const SubIssues: React.FC<ISubIssues> = ({
   user,
   editable,
   removeIssueFromSubIssues,
-  issuesVisibility,
+  issuesLoader,
-  handleIssuesVisibility,
+  handleIssuesLoader,
   copyText,
   handleIssueCrudOperation,
 }) => (
@@ -62,19 +62,21 @@ export const SubIssues: React.FC<ISubIssues> = ({
         <div className="flex-shrink-0 w-[22px] h-[22px]">
           {issue?.sub_issues_count > 0 && (
             <>
-              {true ? (
+              {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={() => handleIssuesVisibility(issue?.id)}
+                  onClick={() => handleIssuesLoader({ key: "visibility", issueId: issue?.id })}
                 >
-                  {issuesVisibility && issuesVisibility.includes(issue?.id) ? (
+                  {issuesLoader && issuesLoader.visibility.includes(issue?.id) ? (
                     <ChevronDown width={14} strokeWidth={2} />
                   ) : (
                     <ChevronRight width={14} strokeWidth={2} />
                   )}
                 </div>
-              ) : (
-                <Loader width={14} strokeWidth={2} className="animate-spin" />
               )}
             </>
           )}
@@ -92,7 +94,7 @@ export const SubIssues: React.FC<ISubIssues> = ({
               {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">{issue?.name}</div>
+              <div className="line-clamp-1 text-xs text-custom-text-100 pr-2">{issue?.name}</div>
             </Tooltip>
           </a>
         </Link>
@@ -132,7 +134,11 @@ export const SubIssues: React.FC<ISubIssues> = ({
               </CustomMenu.MenuItem>
             )}
 
-            <CustomMenu.MenuItem onClick={copyText}>
+            <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>
@@ -142,17 +148,28 @@ export const SubIssues: React.FC<ISubIssues> = ({
         </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] flex justify-center items-center rounded-sm hover:bg-custom-background-80 transition-all cursor-pointer overflow-hidden"
+                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={() => removeIssueFromSubIssues(parentIssue?.id, issue)}
+                onClick={() => {
+                  handleIssuesLoader({ key: "delete", issueId: issue?.id });
+                  removeIssueFromSubIssues(parentIssue?.id, issue);
+                }}
               >
                 <X width={14} strokeWidth={2} />
               </div>
             )}
+          </>
+        )}
       </div>
     )}
 
-    {issuesVisibility.includes(issue?.id) && issue?.sub_issues_count > 0 && (
+    {issuesLoader.visibility.includes(issue?.id) && issue?.sub_issues_count > 0 && (
       <SubIssuesRootList
         workspaceSlug={workspaceSlug}
         projectId={projectId}
@@ -161,8 +178,8 @@ export const SubIssues: React.FC<ISubIssues> = ({
         user={user}
         editable={editable}
         removeIssueFromSubIssues={removeIssueFromSubIssues}
-        issuesVisibility={issuesVisibility}
+        issuesLoader={issuesLoader}
-        handleIssuesVisibility={handleIssuesVisibility}
+        handleIssuesLoader={handleIssuesLoader}
         copyText={copyText}
         handleIssueCrudOperation={handleIssueCrudOperation}
       />

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

@@ -5,6 +5,7 @@ import useSWR from "swr";
 import { SubIssues } from "./issue";
 // types
 import { ICurrentUserResponse, IIssue } from "types";
+import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root";
 // services
 import issuesService from "services/issues.service";
 // fetch keys
@@ -18,8 +19,8 @@ export interface ISubIssuesRootList {
   user: ICurrentUserResponse | undefined;
   editable: boolean;
   removeIssueFromSubIssues: (parentIssueId: string, issue: IIssue) => void;
-  issuesVisibility: string[];
+  issuesLoader: ISubIssuesRootLoaders;
-  handleIssuesVisibility: (issueId: string) => void;
+  handleIssuesLoader: ({ key, issueId }: ISubIssuesRootLoadersHandler) => void;
   copyText: (text: string) => void;
   handleIssueCrudOperation: (
     key: "create" | "existing" | "edit" | "delete",
@@ -36,8 +37,8 @@ export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
   user,
   editable,
   removeIssueFromSubIssues,
-  issuesVisibility,
+  issuesLoader,
-  handleIssuesVisibility,
+  handleIssuesLoader,
   copyText,
   handleIssueCrudOperation,
 }) => {
@@ -50,6 +51,16 @@ export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
       : 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 &&
@@ -66,8 +77,8 @@ export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
             user={user}
             editable={editable}
             removeIssueFromSubIssues={removeIssueFromSubIssues}
-            issuesVisibility={issuesVisibility}
+            issuesLoader={issuesLoader}
-            handleIssuesVisibility={handleIssuesVisibility}
+            handleIssuesLoader={handleIssuesLoader}
             copyText={copyText}
             handleIssueCrudOperation={handleIssueCrudOperation}
           />

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

@@ -14,7 +14,7 @@ export const ProgressBar = ({ total = 0, done = 0 }: IProgressBar) => {
       <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"
+            className="bg-green-500 h-[6px] rounded-full transition-all"
             style={{ width: `${calPercentage(done, total)}%` }}
           />
         </div>

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

@@ -86,12 +86,14 @@ export const IssueProperty: React.FC<IIssueProperty> = ({
   };
 
   const handleAssigneeChange = (data: any) => {
-    const newData = issue.assignees ?? [];
+    let newData = issue.assignees ?? [];
 
-    if (newData.includes(data)) newData.splice(newData.indexOf(data), 1);
+    if (newData && newData.length > 0) {
-    else newData.push(data);
+      if (newData.includes(data)) newData = newData.splice(newData.indexOf(data), 1);
+      else newData = [...newData, data];
+    } else newData = [...newData, data];
 
-    partialUpdateIssue({ assignees_list: data });
+    partialUpdateIssue({ assignees_list: data, assignees: data });
 
     trackEventServices.trackIssuePartialPropertyUpdateEvent(
       {

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

@@ -14,6 +14,7 @@ import { ProgressBar } from "./progressbar";
 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
@@ -25,18 +26,27 @@ import { SUB_ISSUES } from "constants/fetch-keys";
 
 export interface ISubIssuesRoot {
   parentIssue: IIssue;
-
   user: ICurrentUserResponse | undefined;
-  editable: boolean;
 }
 
-export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user, editable }) => {
+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 } = useSWR(
+  const { data: issues, isLoading } = useSWR(
     workspaceSlug && projectId && parentIssue && parentIssue?.id
       ? SUB_ISSUES(parentIssue?.id)
       : null,
@@ -45,13 +55,18 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user, edi
       : null
   );
 
-  const [issuesVisibility, setIssuesVisibility] = React.useState<string[]>([parentIssue?.id]);
+  const [issuesLoader, setIssuesLoader] = React.useState<ISubIssuesRootLoaders>({
-  const handleIssuesVisibility = (issueId: string) => {
+    visibility: [parentIssue?.id],
-    if (issuesVisibility.includes(issueId)) {
+    delete: [],
-      setIssuesVisibility(issuesVisibility.filter((i: string) => i !== issueId));
+    sub_issues: [],
-    } else {
+  });
-      setIssuesVisibility([...issuesVisibility, issueId]);
+  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<{
@@ -100,7 +115,6 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user, edi
     const payload = {
       sub_issue_ids: data.map((i) => i.id),
     };
-
     await issuesService.addSubIssues(workspaceSlug, projectId, issueId, payload).finally(() => {
       if (issueId) mutate(SUB_ISSUES(issueId));
     });
@@ -110,8 +124,22 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user, edi
     if (!workspaceSlug || !parentIssue || !issue?.id) return;
     issuesService
       .patchIssue(workspaceSlug, projectId, issue.id, { parent: null }, user)
-      .finally(() => {
+      .then(async () => {
-        if (parentIssueId) mutate(SUB_ISSUES(parentIssueId));
+        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.`,
+        });
       });
   };
 
@@ -119,11 +147,11 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user, edi
     const originURL =
       typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
     copyTextToClipboard(`${originURL}/${text}`).then(() => {
-      // setToastAlert({
+      setToastAlert({
-      //   type: "success",
+        type: "success",
-      //   title: "Link Copied!",
+        title: "Link Copied!",
-      //   message: "Issue link copied to clipboard.",
+        message: "Issue link copied to clipboard.",
-      // });
+      });
     });
   };
 
@@ -135,28 +163,34 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user, edi
 
   return (
     <div className="w-full h-full space-y-2">
-      {parentIssue && parentIssue?.sub_issues_count > 0 ? (
+      {!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={() => handleIssuesVisibility(parentIssue?.id)}
+                  onClick={() =>
+                    handleIssuesLoader({ key: "visibility", issueId: parentIssue?.id })
+                  }
                 >
                   <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
-                {issuesVisibility.includes(parentIssue?.id) ? (
+                    {issuesLoader.visibility.includes(parentIssue?.id) ? (
                       <ChevronDown width={16} strokeWidth={2} />
                     ) : (
                       <ChevronRight width={14} strokeWidth={2} />
                     )}
                   </div>
                   <div>Sub-issues</div>
-              <div>({parentIssue?.sub_issues_count})</div>
+                  <div>({issues?.sub_issues?.length || 0})</div>
                 </div>
 
                 <div className="w-full max-w-[250px] select-none">
                   <ProgressBar
-                total={parentIssue?.sub_issues_count}
+                    total={issues?.sub_issues?.length || 0}
                     done={
                       (issues?.state_distribution?.cancelled || 0) +
                       (issues?.state_distribution?.completed || 0)
@@ -164,7 +198,7 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user, edi
                   />
                 </div>
 
-            {isEditable && issuesVisibility.includes(parentIssue?.id) && (
+                {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"
@@ -183,7 +217,7 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user, edi
               </div>
 
               {/* issues */}
-          {issuesVisibility.includes(parentIssue?.id) && (
+              {issuesLoader.visibility.includes(parentIssue?.id) && (
                 <div className="border border-b-0 border-custom-border-100">
                   <SubIssuesRootList
                     workspaceSlug={workspaceSlug}
@@ -192,8 +226,8 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user, edi
                     user={undefined}
                     editable={isEditable}
                     removeIssueFromSubIssues={removeIssueFromSubIssues}
-                issuesVisibility={issuesVisibility}
+                    issuesLoader={issuesLoader}
-                handleIssuesVisibility={handleIssuesVisibility}
+                    handleIssuesLoader={handleIssuesLoader}
                     copyText={copyText}
                     handleIssueCrudOperation={handleIssueCrudOperation}
                   />
@@ -218,12 +252,18 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user, edi
                     noChevron
                   >
                     <CustomMenu.MenuItem
-                  onClick={() => handleIssueCrudOperation("create", parentIssue?.id)}
+                      onClick={() => {
+                        mutateSubIssues(parentIssue?.id);
+                        handleIssueCrudOperation("create", parentIssue?.id);
+                      }}
                     >
                       Create new
                     </CustomMenu.MenuItem>
                     <CustomMenu.MenuItem
-                  onClick={() => handleIssueCrudOperation("existing", parentIssue?.id)}
+                      onClick={() => {
+                        mutateSubIssues(parentIssue?.id);
+                        handleIssueCrudOperation("existing", parentIssue?.id);
+                      }}
                     >
                       Add an existing issue
                     </CustomMenu.MenuItem>
@@ -232,17 +272,18 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user, edi
               </div>
             )
           )}
-
           {isEditable && issueCrudOperation?.create?.toggle && (
             <CreateUpdateIssueModal
               isOpen={issueCrudOperation?.create?.toggle}
               prePopulateData={{
                 parent: issueCrudOperation?.create?.issueId,
               }}
-          handleClose={() => handleIssueCrudOperation("create", null)}
+              handleClose={() => {
+                mutateSubIssues(issueCrudOperation?.create?.issueId);
+                handleIssueCrudOperation("create", null);
+              }}
             />
           )}
-
           {isEditable &&
             issueCrudOperation?.existing?.toggle &&
             issueCrudOperation?.existing?.issueId && (
@@ -254,8 +295,8 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user, edi
                 workspaceLevelToggle
               />
             )}
-
           {isEditable && issueCrudOperation?.edit?.toggle && issueCrudOperation?.edit?.issueId && (
+            <>
               <CreateUpdateIssueModal
                 isOpen={issueCrudOperation?.edit?.toggle}
                 handleClose={() => {
@@ -264,9 +305,11 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user, edi
                 }}
                 data={issueCrudOperation?.edit?.issue}
               />
+            </>
           )}
-
+          {isEditable &&
-      {isEditable && issueCrudOperation?.delete?.toggle && issueCrudOperation?.delete?.issueId && (
+            issueCrudOperation?.delete?.toggle &&
+            issueCrudOperation?.delete?.issueId && (
               <DeleteIssueModal
                 isOpen={issueCrudOperation?.delete?.toggle}
                 handleClose={() => {
@@ -278,6 +321,8 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user, edi
                 redirection={false}
               />
             )}
+        </>
+      )}
     </div>
   );
 };

web/components/profile/profile-issues-view.tsx

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

web/components/ui/product-updates-modal.tsx

@@ -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="fixed inset-0 z-20 h-full w-full">
-          <div className="grid place-items-center min-h-full text-center p-4">
+          <div className="grid place-items-center h-full w-full p-4">
             <Transition.Child
               as={React.Fragment}
               enter="ease-out duration-300"
@@ -45,13 +46,11 @@ 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">
+              <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="max-h-[90vh] overflow-y-auto p-5">
+                <div className="flex flex-col p-4 max-h-[90vh] w-full">
-                  <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"
+                    className="flex items-center justify-between text-lg font-semibold"
                   >
                     <span>Product Updates</span>
                     <span>
@@ -64,7 +63,8 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                     </span>
                   </Dialog.Title>
                   {updates && updates.length > 0 ? (
-                        updates.map((item, index) => (
+                    <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">
@@ -79,16 +79,30 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                           </div>
                           <MarkdownRenderer markdown={item.body} />
                         </React.Fragment>
-                        ))
+                      ))}
+                    </div>
                   ) : (
-                        <div className="flex h-full w-full items-center justify-center">
+                    <div className="grid place-items-center w-full mt-4">
-                          <Spinner />
+                      <Loader className="space-y-6 w-full">
-                          Loading...
+                        <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>
-                  </div>
-                </div>
               </Dialog.Panel>
             </Transition.Child>
           </div>

web/contexts/profile-issues-context.tsx

@@ -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],
           },
         },

web/helpers/array.helper.ts

@@ -38,10 +38,13 @@ export const orderArrayBy = (
 
 export const checkDuplicates = (array: any[]) => new Set(array).size !== array.length;
 
-export const findStringWithMostCharacters = (strings: string[]) =>
+export const findStringWithMostCharacters = (strings: string[]): string => {
-  strings.reduce((longestString, currentString) =>
+  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;