From 221fcf77dcd84c57aeff2d8a3e22037e39cbfa33 Mon Sep 17 00:00:00 2001
From: Jesper Hodge <19345795+jesperhodge@users.noreply.github.com>
Date: Fri, 27 Oct 2023 10:25:51 -0400
Subject: [PATCH] feat: change filter status text (#657)

Changed the filter status text on the files and uploads table to display also the number of files, even when a filter is applied.

https://2u-internal.atlassian.net/browse/TNL-11086 (internal ticket)

I just copied most of paragon's FilterStatus component, made some adjustments, and then overrode the default component.
---
 src/files-and-uploads/FilesAndUploads.jsx     |  2 +
 .../table-components/FilterStatus.jsx         | 69 +++++++++++++++++++
 2 files changed, 71 insertions(+)
 create mode 100644 src/files-and-uploads/table-components/FilterStatus.jsx

diff --git a/src/files-and-uploads/FilesAndUploads.jsx b/src/files-and-uploads/FilesAndUploads.jsx
index 97f48cfc9..c8aafcefc 100644
--- a/src/files-and-uploads/FilesAndUploads.jsx
+++ b/src/files-and-uploads/FilesAndUploads.jsx
@@ -42,6 +42,7 @@ import { AccessColumn, MoreInfoColumn, ThumbnailColumn } from './table-component
 import ApiStatusToast from './ApiStatusToast';
 import { clearErrors } from './data/slice';
 import getPageHeadTitle from '../generic/utils';
+import FilterStatus from './table-components/FilterStatus';
 
 const FilesAndUploads = ({
   courseId,
@@ -297,6 +298,7 @@ const FilesAndUploads = ({
           itemCount={totalCount}
           pageCount={Math.ceil(totalCount / 50)}
           data={assets}
+          FilterStatusComponent={FilterStatus}
         >
           {isEmpty(assets) && loadingStatus !== RequestStatus.IN_PROGRESS ? (
             <Dropzone
diff --git a/src/files-and-uploads/table-components/FilterStatus.jsx b/src/files-and-uploads/table-components/FilterStatus.jsx
new file mode 100644
index 000000000..88fe561db
--- /dev/null
+++ b/src/files-and-uploads/table-components/FilterStatus.jsx
@@ -0,0 +1,69 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { DataTableContext, Button } from '@edx/paragon';
+
+const FilterStatus = ({
+  className, variant, size, clearFiltersText, buttonClassName,
+}) => {
+  const {
+    setAllFilters, RowStatusComponent, page, rows,
+  } = useContext(DataTableContext);
+  if (!setAllFilters) {
+    return null;
+  }
+
+  const RowStatus = RowStatusComponent;
+
+  const pageSize = page?.length || rows?.length;
+
+  return (
+    <div className={className}>
+      <div className="pl-1">
+        <span>Filters applied</span>
+        {!!pageSize && ' ('}
+        <RowStatus className="d-inline" />
+        {!!pageSize && ')'}
+      </div>
+      <Button
+        className={buttonClassName}
+        variant={variant}
+        size={size}
+        onClick={() => setAllFilters([])}
+      >
+        {clearFiltersText === undefined
+          ? (
+            <FormattedMessage
+              id="pgn.DataTable.FilterStatus.clearFiltersText"
+              defaultMessage="Clear filters"
+              description="A text that appears on the `Clear filters` button"
+            />
+          )
+          : clearFiltersText}
+      </Button>
+    </div>
+  );
+};
+
+FilterStatus.defaultProps = {
+  /** Specifies class name to append to the base element. */
+  className: null,
+  /** Specifies class name to append to the button. */
+  buttonClassName: 'pgn__smart-status-button',
+  /** The visual style of the `FilterStatus`. */
+  variant: 'link',
+  /** The size of the `FilterStatus`. */
+  size: 'inline',
+  /** A text that appears on the `Clear filters` button, defaults to 'Clear filters'. */
+  clearFiltersText: undefined,
+};
+
+FilterStatus.propTypes = {
+  className: PropTypes.string,
+  buttonClassName: PropTypes.string,
+  variant: PropTypes.string,
+  size: PropTypes.string,
+  clearFiltersText: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
+};
+
+export default FilterStatus;