refactor: ♻️ Improve empty messages

skupperproject · Feb 7, 2025 · b01947c · b01947c
1 parent 26a1e84
commit b01947c
Show file tree

Hide file tree

Showing 17 changed files with 30 additions and 42 deletions.
diff --git a/__tests__/ComponentPairsList.spec.tsx b/__tests__/ComponentPairsList.spec.tsx
@@ -8,8 +8,8 @@ import pairsList from '../mocks/data/COMPONENT_PAIRS.json';
 import components from '../mocks/data/COMPONENTS.json';
 import { loadMockServer } from '../mocks/server';
 import { waitForElementToBeRemovedTimeout } from '../src/config/app';
+import { Labels } from '../src/config/labels';
 import { getTestsIds } from '../src/config/testIds';
-import { SkEmptyDataLabels } from '../src/core/components/SkEmptyData';
 import LoadingPage from '../src/core/components/SkLoading';
 import PairsList from '../src/pages/Components/components/PairList';
 import { Providers } from '../src/providers';
@@ -65,6 +65,6 @@ describe('Component Pairs Llist component', () => {
       timeout: waitForElementToBeRemovedTimeout
     });
 
-    expect(screen.getByText(SkEmptyDataLabels.Default)).toBeInTheDocument();
+    expect(screen.getByText(Labels.NoLinkFound)).toBeInTheDocument();
   });
 });
diff --git a/__tests__/Links.spec.tsx b/__tests__/Links.spec.tsx
@@ -10,7 +10,6 @@ import { loadMockServer } from '../mocks/server';
 import { waitForElementToBeRemovedTimeout } from '../src/config/app';
 import { Labels } from '../src/config/labels';
 import { getTestsIds } from '../src/config/testIds';
-import { SkEmptyDataLabels } from '../src/core/components/SkEmptyData';
 import LoadingPage from '../src/core/components/SkLoading';
 import Links from '../src/pages/Sites/components/Links';
 import { Providers } from '../src/providers';
@@ -96,7 +95,7 @@ describe('Links component', () => {
       timeout: waitForElementToBeRemovedTimeout
     });
 
-    expect(screen.getByText(SkEmptyDataLabels.Default)).toBeInTheDocument();
+    expect(screen.getByText(Labels.NoLinkFound)).toBeInTheDocument();
     expect(screen.queryByText(Labels.OutLinks)).not.toBeInTheDocument();
     expect(screen.queryByText(Labels.InLinks)).not.toBeInTheDocument();
   });

diff --git a/__tests__/ProcessPairsList.spec.tsx b/__tests__/ProcessPairsList.spec.tsx
@@ -10,7 +10,6 @@ import { loadMockServer } from '../mocks/server';
 import { waitForElementToBeRemovedTimeout } from '../src/config/app';
 import { Labels } from '../src/config/labels';
 import { getTestsIds } from '../src/config/testIds';
-import { SkEmptyDataLabels } from '../src/core/components/SkEmptyData';
 import LoadingPage from '../src/core/components/SkLoading';
 import PairsList from '../src/pages/Processes/components/PairsList';
 import { ProcessesRoutesPaths } from '../src/pages/Processes/Processes.enum';
@@ -71,6 +70,6 @@ describe('Process Pairs List component', () => {
       timeout: waitForElementToBeRemovedTimeout
     });
 
-    expect(screen.getByText(SkEmptyDataLabels.Default)).toBeInTheDocument();
+    expect(screen.getByText(Labels.NoDataFound)).toBeInTheDocument();
   });
 });
diff --git a/__tests__/SitePairsList.spec.tsx b/__tests__/SitePairsList.spec.tsx
@@ -8,8 +8,8 @@ import pairsList from '../mocks/data/SITE_PAIRS.json';
 import sites from '../mocks/data/SITES.json';
 import { loadMockServer } from '../mocks/server';
 import { waitForElementToBeRemovedTimeout } from '../src/config/app';
+import { Labels } from '../src/config/labels';
 import { getTestsIds } from '../src/config/testIds';
-import { SkEmptyDataLabels } from '../src/core/components/SkEmptyData';
 import LoadingPage from '../src/core/components/SkLoading';
 import PairsList from '../src/pages/Sites/components/PairList';
 import { Providers } from '../src/providers';
@@ -65,6 +65,6 @@ describe('Site Pairs List component', () => {
       timeout: waitForElementToBeRemovedTimeout
     });
 
-    expect(screen.getByText(SkEmptyDataLabels.Default)).toBeInTheDocument();
+    expect(screen.getByText(Labels.NoLinkFound)).toBeInTheDocument();
   });
 });
diff --git a/__tests__/SkEmptyData.spec.tsx b/__tests__/SkEmptyData.spec.tsx
@@ -1,12 +1,13 @@
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
 
-import SKEmptyData, { SkEmptyDataLabels } from '../src/core/components/SkEmptyData';
+import { Labels } from '../src/config/labels';
+import SKEmptyData from '../src/core/components/SkEmptyData';
 
 describe('SkEmptyData', () => {
   it('should render with default message', () => {
     render(<SKEmptyData />);
-    expect(screen.getByText(SkEmptyDataLabels.Default)).toBeInTheDocument();
+    expect(screen.getByText(Labels.NoDataFound)).toBeInTheDocument();
   });
 
   it('should render with custom message', () => {

diff --git a/src/config/labels.ts b/src/config/labels.ts
@@ -164,6 +164,10 @@ export const Labels = {
   NoMetricFound: 'No metrics found',
   NoBiflowFound: 'No connections or requests to display',
 
+  NoDataFound: 'No data found',
+  NoLinkFound: 'No link found',
+  NoLinkFoundDescription: 'There are currently no available connections between the resources',
+
   fetchDataDescription: 'The data for the service network is being retrieved. One moment please...',
   ProcessDescription:
     'A process represents running application code.<br>On Kubernetes, a process is a pod. On Docker or Podman, a process is a container. On virtual machines or bare metal hosts',

diff --git a/src/core/components/SkEmptyData/index.tsx b/src/core/components/SkEmptyData/index.tsx
@@ -2,9 +2,7 @@ import { ComponentType, FC } from 'react';
 
 import { Bullseye, EmptyState, EmptyStateBody, EmptyStateVariant } from '@patternfly/react-core';
 
-export enum SkEmptyDataLabels {
-  Default = 'no data found'
-}
+import { Labels } from '../../../config/labels';
 
 interface SkEmptyDataProps {
   message?: string;
@@ -13,12 +11,7 @@ interface SkEmptyDataProps {
   dataTestid?: string;
 }
 
-const SKEmptyData: FC<SkEmptyDataProps> = function ({
-  message = SkEmptyDataLabels.Default,
-  description,
-  icon,
-  ...props
-}) {
+const SKEmptyData: FC<SkEmptyDataProps> = function ({ message = Labels.NoDataFound, description, icon, ...props }) {
   return (
     <Bullseye data-testid={props.dataTestid}>
       <EmptyState headingLevel="h2" titleText={message} variant={EmptyStateVariant.sm} isFullHeight icon={icon}>

diff --git a/src/core/components/SkTable/SkCustomCells/SkViewDetailsCell/index.tsx b/src/core/components/SkTable/SkCustomCells/SkViewDetailsCell/index.tsx
@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 
 import { Button } from '@patternfly/react-core';
-import { SearchIcon } from '@patternfly/react-icons';
+import { CubesIcon } from '@patternfly/react-icons';
 
 interface SkViewDetailCellProps<T> {
   link?: string;
@@ -17,7 +17,7 @@ const SkViewDetailCell = function <T>({ value, onClick }: SkViewDetailCellProps<
   }, [value, onClick]);
 
   return (
-    <Button icon={<SearchIcon />} variant="plain" aria-label="Action" onClick={handleOnClick} title="Click details" />
+    <Button icon={<CubesIcon />} variant="plain" aria-label="Action" onClick={handleOnClick} title="Click details" />
   );
 };
 

diff --git a/src/pages/Components/components/PairList.tsx b/src/pages/Components/components/PairList.tsx
@@ -44,7 +44,7 @@ const PairsList: FC<PairsListProps> = function ({ component: { identity: id, nam
   if (isEmpty) {
     return (
       <Card isFullHeight>
-        <SKEmptyData icon={CubesIcon} />
+        <SKEmptyData icon={CubesIcon} message={Labels.NoLinkFound} description={Labels.NoLinkFoundDescription} />
       </Card>
     );
   }

diff --git a/src/pages/Sites/components/Links.tsx b/src/pages/Sites/components/Links.tsx
@@ -23,7 +23,7 @@ const Links: FC<PairsListProps> = function ({ site: { identity: id } }) {
   if (isEmpty) {
     return (
       <Card isFullHeight>
-        <SKEmptyData icon={CubesIcon} />
+        <SKEmptyData icon={CubesIcon} message={Labels.NoLinkFound} description={Labels.NoLinkFoundDescription} />
       </Card>
     );
   }

diff --git a/src/pages/Sites/components/PairList.tsx b/src/pages/Sites/components/PairList.tsx
@@ -45,7 +45,7 @@ const PairsList: FC<PairsListProps> = function ({ site: { identity: id } }) {
   if (isEmpty) {
     return (
       <Card isFullHeight>
-        <SKEmptyData icon={CubesIcon} />
+        <SKEmptyData icon={CubesIcon} message={Labels.NoLinkFound} description={Labels.NoLinkFoundDescription} />
       </Card>
     );
   }

diff --git a/src/pages/shared/Metrics/components/Latency.tsx b/src/pages/shared/Metrics/components/Latency.tsx
@@ -1,7 +1,7 @@
 import { FC, useCallback, useState } from 'react';
 
 import { Card, CardBody, CardExpandableContent, CardHeader, CardTitle } from '@patternfly/react-core';
-import { SearchIcon } from '@patternfly/react-icons';
+import { CubesIcon } from '@patternfly/react-icons';
 import { keepPreviousData, useQueries } from '@tanstack/react-query';
 
 import LatencyCharts from './LatencyCharts';
@@ -68,7 +68,7 @@ const Latency: FC<LatencyProps> = function ({ title = '', selectedFilters, refet
             <SKEmptyData
               message={Labels.NoMetricFound}
               description={Labels.NoMetricFoundDescription}
-              icon={SearchIcon}
+              icon={CubesIcon}
             />
           )}
         </CardBody>

diff --git a/src/pages/shared/Metrics/components/Request.tsx b/src/pages/shared/Metrics/components/Request.tsx
@@ -1,7 +1,7 @@
 import { FC, useCallback, useState } from 'react';
 
 import { Card, CardBody, CardExpandableContent, CardHeader, CardTitle } from '@patternfly/react-core';
-import { SearchIcon } from '@patternfly/react-icons';
+import { CubesIcon } from '@patternfly/react-icons';
 import { keepPreviousData, useQuery } from '@tanstack/react-query';
 
 import RequestCharts from './RequestCharts';
@@ -64,7 +64,7 @@ const Request: FC<RequestProps> = function ({ selectedFilters, refetchInterval }
             <SKEmptyData
               message={Labels.NoMetricFound}
               description={Labels.NoMetricFoundDescription}
-              icon={SearchIcon}
+              icon={CubesIcon}
             />
           )}
         </CardBody>

diff --git a/src/pages/shared/Metrics/components/Response.tsx b/src/pages/shared/Metrics/components/Response.tsx
@@ -1,7 +1,7 @@
 import { FC, useCallback, useState } from 'react';
 
 import { Card, CardBody, CardExpandableContent, CardHeader, CardTitle } from '@patternfly/react-core';
-import { SearchIcon } from '@patternfly/react-icons';
+import { CubesIcon } from '@patternfly/react-icons';
 import { keepPreviousData, useQuery } from '@tanstack/react-query';
 
 import ResponseCharts from './ResponseCharts';
@@ -89,7 +89,7 @@ const Response: FC<ResponseProps> = function ({ selectedFilters, refetchInterval
             <SKEmptyData
               message={Labels.NoMetricFound}
               description={Labels.NoMetricFoundDescription}
-              icon={SearchIcon}
+              icon={CubesIcon}
             />
           )}
         </CardBody>

diff --git a/src/pages/shared/Metrics/components/TcpConnection.tsx b/src/pages/shared/Metrics/components/TcpConnection.tsx
@@ -12,7 +12,7 @@ import {
   FlexItem,
   Title
 } from '@patternfly/react-core';
-import { SearchIcon } from '@patternfly/react-icons';
+import { CubesIcon } from '@patternfly/react-icons';
 import { useQuery } from '@tanstack/react-query';
 
 import { Labels } from '../../../../config/labels';
@@ -97,7 +97,7 @@ const TcpConnection: FC<TcpConnectionProps> = function ({ selectedFilters, refet
             <SKEmptyData
               message={Labels.NoMetricFound}
               description={Labels.NoMetricFoundDescription}
-              icon={SearchIcon}
+              icon={CubesIcon}
             />
           )}
         </CardBody>

diff --git a/src/pages/shared/Metrics/components/Traffic.tsx b/src/pages/shared/Metrics/components/Traffic.tsx
@@ -1,7 +1,7 @@
 import { FC, useCallback, useState } from 'react';
 
 import { Card, CardBody, CardExpandableContent, CardHeader, CardTitle, Stack, StackItem } from '@patternfly/react-core';
-import { SearchIcon } from '@patternfly/react-icons';
+import { CubesIcon } from '@patternfly/react-icons';
 import { keepPreviousData, useQuery } from '@tanstack/react-query';
 
 import TrafficCharts from './TrafficCharts';
@@ -93,7 +93,7 @@ const Traffic: FC<TrafficProps> = function ({ selectedFilters, refetchInterval }
             <SKEmptyData
               message={Labels.NoMetricFound}
               description={Labels.NoMetricFoundDescription}
-              icon={SearchIcon}
+              icon={CubesIcon}
             />
           )}
         </CardBody>

diff --git a/yarn.lock b/yarn.lock
@@ -7644,13 +7644,6 @@ [email protected]:
   optionalDependencies:
     fsevents "~2.3.3"
 
-<<<<<<< HEAD
-vitest@^3.0.5:
-  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/vitest/-/vitest-3.0.5.tgz#a9a3fa1203d85869c9ba66f3ea990b72d00ddeb0"
-  integrity sha512-4dof+HvqONw9bvsYxtkfUp2uHsTN9bV2CZIi1pWgoFpL1Lld8LA1ka9q/ONSsoScAKG7NVGf2stJTI7XRkXb2Q==
-  dependencies:
-=======
 vite@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/vite/-/vite-6.1.0.tgz#00a4e99a23751af98a2e4701c65ba89ce23858a6"
@@ -7667,7 +7660,6 @@ vitest@^3.0.5:
   resolved "https://registry.yarnpkg.com/vitest/-/vitest-3.0.5.tgz#a9a3fa1203d85869c9ba66f3ea990b72d00ddeb0"
   integrity sha512-4dof+HvqONw9bvsYxtkfUp2uHsTN9bV2CZIi1pWgoFpL1Lld8LA1ka9q/ONSsoScAKG7NVGf2stJTI7XRkXb2Q==
   dependencies:
->>>>>>> bfc9e3a6 (chore: :hammer: Update dev dependecies)
     "@vitest/expect" "3.0.5"
     "@vitest/mocker" "3.0.5"
     "@vitest/pretty-format" "^3.0.5"