✨ Add fields to project settings

Author: leeandher

static/app/components/events/eventTags/eventTagsTreeRow.tsx

@@ -205,7 +205,7 @@ function EventTagsTreeRowDropdown({
   );
 }
 
-const TreeRow = styled('div')<{hasErrors: boolean}>`
+export const TreeRow = styled('div')<{hasErrors: boolean}>`
   border-radius: ${space(0.5)};
   padding-left: ${space(1)};
   position: relative;
@@ -270,7 +270,7 @@ const TreeValueTrunk = styled('div')`
   grid-column-gap: ${space(0.5)};
 `;
 
-const TreeValue = styled('div')`
+export const TreeValue = styled('div')`
   padding: ${space(0.25)} 0;
   align-self: start;
   font-family: ${p => p.theme.text.familyMono};
@@ -279,7 +279,7 @@ const TreeValue = styled('div')`
   grid-column: span 1;
 `;
 
-const TreeKey = styled(TreeValue)<{hasErrors: boolean}>`
+export const TreeKey = styled(TreeValue)<{hasErrors: boolean}>`
   color: ${p => (p.hasErrors ? 'inherit' : p.theme.gray300)};
 `;
 

static/app/components/events/highlights/highlightsDataSection.tsx

@@ -1,18 +1,104 @@
-import ContextSummary from 'sentry/components/events/contextSummary';
+import styled from '@emotion/styled';
+
+import {getOrderedContextItems} from 'sentry/components/events/contexts';
+import ContextCard from 'sentry/components/events/contexts/contextCard';
+import {EventDataSection} from 'sentry/components/events/eventDataSection';
+import {
+  TreeKey,
+  TreeRow,
+  TreeValue,
+} from 'sentry/components/events/eventTags/eventTagsTreeRow';
 import {useHasNewTagsUI} from 'sentry/components/events/eventTags/util';
+import {t} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
 import type {Event, Group, Project} from 'sentry/types';
+import {useDetailedProject} from 'sentry/utils/useDetailedProject';
+import useOrganization from 'sentry/utils/useOrganization';
 
 interface HighlightsSectionProps {
   event: Event;
   group: Group;
   project: Project;
 }
 
-export default function HighlightsDataSection({event}: HighlightsSectionProps) {
+export default function HighlightsDataSection({
+  event,
+  group,
+  project,
+}: HighlightsSectionProps) {
   const hasNewTagsUI = useHasNewTagsUI();
-  if (!hasNewTagsUI) {
+  const organization = useOrganization();
+  const {isLoading, data} = useDetailedProject({
+    orgSlug: organization.slug,
+    projectSlug: project.slug,
+  });
+
+  if (!hasNewTagsUI || isLoading) {
     return null;
   }
-  // TODO(Leander): When a design is confirmed, remove this usage of ContextSummary
-  return <ContextSummary event={event} />;
+
+  const contextMap = getOrderedContextItems(event).reduce((acc, [alias, ctx]) => {
+    acc[ctx.type] = {value: ctx, alias};
+    return acc;
+  }, {});
+  const contextHighlights = data?.highlightContext ?? [];
+
+  const tagMap = event.tags.reduce((tm, {key, value}) => {
+    tm[key] = value;
+    return tm;
+  }, {});
+  const tagHighlights = data?.highlightTags ?? [];
+
+  return (
+    <EventDataSection
+      title={t('Highlighted Event Data')}
+      data-test-id="highlighted-event-data"
+      type="highlighted-event-data"
+    >
+      <HighlightWrapper>
+        <ContextHighlightSection>
+          {contextHighlights.map((contextType, i) => (
+            <ContextCard
+              key={i}
+              type={contextType}
+              alias={contextMap[contextType]?.alias ?? contextType}
+              value={contextMap[contextType]?.value}
+              group={group}
+              event={event}
+              project={project}
+            />
+          ))}
+        </ContextHighlightSection>
+        <TagHighlightSection>
+          {tagHighlights.map((tag, i) => (
+            <TreeRow hasErrors={false} key={i}>
+              <TreeKey hasErrors={false}>{tag}</TreeKey>
+              <TreeValue>{tagMap[tag]}</TreeValue>
+            </TreeRow>
+          ))}
+        </TagHighlightSection>
+      </HighlightWrapper>
+    </EventDataSection>
+  );
 }
+
+const HighlightWrapper = styled('div')`
+  margin-bottom: ${space(2)};
+  display: flex;
+  gap: ${space(1)};
+  align-items: start;
+  /* TODO(Leander): Account for screen width */
+`;
+
+const ContextHighlightSection = styled('div')`
+  flex: 1;
+`;
+
+const TagHighlightSection = styled('div')`
+  flex: 1;
+  display: grid;
+  grid-template-columns: minmax(auto, 175px) 1fr;
+  :nth-child(odd) {
+    background-color: ${p => p.theme.backgroundSecondary};
+  }
+`;

static/app/data/forms/projectGeneralSettings.tsx

@@ -111,20 +111,38 @@ export const fields: Record<string, Field> = {
   },
   highlightContext: {
     name: 'highlightContext',
-    type: 'string',
+    type: 'textarea',
     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.',
+      'Structured context keys to promote for quick debugging. Click [link:here] for documentation',
       {
         link: <ExternalLink openInNewTab href={CONTEXT_DOCS_LINK} />,
       }
     ),
-    getValue: val => extractMultilineFields(val),
-    setValue: val => convertMultilineFieldValue(val),
+    getValue: (val: string) => (val === '' ? {} : JSON.parse(val)),
+    setValue: (val: string) => {
+      const schema = JSON.stringify(val, null, 2);
+      if (schema === '{}') {
+        return '';
+      }
+      return schema;
+    },
+    validate: ({id, form}) => {
+      if (!form.schema) {
+        return [];
+      }
+
+      try {
+        JSON.parse(form.schema);
+      } catch (e) {
+        return [[id, 'Invalid JSON']];
+      }
+      return [];
+    },
   },
 
   subjectPrefix: {

static/app/views/settings/projectGeneralSettings/index.tsx

@@ -302,6 +302,12 @@ class ProjectGeneralSettings extends DeprecatedAsyncView<Props, State> {
       },
     };
 
+    const detailsFields = [fields.name, fields.platform];
+    if (organization.features.includes('event-tags-tree-ui')) {
+      detailsFields.push(fields.highlightTags);
+      detailsFields.push(fields.highlightContext);
+    }
+
     return (
       <div>
         <SettingsPageHeader title={t('Project Settings')} />
@@ -311,7 +317,7 @@ class ProjectGeneralSettings extends DeprecatedAsyncView<Props, State> {
           <JsonForm
             {...jsonFormProps}
             title={t('Project Details')}
-            fields={[fields.name, fields.platform]}
+            fields={detailsFields}
           />
 
           <JsonForm