From 4512651f8b564df8ffcbb452bd9eb11b5de8f601 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Thu, 2 Nov 2023 16:01:49 +0530
Subject: [PATCH] fix: spreadsheet view properties fix (#2599)

---
 .../issues/issue-layouts/properties/assignee.tsx          | 7 +++++--
 web/components/issues/issue-layouts/properties/labels.tsx | 8 +++++++-
 web/components/issues/issue-layouts/properties/state.tsx  | 8 ++++----
 .../issue-layouts/spreadsheet/columns/assignee-column.tsx | 4 +++-
 .../spreadsheet/columns/created-on-column.tsx             | 4 +++-
 .../issue-layouts/spreadsheet/columns/due-date-column.tsx | 2 ++
 .../issue-layouts/spreadsheet/columns/estimate-column.tsx | 2 ++
 .../issue-layouts/spreadsheet/columns/label-column.tsx    | 5 +++--
 .../issue-layouts/spreadsheet/columns/priority-column.tsx | 4 ++--
 .../spreadsheet/columns/start-date-column.tsx             | 2 ++
 .../issue-layouts/spreadsheet/columns/state-column.tsx    | 3 ++-
 .../spreadsheet/columns/updated-on-column.tsx             | 4 +++-
 web/components/issues/view-select/due-date.tsx            | 8 ++++++--
 web/components/issues/view-select/start-date.tsx          | 8 ++++++--
 14 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/web/components/issues/issue-layouts/properties/assignee.tsx b/web/components/issues/issue-layouts/properties/assignee.tsx
index 5e89021ad..ee545f3a5 100644
--- a/web/components/issues/issue-layouts/properties/assignee.tsx
+++ b/web/components/issues/issue-layouts/properties/assignee.tsx
@@ -21,6 +21,7 @@ export interface IIssuePropertyAssignee {
   optionsClassName?: string;
   placement?: Placement;
   multiple?: true;
+  noLabelBorder?: boolean;
 }
 
 export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer((props) => {
@@ -36,6 +37,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
     optionsClassName,
     placement,
     multiple = false,
+    noLabelBorder = false,
   } = props;
 
   const { workspace: workspaceStore, project: projectStore } = useMobxStore();
@@ -91,8 +93,9 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
           </AvatarGroup>
         ) : (
           <span
-            className="flex items-center justify-between gap-1 h-full w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 duration-300 focus:outline-none
-          "
+            className={`flex items-center justify-between gap-1 h-full w-full text-xs rounded duration-300 focus:outline-none ${
+              noLabelBorder ? "" : " px-2.5 py-1 border border-custom-border-300"
+            }}`}
           >
             <User2 className="h-3 w-3" />
           </span>
diff --git a/web/components/issues/issue-layouts/properties/labels.tsx b/web/components/issues/issue-layouts/properties/labels.tsx
index 3caa4d779..d9c9d3826 100644
--- a/web/components/issues/issue-layouts/properties/labels.tsx
+++ b/web/components/issues/issue-layouts/properties/labels.tsx
@@ -25,6 +25,7 @@ export interface IIssuePropertyLabels {
   optionsClassName?: string;
   placement?: Placement;
   maxRender?: number;
+  noLabelBorder?: boolean;
 }
 
 export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((props) => {
@@ -40,6 +41,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
     optionsClassName,
     placement,
     maxRender = 2,
+    noLabelBorder = false,
   } = props;
 
   const { workspace: workspaceStore, project: projectStore }: RootStore = useMobxStore();
@@ -149,7 +151,11 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
                 </div>
               )
             ) : (
-              <div className="h-full flex items-center justify-center text-xs rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 hover:bg-custom-background-80">
+              <div
+                className={`h-full flex items-center justify-center text-xs rounded px-2.5 py-1 hover:bg-custom-background-80 ${
+                  noLabelBorder ? "" : "border-[0.5px] border-custom-border-300"
+                }`}
+              >
                 Select labels
               </div>
             )}
diff --git a/web/components/issues/issue-layouts/properties/state.tsx b/web/components/issues/issue-layouts/properties/state.tsx
index ea23ccfcc..35fea87ae 100644
--- a/web/components/issues/issue-layouts/properties/state.tsx
+++ b/web/components/issues/issue-layouts/properties/state.tsx
@@ -35,9 +35,9 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
     onChange,
     disabled,
     hideDropdownArrow = false,
-    className,
-    buttonClassName,
-    optionsClassName,
+    className = "",
+    buttonClassName = "",
+    optionsClassName = "",
     placement,
   } = props;
 
@@ -110,7 +110,7 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
             <button
               ref={setReferenceElement}
               type="button"
-              className={`flex items-center justify-between gap-1 w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 duration-300 focus:outline-none ${
+              className={`flex items-center justify-between gap-1 w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 ${
                 disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
               } ${buttonClassName}`}
               onClick={() => fetchProjectStates()}
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
index e0e855800..4cd19fdd1 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
@@ -26,7 +26,9 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = ({ issue, members, onC
         projectId={issue.project_detail.id ?? null}
         value={issue.assignees}
         onChange={(data) => onChange({ assignees: data })}
-        buttonClassName="!p-0 !rounded-none !border-0"
+        className="h-full w-full"
+        buttonClassName="!shadow-none !border-0 h-full w-full px-2.5 py-1 "
+        noLabelBorder
         hideDropdownArrow
         disabled={disabled}
         multiple
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
index b1a7c3fef..8c901a9d8 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
@@ -19,7 +19,9 @@ export const SpreadsheetCreatedOnColumn: React.FC<Props> = ({ issue, expandedIss
 
   return (
     <>
-      <div className="text-xs">{renderLongDetailDateFormat(issue.created_at)}</div>
+      <div className="flex items-center justify-center text-xs h-full w-full">
+        {renderLongDetailDateFormat(issue.created_at)}
+      </div>
 
       {isExpanded &&
         !isLoading &&
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
index 41bafeadc..f2b1a1d9b 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
@@ -24,6 +24,8 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = ({ issue, onChange, exp
       <ViewDueDateSelect
         issue={issue}
         onChange={(val) => onChange({ target_date: val })}
+        className="!h-full !w-full max-w-full px-2.5 py-1 flex items-center"
+        buttonClassName="!h-full !w-full !shadow-none px-2.5"
         noBorder
         disabled={disabled}
       />
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
index 735e8908f..c70c7e318 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
@@ -25,6 +25,8 @@ export const SpreadsheetEstimateColumn: React.FC<Props> = (props) => {
         projectId={issue.project_detail.id ?? null}
         value={issue.estimate_point}
         onChange={(data) => onChange({ estimate_point: data })}
+        className="h-full w-full"
+        buttonClassName="h-full w-full px-2.5 py-1 !shadow-none !border-0"
         hideDropdownArrow
         disabled={disabled}
       />
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
index 92400a033..65f48245e 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
@@ -28,8 +28,9 @@ export const SpreadsheetLabelColumn: React.FC<Props> = (props) => {
         projectId={issue.project_detail.id ?? null}
         value={issue.labels}
         onChange={(data) => onChange({ labels: data })}
-        className="h-full"
-        buttonClassName="!border-0 !h-full !w-full !rounded-none"
+        className="h-full w-full"
+        buttonClassName="!shadow-none !border-0 h-full w-full px-2.5 py-1 "
+        noLabelBorder
         hideDropdownArrow
         maxRender={1}
         disabled={disabled}
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
index 1f1301d5e..388755cd3 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
@@ -24,8 +24,8 @@ export const SpreadsheetPriorityColumn: React.FC<Props> = ({ issue, onChange, ex
       <PrioritySelect
         value={issue.priority}
         onChange={(data) => onChange({ priority: data })}
-        className="h-full"
-        buttonClassName="!border-0 !h-full !w-full !rounded-none px-4"
+        className="h-full w-full"
+        buttonClassName="!shadow-none !border-0 h-full w-full px-2.5 py-1 "
         showTitle
         highlightUrgentPriority={false}
         hideDropdownArrow
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
index cdacf4e72..446aba22a 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
@@ -24,6 +24,8 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = ({ issue, onChange, e
       <ViewStartDateSelect
         issue={issue}
         onChange={(val) => onChange({ start_date: val })}
+        className="!h-full !w-full max-w-full px-2.5 py-1 flex items-center"
+        buttonClassName="!h-full !w-full !shadow-none px-2.5"
         noBorder
         disabled={disabled}
       />
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
index 932d4359c..412e14e48 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
@@ -28,7 +28,8 @@ export const SpreadsheetStateColumn: React.FC<Props> = (props) => {
         projectId={issue.project_detail.id ?? null}
         value={issue.state_detail}
         onChange={(data) => onChange({ state: data.id, state_detail: data })}
-        buttonClassName="!shadow-none !border-0"
+        className="h-full w-full"
+        buttonClassName="!shadow-none !border-0 h-full w-full"
         hideDropdownArrow
         disabled={disabled}
       />
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
index 225657d34..dba684c84 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
@@ -21,7 +21,9 @@ export const SpreadsheetUpdatedOnColumn: React.FC<Props> = (props) => {
 
   return (
     <>
-      <div className="text-xs">{renderLongDetailDateFormat(issue.updated_at)}</div>
+      <div className="flex items-center justify-center text-xs h-full w-full">
+        {renderLongDetailDateFormat(issue.updated_at)}
+      </div>
 
       {isExpanded &&
         !isLoading &&
diff --git a/web/components/issues/view-select/due-date.tsx b/web/components/issues/view-select/due-date.tsx
index c2b94311d..f7dc4e09b 100644
--- a/web/components/issues/view-select/due-date.tsx
+++ b/web/components/issues/view-select/due-date.tsx
@@ -12,6 +12,8 @@ type Props = {
   handleOnOpen?: () => void;
   handleOnClose?: () => void;
   tooltipPosition?: "top" | "bottom";
+  className?: string;
+  buttonClassName?: string;
   noBorder?: boolean;
   disabled: boolean;
 };
@@ -22,6 +24,8 @@ export const ViewDueDateSelect: React.FC<Props> = ({
   handleOnOpen,
   handleOnClose,
   tooltipPosition = "top",
+  className = "",
+  buttonClassName = "",
   noBorder = false,
   disabled,
 }) => {
@@ -35,7 +39,7 @@ export const ViewDueDateSelect: React.FC<Props> = ({
       position={tooltipPosition}
     >
       <div
-        className={`group flex-shrink-0 relative max-w-[6.5rem] ${
+        className={`group flex-shrink-0 relative max-w-[6.5rem] ${className} ${
           issue.target_date === null
             ? ""
             : issue.target_date < new Date().toISOString()
@@ -47,7 +51,7 @@ export const ViewDueDateSelect: React.FC<Props> = ({
           placeholder="Due date"
           value={issue?.target_date}
           onChange={onChange}
-          className={`bg-transparent ${issue?.target_date ? "w-[6.5rem]" : "w-[5rem] text-center"}`}
+          className={`bg-transparent ${issue?.target_date ? "w-[6.5rem]" : "w-[5rem] text-center"} ${buttonClassName}`}
           minDate={minDate ?? undefined}
           noBorder={noBorder}
           handleOnOpen={handleOnOpen}
diff --git a/web/components/issues/view-select/start-date.tsx b/web/components/issues/view-select/start-date.tsx
index d70c0de46..e5858b18f 100644
--- a/web/components/issues/view-select/start-date.tsx
+++ b/web/components/issues/view-select/start-date.tsx
@@ -12,6 +12,8 @@ type Props = {
   handleOnOpen?: () => void;
   handleOnClose?: () => void;
   tooltipPosition?: "top" | "bottom";
+  className?: string;
+  buttonClassName?: string;
   noBorder?: boolean;
   disabled: boolean;
 };
@@ -22,6 +24,8 @@ export const ViewStartDateSelect: React.FC<Props> = ({
   handleOnOpen,
   handleOnClose,
   tooltipPosition = "top",
+  className = "",
+  buttonClassName = "",
   noBorder = false,
   disabled,
 }) => {
@@ -34,12 +38,12 @@ export const ViewStartDateSelect: React.FC<Props> = ({
       tooltipContent={issue.start_date ? renderShortDateWithYearFormat(issue.start_date) ?? "N/A" : "N/A"}
       position={tooltipPosition}
     >
-      <div className="group flex-shrink-0 relative max-w-[6.5rem]">
+      <div className={`group flex-shrink-0 relative max-w-[6.5rem] ${className}`}>
         <CustomDatePicker
           placeholder="Start date"
           value={issue?.start_date}
           onChange={onChange}
-          className={`bg-inherit ${issue?.start_date ? "w-[6.5rem]" : "w-[5rem] text-center"}`}
+          className={`bg-inherit ${issue?.start_date ? "w-[6.5rem]" : "w-[5rem] text-center"} ${buttonClassName}`}
           maxDate={maxDate ?? undefined}
           noBorder={noBorder}
           handleOnOpen={handleOnOpen}