refactor: spreadsheet layout (#2478)

* refactor: spreadsheet column components

* refactor: spreadsheet layout components

* fix: unique key for each cell

web/components/issues/issue-layouts/spreadsheet/assignee-column/assignee-column.tsx

@@ -1,32 +0,0 @@
-import React from "react";
-// components
-import { MembersSelect } from "components/project";
-// types
-import { IIssue, IUserLite } from "types";
-
-type Props = {
-  issue: IIssue;
-  onChange: (members: string[]) => void;
-  members: IUserLite[] | undefined;
-  disabled: boolean;
-};
-
-export const AssigneeColumn: React.FC<Props> = (props) => {
-  const { issue, onChange, members, disabled } = props;
-
-  return (
-    <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-        <MembersSelect
-          value={issue.assignees}
-          onChange={onChange}
-          members={members ?? []}
-          buttonClassName="!p-0 !rounded-none !shadow-none !border-0"
-          hideDropdownArrow
-          disabled={disabled}
-          multiple
-        />
-      </span>
-    </div>
-  );
-};

web/components/issues/issue-layouts/spreadsheet/assignee-column/index.ts

@@ -1,2 +0,0 @@
-export * from "./spreadsheet-assignee-column";
-export * from "./assignee-column";

web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 // components
-import { AssigneeColumn } from "components/issues";
+import { MembersSelect } from "components/project";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
@@ -21,12 +21,15 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = ({ issue, members, onC
   const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
 
   return (
-    <div>
-      <AssigneeColumn
-        issue={issue}
-        members={members}
+    <>
+      <MembersSelect
+        value={issue.assignees}
         onChange={(data) => onChange({ assignees_list: data })}
+        members={members ?? []}
+        buttonClassName="!p-0 !rounded-none !shadow-none !border-0"
+        hideDropdownArrow
         disabled={disabled}
+        multiple
       />
 
       {isExpanded &&
@@ -43,6 +46,6 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = ({ issue, members, onC
             disabled={disabled}
           />
         ))}
-    </div>
+    </>
   );
 };

web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 
-// components
-import { CreatedOnColumn } from "components/issues";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
+// helpers
+import { renderLongDetailDateFormat } from "helpers/date-time.helper";
 // types
 import { IIssue } from "types";
 
@@ -18,8 +18,8 @@ export const SpreadsheetCreatedOnColumn: React.FC<Props> = ({ issue, expandedIss
   const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
 
   return (
-    <div>
-      <CreatedOnColumn issue={issue} />
+    <>
+      {renderLongDetailDateFormat(issue.created_at)}
 
       {isExpanded &&
         !isLoading &&
@@ -28,6 +28,6 @@ export const SpreadsheetCreatedOnColumn: React.FC<Props> = ({ issue, expandedIss
         subIssues.map((subIssue: IIssue) => (
           <SpreadsheetCreatedOnColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
         ))}
-    </div>
+    </>
   );
 };

web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 // components
-import { DueDateColumn } from "components/issues";
+import { ViewDueDateSelect } from "components/issues";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
@@ -20,8 +20,13 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = ({ issue, onChange, exp
   const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
 
   return (
-    <div>
-      <DueDateColumn issue={issue} onChange={(val) => onChange({ target_date: val })} disabled={disabled} />
+    <>
+      <ViewDueDateSelect
+        issue={issue}
+        onChange={(val) => onChange({ target_date: val })}
+        noBorder
+        disabled={disabled}
+      />
 
       {isExpanded &&
         !isLoading &&
@@ -36,6 +41,6 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = ({ issue, onChange, exp
             disabled={disabled}
           />
         ))}
-    </div>
+    </>
   );
 };

web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx

@@ -1,5 +1,5 @@
 // components
-import { EstimateColumn } from "components/issues";
+import { ViewEstimateSelect } from "components/issues";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
@@ -20,8 +20,8 @@ export const SpreadsheetEstimateColumn: React.FC<Props> = (props) => {
   const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
 
   return (
-    <div>
-      <EstimateColumn issue={issue} onChange={(data) => onChange({ estimate_point: data })} disabled={disabled} />
+    <>
+      <ViewEstimateSelect issue={issue} onChange={(data) => onChange({ estimate_point: data })} disabled={disabled} />
 
       {isExpanded &&
         !isLoading &&
@@ -36,6 +36,6 @@ export const SpreadsheetEstimateColumn: React.FC<Props> = (props) => {
             disabled={disabled}
           />
         ))}
-    </div>
+    </>
   );
 };

web/components/issues/issue-layouts/spreadsheet/columns/index.ts

@@ -0,0 +1,11 @@
+export * from "./issue";
+export * from "./assignee-column";
+export * from "./columns-list";
+export * from "./created-on-column";
+export * from "./due-date-column";
+export * from "./estimate-column";
+export * from "./label-column";
+export * from "./priority-column";
+export * from "./start-date-column";
+export * from "./state-column";
+export * from "./updated-on-column";

web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx

@@ -63,7 +63,7 @@ export const IssueColumn: React.FC<Props> = ({
   const paddingLeft = `${nestingLevel * 54}px`;
 
   return (
-    <div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-r border-custom-border-100">
+    <div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-custom-border-100">
       {properties.key && (
         <div
           className="flex gap-1.5 px-4 pr-0 py-2.5 items-center min-w-[96px]"

web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 // components
-import { LabelColumn } from "components/issues";
+import { LabelSelect } from "components/project";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
@@ -23,11 +23,13 @@ export const SpreadsheetLabelColumn: React.FC<Props> = (props) => {
   const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
 
   return (
-    <div>
-      <LabelColumn
-        issue={issue}
+    <>
+      <LabelSelect
+        value={issue.labels}
         onChange={(data) => onChange({ labels_list: data })}
-        labels={labels}
+        labels={labels ?? []}
+        hideDropdownArrow
+        maxRender={1}
         disabled={disabled}
       />
 
@@ -45,6 +47,6 @@ export const SpreadsheetLabelColumn: React.FC<Props> = (props) => {
             disabled={disabled}
           />
         ))}
-    </div>
+    </>
   );
 };

web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 // components
-import { PriorityColumn } from "components/issues";
+import { PrioritySelect } from "components/project";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
@@ -21,7 +21,13 @@ export const SpreadsheetPriorityColumn: React.FC<Props> = ({ issue, onChange, ex
 
   return (
     <div>
-      <PriorityColumn issue={issue} onChange={(data) => onChange({ priority: data })} disabled={disabled} />
+      <PrioritySelect
+        value={issue.priority}
+        onChange={(data) => onChange({ priority: data })}
+        buttonClassName="!p-0 !rounded-none !shadow-none !border-0"
+        hideDropdownArrow
+        disabled={disabled}
+      />
 
       {isExpanded &&
         !isLoading &&

web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 // components
-import { StartDateColumn } from "components/issues";
+import { ViewStartDateSelect } from "components/issues";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
@@ -20,8 +20,13 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = ({ issue, onChange, e
   const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
 
   return (
-    <div>
-      <StartDateColumn issue={issue} onChange={(val) => onChange({ start_date: val })} disabled={disabled} />
+    <>
+      <ViewStartDateSelect
+        issue={issue}
+        onChange={(val) => onChange({ start_date: val })}
+        noBorder
+        disabled={disabled}
+      />
 
       {isExpanded &&
         !isLoading &&
@@ -36,6 +41,6 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = ({ issue, onChange, e
             disabled={disabled}
           />
         ))}
-    </div>
+    </>
   );
 };

web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 // components
-import { StateColumn } from "components/issues";
+import { StateSelect } from "components/states";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
@@ -23,11 +23,13 @@ export const SpreadsheetStateColumn: React.FC<Props> = (props) => {
   const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
 
   return (
-    <div>
-      <StateColumn
-        issue={issue}
+    <>
+      <StateSelect
+        value={issue.state_detail}
         onChange={(data) => onChange({ state: data.id, state_detail: data })}
-        states={states}
+        stateGroups={states}
+        buttonClassName="!shadow-none !border-0"
+        hideDropdownArrow
         disabled={disabled}
       />
 
@@ -45,6 +47,6 @@ export const SpreadsheetStateColumn: React.FC<Props> = (props) => {
             disabled={disabled}
           />
         ))}
-    </div>
+    </>
   );
 };

web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 
-// components
-import { UpdatedOnColumn } from "components/issues";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
+// helpers
+import { renderLongDetailDateFormat } from "helpers/date-time.helper";
 // types
 import { IIssue } from "types";
 
@@ -20,8 +20,8 @@ export const SpreadsheetUpdatedOnColumn: React.FC<Props> = (props) => {
   const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
 
   return (
-    <div>
-      <UpdatedOnColumn issue={issue} />
+    <>
+      {renderLongDetailDateFormat(issue.updated_at)}
 
       {isExpanded &&
         !isLoading &&
@@ -30,6 +30,6 @@ export const SpreadsheetUpdatedOnColumn: React.FC<Props> = (props) => {
         subIssues.map((subIssue: IIssue) => (
           <SpreadsheetUpdatedOnColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
         ))}
-    </div>
+    </>
   );
 };

web/components/issues/issue-layouts/spreadsheet/created-on-column/created-on-column.tsx

@@ -1,20 +0,0 @@
-import React from "react";
-
-// types
-import { IIssue } from "types";
-// helper
-import { renderLongDetailDateFormat } from "helpers/date-time.helper";
-
-type Props = {
-  issue: IIssue;
-};
-
-export const CreatedOnColumn: React.FC<Props> = ({ issue }) => (
-  <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-    <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-      <div className="flex items-center text-xs cursor-default text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-        {renderLongDetailDateFormat(issue.created_at)}
-      </div>
-    </span>
-  </div>
-);

web/components/issues/issue-layouts/spreadsheet/created-on-column/index.ts

@@ -1,2 +0,0 @@
-export * from "./spreadsheet-created-on-column";
-export * from "./created-on-column";

web/components/issues/issue-layouts/spreadsheet/due-date-column/due-date-column.tsx

@@ -1,23 +0,0 @@
-import { FC } from "react";
-// components
-import { ViewDueDateSelect } from "components/issues";
-// types
-import { IIssue } from "types";
-
-type Props = {
-  issue: IIssue;
-  onChange: (date: string | null) => void;
-  disabled: boolean;
-};
-
-export const DueDateColumn: FC<Props> = (props) => {
-  const { issue, onChange, disabled } = props;
-
-  return (
-    <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-        <ViewDueDateSelect issue={issue} onChange={onChange} noBorder disabled={disabled} />
-      </span>
-    </div>
-  );
-};

web/components/issues/issue-layouts/spreadsheet/due-date-column/index.ts

@@ -1,2 +0,0 @@
-export * from "./spreadsheet-due-date-column";
-export * from "./due-date-column";

web/components/issues/issue-layouts/spreadsheet/estimate-column/estimate-column.tsx

@@ -1,23 +0,0 @@
-import { FC } from "react";
-// components
-import { ViewEstimateSelect } from "components/issues";
-// types
-import { IIssue } from "types";
-
-type Props = {
-  issue: IIssue;
-  onChange: (data: number) => void;
-  disabled: boolean;
-};
-
-export const EstimateColumn: FC<Props> = (props) => {
-  const { issue, onChange, disabled } = props;
-
-  return (
-    <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-        <ViewEstimateSelect issue={issue} onChange={onChange} disabled={disabled} />
-      </span>
-    </div>
-  );
-};

web/components/issues/issue-layouts/spreadsheet/estimate-column/index.ts

@@ -1,2 +0,0 @@
-export * from "./spreadsheet-estimate-column";
-export * from "./estimate-column";

web/components/issues/issue-layouts/spreadsheet/index.ts

@@ -1,15 +1,4 @@
-export * from "./assignee-column";
-export * from "./created-on-column";
-export * from "./due-date-column";
-export * from "./estimate-column";
-export * from "./issue-column";
-export * from "./label-column";
-export * from "./priority-column";
+export * from "./columns";
 export * from "./roots";
-export * from "./start-date-column";
-export * from "./state-column";
-export * from "./updated-on-column";
-export * from "./issue-column";
 export * from "./spreadsheet-column";
-export * from "./spreadsheet-columns-list";
 export * from "./spreadsheet-view";

web/components/issues/issue-layouts/spreadsheet/label-column/index.ts

@@ -1,2 +0,0 @@
-export * from "./spreadsheet-label-column";
-export * from "./label-column";

web/components/issues/issue-layouts/spreadsheet/label-column/label-column.tsx

@@ -1,32 +0,0 @@
-import React from "react";
-
-// components
-import { LabelSelect } from "components/project";
-// types
-import { IIssue, IIssueLabels } from "types";
-
-type Props = {
-  issue: IIssue;
-  onChange: (data: string[]) => void;
-  labels: IIssueLabels[] | undefined;
-  disabled: boolean;
-};
-
-export const LabelColumn: React.FC<Props> = (props) => {
-  const { issue, onChange, labels, disabled } = props;
-
-  return (
-    <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-        <LabelSelect
-          value={issue.labels}
-          onChange={onChange}
-          labels={labels ?? []}
-          hideDropdownArrow
-          maxRender={1}
-          disabled={disabled}
-        />
-      </span>
-    </div>
-  );
-};

web/components/issues/issue-layouts/spreadsheet/priority-column/index.ts

@@ -1,2 +0,0 @@
-export * from "./spreadsheet-priority-column";
-export * from "./priority-column";

web/components/issues/issue-layouts/spreadsheet/priority-column/priority-column.tsx

@@ -1,28 +0,0 @@
-// components
-import { PrioritySelect } from "components/project";
-// types
-import { IIssue, TIssuePriorities } from "types";
-
-type Props = {
-  issue: IIssue;
-  onChange: (data: TIssuePriorities) => void;
-  disabled: boolean;
-};
-
-export const PriorityColumn: React.FC<Props> = (props) => {
-  const { issue, onChange, disabled } = props;
-
-  return (
-    <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-        <PrioritySelect
-          value={issue.priority}
-          onChange={onChange}
-          buttonClassName="!p-0 !rounded-none !shadow-none !border-0"
-          hideDropdownArrow
-          disabled={disabled}
-        />
-      </span>
-    </div>
-  );
-};

web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx

@@ -165,22 +165,22 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
             )}
         </CustomMenu>
       </div>
+
       <div className="h-full min-w-[8rem] w-full">
-        {issues?.map((issue) => {
-          if (property === "state")
-            return (
-              <SpreadsheetStateColumn
+        {issues?.map((issue) => (
+          <div
             key={`${property}-${issue.id}`}
+            className="h-11 flex items-center px-4 py-2.5 border-b-[0.5px] border-custom-border-200"
+          >
+            {property === "state" ? (
+              <SpreadsheetStateColumn
                 disabled={disableUserActions}
                 expandedIssues={expandedIssues}
                 issue={issue}
                 onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
                 states={states}
               />
-            );
-
-          if (property === "priority")
-            return (
+            ) : property === "priority" ? (
               <SpreadsheetPriorityColumn
                 key={`${property}-${issue.id}`}
                 disabled={disableUserActions}
@@ -188,10 +188,7 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
                 issue={issue}
                 onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
               />
-            );
-
-          if (property === "estimate")
-            return (
+            ) : property === "estimate" ? (
               <SpreadsheetEstimateColumn
                 key={`${property}-${issue.id}`}
                 disabled={disableUserActions}
@@ -199,9 +196,7 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
                 issue={issue}
                 onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
               />
-            );
-          if (property === "assignee")
-            return (
+            ) : property === "assignee" ? (
               <SpreadsheetAssigneeColumn
                 key={`${property}-${issue.id}`}
                 disabled={disableUserActions}
@@ -210,9 +205,7 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
                 members={members}
                 onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
               />
-            );
-          if (property === "labels")
-            return (
+            ) : property === "labels" ? (
               <SpreadsheetLabelColumn
                 key={`${property}-${issue.id}`}
                 disabled={disableUserActions}
@@ -221,9 +214,7 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
                 labels={labels}
                 onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
               />
-            );
-          if (property === "start_date")
-            return (
+            ) : property === "start_date" ? (
               <SpreadsheetStartDateColumn
                 key={`${property}-${issue.id}`}
                 disabled={disableUserActions}
@@ -231,9 +222,7 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
                 issue={issue}
                 onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
               />
-            );
-          if (property === "due_date")
-            return (
+            ) : property === "due_date" ? (
               <SpreadsheetDueDateColumn
                 key={`${property}-${issue.id}`}
                 disabled={disableUserActions}
@@ -241,26 +230,21 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
                 issue={issue}
                 onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
               />
-            );
-          if (property === "created_on")
-            return (
+            ) : property === "created_on" ? (
               <SpreadsheetCreatedOnColumn
                 key={`${property}-${issue.id}`}
                 expandedIssues={expandedIssues}
                 issue={issue}
               />
-            );
-          if (property === "updated_on")
-            return (
+            ) : property === "updated_on" ? (
               <SpreadsheetUpdatedOnColumn
                 key={`${property}-${issue.id}`}
                 expandedIssues={expandedIssues}
                 issue={issue}
               />
-            );
-
-          return null;
-        })}
+            ) : null}
+          </div>
+        ))}
       </div>
     </div>
   );

web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx

@@ -80,10 +80,12 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
   }, []);
 
   return (
-    <>
     <div className="relative flex h-full w-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-200">
       <div className="h-full w-full flex flex-col">
-          <div ref={containerRef} className="flex max-h-full h-full overflow-y-auto">
+        <div
+          ref={containerRef}
+          className="flex max-h-full h-full overflow-y-auto divide-x-[0.5px] divide-custom-border-200"
+        >
           {issues ? (
             <>
               <div className="sticky left-0 w-[28rem] z-[2]">
@@ -183,6 +185,5 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
         </div>
       </div>
     </div>
-    </>
   );
 });

web/components/issues/issue-layouts/spreadsheet/start-date-column/index.ts

@@ -1,2 +0,0 @@
-export * from "./spreadsheet-start-date-column";
-export * from "./start-date-column";

web/components/issues/issue-layouts/spreadsheet/start-date-column/start-date-column.tsx

@@ -1,22 +0,0 @@
-import React from "react";
-// components
-import { ViewStartDateSelect } from "components/issues";
-// types
-import { IIssue } from "types";
-
-type Props = {
-  issue: IIssue;
-  onChange: (data: string | null) => void;
-  disabled: boolean;
-};
-
-export const StartDateColumn: React.FC<Props> = (props) => {
-  const { issue, onChange, disabled } = props;
-  return (
-    <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-        <ViewStartDateSelect issue={issue} onChange={onChange} noBorder disabled={disabled} />
-      </span>
-    </div>
-  );
-};

web/components/issues/issue-layouts/spreadsheet/state-column/index.ts

@@ -1,2 +0,0 @@
-export * from "./spreadsheet-state-column";
-export * from "./state-column";

web/components/issues/issue-layouts/spreadsheet/state-column/state-column.tsx

@@ -1,31 +0,0 @@
-import React from "react";
-// components
-import { StateSelect } from "components/states";
-// types
-import { IIssue, IState, IStateResponse } from "types";
-
-type Props = {
-  issue: IIssue;
-  onChange: (formData: IState) => void;
-  states: IStateResponse | undefined;
-  disabled: boolean;
-};
-
-export const StateColumn: React.FC<Props> = (props) => {
-  const { issue, onChange, states, disabled } = props;
-
-  return (
-    <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-        <StateSelect
-          value={issue.state_detail}
-          onChange={onChange}
-          stateGroups={states}
-          buttonClassName="!shadow-none !border-0"
-          hideDropdownArrow
-          disabled={disabled}
-        />
-      </span>
-    </div>
-  );
-};

web/components/issues/issue-layouts/spreadsheet/updated-on-column/index.ts

@@ -1,2 +0,0 @@
-export * from "./spreadsheet-updated-on-column";
-export * from "./updated-on-column";

web/components/issues/issue-layouts/spreadsheet/updated-on-column/updated-on-column.tsx

@@ -1,22 +0,0 @@
-// helpers
-import { renderLongDetailDateFormat } from "helpers/date-time.helper";
-// types
-import { IIssue } from "types";
-
-type Props = {
-  issue: IIssue;
-};
-
-export const UpdatedOnColumn: React.FC<Props> = (props) => {
-  const { issue } = props;
-
-  return (
-    <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-        <div className="flex items-center text-xs cursor-default text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-          {renderLongDetailDateFormat(issue.updated_at)}
-        </div>
-      </span>
-    </div>
-  );
-};

web/components/issues/view-select/start-date.tsx

@@ -39,7 +39,7 @@ export const ViewStartDateSelect: React.FC<Props> = ({
           placeholder="Start date"
           value={issue?.start_date}
           onChange={onChange}
-          className={`bg-transparent ${issue?.start_date ? "w-[6.5rem]" : "w-[5rem] text-center"}`}
+          className={`bg-inherit ${issue?.start_date ? "w-[6.5rem]" : "w-[5rem] text-center"}`}
           maxDate={maxDate ?? undefined}
           noBorder={noBorder}
           handleOnOpen={handleOnOpen}

web/styles/command-pallette.css

@@ -9,13 +9,13 @@
 }
 
 [cmdk-item] {
-  display: flex;
+  /* display: flex;
   align-items: center;
   justify-content: space-between;
   border-radius: 0.375rem;
   padding: 0.5rem;
   font-size: 0.825rem;
-  line-height: 1.25rem;
+  line-height: 1.25rem; */
   cursor: pointer;
 }