fix: use NoEntitiesFound as empty state for consistency

Author: raswonders

…onents/InventoryTable/NoEntitiesFound.js …nents/InventoryTable/NoEntitiesFound.tsxsrc/components/InventoryTable/NoEntitiesFound.js renamed to src/components/InventoryTable/NoEntitiesFound.tsx src/components/InventoryTable/NoEntitiesFound.js renamed to src/components/InventoryTable/NoEntitiesFound.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {
   Button,
   EmptyState,
@@ -10,23 +9,25 @@ import {
 } from '@patternfly/react-core';
 import { SearchIcon } from '@patternfly/react-icons';
 
-/**
- * Empty state stable when no systems (or other entities) are found.
- *  @param   {object}     props            props object
- *  @param   {string}     props.entities   entities count (systems, workspaces, etc.)
- *  @param   {Function}   props.onClearAll on clear all function
- *  @param   {boolean}    props.showIcon   if true, the icon is shown
- *  @returns {React.node}                  React node with empty state
- */
-const NoEntitiesFound = ({ entities, onClearAll, showIcon }) => (
+interface NoEntitiesFoundProps {
+  entities?: string;
+  onClearAll?: () => void;
+  showIcon?: boolean;
+}
+
+const NoEntitiesFound: React.FC<NoEntitiesFoundProps> = ({
+  entities = 'systems',
+  onClearAll,
+  showIcon = true,
+}) => (
   <EmptyState
     headingLevel="h5"
     titleText={<>{`No matching ${entities} found`}</>}
     variant={EmptyStateVariant.full}
     data-ouia-component-id="empty-state"
     data-ouia-component-type="PF6/EmptyState"
     data-ouia-safe={true}
-    icon={showIcon && SearchIcon}
+    icon={showIcon ? SearchIcon : undefined}
   >
     <EmptyStateBody>
       To continue, edit your filter settings and try again
@@ -43,15 +44,4 @@ const NoEntitiesFound = ({ entities, onClearAll, showIcon }) => (
   </EmptyState>
 );
 
-NoEntitiesFound.propTypes = {
-  entities: PropTypes.string,
-  onClearAll: PropTypes.func,
-  showIcon: PropTypes.bool,
-};
-
-NoEntitiesFound.defaultProps = {
-  entities: 'systems',
-  showIcon: true,
-};
-
 export default NoEntitiesFound;

src/components/SystemsViewTable/SystemsViewTable.tsx

@@ -26,7 +26,7 @@ import {
 import { type System, useSystemsQuery } from './hooks/useSystemsQuery';
 import { ErrorState } from '@redhat-cloud-services/frontend-components/ErrorState';
 import SkeletonTable from '@patternfly/react-component-groups/dist/dynamic/SkeletonTable';
-import { EmptySystemsState } from './components/EmptySystemsState';
+import NoEntitiesFound from '../InventoryTable/NoEntitiesFound';
 
 const PER_PAGE = 50;
 const INITIAL_PAGE = 1;
@@ -44,7 +44,7 @@ const SystemsViewTable: React.FC = () => {
   });
   const { selected, onSelect, isSelected, setSelected } = selection;
 
-  const { data, total, isLoading, isError, error } = useSystemsQuery({
+  const { data, total, isLoading, isError } = useSystemsQuery({
     page: pagination.page,
     perPage: pagination.perPage,
   });
@@ -178,16 +178,16 @@ const SystemsViewTable: React.FC = () => {
         bodyStates={{
           loading: (
             <SkeletonTable
-              ouiaId="loading-systems-state"
+              ouiaId="loading-state"
               isSelectable
               rowsCount={pagination.perPage}
               columns={columns}
             />
           ),
-          empty: <EmptySystemsState />,
+          empty: <NoEntitiesFound />,
           error: (
             <ErrorState
-              ouiaId="error-systems-state"
+              ouiaId="error-state"
               titleText="Unable to load data"
               bodyText="There was an error retrieving data. Check your connection and reload the page."
             />