✨ Implement settings page change for modifying highlights

Author: leeandher

static/app/components/events/contexts/index.tsx

@@ -16,6 +16,38 @@ type Props = {
   group?: Group;
 };
 
+type ContextValueType = any;
+
+export function getOrderedContextItems(event): [string, ContextValueType][] {
+  const {user, contexts} = event;
+
+  const {feedback, response, ...otherContexts} = contexts ?? {};
+  const orderedContext: [string, ContextValueType][] = [
+    ['response', response],
+    ['feedback', feedback],
+    ['user', user],
+    ...Object.entries(otherContexts),
+  ];
+  // For these context keys, use 'key' as 'type' rather than 'value.type'
+  const overrideTypes = new Set(['response', 'feedback', 'user']);
+  const items = orderedContext
+    .filter(([_k, v]) => {
+      const contextKeys = Object.keys(v ?? {});
+      const isInvalid =
+        // Empty context
+        contextKeys.length === 0 ||
+        // Empty aside from 'type' key
+        (contextKeys.length === 1 && contextKeys[0] === 'type');
+      return !isInvalid;
+    })
+    .map<[string, ContextValueType]>(([alias, ctx]) => [
+      alias,
+      {...ctx, type: overrideTypes.has(ctx.type) ? ctx : ctx?.type ?? alias},
+    ]);
+
+  return items;
+}
+
 export function EventContexts({event, group}: Props) {
   const hasNewTagsUI = useHasNewTagsUI();
   const {projects} = useProjects();
@@ -39,35 +71,17 @@ export function EventContexts({event, group}: Props) {
   }, [usingOtel, sdk]);
 
   if (hasNewTagsUI) {
-    const orderedContext: [string, any][] = [
-      ['response', response],
-      ['feedback', feedback],
-      ['user', user],
-      ...Object.entries(otherContexts),
-    ];
-    // For these context keys, use 'key' as 'type' rather than 'value.type'
-    const overrideTypes = new Set(['response', 'feedback', 'user']);
-    const cards = orderedContext
-      .filter(([_k, v]) => {
-        const contextKeys = Object.keys(v ?? {});
-        const isInvalid =
-          // Empty context
-          contextKeys.length === 0 ||
-          // Empty aside from 'type' key
-          (contextKeys.length === 1 && contextKeys[0] === 'type');
-        return !isInvalid;
-      })
-      .map(([k, v]) => (
-        <ContextCard
-          key={k}
-          type={overrideTypes.has(k) ? k : v?.type ?? ''}
-          alias={k}
-          value={v}
-          event={event}
-          group={group}
-          project={project}
-        />
-      ));
+    const cards = getOrderedContextItems(event).map(([alias, contextValue]) => (
+      <ContextCard
+        key={alias}
+        type={contextValue.type}
+        alias={alias}
+        value={contextValue}
+        event={event}
+        group={group}
+        project={project}
+      />
+    ));
 
     return <ContextDataSection cards={cards} />;
   }

static/app/data/forms/projectGeneralSettings.tsx

@@ -2,7 +2,10 @@ import {createFilter} from 'react-select';
 import styled from '@emotion/styled';
 import {PlatformIcon} from 'platformicons';
 
+import {CONTEXT_DOCS_LINK} from 'sentry/components/events/contextSummary/utils';
+import {TAGS_DOCS_LINK} from 'sentry/components/events/eventTags/util';
 import type {Field} from 'sentry/components/forms/types';
+import ExternalLink from 'sentry/components/links/externalLink';
 import platforms from 'sentry/data/platforms';
 import {t, tct, tn} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -89,6 +92,40 @@ export const fields: Record<string, Field> = {
       },
     }),
   },
+  highlightTags: {
+    name: 'highlightTags',
+    type: 'string',
+    multiline: true,
+    autosize: true,
+    rows: 1,
+    placeholder: t('handled, environment, release, my-tag'),
+    label: t('Highlighted Tags'),
+    help: tct(
+      '[link:Tags] to promote to the top of each issue page for quick debugging. Separate entries with a newline.',
+      {
+        link: <ExternalLink openInNewTab href={TAGS_DOCS_LINK} />,
+      }
+    ),
+    getValue: val => extractMultilineFields(val),
+    setValue: val => convertMultilineFieldValue(val),
+  },
+  highlightContext: {
+    name: 'highlightContext',
+    type: 'string',
+    multiline: true,
+    autosize: true,
+    rows: 1,
+    placeholder: t('browser, runtime, user, my-context'),
+    label: t('Highlighted Context'),
+    help: tct(
+      '[link:Structured context] to promote to the top of each issue page for quick debugging. Separate entries with a newline.',
+      {
+        link: <ExternalLink openInNewTab href={CONTEXT_DOCS_LINK} />,
+      }
+    ),
+    getValue: val => extractMultilineFields(val),
+    setValue: val => convertMultilineFieldValue(val),
+  },
 
   subjectPrefix: {
     name: 'subjectPrefix',

static/app/types/project.tsx

@@ -59,6 +59,8 @@ export type Project = {
   builtinSymbolSources?: string[];
   defaultEnvironment?: string;
   hasUserReports?: boolean;
+  highlightContext?: string[];
+  highlightTags?: string[];
   latestDeploys?: Record<string, Pick<Deploy, 'dateFinished' | 'version'>> | null;
   latestRelease?: {version: string} | null;
   options?: Record<string, boolean | string>;

static/app/utils/useDetailedProject.tsx

@@ -0,0 +1,26 @@
+import type {Project} from 'sentry/types';
+import {
+  type ApiQueryKey,
+  useApiQuery,
+  type UseApiQueryOptions,
+} from 'sentry/utils/queryClient';
+
+interface DetailedProjectParameters {
+  orgSlug: string;
+  projectSlug: string;
+}
+
+export const makeDetailedProjectQueryKey = ({
+  orgSlug,
+  projectSlug,
+}: DetailedProjectParameters): ApiQueryKey => [`/projects/${orgSlug}/${projectSlug}/`];
+
+export function useDetailedProject(
+  params: DetailedProjectParameters,
+  options: Partial<UseApiQueryOptions<Project>> = {}
+) {
+  return useApiQuery<Project>(makeDetailedProjectQueryKey(params), {
+    staleTime: Infinity,
+    ...options,
+  });
+}