chore(null): address straightforward null check errors for src/common/components

src/background/actions/action-payloads.ts

@@ -90,7 +90,7 @@ export interface ChangeInstanceSelectionPayload extends AssessmentActionInstance
 }
 
 export interface UpdateSelectedDetailsViewPayload extends BaseActionPayload {
-    detailsViewType: VisualizationType;
+    detailsViewType: VisualizationType | null;
     pivotType: DetailsViewPivotType;
 }
 

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

@@ -66,7 +66,7 @@ export const InstanceDetails = NamedFC<InstanceDetailsProps>('InstanceDetails',
         cardSelectionMessageCreator.toggleCardSelection(result.ruleId, result.uid, event);
     };
 
-    const hiddenButton = React.useRef(null);
+    const hiddenButton = React.useRef<HTMLButtonElement>(null);
     const cardHighlightingProperties = isHighlightSupported
         ? {
               onClick: (_: React.SyntheticEvent): void => {
@@ -124,7 +124,7 @@ const renderCardRowsForPropertyBag = (
     props: InstanceDetailsProps,
 ) => {
     let propertyIndex = 0;
-    const cardRows = [];
+    const cardRows: JSX.Element[] = [];
     forOwn(propertyBag, (propertyData, propertyName) => {
         const propertyConfig = props.deps.getPropertyConfigById(propertyName);
         if (!isEmpty(propertyConfig)) {

src/common/components/cards/needs-review-instances-section.tsx

@@ -31,7 +31,6 @@ export const NeedsReviewInstancesSection = NamedFC<CommonInstancesSectionProps>(
                 deps={deps}
                 title="Instances to review"
                 results={cardsViewData.cards.unknown}
-                containerClassName={null}
                 outcomeType="review"
                 badgeCount={count}
                 userConfigurationStoreData={userConfigurationStoreData}

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

@@ -17,7 +17,7 @@ export type ResultSectionDeps = ResultSectionContentDeps;
 
 export type ResultSectionProps = Omit<ResultSectionContentProps, 'headingLevel'> &
     Omit<ResultSectionTitleProps, 'titleSize'> & {
-        containerClassName: string;
+        containerClassName?: string;
         deps: ResultSectionDeps;
         sectionHeadingLevel: HeadingLevel;
     };

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

@@ -1,6 +1,5 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { FixInstructionProcessor } from 'common/components/fix-instruction-processor';
 import { CardSelectionMessageCreator } from 'common/message-creators/card-selection-message-creator';
 import { NamedFC } from 'common/react/named-fc';
 import * as React from 'react';
@@ -27,7 +26,6 @@ export type RulesWithInstancesDeps = RuleContentDeps &
 
 export type RulesWithInstancesProps = {
     deps: RulesWithInstancesDeps;
-    fixInstructionProcessor: FixInstructionProcessor;
     rules: CardRuleResult[];
     outcomeType: InstanceOutcomeType;
     userConfigurationStoreData: UserConfigurationStoreData;
@@ -44,7 +42,6 @@ export const RulesWithInstances = NamedFC<RulesWithInstancesProps>(
     ({
         rules,
         outcomeType,
-        fixInstructionProcessor,
         deps,
         userConfigurationStoreData,
         targetAppInfo,
@@ -73,7 +70,6 @@ export const RulesWithInstances = NamedFC<RulesWithInstancesProps>(
                         key={`${rule.id}-rule-group`}
                         deps={deps}
                         rule={rule}
-                        fixInstructionProcessor={fixInstructionProcessor}
                         userConfigurationStoreData={userConfigurationStoreData}
                         targetAppInfo={targetAppInfo}
                         cardSelectionMessageCreator={cardSelectionMessageCreator}

src/common/extension-telemetry-events.ts

@@ -137,7 +137,7 @@ export type ExportFastPassResultsTelemetryData = {
 } & ExportResultsTelemetryData;
 
 export type DetailsViewOpenTelemetryData = {
-    selectedTest: string;
+    selectedTest: string | null;
 } & BaseTelemetryData;
 
 export type DetailsViewOpenedTelemetryData = {

src/common/telemetry-data-factory.ts

@@ -204,12 +204,12 @@ export class TelemetryDataFactory {
 
     public forOpenDetailsView(
         event: SupportedMouseEvent,
-        visualizationType: VisualizationType,
+        visualizationType: VisualizationType | null,
         source: TelemetryEventSource,
     ): DetailsViewOpenTelemetryData {
         return {
             ...this.withTriggeredByAndSource(event, source),
-            selectedTest: VisualizationType[visualizationType],
+            selectedTest: visualizationType == null ? null : VisualizationType[visualizationType],
         };
     }
 

src/popup/actions/popup-action-message-creator.ts

@@ -59,7 +59,7 @@ export class PopupActionMessageCreator {
 
     public openDetailsView(
         event: SupportedMouseEvent,
-        viewType: VisualizationType,
+        viewType: VisualizationType | null,
         source: TelemetryEventSource,
         pivotType: DetailsViewPivotType,
     ): void {

src/tests/unit/tests/common/components/cards/__snapshots__/needs-review-instances-section.test.tsx.snap

@@ -7,7 +7,6 @@ exports[`NeedsReviewInstancesSection renders null results 1`] = `null`;
 exports[`NeedsReviewInstancesSection renders with alerting off 1`] = `
 <ResultSection
   badgeCount={0}
-  containerClassName={null}
   deps={Object {}}
   outcomeCounter={[Function]}
   outcomeType="review"
@@ -27,7 +26,6 @@ exports[`NeedsReviewInstancesSection renders with alerting off 1`] = `
 exports[`NeedsReviewInstancesSection renders with alerting on 1`] = `
 <ResultSection
   badgeCount={0}
-  containerClassName={null}
   deps={Object {}}
   outcomeCounter={[Function]}
   outcomeType="review"
@@ -47,7 +45,6 @@ exports[`NeedsReviewInstancesSection renders with alerting on 1`] = `
 exports[`NeedsReviewInstancesSection renders with unknowns 1`] = `
 <ResultSection
   badgeCount={2}
-  containerClassName={null}
   deps={Object {}}
   outcomeCounter={[Function]}
   outcomeType="review"

src/tests/unit/tests/common/components/cards/__snapshots__/rules-with-instances.test.tsx.snap

@@ -15,9 +15,9 @@ exports[`RulesWithInstances renders 1`] = `
         deps={
           Object {
             "collapsibleControl": [Function],
+            "fixInstructionProcessor": [typemoq mock object],
           }
         }
-        fixInstructionProcessor={[typemoq mock object]}
         rule={
           Object {
             "description": "sample-description",
@@ -69,6 +69,7 @@ exports[`RulesWithInstances renders 1`] = `
     deps={
       Object {
         "collapsibleControl": [Function],
+        "fixInstructionProcessor": [typemoq mock object],
       }
     }
     header={

src/tests/unit/tests/common/components/cards/rules-with-instances.test.tsx

@@ -31,13 +31,13 @@ describe('RulesWithInstances', () => {
             collapsibleControl: (props: CollapsibleComponentCardsProps) => (
                 <CollapsibleControlStub {...props} />
             ),
+            fixInstructionProcessor: fixInstructionProcessorMock.object,
         } as RulesWithInstancesDeps;
         const outcomeCounterStub = () => 5;
 
         const wrapped = shallow(
             <RulesWithInstances
                 deps={depsStub}
-                fixInstructionProcessor={fixInstructionProcessorMock.object}
                 outcomeType={'pass'}
                 rules={rules}
                 userConfigurationStoreData={null}