ref(runtime-context): Replace getMeta (proxy) with _meta object - (#37006)

static/app/components/events/contexts/runtime/getRuntimeKnownData.tsx

@@ -1,33 +1,41 @@
-import {getMeta} from 'sentry/components/events/meta/metaProxy';
-import {KeyValueListData} from 'sentry/types';
+import {Event, KeyValueListData} from 'sentry/types';
 import {defined} from 'sentry/utils';
 
-import getRuntimeKnownDataDetails from './getRuntimeKnownDataDetails';
-import {RuntimeData, RuntimeKnownDataType} from './types';
+import {getRuntimeKnownDataDetails} from './getRuntimeKnownDataDetails';
+import {runtimeKnownDataValues} from './index';
+import {RuntimeData} from './types';
 
-function getRuntimeKnownData(
-  data: RuntimeData,
-  runTimerKnownDataValues: Array<RuntimeKnownDataType>
-): KeyValueListData {
+type Props = {
+  data: RuntimeData;
+  meta: NonNullable<Event['_meta']>['runtime'];
+};
+
+export function getRuntimeKnownData({data, meta}: Props): KeyValueListData {
   const knownData: KeyValueListData = [];
 
-  const dataKeys = runTimerKnownDataValues.filter(runTimerKnownDataValue =>
-    defined(data[runTimerKnownDataValue])
-  );
+  const dataKeys = runtimeKnownDataValues.filter(runTimerKnownDataValue => {
+    if (!defined(data[runTimerKnownDataValue])) {
+      if (meta[runTimerKnownDataValue]) {
+        return true;
+      }
+      return false;
+    }
+    return true;
+  });
+
+  for (const type of dataKeys) {
+    const knownDataDetails = getRuntimeKnownDataDetails({data, type});
 
-  for (const key of dataKeys) {
-    const knownDataDetails = getRuntimeKnownDataDetails(
-      data,
-      key as RuntimeKnownDataType
-    );
+    if (!knownDataDetails) {
+      continue;
+    }
 
     knownData.push({
-      key,
+      key: type,
       ...knownDataDetails,
-      meta: getMeta(data, key),
+      meta: meta[type]?.[''],
     });
   }
+
   return knownData;
 }
-
-export default getRuntimeKnownData;

static/app/components/events/contexts/runtime/getRuntimeKnownDataDetails.tsx

@@ -7,10 +7,12 @@ type Output = {
   value?: React.ReactNode;
 };
 
-function getRuntimeKnownDataDetails(
-  data: RuntimeData,
-  type: RuntimeKnownDataType
-): Output {
+type Props = {
+  data: RuntimeData;
+  type: RuntimeKnownDataType;
+};
+
+export function getRuntimeKnownDataDetails({type, data}: Props): Output | undefined {
   switch (type) {
     case RuntimeKnownDataType.NAME:
       return {
@@ -23,11 +25,6 @@ function getRuntimeKnownDataDetails(
         value: `${data.version}${data.build ? `(${data.build})` : ''}`,
       };
     default:
-      return {
-        subject: type,
-        value: data[type],
-      };
+      return undefined;
   }
 }
-
-export default getRuntimeKnownDataDetails;

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

@@ -1,32 +1,37 @@
 import {Fragment} from 'react';
 
 import ContextBlock from 'sentry/components/events/contexts/contextBlock';
+import {Event} from 'sentry/types/event';
 
 import {getUnknownData} from '../getUnknownData';
 
-import getRuntimeKnownData from './getRuntimeKnownData';
+import {getRuntimeKnownData} from './getRuntimeKnownData';
 import {RuntimeData, RuntimeIgnoredDataType, RuntimeKnownDataType} from './types';
 
 type Props = {
   data: RuntimeData;
+  event: Event;
 };
 
-const runtimeKnownDataValues = [RuntimeKnownDataType.NAME, RuntimeKnownDataType.VERSION];
+export const runtimeKnownDataValues = [
+  RuntimeKnownDataType.NAME,
+  RuntimeKnownDataType.VERSION,
+];
 
 const runtimeIgnoredDataValues = [RuntimeIgnoredDataType.BUILD];
 
-function Runtime({data}: Props) {
+export function RuntimeEventContext({data, event}: Props) {
+  const meta = event._meta?.contexts?.runtime ?? {};
   return (
     <Fragment>
-      <ContextBlock data={getRuntimeKnownData(data, runtimeKnownDataValues)} />
+      <ContextBlock data={getRuntimeKnownData({data, meta})} />
       <ContextBlock
         data={getUnknownData({
           allData: data,
           knownKeys: [...runtimeKnownDataValues, ...runtimeIgnoredDataValues],
+          meta,
         })}
       />
     </Fragment>
   );
 }
-
-export default Runtime;

static/app/components/events/contexts/runtime/types.tsx

@@ -8,8 +8,8 @@ export enum RuntimeIgnoredDataType {
 }
 
 export type RuntimeData = {
-  build: string;
   name: string;
   type: string;
+  build?: string;
   version?: string;
 };

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

@@ -14,7 +14,7 @@ const CONTEXT_TYPES = {
   device: require('sentry/components/events/contexts/device').DeviceEventContext,
   os: require('sentry/components/events/contexts/operatingSystem/operatingSystem')
     .default,
-  runtime: require('sentry/components/events/contexts/runtime/runtime').default,
+  runtime: require('sentry/components/events/contexts/runtime').RuntimeEventContext,
   browser: require('sentry/components/events/contexts/browser/browser').default,
   user: require('sentry/components/events/contexts/user').UserEventContext,
   gpu: require('sentry/components/events/contexts/gpu/gpu').default,

static/app/views/settings/components/dataScrubbing/modals/form/eventIdField.tsx

@@ -43,13 +43,13 @@ class EventIdField extends Component<Props, State> {
 
     switch (status) {
       case EventIdStatus.INVALID:
-        return t('This event ID is invalid.');
+        return t('This event ID is invalid');
       case EventIdStatus.ERROR:
         return t(
-          'An error occurred while fetching the suggestions based on this event ID.'
+          'An error occurred while fetching the suggestions based on this event ID'
         );
       case EventIdStatus.NOT_FOUND:
-        return t('The chosen event ID was not found in projects you have access to.');
+        return t('The chosen event ID was not found in projects you have access to');
       default:
         return undefined;
     }

static/app/views/settings/components/dataScrubbing/modals/form/sourceField.tsx

@@ -273,6 +273,11 @@ class SourceField extends Component<Props, State> {
 
     if (lastFieldValue?.type === 'string' && !lastFieldValue?.value) {
       fieldValues[fieldValues.length - 1] = suggestion;
+      return fieldValues;
+    }
+
+    if (suggestion.type === 'value' && lastFieldValue?.value !== suggestion.value) {
+      return [suggestion];
     }
 
     return fieldValues;
@@ -323,7 +328,7 @@ class SourceField extends Component<Props, State> {
     });
   };
 
-  handleClickSuggestionItem = (suggestion: SourceSuggestion) => () => {
+  handleClickSuggestionItem = (suggestion: SourceSuggestion) => {
     const fieldValues = this.getNewFieldValues(suggestion);
     this.setState(
       {
@@ -348,7 +353,7 @@ class SourceField extends Component<Props, State> {
     }
 
     if (keyCode === 13) {
-      this.handleClickSuggestionItem(suggestions[activeSuggestion])();
+      this.handleClickSuggestionItem(suggestions[activeSuggestion]);
       return;
     }
 
@@ -413,7 +418,10 @@ class SourceField extends Component<Props, State> {
               {suggestions.slice(0, 50).map((suggestion, index) => (
                 <Suggestion
                   key={suggestion.value}
-                  onClick={this.handleClickSuggestionItem(suggestion)}
+                  onClick={event => {
+                    event.preventDefault();
+                    this.handleClickSuggestionItem(suggestion);
+                  }}
                   active={index === activeSuggestion}
                   tabIndex={-1}
                 >
@@ -492,6 +500,7 @@ const SuggestionDescription = styled('div')`
   display: flex;
   overflow: hidden;
   color: ${p => p.theme.gray300};
+  line-height: 1.2;
 `;
 
 const SuggestionsOverlay = styled('div')`

static/app/views/settings/components/dataScrubbing/rules.tsx

@@ -2,6 +2,7 @@ import {forwardRef} from 'react';
 import styled from '@emotion/styled';
 
 import Button from 'sentry/components/button';
+import ConfirmDelete from 'sentry/components/confirmDelete';
 import TextOverflow from 'sentry/components/textOverflow';
 import {IconDelete, IconEdit} from 'sentry/icons';
 import {t} from 'sentry/locale';
@@ -45,9 +46,10 @@ const Rules = forwardRef(function RulesList(
     <List ref={ref} isDisabled={disabled} data-test-id="advanced-data-scrubbing-rules">
       {rules.map(rule => {
         const {id} = rule;
+        const ruleDescription = getListItemDescription(rule);
         return (
           <ListItem key={id}>
-            <TextOverflow>{getListItemDescription(rule)}</TextOverflow>
+            <TextOverflow>{ruleDescription}</TextOverflow>
             {onEditRule && (
               <Button
                 aria-label={t('Edit Rule')}
@@ -55,16 +57,32 @@ const Rules = forwardRef(function RulesList(
                 onClick={onEditRule(id)}
                 icon={<IconEdit />}
                 disabled={disabled}
+                title={
+                  disabled ? t('You do not have permission to edit rules') : undefined
+                }
               />
             )}
             {onDeleteRule && (
-              <Button
-                aria-label={t('Delete Rule')}
-                size="sm"
-                onClick={onDeleteRule(id)}
-                icon={<IconDelete />}
+              <ConfirmDelete
+                message={t('Are you sure you wish to delete this rule?')}
+                priority="danger"
+                onConfirm={() => {
+                  onDeleteRule(id)();
+                }}
+                confirmInput={ruleDescription}
                 disabled={disabled}
-              />
+                stopPropagation
+              >
+                <Button
+                  aria-label={t('Delete Rule')}
+                  size="sm"
+                  icon={<IconDelete />}
+                  disabled={disabled}
+                  title={
+                    disabled ? t('You do not have permission to delete rules') : undefined
+                  }
+                />
+              </ConfirmDelete>
             )}
           </ListItem>
         );

tests/js/spec/components/events/contexts/runtime/getRuntimeKnownData.spec.tsx

@@ -0,0 +1,22 @@
+import {getRuntimeKnownData} from 'sentry/components/events/contexts/runtime/getRuntimeKnownData';
+
+import {runtimeMetaMockData, runtimeMockData} from './index.spec';
+
+describe('getRuntimeKnownData', function () {
+  it('filters data and transforms into the right way', function () {
+    const runtimeKnownData = getRuntimeKnownData({
+      data: runtimeMockData,
+      meta: runtimeMetaMockData,
+    });
+
+    expect(runtimeKnownData).toEqual([
+      {key: 'name', subject: 'Name', value: '', meta: runtimeMetaMockData.name['']},
+      {
+        key: 'version',
+        subject: 'Version',
+        value: '1.7.13(2.7.18 (default, Apr 20 2020, 19:34:11) \n[GCC 8.3.0])',
+        meta: undefined,
+      },
+    ]);
+  });
+});

tests/js/spec/components/events/contexts/runtime/getRuntimeKnownDataDetails.spec.tsx

@@ -0,0 +1,34 @@
+import {runtimeKnownDataValues} from 'sentry/components/events/contexts/runtime';
+import {getRuntimeKnownDataDetails} from 'sentry/components/events/contexts/runtime/getRuntimeKnownDataDetails';
+
+import {runtimeMockData} from './index.spec';
+
+describe('getRuntimeKnownDataDetails', function () {
+  it('returns values and according to the parameters', function () {
+    const allKnownData: ReturnType<typeof getRuntimeKnownDataDetails>[] = [];
+
+    for (const type of Object.keys(runtimeKnownDataValues)) {
+      const runtimeKnownData = getRuntimeKnownDataDetails({
+        type: runtimeKnownDataValues[type],
+        data: runtimeMockData,
+      });
+
+      if (!runtimeKnownData) {
+        return;
+      }
+
+      allKnownData.push(runtimeKnownData);
+    }
+
+    expect(allKnownData).toEqual([
+      {
+        subject: 'Name',
+        value: '',
+      },
+      {
+        subject: 'Version',
+        value: '1.7.13(2.7.18 (default, Apr 20 2020, 19:34:11) \n[GCC 8.3.0])',
+      },
+    ]);
+  });
+});