From aed7754bc24f55c6dbf06c2e813736e20220066f Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Thu, 15 Feb 2024 00:45:33 +1100
Subject: [PATCH] Fix for AttachmentTable (#6481)

* Fix for AttachmentTable

- Rebuild actions when permissions are recalculated

* Update examples.md
---
 docs/docs/api/python/examples.md              |  2 +-
 .../src/tables/general/AttachmentTable.tsx    | 70 ++++++++++---------
 2 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/docs/docs/api/python/examples.md b/docs/docs/api/python/examples.md
index 52e3de2ea4..4c25905502 100644
--- a/docs/docs/api/python/examples.md
+++ b/docs/docs/api/python/examples.md
@@ -253,4 +253,4 @@ BomItem.create(api, data={'part':sofa_id, 'sub_part':armrest_id, 'quantity':2, '
 ```
 
 Now you have three BOM items that make the BOM for the sofa. The `id` values are the primary keys of the
-specified parts. The reference can be any string that names the instances. 
+specified parts. The reference can be any string that names the instances.
diff --git a/src/frontend/src/tables/general/AttachmentTable.tsx b/src/frontend/src/tables/general/AttachmentTable.tsx
index 44297f5524..7a83ca0423 100644
--- a/src/frontend/src/tables/general/AttachmentTable.tsx
+++ b/src/frontend/src/tables/general/AttachmentTable.tsx
@@ -4,7 +4,7 @@ import { ActionIcon } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { notifications } from '@mantine/notifications';
 import { IconExternalLink, IconFileUpload } from '@tabler/icons-react';
-import { ReactNode, useEffect, useMemo, useState } from 'react';
+import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
 
 import { api } from '../../App';
 import { AttachmentLink } from '../../components/items/AttachmentLink';
@@ -99,6 +99,7 @@ export function AttachmentTable({
 
         setAllowEdit('POST' in actions);
         setAllowDelete('DELETE' in actions);
+
         return response;
       })
       .catch((error) => {
@@ -107,41 +108,44 @@ export function AttachmentTable({
   }, []);
 
   // Construct row actions for the attachment table
-  function rowActions(record: any): RowAction[] {
-    let actions: RowAction[] = [];
+  const rowActions = useCallback(
+    (record: any) => {
+      let actions: RowAction[] = [];
 
-    if (allowEdit) {
-      actions.push(
-        RowEditAction({
-          onClick: () => {
-            editAttachment({
-              endpoint: endpoint,
-              model: model,
-              pk: record.pk,
-              attachmentType: record.attachment ? 'file' : 'link',
-              callback: table.refreshTable
-            });
-          }
-        })
-      );
-    }
+      if (allowEdit) {
+        actions.push(
+          RowEditAction({
+            onClick: () => {
+              editAttachment({
+                endpoint: endpoint,
+                model: model,
+                pk: record.pk,
+                attachmentType: record.attachment ? 'file' : 'link',
+                callback: table.refreshTable
+              });
+            }
+          })
+        );
+      }
 
-    if (allowDelete) {
-      actions.push(
-        RowDeleteAction({
-          onClick: () => {
-            deleteAttachment({
-              endpoint: endpoint,
-              pk: record.pk,
-              callback: table.refreshTable
-            });
-          }
-        })
-      );
-    }
+      if (allowDelete) {
+        actions.push(
+          RowDeleteAction({
+            onClick: () => {
+              deleteAttachment({
+                endpoint: endpoint,
+                pk: record.pk,
+                callback: table.refreshTable
+              });
+            }
+          })
+        );
+      }
 
-    return actions;
-  }
+      return actions;
+    },
+    [allowEdit, allowDelete]
+  );
 
   // Callback to upload file attachment(s)
   function uploadFiles(files: File[]) {