Fix documents UI

- Fix redirection after document deletion in detail page
- Fix refetch after publication
- Return proper error when trying to update a published document

Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

apps/console/src/pages/organizations/documents/DocumentLayout.tsx

@@ -77,8 +77,8 @@ const publishDocumentVersionMutation = graphql`
   }
 `;
 
-export function DocumentLayout(props: { queryRef: PreloadedQuery<DocumentLayoutQuery> }) {
-  const { queryRef } = props;
+export function DocumentLayout(props: { queryRef: PreloadedQuery<DocumentLayoutQuery>; onRefetch: () => void }) {
+  const { queryRef, onRefetch } = props;
 
   const organizationId = useOrganizationId();
   const { versionId } = useParams();
@@ -112,6 +112,7 @@ export function DocumentLayout(props: { queryRef: PreloadedQuery<DocumentLayoutQ
       variables: {
         input: { documentId: document.id },
       },
+      onSuccess: onRefetch,
     });
   };
 
@@ -146,7 +147,7 @@ export function DocumentLayout(props: { queryRef: PreloadedQuery<DocumentLayoutQ
               </Button>
             )}
             <DocumentVersionsDropdown />
-            <DocumentActionsDropdownn documentFragmentRef={document} versionFragmentRef={currentVersion} />
+            <DocumentActionsDropdownn documentFragmentRef={document} versionFragmentRef={currentVersion} onRefetch={onRefetch} />
           </div>
         </div>
 

apps/console/src/pages/organizations/documents/DocumentLayoutLoader.tsx

@@ -1,4 +1,4 @@
-import { Suspense, useEffect } from "react";
+import { Suspense, useCallback, useEffect } from "react";
 import { useQueryLoader } from "react-relay";
 import { useParams } from "react-router";
 
@@ -25,9 +25,16 @@ function DocumentLayoutQueryLoader() {
     }
   });
 
+  const onRefetch = useCallback(() => {
+    loadQuery(
+      { documentId, versionId: versionId ?? "", versionSpecified: !!versionId },
+      { fetchPolicy: "network-only" },
+    );
+  }, [documentId, versionId, loadQuery]);
+
   if (!queryRef) return <PageSkeleton />;
 
-  return <DocumentLayout queryRef={queryRef} />;
+  return <DocumentLayout queryRef={queryRef} onRefetch={onRefetch} />;
 }
 
 export default function DocumentLayoutLoader() {

apps/console/src/pages/organizations/documents/_components/DocumentActionsDropdown.tsx

@@ -3,14 +3,14 @@ import { useTranslate } from "@probo/i18n";
 import { ActionDropdown, DropdownItem, IconArrowDown, IconPencil, IconTrashCan, useConfirm } from "@probo/ui";
 import { use, useRef } from "react";
 import { useFragment } from "react-relay";
-import { useNavigate } from "react-router";
-import { graphql } from "relay-runtime";
+import { useNavigate, useParams } from "react-router";
+import { ConnectionHandler, graphql } from "relay-runtime";
 
 import type { DocumentActionsDropdown_documentFragment$key } from "#/__generated__/core/DocumentActionsDropdown_documentFragment.graphql";
 import type { DocumentActionsDropdown_versionFragment$key } from "#/__generated__/core/DocumentActionsDropdown_versionFragment.graphql";
 import type { DocumentActionsDropdownn_exportVersionMutation } from "#/__generated__/core/DocumentActionsDropdownn_exportVersionMutation.graphql";
 import { PdfDownloadDialog, type PdfDownloadDialogRef } from "#/components/documents/PdfDownloadDialog";
-import { useDeleteDocumentMutation, useDeleteDraftDocumentVersionMutation } from "#/hooks/graph/DocumentGraph";
+import { DocumentsConnectionKey, useDeleteDocumentMutation, useDeleteDraftDocumentVersionMutation } from "#/hooks/graph/DocumentGraph";
 import { useMutationWithToasts } from "#/hooks/useMutationWithToasts";
 import { useOrganizationId } from "#/hooks/useOrganizationId";
 import { CurrentUser } from "#/providers/CurrentUser";
@@ -53,11 +53,13 @@ const exportDocumentVersionMutation = graphql`
 export function DocumentActionsDropdownn(props: {
   documentFragmentRef: DocumentActionsDropdown_documentFragment$key;
   versionFragmentRef: DocumentActionsDropdown_versionFragment$key;
+  onRefetch: () => void;
 }) {
-  const { documentFragmentRef, versionFragmentRef } = props;
+  const { documentFragmentRef, versionFragmentRef, onRefetch } = props;
 
   const organizationId = useOrganizationId();
   const navigate = useNavigate();
+  const { versionId } = useParams();
   const { __ } = useTranslate();
   const { email: defaultEmail } = use(CurrentUser);
   const updateDialogRef = useRef<{ open: () => void }>(null);
@@ -82,11 +84,17 @@ export function DocumentActionsDropdownn(props: {
     );
 
   const handleDelete = () => {
+    const connectionId = ConnectionHandler.getConnectionID(
+      organizationId,
+      DocumentsConnectionKey,
+      { orderBy: { direction: "ASC", field: "TITLE" } },
+    );
     confirm(
       () =>
         deleteDocument({
           variables: {
             input: { documentId: document.id },
+            connections: [connectionId],
           },
           onSuccess() {
             void navigate(`/organizations/${organizationId}/documents`);
@@ -104,15 +112,23 @@ export function DocumentActionsDropdownn(props: {
   };
 
   const handleDeleteDraft = () => {
+    const versionsConnectionId = ConnectionHandler.getConnectionID(
+      document.id,
+      "DocumentLayout_versions",
+    );
     confirm(
       () =>
         deleteDraftDocumentVersion({
           variables: {
             input: { documentVersionId: version.id },
-            connections: [document.versions.__id],
+            connections: [document.versions.__id, versionsConnectionId],
           },
           onSuccess() {
-            window.location.href = `/organizations/${organizationId}/documents/${document.id}`;
+            if (versionId) {
+              void navigate(`/organizations/${organizationId}/documents/${document.id}`);
+            } else {
+              onRefetch();
+            }
           },
         }),
       {

apps/console/src/pages/organizations/documents/_components/UpdateVersionDialog.tsx

@@ -12,6 +12,7 @@ import {
 } from "@probo/ui";
 import { type RefObject, useEffect } from "react";
 import { useFragment, useMutation } from "react-relay";
+import { useNavigate } from "react-router";
 import { graphql } from "relay-runtime";
 import { z } from "zod";
 
@@ -92,6 +93,7 @@ export default function UpdateVersionDialog(props: UpdateVersionDialogProps) {
   const { fKey, ref } = props;
 
   const organizationId = useOrganizationId();
+  const navigate = useNavigate();
   const { __ } = useTranslate();
   const { toast } = useToast();
   const dialogRef = useDialogRef();
@@ -174,11 +176,12 @@ export default function UpdateVersionDialog(props: UpdateVersionDialogProps) {
               },
               onSuccess: () => {
                 dialogRef.current?.close();
-                window.location.href = `/organizations/${organizationId}/documents/${document.id}`;
+                void navigate(`/organizations/${organizationId}/documents/${document.id}/versions/${newVersionId}`);
               },
             });
           } else {
             dialogRef.current?.close();
+            void navigate(`/organizations/${organizationId}/documents/${document.id}/versions/${newVersionId}`);
           }
         },
       });