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

@@ -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

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;