feat(ui): give the inbox task list a way through a long queue

The list was a flat, undifferentiated stack: every card repeated the entity
type it belonged to, and the only way to find a task was to scroll.

It now groups by task type, most urgent type first — a live test failure, then
a request blocking someone, then metadata hygiene — with a count per group. A
toolbar above it searches, switches the grouping off, and narrows to the types
the queue actually contains, rather than offering the whole enum.

Search is served: the text reaches `/tasks/visible` as `q` once typing settles,
so it matches tasks that were never loaded. The type filter is not — the scoped
list endpoints have no `type` param — so it narrows the loaded pages, and says
so at the call site. Grouping likewise covers what is loaded: the server pages
by cursor, not by type.

Each card drops the type badge, now carried by its group header, and gains the
asset it concerns, which is what distinguishes two otherwise identical rows.

`taskDetail.utils` no longer reads the tier through the table utils. That module
reaches the customization and permission layers at import time, which pulled a
React Query client into the list bundle and broke its tests; the tier prefix is
read from the shared constants instead.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: harsh-vador

openmetadata-ui/src/main/resources/ui/src/components/discovery/personal-space/InboxPage/components/InboxTaskListItem.test.tsx

@@ -20,10 +20,6 @@ jest.mock('components/common/ProfilePicture/ProfilePicture', () => ({
   default: () => <div />,
 }));
 
-jest.mock('../taskList.utils', () => ({
-  formatEntityType: (type?: string) => type ?? '',
-}));
-
 jest.mock('../taskTitle.utils', () => ({
   getTaskTitle: (task: {
     displayName?: string;
@@ -38,8 +34,9 @@ jest.mock('../taskTitle.utils', () => ({
   },
 }));
 
-jest.mock('../inbox.utils', () => ({
-  formatInboxDate: () => '13 May, 2026',
+jest.mock('utils/EntityNameUtils', () => ({
+  getEntityName: (ref: { displayName?: string; name?: string }) =>
+    ref?.displayName ?? ref?.name ?? '',
 }));
 
 jest.mock('@openmetadata/ui-core-components', () => ({
@@ -81,7 +78,7 @@ const task = {
   id: 't1',
   taskId: '11345',
   displayName: 'Data Access Request for RF3',
-  about: { type: 'Table' },
+  about: { type: 'Table', name: 'dim_customers' },
   createdBy: { id: 'u1', name: 'olivia', displayName: 'Olivia Rhye' },
   assignees: [
     { id: 'a1', name: 'one' },
@@ -92,17 +89,35 @@ const task = {
 } as unknown as Task;
 
 describe('InboxTaskListItem', () => {
-  it('renders id, type, title, requester, date and comment count', () => {
+  it('renders the id, title, requester, asset and comment count', () => {
     render(<InboxTaskListItem task={task} onClick={jest.fn()} />);
 
     expect(screen.getByText('#11345')).toBeInTheDocument();
-    expect(screen.getByText('Table')).toBeInTheDocument();
     expect(screen.getByText('Data Access Request for RF3')).toBeInTheDocument();
     expect(screen.getByText('Olivia Rhye')).toBeInTheDocument();
-    expect(screen.getByText('13 May, 2026')).toBeInTheDocument();
+    expect(screen.getByText('dim_customers')).toBeInTheDocument();
     expect(screen.getByText('2')).toBeInTheDocument();
   });
 
+  // The type is carried by the list's group header, so repeating it on every
+  // card would be noise.
+  it('does not repeat the task type on the card', () => {
+    render(<InboxTaskListItem task={task} onClick={jest.fn()} />);
+
+    expect(screen.queryByText('Table')).not.toBeInTheDocument();
+  });
+
+  it('leaves the asset chip off a task that names no entity', () => {
+    render(
+      <InboxTaskListItem
+        task={{ ...task, about: undefined } as Task}
+        onClick={jest.fn()}
+      />
+    );
+
+    expect(screen.queryByText('dim_customers')).not.toBeInTheDocument();
+  });
+
   it('composes a title for a task whose name is only the taskId', () => {
     render(
       <InboxTaskListItem

openmetadata-ui/src/main/resources/ui/src/components/discovery/personal-space/InboxPage/components/InboxTaskListItem.tsx

@@ -18,8 +18,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import ProfilePicture from '../../../../../components/common/ProfilePicture/ProfilePicture';
 import { Task } from '../../../../../generated/entity/tasks/task';
-import { formatInboxDate } from '../inbox.utils';
-import { formatEntityType } from '../taskList.utils';
+import { getEntityName } from '../../../../../utils/EntityNameUtils';
 import { getTaskTitle } from '../taskTitle.utils';
 
 export interface InboxTaskListItemProps {
@@ -32,19 +31,59 @@ const Dot: React.FC = () => (
   <span className="tw:h-1 tw:w-1 tw:shrink-0 tw:rounded-full tw:bg-utility-gray-blue-300" />
 );
 
+/** The card's second line: task id, who raised it, and the asset it concerns. */
+const TaskCardMeta: React.FC<{ task: Task }> = ({ task }) => {
+  const requester = task.createdBy;
+  const requesterName = requester?.displayName ?? requester?.name;
+  const assetName = task.about ? getEntityName(task.about) : '';
+
+  return (
+    <Box align="center" className="tw:flex-wrap tw:gap-x-2 tw:gap-y-1">
+      <Typography
+        className="tw:font-mono tw:text-utility-blue-dark-500"
+        size="text-xs"
+        weight="medium">
+        {`#${task.taskId ?? ''}`}
+      </Typography>
+      {requesterName && (
+        <>
+          <Dot />
+          <ProfilePicture
+            displayName={requester?.name}
+            name={requester?.name ?? ''}
+            width="18"
+          />
+          <Typography
+            className="tw:text-secondary"
+            size="text-xs"
+            weight="medium">
+            {requesterName}
+          </Typography>
+        </>
+      )}
+      {assetName && (
+        <Badge
+          className="tw:ml-auto tw:shrink-0 tw:font-mono"
+          size="sm"
+          type="modern">
+          {assetName}
+        </Badge>
+      )}
+    </Box>
+  );
+};
+
 /**
- * Compact task card in the Inbox Tasks tab: the title + comment count on top,
- * then a single meta row of id · type · requester · date. Cards are spaced,
- * lightly bordered, and highlight when selected (matches the figma).
+ * Compact task card in the Inbox Tasks tab: the title and comment count on top,
+ * then a meta row of id · requester · the asset it concerns. The task's type is
+ * carried by the list's group header rather than repeated on every card.
  */
 const InboxTaskListItem: React.FC<InboxTaskListItemProps> = ({
   task,
   isActive,
   onClick,
 }) => {
   const { t } = useTranslation();
-  const entityType = formatEntityType(task.about?.type);
-  const createdByName = task.createdBy?.displayName ?? task.createdBy?.name;
   const commentCount = task.commentCount ?? task.comments?.length ?? 0;
   // Titleless tasks (governance workflows) carry the taskId as their name, so
   // getTaskTitle composes a title from the task type and the entity it is about
@@ -75,7 +114,7 @@ const InboxTaskListItem: React.FC<InboxTaskListItemProps> = ({
         {taskTitle && (
           <Typography
             className="tw:text-left tw:text-primary-900"
-            ellipsis={{ rows: 1 }}
+            ellipsis={{ rows: 2 }}
             size="text-sm"
             weight="medium">
             {taskTitle}
@@ -95,39 +134,7 @@ const InboxTaskListItem: React.FC<InboxTaskListItemProps> = ({
         </Box>
       </Box>
 
-      <Box align="center" className="tw:flex-wrap tw:gap-x-2 tw:gap-y-1">
-        <Typography
-          className="tw:text-utility-blue-dark-500"
-          size="text-xs"
-          weight="medium">
-          {`#${task.taskId ?? ''}`}
-        </Typography>
-        {entityType && (
-          <Badge className="tw:shrink-0" size="sm" type="modern">
-            {entityType}
-          </Badge>
-        )}
-        {createdByName && (
-          <>
-            <Dot />
-            <ProfilePicture
-              displayName={task.createdBy?.name}
-              name={task.createdBy?.name ?? ''}
-              width="18"
-            />
-            <Typography
-              className="tw:text-secondary"
-              size="text-xs"
-              weight="medium">
-              {createdByName}
-            </Typography>
-          </>
-        )}
-        <Dot />
-        <Typography className="tw:text-secondary" size="text-xs">
-          {formatInboxDate(task.createdAt)}
-        </Typography>
-      </Box>
+      <TaskCardMeta task={task} />
     </Box>
   );
 };

openmetadata-ui/src/main/resources/ui/src/components/discovery/personal-space/InboxPage/components/InboxTaskListToolbar.test.tsx

@@ -0,0 +1,153 @@
+/*
+ *  Copyright 2026 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ReactNode } from 'react';
+
+interface MockFilterSelectProps {
+  label: string;
+  options: { value: string; label: ReactNode; count?: number }[];
+  selectedValues: string[];
+  onChange: (values: string[]) => void;
+  'data-testid'?: string;
+}
+
+// The real control is a popover-driven listbox with its own suite; here each
+// option is a button so a test can pick one.
+jest.mock('@openmetadata/ui-core-components', () => ({
+  Box: ({
+    children,
+    ...rest
+  }: {
+    children?: ReactNode;
+    'data-testid'?: string;
+  }) => <div data-testid={rest['data-testid']}>{children}</div>,
+  FilterSelect: ({
+    options,
+    selectedValues,
+    onChange,
+    'data-testid': testId,
+  }: MockFilterSelectProps) => (
+    <div data-selected={selectedValues.join(',')} data-testid={testId}>
+      {options.map((option) => (
+        <button
+          data-count={option.count}
+          data-testid={`${testId}-${option.value}`}
+          key={option.value}
+          onClick={() => onChange([option.value])}>
+          {option.label}
+        </button>
+      ))}
+    </div>
+  ),
+  Input: ({
+    value,
+    onChange,
+    inputDataTestId,
+  }: {
+    value?: string;
+    onChange?: (value: string) => void;
+    inputDataTestId?: string;
+  }) => (
+    <input
+      aria-label="search"
+      data-testid={inputDataTestId}
+      value={value}
+      onChange={(event) => onChange?.(event.target.value)}
+    />
+  ),
+  SearchInputIcon: () => <span />,
+}));
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+import { Task, TaskType } from '../../../../../generated/entity/tasks/task';
+import InboxTaskListToolbar from './InboxTaskListToolbar';
+
+const TASKS = [
+  { id: 't1', type: TaskType.TagUpdate },
+  { id: 't2', type: TaskType.TagUpdate },
+  { id: 't3', type: TaskType.TestCaseResolution },
+] as unknown as Task[];
+
+const props = {
+  search: '',
+  onSearchChange: jest.fn(),
+  grouping: 'type' as const,
+  onGroupingChange: jest.fn(),
+  typeFilter: [],
+  onTypeFilterChange: jest.fn(),
+  tasks: TASKS,
+};
+
+beforeEach(() => jest.clearAllMocks());
+
+describe('InboxTaskListToolbar', () => {
+  it('reports what was typed in the search box', () => {
+    render(<InboxTaskListToolbar {...props} />);
+
+    fireEvent.change(screen.getByTestId('inbox-tasks-search'), {
+      target: { value: 'customer' },
+    });
+
+    expect(props.onSearchChange).toHaveBeenCalledWith('customer');
+  });
+
+  // Offering the full enum would list types the queue does not contain.
+  it('offers only the types present in the queue, with their counts', () => {
+    render(<InboxTaskListToolbar {...props} />);
+
+    expect(
+      screen.getByTestId('inbox-tasks-type-filter-TagUpdate')
+    ).toHaveAttribute('data-count', '2');
+    expect(
+      screen.getByTestId('inbox-tasks-type-filter-TestCaseResolution')
+    ).toHaveAttribute('data-count', '1');
+    expect(
+      screen.queryByTestId('inbox-tasks-type-filter-DataAccessRequest')
+    ).not.toBeInTheDocument();
+  });
+
+  it('reports a chosen type', () => {
+    render(<InboxTaskListToolbar {...props} />);
+
+    fireEvent.click(screen.getByTestId('inbox-tasks-type-filter-TagUpdate'));
+
+    expect(props.onTypeFilterChange).toHaveBeenCalledWith([TaskType.TagUpdate]);
+  });
+
+  it('reports a grouping change', () => {
+    render(<InboxTaskListToolbar {...props} />);
+
+    fireEvent.click(screen.getByTestId('inbox-tasks-group-by-none'));
+
+    expect(props.onGroupingChange).toHaveBeenCalledWith('none');
+  });
+
+  it('shows the active grouping as selected', () => {
+    render(<InboxTaskListToolbar {...props} />);
+
+    expect(screen.getByTestId('inbox-tasks-group-by')).toHaveAttribute(
+      'data-selected',
+      'type'
+    );
+  });
+
+  it('offers no types for an empty queue', () => {
+    render(<InboxTaskListToolbar {...props} tasks={[]} />);
+
+    expect(screen.getByTestId('inbox-tasks-type-filter')).toBeEmptyDOMElement();
+  });
+});