From 230d1a4b08a28e578640ac7d44e7658dfdf457e5 Mon Sep 17 00:00:00 2001
From: rahulramesha <rahulramesham@gmail.com>
Date: Fri, 15 Dec 2023 19:18:10 +0530
Subject: [PATCH] issue properties optimization

---
 .../issues/issue-layouts/kanban/block.tsx     | 12 ++--
 .../all-properties.tsx}                       | 56 ++++++-------------
 .../with-display-properties-HOC.tsx           | 12 ++--
 3 files changed, 28 insertions(+), 52 deletions(-)
 rename web/components/issues/issue-layouts/{kanban/properties.tsx => properties/all-properties.tsx} (75%)

diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx
index 31456e33c..24d102723 100644
--- a/web/components/issues/issue-layouts/kanban/block.tsx
+++ b/web/components/issues/issue-layouts/kanban/block.tsx
@@ -1,7 +1,7 @@
 import { memo } from "react";
 import { Draggable } from "@hello-pangea/dnd";
 // components
-import { KanBanProperties } from "./properties";
+import { IssueProperties } from "../properties/all-properties";
 // ui
 import { Tooltip } from "@plane/ui";
 // types
@@ -15,7 +15,6 @@ import {
   IProjectIssuesFilterStore,
   IViewIssuesFilterStore,
 } from "store_legacy/issues";
-import { IssuesFilter } from "store/issue/base-issue-filter.store";
 import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
 
 interface IssueBlockProps {
@@ -70,10 +69,7 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = (props) => {
 
   return (
     <>
-      <WithDisplayPropertiesHOC
-        issuesFilter={issuesFilter}
-        getShouldRenderProperty={(displayProperties) => displayProperties?.key}
-      >
+      <WithDisplayPropertiesHOC issuesFilter={issuesFilter} displayPropertyKey="key">
         <div className="relative">
           <div className="line-clamp-1 text-xs text-custom-text-300">
             {issue.project_detail.identifier}-{issue.sequence_id}
@@ -87,11 +83,11 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = (props) => {
         </div>
       </Tooltip>
       <div>
-        <KanBanProperties
+        <IssueProperties
+          className="flex flex-wrap items-center gap-2 whitespace-nowrap"
           issue={issue}
           issuesFilter={issuesFilter}
           handleIssues={updateIssue}
-          showEmptyGroup={showEmptyGroup}
           isReadOnly={isReadOnly}
         />
       </div>
diff --git a/web/components/issues/issue-layouts/kanban/properties.tsx b/web/components/issues/issue-layouts/properties/all-properties.tsx
similarity index 75%
rename from web/components/issues/issue-layouts/kanban/properties.tsx
rename to web/components/issues/issue-layouts/properties/all-properties.tsx
index 0463269ff..5f06f337a 100644
--- a/web/components/issues/issue-layouts/kanban/properties.tsx
+++ b/web/components/issues/issue-layouts/properties/all-properties.tsx
@@ -20,7 +20,7 @@ import {
 } from "store_legacy/issues";
 import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
 
-export interface IKanBanProperties {
+export interface IIssueProperties {
   issue: IIssue;
   handleIssues: (issue: IIssue) => void;
   issuesFilter:
@@ -29,12 +29,12 @@ export interface IKanBanProperties {
     | ICycleIssuesFilterStore
     | IViewIssuesFilterStore
     | IProfileIssuesFilterStore;
-  showEmptyGroup: boolean;
   isReadOnly: boolean;
+  className: string;
 }
 
-export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) => {
-  const { issue, handleIssues, issuesFilter, isReadOnly } = props;
+export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
+  const { issue, handleIssues, issuesFilter, isReadOnly, className } = props;
 
   const handleState = (state: IState) => {
     handleIssues({ ...issue, state: state.id });
@@ -65,13 +65,10 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
   };
 
   return (
-    <div className="flex flex-wrap items-center gap-2 whitespace-nowrap">
+    <div className={className}>
       {/* basic properties */}
       {/* state */}
-      <WithDisplayPropertiesHOC
-        issuesFilter={issuesFilter}
-        getShouldRenderProperty={(displayProperties) => displayProperties && displayProperties?.state}
-      >
+      <WithDisplayPropertiesHOC issuesFilter={issuesFilter} displayPropertyKey="state">
         <IssuePropertyState
           projectId={issue?.project_detail?.id || null}
           value={issue?.state || null}
@@ -83,10 +80,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
       </WithDisplayPropertiesHOC>
 
       {/* priority */}
-      <WithDisplayPropertiesHOC
-        issuesFilter={issuesFilter}
-        getShouldRenderProperty={(displayProperties) => displayProperties && displayProperties?.priority}
-      >
+      <WithDisplayPropertiesHOC issuesFilter={issuesFilter} displayPropertyKey="priority">
         <IssuePropertyPriority
           value={issue?.priority || null}
           onChange={handlePriority}
@@ -97,10 +91,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
 
       {/* label */}
 
-      <WithDisplayPropertiesHOC
-        issuesFilter={issuesFilter}
-        getShouldRenderProperty={(displayProperties) => displayProperties && displayProperties?.labels}
-      >
+      <WithDisplayPropertiesHOC issuesFilter={issuesFilter} displayPropertyKey="labels">
         <IssuePropertyLabels
           projectId={issue?.project_detail?.id || null}
           value={issue?.labels || null}
@@ -112,10 +103,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
       </WithDisplayPropertiesHOC>
 
       {/* start date */}
-      <WithDisplayPropertiesHOC
-        issuesFilter={issuesFilter}
-        getShouldRenderProperty={(displayProperties) => displayProperties?.start_date}
-      >
+      <WithDisplayPropertiesHOC issuesFilter={issuesFilter} displayPropertyKey="start_date">
         <IssuePropertyDate
           value={issue?.start_date || null}
           onChange={(date: string) => handleStartDate(date)}
@@ -125,10 +113,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
       </WithDisplayPropertiesHOC>
 
       {/* target/due date */}
-      <WithDisplayPropertiesHOC
-        issuesFilter={issuesFilter}
-        getShouldRenderProperty={(displayProperties) => displayProperties?.due_date}
-      >
+      <WithDisplayPropertiesHOC issuesFilter={issuesFilter} displayPropertyKey="due_date">
         <IssuePropertyDate
           value={issue?.target_date || null}
           onChange={(date: string) => handleTargetDate(date)}
@@ -138,10 +123,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
       </WithDisplayPropertiesHOC>
 
       {/* assignee */}
-      <WithDisplayPropertiesHOC
-        issuesFilter={issuesFilter}
-        getShouldRenderProperty={(displayProperties) => displayProperties?.assignee}
-      >
+      <WithDisplayPropertiesHOC issuesFilter={issuesFilter} displayPropertyKey="assignee">
         <IssuePropertyAssignee
           projectId={issue?.project_detail?.id || null}
           value={issue?.assignees || null}
@@ -154,10 +136,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
       </WithDisplayPropertiesHOC>
 
       {/* estimates */}
-      <WithDisplayPropertiesHOC
-        issuesFilter={issuesFilter}
-        getShouldRenderProperty={(displayProperties) => displayProperties?.estimate}
-      >
+      <WithDisplayPropertiesHOC issuesFilter={issuesFilter} displayPropertyKey="estimate">
         <IssuePropertyEstimates
           projectId={issue?.project_detail?.id || null}
           value={issue?.estimate_point || null}
@@ -171,7 +150,8 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
       {/* sub-issues */}
       <WithDisplayPropertiesHOC
         issuesFilter={issuesFilter}
-        getShouldRenderProperty={(displayProperties) => displayProperties?.sub_issue_count && !!issue?.sub_issues_count}
+        displayPropertyKey="sub_issue_count"
+        shouldRenderProperty={!!issue?.sub_issues_count}
       >
         <Tooltip tooltipHeading="Sub-issues" tooltipContent={`${issue.sub_issues_count}`}>
           <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1">
@@ -184,9 +164,8 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
       {/* attachments */}
       <WithDisplayPropertiesHOC
         issuesFilter={issuesFilter}
-        getShouldRenderProperty={(displayProperties) =>
-          displayProperties?.attachment_count && !!issue?.attachment_count
-        }
+        displayPropertyKey="attachment_count"
+        shouldRenderProperty={!!issue?.attachment_count}
       >
         <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
           <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1">
@@ -199,7 +178,8 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
       {/* link */}
       <WithDisplayPropertiesHOC
         issuesFilter={issuesFilter}
-        getShouldRenderProperty={(displayProperties) => displayProperties?.link && !!issue?.link_count}
+        displayPropertyKey="link"
+        shouldRenderProperty={!!issue?.link_count}
       >
         <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
           <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1">
diff --git a/web/components/issues/issue-layouts/properties/with-display-properties-HOC.tsx b/web/components/issues/issue-layouts/properties/with-display-properties-HOC.tsx
index e32b25728..0bf380bd5 100644
--- a/web/components/issues/issue-layouts/properties/with-display-properties-HOC.tsx
+++ b/web/components/issues/issue-layouts/properties/with-display-properties-HOC.tsx
@@ -7,7 +7,6 @@ import {
   IProjectIssuesFilterStore,
   IViewIssuesFilterStore,
 } from "store_legacy/issues";
-import { IIssueDisplayProperties } from "types";
 
 interface IWithDisplayPropertiesHOC {
   issuesFilter:
@@ -16,16 +15,17 @@ interface IWithDisplayPropertiesHOC {
     | ICycleIssuesFilterStore
     | IViewIssuesFilterStore
     | IProfileIssuesFilterStore;
-  getShouldRenderProperty: (displayProperties: IIssueDisplayProperties) => boolean;
+  shouldRenderProperty?: boolean;
+  displayPropertyKey: string;
   children: ReactNode;
 }
 export const WithDisplayPropertiesHOC = observer(
-  ({ issuesFilter, getShouldRenderProperty, children }: IWithDisplayPropertiesHOC) => {
-    const displayProperties = issuesFilter.issueFilters.displayProperties;
+  ({ issuesFilter, shouldRenderProperty = true, displayPropertyKey, children }: IWithDisplayPropertiesHOC) => {
+    const shouldDisplayPropertyFromFilters = issuesFilter.issueFilters.displayProperties[displayPropertyKey];
 
-    const shouldRenderProperty = getShouldRenderProperty(displayProperties);
+    const renderProperty = shouldDisplayPropertyFromFilters && shouldRenderProperty;
 
-    if (!shouldRenderProperty) return null;
+    if (!renderProperty) return null;
 
     return <>{children}</>;
   }