Prasad P. Pawar created ATLAS-5243:
--------------------------------------
Summary: Atlas UI: Fix relationship tab UX: navigation, graph
popup, and skeleton handling in classic and React UIs
Key: ATLAS-5243
URL: https://issues.apache.org/jira/browse/ATLAS-5243
Project: Atlas
Issue Type: Task
Components: atlas-webui
Affects Versions: 3.0.0
Reporter: Prasad P. Pawar
Assignee: Prasad P. Pawar
h3. Summary
Improvements to the Relationships tab in both classic (dashboardv2) and React
(dashboard) UIs: navigation, graph popup behavior, and handling of API failures.
h3. Changes
h4. 1. Classic UI – Detail page navigation
* Issue: Clicking a relationship card link on an already-loaded detail page
updated the URL but the UI still showed the previous entity.
* Fix: When navigating to a different entity, destroy the current view and
create a new {{DetailPageLayoutView}} instead of reusing it.
* Files: {{{}Router.js{}}}, {{DetailPageLayoutView.js}}
h4. 2. Classic UI – Defensive checks
* Issue: {{TypeError: Cannot read properties of undefined (reading
'columns')}} in {{{}DetailPageLayoutView{}}}.
* Fix: Added checks for {{collectionJSON.attributes.columns}} before use.
* Files: {{DetailPageLayoutView.js}}
h4. 3. Relationship tab link behavior (both UIs)
* Change: Relationship card links now include {{?tabActive=relationship}} so
navigation keeps the user on the Relationships tab.
* Files: {{{}RelationshipCardsLayoutView.js{}}},
{{{}RelationshipLayoutView.js{}}}, {{RelationshipLineage.tsx}}
h4. 4. Classic UI – Graph popup
* Display: Show {{name (typeName)}} in the graph popup list (e.g.
{{{}tbl_00001 (hive_table){}}}).
* Colors: Active links {{{}#1976d2{}}}, deleted links {{#BB5838}} to match the
card view.
* Search: Search includes both name and typeName.
* Files: {{RelationshipLayoutView.js}}
h4. 5. React UI – Graph popup
* Colors: Active links {{{}#1976d2{}}}, deleted links {{#BB5838}} to match the
card view.
* Count badge: Moved to bottom-right, added viewBox padding, improved styling.
* UI cleanup: Removed delete icon from the popup list.
* Serial numbers: Fixed list numbering (1, 2, 3, 4) by using an ordered list
and proper styling.
* Files: {{RelationshipLineage.tsx}}
h4. 6. Both UIs – Skeleton loaders on API failure
* Issue: Skeleton loaders stayed visible when the relationship API failed
(e.g. 400).
* Fix: On API failure, clear skeletons and show the final state (cards or
empty state).
* UX: When all relationship APIs fail, show “Failed to load relationship data”
instead of “No relationship data available.”
* Files: {{{}RelationshipsTab.tsx{}}}, {{RelationshipCardsLayoutView.js}}
h3. Testing
* Navigate between entities via relationship card links (page 1 → 2 → 3).
* Use the graph view popup and verify {{{}name (typeName){}}}, colors, and
list numbering.
* Trigger relationship API failures (e.g. 400) and confirm skeletons are
removed and the correct message is shown.
h3. Affected areas
* Classic UI: {{{}dashboardv2/public/js/views/detail_page/{}}},
{{{}dashboardv2/public/js/views/graph/{}}}, {{dashboardv2/public/js/router/}}
* React UI: {{dashboard/src/views/DetailPage/EntityDetailTabs/}}
--
This message was sent by Atlassian Jira
(v8.20.10#820010)
