fix: Can't toggle off from the ad-hoc tools menu if you've toggled on in DetailsView (#7431)

#### Details

Two ad-hoc tools (Automated Checks and Needs Review) have the ability to
view issues in DetailsView. Unfortunately, if you try to toggle either
of them off in ad-hoc tools while their corresponding DetailsView list
of issues is open, the DetailsView toggle will overwrite the "off" state
and force it to be "on". Additionally, toggling off in DetailsView does
not turn the toggle off in ad-hoc tools.

This PR keeps these toggles in sync by:
* moving the code that determines if a scan needs to be run based on
state to `componentDidMount` instead of on render.
* triggering
`VisualizationActions.enableVisualization`/`VisualizationActions.disabledVisualization`
when `CardSelectionActions.toggleVisualHelper` is triggered, which
involves:
* making sure `VisualizationActions` are accessible from
`CardSelectionActionCreator`s
* sending a `VisualizationTogglePayload` instead of `BasePayload` with
the enabled state (passed in from the `VisualHelperToggle`'s `onClick`)
* triggering `CardSelectionActions.toggleVisualHelper` when
`VisualizationActions.enableVisualization`/`VisualizationActions.disabledVisualization`
are triggered, which involves:
* checking the value of `payload.test` and triggering
`needsReviewSelectionActions.toggleVisualHelper` or
`cardSelectionActions.toggleVisualHelper` if the `VisualizationType`
matches.

##### Motivation

Addresses issue #6253 

##### Context

<!-- Are there any parts that you've intentionally left out-of-scope for
a later PR to handle? -->

<!-- Were there any alternative approaches you considered? What
tradeoffs did you consider? -->

#### Pull request checklist
<!-- If a checklist item is not applicable to this change, write "n/a"
in the checkbox -->
- [x] Addresses an existing issue: #6253
- [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`.

---------

Co-authored-by: Madalyn Parker <madparker@microsoft.com>

src/DetailsView/components/issues-table.tsx

@@ -62,6 +62,24 @@ export class IssuesTable extends React.Component<IssuesTableProps> {
         super(props);
     }
 
+    componentDidMount(): void {
+        const cardCount = this.getCardCount();
+        const assessment = this.props.getProvider().forType(this.props.selectedVisualizationType);
+        const requirement = assessment?.requirements[0].key;
+        if (!this.props.issuesEnabled && cardCount > 0) {
+            this.props.deps.detailsViewActionMessageCreator.enableFastPassVisualHelperWithoutScan(
+                this.props.selectedVisualizationType,
+                requirement,
+            );
+        }
+        if (!this.props.issuesEnabled && cardCount === 0) {
+            this.props.deps.detailsViewActionMessageCreator.rescanVisualizationWithoutTelemetry(
+                this.props.selectedVisualizationType,
+                requirement,
+            );
+        }
+    }
+
     public render(): JSX.Element {
         return (
             <div className={styles.issuesTable}>
@@ -109,22 +127,6 @@ export class IssuesTable extends React.Component<IssuesTableProps> {
     }
 
     private renderComponent(): JSX.Element {
-        const cardCount = this.getCardCount();
-        const assessment = this.props.getProvider().forType(this.props.selectedVisualizationType);
-        const requirement = assessment?.requirements[0].key;
-        if (!this.props.issuesEnabled && cardCount > 0) {
-            this.props.deps.detailsViewActionMessageCreator.enableFastPassVisualHelperWithoutScan(
-                this.props.selectedVisualizationType,
-                requirement,
-            );
-        }
-        if (!this.props.issuesEnabled && cardCount === 0) {
-            this.props.deps.detailsViewActionMessageCreator.rescanVisualizationWithoutTelemetry(
-                this.props.selectedVisualizationType,
-                requirement,
-            );
-        }
-
         if (this.props.scanning) {
             return this.renderSpinner('Scanning...');
         }

src/background/actions/action-creator.ts

@@ -475,6 +475,16 @@ export class ActionCreator {
                 this.executingScope,
             );
         }
+        switch (payload.test) {
+            case VisualizationType.Issues:
+                await this.cardSelectionActions.toggleVisualHelper.invoke(null);
+                break;
+            case VisualizationType.NeedsReview:
+                await this.needsReviewCardSelectionActions.toggleVisualHelper.invoke(null);
+                break;
+            default:
+                break;
+        }
     };
 
     private onRescanVisualization = async (payload: RescanVisualizationPayload) => {

src/background/actions/card-selection-action-creator.ts

@@ -1,5 +1,6 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
+import { VisualizationActions } from 'background/actions/visualization-actions';
 import { StoreNames } from 'common/stores/store-names';
 
 import * as TelemetryEvents from '../../common/extension-telemetry-events';
@@ -11,12 +12,14 @@ import {
     BaseActionPayload,
     CardSelectionPayload,
     RuleExpandCollapsePayload,
+    VisualizationTogglePayload,
 } from './action-payloads';
 
 export class CardSelectionActionCreator {
     constructor(
         private readonly interpreter: Interpreter,
         private readonly cardSelectionActions: CardSelectionActions,
+        private readonly visualizationActions: VisualizationActions,
         private readonly telemetryEventHandler: TelemetryEventHandler,
     ) {}
 
@@ -67,8 +70,13 @@ export class CardSelectionActionCreator {
         );
     };
 
-    private onToggleVisualHelper = async (payload: BaseActionPayload): Promise<void> => {
+    private onToggleVisualHelper = async (payload: VisualizationTogglePayload): Promise<void> => {
         await this.cardSelectionActions.toggleVisualHelper.invoke(null);
+        if (payload.enabled) {
+            await this.visualizationActions.disableVisualization.invoke(payload.test);
+        } else {
+            await this.visualizationActions.enableVisualization.invoke(payload);
+        }
         this.telemetryEventHandler.publishTelemetry(TelemetryEvents.VISUAL_HELPER_TOGGLED, payload);
     };
 

src/background/actions/needs-review-card-selection-action-creator.ts

@@ -1,6 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 import { NeedsReviewCardSelectionActions } from 'background/actions/needs-review-card-selection-actions';
+import { VisualizationActions } from 'background/actions/visualization-actions';
 import { StoreNames } from 'common/stores/store-names';
 
 import * as TelemetryEvents from '../../common/extension-telemetry-events';
@@ -11,12 +12,14 @@ import {
     BaseActionPayload,
     CardSelectionPayload,
     RuleExpandCollapsePayload,
+    VisualizationTogglePayload,
 } from './action-payloads';
 
 export class NeedsReviewCardSelectionActionCreator {
     constructor(
         private readonly interpreter: Interpreter,
         private readonly needsReviewCardSelectionActions: NeedsReviewCardSelectionActions,
+        private readonly visualizationActions: VisualizationActions,
         private readonly telemetryEventHandler: TelemetryEventHandler,
     ) {}
 
@@ -69,8 +72,13 @@ export class NeedsReviewCardSelectionActionCreator {
         );
     };
 
-    private onToggleVisualHelper = async (payload: BaseActionPayload): Promise<void> => {
+    private onToggleVisualHelper = async (payload: VisualizationTogglePayload): Promise<void> => {
         await this.needsReviewCardSelectionActions.toggleVisualHelper.invoke(null);
+        if (payload.enabled) {
+            await this.visualizationActions.disableVisualization.invoke(payload.test);
+        } else {
+            await this.visualizationActions.enableVisualization.invoke(payload);
+        }
         this.telemetryEventHandler.publishTelemetry(TelemetryEvents.VISUAL_HELPER_TOGGLED, payload);
     };
 

src/background/tab-context-factory.ts

@@ -152,11 +152,13 @@ export class TabContextFactory {
         const cardSelectionActionCreator = new CardSelectionActionCreator(
             interpreter,
             actionsHub.cardSelectionActions,
+            actionsHub.visualizationActions,
             this.telemetryEventHandler,
         );
         const needsReviewCardSelectionActionCreator = new NeedsReviewCardSelectionActionCreator(
             interpreter,
             actionsHub.needsReviewCardSelectionActions,
+            actionsHub.visualizationActions,
             this.telemetryEventHandler,
         );
         const injectionActionCreator = new InjectionActionCreator(

src/common/components/cards/visual-helper-toggle.tsx

@@ -15,7 +15,12 @@ export type VisualHelperToggleProps = {
 export const VisualHelperToggle = NamedFC<VisualHelperToggleProps>('VisualHelperToggle', props => {
     return (
         <Toggle
-            onClick={props.cardSelectionMessageCreator.toggleVisualHelper}
+            onClick={event => {
+                props.cardSelectionMessageCreator.toggleVisualHelper(
+                    event,
+                    props.visualHelperEnabled,
+                );
+            }}
             label="Visual helper"
             checked={props.visualHelperEnabled}
             className={css(styles.visualHelperToggle, props.className)}

src/common/message-creators/automated-checks-card-selection-message-creator.ts

@@ -4,12 +4,14 @@ import {
     BaseActionPayload,
     CardSelectionPayload,
     RuleExpandCollapsePayload,
+    VisualizationTogglePayload,
 } from 'background/actions/action-payloads';
 import { TelemetryEventSource } from 'common/extension-telemetry-events';
 import { CardSelectionMessageCreator } from 'common/message-creators/card-selection-message-creator';
 import { ActionMessageDispatcher } from 'common/message-creators/types/dispatcher';
 import { Messages } from 'common/messages';
 import { SupportedMouseEvent, TelemetryDataFactory } from 'common/telemetry-data-factory';
+import { VisualizationType } from 'common/types/visualization-type';
 
 export class AutomatedChecksCardSelectionMessageCreator implements CardSelectionMessageCreator {
     constructor(
@@ -69,9 +71,14 @@ export class AutomatedChecksCardSelectionMessageCreator implements CardSelection
         });
     };
 
-    public toggleVisualHelper = (event: SupportedMouseEvent) => {
-        const payload: BaseActionPayload = {
-            telemetry: this.telemetryFactory.withTriggeredByAndSource(event, this.source),
+    public toggleVisualHelper = (event: SupportedMouseEvent, isEnabled: boolean) => {
+        const payload: VisualizationTogglePayload = {
+            enabled: isEnabled,
+            test: VisualizationType.Issues,
+            telemetry: {
+                ...this.telemetryFactory.withTriggeredByAndSource(event, this.source),
+                enabled: isEnabled,
+            },
         };
 
         this.dispatcher.dispatchMessage({

src/common/message-creators/card-selection-message-creator.ts

@@ -12,5 +12,5 @@ export interface CardSelectionMessageCreator {
     toggleRuleExpandCollapse: (ruleId: string, event: React.SyntheticEvent) => void;
     collapseAllRules: (event: SupportedMouseEvent) => void;
     expandAllRules: (event: SupportedMouseEvent) => void;
-    toggleVisualHelper: (event: SupportedMouseEvent) => void;
+    toggleVisualHelper: (event: SupportedMouseEvent, isEnabled?: boolean) => void;
 }

src/common/message-creators/needs-review-card-selection-message-creator.ts

@@ -4,12 +4,14 @@ import {
     BaseActionPayload,
     CardSelectionPayload,
     RuleExpandCollapsePayload,
+    VisualizationTogglePayload,
 } from 'background/actions/action-payloads';
 import { TelemetryEventSource } from 'common/extension-telemetry-events';
 import { CardSelectionMessageCreator } from 'common/message-creators/card-selection-message-creator';
 import { ActionMessageDispatcher } from 'common/message-creators/types/dispatcher';
 import { Messages } from 'common/messages';
 import { SupportedMouseEvent, TelemetryDataFactory } from 'common/telemetry-data-factory';
+import { VisualizationType } from 'common/types/visualization-type';
 
 export class NeedsReviewCardSelectionMessageCreator implements CardSelectionMessageCreator {
     constructor(
@@ -69,11 +71,15 @@ export class NeedsReviewCardSelectionMessageCreator implements CardSelectionMess
         });
     };
 
-    public toggleVisualHelper = (event: SupportedMouseEvent) => {
-        const payload: BaseActionPayload = {
-            telemetry: this.telemetryFactory.withTriggeredByAndSource(event, this.source),
+    public toggleVisualHelper = (event: SupportedMouseEvent, isEnabled: boolean) => {
+        const payload: VisualizationTogglePayload = {
+            test: VisualizationType.NeedsReview,
+            enabled: isEnabled,
+            telemetry: {
+                ...this.telemetryFactory.withTriggeredByAndSource(event, this.source),
+                enabled: isEnabled,
+            },
         };
-
         this.dispatcher.dispatchMessage({
             messageType: Messages.NeedsReviewCardSelection.ToggleVisualHelper,
             payload,

src/tests/unit/tests/DetailsView/components/issues-table.test.tsx

@@ -86,6 +86,7 @@ describe('IssuesTableTest', () => {
 
     it('includes subtitle if specified', () => {
         const props = new TestPropsBuilder()
+            .setDeps(deps)
             .setGetProviderMock(getProviderMock)
             .setSubtitle(<>test subtitle text</>)
             .build();

src/tests/unit/tests/background/actions/card-selection-action-creator.test.ts

@@ -4,12 +4,15 @@ import {
     BaseActionPayload,
     CardSelectionPayload,
     RuleExpandCollapsePayload,
+    VisualizationTogglePayload,
 } from 'background/actions/action-payloads';
 import { CardSelectionActionCreator } from 'background/actions/card-selection-action-creator';
 import { CardSelectionActions } from 'background/actions/card-selection-actions';
+import { VisualizationActions } from 'background/actions/visualization-actions';
 import { TelemetryEventHandler } from 'background/telemetry/telemetry-event-handler';
 import * as TelemetryEvents from 'common/extension-telemetry-events';
 import { Messages } from 'common/messages';
+import { VisualizationType } from 'common/types/visualization-type';
 import { MockInterpreter } from 'tests/unit/tests/background/global-action-creators/mock-interpreter';
 import { IMock, Mock, Times } from 'typemoq';
 
@@ -19,10 +22,12 @@ describe('CardSelectionActionCreator', () => {
     const tabId = -2;
     let telemetryEventHandlerMock: IMock<TelemetryEventHandler>;
     let interpreterMock: MockInterpreter;
+    let visualizationActionsMock: IMock<VisualizationActions>;
 
     beforeEach(() => {
         telemetryEventHandlerMock = Mock.ofType<TelemetryEventHandler>();
         interpreterMock = new MockInterpreter();
+        visualizationActionsMock = createVisualizationActionsMock();
     });
 
     it('handles card selection toggle', async () => {
@@ -31,7 +36,7 @@ describe('CardSelectionActionCreator', () => {
             ruleId: 'test-rule-id',
         };
         const toggleCardSelectionMock = createAsyncActionMock(payload);
-        const actionsMock = createActionsMock(
+        const actionsMock = createCardSelectionActionsMock(
             'toggleCardSelection',
             toggleCardSelectionMock.object,
         );
@@ -39,6 +44,7 @@ describe('CardSelectionActionCreator', () => {
         const testSubject = new CardSelectionActionCreator(
             interpreterMock.object,
             actionsMock.object,
+            visualizationActionsMock.object,
             telemetryEventHandlerMock.object,
         );
 
@@ -62,7 +68,7 @@ describe('CardSelectionActionCreator', () => {
             ruleId: 'test-rule-id',
         };
         const ruleExpansionToggleMock = createAsyncActionMock(payload);
-        const actionsMock = createActionsMock(
+        const actionsMock = createCardSelectionActionsMock(
             'toggleRuleExpandCollapse',
             ruleExpansionToggleMock.object,
         );
@@ -70,6 +76,7 @@ describe('CardSelectionActionCreator', () => {
         const testSubject = new CardSelectionActionCreator(
             interpreterMock.object,
             actionsMock.object,
+            visualizationActionsMock.object,
             telemetryEventHandlerMock.object,
         );
 
@@ -89,13 +96,23 @@ describe('CardSelectionActionCreator', () => {
     });
 
     test('onToggleVisualHelper', async () => {
-        const payloadStub: BaseActionPayload = {};
+        const payloadStub: VisualizationTogglePayload = {
+            test: VisualizationType.NeedsReview,
+            enabled: false,
+            telemetry: {
+                enabled: false,
+            } as TelemetryEvents.ToggleTelemetryData,
+        };
         const toggleVisualHelperMock = createAsyncActionMock(null);
-        const actionsMock = createActionsMock('toggleVisualHelper', toggleVisualHelperMock.object);
+        const actionsMock = createCardSelectionActionsMock(
+            'toggleVisualHelper',
+            toggleVisualHelperMock.object,
+        );
 
         const testSubject = new CardSelectionActionCreator(
             interpreterMock.object,
             actionsMock.object,
+            visualizationActionsMock.object,
             telemetryEventHandlerMock.object,
         );
 
@@ -112,12 +129,22 @@ describe('CardSelectionActionCreator', () => {
             handler => handler.publishTelemetry(TelemetryEvents.VISUAL_HELPER_TOGGLED, payloadStub),
             Times.once(),
         );
+        visualizationActionsMock.verify(actions => actions['enableVisualization'], Times.once());
+
+        payloadStub.enabled = true;
+        payloadStub.telemetry.enabled = true;
+        await interpreterMock.simulateMessage(
+            Messages.CardSelection.ToggleVisualHelper,
+            payloadStub,
+            tabId,
+        );
+        visualizationActionsMock.verify(actions => actions['disableVisualization'], Times.once());
     });
 
     test('onCollapseAllRules', async () => {
         const payloadStub: BaseActionPayload = {};
         const collapseAllRulesActionMock = createAsyncActionMock(null);
-        const actionsMock = createActionsMock(
+        const actionsMock = createCardSelectionActionsMock(
             'collapseAllRules',
             collapseAllRulesActionMock.object,
         );
@@ -125,6 +152,7 @@ describe('CardSelectionActionCreator', () => {
         const testSubject = new CardSelectionActionCreator(
             interpreterMock.object,
             actionsMock.object,
+            visualizationActionsMock.object,
             telemetryEventHandlerMock.object,
         );
 
@@ -146,11 +174,15 @@ describe('CardSelectionActionCreator', () => {
     test('onExpandAllRules', async () => {
         const payloadStub: BaseActionPayload = {};
         const expandAllRulesActionMock = createAsyncActionMock(null);
-        const actionsMock = createActionsMock('expandAllRules', expandAllRulesActionMock.object);
+        const actionsMock = createCardSelectionActionsMock(
+            'expandAllRules',
+            expandAllRulesActionMock.object,
+        );
 
         const testSubject = new CardSelectionActionCreator(
             interpreterMock.object,
             actionsMock.object,
+            visualizationActionsMock.object,
             telemetryEventHandlerMock.object,
         );
 
@@ -169,7 +201,7 @@ describe('CardSelectionActionCreator', () => {
         );
     });
 
-    function createActionsMock<ActionName extends keyof CardSelectionActions>(
+    function createCardSelectionActionsMock<ActionName extends keyof CardSelectionActions>(
         actionName: ActionName,
         action: CardSelectionActions[ActionName],
     ): IMock<CardSelectionActions> {
@@ -177,4 +209,26 @@ describe('CardSelectionActionCreator', () => {
         actionsMock.setup(actions => actions[actionName]).returns(() => action);
         return actionsMock;
     }
+
+    function createVisualizationActionsMock<
+        ActionName extends keyof VisualizationActions,
+    >(): IMock<VisualizationActions> {
+        const actionsMock = Mock.ofType<VisualizationActions>();
+        const payload = {
+            test: VisualizationType.Issues,
+            enabled: true,
+            telemetry: {
+                enabled: true,
+            },
+        };
+        const enableVisualizationMock = createAsyncActionMock(payload);
+        const disableVisualizationMock = createAsyncActionMock(payload.test);
+        actionsMock
+            .setup(actions => actions['enableVisualization'])
+            .returns(() => enableVisualizationMock.object);
+        actionsMock
+            .setup(actions => actions['disableVisualization'])
+            .returns(() => disableVisualizationMock.object);
+        return actionsMock;
+    }
 });

src/tests/unit/tests/background/actions/needs-review-card-selection-action-creator.test.ts

@@ -4,12 +4,15 @@ import {
     BaseActionPayload,
     CardSelectionPayload,
     RuleExpandCollapsePayload,
+    VisualizationTogglePayload,
 } from 'background/actions/action-payloads';
 import { NeedsReviewCardSelectionActionCreator } from 'background/actions/needs-review-card-selection-action-creator';
 import { NeedsReviewCardSelectionActions } from 'background/actions/needs-review-card-selection-actions';
+import { VisualizationActions } from 'background/actions/visualization-actions';
 import { TelemetryEventHandler } from 'background/telemetry/telemetry-event-handler';
 import * as TelemetryEvents from 'common/extension-telemetry-events';
 import { Messages } from 'common/messages';
+import { VisualizationType } from 'common/types/visualization-type';
 import { MockInterpreter } from 'tests/unit/tests/background/global-action-creators/mock-interpreter';
 import { IMock, Mock, Times } from 'typemoq';
 
@@ -19,10 +22,12 @@ describe('NeedsReviewCardSelectionActionCreator', () => {
     const tabId = -2;
     let telemetryEventHandlerMock: IMock<TelemetryEventHandler>;
     let interpreterMock: MockInterpreter;
+    let visualizationActionsMock: IMock<VisualizationActions>;
 
     beforeEach(() => {
         telemetryEventHandlerMock = Mock.ofType<TelemetryEventHandler>();
         interpreterMock = new MockInterpreter();
+        visualizationActionsMock = createVisualizationActionsMock();
     });
 
     it('handles card selection toggle', async () => {
@@ -31,14 +36,15 @@ describe('NeedsReviewCardSelectionActionCreator', () => {
             ruleId: 'test-rule-id',
         };
         const toggleNeedsReviewCardSelectionMock = createAsyncActionMock(payload);
-        const actionsMock = createActionsMock(
+        const needsReviewActionsMock = createNeedsReviewActionsMock(
             'toggleCardSelection',
             toggleNeedsReviewCardSelectionMock.object,
         );
 
         const testSubject = new NeedsReviewCardSelectionActionCreator(
             interpreterMock.object,
-            actionsMock.object,
+            needsReviewActionsMock.object,
+            visualizationActionsMock.object,
             telemetryEventHandlerMock.object,
         );
 
@@ -62,7 +68,7 @@ describe('NeedsReviewCardSelectionActionCreator', () => {
             ruleId: 'test-rule-id',
         };
         const ruleExpansionToggleMock = createAsyncActionMock(payload);
-        const actionsMock = createActionsMock(
+        const actionsMock = createNeedsReviewActionsMock(
             'toggleRuleExpandCollapse',
             ruleExpansionToggleMock.object,
         );
@@ -70,6 +76,7 @@ describe('NeedsReviewCardSelectionActionCreator', () => {
         const testSubject = new NeedsReviewCardSelectionActionCreator(
             interpreterMock.object,
             actionsMock.object,
+            visualizationActionsMock.object,
             telemetryEventHandlerMock.object,
         );
 
@@ -89,13 +96,23 @@ describe('NeedsReviewCardSelectionActionCreator', () => {
     });
 
     test('onToggleVisualHelper', async () => {
-        const payloadStub: BaseActionPayload = {};
+        const payloadStub: VisualizationTogglePayload = {
+            test: VisualizationType.NeedsReview,
+            enabled: false,
+            telemetry: {
+                enabled: false,
+            } as TelemetryEvents.ToggleTelemetryData,
+        };
         const toggleVisualHelperMock = createAsyncActionMock(null);
-        const actionsMock = createActionsMock('toggleVisualHelper', toggleVisualHelperMock.object);
+        const actionsMock = createNeedsReviewActionsMock(
+            'toggleVisualHelper',
+            toggleVisualHelperMock.object,
+        );
 
         const testSubject = new NeedsReviewCardSelectionActionCreator(
             interpreterMock.object,
             actionsMock.object,
+            visualizationActionsMock.object,
             telemetryEventHandlerMock.object,
         );
 
@@ -112,12 +129,22 @@ describe('NeedsReviewCardSelectionActionCreator', () => {
             handler => handler.publishTelemetry(TelemetryEvents.VISUAL_HELPER_TOGGLED, payloadStub),
             Times.once(),
         );
+        visualizationActionsMock.verify(actions => actions['enableVisualization'], Times.once());
+
+        payloadStub.enabled = true;
+        payloadStub.telemetry.enabled = true;
+        await interpreterMock.simulateMessage(
+            Messages.NeedsReviewCardSelection.ToggleVisualHelper,
+            payloadStub,
+            tabId,
+        );
+        visualizationActionsMock.verify(actions => actions['disableVisualization'], Times.once());
     });
 
     test('onCollapseAllRules', async () => {
         const payloadStub: BaseActionPayload = {};
         const collapseAllRulesActionMock = createAsyncActionMock(null);
-        const actionsMock = createActionsMock(
+        const actionsMock = createNeedsReviewActionsMock(
             'collapseAllRules',
             collapseAllRulesActionMock.object,
         );
@@ -125,6 +152,7 @@ describe('NeedsReviewCardSelectionActionCreator', () => {
         const testSubject = new NeedsReviewCardSelectionActionCreator(
             interpreterMock.object,
             actionsMock.object,
+            visualizationActionsMock.object,
             telemetryEventHandlerMock.object,
         );
 
@@ -146,11 +174,15 @@ describe('NeedsReviewCardSelectionActionCreator', () => {
     test('onExpandAllRules', async () => {
         const payloadStub: BaseActionPayload = {};
         const expandAllRulesActionMock = createAsyncActionMock(null);
-        const actionsMock = createActionsMock('expandAllRules', expandAllRulesActionMock.object);
+        const actionsMock = createNeedsReviewActionsMock(
+            'expandAllRules',
+            expandAllRulesActionMock.object,
+        );
 
         const testSubject = new NeedsReviewCardSelectionActionCreator(
             interpreterMock.object,
             actionsMock.object,
+            visualizationActionsMock.object,
             telemetryEventHandlerMock.object,
         );
 
@@ -169,7 +201,7 @@ describe('NeedsReviewCardSelectionActionCreator', () => {
         );
     });
 
-    function createActionsMock<ActionName extends keyof NeedsReviewCardSelectionActions>(
+    function createNeedsReviewActionsMock<ActionName extends keyof NeedsReviewCardSelectionActions>(
         actionName: ActionName,
         action: NeedsReviewCardSelectionActions[ActionName],
     ): IMock<NeedsReviewCardSelectionActions> {
@@ -177,4 +209,26 @@ describe('NeedsReviewCardSelectionActionCreator', () => {
         actionsMock.setup(actions => actions[actionName]).returns(() => action);
         return actionsMock;
     }
+
+    function createVisualizationActionsMock<
+        ActionName extends keyof VisualizationActions,
+    >(): IMock<VisualizationActions> {
+        const actionsMock = Mock.ofType<VisualizationActions>();
+        const payload = {
+            test: VisualizationType.NeedsReview,
+            enabled: true,
+            telemetry: {
+                enabled: true,
+            },
+        };
+        const enableVisualizationMock = createAsyncActionMock(payload);
+        const disableVisualizationMock = createAsyncActionMock(payload.test);
+        actionsMock
+            .setup(actions => actions['enableVisualization'])
+            .returns(() => enableVisualizationMock.object);
+        actionsMock
+            .setup(actions => actions['disableVisualization'])
+            .returns(() => disableVisualizationMock.object);
+        return actionsMock;
+    }
 });

src/tests/unit/tests/common/components/cards/visual-helper-toggle.test.tsx

@@ -40,7 +40,7 @@ describe('VisualHelperToggle', () => {
 
     it('fires toggleVisualHelper when toggled', async () => {
         useOriginalReactElements('@fluentui/react', ['Toggle']);
-        mockCardSelectionMessageCreator.setup(m => m.toggleVisualHelper(It.isAny()));
+        mockCardSelectionMessageCreator.setup(m => m.toggleVisualHelper(It.isAny(), It.isAny()));
 
         const renderResult = render(
             <VisualHelperToggle

src/tests/unit/tests/common/message-creators/card-selection-message-creator.test.ts

@@ -4,13 +4,19 @@ import {
     BaseActionPayload,
     CardSelectionPayload,
     RuleExpandCollapsePayload,
+    VisualizationTogglePayload,
 } from 'background/actions/action-payloads';
-import { BaseTelemetryData, TelemetryEventSource } from 'common/extension-telemetry-events';
+import {
+    BaseTelemetryData,
+    TelemetryEventSource,
+    ToggleTelemetryData,
+} from 'common/extension-telemetry-events';
 import { Message } from 'common/message';
 import { AutomatedChecksCardSelectionMessageCreator } from 'common/message-creators/automated-checks-card-selection-message-creator';
 import { ActionMessageDispatcher } from 'common/message-creators/types/dispatcher';
 import { Messages } from 'common/messages';
 import { TelemetryDataFactory } from 'common/telemetry-data-factory';
+import { VisualizationType } from 'common/types/visualization-type';
 import { IMock, Mock, Times } from 'typemoq';
 
 describe('Card Selection Message Creator', () => {
@@ -117,8 +123,12 @@ describe('Card Selection Message Creator', () => {
     });
 
     test('toggleVisualHelper', () => {
-        const payload: BaseActionPayload = {
-            telemetry: telemetryStub,
+        const payload: VisualizationTogglePayload = {
+            telemetry: {
+                enabled: true,
+            } as ToggleTelemetryData,
+            test: VisualizationType.Issues,
+            enabled: true,
         };
 
         const expectedMessage: Message = {
@@ -130,7 +140,7 @@ describe('Card Selection Message Creator', () => {
             .setup(tdfm => tdfm.withTriggeredByAndSource(eventStub, sourceStub))
             .returns(() => telemetryStub);
 
-        testSubject.toggleVisualHelper(eventStub);
+        testSubject.toggleVisualHelper(eventStub, true);
 
         dispatcherMock.verify(dm => dm.dispatchMessage(expectedMessage), Times.once());
     });

src/tests/unit/tests/common/message-creators/needs-review-card-selection-message-creator.test.ts

@@ -4,13 +4,19 @@ import {
     BaseActionPayload,
     CardSelectionPayload,
     RuleExpandCollapsePayload,
+    VisualizationTogglePayload,
 } from 'background/actions/action-payloads';
-import { BaseTelemetryData, TelemetryEventSource } from 'common/extension-telemetry-events';
+import {
+    BaseTelemetryData,
+    TelemetryEventSource,
+    ToggleTelemetryData,
+} from 'common/extension-telemetry-events';
 import { Message } from 'common/message';
 import { NeedsReviewCardSelectionMessageCreator } from 'common/message-creators/needs-review-card-selection-message-creator';
 import { ActionMessageDispatcher } from 'common/message-creators/types/dispatcher';
 import { Messages } from 'common/messages';
 import { TelemetryDataFactory } from 'common/telemetry-data-factory';
+import { VisualizationType } from 'common/types/visualization-type';
 import { IMock, Mock, Times } from 'typemoq';
 
 describe('Needs Review Card Selection Message Creator', () => {
@@ -117,8 +123,12 @@ describe('Needs Review Card Selection Message Creator', () => {
     });
 
     test('toggleVisualHelper', () => {
-        const payload: BaseActionPayload = {
-            telemetry: telemetryStub,
+        const payload: VisualizationTogglePayload = {
+            telemetry: {
+                enabled: true,
+            } as ToggleTelemetryData,
+            test: VisualizationType.NeedsReview,
+            enabled: true,
         };
 
         const expectedMessage: Message = {
@@ -130,7 +140,7 @@ describe('Needs Review Card Selection Message Creator', () => {
             .setup(tdfm => tdfm.withTriggeredByAndSource(eventStub, sourceStub))
             .returns(() => telemetryStub);
 
-        testSubject.toggleVisualHelper(eventStub);
+        testSubject.toggleVisualHelper(eventStub, true);
 
         dispatcherMock.verify(dm => dm.dispatchMessage(expectedMessage), Times.once());
     });