feat: add arrow to asset name #2551

awslabs · Feb 28, 2024 · bd12bea · bd12bea
1 parent 7578a2e
commit bd12bea
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 2 deletions.
diff --git a/...yEditor/modeledDataStreamQueryEditor/assetExplorer/assetTable/assetTableNameLink.spec.tsx b/...yEditor/modeledDataStreamQueryEditor/assetExplorer/assetTable/assetTableNameLink.spec.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { AssetTableNameLink } from './assetTableNameLink';
+
+test('renders Link component with correct ariaLabel and onFollow event', () => {
+  const assetId = '123';
+  const assetName = 'Demo Asset Wind Farm';
+  const updateParentAssetId = jest.fn();
+
+  const { getByText, getByTestId } = render(
+    <AssetTableNameLink
+      assetId={assetId}
+      assetName={assetName}
+      updateParentAssetId={updateParentAssetId}
+    />
+  );
+  const link = getByText(assetName);
+
+  expect(link).toBeInTheDocument();
+
+  const linkText = getByTestId('asset-name-link');
+  expect(linkText).toHaveAttribute(
+    'title',
+    `View children assets of ${assetName}`
+  );
+
+  fireEvent.click(link);
+  expect(updateParentAssetId).toHaveBeenCalledWith(assetId);
+});
diff --git a/...eQueryEditor/modeledDataStreamQueryEditor/assetExplorer/assetTable/assetTableNameLink.tsx b/...eQueryEditor/modeledDataStreamQueryEditor/assetExplorer/assetTable/assetTableNameLink.tsx
@@ -1,6 +1,8 @@
-import Link from '@cloudscape-design/components/link';
 import React from 'react';
 
+import { Link, Icon } from '@cloudscape-design/components';
+import { spaceScaledXs } from '@cloudscape-design/design-tokens';
+
 export interface AssetTableNameLinkProps {
   assetId: string;
   assetName: string;
@@ -20,7 +22,13 @@ export function AssetTableNameLink({
         updateParentAssetId(assetId);
       }}
     >
-      {assetName}
+      <span
+        data-testid='asset-name-link'
+        title={`View children assets of ${assetName}`}
+      >
+        <Icon name='angle-right' size='inherit' />
+        <span style={{ paddingLeft: spaceScaledXs }}>{assetName}</span>
+      </span>
     </Link>
   );
 }