fix(widget-builder): Change wording for adding columns to table (#85004)

Changes the verbiage from `Visualize` to `Columns` specifically for tables. Makes it clearer what the field is for and follows the concepts of representing columns in tables.
getsentry · Feb 11, 2025 · 89a7ec7 · 89a7ec7
1 parent c51908b
commit 89a7ec7
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git a/static/app/views/dashboards/widgetBuilder/components/visualize/index.spec.tsx b/static/app/views/dashboards/widgetBuilder/components/visualize/index.spec.tsx
@@ -632,9 +632,9 @@ describe('Visualize', () => {
     expect(screen.getByLabelText('Column Selection')).toHaveTextContent('user');
 
     // Add 3 fields
-    await userEvent.click(screen.getByRole('button', {name: 'Add Field'}));
-    await userEvent.click(screen.getByRole('button', {name: 'Add Field'}));
-    await userEvent.click(screen.getByRole('button', {name: 'Add Field'}));
+    await userEvent.click(screen.getByRole('button', {name: 'Add Column'}));
+    await userEvent.click(screen.getByRole('button', {name: 'Add Column'}));
+    await userEvent.click(screen.getByRole('button', {name: 'Add Column'}));
 
     // count() is the default aggregate when adding a field
     expect(screen.getAllByText('count')).toHaveLength(3);

diff --git a/static/app/views/dashboards/widgetBuilder/components/visualize/index.tsx b/static/app/views/dashboards/widgetBuilder/components/visualize/index.tsx
@@ -325,10 +325,14 @@ function Visualize({error, setError}: VisualizeProps) {
   return (
     <Fragment>
       <SectionHeader
-        title={t('Visualize')}
-        tooltipText={t(
-          'Primary metric that appears in your chart. You can also overlay a series onto an existing chart or add an equation.'
-        )}
+        title={isChartWidget ? t('Visualize') : t('Columns')}
+        tooltipText={
+          isChartWidget
+            ? t(
+                'Primary metric that appears in your chart. You can also overlay a series onto an existing chart or add an equation.'
+              )
+            : t('Columns to display in your table. You can also add equations.')
+        }
       />
       <StyledFieldGroup
         error={isChartWidget ? aggregateErrors : fieldErrors}
@@ -1009,7 +1013,13 @@ function Visualize({error, setError}: VisualizeProps) {
       <AddButtons>
         <AddButton
           priority="link"
-          aria-label={isChartWidget ? t('Add Series') : t('Add Field')}
+          aria-label={
+            isChartWidget
+              ? t('Add Series')
+              : isBigNumberWidget
+                ? t('Add Field')
+                : t('Add Column')
+          }
           onClick={() => {
             dispatch({
               type: updateAction,
@@ -1027,7 +1037,11 @@ function Visualize({error, setError}: VisualizeProps) {
             });
           }}
         >
-          {isChartWidget ? t('+ Add Series') : t('+ Add Field')}
+          {isChartWidget
+            ? t('+ Add Series')
+            : isBigNumberWidget
+              ? t('+ Add Field')
+              : t('+ Add Column')}
         </AddButton>
         {datasetConfig.enableEquations && (
           <AddButton