diff --git a/packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.scss b/packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.scss index cfbd454bf1..7ffa512937 100644 --- a/packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.scss +++ b/packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.scss @@ -8,6 +8,7 @@ $tooltip-container-width: 300px; align-items: first baseline; max-width: $tooltip-container-width; text-align: left; + column-gap: $spacer-3; .tab-tooltip-title { font-weight: 700; diff --git a/packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.test.tsx b/packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.test.tsx new file mode 100644 index 0000000000..8cdcbda040 --- /dev/null +++ b/packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.test.tsx @@ -0,0 +1,67 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import WidgetPanelTooltip from './WidgetPanelTooltip'; + +describe('WidgetPanelTooltip', () => { + const descriptor = { + name: 'TestName', + type: 'PartitionedTable', + description: 'This is a test description', + displayName: 'Test Display Name', + }; + + it('renders the formatted type name', () => { + const { getByText } = render( + + ); + expect(getByText('Partitioned Table Name')).toBeInTheDocument(); + }); + + it('renders the name and copy button', () => { + const { getByText, getByRole } = render( + + ); + expect(getByText('TestName')).toBeInTheDocument(); + expect(getByRole('button', { name: /copy name/i })).toBeInTheDocument(); + }); + + it('renders the display name if different from name', () => { + const { getByText } = render( + + ); + expect(getByText('Display Name')).toBeInTheDocument(); + expect(getByText('Test Display Name')).toBeInTheDocument(); + }); + + it('does not render the display name if same as name', () => { + const { queryByText } = render( + + ); + expect(queryByText('Display Name')).not.toBeInTheDocument(); + }); + + it('renders the description if provided', () => { + const { getByText } = render( + + ); + expect(getByText('This is a test description')).toBeInTheDocument(); + }); + + it('does not render the description if not provided', () => { + const { queryByText } = render( + + ); + expect(queryByText('This is a test description')).not.toBeInTheDocument(); + }); + + it('renders children if provided', () => { + const { getByText } = render( + +
Child Element
+
+ ); + expect(getByText('Child Element')).toBeInTheDocument(); + }); +}); diff --git a/packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.tsx b/packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.tsx index 61344f0448..9dd9afbe5e 100644 --- a/packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.tsx +++ b/packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.tsx @@ -7,9 +7,13 @@ function WidgetPanelTooltip(props: WidgetPanelTooltipProps): ReactElement { const { children, descriptor } = props; const { name, type, description, displayName } = descriptor; + // Convert PascalCase to Title Case + // ex. PartitionedTable -> Partitioned Table + const formattedType = type.replace(/([a-z])([A-Z])/g, '$1 $2'); + return (
- {type} Name + {formattedType} Name
{name}