chore(contexts): Simplify state context

static/app/components/events/contexts/knownContext/gpu.spec.tsx

@@ -8,7 +8,7 @@ import {
   type GPUContext,
 } from 'sentry/components/events/contexts/knownContext/gpu';
 
-export const MOCK_GPU_CONTEXT: GPUContext = {
+const MOCK_GPU_CONTEXT: GPUContext = {
   name: '',
   version: 'Metal',
   id: 2400,

static/app/components/events/contexts/knownContext/gpu.tsx

@@ -22,7 +22,7 @@ enum GPUContextKeys {
   SUPPORTS_GEOMETRY_SHADERS = 'supports_geometry_shaders',
 }
 
-export type GPUContext = {
+export interface GPUContext {
   // Any custom keys users may set
   [key: string]: any;
   [GPUContextKeys.ID]: number;
@@ -40,7 +40,7 @@ export type GPUContext = {
   [GPUContextKeys.SUPPORTS_RAY_TRACING]?: boolean;
   [GPUContextKeys.SUPPORTS_COMPUTE_SHADERS]?: boolean;
   [GPUContextKeys.SUPPORTS_GEOMETRY_SHADERS]?: boolean;
-};
+}
 
 const MEGABYTE_IN_BYTES = 1048576;
 

static/app/components/events/contexts/knownContext/state.spec.tsx

@@ -0,0 +1,76 @@
+import {EventFixture} from 'sentry-fixture/event';
+
+import {render, screen} from 'sentry-test/reactTestingLibrary';
+
+import ContextCard from 'sentry/components/events/contexts/contextCard';
+import {
+  getStateContextData,
+  type StateContext,
+} from 'sentry/components/events/contexts/knownContext/state';
+
+const MOCK_STATE_CONTEXT: StateContext = {
+  state: {
+    type: 'redux',
+    value: {
+      a: 'abc',
+    },
+  },
+  // Extra data is still valid and preserved
+  extra_data: 'something',
+  unknown_key: 123,
+};
+
+const MOCK_REDACTION = {
+  extra_data: {
+    '': {
+      rem: [['organization:0', 's', 0, 0]],
+      len: 5,
+    },
+  },
+};
+
+describe('GPUContext', function () {
+  it('returns values and according to the parameters', function () {
+    expect(getStateContextData({data: MOCK_STATE_CONTEXT})).toEqual([
+      {
+        key: 'state',
+        subject: 'State (Redux)',
+        value: {a: 'abc'},
+        meta: undefined,
+      },
+      {
+        key: 'extra_data',
+        subject: 'extra_data',
+        value: 'something',
+        meta: undefined,
+      },
+      {
+        key: 'unknown_key',
+        subject: 'unknown_key',
+        value: 123,
+        meta: undefined,
+      },
+    ]);
+  });
+
+  it('renders with meta annotations correctly', function () {
+    const event = EventFixture({
+      _meta: {contexts: {state: MOCK_REDACTION}},
+    });
+
+    render(
+      <ContextCard
+        event={event}
+        type={'default'}
+        alias={'state'}
+        value={{...MOCK_STATE_CONTEXT, extra_data: ''}}
+      />
+    );
+
+    expect(screen.getByText('Application State')).toBeInTheDocument();
+    expect(screen.getByText('State (Redux)')).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: '1 item'})).toBeInTheDocument();
+    expect(screen.getByText('extra_data')).toBeInTheDocument();
+    expect(screen.getByText(/redacted/)).toBeInTheDocument();
+  });
+});

static/app/components/events/contexts/knownContext/state.tsx

@@ -0,0 +1,43 @@
+import upperFirst from 'lodash/upperFirst';
+
+import {getContextKeys} from 'sentry/components/events/contexts/utils';
+import {t} from 'sentry/locale';
+import type {KeyValueListData} from 'sentry/types/group';
+
+enum StateContextKeys {
+  STATE = 'state',
+}
+
+export interface StateContext {
+  // Any custom keys users may set
+  [key: string]: any;
+  [StateContextKeys.STATE]: Record<string, any>;
+}
+
+export function getStateContextData({
+  data,
+  meta,
+}: {
+  data: StateContext;
+  meta?: Record<keyof StateContext, any>;
+}): KeyValueListData {
+  return getContextKeys({data}).map(ctxKey => {
+    switch (ctxKey) {
+      case StateContextKeys.STATE:
+        return {
+          key: ctxKey,
+          subject: `${t('State')}${data.state.type ? ` (${upperFirst(data.state.type)})` : ''}`,
+          // TODO(TS): Objects cannot be rendered to dom
+          value: data.state.value as string,
+          meta: meta?.state?.value?.[''],
+        };
+      default:
+        return {
+          key: ctxKey,
+          subject: ctxKey,
+          value: data[ctxKey],
+          meta: meta?.[ctxKey]?.[''],
+        };
+    }
+  });
+}

static/app/components/events/contexts/knownContext/trace.spec.tsx

@@ -5,10 +5,13 @@ import {OrganizationFixture} from 'sentry-fixture/organization';
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
 import ContextCard from 'sentry/components/events/contexts/contextCard';
-import {getTraceContextData} from 'sentry/components/events/contexts/knownContext/trace';
+import {
+  getTraceContextData,
+  type TraceContext,
+} from 'sentry/components/events/contexts/knownContext/trace';
 
 const TRACE_ID = '61d2d7c5acf448ffa8e2f8f973e2cd36';
-const MOCK_TRACE_CONTEXT = {
+const MOCK_TRACE_CONTEXT: TraceContext = {
   type: 'default',
   trace_id: TRACE_ID,
   span_id: '0415201309082013',

static/app/components/events/contexts/knownContext/trace.tsx

@@ -22,7 +22,7 @@ enum TraceContextKeys {
   DATA = 'data',
 }
 
-type TraceContext = {
+export interface TraceContext {
   // Any custom keys users may set
   [key: string]: any;
   [TraceContextKeys.TRACE_ID]?: string;
@@ -35,7 +35,7 @@ type TraceContext = {
   [TraceContextKeys.DYNAMIC_SAMPLING_CONTEXT]?: Record<string, string>;
   [TraceContextKeys.ORIGIN]?: string;
   [TraceContextKeys.DATA]?: Record<string, any>;
-};
+}
 
 export function getTraceContextData({
   data,