ref(tsc) fix nouncheckedindexedaccess

build-utils/sentry-instrumentation.ts

@@ -71,7 +71,7 @@ class SentryInstrumentation {
     sentry.setTag('arch', os.arch());
     sentry.setTag(
       'cpu',
-      cpus?.length ? `${cpus[0].model} (cores: ${cpus.length})}` : 'N/A'
+      cpus?.length ? `${cpus[0]!.model} (cores: ${cpus.length})}` : 'N/A'
     );
 
     this.Sentry = sentry;
@@ -96,7 +96,7 @@ class SentryInstrumentation {
           .filter(assetName => !assetName.endsWith('.map'))
           .forEach(assetName => {
             const asset = compilation.assets[assetName];
-            const size = asset.size();
+            const size = asset!.size();
             const file = assetName;
             const body = JSON.stringify({
               file,

eslint.config.mjs

@@ -779,6 +779,7 @@ export default typescript.config([
     // corresponding configuration object where the plugin is initially included
     plugins: {
       ...react.configs.flat.plugins,
+      // @ts-ignore noUncheckedIndexedAccess
       ...react.configs.flat['jsx-runtime'].plugins,
       '@typescript-eslint': typescript.plugin,
       'react-hooks': fixupPluginRules(reactHooks),

static/app/actionCreators/dashboards.tsx

@@ -27,7 +27,7 @@ export function fetchDashboards(api: Client, orgSlug: string) {
 
     if (errorResponse) {
       const errors = flattenErrors(errorResponse, {});
-      addErrorMessage(errors[Object.keys(errors)[0]] as string);
+      addErrorMessage(errors[Object.keys(errors)[0]!] as string);
     } else {
       addErrorMessage(t('Unable to fetch dashboards'));
     }
@@ -73,7 +73,7 @@ export function createDashboard(
 
     if (errorResponse) {
       const errors = flattenErrors(errorResponse, {});
-      addErrorMessage(errors[Object.keys(errors)[0]] as string);
+      addErrorMessage(errors[Object.keys(errors)[0]!] as string);
     } else {
       addErrorMessage(t('Unable to create dashboard'));
     }
@@ -118,7 +118,7 @@ export async function updateDashboardFavorite(
     const errorResponse = response?.responseJSON ?? null;
     if (errorResponse) {
       const errors = flattenErrors(errorResponse, {});
-      addErrorMessage(errors[Object.keys(errors)[0]] as string);
+      addErrorMessage(errors[Object.keys(errors)[0]!]! as string);
     } else if (isFavorited) {
       addErrorMessage(t('Unable to favorite dashboard'));
     } else {
@@ -145,7 +145,7 @@ export function fetchDashboard(
 
     if (errorResponse) {
       const errors = flattenErrors(errorResponse, {});
-      addErrorMessage(errors[Object.keys(errors)[0]] as string);
+      addErrorMessage(errors[Object.keys(errors)[0]!] as string);
     } else {
       addErrorMessage(t('Unable to load dashboard'));
     }
@@ -192,7 +192,7 @@ export function updateDashboard(
 
     if (errorResponse) {
       const errors = flattenErrors(errorResponse, {});
-      addErrorMessage(errors[Object.keys(errors)[0]] as string);
+      addErrorMessage(errors[Object.keys(errors)[0]!] as string);
     } else {
       addErrorMessage(t('Unable to update dashboard'));
     }
@@ -218,7 +218,7 @@ export function deleteDashboard(
 
     if (errorResponse) {
       const errors = flattenErrors(errorResponse, {});
-      addErrorMessage(errors[Object.keys(errors)[0]] as string);
+      addErrorMessage(errors[Object.keys(errors)[0]!] as string);
     } else {
       addErrorMessage(t('Unable to delete dashboard'));
     }
@@ -270,7 +270,7 @@ export function updateDashboardPermissions(
 
     if (errorResponse) {
       const errors = flattenErrors(errorResponse, {});
-      addErrorMessage(errors[Object.keys(errors)[0]] as string);
+      addErrorMessage(errors[Object.keys(errors)[0]!]! as string);
     } else {
       addErrorMessage(t('Unable to update dashboard permissions'));
     }

static/app/actionCreators/members.tsx

@@ -67,7 +67,7 @@ export function indexMembersByProject(members: Member[]): IndexedMembersByProjec
         acc[project] = [];
       }
       if (member.user) {
-        acc[project].push(member.user);
+        acc[project]!.push(member.user);
       }
     }
     return acc;

static/app/actionCreators/monitors.tsx

@@ -70,7 +70,7 @@ export async function updateMonitor(
     // If we are updating a single value in the monitor we can read the
     // validation error for that key, otherwise fallback to the default error
     const validationError =
-      updateKeys.length === 1 ? respError.responseJSON?.[updateKeys[0]]?.[0] : undefined;
+      updateKeys.length === 1 ? respError.responseJSON?.[updateKeys[0]!]?.[0] : undefined;
 
     logException(err);
     addErrorMessage(validationError ?? t('Unable to update monitor.'));

static/app/actionCreators/organizations.tsx

@@ -45,7 +45,7 @@ export function redirectToRemainingOrganization({
   }
 
   // Let's be smart and select the best org to redirect to
-  const firstRemainingOrg = allOrgs[0];
+  const firstRemainingOrg = allOrgs[0]!;
 
   const route = `/organizations/${firstRemainingOrg.slug}/issues/`;
   if (USING_CUSTOMER_DOMAIN) {

static/app/actionCreators/pageFilters.tsx

@@ -319,7 +319,7 @@ export function initializeUrlState({
     if (projects && projects.length > 0) {
       // If there is a list of projects from URL params, select first project
       // from that list
-      newProject = typeof projects === 'string' ? [Number(projects)] : [projects[0]];
+      newProject = typeof projects === 'string' ? [Number(projects)] : [projects[0]!];
     } else {
       // When we have finished loading the organization into the props,  i.e.
       // the organization slug is consistent with the URL param--Sentry will

static/app/actionCreators/projects.spec.tsx

@@ -14,7 +14,7 @@ describe('Projects ActionCreators', function () {
     expect(mock).not.toHaveBeenCalled();
 
     _debouncedLoadStats(api, new Set([...Array(50)].map((_, i) => String(i))), {
-      projectId: project.id,
+      projectId: project!.id,
       orgId: organization.slug,
     });
 
@@ -38,7 +38,7 @@ describe('Projects ActionCreators', function () {
     expect(mock).not.toHaveBeenCalled();
 
     _debouncedLoadStats(api, new Set(['1', '2', '3']), {
-      projectId: project.id,
+      projectId: project!.id,
       orgId: organization.slug,
       query: {transactionStats: '1'},
     });

static/app/bootstrap/initializeSdk.tsx

@@ -217,7 +217,7 @@ export function initializeSdk(config: Config) {
         images.push({
           type: 'sourcemap',
           code_file: filename,
-          debug_id: debugIdMap[filename],
+          debug_id: debugIdMap[filename]!,
         });
       });
     } catch (e) {
@@ -310,7 +310,7 @@ function handlePossibleUndefinedResponseBodyErrors(event: Event): void {
   const causeErrorIsURBE = causeError?.type === 'UndefinedResponseBodyError';
 
   if (mainErrorIsURBE || causeErrorIsURBE) {
-    mainError.type = 'UndefinedResponseBodyError';
+    mainError!.type = 'UndefinedResponseBodyError';
     event.tags = {...event.tags, undefinedResponseBody: true};
     event.fingerprint = mainErrorIsURBE
       ? ['UndefinedResponseBodyError as main error']
@@ -319,7 +319,7 @@ function handlePossibleUndefinedResponseBodyErrors(event: Event): void {
 }
 
 export function addEndpointTagToRequestError(event: Event): void {
-  const errorMessage = event.exception?.values?.[0].value || '';
+  const errorMessage = event.exception?.values?.[0]!.value || '';
 
   // The capturing group here turns `GET /dogs/are/great 500` into just `GET /dogs/are/great`
   const requestErrorRegex = new RegExp('^([A-Za-z]+ (/[^/]+)+/) \\d+$');

static/app/chartcuterie/discover.tsx

@@ -336,7 +336,7 @@ discoverCharts.push({
       const previousPeriod = LineSeries({
         name: t('previous %s', data.seriesName),
         data: previous.map(([_, countsForTimestamp], i) => [
-          current[i][0] * 1000,
+          current[i]![0] * 1000,
           countsForTimestamp.reduce((acc, {count}) => acc + count, 0),
         ]),
         lineStyle: {color: theme.gray200, type: 'dotted'},

static/app/components/acl/feature.tsx

@@ -141,12 +141,12 @@ class Feature extends Component<Props> {
 
     const shouldMatchOnlyProject = feature.match(/^projects:(.+)/);
     if (shouldMatchOnlyProject) {
-      return project.includes(shouldMatchOnlyProject[1]);
+      return project.includes(shouldMatchOnlyProject[1]!);
     }
 
     const shouldMatchOnlyOrg = feature.match(/^organizations:(.+)/);
     if (shouldMatchOnlyOrg) {
-      return organization.includes(shouldMatchOnlyOrg[1]);
+      return organization.includes(shouldMatchOnlyOrg[1]!);
     }
 
     // default, check all feature arrays
@@ -186,7 +186,7 @@ class Feature extends Component<Props> {
       const hooks = HookStore.get(hookName);
 
       if (hooks.length > 0) {
-        customDisabledRender = hooks[0];
+        customDisabledRender = hooks[0]!;
       }
     }
     const renderProps = {

static/app/components/arithmeticInput/parser.tsx

@@ -54,7 +54,7 @@ export class TokenConverter {
 
   tokenTerm = (maybeFactor: Expression, remainingAdds: Array<Operation>): Expression => {
     if (remainingAdds.length > 0) {
-      remainingAdds[0].lhs = maybeFactor;
+      remainingAdds[0]!.lhs = maybeFactor;
       return flatten(remainingAdds);
     }
     return maybeFactor;
@@ -75,7 +75,7 @@ export class TokenConverter {
   };
 
   tokenFactor = (primary: Expression, remaining: Array<Operation>): Operation => {
-    remaining[0].lhs = primary;
+    remaining[0]!.lhs = primary;
     return flatten(remaining);
   };
 

static/app/components/assigneeBadge.stories.tsx

@@ -42,7 +42,7 @@ export default storyBook('AssigneeBadge', story => {
     const [chevron2Toggle, setChevron2Toggle] = useState<'up' | 'down'>('down');
 
     const team: Team = teams.length
-      ? teams[0]
+      ? teams[0]!
       : {
           id: '1',
           slug: 'team-slug',

static/app/components/assigneeSelectorDropdown.spec.tsx

@@ -572,7 +572,7 @@ describe('AssigneeSelectorDropdown', () => {
 
     // Suggested assignee initials
     expect(options[0]).toHaveTextContent('AB');
-    await userEvent.click(options[0]);
+    await userEvent.click(options[0]!);
 
     await waitFor(() =>
       expect(assignGroup2Mock).toHaveBeenCalledWith(

static/app/components/assigneeSelectorDropdown.tsx

@@ -155,6 +155,7 @@ export function AssigneeAvatar({
   }
 
   if (suggestedActors.length > 0) {
+    const actor = suggestedActors[0]!;
     return (
       <SuggestedAvatarStack
         size={26}
@@ -164,17 +165,12 @@ export function AssigneeAvatar({
           <TooltipWrapper>
             <div>
               {tct('Suggestion: [name]', {
-                name:
-                  suggestedActors[0].type === 'team'
-                    ? `#${suggestedActors[0].name}`
-                    : suggestedActors[0].name,
+                name: actor.type === 'team' ? `#${actor.name}` : actor.name,
               })}
               {suggestedActors.length > 1 &&
                 tn(' + %s other', ' + %s others', suggestedActors.length - 1)}
             </div>
-            <TooltipSubtext>
-              {suggestedReasons[suggestedActors[0].suggestedReason]}
-            </TooltipSubtext>
+            <TooltipSubtext>{suggestedReasons[actor.suggestedReason]}</TooltipSubtext>
           </TooltipWrapper>
         }
       />
@@ -265,7 +261,10 @@ export default function AssigneeSelectorDropdown({
     const uniqueSuggestions = uniqBy(suggestedOwners, owner => owner.owner);
     return uniqueSuggestions
       .map<SuggestedAssignee | null>(suggestion => {
-        const [suggestionType, suggestionId] = suggestion.owner.split(':');
+        const [suggestionType, suggestionId] = suggestion.owner.split(':') as [
+          string,
+          string,
+        ];
         const suggestedReasonText = suggestedReasonTable[suggestion.type];
         if (suggestionType === 'user') {
           const member = currentMemberList.find(user => user.id === suggestionId);
@@ -322,7 +321,7 @@ export default function AssigneeSelectorDropdown({
     }
     // See makeMemberOption and makeTeamOption for how the value is formatted
     const type = selectedOption.value.startsWith('user:') ? 'user' : 'team';
-    const assigneeId = selectedOption.value.split(':')[1];
+    const assigneeId = selectedOption.value.split(':')[1]!;
     let assignee: User | Actor;
 
     if (type === 'user') {

static/app/components/assistant/guideAnchor.tsx

@@ -155,7 +155,7 @@ class BaseGuideAnchor extends Component<Props, State> {
 
     const totalStepCount = currentGuide.steps.length;
     const currentStepCount = step + 1;
-    const currentStep = currentGuide.steps[step];
+    const currentStep = currentGuide.steps[step]!;
     const lastStep = currentStepCount === totalStepCount;
     const hasManySteps = totalStepCount > 1;
 

static/app/components/autoComplete.spec.tsx

@@ -216,7 +216,7 @@ describe('AutoComplete', function () {
       expect(screen.getByTestId('test-autocomplete')).toBeInTheDocument();
       expect(screen.getAllByRole('option')).toHaveLength(3);
 
-      fireEvent.click(screen.getByText(items[1].name));
+      fireEvent.click(screen.getByText(items[1]!.name));
       expect(mocks.onSelect).toHaveBeenCalledWith(
         items[1],
         expect.objectContaining({inputValue: '', highlightedIndex: 0}),
@@ -419,7 +419,7 @@ describe('AutoComplete', function () {
       createWrapper({isOpen: true});
       expect(screen.getAllByRole('option')).toHaveLength(3);
 
-      fireEvent.click(screen.getByText(items[1].name));
+      fireEvent.click(screen.getByText(items[1]!.name));
       expect(mocks.onSelect).toHaveBeenCalledWith(
         items[1],
         expect.objectContaining({inputValue: '', highlightedIndex: 0}),

static/app/components/avatar/avatarList.spec.tsx

@@ -42,12 +42,12 @@ describe('AvatarList', () => {
     ];
 
     renderComponent({users});
-    expect(screen.getByText(users[0].name.charAt(0))).toBeInTheDocument();
-    expect(screen.getByText(users[1].name.charAt(0))).toBeInTheDocument();
-    expect(screen.getByText(users[2].name.charAt(0))).toBeInTheDocument();
-    expect(screen.getByText(users[3].name.charAt(0))).toBeInTheDocument();
-    expect(screen.getByText(users[4].name.charAt(0))).toBeInTheDocument();
-    expect(screen.getByText(users[5].name.charAt(0))).toBeInTheDocument();
+    expect(screen.getByText(users[0]!.name.charAt(0))).toBeInTheDocument();
+    expect(screen.getByText(users[1]!.name.charAt(0))).toBeInTheDocument();
+    expect(screen.getByText(users[2]!.name.charAt(0))).toBeInTheDocument();
+    expect(screen.getByText(users[3]!.name.charAt(0))).toBeInTheDocument();
+    expect(screen.getByText(users[4]!.name.charAt(0))).toBeInTheDocument();
+    expect(screen.getByText(users[5]!.name.charAt(0))).toBeInTheDocument();
     expect(screen.queryByTestId('avatarList-collapsedavatars')).not.toBeInTheDocument();
   });
 
@@ -63,12 +63,12 @@ describe('AvatarList', () => {
     ];
 
     renderComponent({users});
-    expect(screen.getByText(users[0].name.charAt(0))).toBeInTheDocument();
-    expect(screen.getByText(users[1].name.charAt(0))).toBeInTheDocument();
-    expect(screen.getByText(users[2].name.charAt(0))).toBeInTheDocument();
-    expect(screen.getByText(users[3].name.charAt(0))).toBeInTheDocument();
-    expect(screen.getByText(users[4].name.charAt(0))).toBeInTheDocument();
-    expect(screen.queryByText(users[5].name.charAt(0))).not.toBeInTheDocument();
+    expect(screen.getByText(users[0]!.name.charAt(0))).toBeInTheDocument();
+    expect(screen.getByText(users[1]!.name.charAt(0))).toBeInTheDocument();
+    expect(screen.getByText(users[2]!.name.charAt(0))).toBeInTheDocument();
+    expect(screen.getByText(users[3]!.name.charAt(0))).toBeInTheDocument();
+    expect(screen.getByText(users[4]!.name.charAt(0))).toBeInTheDocument();
+    expect(screen.queryByText(users[5]!.name.charAt(0))).not.toBeInTheDocument();
     expect(screen.getByTestId('avatarList-collapsedavatars')).toBeInTheDocument();
   });
 

static/app/components/avatar/avatarList.tsx

@@ -69,9 +69,9 @@ function AvatarList({
 
   if (numCollapsedAvatars === 1) {
     if (visibleTeamAvatars.length < teams.length) {
-      visibleTeamAvatars.unshift(teams[teams.length - 1]);
+      visibleTeamAvatars.unshift(teams[teams.length - 1]!);
     } else if (visibleUserAvatars.length < users.length) {
-      visibleUserAvatars.unshift(users[users.length - 1]);
+      visibleUserAvatars.unshift(users[users.length - 1]!);
     }
     numCollapsedAvatars = 0;
   }

static/app/components/avatar/index.spec.tsx

@@ -293,7 +293,7 @@ describe('Avatar', function () {
       avatar2.unmount();
 
       // avatarType of `default`
-      sentryApp.avatars![0].avatarType = 'default';
+      sentryApp.avatars![0]!.avatarType = 'default';
       render(<AvatarComponent sentryApp={sentryApp} isColor />);
       expect(screen.getByTestId('default-sentry-app-avatar')).toBeInTheDocument();
     });

static/app/components/avatar/suggestedAvatarStack.tsx

@@ -29,7 +29,7 @@ function SuggestedAvatarStack({
     <AvatarStack reverse={reverse} data-test-id="suggested-avatar-stack">
       {suggestedOwners.slice(0, numAvatars - 1).map((owner, i) => (
         <Avatar
-          round={firstSuggestion.type === 'user'}
+          round={firstSuggestion!.type === 'user'}
           actor={owner}
           hasTooltip={false}
           {...props}
@@ -40,7 +40,7 @@ function SuggestedAvatarStack({
         />
       ))}
       <Avatar
-        actor={firstSuggestion}
+        actor={firstSuggestion!}
         tooltip={tooltip}
         tooltipOptions={{...tooltipOptions, skipWrapper: true}}
         {...props}