From c3be391e9d1fb6f3b5ad1370b4ff3c2402105671 Mon Sep 17 00:00:00 2001
From: Bryan Frimin <bryan@getprobo.com>
Date: Thu, 19 Mar 2026 11:58:06 +0100
Subject: [PATCH] Fix DocumentList: clear selection on filter change, update
 connection ID, fix indentation

Addresses PR review comments: clears selected document IDs when changing
the type filter to prevent bulk actions on hidden rows, updates the Relay
connection ID when the filter changes so mutations target the correct
connection, and fixes eslint indentation violations.

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
---
 .../organizations/documents/DocumentsPage.tsx |  26 +-
 .../documents/_components/DocumentList.tsx    | 281 +++++++++---------
 2 files changed, 161 insertions(+), 146 deletions(-)

diff --git a/apps/console/src/pages/organizations/documents/DocumentsPage.tsx b/apps/console/src/pages/organizations/documents/DocumentsPage.tsx
index 6ee3ed22a..fdeca3ff6 100644
--- a/apps/console/src/pages/organizations/documents/DocumentsPage.tsx
+++ b/apps/console/src/pages/organizations/documents/DocumentsPage.tsx
@@ -6,7 +6,7 @@ import {
   IconPlusLarge,
   PageHeader,
 } from "@probo/ui";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import {
   type PreloadedQuery,
   usePreloadedQuery,
@@ -67,17 +67,21 @@ export default function DocumentsPage(props: {
     ({ node: { canSendSigningNotifications } }) => canSendSigningNotifications,
   );
 
-  const [documentListConnectionId, setDocumentListConnectionId] = useState(
-    ConnectionHandler.getConnectionID(
-      organizationId,
-      "DocumentsListQuery_documents",
-      {
-        orderBy: { direction: "ASC", field: "TITLE" },
-        filter: { documentTypes: null },
-      },
-    ),
+  const unfilteredConnectionId = useMemo(
+    () =>
+      ConnectionHandler.getConnectionID(
+        organizationId,
+        "DocumentsListQuery_documents",
+        {
+          orderBy: { direction: "ASC", field: "TITLE" },
+          filter: { documentTypes: null },
+        },
+      ),
+    [organizationId],
   );
 
+  const [, setDocumentListConnectionId] = useState(unfilteredConnectionId);
+
   const handleSendSigningNotifications = async () => {
     await sendSigningNotifications({
       variables: {
@@ -104,7 +108,7 @@ export default function DocumentsPage(props: {
           )}
           {organization.canCreateDocument && (
             <CreateDocumentDialog
-              connection={documentListConnectionId}
+              connection={unfilteredConnectionId}
               trigger={
                 <Button icon={IconPlusLarge}>{__("New document")}</Button>
               }
diff --git a/apps/console/src/pages/organizations/documents/_components/DocumentList.tsx b/apps/console/src/pages/organizations/documents/_components/DocumentList.tsx
index 962fcf2ec..cddab515c 100644
--- a/apps/console/src/pages/organizations/documents/_components/DocumentList.tsx
+++ b/apps/console/src/pages/organizations/documents/_components/DocumentList.tsx
@@ -86,7 +86,18 @@ export function DocumentList(props: {
 
   const handleDocumentTypeFilterChange = (value: string) => {
     const newType = value === "ALL" ? null : (value as DocumentType);
+    clear();
     setDocumentTypeFilter(newType);
+    onConnectionIdChange(
+      ConnectionHandler.getConnectionID(
+        organizationId,
+        "DocumentsListQuery_documents",
+        {
+          orderBy: { direction: "ASC", field: "TITLE" },
+          filter: { documentTypes: newType ? [newType] : null },
+        },
+      ),
+    );
     startTransition(() => {
       pagination.refetch(
         { documentTypes: newType ? [newType] : null },
@@ -165,7 +176,7 @@ export function DocumentList(props: {
           onValueChange={handleDocumentTypeFilterChange}
         >
           <Option value="ALL">{__("All types")}</Option>
-          {documentTypes.map((type) => (
+          {documentTypes.map(type => (
             <Option key={type} value={type}>
               {getDocumentTypeLabel(__, type) ?? type}
             </Option>
@@ -174,140 +185,140 @@ export function DocumentList(props: {
       </div>
       <div className={isPending ? "opacity-50 pointer-events-none transition-opacity" : ""}>
         {documents.length > 0
-    ? (
-        <SortableTable
-          {...pagination}
-          refetch={pagination.refetch as ComponentProps<typeof SortableTable>["refetch"]}
-        >
-          <Thead>
-            {selection.length === 0
-              ? (
-                  <Tr>
-                    <Th className="w-18">
-                      <Checkbox
-                        checked={
-                          selection.length === documents.length
-                          && documents.length > 0
-                        }
-                        onChange={() => reset(documents.map(d => d.id))}
-                      />
-                    </Th>
-                    <SortableTh field="TITLE" className="min-w-0" onOrderChange={handleOrderChange}>
-                      {__("Name")}
-                    </SortableTh>
-                    <Th className="w-24">{__("Status")}</Th>
-                    <Th className="w-20">{__("Version")}</Th>
-                    <SortableTh field="DOCUMENT_TYPE" className="w-28" onOrderChange={handleOrderChange}>
-                      {__("Type")}
-                    </SortableTh>
-                    <Th className="w-32">{__("Classification")}</Th>
-                    <Th className="w-60">{__("Approvers")}</Th>
-                    <Th className="w-60">{__("Last update")}</Th>
-                    <Th className="w-20">{__("Signatures")}</Th>
-                    {hasAnyAction && <Th className="w-18"></Th>}
-                  </Tr>
-                )
-              : (
-                  <Tr>
-                    <Th colspan={10} compact>
-                      <div className="flex justify-between items-center h-8">
-                        <div className="flex gap-2 items-center">
-                          {sprintf(__("%s documents selected"), selection.length)}
-                          {" "}
-                          -
-                          <button
-                            onClick={clear}
-                            className="flex gap-1 items-center hover:text-txt-primary"
-                          >
-                            <IconCrossLargeX size={12} />
-                            {__("Clear selection")}
-                          </button>
-                        </div>
-                        <div className="flex gap-2 items-center">
-                          {canUpdateAny && (
-                            <PublishDocumentsDialog
-                              documentIds={selection}
-                              onSave={clear}
-                            >
-                              <Button
-                                icon={IconCheckmark1}
-                                className="py-0.5 px-2 text-xs h-6 min-h-6"
-                              >
-                                {__("Publish")}
-                              </Button>
-                            </PublishDocumentsDialog>
-                          )}
-                          {canRequestAnySignatures && (
-                            <SignatureDocumentsDialog
-                              documentIds={selection}
-                              onSave={clear}
-                            >
-                              <Button
-                                variant="secondary"
-                                icon={IconSignature}
-                                className="py-0.5 px-2 text-xs h-6 min-h-6"
-                              >
-                                {__("Request signature")}
-                              </Button>
-                            </SignatureDocumentsDialog>
-                          )}
-                          <BulkExportDialog
-                            ref={bulkExportDialogRef}
-                            onExport={handleBulkExport}
-                            isLoading={isBulkExporting}
-                            defaultEmail={defaultEmail}
-                            selectedCount={selection.length}
-                          >
-                            <Button
-                              variant="secondary"
-                              icon={IconArrowDown}
-                              className="py-0.5 px-2 text-xs h-6 min-h-6"
-                            >
-                              {__("Export")}
-                            </Button>
-                          </BulkExportDialog>
-                          {canDeleteAny && (
-                            <Button
-                              variant="danger"
-                              icon={IconTrashCan}
-                              onClick={handleBulkDelete}
-                              className="py-0.5 px-2 text-xs h-6 min-h-6"
-                            >
-                              {__("Delete")}
-                            </Button>
-                          )}
-                        </div>
-                      </div>
-                    </Th>
-                  </Tr>
-                )}
-          </Thead>
-          <Tbody>
-            {documents.map(document => (
-              <DocumentListItem
-                checked={selection.includes(document.id)}
-                onCheck={() => toggle(document.id)}
-                key={document.id}
-                fragmentRef={document}
-                connectionId={connectionId}
-                hasAnyAction={hasAnyAction}
-              />
-            ))}
-          </Tbody>
-        </SortableTable>
-      )
-    : (
-        <Card padded>
-          <div className="text-center py-12">
-            <h3 className="text-lg font-semibold mb-2">
-              {__("No documents yet")}
-            </h3>
-            <p className="text-txt-tertiary mb-4">
-              {__("Create your first document to get started.")}
-            </p>
-          </div>
-        </Card>
-      )}
+          ? (
+              <SortableTable
+                {...pagination}
+                refetch={pagination.refetch as ComponentProps<typeof SortableTable>["refetch"]}
+              >
+                <Thead>
+                  {selection.length === 0
+                    ? (
+                        <Tr>
+                          <Th className="w-18">
+                            <Checkbox
+                              checked={
+                                selection.length === documents.length
+                                && documents.length > 0
+                              }
+                              onChange={() => reset(documents.map(d => d.id))}
+                            />
+                          </Th>
+                          <SortableTh field="TITLE" className="min-w-0" onOrderChange={handleOrderChange}>
+                            {__("Name")}
+                          </SortableTh>
+                          <Th className="w-24">{__("Status")}</Th>
+                          <Th className="w-20">{__("Version")}</Th>
+                          <SortableTh field="DOCUMENT_TYPE" className="w-28" onOrderChange={handleOrderChange}>
+                            {__("Type")}
+                          </SortableTh>
+                          <Th className="w-32">{__("Classification")}</Th>
+                          <Th className="w-60">{__("Approvers")}</Th>
+                          <Th className="w-60">{__("Last update")}</Th>
+                          <Th className="w-20">{__("Signatures")}</Th>
+                          {hasAnyAction && <Th className="w-18"></Th>}
+                        </Tr>
+                      )
+                    : (
+                        <Tr>
+                          <Th colspan={10} compact>
+                            <div className="flex justify-between items-center h-8">
+                              <div className="flex gap-2 items-center">
+                                {sprintf(__("%s documents selected"), selection.length)}
+                                {" "}
+                                -
+                                <button
+                                  onClick={clear}
+                                  className="flex gap-1 items-center hover:text-txt-primary"
+                                >
+                                  <IconCrossLargeX size={12} />
+                                  {__("Clear selection")}
+                                </button>
+                              </div>
+                              <div className="flex gap-2 items-center">
+                                {canUpdateAny && (
+                                  <PublishDocumentsDialog
+                                    documentIds={selection}
+                                    onSave={clear}
+                                  >
+                                    <Button
+                                      icon={IconCheckmark1}
+                                      className="py-0.5 px-2 text-xs h-6 min-h-6"
+                                    >
+                                      {__("Publish")}
+                                    </Button>
+                                  </PublishDocumentsDialog>
+                                )}
+                                {canRequestAnySignatures && (
+                                  <SignatureDocumentsDialog
+                                    documentIds={selection}
+                                    onSave={clear}
+                                  >
+                                    <Button
+                                      variant="secondary"
+                                      icon={IconSignature}
+                                      className="py-0.5 px-2 text-xs h-6 min-h-6"
+                                    >
+                                      {__("Request signature")}
+                                    </Button>
+                                  </SignatureDocumentsDialog>
+                                )}
+                                <BulkExportDialog
+                                  ref={bulkExportDialogRef}
+                                  onExport={handleBulkExport}
+                                  isLoading={isBulkExporting}
+                                  defaultEmail={defaultEmail}
+                                  selectedCount={selection.length}
+                                >
+                                  <Button
+                                    variant="secondary"
+                                    icon={IconArrowDown}
+                                    className="py-0.5 px-2 text-xs h-6 min-h-6"
+                                  >
+                                    {__("Export")}
+                                  </Button>
+                                </BulkExportDialog>
+                                {canDeleteAny && (
+                                  <Button
+                                    variant="danger"
+                                    icon={IconTrashCan}
+                                    onClick={handleBulkDelete}
+                                    className="py-0.5 px-2 text-xs h-6 min-h-6"
+                                  >
+                                    {__("Delete")}
+                                  </Button>
+                                )}
+                              </div>
+                            </div>
+                          </Th>
+                        </Tr>
+                      )}
+                </Thead>
+                <Tbody>
+                  {documents.map(document => (
+                    <DocumentListItem
+                      checked={selection.includes(document.id)}
+                      onCheck={() => toggle(document.id)}
+                      key={document.id}
+                      fragmentRef={document}
+                      connectionId={connectionId}
+                      hasAnyAction={hasAnyAction}
+                    />
+                  ))}
+                </Tbody>
+              </SortableTable>
+            )
+          : (
+              <Card padded>
+                <div className="text-center py-12">
+                  <h3 className="text-lg font-semibold mb-2">
+                    {__("No documents yet")}
+                  </h3>
+                  <p className="text-txt-tertiary mb-4">
+                    {__("Create your first document to get started.")}
+                  </p>
+                </div>
+              </Card>
+            )}
       </div>
     </div>
   );