fix: use MachineListGroupCount

- extract GroupColumn component

src/app/machines/views/MachineList/MachineListTable/GroupColumn/GroupColumn.test.tsx

@@ -0,0 +1,71 @@
+import GroupColumn from "./GroupColumn";
+
+import { FetchGroupKey } from "app/store/machine/types";
+import { useFetchMachineCount } from "app/store/machine/utils/hooks";
+import { machineStateListGroup as machineStateListGroupFactory } from "testing/factories";
+import { renderWithMockStore, screen, waitFor } from "testing/utils";
+
+jest.mock("app/store/machine/utils/hooks");
+
+const mockedUseFetchMachineCount = useFetchMachineCount as jest.MockedFunction<
+  typeof useFetchMachineCount
+>;
+mockedUseFetchMachineCount.mockReturnValue({
+  machineCountLoading: false,
+  machineCountLoaded: true,
+  machineCount: 2,
+});
+
+it("displays the correct column name and machines count", () => {
+  const group = machineStateListGroupFactory({
+    collapsed: false,
+    count: 5,
+    name: "Test Group",
+    value: "test-group",
+  });
+  renderWithMockStore(
+    <GroupColumn
+      callId="test-call-id"
+      filter={null}
+      group={group}
+      grouping={FetchGroupKey.Status}
+      hiddenGroups={[null]}
+      setHiddenGroups={jest.fn()}
+      showActions={false}
+    />
+  );
+
+  expect(screen.getByText(/Test Group/)).toBeInTheDocument();
+  expect(screen.getByText(/5 machines/)).toBeInTheDocument();
+});
+
+it("displays correct fetched machines count when initial count is null", async () => {
+  mockedUseFetchMachineCount.mockReturnValue({
+    machineCountLoading: false,
+    machineCountLoaded: true,
+    machineCount: 2,
+  });
+  const group = machineStateListGroupFactory({
+    collapsed: false,
+    count: null,
+    name: "Test Group",
+    value: "test-group",
+  });
+
+  renderWithMockStore(
+    <GroupColumn
+      callId="test-call-id"
+      filter={null}
+      group={group}
+      grouping={FetchGroupKey.Status}
+      hiddenGroups={[null]}
+      setHiddenGroups={jest.fn()}
+      showActions={false}
+    />
+  );
+
+  expect(screen.getByText(/Test Group/)).toBeInTheDocument();
+  await waitFor(() =>
+    expect(screen.getByText(/2 machines/)).toBeInTheDocument()
+  );
+});

src/app/machines/views/MachineList/MachineListTable/GroupColumn/GroupColumn.tsx

@@ -0,0 +1,86 @@
+import { Button } from "@canonical/react-components";
+
+import DoubleRow from "app/base/components/DoubleRow";
+import GroupCheckbox from "app/machines/views/MachineList/MachineListTable/GroupCheckbox";
+import MachineListGroupCount from "app/machines/views/MachineList/MachineListTable/MachineListGroupCount";
+import type { GroupRowsProps } from "app/machines/views/MachineList/MachineListTable/types";
+import type { MachineStateListGroup } from "app/store/machine/types";
+
+export enum Label {
+  HideGroup = "Hide",
+  ShowGroup = "Show",
+}
+
+const GroupColumn = ({
+  group,
+  hiddenGroups,
+  setHiddenGroups,
+  showActions,
+  callId,
+  grouping,
+  filter,
+}: Pick<
+  GroupRowsProps,
+  "hiddenGroups" | "setHiddenGroups" | "showActions" | "callId" | "filter"
+> & {
+  grouping: NonNullable<GroupRowsProps["grouping"]>;
+  group: MachineStateListGroup;
+}) => {
+  const { collapsed, count, name, value } = group;
+  return (
+    <>
+      <DoubleRow
+        data-testid="group-cell"
+        primary={
+          showActions ? (
+            <GroupCheckbox
+              callId={callId}
+              group={group}
+              groupName={name}
+              grouping={grouping}
+            />
+          ) : (
+            <strong>{name}</strong>
+          )
+        }
+        secondary={
+          <MachineListGroupCount
+            count={count}
+            filter={filter}
+            group={value}
+            grouping={grouping}
+          />
+        }
+        secondaryClassName={
+          showActions ? "u-nudge--secondary-row u-align--left" : null
+        }
+      />
+      <div className="machine-list__group-toggle">
+        <Button
+          appearance="base"
+          dense
+          hasIcon
+          onClick={() => {
+            if (collapsed) {
+              setHiddenGroups &&
+                setHiddenGroups(
+                  hiddenGroups.filter((hiddenGroup) => hiddenGroup !== value)
+                );
+            } else {
+              setHiddenGroups &&
+                setHiddenGroups(hiddenGroups.concat([value as string]));
+            }
+          }}
+        >
+          {collapsed ? (
+            <i className="p-icon--plus">{Label.ShowGroup}</i>
+          ) : (
+            <i className="p-icon--minus">{Label.HideGroup}</i>
+          )}
+        </Button>
+      </div>
+    </>
+  );
+};
+
+export default GroupColumn;

src/app/machines/views/MachineList/MachineListTable/GroupColumn/index.ts

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

src/app/machines/views/MachineList/MachineListTable/tableModels.tsx

@@ -1,12 +1,10 @@
-import { Button } from "@canonical/react-components";
 import type { MainTableRow } from "@canonical/react-components/dist/components/MainTable/MainTable";
 import classNames from "classnames";
-import pluralize from "pluralize";
 
 import CoresColumn from "./CoresColumn";
 import DisksColumn from "./DisksColumn";
 import FabricColumn from "./FabricColumn";
-import GroupCheckbox from "./GroupCheckbox";
+import GroupColumn from "./GroupColumn";
 import NameColumn from "./NameColumn";
 import OwnerColumn from "./OwnerColumn";
 import PoolColumn from "./PoolColumn";
@@ -20,18 +18,14 @@ import type {
   TableColumn,
   GenerateRowParams,
   RowContent,
+  GroupRowsProps,
 } from "./types";
 
 import DoubleRow from "app/base/components/DoubleRow";
 import Placeholder from "app/base/components/Placeholder";
 import { columnLabels, columns, MachineColumns } from "app/machines/constants";
 import type { GetMachineMenuToggleHandler } from "app/machines/types";
-import type {
-  Machine,
-  MachineStateListGroup,
-  FetchFilters,
-  FetchGroupKey,
-} from "app/store/machine/types";
+import type { Machine } from "app/store/machine/types";
 
 /**
  * Filters columns by hiddenColumns.
@@ -318,11 +312,6 @@ export const generateRows = ({
   });
 };
 
-export enum Label {
-  HideGroup = "Hide",
-  ShowGroup = "Show",
-}
-
 export const generateGroupRows = ({
   callId,
   grouping,
@@ -334,18 +323,11 @@ export const generateGroupRows = ({
   hiddenColumns,
   filter,
   ...rowProps
-}: {
-  callId?: string | null;
-  grouping?: FetchGroupKey | null;
-  groups: MachineStateListGroup[] | null;
-  hiddenGroups: NonNullable<MachineListTableProps["hiddenGroups"]>;
-  setHiddenGroups: MachineListTableProps["setHiddenGroups"];
-  filter: FetchFilters | null;
-} & Omit<GenerateRowParams, "groupValue">) => {
+}: GroupRowsProps) => {
   let rows: MainTableRow[] = [];
 
   groups?.forEach((group) => {
-    const { collapsed, count, items: machineIDs, name, value } = group;
+    const { collapsed, items: machineIDs, name } = group;
     // When the table is set to ungrouped then there are no group headers.
     if (grouping) {
       rows.push({
@@ -355,55 +337,14 @@ export const generateGroupRows = ({
           {
             colSpan: columns.length - hiddenColumns.length,
             content: (
-              <>
-                <DoubleRow
-                  data-testid="group-cell"
-                  primary={
-                    showActions ? (
-                      <GroupCheckbox
-                        callId={callId}
-                        group={group}
-                        groupName={name}
-                        grouping={grouping}
-                      />
-                    ) : (
-                      <strong>{name}</strong>
-                    )
-                  }
-                  secondary={pluralize("machine", count ?? undefined, true)}
-                  secondaryClassName={
-                    showActions ? "u-nudge--secondary-row u-align--left" : null
-                  }
-                />
-                <div className="machine-list__group-toggle">
-                  <Button
-                    appearance="base"
-                    dense
-                    hasIcon
-                    onClick={() => {
-                      if (collapsed) {
-                        setHiddenGroups &&
-                          setHiddenGroups(
-                            hiddenGroups.filter(
-                              (hiddenGroup) => hiddenGroup !== value
-                            )
-                          );
-                      } else {
-                        setHiddenGroups &&
-                          setHiddenGroups(
-                            hiddenGroups.concat([value as string])
-                          );
-                      }
-                    }}
-                  >
-                    {collapsed ? (
-                      <i className="p-icon--plus">{Label.ShowGroup}</i>
-                    ) : (
-                      <i className="p-icon--minus">{Label.HideGroup}</i>
-                    )}
-                  </Button>
-                </div>
-              </>
+              <GroupColumn
+                filter={filter}
+                group={group}
+                grouping={grouping}
+                hiddenGroups={hiddenGroups}
+                setHiddenGroups={setHiddenGroups}
+                showActions={showActions}
+              />
             ),
           },
         ],

src/app/machines/views/MachineList/MachineListTable/types.ts

@@ -10,6 +10,7 @@ import type {
   Machine,
   MachineStateListGroup,
   FetchGroupKey,
+  FetchFilters,
 } from "app/store/machine/types";
 import type { useFetchMachines } from "app/store/machine/utils/hooks";
 
@@ -36,6 +37,15 @@ export type MachineListTableProps = {
   setSortKey: (sortKey: FetchGroupKey | null) => void;
 };
 
+export type GroupRowsProps = {
+  callId?: string | null;
+  grouping?: FetchGroupKey | null;
+  groups: MachineStateListGroup[] | null;
+  hiddenGroups: NonNullable<MachineListTableProps["hiddenGroups"]>;
+  setHiddenGroups: MachineListTableProps["setHiddenGroups"];
+  filter: FetchFilters | null;
+} & Omit<GenerateRowParams, "groupValue">;
+
 export type TableColumn = MainTableCell & { key: string };
 
 export type GenerateRowParams = {

src/app/machines/views/Machines.test.tsx

@@ -6,8 +6,8 @@ import configureStore from "redux-mock-store";
 
 import { MachineSidePanelViews } from "../constants";
 
+import { Label } from "./MachineList/MachineListTable/GroupColumn";
 import { DEFAULTS } from "./MachineList/MachineListTable/constants";
-import { Label } from "./MachineList/MachineListTable/tableModels";
 import Machines from "./Machines";
 
 import { actions as machineActions } from "app/store/machine";