From 4e8ad58c0ae5c162e8aca360cc009f9deafe3a29 Mon Sep 17 00:00:00 2001
From: Don <donmckenzie@deephaven.io>
Date: Wed, 16 Oct 2024 12:01:09 -0400
Subject: [PATCH] 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)
---
 .../src/panels/WidgetPanelTooltip.scss        |  1 +
 .../src/panels/WidgetPanelTooltip.test.tsx    | 67 +++++++++++++++++++
 .../src/panels/WidgetPanelTooltip.tsx         |  6 +-
 3 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.test.tsx

diff --git a/packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.scss b/packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.scss
index cfbd454bf..7ffa51293 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 000000000..8cdcbda04
--- /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(
+      <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();
+  });
+});
diff --git a/packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.tsx b/packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.tsx
index 61344f044..9dd9afbe5 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 (
     <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