chore: created new issue peek overview component and implemented in project issues list view (#2481)

* chore: created new issue peek overview component and implemented in project issues list view * build: default project props in project, cycles, modules and view layout
2023-10-18 19:58:05 +05:30 · 2023-10-18 19:58:05 +05:30 · 9b96e297b3
commit 9b96e297b3
parent 704fe155af
15 changed files with 955 additions and 278 deletions
--- a/web/components/issues/issue-layouts/kanban/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/cycle-root.tsx
@ -9,11 +9,14 @@ import { KanBan } from "./default";
 // store
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";

 export interface ICycleKanBanLayout {}

 export const CycleKanBanLayout: React.FC = observer(() => {
  const {
+    project: projectStore,
    cycleIssue: cycleIssueStore,
    issueFilter: issueFilterStore,
    cycleIssueKanBanView: cycleIssueKanBanViewStore,
@ -55,6 +58,14 @@ export const CycleKanBanLayout: React.FC = observer(() => {
    cycleIssueKanBanViewStore.handleKanBanToggle(toggle, value);
  };

+  const states = projectStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = projectStore?.projectLabels || null;
+  const members = projectStore?.projectMembers || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = projectStore?.projectStates || null;
+  const estimates = null;
+
  return (
    <div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90 px-3`}>
      <DragDropContext onDragEnd={onDragEnd}>
@ -67,6 +78,13 @@ export const CycleKanBanLayout: React.FC = observer(() => {
            display_properties={display_properties}
            kanBanToggle={cycleIssueKanBanViewStore?.kanBanToggle}
            handleKanBanToggle={handleKanBanToggle}
+            states={states}
+            stateGroups={stateGroups}
+            priorities={priorities}
+            labels={labels}
+            members={members}
+            projects={projects}
+            estimates={estimates}
          />
        ) : (
          <KanBanSwimLanes
@ -77,6 +95,13 @@ export const CycleKanBanLayout: React.FC = observer(() => {
            display_properties={display_properties}
            kanBanToggle={cycleIssueKanBanViewStore?.kanBanToggle}
            handleKanBanToggle={handleKanBanToggle}
+            states={states}
+            stateGroups={stateGroups}
+            priorities={priorities}
+            labels={labels}
+            members={members}
+            projects={projects}
+            estimates={estimates}
          />
        )}
      </DragDropContext>
--- a/web/components/issues/issue-layouts/kanban/default.tsx
+++ b/web/components/issues/issue-layouts/kanban/default.tsx
@ -114,10 +114,18 @@ export interface IKanBan {
  display_properties: any;
  kanBanToggle: any;
  handleKanBanToggle: any;
+
+  states: any;
+  stateGroups: any;
+  priorities: any;
+  labels: any;
+  members: any;
+  projects: any;
+  estimates: any;
 }

-export const KanBan: React.FC<IKanBan> = observer(
-  ({
+export const KanBan: React.FC<IKanBan> = observer((props) => {
+  const {
    issues,
    sub_group_by,
    group_by,
@ -126,107 +134,114 @@ export const KanBan: React.FC<IKanBan> = observer(
    display_properties,
    kanBanToggle,
    handleKanBanToggle,
-  }) => {
-    const { project: projectStore, issueKanBanView: issueKanBanViewStore }: RootStore = useMobxStore();
+    states,
+    stateGroups,
+    priorities,
+    labels,
+    members,
+    projects,
+    estimates,
+  } = props;

-    return (
-      <div className="relative w-full h-full">
-        {group_by && group_by === "state" && (
-          <GroupByKanBan
-            issues={issues}
-            group_by={group_by}
-            sub_group_by={sub_group_by}
-            sub_group_id={sub_group_id}
-            list={projectStore?.projectStates}
-            listKey={`id`}
-            isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
-            handleIssues={handleIssues}
-            display_properties={display_properties}
-            kanBanToggle={kanBanToggle}
-            handleKanBanToggle={handleKanBanToggle}
-          />
-        )}
+  const { project: projectStore, issueKanBanView: issueKanBanViewStore }: RootStore = useMobxStore();

-        {group_by && group_by === "state_detail.group" && (
-          <GroupByKanBan
-            issues={issues}
-            group_by={group_by}
-            sub_group_by={sub_group_by}
-            sub_group_id={sub_group_id}
-            list={ISSUE_STATE_GROUPS}
-            listKey={`key`}
-            isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
-            handleIssues={handleIssues}
-            display_properties={display_properties}
-            kanBanToggle={kanBanToggle}
-            handleKanBanToggle={handleKanBanToggle}
-          />
-        )}
+  return (
+    <div className="relative w-full h-full">
+      {group_by && group_by === "state" && (
+        <GroupByKanBan
+          issues={issues}
+          group_by={group_by}
+          sub_group_by={sub_group_by}
+          sub_group_id={sub_group_id}
+          list={projectStore?.projectStates}
+          listKey={`id`}
+          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+          handleIssues={handleIssues}
+          display_properties={display_properties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+        />
+      )}

-        {group_by && group_by === "priority" && (
-          <GroupByKanBan
-            issues={issues}
-            group_by={group_by}
-            sub_group_by={sub_group_by}
-            sub_group_id={sub_group_id}
-            list={ISSUE_PRIORITIES}
-            listKey={`key`}
-            isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
-            handleIssues={handleIssues}
-            display_properties={display_properties}
-            kanBanToggle={kanBanToggle}
-            handleKanBanToggle={handleKanBanToggle}
-          />
-        )}
+      {group_by && group_by === "state_detail.group" && (
+        <GroupByKanBan
+          issues={issues}
+          group_by={group_by}
+          sub_group_by={sub_group_by}
+          sub_group_id={sub_group_id}
+          list={ISSUE_STATE_GROUPS}
+          listKey={`key`}
+          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+          handleIssues={handleIssues}
+          display_properties={display_properties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+        />
+      )}

-        {group_by && group_by === "labels" && (
-          <GroupByKanBan
-            issues={issues}
-            group_by={group_by}
-            sub_group_by={sub_group_by}
-            sub_group_id={sub_group_id}
-            list={projectStore?.projectLabels}
-            listKey={`id`}
-            isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
-            handleIssues={handleIssues}
-            display_properties={display_properties}
-            kanBanToggle={kanBanToggle}
-            handleKanBanToggle={handleKanBanToggle}
-          />
-        )}
+      {group_by && group_by === "priority" && (
+        <GroupByKanBan
+          issues={issues}
+          group_by={group_by}
+          sub_group_by={sub_group_by}
+          sub_group_id={sub_group_id}
+          list={ISSUE_PRIORITIES}
+          listKey={`key`}
+          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+          handleIssues={handleIssues}
+          display_properties={display_properties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+        />
+      )}

-        {group_by && group_by === "assignees" && (
-          <GroupByKanBan
-            issues={issues}
-            group_by={group_by}
-            sub_group_by={sub_group_by}
-            sub_group_id={sub_group_id}
-            list={projectStore?.projectMembers}
-            listKey={`member.id`}
-            isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
-            handleIssues={handleIssues}
-            display_properties={display_properties}
-            kanBanToggle={kanBanToggle}
-            handleKanBanToggle={handleKanBanToggle}
-          />
-        )}
+      {group_by && group_by === "labels" && (
+        <GroupByKanBan
+          issues={issues}
+          group_by={group_by}
+          sub_group_by={sub_group_by}
+          sub_group_id={sub_group_id}
+          list={projectStore?.projectLabels}
+          listKey={`id`}
+          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+          handleIssues={handleIssues}
+          display_properties={display_properties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+        />
+      )}

-        {group_by && group_by === "created_by" && (
-          <GroupByKanBan
-            issues={issues}
-            group_by={group_by}
-            sub_group_by={sub_group_by}
-            sub_group_id={sub_group_id}
-            list={projectStore?.projectMembers}
-            listKey={`member.id`}
-            isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
-            handleIssues={handleIssues}
-            display_properties={display_properties}
-            kanBanToggle={kanBanToggle}
-            handleKanBanToggle={handleKanBanToggle}
-          />
-        )}
-      </div>
-    );
-  }
-);
+      {group_by && group_by === "assignees" && (
+        <GroupByKanBan
+          issues={issues}
+          group_by={group_by}
+          sub_group_by={sub_group_by}
+          sub_group_id={sub_group_id}
+          list={projectStore?.projectMembers}
+          listKey={`member.id`}
+          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+          handleIssues={handleIssues}
+          display_properties={display_properties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+        />
+      )}
+
+      {group_by && group_by === "created_by" && (
+        <GroupByKanBan
+          issues={issues}
+          group_by={group_by}
+          sub_group_by={sub_group_by}
+          sub_group_id={sub_group_id}
+          list={projectStore?.projectMembers}
+          listKey={`member.id`}
+          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+          handleIssues={handleIssues}
+          display_properties={display_properties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+        />
+      )}
+    </div>
+  );
+});
--- a/web/components/issues/issue-layouts/kanban/module-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/module-root.tsx
@ -9,11 +9,14 @@ import { KanBan } from "./default";
 // store
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";

 export interface IModuleKanBanLayout {}

 export const ModuleKanBanLayout: React.FC = observer(() => {
  const {
+    project: projectStore,
    moduleIssue: moduleIssueStore,
    issueFilter: issueFilterStore,
    moduleIssueKanBanView: moduleIssueKanBanViewStore,
@ -55,6 +58,14 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
    moduleIssueKanBanViewStore.handleKanBanToggle(toggle, value);
  };

+  const states = projectStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = projectStore?.projectLabels || null;
+  const members = projectStore?.projectMembers || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = projectStore?.projectStates || null;
+  const estimates = null;
+
  return (
    <div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90 px-3`}>
      <DragDropContext onDragEnd={onDragEnd}>
@ -67,6 +78,13 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
            display_properties={display_properties}
            kanBanToggle={moduleIssueKanBanViewStore?.kanBanToggle}
            handleKanBanToggle={handleKanBanToggle}
+            states={states}
+            stateGroups={stateGroups}
+            priorities={priorities}
+            labels={labels}
+            members={members}
+            projects={projects}
+            estimates={estimates}
          />
        ) : (
          <KanBanSwimLanes
@ -77,6 +95,13 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
            display_properties={display_properties}
            kanBanToggle={moduleIssueKanBanViewStore?.kanBanToggle}
            handleKanBanToggle={handleKanBanToggle}
+            states={states}
+            stateGroups={stateGroups}
+            priorities={priorities}
+            labels={labels}
+            members={members}
+            projects={projects}
+            estimates={estimates}
          />
        )}
      </DragDropContext>
--- a/web/components/issues/issue-layouts/kanban/profile-issues-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/profile-issues-root.tsx
@ -1,5 +1,4 @@
-import React from "react";
-// react beautiful dnd
+import { FC } from "react";
 import { DragDropContext } from "@hello-pangea/dnd";
 // mobx
 import { observer } from "mobx-react-lite";
@ -9,11 +8,15 @@ import { KanBan } from "./default";
 // store
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";

 export interface IProfileIssuesKanBanLayout {}

-export const ProfileIssuesKanBanLayout: React.FC = observer(() => {
+export const ProfileIssuesKanBanLayout: FC = observer(() => {
  const {
+    workspace: workspaceStore,
+    project: projectStore,
    profileIssues: profileIssuesStore,
    profileIssueFilters: profileIssueFiltersStore,
    issueKanBanView: issueKanBanViewStore,
@ -55,6 +58,14 @@ export const ProfileIssuesKanBanLayout: React.FC = observer(() => {
    issueKanBanViewStore.handleKanBanToggle(toggle, value);
  };

+  const states = projectStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = workspaceStore.workspaceLabels || null;
+  const members = projectStore?.projectMembers || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = projectStore?.workspaceProjects || null;
+  const estimates = null;
+
  return (
    <div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90 px-3`}>
      <DragDropContext onDragEnd={onDragEnd}>
@ -67,6 +78,13 @@ export const ProfileIssuesKanBanLayout: React.FC = observer(() => {
            display_properties={display_properties}
            kanBanToggle={issueKanBanViewStore?.kanBanToggle}
            handleKanBanToggle={handleKanBanToggle}
+            states={states}
+            stateGroups={stateGroups}
+            priorities={priorities}
+            labels={labels}
+            members={members}
+            projects={projects}
+            estimates={estimates}
          />
        ) : (
          <KanBanSwimLanes
@ -77,6 +95,13 @@ export const ProfileIssuesKanBanLayout: React.FC = observer(() => {
            display_properties={display_properties}
            kanBanToggle={issueKanBanViewStore?.kanBanToggle}
            handleKanBanToggle={handleKanBanToggle}
+            states={states}
+            stateGroups={stateGroups}
+            priorities={priorities}
+            labels={labels}
+            members={members}
+            projects={projects}
+            estimates={estimates}
          />
        )}
      </DragDropContext>
--- a/web/components/issues/issue-layouts/kanban/root.tsx
+++ b/web/components/issues/issue-layouts/kanban/root.tsx
@ -76,13 +76,13 @@ export const KanBanLayout: FC = observer(() => {
            display_properties={display_properties}
            kanBanToggle={issueKanBanViewStore?.kanBanToggle}
            handleKanBanToggle={handleKanBanToggle}
-            // states={states}
-            // stateGroups={stateGroups}
-            // priorities={priorities}
-            // labels={labels}
-            // members={members}
-            // projects={projects}
-            // estimates={estimates}
+            states={states}
+            stateGroups={stateGroups}
+            priorities={priorities}
+            labels={labels}
+            members={members}
+            projects={projects}
+            estimates={estimates}
          />
        ) : (
          <KanBanSwimLanes
@ -93,13 +93,13 @@ export const KanBanLayout: FC = observer(() => {
            display_properties={display_properties}
            kanBanToggle={issueKanBanViewStore?.kanBanToggle}
            handleKanBanToggle={handleKanBanToggle}
-            // states={states}
-            // stateGroups={stateGroups}
-            // priorities={priorities}
-            // labels={labels}
-            // members={members}
-            // projects={projects}
-            // estimates={estimates}
+            states={states}
+            stateGroups={stateGroups}
+            priorities={priorities}
+            labels={labels}
+            members={members}
+            projects={projects}
+            estimates={estimates}
          />
        )}
      </DragDropContext>
--- a/web/components/issues/issue-layouts/kanban/swimlanes.tsx
+++ b/web/components/issues/issue-layouts/kanban/swimlanes.tsx
@ -64,9 +64,16 @@ interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
  display_properties: any;
  kanBanToggle: any;
  handleKanBanToggle: any;
+  states: any;
+  stateGroups: any;
+  priorities: any;
+  labels: any;
+  members: any;
+  projects: any;
+  estimates: any;
 }
-const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer(
-  ({
+const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
+  const {
    issues,
    sub_group_by,
    group_by,
@ -76,55 +83,69 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer(
    display_properties,
    kanBanToggle,
    handleKanBanToggle,
-  }) => {
-    const calculateIssueCount = (column_id: string) => {
-      let issueCount = 0;
-      issues?.[column_id] &&
-        Object.keys(issues?.[column_id])?.forEach((_list: any) => {
-          issueCount += issues?.[column_id]?.[_list]?.length || 0;
-        });
-      return issueCount;
-    };
+    states,
+    stateGroups,
+    priorities,
+    labels,
+    members,
+    projects,
+    estimates,
+  } = props;

-    return (
-      <div className="relative w-full min-h-full h-max">
-        {list &&
-          list.length > 0 &&
-          list.map((_list: any) => (
-            <div className="flex-shrink-0 flex flex-col">
-              <div className="sticky top-[50px] w-full z-[1] bg-custom-background-90 flex items-center py-1">
-                <div className="flex-shrink-0 sticky left-0 bg-custom-background-90 pr-2">
-                  <KanBanSubGroupByHeaderRoot
-                    column_id={getValueFromObject(_list, listKey) as string}
-                    sub_group_by={sub_group_by}
-                    group_by={group_by}
-                    issues_count={calculateIssueCount(getValueFromObject(_list, listKey) as string)}
-                    kanBanToggle={kanBanToggle}
-                    handleKanBanToggle={handleKanBanToggle}
-                  />
-                </div>
-                <div className="w-full border-b border-custom-border-400 border-dashed" />
+  const calculateIssueCount = (column_id: string) => {
+    let issueCount = 0;
+    issues?.[column_id] &&
+      Object.keys(issues?.[column_id])?.forEach((_list: any) => {
+        issueCount += issues?.[column_id]?.[_list]?.length || 0;
+      });
+    return issueCount;
+  };
+
+  return (
+    <div className="relative w-full min-h-full h-max">
+      {list &&
+        list.length > 0 &&
+        list.map((_list: any) => (
+          <div className="flex-shrink-0 flex flex-col">
+            <div className="sticky top-[50px] w-full z-[1] bg-custom-background-90 flex items-center py-1">
+              <div className="flex-shrink-0 sticky left-0 bg-custom-background-90 pr-2">
+                <KanBanSubGroupByHeaderRoot
+                  column_id={getValueFromObject(_list, listKey) as string}
+                  sub_group_by={sub_group_by}
+                  group_by={group_by}
+                  issues_count={calculateIssueCount(getValueFromObject(_list, listKey) as string)}
+                  kanBanToggle={kanBanToggle}
+                  handleKanBanToggle={handleKanBanToggle}
+                />
              </div>
-              {!kanBanToggle?.subgroupByIssuesVisibility.includes(getValueFromObject(_list, listKey) as string) && (
-                <div className="relative">
-                  <KanBan
-                    issues={issues?.[getValueFromObject(_list, listKey) as string]}
-                    sub_group_by={sub_group_by}
-                    group_by={group_by}
-                    sub_group_id={getValueFromObject(_list, listKey) as string}
-                    handleIssues={handleIssues}
-                    display_properties={display_properties}
-                    kanBanToggle={kanBanToggle}
-                    handleKanBanToggle={handleKanBanToggle}
-                  />
-                </div>
-              )}
+              <div className="w-full border-b border-custom-border-400 border-dashed" />
            </div>
-          ))}
-      </div>
-    );
-  }
-);
+            {!kanBanToggle?.subgroupByIssuesVisibility.includes(getValueFromObject(_list, listKey) as string) && (
+              <div className="relative">
+                <KanBan
+                  issues={issues?.[getValueFromObject(_list, listKey) as string]}
+                  sub_group_by={sub_group_by}
+                  group_by={group_by}
+                  sub_group_id={getValueFromObject(_list, listKey) as string}
+                  handleIssues={handleIssues}
+                  display_properties={display_properties}
+                  kanBanToggle={kanBanToggle}
+                  handleKanBanToggle={handleKanBanToggle}
+                  states={states}
+                  stateGroups={stateGroups}
+                  priorities={priorities}
+                  labels={labels}
+                  members={members}
+                  projects={projects}
+                  estimates={estimates}
+                />
+              </div>
+            )}
+          </div>
+        ))}
+    </div>
+  );
+});

 export interface IKanBanSwimLanes {
  issues: any;
@ -134,172 +155,236 @@ export interface IKanBanSwimLanes {
  display_properties: any;
  kanBanToggle: any;
  handleKanBanToggle: any;
+  states: any;
+  stateGroups: any;
+  priorities: any;
+  labels: any;
+  members: any;
+  projects: any;
+  estimates: any;
 }

-export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer(
-  ({ issues, sub_group_by, group_by, handleIssues, display_properties, kanBanToggle, handleKanBanToggle }) => {
-    const { project: projectStore }: RootStore = useMobxStore();
+export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
+  const {
+    issues,
+    sub_group_by,
+    group_by,
+    handleIssues,
+    display_properties,
+    kanBanToggle,
+    handleKanBanToggle,
+    states,
+    stateGroups,
+    priorities,
+    labels,
+    members,
+    projects,
+    estimates,
+  } = props;

-    return (
-      <div className="relative">
-        <div className="sticky top-0 z-[2] bg-custom-background-90 h-[50px]">
-          {group_by && group_by === "state" && (
-            <SubGroupSwimlaneHeader
-              issues={issues}
-              sub_group_by={sub_group_by}
-              group_by={group_by}
-              list={projectStore?.projectStates}
-              listKey={`id`}
-              kanBanToggle={kanBanToggle}
-              handleKanBanToggle={handleKanBanToggle}
-            />
-          )}
+  const { project: projectStore }: RootStore = useMobxStore();

-          {group_by && group_by === "state_detail.group" && (
-            <SubGroupSwimlaneHeader
-              issues={issues}
-              sub_group_by={sub_group_by}
-              group_by={group_by}
-              list={ISSUE_STATE_GROUPS}
-              listKey={`key`}
-              kanBanToggle={kanBanToggle}
-              handleKanBanToggle={handleKanBanToggle}
-            />
-          )}
-
-          {group_by && group_by === "priority" && (
-            <SubGroupSwimlaneHeader
-              issues={issues}
-              sub_group_by={sub_group_by}
-              group_by={group_by}
-              list={ISSUE_PRIORITIES}
-              listKey={`key`}
-              kanBanToggle={kanBanToggle}
-              handleKanBanToggle={handleKanBanToggle}
-            />
-          )}
-
-          {group_by && group_by === "labels" && (
-            <SubGroupSwimlaneHeader
-              issues={issues}
-              sub_group_by={sub_group_by}
-              group_by={group_by}
-              list={projectStore?.projectLabels}
-              listKey={`id`}
-              kanBanToggle={kanBanToggle}
-              handleKanBanToggle={handleKanBanToggle}
-            />
-          )}
-
-          {group_by && group_by === "assignees" && (
-            <SubGroupSwimlaneHeader
-              issues={issues}
-              sub_group_by={sub_group_by}
-              group_by={group_by}
-              list={projectStore?.projectMembers}
-              listKey={`member.id`}
-              kanBanToggle={kanBanToggle}
-              handleKanBanToggle={handleKanBanToggle}
-            />
-          )}
-
-          {group_by && group_by === "created_by" && (
-            <SubGroupSwimlaneHeader
-              issues={issues}
-              sub_group_by={sub_group_by}
-              group_by={group_by}
-              list={projectStore?.projectMembers}
-              listKey={`member.id`}
-              kanBanToggle={kanBanToggle}
-              handleKanBanToggle={handleKanBanToggle}
-            />
-          )}
-        </div>
-
-        {sub_group_by && sub_group_by === "state" && (
-          <SubGroupSwimlane
+  return (
+    <div className="relative">
+      <div className="sticky top-0 z-[2] bg-custom-background-90 h-[50px]">
+        {group_by && group_by === "state" && (
+          <SubGroupSwimlaneHeader
            issues={issues}
            sub_group_by={sub_group_by}
            group_by={group_by}
            list={projectStore?.projectStates}
            listKey={`id`}
-            handleIssues={handleIssues}
-            display_properties={display_properties}
            kanBanToggle={kanBanToggle}
            handleKanBanToggle={handleKanBanToggle}
          />
        )}

-        {sub_group_by && sub_group_by === "state_detail.group" && (
-          <SubGroupSwimlane
+        {group_by && group_by === "state_detail.group" && (
+          <SubGroupSwimlaneHeader
            issues={issues}
            sub_group_by={sub_group_by}
            group_by={group_by}
            list={ISSUE_STATE_GROUPS}
            listKey={`key`}
-            handleIssues={handleIssues}
-            display_properties={display_properties}
            kanBanToggle={kanBanToggle}
            handleKanBanToggle={handleKanBanToggle}
          />
        )}

-        {sub_group_by && sub_group_by === "priority" && (
-          <SubGroupSwimlane
+        {group_by && group_by === "priority" && (
+          <SubGroupSwimlaneHeader
            issues={issues}
            sub_group_by={sub_group_by}
            group_by={group_by}
            list={ISSUE_PRIORITIES}
            listKey={`key`}
-            handleIssues={handleIssues}
-            display_properties={display_properties}
            kanBanToggle={kanBanToggle}
            handleKanBanToggle={handleKanBanToggle}
          />
        )}

-        {sub_group_by && sub_group_by === "labels" && (
-          <SubGroupSwimlane
+        {group_by && group_by === "labels" && (
+          <SubGroupSwimlaneHeader
            issues={issues}
            sub_group_by={sub_group_by}
            group_by={group_by}
            list={projectStore?.projectLabels}
            listKey={`id`}
-            handleIssues={handleIssues}
-            display_properties={display_properties}
            kanBanToggle={kanBanToggle}
            handleKanBanToggle={handleKanBanToggle}
          />
        )}

-        {sub_group_by && sub_group_by === "assignees" && (
-          <SubGroupSwimlane
+        {group_by && group_by === "assignees" && (
+          <SubGroupSwimlaneHeader
            issues={issues}
            sub_group_by={sub_group_by}
            group_by={group_by}
            list={projectStore?.projectMembers}
            listKey={`member.id`}
-            handleIssues={handleIssues}
-            display_properties={display_properties}
            kanBanToggle={kanBanToggle}
            handleKanBanToggle={handleKanBanToggle}
          />
        )}

-        {sub_group_by && sub_group_by === "created_by" && (
-          <SubGroupSwimlane
+        {group_by && group_by === "created_by" && (
+          <SubGroupSwimlaneHeader
            issues={issues}
            sub_group_by={sub_group_by}
            group_by={group_by}
            list={projectStore?.projectMembers}
            listKey={`member.id`}
-            handleIssues={handleIssues}
-            display_properties={display_properties}
            kanBanToggle={kanBanToggle}
            handleKanBanToggle={handleKanBanToggle}
          />
        )}
      </div>
-    );
-  }
-);
+
+      {sub_group_by && sub_group_by === "state" && (
+        <SubGroupSwimlane
+          issues={issues}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          list={projectStore?.projectStates}
+          listKey={`id`}
+          handleIssues={handleIssues}
+          display_properties={display_properties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          states={states}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          labels={labels}
+          members={members}
+          projects={projects}
+          estimates={estimates}
+        />
+      )}
+
+      {sub_group_by && sub_group_by === "state_detail.group" && (
+        <SubGroupSwimlane
+          issues={issues}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          list={ISSUE_STATE_GROUPS}
+          listKey={`key`}
+          handleIssues={handleIssues}
+          display_properties={display_properties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          states={states}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          labels={labels}
+          members={members}
+          projects={projects}
+          estimates={estimates}
+        />
+      )}
+
+      {sub_group_by && sub_group_by === "priority" && (
+        <SubGroupSwimlane
+          issues={issues}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          list={ISSUE_PRIORITIES}
+          listKey={`key`}
+          handleIssues={handleIssues}
+          display_properties={display_properties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          states={states}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          labels={labels}
+          members={members}
+          projects={projects}
+          estimates={estimates}
+        />
+      )}
+
+      {sub_group_by && sub_group_by === "labels" && (
+        <SubGroupSwimlane
+          issues={issues}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          list={projectStore?.projectLabels}
+          listKey={`id`}
+          handleIssues={handleIssues}
+          display_properties={display_properties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          states={states}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          labels={labels}
+          members={members}
+          projects={projects}
+          estimates={estimates}
+        />
+      )}
+
+      {sub_group_by && sub_group_by === "assignees" && (
+        <SubGroupSwimlane
+          issues={issues}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          list={projectStore?.projectMembers}
+          listKey={`member.id`}
+          handleIssues={handleIssues}
+          display_properties={display_properties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          states={states}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          labels={labels}
+          members={members}
+          projects={projects}
+          estimates={estimates}
+        />
+      )}
+
+      {sub_group_by && sub_group_by === "created_by" && (
+        <SubGroupSwimlane
+          issues={issues}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          list={projectStore?.projectMembers}
+          listKey={`member.id`}
+          handleIssues={handleIssues}
+          display_properties={display_properties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          states={states}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          labels={labels}
+          members={members}
+          projects={projects}
+          estimates={estimates}
+        />
+      )}
+    </div>
+  );
+});
--- a/web/components/issues/issue-layouts/kanban/view-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/view-root.tsx
@ -9,11 +9,14 @@ import { KanBan } from "./default";
 // store
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";

 export interface IViewKanBanLayout {}

 export const ViewKanBanLayout: React.FC = observer(() => {
  const {
+    project: projectStore,
    issue: issueStore,
    issueFilter: issueFilterStore,
    issueKanBanView: issueKanBanViewStore,
@ -51,6 +54,14 @@ export const ViewKanBanLayout: React.FC = observer(() => {
    issueStore.updateIssueStructure(group_by, sub_group_by, issue);
  };

+  const states = projectStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = projectStore?.projectLabels || null;
+  const members = projectStore?.projectMembers || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = projectStore?.projectStates || null;
+  const estimates = null;
+
  return (
    <div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90 px-3`}>
      <DragDropContext onDragEnd={onDragEnd}>
@ -63,6 +74,13 @@ export const ViewKanBanLayout: React.FC = observer(() => {
            display_properties={display_properties}
            kanBanToggle={() => {}}
            handleKanBanToggle={() => {}}
+            states={states}
+            stateGroups={stateGroups}
+            priorities={priorities}
+            labels={labels}
+            members={members}
+            projects={projects}
+            estimates={estimates}
          />
        ) : (
          <KanBanSwimLanes
@ -73,6 +91,13 @@ export const ViewKanBanLayout: React.FC = observer(() => {
            display_properties={display_properties}
            kanBanToggle={() => {}}
            handleKanBanToggle={() => {}}
+            states={states}
+            stateGroups={stateGroups}
+            priorities={priorities}
+            labels={labels}
+            members={members}
+            projects={projects}
+            estimates={estimates}
          />
        )}
      </DragDropContext>
--- a/web/components/issues/issue-layouts/list/block.tsx
+++ b/web/components/issues/issue-layouts/list/block.tsx
@ -1,6 +1,7 @@
 import { FC } from "react";
 // components
 import { KanBanProperties } from "./properties";
+import { IssuePeekOverview } from "components/issues/issue-peek-overview";
 // ui
 import { Tooltip } from "@plane/ui";

@ -18,6 +19,10 @@ interface IssueBlockProps {
 export const IssueBlock: FC<IssueBlockProps> = (props) => {
  const { columnId, issues, handleIssues, display_properties, states, labels, members, priorities } = props;

+  const handleIssue = (_issue: any) => {
+    if (_issue && handleIssues) handleIssues(!columnId && columnId === "null" ? null : columnId, _issue);
+  };
+
  return (
    <>
      {issues &&
@ -25,14 +30,25 @@ export const IssueBlock: FC<IssueBlockProps> = (props) => {
        issues.map((issue: any, index: any) => (
          <div
            key={index}
-            className={`text-sm p-3 shadow-custom-shadow-2xs transition-all bg-custom-background-100 flex items-center gap-3 border-b border-custom-border-200`}
+            className={`text-sm p-3 shadow-custom-shadow-2xs bg-custom-background-100 flex items-center gap-3 border-b border-custom-border-200 hover:bg-custom-background-80`}
          >
            {display_properties && display_properties?.key && (
-              <div className="flex-shrink-0 text-xs text-custom-text-300">ONE-{issue.sequence_id}</div>
+              <div className="flex-shrink-0 text-xs text-custom-text-300">
+                {issue?.project_detail?.identifier}-{issue.sequence_id}
+              </div>
            )}
-            <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
-              <div className="line-clamp-1 text-sm font-medium text-custom-text-100">{issue.name}</div>
-            </Tooltip>
+
+            <IssuePeekOverview
+              workspaceSlug={issue?.workspace_detail?.slug}
+              projectId={issue?.project_detail?.id}
+              issueId={issue?.id}
+              handleIssue={handleIssue}
+            >
+              <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
+                <div className="line-clamp-1 text-sm font-medium text-custom-text-100 w-full">{issue.name}</div>
+              </Tooltip>
+            </IssuePeekOverview>
+
            <div className="ml-auto flex-shrink-0">
              <KanBanProperties
                columnId={columnId}
--- a/web/components/issues/issue-layouts/roots/project-layout-root.tsx
+++ b/web/components/issues/issue-layouts/roots/project-layout-root.tsx
@ -2,7 +2,6 @@ import React from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import useSWR from "swr";
-
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components