Add alt text to system icons

.changeset/chilled-moles-obey.md

@@ -0,0 +1,5 @@
+---
+'@envyjs/webui': patch
+---
+
+Add system name as system icon alt text

packages/webui/src/components/ui/TraceRequestData.stories.tsx

@@ -26,6 +26,7 @@ type Story = StoryObj<typeof meta>;
 
 export const RestRequest: Story = {
   args: {
+    systemName: new DefaultSystem().name,
     iconPath: new DefaultSystem().getIconUri(),
     path: '/api/v1/trace/1234?name=test&options=br|hk|desc',
     data: 'name=test&options=br|hk|desc',
@@ -35,6 +36,7 @@ export const RestRequest: Story = {
 
 export const GraphqlRequest: Story = {
   args: {
+    systemName: new GraphqlSystem().name,
     iconPath: new GraphqlSystem().getIconUri(),
     path: '/graphql',
     data: 'Query',
@@ -44,6 +46,7 @@ export const GraphqlRequest: Story = {
 
 export const SanityRequest: Story = {
   args: {
+    systemName: new SanitySystem().name,
     iconPath: new SanitySystem().getIconUri(),
     path: '/api/v1/trace/1234',
     data: 'type: Product',

packages/webui/src/components/ui/TraceRequestData.test.tsx

@@ -14,23 +14,32 @@ describe('TraceRequestData', () => {
   });
 
   it('should render without error', () => {
-    render(<TraceRequestData iconPath="icon.jpg" path="/" />);
+    render(<TraceRequestData systemName="Default" iconPath="icon.jpg" path="/" />);
   });
 
   describe('iconPath', () => {
     it('should render icon as image', () => {
-      const { getByTestId } = render(<TraceRequestData iconPath="icon.jpg" path="/" />);
+      const { getByTestId } = render(<TraceRequestData systemName="Default" iconPath="icon.jpg" path="/" />);
 
       const image = getByTestId('item-image');
 
       expect(image).toBeVisible();
       expect(image).toHaveAttribute('src', 'icon.jpg');
     });
+
+    it('should render system name as image alt text', () => {
+      const { getByTestId } = render(<TraceRequestData systemName="Default" iconPath="icon.jpg" path="/" />);
+
+      const image = getByTestId('item-image');
+
+      expect(image).toBeVisible();
+      expect(image).toHaveAttribute('alt', 'Default');
+    });
   });
 
   describe('hostName', () => {
     it('should not render host if `hostName` is not supplied', () => {
-      const { queryByTestId } = render(<TraceRequestData iconPath="icon.jpg" path="/foo/bar" />);
+      const { queryByTestId } = render(<TraceRequestData systemName="Default" iconPath="icon.jpg" path="/foo/bar" />);
 
       const host = queryByTestId('item-hostname');
 
@@ -39,7 +48,7 @@ describe('TraceRequestData', () => {
 
     it('should render host if `hostName` is supplied', () => {
       const { getByTestId } = render(
-        <TraceRequestData iconPath="icon.jpg" hostName="www.example.com" path="/foo/bar" />,
+        <TraceRequestData systemName="Default" iconPath="icon.jpg" hostName="www.example.com" path="/foo/bar" />,
       );
 
       const host = getByTestId('item-hostname');
@@ -50,7 +59,7 @@ describe('TraceRequestData', () => {
 
     it('should render host next to image', () => {
       const { getByTestId } = render(
-        <TraceRequestData iconPath="icon.jpg" hostName="www.example.com" path="/foo/bar" />,
+        <TraceRequestData systemName="Default" iconPath="icon.jpg" hostName="www.example.com" path="/foo/bar" />,
       );
 
       const host = getByTestId('item-hostname');
@@ -62,7 +71,7 @@ describe('TraceRequestData', () => {
 
   describe('path', () => {
     it('should render path', () => {
-      const { getByTestId } = render(<TraceRequestData iconPath="icon.jpg" path="/foo/bar" />);
+      const { getByTestId } = render(<TraceRequestData systemName="Default" iconPath="icon.jpg" path="/foo/bar" />);
 
       const path = getByTestId('item-path');
 
@@ -71,7 +80,7 @@ describe('TraceRequestData', () => {
     });
 
     it('should render path next to image if `hostName` is not supplied', () => {
-      const { getByTestId } = render(<TraceRequestData iconPath="icon.jpg" path="/foo/bar" />);
+      const { getByTestId } = render(<TraceRequestData systemName="Default" iconPath="icon.jpg" path="/foo/bar" />);
 
       const path = getByTestId('item-path');
       const image = getByTestId('item-image');
@@ -81,7 +90,7 @@ describe('TraceRequestData', () => {
 
     it('should render path next to host if `hostName` is supplied', () => {
       const { getByTestId } = render(
-        <TraceRequestData iconPath="icon.jpg" hostName="www.example.com" path="/foo/bar" />,
+        <TraceRequestData systemName="Default" iconPath="icon.jpg" hostName="www.example.com" path="/foo/bar" />,
       );
 
       const path = getByTestId('item-path');
@@ -93,7 +102,7 @@ describe('TraceRequestData', () => {
 
   describe('data', () => {
     it('should not render data if `data` is not supplied', () => {
-      const { queryByTestId } = render(<TraceRequestData iconPath="icon.jpg" path="/foo/bar" />);
+      const { queryByTestId } = render(<TraceRequestData systemName="Default" iconPath="icon.jpg" path="/foo/bar" />);
 
       const data = queryByTestId('item-data');
 
@@ -102,7 +111,13 @@ describe('TraceRequestData', () => {
 
     it('should render data if `data` is supplied', () => {
       const { getByTestId } = render(
-        <TraceRequestData iconPath="icon.jpg" hostName="www.example.com" path="/foo/bar" data="This is some data" />,
+        <TraceRequestData
+          systemName="Default"
+          iconPath="icon.jpg"
+          hostName="www.example.com"
+          path="/foo/bar"
+          data="This is some data"
+        />,
       );
 
       const data = getByTestId('item-data');
@@ -112,7 +127,13 @@ describe('TraceRequestData', () => {
 
     it('should render data after request detail', () => {
       const { getByTestId } = render(
-        <TraceRequestData iconPath="icon.jpg" hostName="www.example.com" path="/foo/bar" data="This is some data" />,
+        <TraceRequestData
+          systemName="Default"
+          iconPath="icon.jpg"
+          hostName="www.example.com"
+          path="/foo/bar"
+          data="This is some data"
+        />,
       );
 
       const data = getByTestId('item-data');

packages/webui/src/components/ui/TraceRequestData.tsx

@@ -1,20 +1,21 @@
 import useApplication from '@/hooks/useApplication';
 
 export type TraceRequestDataProps = {
+  systemName: string;
   iconPath: string;
   hostName?: string;
   path: string;
   data?: string;
 };
 
-export default function TraceRequestData({ iconPath, hostName, path, data }: TraceRequestDataProps) {
+export default function TraceRequestData({ systemName, iconPath, hostName, path, data }: TraceRequestDataProps) {
   const { selectedTraceId } = useApplication();
   const pathValue = !!selectedTraceId ? `.../${path.split('/').splice(-1, 1).join('/')}` : path;
 
   return (
     <>
       <span data-test-id="item-request" className="flex flex-row items-center">
-        <img data-test-id="item-image" src={iconPath} alt="" className="flex-0 inline-block w-4 h-4 mr-1.5" />
+        <img data-test-id="item-image" src={iconPath} alt={systemName} className="flex-0 inline-block w-4 h-4 mr-1.5" />
         {hostName && (
           <span data-test-id="item-hostname" className="font-semibold pr-1">
             {hostName}

packages/webui/src/systems/index.tsx

@@ -6,11 +6,14 @@ import { pathAndQuery } from '@/utils';
 
 import { getDefaultSystem, getRegisteredSystems } from './registration';
 
-function callOrFallback<T>(trace: Trace, fnName: keyof Omit<System<unknown>, 'name' | 'isMatch' | 'getData'>): T {
+function getSystemByTrace(trace: Trace): System<unknown> | null {
   const systems = getRegisteredSystems();
-  const defaultSystem = getDefaultSystem();
+  return systems.find(x => x.isMatch(trace)) ?? null;
+}
 
-  const system = systems.find(x => x.isMatch(trace));
+function callOrFallback<T>(trace: Trace, fnName: keyof Omit<System<unknown>, 'name' | 'isMatch' | 'getData'>): T {
+  const system = getSystemByTrace(trace);
+  const defaultSystem = getDefaultSystem();
   const data = system?.getData?.(trace) ?? null;
 
   let value = null;
@@ -24,6 +27,10 @@ type SystemDetailProps = {
   trace: Trace;
 };
 
+export function getSystemName(trace: Trace): string {
+  return getSystemByTrace(trace)?.name ?? getDefaultSystem().name;
+}
+
 export function getIconUri(trace: Trace | null): string {
   return callOrFallback(trace as Trace, 'getIconUri');
 }
@@ -42,6 +49,7 @@ export function ListDataComponent({ trace }: SystemDetailProps): React.ReactNode
   const [path, qs] = pathAndQuery(trace);
   return (
     <TraceRequestData
+      systemName={getSystemName(trace)}
       iconPath={getIconUri(trace)}
       hostName={trace.http?.host}
       path={path}

packages/webui/src/systems/systems.test.tsx

@@ -13,6 +13,7 @@ import {
   getIconUri,
   getRequestBody,
   getResponseBody,
+  getSystemName,
 } from '.';
 
 jest.mock('@/systems/registration');
@@ -53,7 +54,12 @@ describe('Systems', () => {
       },
     } as Trace;
 
-    it('should return correct value for `getSystemIconPath`', () => {
+    it('should return correct value for `getSystemName`', () => {
+      const result = getSystemName(trace);
+      expect(result).toEqual('Foo');
+    });
+
+    it('should return correct value for `getIconUri`', () => {
       const result = getIconUri(trace);
       expect(result).toEqual('foo_icon');
     });
@@ -101,6 +107,11 @@ describe('Systems', () => {
       },
     } as Trace;
 
+    it('should return correct value for `getSystemName`', () => {
+      const result = getSystemName(trace);
+      expect(result).toEqual('Bar');
+    });
+
     it('should return correct value for `getIconUri`', () => {
       const result = getIconUri(trace);
       expect(result).toEqual('bar_icon');
@@ -149,7 +160,12 @@ describe('Systems', () => {
       },
     } as Trace;
 
-    it('should return correct value for `getSystemIconPath`', () => {
+    it('should return correct value for `getSystemName`', () => {
+      const result = getSystemName(trace);
+      expect(result).toEqual('Fallbacks');
+    });
+
+    it('should return correct value for `getIconUri`', () => {
       const result = getIconUri(trace);
       expect(result).toEqual('default_icon');
     });
@@ -195,7 +211,12 @@ describe('Systems', () => {
       },
     } as Trace;
 
-    it('should return correct value for `getSystemIconPath`', () => {
+    it('should return correct value for `getSystemName`', () => {
+      const result = getSystemName(trace);
+      expect(result).toEqual('Default');
+    });
+
+    it('should return correct value for `getIconUri`', () => {
       const result = getIconUri(trace);
       expect(result).toEqual('default_icon');
     });