From 5f014d204c144a356094e334d3108da4f80ded44 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Thu, 19 Oct 2023 17:24:10 +0530
Subject: [PATCH] fix: workspaces list not being fetched, display properties
 endpoint updated (#2493)

* fix: workspaces list not being fetched

* style: truncate workspace name if length exceeds
---
 web/components/workspace/sidebar-dropdown.tsx | 38 +++++++++----------
 web/layouts/auth-layout/workspace-wrapper.tsx |  2 +
 web/services/issue/issue.service.ts           |  6 ++-
 web/store/issue/issue_filters.store.ts        |  4 +-
 4 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/web/components/workspace/sidebar-dropdown.tsx b/web/components/workspace/sidebar-dropdown.tsx
index 6e50fc507cc..358629db6a6 100644
--- a/web/components/workspace/sidebar-dropdown.tsx
+++ b/web/components/workspace/sidebar-dropdown.tsx
@@ -17,8 +17,6 @@ import { Avatar } from "components/ui";
 import { Loader } from "@plane/ui";
 // icons
 import { Check, LogOut, Plus, Settings, UserCircle2 } from "lucide-react";
-// helpers
-import { truncateText } from "helpers/string.helper";
 // types
 import { IWorkspace } from "types";
 
@@ -104,15 +102,15 @@ export const WorkspaceSidebarDropdown = observer(() => {
   };
 
   return (
-    <div className="inline-flex items-center gap-2 px-4 pt-4">
-      <Menu as="div" className="relative col-span-4 inline-block w-full text-left">
-        <Menu.Button className="text-custom-sidebar-text-200 flex w-full items-center rounded-sm text-sm font-medium focus:outline-none">
+    <div className="flex items-center gap-2 px-4 pt-4">
+      <Menu as="div" className="relative col-span-4 text-left flex-grow truncate">
+        <Menu.Button className="text-custom-sidebar-text-200 rounded-sm text-sm font-medium focus:outline-none w-full truncate">
           <div
-            className={`flex w-full items-center gap-x-2 rounded-sm bg-custom-sidebar-background-80 p-1 ${
+            className={`flex items-center gap-x-2 rounded-sm bg-custom-sidebar-background-80 p-1 truncate ${
               themeStore.sidebarCollapsed ? "justify-center" : ""
             }`}
           >
-            <div className="relative grid h-6 w-6 place-items-center rounded bg-gray-700 uppercase text-white">
+            <div className="relative grid h-6 w-6 place-items-center rounded bg-gray-700 uppercase text-white flex-shrink-0">
               {activeWorkspace?.logo && activeWorkspace.logo !== "" ? (
                 <img
                   src={activeWorkspace.logo}
@@ -125,8 +123,8 @@ export const WorkspaceSidebarDropdown = observer(() => {
             </div>
 
             {!themeStore.sidebarCollapsed && (
-              <h4 className="text-custom-text-100">
-                {activeWorkspace?.name ? truncateText(activeWorkspace.name, 14) : "Loading..."}
+              <h4 className="text-custom-text-100 truncate">
+                {activeWorkspace?.name ? activeWorkspace.name : "Loading..."}
               </h4>
             )}
           </div>
@@ -158,8 +156,8 @@ export const WorkspaceSidebarDropdown = observer(() => {
                             onClick={() => handleWorkspaceNavigation(workspace)}
                             className="flex w-full items-center justify-between gap-1 p-1 rounded-md text-sm text-custom-sidebar-text-100 hover:bg-custom-sidebar-background-80"
                           >
-                            <div className="flex items-center justify-start gap-2.5">
-                              <span className="relative flex h-6 w-6 items-center justify-center rounded bg-gray-700 p-2 text-xs uppercase text-white">
+                            <div className="flex items-center justify-start gap-2.5 truncate">
+                              <span className="relative flex h-6 w-6 items-center justify-center rounded bg-gray-700 p-2 text-xs uppercase text-white flex-shrink-0">
                                 {workspace?.logo && workspace.logo !== "" ? (
                                   <img
                                     src={workspace.logo}
@@ -172,18 +170,18 @@ export const WorkspaceSidebarDropdown = observer(() => {
                               </span>
 
                               <h5
-                                className={`text-sm ${workspaceSlug === workspace.slug ? "" : "text-custom-text-200"}`}
+                                className={`text-sm truncate ${
+                                  workspaceSlug === workspace.slug ? "" : "text-custom-text-200"
+                                }`}
                               >
-                                {truncateText(workspace.name, 18)}
+                                {workspace.name}
                               </h5>
                             </div>
-                            <span className="p-1">
-                              <Check
-                                className={`h-3 w-3.5 text-custom-sidebar-text-100 ${
-                                  workspace.id === activeWorkspace?.id ? "opacity-100" : "opacity-0"
-                                }`}
-                              />
-                            </span>
+                            {workspace.id === activeWorkspace?.id && (
+                              <span className="p-1 flex-shrink-0">
+                                <Check className="h-3 w-3.5 text-custom-sidebar-text-100" />
+                              </span>
+                            )}
                           </button>
                         )}
                       </Menu.Item>
diff --git a/web/layouts/auth-layout/workspace-wrapper.tsx b/web/layouts/auth-layout/workspace-wrapper.tsx
index 2de91b1dd25..e1ae8e4db59 100644
--- a/web/layouts/auth-layout/workspace-wrapper.tsx
+++ b/web/layouts/auth-layout/workspace-wrapper.tsx
@@ -19,6 +19,8 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
+  // fetching all workspaces
+  useSWR(`USER_WORKSPACES_LIST`, () => workspaceStore.fetchWorkspaces());
   // fetching user workspace information
   useSWR(
     workspaceSlug ? `WORKSPACE_MEMBERS_ME_${workspaceSlug}` : null,
diff --git a/web/services/issue/issue.service.ts b/web/services/issue/issue.service.ts
index 11703e7925b..5f284489631 100644
--- a/web/services/issue/issue.service.ts
+++ b/web/services/issue/issue.service.ts
@@ -153,12 +153,14 @@ export class IssueService extends APIService {
       });
   }
 
-  async patchIssueDisplayProperties(
+  async updateIssueDisplayProperties(
     workspaceSlug: string,
     projectId: string,
     data: IIssueDisplayProperties
   ): Promise<any> {
-    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-display-properties/`, data)
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-display-properties/`, {
+      properties: data,
+    })
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
diff --git a/web/store/issue/issue_filters.store.ts b/web/store/issue/issue_filters.store.ts
index 51544b68d19..91743de29c9 100644
--- a/web/store/issue/issue_filters.store.ts
+++ b/web/store/issue/issue_filters.store.ts
@@ -217,7 +217,7 @@ export class IssueFilterStore implements IIssueFilterStore {
         this.userDisplayProperties = newProperties;
       });
 
-      await this.issueService.patchIssueDisplayProperties(workspaceSlug, projectId, newProperties);
+      await this.issueService.updateIssueDisplayProperties(workspaceSlug, projectId, newProperties);
     } catch (error) {
       this.fetchUserProjectFilters(workspaceSlug, projectId);
 
@@ -225,7 +225,7 @@ export class IssueFilterStore implements IIssueFilterStore {
         this.error = error;
       });
 
-      console.log("Failed to update user filters in issue filter store", error);
+      console.log("Failed to update user display properties in issue filter store", error);
     }
   };
 }