wip

getsentry · Dec 19, 2024 · d982630 · d982630
1 parent 6592a52
commit d982630
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 17 deletions.
diff --git a/static/app/views/dashboards/widgetBuilder/components/visualize.spec.tsx b/static/app/views/dashboards/widgetBuilder/components/visualize.spec.tsx
@@ -527,6 +527,31 @@ describe('Visualize', () => {
     ).toBeDisabled();
   });
 
+  it('does not show the legend alias input for chart widgets', async () => {
+    render(
+      <WidgetBuilderProvider>
+        <Visualize />
+      </WidgetBuilderProvider>,
+      {
+        organization,
+        router: RouterFixture({
+          location: LocationFixture({
+            query: {
+              dataset: WidgetType.TRANSACTIONS,
+              displayType: DisplayType.LINE,
+              yAxis: ['p90(transaction.duration)'],
+            },
+          }),
+        }),
+      }
+    );
+
+    expect(
+      await screen.findByRole('button', {name: 'Column Selection'})
+    ).toHaveTextContent('p90(transaction.duration)');
+    expect(screen.queryByLabelText('Legend Alias')).not.toBeInTheDocument();
+  });
+
   describe('spans', () => {
     beforeEach(() => {
       jest.mocked(useSpanTags).mockImplementation((type?: 'string' | 'number') => {

diff --git a/static/app/views/dashboards/widgetBuilder/components/visualize.tsx b/static/app/views/dashboards/widgetBuilder/components/visualize.tsx
@@ -425,13 +425,23 @@ function Visualize() {
                   </Fragment>
                 )}
               </FieldBar>
-              <FieldExtras>
-                <LegendAliasInput
-                  type="text"
-                  name="name"
-                  placeholder={t('Add Alias')}
-                  onChange={() => {}}
-                />
+              <FieldExtras isChartWidget={isChartWidget}>
+                {!isChartWidget && (
+                  <LegendAliasInput
+                    type="text"
+                    name="name"
+                    placeholder={t('Add Alias')}
+                    value={field.alias}
+                    onChange={e => {
+                      const newFields = cloneDeep(fields);
+                      newFields[index].alias = e.target.value;
+                      dispatch({
+                        type: updateAction,
+                        payload: newFields,
+                      });
+                    }}
+                  />
+                )}
                 <StyledDeleteButton
                   borderless
                   icon={<IconDelete />}
@@ -628,11 +638,11 @@ const FieldRow = styled('div')`
 
 const StyledDeleteButton = styled(Button)``;
 
-const FieldExtras = styled('div')`
+const FieldExtras = styled('div')<{isChartWidget: boolean}>`
   display: flex;
   flex-direction: row;
   gap: ${space(1)};
-  flex: 1;
+  flex: ${p => (p.isChartWidget ? '0' : '1')};
 `;
 
 const AddButton = styled(Button)`

diff --git a/static/app/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState.tsx b/static/app/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState.tsx
@@ -237,15 +237,30 @@ function deserializeDataset(value: string): WidgetType {
  * them into a list of fields and functions
  */
 function deserializeFields(fields: string[]): Column[] {
-  return fields.map(field => explodeField({field}));
+  return fields.map(field => {
+    try {
+      const {fieldString, alias} = JSON.parse(field);
+      return explodeField({field: fieldString, alias});
+    } catch (error) {
+      return explodeField({field, alias: undefined});
+    }
+  });
 }
 
 /**
  * Takes fields in the field and function format and coverts
  * them into a list of strings compatible with query params
  */
-function serializeFields(fields: Column[]): string[] {
-  return fields.map(generateFieldAsString);
+export function serializeFields(fields: Column[]): string[] {
+  return fields.map(field => {
+    if (field.alias) {
+      return JSON.stringify({
+        fieldString: generateFieldAsString(field),
+        alias: field.alias,
+      });
+    }
+    return generateFieldAsString(field);
+  });
 }
 
 function serializeSorts(sorts: Sort[]): string[] {

diff --git a/static/app/views/dashboards/widgetBuilder/utils/convertBuilderStateToWidget.spec.tsx b/static/app/views/dashboards/widgetBuilder/utils/convertBuilderStateToWidget.spec.tsx
@@ -36,7 +36,7 @@ describe('convertBuilderStateToWidget', function () {
       queries: [
         {
           fields: ['geo.country', 'count()', 'count_unique(user)'],
-          fieldAliases: [],
+          fieldAliases: ['', '', ''],
           aggregates: ['count()'],
           columns: ['geo.country'],
           conditions: '',

diff --git a/static/app/views/dashboards/widgetBuilder/utils/convertBuilderStateToWidget.ts b/static/app/views/dashboards/widgetBuilder/utils/convertBuilderStateToWidget.ts
@@ -18,6 +18,7 @@ export function convertBuilderStateToWidget(state: WidgetBuilderState): Widget {
   const queries = defined(state.query) && state.query.length > 0 ? state.query : [''];
 
   const fields = state.fields?.map(generateFieldAsString);
+  const fieldAliases = state.fields?.map(field => field.alias ?? '');
   const aggregates =
     (state.yAxis?.length ?? 0) > 0
       ? state.yAxis?.map(generateFieldAsString)
@@ -47,6 +48,7 @@ export function convertBuilderStateToWidget(state: WidgetBuilderState): Widget {
       columns: columns ?? [],
       conditions: query,
       orderby: sort,
+      fieldAliases: fieldAliases ?? [],
     };
   });
 

diff --git a/static/app/views/dashboards/widgetBuilder/utils/convertWidgetToBuilderStateParams.ts b/static/app/views/dashboards/widgetBuilder/utils/convertWidgetToBuilderStateParams.ts
@@ -1,5 +1,24 @@
-import {DisplayType, type Widget, WidgetType} from 'sentry/views/dashboards/types';
-import type {WidgetBuilderStateQueryParams} from 'sentry/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState';
+import {explodeField} from 'sentry/utils/discover/fields';
+import {
+  DisplayType,
+  type Widget,
+  type WidgetQuery,
+  WidgetType,
+} from 'sentry/views/dashboards/types';
+import {
+  serializeFields,
+  type WidgetBuilderStateQueryParams,
+} from 'sentry/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState';
+
+function stringifyFields(
+  query: WidgetQuery,
+  fieldKey: 'fields' | 'columns' | 'aggregates'
+) {
+  const fields = query[fieldKey]?.map((field, index) =>
+    explodeField({field, alias: query.fieldAliases?.[index]})
+  );
+  return fields ? serializeFields(fields) : [];
+}
 
 /**
  * Converts a widget to a set of query params that can be used to
@@ -17,10 +36,12 @@ export function convertWidgetToBuilderStateParams(
     widget.displayType === DisplayType.TABLE ||
     widget.displayType === DisplayType.BIG_NUMBER
   ) {
-    field = widget.queries.flatMap(q => q.fields ?? []);
+    field = widget.queries.flatMap(widgetQuery => stringifyFields(widgetQuery, 'fields'));
     yAxis = [];
   } else {
-    field = widget.queries.flatMap(q => q.columns);
+    field = widget.queries.flatMap(widgetQuery =>
+      stringifyFields(widgetQuery, 'columns')
+    );
   }
 
   return {