Merge pull request #4022 from dlabrecq/emptyState

Refactor empty state for when there is no source status

src/routes/components/page/noData/noDataState.tsx

@@ -1,5 +1,4 @@
 import {
-  Bullseye,
   Button,
   EmptyState,
   EmptyStateBody,
@@ -14,8 +13,6 @@ import React from 'react';
 import type { WrappedComponentProps } from 'react-intl';
 import { injectIntl } from 'react-intl';
 
-import { styles } from './noData.styles';
-
 interface NoDataStateOwnProps {
   detailsComponent?: React.ReactNode;
   showReload?: boolean;
@@ -36,7 +33,7 @@ class NoDataStateBase extends React.Component<NoDataStateProps, any> {
         />
         <EmptyStateBody>
           {intl.formatMessage(messages.noDataStateDesc)}
-          {detailsComponent && <Bullseye style={styles.details}>{detailsComponent}</Bullseye>}
+          {detailsComponent && detailsComponent}
           {intl.formatMessage(messages.noDataStateRefreshDesc)}
         </EmptyStateBody>
         <EmptyStateFooter>

src/routes/details/components/providerDetails/providerDetails.styles.ts

@@ -1,5 +1,6 @@
 import global_BackgroundColor_light_100 from '@patternfly/react-tokens/dist/js/global_BackgroundColor_light_100';
 import global_FontSize_xs from '@patternfly/react-tokens/dist/js/global_FontSize_xs';
+import global_spacer_xl from '@patternfly/react-tokens/dist/js/global_spacer_xl';
 import type React from 'react';
 
 export const styles = {
@@ -9,4 +10,8 @@ export const styles = {
   loading: {
     backgroundColor: global_BackgroundColor_light_100.value,
   },
+  detailsTable: {
+    marginBottom: global_spacer_xl.value,
+    marginTop: global_spacer_xl.value,
+  },
 } as { [className: string]: React.CSSProperties };

src/routes/details/components/providerDetails/providerDetails.tsx

@@ -1,3 +1,4 @@
+import { Bullseye } from '@patternfly/react-core';
 import type { Providers } from 'api/providers';
 import { ProviderType } from 'api/providers';
 import { getProvidersQuery } from 'api/queries/providersQuery';
@@ -8,6 +9,7 @@ import { useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
 import { NotAvailable } from 'routes/components/page/notAvailable';
 import { LoadingState } from 'routes/components/state/loadingState';
+import { filterProviders } from 'routes/utils/providers';
 import type { RootState } from 'store';
 import { FetchStatus } from 'store/common';
 import { providersQuery, providersSelectors } from 'store/providers';
@@ -47,7 +49,17 @@ const ProviderDetails: React.FC<ProviderDetailsProps> = ({ providerType }: Provi
     );
   }
 
-  return <ProviderDetailsTable providers={providers} providerType={providerType} />;
+  // Filter providers to skip an extra API request
+  const filteredProviders = filterProviders(providers, providerType)?.data?.filter(data => data.status !== null);
+  if (filteredProviders.length === 0) {
+    return;
+  }
+
+  return (
+    <Bullseye style={styles.detailsTable}>
+      <ProviderDetailsTable providers={filteredProviders} providerType={providerType} />
+    </Bullseye>
+  );
 };
 
 const useMapToProps = (): ProviderDetailsStateProps => {

src/routes/details/components/providerDetails/providerDetailsTable.tsx

@@ -1,16 +1,15 @@
-import type { Providers, ProviderType } from 'api/providers';
+import type { Provider, ProviderType } from 'api/providers';
 import messages from 'locales/messages';
 import React, { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { DataTable } from 'routes/components/dataTable';
-import { filterProviders } from 'routes/utils/providers';
 
 import { OverallStatus } from './components/overallStatus';
 import { SourceLink } from './components/sourceLink';
 import { ProviderDetailsModal } from './providerDetailsModal';
 
 interface ProviderDetailsTableOwnProps {
-  providers?: Providers;
+  providers?: Provider[];
   providerType?: ProviderType;
 }
 
@@ -26,9 +25,6 @@ const ProviderDetailsTable: React.FC<ProviderDetailsTableProps> = ({ providers,
       return;
     }
 
-    // Filter OCP providers to skip an extra API request
-    const filteredProviders = filterProviders(providers, providerType)?.data?.filter(data => data.status !== null);
-
     const newRows = [];
     const newColumns = [
       {
@@ -45,7 +41,7 @@ const ProviderDetailsTable: React.FC<ProviderDetailsTableProps> = ({ providers,
       },
     ];
 
-    filteredProviders?.map(item => {
+    providers?.map(item => {
       // const clusterId = item?.authentication?.credentials?.cluster_id;
 
       newRows.push({
@@ -67,7 +63,7 @@ const ProviderDetailsTable: React.FC<ProviderDetailsTableProps> = ({ providers,
     initDatum();
   }, [providers]);
 
-  return <DataTable columns={columns} isActionsCell rows={rows} />;
+  return rows.length ? <DataTable columns={columns} isActionsCell rows={rows} /> : null;
 };
 
 export { ProviderDetailsTable };