✨ Add Tasks tab to the Applications table application details drawer

client/src/app/Paths.ts

@@ -41,7 +41,7 @@ export const DevPaths = {
 
   dependencies: "/dependencies",
   tasks: "/tasks",
-  taskDetails: "/tasks/:taskId",
+  taskDetails: "/tasks/:taskId/:isFApplication",
   taskDetailsAttachment: "/tasks/:taskId/attachments/:attachmentId",
 } as const;
 
@@ -109,3 +109,6 @@ export interface TaskDetailsAttachmentRoute {
   taskId: string;
   attachmentId: string;
 }
+export interface TaskFromApp {
+  isFApplication: string;
+}

client/src/app/components/task-manager/TaskManagerDrawer.tsx

@@ -163,7 +163,8 @@ const TaskItem: React.FC<{
     : `${task.id} (${task.addon}) - ${task.applicationName} - ${
         task.priority ?? 0
       }`;
-  const taskActionItems = useTaskActions(task._);
+
+  const taskActionItems = useTaskActions(task._, false);
 
   return (
     <NotificationDrawerListItem

client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer.tsx

@@ -65,6 +65,27 @@ import { useFetchArchetypes } from "@app/queries/archetypes";
 import { useFetchAssessments } from "@app/queries/assessments";
 import { DecoratedApplication } from "../../applications-table/useDecoratedApplications";
 import { TaskStates } from "@app/queries/tasks";
+import { Toolbar, ToolbarContent, ToolbarItem } from "@patternfly/react-core";
+import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
+import {
+  useTableControlState,
+  useTableControlProps,
+} from "@app/hooks/table-controls";
+import { SimplePagination } from "@app/components/SimplePagination";
+import { useServerTasks } from "@app/queries/tasks";
+import { FilterToolbar, FilterType } from "@app/components/FilterToolbar";
+import {
+  getHubRequestParams,
+  deserializeFilterUrlParams,
+} from "@app/hooks/table-controls";
+import { useSelectionState } from "@migtools/lib-ui";
+import { TablePersistenceKeyPrefix } from "@app/Constants";
+import { TaskActionColumn } from "../../../../pages/tasks/TaskActionColumn";
+import {
+  ConditionalTableBody,
+  TableHeaderContentWithControls,
+  TableRowContentWithControls,
+} from "@app/components/TableControls";
 
 export interface IApplicationDetailDrawerProps
   extends Pick<IPageDrawerContentProps, "onCloseClick"> {
@@ -73,12 +94,13 @@ export interface IApplicationDetailDrawerProps
   onEditClick: () => void;
 }
 
-enum TabKey {
+export enum TabKey {
   Details = 0,
   Tags,
   Reports,
   Facts,
   Reviews,
+  Tasks,
 }
 
 export const ApplicationDetailDrawer: React.FC<
@@ -152,6 +174,14 @@ export const ApplicationDetailDrawer: React.FC<
               <ReviewFields application={application} />
             </Tab>
           )}
+          {!application ? null : (
+            <Tab
+              eventKey={TabKey.Tasks}
+              title={<TabTitleText>{t("terms.tasks")}</TabTitleText>}
+            >
+              <TabTasksContent application={application} />
+            </Tab>
+          )}
         </Tabs>
       </div>
     </PageDrawerContent>
@@ -521,3 +551,221 @@ const TabReportsContent: React.FC<{
     </>
   );
 };
+
+const TabTasksContent: React.FC<{ application: DecoratedApplication }> = ({
+  application,
+}) => {
+  const isFApplication = true;
+
+  const { t } = useTranslation();
+  const history = useHistory();
+  const urlParams = new URLSearchParams(window.location.search);
+  const filters = urlParams.get("filters");
+  const deserializedFilterValues = deserializeFilterUrlParams({ filters });
+  const tableControlState = useTableControlState({
+    tableName: "tasks-apps-table",
+    persistTo: "urlParams",
+    persistenceKeyPrefix: TablePersistenceKeyPrefix.tasks,
+    columnNames: {
+      taskId: "Task ID",
+      taskKind: "Task Kind",
+      status: "Status",
+      priority: "Priority",
+    },
+    isFilterEnabled: true,
+    isSortEnabled: true,
+    isPaginationEnabled: true,
+    sortableColumns: ["taskId", "taskKind", "status", "priority"],
+    initialSort: { columnKey: "taskId", direction: "asc" },
+    initialFilterValues: deserializedFilterValues,
+    filterCategories: [
+      {
+        categoryKey: "id",
+        title: "ID",
+        type: FilterType.numsearch,
+        placeholderText: t("actions.filterBy", {
+          what: "ID...",
+        }),
+        getServerFilterValue: (value) => {
+          console.log("this id:", value);
+          return value ? value : [];
+        },
+      },
+      {
+        categoryKey: "kind",
+        title: t("terms.kind"),
+        type: FilterType.search,
+        placeholderText: t("actions.filterBy", {
+          what: t("terms.kind") + "...",
+        }),
+        getServerFilterValue: (value) => (value ? [`*${value[0]}*`] : []),
+      },
+      {
+        categoryKey: "state",
+        title: t("terms.status"),
+        type: FilterType.search,
+        placeholderText: t("actions.filterBy", {
+          what: t("terms.status") + "...",
+        }),
+        getServerFilterValue: (value) => (value ? [`*${value[0]}*`] : []),
+      },
+    ],
+    initialItemsPerPage: 10,
+  });
+
+  const {
+    result: { data: currentPageItems = [], total: totalItemCount },
+    isFetching,
+    fetchError,
+  } = useServerTasks(
+    getHubRequestParams({
+      ...tableControlState,
+      hubSortFieldKeys: {
+        taskId: "id",
+        taskKind: "kind",
+        status: "status",
+        priority: "priority",
+      },
+      implicitFilters: [
+        {
+          field: "application.id",
+          operator: "=",
+          value: application.id,
+        },
+      ],
+    }),
+    5000
+  );
+  const tableControls = useTableControlProps({
+    ...tableControlState,
+    idProperty: "id",
+    currentPageItems: currentPageItems,
+    totalItemCount,
+    isLoading: isFetching,
+    selectionState: useSelectionState({
+      items: currentPageItems,
+      isEqual: (a, b) => a.name === b.name,
+    }),
+  });
+
+  const {
+    numRenderedColumns,
+    propHelpers: {
+      toolbarProps,
+      filterToolbarProps,
+      paginationToolbarItemProps,
+      paginationProps,
+      tableProps,
+      getThProps,
+      getTrProps,
+      getTdProps,
+    },
+  } = tableControls;
+
+  const clearFilters = () => {
+    const currentPath = history.location.pathname;
+    const newSearch = new URLSearchParams(history.location.search);
+    newSearch.delete("filters");
+    history.push(`${currentPath}`);
+  };
+  return (
+    <>
+      <Toolbar
+        {...toolbarProps}
+        className={spacing.mtSm}
+        clearAllFilters={clearFilters}
+      >
+        <ToolbarContent>
+          <FilterToolbar {...filterToolbarProps} />
+          <ToolbarItem {...paginationToolbarItemProps}>
+            <SimplePagination
+              idPrefix="task-apps-table"
+              isTop
+              isCompact
+              paginationProps={paginationProps}
+            />
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+      <Table {...tableProps} aria-label="task applications table">
+        <Thead>
+          <Tr>
+            <TableHeaderContentWithControls {...tableControls}>
+              <Th {...getThProps({ columnKey: "taskId" })} />
+              <Th
+                {...getThProps({ columnKey: "taskKind" })}
+                modifier="nowrap"
+              />
+              <Th {...getThProps({ columnKey: "status" })} modifier="nowrap" />
+              <Th
+                {...getThProps({ columnKey: "priority" })}
+                modifier="nowrap"
+              />
+            </TableHeaderContentWithControls>
+          </Tr>
+        </Thead>
+
+        <ConditionalTableBody
+          isLoading={isFetching}
+          isError={!!fetchError}
+          isNoData={totalItemCount === 0}
+          numRenderedColumns={numRenderedColumns}
+        >
+          <Tbody>
+            {currentPageItems?.map((task, rowIndex) => (
+              <Tr key={task.id} {...getTrProps({ item: task })}>
+                <TableRowContentWithControls
+                  {...tableControls}
+                  item={task}
+                  rowIndex={rowIndex}
+                >
+                  <Td width={10} {...getTdProps({ columnKey: "taskId" })}>
+                    {task.id}
+                  </Td>
+                  <Td
+                    width={10}
+                    modifier="nowrap"
+                    {...getTdProps({ columnKey: "taskKind" })}
+                  >
+                    {task.kind}
+                  </Td>
+                  <Td
+                    width={10}
+                    modifier="nowrap"
+                    {...getTdProps({ columnKey: "status" })}
+                  >
+                    {task.state}
+                  </Td>
+                  <Td
+                    width={10}
+                    modifier="nowrap"
+                    {...getTdProps({ columnKey: "priority" })}
+                  >
+                    {task.priority || 0}
+                  </Td>
+                  <Td
+                    width={10}
+                    key={`row-actions-${task.id}`}
+                    isActionCell
+                    id={`row-actions-${task.id}`}
+                  >
+                    <TaskActionColumn
+                      task={task}
+                      isFApplication={isFApplication}
+                    />
+                  </Td>
+                </TableRowContentWithControls>
+              </Tr>
+            ))}
+          </Tbody>
+        </ConditionalTableBody>
+      </Table>
+      <SimplePagination
+        idPrefix="task-apps-table"
+        isTop={false}
+        isCompact
+        paginationProps={paginationProps}
+      />
+    </>
+  );
+};

client/src/app/pages/tasks/TaskActionColumn.tsx

@@ -4,7 +4,10 @@ import { Task } from "@app/api/models";
 import { ActionsColumn } from "@patternfly/react-table";
 import { useTaskActions } from "./useTaskActions";
 
-export const TaskActionColumn: FC<{ task: Task }> = ({ task }) => {
-  const actions = useTaskActions(task);
+export const TaskActionColumn: FC<{ task: Task; isFApplication: boolean }> = ({
+  task,
+  isFApplication,
+}) => {
+  const actions = useTaskActions(task, isFApplication);
   return <ActionsColumn items={actions} />;
 };

client/src/app/pages/tasks/TaskDetails.tsx

@@ -2,27 +2,54 @@ import React from "react";
 import { useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
-import { Paths, TaskDetailsAttachmentRoute } from "@app/Paths";
+import { Paths, TaskDetailsAttachmentRoute, TaskFromApp } from "@app/Paths";
 import "@app/components/simple-document-viewer/SimpleDocumentViewer.css";
 import { formatPath } from "@app/utils/utils";
 import { TaskDetailsBase } from "./TaskDetailsBase";
+import { getTaskById } from "@app/api/rest";
+import { useState, useEffect } from "react";
 
 export const TaskDetails = () => {
   const { t } = useTranslation();
   const { taskId, attachmentId } = useParams<TaskDetailsAttachmentRoute>();
+  const { isFApplication } = useParams<TaskFromApp>();
+  const result = isFApplication === "true" ? true : false;
+  const [applicationName, setApplicationName] = useState<string | undefined>();
+  const [applicationId, setApplicationId] = useState<number | undefined>();
+
+  useEffect(() => {
+    const currentTask = getTaskById(Number(taskId));
+    currentTask
+      .then((task) => {
+        setApplicationName(task.application?.name);
+        setApplicationId(task.application?.id);
+      })
+      .catch((error) => {
+        console.error("Error fetching task:", error);
+      });
+  }, [taskId]);
+  const appName: string = applicationName ?? t("terms.unknown");
+  console.log(appName);
   const detailsPath = formatPath(Paths.taskDetails, { taskId });
+
   return (
     <TaskDetailsBase
       breadcrumbs={[
         {
-          title: t("terms.tasks"),
-          path: Paths.tasks,
+          title: t(result ? "terms.applications" : "terms.tasks"),
+          path: result ? Paths.applications : Paths.tasks,
         },
+        result
+          ? {
+              title: appName,
+              path: `${Paths.applications}/?activeItem=${applicationId}`,
+            }
+          : null,
         {
           title: t("titles.taskWithId", { taskId }),
           path: detailsPath,
         },
-      ]}
+      ].filter(Boolean)}
       detailsPath={detailsPath}
       formatTitle={(taskName) => `Task details for task ${taskId}, ${taskName}`}
       formatAttachmentPath={(attachmentId) =>
@@ -36,5 +63,4 @@ export const TaskDetails = () => {
     />
   );
 };
-
 export default TaskDetails;