From 9b053de0b71e6952802f4321301979e815c07ad0 Mon Sep 17 00:00:00 2001
From: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>
Date: Mon, 20 Nov 2023 14:06:36 -0500
Subject: [PATCH] fix: filter overwritten by sort (#702)

---
 .../files-page/FilesPage.test.jsx             | 12 +++++++++--
 .../SortAndFilterModal.jsx                    |  7 +++----
 .../videos-page/VideosPage.jsx                |  7 ++++++-
 .../videos-page/VideosPage.test.jsx           | 20 +++++++++++++++----
 src/files-and-videos/videos-page/messages.js  |  4 ++++
 5 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/src/files-and-videos/files-page/FilesPage.test.jsx b/src/files-and-videos/files-page/FilesPage.test.jsx
index 80028bbad..140623146 100644
--- a/src/files-and-videos/files-page/FilesPage.test.jsx
+++ b/src/files-and-videos/files-page/FilesPage.test.jsx
@@ -300,7 +300,11 @@ describe('FilesAndUploads', () => {
 
         const sortNameAscendingButton = screen.getByText(messages.sortByNameAscending.defaultMessage);
         fireEvent.click(sortNameAscendingButton);
-        fireEvent.click(screen.getByText(messages.applySortButton.defaultMessage));
+
+        await waitFor(() => {
+          fireEvent.click(screen.getByText(messages.applySortButton.defaultMessage));
+        });
+
         expect(screen.queryByText(messages.sortModalTitleLabel.defaultMessage)).toBeNull();
       });
 
@@ -317,7 +321,11 @@ describe('FilesAndUploads', () => {
 
         const sortBySizeDescendingButton = screen.getByText(messages.sortBySizeDescending.defaultMessage);
         fireEvent.click(sortBySizeDescendingButton);
-        fireEvent.click(screen.getByText(messages.applySortButton.defaultMessage));
+
+        await waitFor(() => {
+          fireEvent.click(screen.getByText(messages.applySortButton.defaultMessage));
+        });
+
         expect(screen.queryByText(messages.sortModalTitleLabel.defaultMessage)).toBeNull();
       });
     });
diff --git a/src/files-and-videos/generic/table-components/sort-and-filter-modal/SortAndFilterModal.jsx b/src/files-and-videos/generic/table-components/sort-and-filter-modal/SortAndFilterModal.jsx
index 1249a8373..2739f9d41 100644
--- a/src/files-and-videos/generic/table-components/sort-and-filter-modal/SortAndFilterModal.jsx
+++ b/src/files-and-videos/generic/table-components/sort-and-filter-modal/SortAndFilterModal.jsx
@@ -44,11 +44,10 @@ const SortAndFilterModal = ({
       remove(e.target.value);
     }
   };
-
-  const handleApply = () => {
-    closeSort();
-    handleSort(sortBy);
+  const handleApply = async () => {
+    await handleSort(sortBy);
     processFilters(filterBy, columns, setAllFilters);
+    closeSort();
   };
 
   const handleClearAll = () => {
diff --git a/src/files-and-videos/videos-page/VideosPage.jsx b/src/files-and-videos/videos-page/VideosPage.jsx
index b7f035292..984bf9818 100644
--- a/src/files-and-videos/videos-page/VideosPage.jsx
+++ b/src/files-and-videos/videos-page/VideosPage.jsx
@@ -148,9 +148,14 @@ const VideosPage = ({
   const processingStatusColumn = {
     id: 'status',
     Header: '',
+    accessor: 'status',
     Cell: ({ row }) => StatusColumn({ row }),
     Filter: CheckboxFilter,
-    filterChoices: [{ name: intl.formatMessage(messages.processingCheckboxLabel), value: 'Processing' }],
+    filterChoices: [
+      { name: intl.formatMessage(messages.processingCheckboxLabel), value: 'Processing' },
+
+      { name: intl.formatMessage(messages.failedCheckboxLabel), value: 'Failed' },
+    ],
   };
   const videoThumbnailColumn = {
     id: 'courseVideoImageUrl',
diff --git a/src/files-and-videos/videos-page/VideosPage.test.jsx b/src/files-and-videos/videos-page/VideosPage.test.jsx
index 766bd87bb..1a4e889ce 100644
--- a/src/files-and-videos/videos-page/VideosPage.test.jsx
+++ b/src/files-and-videos/videos-page/VideosPage.test.jsx
@@ -351,7 +351,10 @@ describe('FilesAndUploads', () => {
           it('should be enabled and sort files by name', async () => {
             const sortNameAscendingButton = screen.getByText(messages.sortByNameAscending.defaultMessage);
             fireEvent.click(sortNameAscendingButton);
-            fireEvent.click(screen.getByText(messages.applySortButton.defaultMessage));
+
+            await waitFor(() => {
+              fireEvent.click(screen.getByText(messages.applySortButton.defaultMessage));
+            });
 
             expect(screen.queryByText(messages.sortModalTitleLabel.defaultMessage)).toBeNull();
           });
@@ -359,7 +362,10 @@ describe('FilesAndUploads', () => {
           it('sort button should be enabled and sort files by file size', async () => {
             const sortBySizeDescendingButton = screen.getByText(messages.sortBySizeDescending.defaultMessage);
             fireEvent.click(sortBySizeDescendingButton);
-            fireEvent.click(screen.getByText(messages.applySortButton.defaultMessage));
+
+            await waitFor(() => {
+              fireEvent.click(screen.getByText(messages.applySortButton.defaultMessage));
+            });
 
             expect(screen.queryByText(messages.sortModalTitleLabel.defaultMessage)).toBeNull();
           });
@@ -374,7 +380,10 @@ describe('FilesAndUploads', () => {
             fireEvent.click(transcribedCheckboxFilter);
             fireEvent.click(notTranscribedCheckboxFilter);
             fireEvent.click(transcribedCheckboxFilter);
-            fireEvent.click(screen.getByText(messages.applySortButton.defaultMessage));
+
+            await waitFor(() => {
+              fireEvent.click(screen.getByText(messages.applySortButton.defaultMessage));
+            });
 
             const galleryCards = screen.getAllByTestId('grid-card', { exact: false });
 
@@ -406,7 +415,10 @@ describe('FilesAndUploads', () => {
           it('should remove Transcribed filter chip', async () => {
             const transcribedCheckboxFilter = screen.getByText(videoMessages.transcribedCheckboxLabel.defaultMessage);
             fireEvent.click(transcribedCheckboxFilter);
-            fireEvent.click(screen.getByText(messages.applySortButton.defaultMessage));
+
+            await waitFor(() => {
+              fireEvent.click(screen.getByText(messages.applySortButton.defaultMessage));
+            });
 
             const imageFilterChip = screen.getByTestId('icon-after');
             fireEvent.click(imageFilterChip);
diff --git a/src/files-and-videos/videos-page/messages.js b/src/files-and-videos/videos-page/messages.js
index 27c5a5ef6..db10abaf7 100644
--- a/src/files-and-videos/videos-page/messages.js
+++ b/src/files-and-videos/videos-page/messages.js
@@ -33,6 +33,10 @@ const messages = defineMessages({
     id: 'course-authoring.files-and-videos.sort-and-filter.modal.filter.processingCheckbox.label',
     defaultMessage: 'Processing',
   },
+  failedCheckboxLabel: {
+    id: 'course-authoring.files-and-videos.sort-and-filter.modal.filter.failedCheckbox.label',
+    defaultMessage: 'Failed',
+  },
 });
 
 export default messages;