fix(explore): Ensure missing columns are rendered in column editor (#…

…81351) When switching projects or if the tags didn't load, we shouldn't render nothing.
getsentry · Nov 27, 2024 · 0fa3e2f · 0fa3e2f
1 parent 71ebb64
commit 0fa3e2f
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 18 deletions.
diff --git a/static/app/utils/discover/fields.tsx b/static/app/utils/discover/fields.tsx
@@ -19,6 +19,7 @@ import {
   AggregationKey,
   DISCOVER_FIELDS,
   FieldKey,
+  FieldKind,
   FieldValueType,
   getFieldDefinition,
   MEASUREMENT_FIELDS,
@@ -1641,6 +1642,11 @@ export const COMBINED_DATASET_FILTER_KEY_SECTIONS: FilterKeySection[] = [
 
 export const TYPED_TAG_KEY_RE = /tags\[([^\s]*),([^\s]*)\]/;
 
+export function classifyTagKey(key: string): FieldKind {
+  const result = key.match(TYPED_TAG_KEY_RE);
+  return result?.[2] === 'number' ? FieldKind.MEASUREMENT : FieldKind.TAG;
+}
+
 export function prettifyTagKey(key: string): string {
   const result = key.match(TYPED_TAG_KEY_RE);
   return result?.[1] ?? key;

diff --git a/static/app/views/explore/tables/columnEditorModal.tsx b/static/app/views/explore/tables/columnEditorModal.tsx
@@ -16,6 +16,7 @@ import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {TagCollection} from 'sentry/types/group';
 import {defined} from 'sentry/utils';
+import {classifyTagKey, prettifyTagKey} from 'sentry/utils/discover/fields';
 import {FieldKind} from 'sentry/utils/fields';
 import {TypeBadge} from 'sentry/views/explore/components/typeBadge';
 
@@ -41,6 +42,19 @@ export function ColumnEditorModal({
 }: ColumnEditorModalProps) {
   const tags: SelectOption<string>[] = useMemo(() => {
     const allTags = [
+      ...columns
+        .filter(
+          column =>
+            !stringTags.hasOwnProperty(column) && !numberTags.hasOwnProperty(column)
+        )
+        .map(column => {
+          return {
+            label: prettifyTagKey(column),
+            value: column,
+            textValue: column,
+            trailingItems: <TypeBadge kind={classifyTagKey(column)} />,
+          };
+        }),
       ...Object.values(stringTags).map(tag => {
         return {
           label: tag.name,
@@ -70,7 +84,7 @@ export function ColumnEditorModal({
       return 0;
     });
     return allTags;
-  }, [stringTags, numberTags]);
+  }, [columns, stringTags, numberTags]);
 
   // We keep a temporary state for the columns so that we can apply the changes
   // only when the user clicks on the apply button.

diff --git a/static/app/views/explore/toolbar/toolbarSortBy.tsx b/static/app/views/explore/toolbar/toolbarSortBy.tsx
@@ -7,12 +7,11 @@ import {Tooltip} from 'sentry/components/tooltip';
 import {t} from 'sentry/locale';
 import type {Sort} from 'sentry/utils/discover/fields';
 import {
+  classifyTagKey,
   parseFunction,
   prettifyParsedFunction,
   prettifyTagKey,
-  TYPED_TAG_KEY_RE,
 } from 'sentry/utils/discover/fields';
-import {FieldKind} from 'sentry/utils/fields';
 import {TypeBadge} from 'sentry/views/explore/components/typeBadge';
 import {useSpanTags} from 'sentry/views/explore/contexts/spanTagsContext';
 import {useResultMode} from 'sentry/views/explore/hooks/useResultsMode';
@@ -66,20 +65,11 @@ export function ToolbarSortBy({fields, setSorts, sorts}: ToolbarSortByProps) {
           trailingItems: <TypeBadge func={func} />,
         };
       }
-
-      const result = field.match(TYPED_TAG_KEY_RE);
-      const kind =
-        result?.[2] === 'string'
-          ? FieldKind.TAG
-          : result?.[2] === 'number'
-            ? FieldKind.MEASUREMENT
-            : undefined;
-
       return {
         label: prettifyTagKey(field),
         value: field,
         textValue: field,
-        trailingItems: <TypeBadge kind={kind} />,
+        trailingItems: <TypeBadge kind={classifyTagKey(field)} />,
       };
     });
 

diff --git a/static/app/views/explore/toolbar/toolbarVisualize.tsx b/static/app/views/explore/toolbar/toolbarVisualize.tsx
@@ -69,18 +69,18 @@ export function ToolbarVisualize({}: ToolbarVisualizeProps) {
       });
 
     const options = [
+      ...unknownOptions.map(option => ({
+        label: prettifyTagKey(option),
+        value: option,
+        textValue: option,
+      })),
       ...Object.values(numberTags).map(tag => {
         return {
           label: tag.name,
           value: tag.key,
           textValue: tag.name,
         };
       }),
-      ...unknownOptions.map(option => ({
-        label: prettifyTagKey(option),
-        value: option,
-        textValue: option,
-      })),
     ];
 
     options.sort((a, b) => {