plane/web/components/issues/issue-layouts/list/default.tsx

import React from "react";
import { observer } from "mobx-react-lite";
// components
import { ListGroupByHeaderRoot } from "./headers/group-by-root";
import { IssueBlocksList, ListInlineCreateIssueForm } from "components/issues";
// types
import { IEstimatePoint, IIssue, IIssueDisplayProperties, IIssueLabels, IProject, IState, IUserLite } from "types";
// constants
import { getValueFromObject } from "constants/issue";

export interface IGroupByList {
  issues: any;
  group_by: string | null;
  list: any;
  isReadonly?: boolean;
  listKey: string;
  handleIssues: (group_by: string | null, issue: IIssue, action: "update" | "delete") => void;
  quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode;
  displayProperties: IIssueDisplayProperties;
  is_list?: boolean;
  enableQuickIssueCreate?: boolean;
  showEmptyGroup?: boolean;
}

const GroupByList: React.FC<IGroupByList> = observer((props) => {
  const {
    issues,
    group_by,
    list,
    isReadonly,
    listKey,
    handleIssues,
    quickActions,
    displayProperties,
    is_list = false,
    enableQuickIssueCreate,
    showEmptyGroup,
  } = props;

  return (
    <div className="relative w-full h-full">
      {list &&
        list.length > 0 &&
        list.map((_list: any) => (
          <div key={getValueFromObject(_list, listKey) as string} className={`flex-shrink-0 flex flex-col`}>
            <div className="flex-shrink-0 w-full py-1 sticky top-0 z-[2] px-3 bg-custom-background-90">
              <ListGroupByHeaderRoot
                column_id={getValueFromObject(_list, listKey) as string}
                column_value={_list}
                group_by={group_by}
                issues_count={
                  is_list ? issues?.length || 0 : issues?.[getValueFromObject(_list, listKey) as string]?.length || 0
                }
              />
            </div>
            {issues && (
              <IssueBlocksList
                columnId={getValueFromObject(_list, listKey) as string}
                issues={is_list ? issues : issues[getValueFromObject(_list, listKey) as string]}
                handleIssues={handleIssues}
                quickActions={quickActions}
                displayProperties={displayProperties}
                isReadonly={isReadonly}
                showEmptyGroup={showEmptyGroup}
              />
            )}
            {enableQuickIssueCreate && (
              <ListInlineCreateIssueForm
                groupId={getValueFromObject(_list, listKey) as string}
                prePopulatedData={{
                  [group_by!]: getValueFromObject(_list, listKey),
                }}
              />
            )}
          </div>
        ))}
    </div>
  );
});

// TODO: update all the types
export interface IList {
  issues: any;
  group_by: string | null;
  isReadonly?: boolean;
  handleDragDrop?: (result: any) => void | undefined;
  handleIssues: (group_by: string | null, issue: IIssue, action: "update" | "delete") => void;
  quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode;
  displayProperties: IIssueDisplayProperties;
  states: IState[] | null;
  labels: IIssueLabels[] | null;
  members: IUserLite[] | null;
  projects: IProject[] | null;
  stateGroups: any;
  priorities: any;
  enableQuickIssueCreate?: boolean;
  estimates: IEstimatePoint[] | null;
  showEmptyGroup?: boolean;
}

export const List: React.FC<IList> = observer((props) => {
  const {
    issues,
    group_by,
    isReadonly,
    handleIssues,
    quickActions,
    displayProperties,
    states,
    labels,
    members,
    projects,
    stateGroups,
    priorities,
    showEmptyGroup,
    enableQuickIssueCreate,
  } = props;

  return (
    <div className="relative w-full h-full">
      {group_by === null && (
        <GroupByList
          issues={issues}
          group_by={group_by}
          list={[{ id: "null", title: "All Issues" }]}
          listKey={`id`}
          handleIssues={handleIssues}
          quickActions={quickActions}
          displayProperties={displayProperties}
          is_list
          enableQuickIssueCreate={enableQuickIssueCreate}
          isReadonly={isReadonly}
          showEmptyGroup={showEmptyGroup}
        />
      )}

      {group_by && group_by === "project" && projects && (
        <GroupByList
          issues={issues}
          group_by={group_by}
          list={projects}
          listKey={`id`}
          handleIssues={handleIssues}
          quickActions={quickActions}
          displayProperties={displayProperties}
          enableQuickIssueCreate={enableQuickIssueCreate}
          isReadonly={isReadonly}
          showEmptyGroup={showEmptyGroup}
        />
      )}

      {group_by && group_by === "state" && states && (
        <GroupByList
          issues={issues}
          group_by={group_by}
          list={states}
          listKey={`id`}
          handleIssues={handleIssues}
          quickActions={quickActions}
          displayProperties={displayProperties}
          enableQuickIssueCreate={enableQuickIssueCreate}
          isReadonly={isReadonly}
          showEmptyGroup={showEmptyGroup}
        />
      )}

      {group_by && group_by === "state_detail.group" && stateGroups && (
        <GroupByList
          issues={issues}
          group_by={group_by}
          list={stateGroups}
          listKey={`key`}
          handleIssues={handleIssues}
          quickActions={quickActions}
          displayProperties={displayProperties}
          enableQuickIssueCreate={enableQuickIssueCreate}
          isReadonly={isReadonly}
          showEmptyGroup={showEmptyGroup}
        />
      )}

      {group_by && group_by === "priority" && priorities && (
        <GroupByList
          issues={issues}
          group_by={group_by}
          list={priorities}
          listKey={`key`}
          handleIssues={handleIssues}
          quickActions={quickActions}
          displayProperties={displayProperties}
          enableQuickIssueCreate={enableQuickIssueCreate}
          isReadonly={isReadonly}
          showEmptyGroup={showEmptyGroup}
        />
      )}

      {group_by && group_by === "labels" && labels && (
        <GroupByList
          issues={issues}
          group_by={group_by}
          list={[...labels, { id: "None", name: "None" }]}
          listKey={`id`}
          handleIssues={handleIssues}
          quickActions={quickActions}
          displayProperties={displayProperties}
          enableQuickIssueCreate={enableQuickIssueCreate}
          isReadonly={isReadonly}
          showEmptyGroup={showEmptyGroup}
        />
      )}

      {group_by && group_by === "assignees" && members && (
        <GroupByList
          issues={issues}
          group_by={group_by}
          list={[...members, { id: "None", display_name: "None" }]}
          listKey={`id`}
          handleIssues={handleIssues}
          quickActions={quickActions}
          displayProperties={displayProperties}
          enableQuickIssueCreate={enableQuickIssueCreate}
          isReadonly={isReadonly}
          showEmptyGroup={showEmptyGroup}
        />
      )}

      {group_by && group_by === "created_by" && members && (
        <GroupByList
          issues={issues}
          group_by={group_by}
          list={members}
          listKey={`id`}
          handleIssues={handleIssues}
          quickActions={quickActions}
          displayProperties={displayProperties}
          enableQuickIssueCreate={enableQuickIssueCreate}
          isReadonly={isReadonly}
          showEmptyGroup={showEmptyGroup}
        />
      )}
    </div>
  );
});