fix: add gap between type and name in widget panel tooltip (#2258)

resolves #2254


![image](https://github.com/user-attachments/assets/b937dfc2-943e-4911-ad54-2eb29cd6b824)

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;

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(
+      <WidgetPanelTooltip descriptor={descriptor} />
+    );
+    expect(getByText('Partitioned Table Name')).toBeInTheDocument();
+  });
+
+  it('renders the name and copy button', () => {
+    const { getByText, getByRole } = render(
+      <WidgetPanelTooltip descriptor={descriptor} />
+    );
+    expect(getByText('TestName')).toBeInTheDocument();
+    expect(getByRole('button', { name: /copy name/i })).toBeInTheDocument();
+  });
+
+  it('renders the display name if different from name', () => {
+    const { getByText } = render(
+      <WidgetPanelTooltip descriptor={descriptor} />
+    );
+    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(
+      <WidgetPanelTooltip
+        descriptor={{ ...descriptor, displayName: 'TestName' }}
+      />
+    );
+    expect(queryByText('Display Name')).not.toBeInTheDocument();
+  });
+
+  it('renders the description if provided', () => {
+    const { getByText } = render(
+      <WidgetPanelTooltip descriptor={descriptor} />
+    );
+    expect(getByText('This is a test description')).toBeInTheDocument();
+  });
+
+  it('does not render the description if not provided', () => {
+    const { queryByText } = render(
+      <WidgetPanelTooltip descriptor={{ ...descriptor, description: '' }} />
+    );
+    expect(queryByText('This is a test description')).not.toBeInTheDocument();
+  });
+
+  it('renders children if provided', () => {
+    const { getByText } = render(
+      <WidgetPanelTooltip descriptor={descriptor}>
+        <div>Child Element</div>
+      </WidgetPanelTooltip>
+    );
+    expect(getByText('Child Element')).toBeInTheDocument();
+  });
+});

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 (
     <div className="tab-tooltip-grid-container">
-      <span className="tab-tooltip-title">{type} Name</span>
+      <span className="tab-tooltip-title">{formattedType} Name</span>
       <div className="tab-tooltip-name-wrapper">
         <span className="tab-tooltip-name">{name}</span>
         <CopyButton