Fix issue #27376

[shnaiiider]

Fixes #27376

This PR fixes the UI inconsistency issue in the right-hand panel of Data Asset pages when using a Custom Persona.

The problem was caused by excessive white space and inconsistent spacing between widgets (Data Products, Tags, Glossary Terms) due to two main issues:

1. EntityRightPanel spacing issue (Layer 1 fix):

   • The Space component was rendering empty widget wrappers.
   • These empty wrappers still contributed 24px gaps, leading to large unintended white space.
   • Added conditional rendering to ensure wrapper <div>s are only rendered when widgets have meaningful content or user permissions.

2. Widget-level empty rendering issue (Layer 2 fix):

   • TagsContainerV2 and DataProductsContainer rendered full ExpandableCard shells even when empty.
   • This resulted in visible blank blocks and inconsistent UI spacing under custom personas.
   • Added guards to prevent rendering empty UI shells when no data and no permissions exist.

Expected behavior:

• Right panel should maintain consistent spacing.
• No unnecessary blank space when widgets are empty.
• Layout should remain aligned regardless of Custom Persona configuration.

Checklist:

• I have read the CONTRIBUTING document.
• My PR title is Fixes #27376: UI inconsistency - remove excessive white space in right panel
• I have commented on my code, particularly in hard-to-understand areas.
• For JSON Schema changes: I updated the migration scripts or explained why it is not needed.

Bug fix checklist:

• I have verified the fix removes unnecessary spacing in the right panel.
• I have ensured no UI regression in default persona views.

Tested with:

-EntityRightPanel.test.tsx

Before(UI spacing between components in custom persona new):

After(There is no random spacing in the custom persona):

[github-actions]

Hi there 👋 Thanks for your contribution!

The OpenMetadata team will review the PR shortly! Once it has been labeled as safe to test, the CI workflows
will start executing and we'll be able to make sure everything is working as expected.

Let us know if you need any help!

[gitar-bot]

💡 Quality: Inconsistent indentation of conditional )} closings

The closing )} on lines 121 and 136 are heavily indented with ~15 spaces, which is inconsistent with the opening {shouldShowTags && ( and {shouldShowGlossaryTerms && ( that follow the surrounding indentation level. This makes the JSX tree harder to read and will likely be flagged by a linter/formatter.

Suggested fix:

Run the project's formatter (e.g., Prettier) to normalize indentation, or manually align the closing `)}` to match the indentation of the corresponding opening `{shouldShow… && (`.

_{Was this helpful? React with 👍 / 👎 | Reply gitar fix to apply this suggestion}

[gitar-bot]

Code Review 👍 Approved with suggestions 0 resolved / 1 findings

Fixes issue #27376 to ensure correct conditional rendering logic. Please normalize the indentation of closing braces on lines 121 and 136 to match the surrounding code block.

💡 Quality: Inconsistent indentation of conditional )} closings

📄 openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityRightPanel/EntityRightPanel.tsx:121 📄 openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityRightPanel/EntityRightPanel.tsx:136

The closing )} on lines 121 and 136 are heavily indented with ~15 spaces, which is inconsistent with the opening {shouldShowTags && ( and {shouldShowGlossaryTerms && ( that follow the surrounding indentation level. This makes the JSX tree harder to read and will likely be flagged by a linter/formatter.

Suggested fix

Run the project's formatter (e.g., Prettier) to normalize indentation, or manually align the closing `)}` to match the indentation of the corresponding opening `{shouldShow… && (`.

🤖 Prompt for agents

Code Review: Fixes issue #27376 to ensure correct conditional rendering logic. Please normalize the indentation of closing braces on lines 121 and 136 to match the surrounding code block.

1. 💡 Quality: Inconsistent indentation of conditional `)}` closings
   Files: openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityRightPanel/EntityRightPanel.tsx:121, openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityRightPanel/EntityRightPanel.tsx:136

   The closing `)}` on lines 121 and 136 are heavily indented with ~15 spaces, which is inconsistent with the opening `{shouldShowTags && (` and `{shouldShowGlossaryTerms && (` that follow the surrounding indentation level. This makes the JSX tree harder to read and will likely be flagged by a linter/formatter.

   Suggested fix:
   Run the project's formatter (e.g., Prettier) to normalize indentation, or manually align the closing `)}` to match the indentation of the corresponding opening `{shouldShow… && (`.

Options

Display: compact → Showing less information.

Comment with these commands to change:

Compact

gitar display:verbose

_{Was this helpful? React with 👍 / 👎 | Gitar}