Skip to content

[UI] Migrate Sistent icon imports to append Icon suffix - #19735

Merged
jamieplu merged 5 commits into
meshery:masterfrom
rishiraj38:fix-sistent-icon-imports
May 28, 2026
Merged

jamieplu merged 5 commits into
meshery:masterfrom
rishiraj38:fix-sistent-icon-imports

Conversation

@rishiraj38

Copy link
Copy Markdown
Contributor

Description

This pull request updates the imports and usages of Sistent components/icons in the Meshery UI codebase to conform to the updated @sistent/sistent icon naming schema, appending the Icon suffix to the following components:

  • AccessTime -> AccessTimeIcon
  • ChevronLeft -> ChevronLeftIcon
  • ChevronRight -> ChevronRightIcon
  • FullScreenIconExit -> FullScreenExitIcon
  • GroupAdd -> GroupAddIcon
  • BarchartIcon -> BarChartIcon
  • InfoOutlined -> InfoOutlinedIcon

Additionally, all corresponding unit test mock definitions targeting @sistent/sistent exports and custom component imports have been updated to prevent test failures due to missing mock exports.

Key Changes

  • Renamed imports and JSX elements in UI components.
  • Standardized Sistent imports to import icons directly from @sistent/sistent rather than local components where applicable.
  • Fixed Vitest mock definitions across UI component and dashboard chart test suites to export the correct/new icon shapes (specifically InfoOutlinedIcon mock names).

Signed commits

  • Yes, I signed my commits.

@github-actions github-actions Bot added the component/ui User Interface label May 27, 2026

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request standardizes icon imports and usage across various UI components, replacing legacy or aliased icon names (such as AccessTime, BarchartIcon, GroupAdd, InfoOutlined, ChevronLeft, and ChevronRight) with their canonical *Icon equivalents from @sistent/sistent. The review feedback suggests improving naming consistency in YamlDialog.tsx by using FullScreenIcon with a capital 'S' instead of aliasing it to FullscreenIcon with a lowercase 's', matching the convention of FullScreenExitIcon.

Comment thread ui/components/YamlDialog.tsx Resolved
Comment thread ui/components/YamlDialog.tsx Resolved
…nto fix-sistent-icon-imports

Signed-off-by: Rishi Raj <[email protected]>

# Conflicts:
#	ui/components/workspaces/WorkspaceGridView.test.tsx

@Rajesh-Nagarajan-11 Rajesh-Nagarajan-11 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This PR also includes the upgrade to Sistent v0.24.15.

@github-actions

Copy link
Copy Markdown
Contributor

Commit SHA: 731f813f351739dbdfc106bb701d13bca33fdbea

END-TO-END TESTS

  • Testing started at: May 27th 2026, 6:05:27 pm

📦 Test Result Summary

  • ✅ 58 passed
  • ❌ 2 failed
  • ⚠️ 0 flaked
  • ⏩ 11 skipped

⌛ Duration: 11 minutes and 32 seconds

Overall Result: 👎 Some tests failed.

[Show/Hide] Test Result Details
Test Provider Browser Test Case Tags Result
1 Local chromium-local-provider Action buttons on adapters tab ✅
2 Local chromium-local-provider Aggregation Charts are displayed ✅
3 Local chromium-local-provider alias resolution relationship ✅
4 Local chromium-local-provider alias resolution relationship ✅
5 Local chromium-local-provider alias resolution relationship ✅
6 Local chromium-local-provider alias resolution relationship ✅
7 Local chromium-local-provider alias resolution relationship ✅
8 Local chromium-local-provider alias resolution relationship ✅
9 Local chromium-local-provider alias resolution relationship ✅
10 Local chromium-local-provider alias resolution relationship ✅
11 Local chromium-local-provider alias resolution relationship ✅
12 Local chromium-local-provider All settings tabs ✅
13 Local chromium-local-provider Common UI elements ✅
14 Local chromium-local-provider config patching correctness relationship ✅
15 Local chromium-local-provider config patching correctness relationship ✅
16 Local chromium-local-provider config patching correctness relationship ✅
17 Local chromium-local-provider config patching correctness relationship ✅
18 Local chromium-local-provider config patching correctness relationship ✅
19 Local chromium-local-provider config patching correctness relationship ✅
20 Local chromium-local-provider config patching correctness relationship ✅
21 Local chromium-local-provider config patching correctness relationship ✅
22 Local chromium-local-provider config patching correctness relationship ✅
23 Local chromium-local-provider Configure Existing Istio adapter through Mesh Adapter URL from Management page unstable ⚠️
24 Local chromium-local-provider Connect to Meshery Istio Adapter and configure it ➖
25 Local chromium-local-provider Create a Model ❌
26 Local chromium-local-provider Delete Kubernetes cluster connections ➖
27 Local chromium-local-provider evaluation idempotency relationship ✅
28 Local chromium-local-provider evaluation idempotency relationship ✅
29 Local chromium-local-provider evaluation idempotency relationship ✅
30 Local chromium-local-provider evaluation idempotency relationship ✅
31 Local chromium-local-provider evaluation idempotency relationship ✅
32 Local chromium-local-provider evaluation idempotency relationship ✅
33 Local chromium-local-provider evaluation idempotency relationship ✅
34 Local chromium-local-provider evaluation idempotency relationship ✅
35 Local chromium-local-provider evaluation idempotency relationship ✅
36 Local chromium-local-provider Grafana elements on metrics tab ❌
37 Local chromium-local-provider Import a Model via CSV Import ➖
38 Local chromium-local-provider Import a Model via File Import ➖
39 Local chromium-local-provider Import a Model via Url Import ➖
40 Local chromium-local-provider Logout from current user session ✅
41 Local chromium-local-provider Ping Istio Adapter unstable ⚠️
42 Local chromium-local-provider Search a Model and Export it ➖
43 Local chromium-local-provider should edit design in Design Configurator ✅
44 Local chromium-local-provider should identify relationships for All Relationships relationship ✅
45 Local chromium-local-provider should identify relationships for Container-Hierarchical-Parent-Alias-Relationship relationship ✅
46 Local chromium-local-provider should identify relationships for deployment-configmap-reference-relationship relationship ✅
47 Local chromium-local-provider should identify relationships for Hierarchical-Parent-Namespace-Relationship relationship ✅
48 Local chromium-local-provider should identify relationships for meshery-design relationship ✅
49 Local chromium-local-provider should identify relationships for pv-pvc-edge-non-binding-reference-relationship relationship ✅
50 Local chromium-local-provider should identify relationships for Service-To-Deployment-Network relationship ✅
51 Local chromium-local-provider should verify Design Configurator page elements ✅
52 Local chromium-local-provider structural integrity relationship ✅
53 Local chromium-local-provider structural integrity relationship ✅
54 Local chromium-local-provider structural integrity relationship ✅
55 Local chromium-local-provider structural integrity relationship ✅
56 Local chromium-local-provider structural integrity relationship ✅
57 Local chromium-local-provider structural integrity relationship ✅
58 Local chromium-local-provider structural integrity relationship ✅
59 Local chromium-local-provider structural integrity relationship ✅
60 Local chromium-local-provider structural integrity relationship ✅
61 Local chromium-local-provider Test if Left Navigation Panel is displayed ✅
62 Local chromium-local-provider Test if Notification button is displayed ✅
63 Local chromium-local-provider Test if Profile button is displayed ✅
64 Local chromium-local-provider Toggle "Send Anonymous Performance Results" ✅
65 Local chromium-local-provider Toggle "Send Anonymous Usage Statistics" ✅
66 Local chromium-local-provider Verify extension nav items use top-level layout ➖
67 Local chromium-local-provider Verify Meshery Adapter for Istio Section ✅
68 Local chromium-local-provider Verify Meshery Catalog Section Details ➖
69 Local chromium-local-provider Verify Meshery Design Embed Details ➖
70 Local chromium-local-provider Verify Meshery Docker Extension Details ➖
71 Local chromium-local-provider Verify Performance Analysis Details ➖
72 Local chromium-local-provider Verify that UI components are displayed ✅
73 Local local-setup authenticate as Local provider ✅

❌ Failed Test Details

The following tests failed. Click on each to see the failure reason:

❌ Grafana elements on metrics tab (Local - chromium-local-provider)

File Location: /home/runner/work/meshery/meshery/ui/tests/e2e/performance.spec.ts

Error Message:

Error: �[2mexpect(�[22m�[31mlocator�[39m�[2m).�[22mtoBeVisible�[2m(�[22m�[2m)�[22m failed

Locator: getByTestId('meshery-metrics')
Expected: visible
Timeout: 60000ms
Error: element(s) not found

Call log:
�[2m  - Expect "toBeVisible" with timeout 60000ms�[22m
�[2m  - waiting for getByTestId('meshery-metrics')�[22m

Code Snippet:

�[0m �[90m 38 |�[39m     �[36mawait�[39m dashboardPage�[33m.�[39mnavigateToDashboard()�[33m;�[39m
 �[90m 39 |�[39m     �[36mawait�[39m dashboardPage�[33m.�[39mnavigateToPerformance()�[33m;�[39m
�[31m�[1m>�[22m�[39m�[90m 40 |�[39m     �[36mawait�[39m expect(page�[33m.�[39mgetByTestId(�[32m'meshery-metrics'�[39m))�[33m.�[39mtoBeVisible()�[33m;�[39m
 �[90m    |�[39m                                                       �[31m�[1m^�[22m�[39m
 �[90m 41 |�[39m   })�[33m;�[39m
 �[90m 42 |�[39m
 �[90m 43 |�[39m   test(�[32m'Common UI elements'�[39m�[33m,�[39m �[36masync�[39m ({ page }�[33m:�[39m { page�[33m:�[39m �[33mPage�[39m }) �[33m=>�[39m {�[0m
❌ Create a Model (Local - chromium-local-provider)

File Location: Not Found

Error Message:

�[31mTest timeout of 600000ms exceeded.�[39m

🔗 Relationship Tests

[Show/Hide] Relationship Test Details (18 tests)
Kind Type SubType From To Model Design Name Status
edge binding permission ClusterRole ServiceAccount kubernetes Understanding Relationships ❌
edge binding permission Role ServiceAccount kubernetes Understanding Relationships ❌
edge non-binding network Service Deployment kubernetes service-to-deployment-network ✅
edge non-binding network Service Deployment kubernetes meshery-design-fixture.json ✅
edge non-binding reference ClusterRoleBinding ClusterRole kubernetes meshery-design-fixture.json ❌
hierarchical parent alias Container Deployment kubernetes container-hierarchical-parent-alias-relationship ✅
hierarchical parent alias Container Deployment kubernetes deployment-configmap-reference-relationship ✅
hierarchical parent alias Container Deployment kubernetes service-to-deployment-network ✅
hierarchical parent alias Container Deployment kubernetes meshery-design-fixture.json ✅
hierarchical parent alias Container Deployment kubernetes Understanding Relationships ✅
hierarchical parent alias Container Pod kubernetes container-hierarchical-parent-alias-relationship ✅
hierarchical parent inventory * Namespace kubernetes hierarchical-parent-namespace-relationship ✅
hierarchical parent inventory * Namespace kubernetes service-to-deployment-network ✅
hierarchical parent inventory * Namespace kubernetes pv-pvc-edge-non-binding-reference-relationship ✅
hierarchical parent inventory * Namespace kubernetes Understanding Relationships ✅
hierarchical sibling matchlabels ClusterRole ClusterRole kubernetes meshery-design-fixture.json ✅
hierarchical sibling matchlabels Deployment Deployment kubernetes meshery-design-fixture.json ✅
hierarchical sibling matchlabels Service Service kubernetes meshery-design-fixture.json ✅

@KhushamBansal KhushamBansal left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM !

@Junnygram Junnygram left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

I've checked out this branch locally and verified all icon migrations and corresponding test mock definitions:

  • Icon suffix renaming: AccessTimeIcon, ChevronLeftIcon, ChevronRightIcon, FullScreenExitIcon, GroupAddIcon, BarChartIcon, and InfoOutlinedIcon are correctly integrated across all pages, layouts, and workspace components.
  • Chevron migrations: Confirmed that the recent merge of feature/banana-three-join/chevronicon-sistent-update resolved the outstanding Chevron icon upgrades in the workspace views.
  • Unit Tests: Ran the UI unit test suite locally; all mock definitions targeting @sistent/sistent mock exports are correct and tests are compiling and passing without issues.

@jamieplu jamieplu left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

@jamieplu
jamieplu merged commit f9f0255 into meshery:master May 28, 2026
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

component/ui User Interface

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants