Fleet UI: Refactor client filtered counts for cleaner rendering (#19689)

frontend/components/TableContainer/DataTable/DataTable.tsx

@@ -43,7 +43,7 @@ interface IDataTableProps {
   showMarkAllPages: boolean;
   isAllPagesSelected: boolean; // TODO: make dependent on showMarkAllPages
   toggleAllPagesSelected?: any; // TODO: an event type and make it dependent on showMarkAllPages
-  resultsTitle: string;
+  resultsTitle?: string;
   defaultPageSize: number;
   defaultPageIndex?: number;
   primarySelectAction?: IActionButtonProps;
@@ -85,7 +85,7 @@ const DataTable = ({
   showMarkAllPages,
   isAllPagesSelected,
   toggleAllPagesSelected,
-  resultsTitle,
+  resultsTitle = "results",
   defaultPageSize,
   defaultPageIndex,
   primarySelectAction,

frontend/components/TableContainer/TableContainer.tsx

@@ -12,7 +12,6 @@ import Icon from "components/Icon/Icon";
 import { COLORS } from "styles/var/colors";
 
 import DataTable from "./DataTable/DataTable";
-import TableContainerUtils from "./utilities/TableContainerUtils";
 import { IActionButtonProps } from "./DataTable/ActionButton/ActionButton";
 
 export interface ITableQueryData {
@@ -44,7 +43,8 @@ interface ITableContainerProps<T = any> {
   inputPlaceHolder?: string;
   disableActionButton?: boolean;
   disableMultiRowSelect?: boolean;
-  resultsTitle: string;
+  /** resultsTitle used in DataTable for matching results text */
+  resultsTitle?: string;
   resultsHtml?: JSX.Element;
   additionalQueries?: string;
   emptyComponent: React.ElementType;
@@ -64,10 +64,6 @@ interface ITableContainerProps<T = any> {
   primarySelectAction?: IActionButtonProps;
   /** Secondary button/s after selecting a row */
   secondarySelectActions?: IActionButtonProps[]; // TODO: Combine with primarySelectAction as these are all rendered in the same spot
-  /**
-   * @deprecated please use renderCount instead
-   * */
-  filteredCount?: number;
   searchToolTipText?: string;
   // TODO - consolidate this functionality within `filters`
   searchQueryColumn?: string;
@@ -103,7 +99,6 @@ interface ITableContainerProps<T = any> {
    * bar and API call so TableContainer will reset its page state to 0  */
   resetPageIndex?: boolean;
   disableTableHeader?: boolean;
-  show0Count?: boolean;
 }
 
 const baseClass = "table-container";
@@ -140,7 +135,6 @@ const TableContainer = <T,>({
   disableCount,
   primarySelectAction,
   secondarySelectActions,
-  filteredCount,
   searchToolTipText,
   isClientSidePagination,
   onClientSidePaginationChange,
@@ -160,7 +154,6 @@ const TableContainer = <T,>({
   setExportRows,
   resetPageIndex,
   disableTableHeader,
-  show0Count,
 }: ITableContainerProps<T>) => {
   const [searchQuery, setSearchQuery] = useState(defaultSearchQuery);
   const [sortHeader, setSortHeader] = useState(defaultSortHeader || "");
@@ -252,16 +245,6 @@ const TableContainer = <T,>({
     additionalQueries,
   ]);
 
-  // TODO: refactor existing components relying on displayCount to use renderCount pattern
-  const displayCount = useCallback((): any => {
-    if (typeof filteredCount === "number") {
-      return filteredCount;
-    } else if (typeof clientFilterCount === "number") {
-      return clientFilterCount;
-    }
-    return data?.length || 0;
-  }, [filteredCount, clientFilterCount, data]);
-
   const renderPagination = useCallback(() => {
     if (disablePagination || isClientSidePagination) {
       return null;
@@ -309,37 +292,16 @@ const TableContainer = <T,>({
               stackControls ? "stack-table-controls" : ""
             }`}
           >
-            <span className="results-count">
-              {renderCount && (
-                <div
-                  className={`${baseClass}__results-count ${
-                    stackControls ? "stack-table-controls" : ""
-                  }`}
-                  style={opacity}
-                >
-                  {renderCount()}
-                </div>
-              )}
-              {!renderCount &&
-              !disableCount &&
-              (isMultiColumnFilter || displayCount() || show0Count) ? (
-                <div
-                  className={`${baseClass}__results-count ${
-                    stackControls ? "stack-table-controls" : ""
-                  }`}
-                  style={opacity}
-                >
-                  {TableContainerUtils.generateResultsCountText(
-                    resultsTitle,
-                    displayCount(),
-                    show0Count
-                  )}
-                  {resultsHtml}
-                </div>
-              ) : (
-                <div />
-              )}
-            </span>
+            {renderCount && !disableCount && (
+              <div
+                className={`${baseClass}__results-count ${
+                  stackControls ? "stack-table-controls" : ""
+                }`}
+                style={opacity}
+              >
+                {renderCount()}
+              </div>
+            )}
             <span className="controls">
               {actionButton && !actionButton.hideButton && (
                 <Button

frontend/components/TableContainer/TableCount/TableCount.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+import { generateResultsCountText } from "../utilities/TableContainerUtils";
+
+interface ITableCountProps {
+  name: string;
+  count?: number;
+}
+
+const TableCount = ({ name, count }: ITableCountProps): JSX.Element => {
+  return <span>{generateResultsCountText(name, count)}</span>;
+};
+
+export default TableCount;

frontend/components/TableContainer/TableCount/index.ts

@@ -0,0 +1 @@
+export { default } from "./TableCount";

frontend/components/TableContainer/_styles.scss

@@ -54,9 +54,6 @@
       height: 38px; // Fixes overlap with .Select outline
     }
   }
-  .results-count {
-    height: 40px; // Match height of search/filters
-  }
 
   &__results-count {
     display: flex;
@@ -66,6 +63,7 @@
     color: $core-fleet-black;
     margin: 0;
     height: 40px;
+    gap: 12px;
 
     .count-error {
       color: $ui-error;

frontend/components/TableContainer/utilities/TableContainerUtils.ts

@@ -1,11 +1,10 @@
 const DEFAULT_RESULTS_NAME = "results";
 
-const generateResultsCountText = (
+export const generateResultsCountText = (
   name: string = DEFAULT_RESULTS_NAME,
-  resultsCount: number,
-  show0Count = false
+  resultsCount?: number
 ): string => {
-  if (resultsCount === 0 && !show0Count) return `No ${name}`;
+  if (!resultsCount || resultsCount === 0) return `0 ${name}`;
   // If there is 1 result and the last 3 letters in the result
   // name are "ies," we remove the "ies" and add "y"
   // to make the name singular