Tasks pagination fix in proposed changes (#4434)

* update pagination in query

* update error and loading screen

* remove loading test

* add changelog

* pair review

---------

Co-authored-by: bilalabbad <[email protected]>

Author: pa-lem

changelog/4434.fixed.md

@@ -0,0 +1 @@
+Fixes the tasks pagination in the proposed changes tab

frontend/app/src/graphql/queries/tasks/getTasksItems.ts

@@ -1,8 +1,8 @@
 import Handlebars from "handlebars";
 
 export const getTasksItems = Handlebars.compile(`
-query GetTasks {
-  {{kind}}({{{filters}}} {{#if relatedNode}}related_node__ids: ["{{relatedNode}}"]{{/if}}) {
+query GetTasks($offset: Int, $limit: Int) {
+  {{kind}}(offset: $offset, limit: $limit, {{#if relatedNode}}related_node__ids: ["{{relatedNode}}"]{{/if}}) {
     count
     edges {
       node {

frontend/app/src/pages/proposed-changes/details.tsx

@@ -17,17 +17,17 @@ import { proposedChangedState } from "@/state/atoms/proposedChanges.atom";
 import { constructPath } from "@/utils/fetch";
 import { Icon } from "@iconify-icon/react";
 import { useAtom } from "jotai";
-import { Link, Navigate, useLocation, useParams } from "react-router-dom";
+import { Link, useLocation, useParams } from "react-router-dom";
 import { StringParam, useQueryParam } from "use-query-params";
 import LoadingScreen from "@/screens/loading-screen/loading-screen";
 import { ProposedChangesChecksTab } from "@/screens/proposed-changes/checks-tab";
 import { ProposedChangeDetails } from "@/screens/proposed-changes/proposed-change-details";
-import { NetworkStatus } from "@apollo/client";
 import { CoreProposedChange } from "@/generated/graphql";
 import { Badge } from "@/components/ui/badge";
 import { getObjectDetailsUrl } from "@/utils/objects";
 import { ObjectHelpButton } from "@/components/menu/object-help-button";
 import { useSchema } from "@/hooks/useSchema";
+import NoDataFound from "@/screens/errors/no-data-found";
 
 export const PROPOSED_CHANGES_TABS = {
   CONVERSATIONS: "conversations",
@@ -105,30 +105,19 @@ export function Component() {
   const { proposedChangeId } = useParams();
   const { schema } = useSchema(PROPOSED_CHANGES_OBJECT);
 
-  const { loading, networkStatus, error, data, client } = useQuery(GET_PROPOSED_CHANGE_DETAILS, {
-    notifyOnNetworkStatusChange: true,
+  const { loading, error, data, client } = useQuery(GET_PROPOSED_CHANGE_DETAILS, {
     variables: {
       id: proposedChangeId,
       nodeId: proposedChangeId, // Used for tasks, which is a different type
     },
   });
 
-  if (networkStatus === NetworkStatus.loading) {
+  if (loading) {
     return <LoadingScreen className="m-auto h-auto" />;
   }
 
-  if (error) {
-    return (
-      <ErrorScreen message="Something went wrong when fetching the proposed changes details." />
-    );
-  }
-
   const proposedChangesData = data?.[PROPOSED_CHANGES_OBJECT]?.edges?.[0]?.node;
 
-  if (!proposedChangesData) {
-    return <Navigate to={constructPath("/proposed-changes")} />;
-  }
-
   const tabs = [
     {
       label: "Overview",
@@ -162,6 +151,37 @@ export function Component() {
     },
   ];
 
+  if (error || !proposedChangesData) {
+    return (
+      <Content>
+        <Content.Title
+          title={
+            <div className="flex items-center gap-2">
+              <Link
+                className="no-underline hover:underline"
+                to={constructPath("/proposed-changes")}>
+                Proposed changes
+              </Link>
+            </div>
+          }
+          reload={() => client.reFetchObservableQueries()}
+          isReloadLoading={loading}>
+          <ObjectHelpButton
+            documentationUrl={schema?.documentation}
+            kind={PROPOSED_CHANGES_OBJECT}
+            className="ml-auto"
+          />
+        </Content.Title>
+
+        {error && (
+          <ErrorScreen message="Something went wrong when fetching the proposed changes details." />
+        )}
+
+        {!proposedChangesData && <NoDataFound message="No proposed changes found." />}
+      </Content>
+    );
+  }
+
   return (
     <Content>
       <Content.Title

frontend/app/src/screens/tasks/task-items.tsx

@@ -9,7 +9,6 @@ import { DurationDisplay } from "@/components/display/duration-display";
 import { Id } from "@/components/ui/id";
 import { QSP } from "@/config/qsp";
 import { getTasksItems } from "@/graphql/queries/tasks/getTasksItems";
-import usePagination from "@/hooks/usePagination";
 import ErrorScreen from "@/screens/errors/error-screen";
 import LoadingScreen from "@/screens/loading-screen/loading-screen";
 import { constructPath } from "@/utils/fetch";
@@ -24,22 +23,12 @@ interface TaskItemsProps {
 export const TaskItems = forwardRef(({ hideRelatedNode }: TaskItemsProps, ref) => {
   const { objectid, proposedChangeId } = useParams();
   const location = useLocation();
-  const [pagination] = usePagination();
 
   const { pathname } = location;
 
-  const filtersString = [
-    // Add pagination filters
-    ...[
-      { name: "offset", value: pagination?.offset },
-      { name: "limit", value: pagination?.limit },
-    ].map((row: any) => `${row.name}: ${row.value}`),
-  ].join(",");
-
   const queryString = getTasksItems({
     kind: TASK_OBJECT,
     relatedNode: objectid || proposedChangeId,
-    filters: filtersString,
   });
 
   const query = gql`