feat(inputs): show input services status count (#1430)

ui/src/components/table/TableHeader.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Select from '@splunk/react-ui/Select';
 import Paginator from '@splunk/react-ui/Paginator';
+import { Typography } from '@splunk/react-ui/Typography';
+
 import styled from 'styled-components';
 import { _ } from '@splunk/ui-utils/i18n';
 
@@ -71,13 +73,24 @@ function TableHeader({
         );
     };
 
+    const getInputCountStatus = () => {
+        const enabledRowCount = allFilteredData.filter((item) => !item.disabled).length;
+        const showCountStatus = `(${enabledRowCount} of ${totalElement} enabled)`;
+
+        return (
+            <Typography as="span" className="inputNumber">
+                {totalElement}
+                {totalElement > 1 ? _(` ${itemLabel}s`) : _(` ${itemLabel}`)}
+                &nbsp;
+                {page === PAGE_INPUT && totalElement >= pageSize ? showCountStatus : null}
+            </Typography>
+        );
+    };
+
     return (
         <TableHeaderWrapper>
             <div>
-                <span className="inputNumber">
-                    {totalElement}
-                    {totalElement > 1 ? _(` ${itemLabel}s`) : _(` ${itemLabel}`)}
-                </span>
+                {getInputCountStatus()}
                 {page === PAGE_INPUT ? (
                     <TableSelectBoxWrapper>
                         <Select

ui/src/components/table/stories/rowDataMockup.ts

@@ -394,6 +394,98 @@ export const ROW_DATA = [
     },
 ];
 
+export const ROW_DATA_FOR_COUNT = [
+    ...ROW_DATA,
+    {
+        name: 'testsomethingelse1',
+        id: 'https://localhost:8000/servicesNS/nobody/Splunk_TA_UCCExample/splunk_ta_uccexample_account/testsomethingelse',
+        updated: '1970-01-01T00:00:00+00:00',
+        links: {
+            alternate:
+                '/servicesNS/nobody/Splunk_TA_UCCExample/splunk_ta_uccexample_account/testsomethingelse',
+            list: '/servicesNS/nobody/Splunk_TA_UCCExample/splunk_ta_uccexample_account/testsomethingelse',
+            edit: '/servicesNS/nobody/Splunk_TA_UCCExample/splunk_ta_uccexample_account/testsomethingelse',
+            remove: '/servicesNS/nobody/Splunk_TA_UCCExample/splunk_ta_uccexample_account/testsomethingelse',
+        },
+        author: 'admin',
+        acl: {
+            app: 'Splunk_TA_UCCExample',
+            can_change_perms: true,
+            can_list: true,
+            can_share_app: true,
+            can_share_global: true,
+            can_share_user: true,
+            can_write: true,
+            modifiable: true,
+            owner: 'admin',
+            perms: {
+                read: ['*'],
+                write: ['admin', 'sc_admin'],
+            },
+            removable: true,
+            sharing: 'global',
+        },
+        content: {
+            account_multiple_select: 'two',
+            account_radio: '1',
+            auth_type: 'basic',
+            custom_endpoint: 'login.example.com',
+            disabled: true,
+            'eai:acl': null,
+            'eai:appName': 'Splunk_TA_UCCExample',
+            'eai:userName': 'nobody',
+            password: '******',
+            custom_text: 'testsomethingelse',
+            token: '******',
+            username: 'test1',
+        },
+    },
+    {
+        name: 'zzzzzzzz',
+        id: 'https://localhost:8000/servicesNS/nobody/Splunk_TA_UCCExample/splunk_ta_uccexample_account/zzzzzzz',
+        updated: '1970-01-01T00:00:00+00:00',
+        links: {
+            alternate:
+                '/servicesNS/nobody/Splunk_TA_UCCExample/splunk_ta_uccexample_account/zzzzzzz',
+            list: '/servicesNS/nobody/Splunk_TA_UCCExample/splunk_ta_uccexample_account/zzzzzzz',
+            edit: '/servicesNS/nobody/Splunk_TA_UCCExample/splunk_ta_uccexample_account/zzzzzzz',
+            remove: '/servicesNS/nobody/Splunk_TA_UCCExample/splunk_ta_uccexample_account/zzzzzzz',
+        },
+        author: 'admin',
+        acl: {
+            app: 'Splunk_TA_UCCExample',
+            can_change_perms: true,
+            can_list: true,
+            can_share_app: true,
+            can_share_global: true,
+            can_share_user: true,
+            can_write: true,
+            modifiable: true,
+            owner: 'admin',
+            perms: {
+                read: ['*'],
+                write: ['admin', 'sc_admin'],
+            },
+            removable: true,
+            sharing: 'global',
+        },
+        content: {
+            account_multiple_select: 'one',
+            account_radio: '1',
+            auth_type: 'basic',
+            custom_endpoint: 'login.example.com',
+            disabled: true,
+            'eai:acl': null,
+            'eai:appName': 'Splunk_TA_UCCExample',
+            'eai:userName': 'nobody',
+            password: '******',
+            custom_text: '222222',
+            token: '******',
+            username: 'zzzzz',
+        },
+    },
+];
+
 export const MockRowData = {
     links: {
         create: `/servicesNS/nobody/-/splunk_ta_uccexample_account/_new`,
@@ -402,6 +494,14 @@ export const MockRowData = {
     entry: ROW_DATA,
     messages: [],
 };
+export const MockRowDataForStatusCount = {
+    links: {
+        create: `/servicesNS/nobody/-/splunk_ta_uccexample_account/_new`,
+    },
+    updated: '2023-08-21T11:54:12+00:00',
+    entry: ROW_DATA_FOR_COUNT,
+    messages: [],
+};
 
 export const ServerHandlers = [
     http.get(`/servicesNS/nobody/-/splunk_ta_uccexample_account`, () =>

ui/src/components/table/tests/TableWrapper.test.tsx

@@ -3,12 +3,16 @@ import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { http, HttpResponse } from 'msw';
 import { BrowserRouter } from 'react-router-dom';
-import { MockRowData } from '../stories/rowDataMockup';
+import { MockRowData, MockRowDataForStatusCount } from '../stories/rowDataMockup';
 import TableWrapper, { ITableWrapperProps } from '../TableWrapper';
 import { server } from '../../../mocks/server';
 import { TableContextProvider } from '../../../context/TableContext';
 import { setUnifiedConfig } from '../../../util/util';
-import { getSimpleConfigWithMapping, SIMPLE_NAME_TABLE_MOCK_DATA } from '../stories/configMockups';
+import {
+    getSimpleConfigStylePage,
+    getSimpleConfigWithMapping,
+    SIMPLE_NAME_TABLE_MOCK_DATA,
+} from '../stories/configMockups';
 
 jest.mock('immutability-helper');
 
@@ -183,3 +187,29 @@ it('Correctly render status labels with mapped values', async () => {
     const inActiveStatusCell = within(inActiveRow).getByTestId('status');
     expect(inActiveStatusCell).toHaveTextContent('Disabled Field');
 });
+
+it('Check inputs count is visible', async () => {
+    const props = {
+        page: 'inputs',
+        serviceName: 'example_input_one',
+        handleRequestModalOpen,
+        handleOpenPageStyleDialog,
+        displayActionBtnAllRows: false,
+    } satisfies ITableWrapperProps;
+    server.use(
+        http.get('/servicesNS/nobody/-/splunk_ta_uccexample_example_input_one', () =>
+            HttpResponse.json(MockRowDataForStatusCount)
+        )
+    );
+
+    setUnifiedConfig(getSimpleConfigStylePage());
+
+    render(
+        <TableContextProvider>
+            <TableWrapper {...props} />
+        </TableContextProvider>,
+        { wrapper: BrowserRouter }
+    );
+    const statusCount = await screen.findByText('11 Inputs (7 of 11 enabled)');
+    expect(statusCount).toBeInTheDocument();
+});