chore(null): strict null checks for UI package and deps (#6226)

#### Details

Adds the UI package's impl directory + its dependants to the strict null
check set.

##### Motivation

#2869

##### Context

n/a

#### Pull request checklist
<!-- If a checklist item is not applicable to this change, write "n/a"
in the checkbox -->
- [x] Addresses an existing issue: #2869
- [x] Ran `yarn null:autoadd`
- [x] Ran `yarn fastpass`
- [x] Added/updated relevant unit test(s) (and ran `yarn test`)
- [x] Verified code coverage for the changes made. Check coverage report
at: `<rootDir>/test-results/unit/coverage`
- [x] PR title *AND* final merge commit title both start with a semantic
tag (`fix:`, `chore:`, `feat(feature-name):`, `refactor:`). See
`CONTRIBUTING.md`.
- [n/a] (UI changes only) Added screenshots/GIFs to description above
- [n/a] (UI changes only) Verified usability with NVDA/JAWS

src/common/components/cards/card-footer-instance-action-buttons.tsx

@@ -32,7 +32,7 @@ export type CardFooterInstanceActionButtonsDeps = {
 
 export interface CardFooterInstanceActionButtonsProps {
     deps: CardFooterInstanceActionButtonsDeps;
-    userConfigurationStoreData: UserConfigurationStoreData;
+    userConfigurationStoreData: UserConfigurationStoreData | null;
     issueDetailsData: CreateIssueDetailsTextData;
     kebabMenuAriaLabel?: string;
     narrowModeStatus?: NarrowModeStatus;

src/common/components/cards/card-footer-menu-items-builder.ts

@@ -27,7 +27,7 @@ export type CardFooterMenuItemsProps = {
     fileIssueButtonRef: IRefObject<IButton> & IRefObject<IContextualMenuRenderItem>;
     toastRef: React.RefObject<Toast>;
     issueDetailsData: CreateIssueDetailsTextData;
-    userConfigurationStoreData: UserConfigurationStoreData;
+    userConfigurationStoreData: UserConfigurationStoreData | null;
     onIssueFilingSettingsDialogDismissed: () => void;
     deps: CardFooterMenuItemsDeps;
 };
@@ -90,6 +90,11 @@ export class CardFooterMenuItemsBuilder {
             cardsViewController,
         } = deps;
 
+        if (userConfigurationStoreData == null) {
+            // Intentionally no-op; store data is still in flight from initial load
+            return;
+        }
+
         const selectedBugFilingService = issueFilingServiceProvider.forKey(
             userConfigurationStoreData.bugService,
         );

src/common/components/cards/collapsible-component-cards.tsx

@@ -11,7 +11,7 @@ import styles from './collapsible-component-cards.scss';
 export const collapsibleButtonAutomationId = 'collapsible-component-cards-button';
 
 export type CollapsibleComponentCardsDeps = {
-    setFocusVisibility: SetFocusVisibility;
+    setFocusVisibility?: SetFocusVisibility;
 };
 
 export interface CollapsibleComponentCardsProps {
@@ -59,7 +59,7 @@ const CollapsibleComponentCards = NamedFC<CollapsibleComponentCardsProps>(
         }
 
         const onClick = (event: React.MouseEvent<HTMLDivElement>) => {
-            if (event.nativeEvent.detail === 0) {
+            if (event.nativeEvent.detail === 0 && deps.setFocusVisibility != null) {
                 // 0 => keyboard event
                 deps.setFocusVisibility(true);
             }

src/common/components/cards/instance-details-footer.tsx

@@ -30,7 +30,7 @@ export type InstanceDetailsFooterDeps = {
 export type InstanceDetailsFooterProps = {
     deps: InstanceDetailsFooterDeps;
     result: CardResult;
-    userConfigurationStoreData: UserConfigurationStoreData;
+    userConfigurationStoreData: UserConfigurationStoreData | null;
     targetAppInfo: TargetAppData;
     rule: UnifiedRule;
     narrowModeStatus?: NarrowModeStatus;

src/common/components/cards/instance-details-group.tsx

@@ -25,7 +25,7 @@ export type InstanceDetailsGroupDeps = {
 export type InstanceDetailsGroupProps = {
     deps: InstanceDetailsGroupDeps;
     rule: CardRuleResult;
-    userConfigurationStoreData: UserConfigurationStoreData;
+    userConfigurationStoreData: UserConfigurationStoreData | null;
     targetAppInfo: TargetAppData;
     cardSelectionMessageCreator?: CardSelectionMessageCreator;
     narrowModeStatus?: NarrowModeStatus;

src/common/components/cards/instance-details.tsx

@@ -31,7 +31,7 @@ export type InstanceDetailsProps = {
     deps: InstanceDetailsDeps;
     result: CardResult;
     index: number;
-    userConfigurationStoreData: UserConfigurationStoreData;
+    userConfigurationStoreData: UserConfigurationStoreData | null;
     targetAppInfo: TargetAppData;
     rule: UnifiedRule;
     cardSelectionMessageCreator?: CardSelectionMessageCreator;

src/common/components/cards/result-section-content.tsx

@@ -27,7 +27,7 @@ export type ResultSectionContentProps = {
     results: CardRuleResult[];
     outcomeType: InstanceOutcomeType;
     fixInstructionProcessor?: FixInstructionProcessor;
-    userConfigurationStoreData: UserConfigurationStoreData;
+    userConfigurationStoreData: UserConfigurationStoreData | null;
     targetAppInfo: TargetAppData;
     visualHelperEnabled: boolean;
     allCardsCollapsed: boolean;

src/common/components/cards/rule-content.tsx

@@ -16,7 +16,7 @@ export type RuleContentDeps = InstanceDetailsGroupDeps & RuleResourcesDeps;
 export type RuleContentProps = {
     deps: RuleContentDeps;
     rule: CardRuleResult;
-    userConfigurationStoreData: UserConfigurationStoreData;
+    userConfigurationStoreData: UserConfigurationStoreData | null;
     targetAppInfo: TargetAppData;
     cardSelectionMessageCreator?: CardSelectionMessageCreator;
     narrowModeStatus?: NarrowModeStatus;

src/common/components/cards/rules-with-instances.tsx

@@ -29,7 +29,7 @@ export type RulesWithInstancesProps = {
     deps: RulesWithInstancesDeps;
     rules: CardRuleResult[];
     outcomeType: InstanceOutcomeType;
-    userConfigurationStoreData: UserConfigurationStoreData;
+    userConfigurationStoreData: UserConfigurationStoreData | null;
     targetAppInfo: TargetAppData;
     outcomeCounter: OutcomeCounter;
     headingLevel: number;

src/packages/accessibility-insights-ui/ui-factory.tsx

@@ -9,6 +9,7 @@ import * as React from 'react';
 import { ContentView, ContentViewDeps } from 'views/content/content-view';
 import { GuidanceTitle } from 'views/content/guidance-title';
 import { createMarkup, MarkupDeps } from 'views/content/markup';
+import { ClientStoresHub } from 'common/stores/client-stores-hub';
 
 type UIOptions = {
     applicationTitle: string;
@@ -17,6 +18,14 @@ type UIOptions = {
 };
 
 const nullCreator = () => {};
+const nullStoresHub: ClientStoresHub<any> = {
+    stores: [],
+    addChangedListenerToAllStores: () => {},
+    removeChangedListenerFromAllStores: () => {},
+    hasStores: () => false,
+    hasStoreData: () => false,
+    getAllStoreData: () => null,
+};
 
 export const contentViewFactory = ({ applicationTitle, getNarrowModeThresholds }: UIOptions) => {
     const contentViewDeps: ContentViewDeps = {
@@ -26,8 +35,7 @@ export const contentViewFactory = ({ applicationTitle, getNarrowModeThresholds }
         storeActionMessageCreator: {
             getAllStates: nullCreator,
         },
-        storesHub: null,
-        storesActionCreator: null,
+        storesHub: nullStoresHub,
         getNarrowModeThresholds,
     };
 

src/reports/components/report-sections/combined-report-failed-section.tsx

@@ -49,9 +49,9 @@ export const CombinedReportFailedSection = NamedFC<CombinedReportFailedSectionPr
                     headingLevel={4}
                 />
             ),
-            onExpandToggle: null,
+            onExpandToggle: () => {},
             headingLevel: 3,
-            deps: null,
+            deps: {},
         });
 
         return <div className="result-section">{CollapsibleContent}</div>;

src/tests/unit/common/tab-store-data-builder.ts

@@ -7,6 +7,15 @@ import { BaseDataBuilder } from './base-data-builder';
 export class TabStoreDataBuilder extends BaseDataBuilder<TabStoreData> {
     constructor() {
         super();
-        this.data = new TabStore(null, null, null, null, null, null, null, null).getDefaultState();
+        this.data = new TabStore(
+            null!,
+            null!,
+            null!,
+            null!,
+            null!,
+            null!,
+            null!,
+            null!,
+        ).getDefaultState();
     }
 }

src/tests/unit/tests/packages/accessibility-insights-ui/__snapshots__/ui-factory.test.tsx.snap

@@ -8,8 +8,14 @@ exports[`UIFactory exports ContentView 1`] = `
       "storeActionMessageCreator": {
         "getAllStates": [Function],
       },
-      "storesActionCreator": null,
-      "storesHub": null,
+      "storesHub": {
+        "addChangedListenerToAllStores": [Function],
+        "getAllStoreData": [Function],
+        "hasStoreData": [Function],
+        "hasStores": [Function],
+        "removeChangedListenerFromAllStores": [Function],
+        "stores": [],
+      },
       "textContent": {
         "applicationTitle": "THE_APPLICATION_TITLE",
       },

src/tests/unit/tests/reports/components/report-sections/combined-report-failed-section.test.tsx

@@ -35,7 +35,7 @@ describe('CombinedReportFailedSection', () => {
 
         const expectedCollapsibleControlProps: Partial<CollapsibleComponentCardsProps> = {
             headingLevel: 3,
-            deps: null,
+            deps: {},
         };
 
         collapsibleControlMock

tsconfig.strictNullChecks.json

@@ -445,6 +445,7 @@
         "./src/reports/components/report-sections/body-section.tsx",
         "./src/reports/components/report-sections/collapsible-script-provider.tsx",
         "./src/reports/components/report-sections/collapsible-url-result-section.tsx",
+        "./src/reports/components/report-sections/combined-report-failed-section.tsx",
         "./src/reports/components/report-sections/content-container.tsx",
         "./src/reports/components/report-sections/failed-urls-section.tsx",
         "./src/reports/components/report-sections/fast-pass-results-title-section.tsx",
@@ -529,6 +530,7 @@
         "./src/tests/unit/common/simulated-browser-event.ts",
         "./src/tests/unit/common/simulated-window.ts",
         "./src/tests/unit/common/store-tester.ts",
+        "./src/tests/unit/common/tab-store-data-builder.ts",
         "./src/tests/unit/common/test-document-creator.ts",
         "./src/tests/unit/common/time-simulating-promise-factory.ts",
         "./src/tests/unit/common/typemoq-helper.ts",
@@ -600,6 +602,7 @@
         "src/injected/frameCommunicators/**/*",
         "src/injected/styles/**/*",
         "src/issue-filing/common/markup/**/*",
+        "src/packages/accessibility-insights-ui/**/*",
         "src/popup/Styles/**/*",
         "src/popup/actions/**/*",
         "src/report-export/**/*",