fix: Show user an "Assessment saved" dialog after they save the assessment

src/DetailsView/components/auto-detected-failures-dialog.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
-import { Checkbox, Dialog, DialogFooter, DialogType, PrimaryButton } from '@fluentui/react';
+import { Checkbox, Dialog, DialogFooter, DialogType, PrimaryButton, Stack } from '@fluentui/react';
 import { UserConfigMessageCreator } from 'common/message-creators/user-config-message-creator';
 import { UserConfigurationStoreData } from 'common/types/store-data/user-configuration-store';
 import { VisualizationScanResultData } from 'common/types/store-data/visualization-scan-result-data';
@@ -94,15 +94,27 @@ export class AutoDetectedFailuresDialog extends React.Component<
                     </ul>
                 </div>
                 <DialogFooter>
-                    <Checkbox
-                        label={"Don't show again"}
-                        onChange={this.disableAutoDetectedFailuresDialog}
-                        checked={this.state.isDisableBoxChecked}
-                    />
-                    <PrimaryButton
-                        onClick={this.dismissAutoDetectedFailuresDialog}
-                        text={'Got it'}
-                    />
+                    <Stack
+                        horizontal
+                        horizontalAlign="space-between"
+                        wrap
+                        verticalAlign="center"
+                        tokens={{ childrenGap: 6 }}
+                    >
+                        <Stack.Item grow disableShrink>
+                            <Checkbox
+                                label={"Don't show again"}
+                                onChange={this.disableAutoDetectedFailuresDialog}
+                                checked={this.state.isDisableBoxChecked}
+                            />
+                        </Stack.Item>
+                        <Stack.Item grow>
+                            <PrimaryButton
+                                onClick={this.dismissAutoDetectedFailuresDialog}
+                                text={'Got it'}
+                            />
+                        </Stack.Item>
+                    </Stack>
                 </DialogFooter>
             </Dialog>
         );

src/DetailsView/components/details-view-command-bar.tsx

@@ -6,6 +6,7 @@ import { NewTabLinkWithTooltip } from 'common/components/new-tab-link-with-toolt
 import { VisualizationConfigurationFactory } from 'common/configs/visualization-configuration-factory';
 import { CardsViewModel } from 'common/types/store-data/card-view-model';
 import { ScanMetadata } from 'common/types/store-data/unified-data-interface';
+import { UserConfigurationStoreData } from 'common/types/store-data/user-configuration-store';
 import { TabStopRequirementState } from 'common/types/store-data/visualization-scan-result-data';
 import { VisualizationStoreData } from 'common/types/store-data/visualization-store-data';
 import { VersionedAssessmentData } from 'common/types/versioned-assessment-data';
@@ -91,6 +92,7 @@ export interface DetailsViewCommandBarProps {
     visualizationConfigurationFactory: VisualizationConfigurationFactory;
     selectedTest: VisualizationType;
     tabStopRequirementData: TabStopRequirementState;
+    userConfigurationStoreData: UserConfigurationStoreData;
 }
 export class DetailsViewCommandBar extends React.Component<
     DetailsViewCommandBarProps,

src/DetailsView/components/details-view-overlay/settings-panel/settings/extension-settings-provider.ts

@@ -2,6 +2,7 @@
 // Licensed under the MIT License.
 import { title } from 'content/strings/application';
 import { AutoDetectedFailuresDialogSettings } from 'DetailsView/components/details-view-overlay/settings-panel/settings/auto-detected-failures-dialog/auto-detected-failures-dialog-settings';
+import { SaveAssessmentDialogSettings } from 'DetailsView/components/details-view-overlay/settings-panel/settings/save-assessment-dialog/save-assessment-dialog-settings';
 import { createTelemetrySettings } from 'DetailsView/components/details-view-overlay/settings-panel/settings/telemetry/telemetry-settings';
 import { HighContrastSettings } from './high-contrast/high-contrast-settings';
 import { IssueFilingSettings } from './issue-filing/issue-filing-settings';
@@ -11,5 +12,6 @@ export const ExtensionSettingsProvider = createSettingsProvider([
     createTelemetrySettings(title),
     HighContrastSettings,
     AutoDetectedFailuresDialogSettings,
+    SaveAssessmentDialogSettings,
     IssueFilingSettings,
 ]);

src/DetailsView/components/details-view-overlay/settings-panel/settings/save-assessment-dialog/save-assessment-dialog-settings.tsx

@@ -0,0 +1,23 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+import { NamedFC } from 'common/react/named-fc';
+import * as React from 'react';
+import { GenericToggle } from '../../../../generic-toggle';
+import { SettingsProps } from '../settings-props';
+
+export const SaveAssessmentDialogSettings = NamedFC<SettingsProps>(
+    'SaveAssessmentDialog',
+    props => {
+        return (
+            <GenericToggle
+                enabled={props.userConfigurationStoreState.showSaveAssessmentDialog}
+                id="enable-save-assessment-dialog"
+                name="Enable the save assessment dialog"
+                description="Show the save assessment dialog."
+                onClick={(id, state) =>
+                    props.deps.userConfigMessageCreator.setSaveAssessmentDialogState(state)
+                }
+            />
+        );
+    },
+);

src/DetailsView/components/save-assessment-button-factory.tsx

@@ -4,6 +4,7 @@ import { AssessmentDataFormatter } from 'common/assessment-data-formatter';
 import { FileNameBuilder } from 'common/filename-builder';
 import { AssessmentStoreData } from 'common/types/store-data/assessment-result-data';
 import { TabStoreData } from 'common/types/store-data/tab-store-data';
+import { UserConfigurationStoreData } from 'common/types/store-data/user-configuration-store';
 import {
     SaveAssessmentButton,
     SaveAssessmentButtonDeps,
@@ -22,6 +23,7 @@ export type SaveAssessmentButtonFactoryProps = {
     deps: SaveAssessmentButtonFactoryDeps;
     assessmentStoreData: AssessmentStoreData;
     tabStoreData: TabStoreData;
+    userConfigurationStoreData: UserConfigurationStoreData;
 };
 
 export function getSaveButtonForAssessment(props: SaveAssessmentButtonFactoryProps): JSX.Element {

src/DetailsView/components/save-assessment-button.tsx

@@ -1,29 +1,93 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
+import { Checkbox, Dialog, DialogFooter, DialogType, PrimaryButton, Stack } from '@fluentui/react';
+import { useBoolean } from '@fluentui/react-hooks';
 import { InsightsCommandButton } from 'common/components/controls/insights-command-button';
+import { UserConfigMessageCreator } from 'common/message-creators/user-config-message-creator';
+import { NamedFC } from 'common/react/named-fc';
+import { UserConfigurationStoreData } from 'common/types/store-data/user-configuration-store';
 import { DetailsViewActionMessageCreator } from 'DetailsView/actions/details-view-action-message-creator';
+import styles from 'DetailsView/components/common-dialog-styles.scss';
 import * as React from 'react';
 
 export interface SaveAssessmentButtonDeps {
     detailsViewActionMessageCreator: DetailsViewActionMessageCreator;
+    userConfigMessageCreator: UserConfigMessageCreator;
 }
 export interface SaveAssessmentButtonProps {
     download: string;
     href: string;
     deps: SaveAssessmentButtonDeps;
+    userConfigurationStoreData: UserConfigurationStoreData;
 }
 
-export class SaveAssessmentButton extends React.Component<SaveAssessmentButtonProps> {
-    public render(): JSX.Element {
+export const SaveAssessmentButton = NamedFC<SaveAssessmentButtonProps>(
+    'SaveAssessmentButton',
+    props => {
+        const [dialogHidden, { setTrue: hideDialog, setFalse: showDialog }] = useBoolean(true);
+
+        function handleSaveAssessmentClick(event: React.MouseEvent<any>) {
+            props.deps.detailsViewActionMessageCreator.saveAssessment(event);
+            if (props.userConfigurationStoreData.showSaveAssessmentDialog) {
+                showDialog();
+            }
+        }
+
+        function handleDontShowAgainClick(event: React.MouseEvent<any>, checked?: boolean) {
+            if (checked === undefined) return;
+            props.deps.userConfigMessageCreator.setSaveAssessmentDialogState(!checked);
+        }
+
         return (
-            <InsightsCommandButton
-                iconProps={{ iconName: 'Save' }}
-                download={this.props.download}
-                href={this.props.href}
-                onClick={this.props.deps.detailsViewActionMessageCreator.saveAssessment}
-            >
-                Save assessment
-            </InsightsCommandButton>
+            <>
+                <InsightsCommandButton
+                    iconProps={{ iconName: 'Save' }}
+                    download={props.download}
+                    href={props.href}
+                    onClick={handleSaveAssessmentClick}
+                >
+                    Save assessment
+                </InsightsCommandButton>
+                <Dialog
+                    hidden={dialogHidden}
+                    onDismiss={hideDialog}
+                    dialogContentProps={{
+                        type: DialogType.normal,
+                        title: 'Assessment saved',
+                    }}
+                    modalProps={{
+                        isBlocking: false,
+                        containerClassName: styles.insightsDialogMainOverride,
+                    }}
+                >
+                    <div className={styles.dialogBody}>
+                        To load this assessment, use the <strong>Load assessment</strong> button in
+                        the Accessibility Insights Assessment command bar.
+                    </div>
+                    <DialogFooter>
+                        <Stack
+                            horizontal
+                            horizontalAlign="space-between"
+                            wrap
+                            verticalAlign="center"
+                            tokens={{ childrenGap: 6 }}
+                        >
+                            <Stack.Item grow disableShrink>
+                                <Checkbox
+                                    value={
+                                        !props.userConfigurationStoreData.showSaveAssessmentDialog
+                                    }
+                                    label="Don't show again"
+                                    onChange={handleDontShowAgainClick}
+                                />
+                            </Stack.Item>
+                            <Stack.Item grow>
+                                <PrimaryButton onClick={hideDialog} text="Got it" />
+                            </Stack.Item>
+                        </Stack>
+                    </DialogFooter>
+                </Dialog>
+            </>
         );
-    }
-}
+    },
+);

src/background/actions/action-payloads.ts

@@ -256,3 +256,7 @@ export interface SaveWindowBoundsPayload extends BaseActionPayload {
 export interface AutoDetectedFailuresDialogStatePayload extends BaseActionPayload {
     enabled: boolean;
 }
+
+export interface SaveAssessmentDialogStatePayload extends BaseActionPayload {
+    enabled: boolean;
+}

src/background/actions/user-configuration-actions.ts

@@ -3,6 +3,7 @@
 import { AsyncAction } from 'common/flux/async-action';
 import {
     AutoDetectedFailuresDialogStatePayload,
+    SaveAssessmentDialogStatePayload,
     SaveIssueFilingSettingsPayload,
     SaveWindowBoundsPayload,
     SetHighContrastModePayload,
@@ -23,4 +24,6 @@ export class UserConfigurationActions {
     public readonly saveWindowBounds = new AsyncAction<SaveWindowBoundsPayload>();
     public readonly setAutoDetectedFailuresDialogState =
         new AsyncAction<AutoDetectedFailuresDialogStatePayload>();
+    public readonly setSaveAssessmentDialogState =
+        new AsyncAction<SaveAssessmentDialogStatePayload>();
 }

src/background/global-action-creators/registrar/register-user-configuration-message-callbacks.ts

@@ -50,4 +50,8 @@ export const registerUserConfigurationMessageCallback = (
         Messages.UserConfig.SetAutoDetectedFailuresDialogState,
         userConfigurationActionCreator.setAutoDetectedFailuresDialogState,
     );
+    interpreter.registerTypeToPayloadCallback(
+        Messages.UserConfig.SetSaveAssessmentDialogState,
+        userConfigurationActionCreator.setSaveAssessmentDialogState,
+    );
 };

src/background/global-action-creators/user-configuration-action-creator.ts

@@ -5,6 +5,7 @@ import { TelemetryEventHandler } from 'background/telemetry/telemetry-event-hand
 import * as TelemetryEvents from '../../common/extension-telemetry-events';
 import {
     AutoDetectedFailuresDialogStatePayload,
+    SaveAssessmentDialogStatePayload,
     SaveIssueFilingSettingsPayload,
     SaveWindowBoundsPayload,
     SetHighContrastModePayload,
@@ -61,4 +62,14 @@ export class UserConfigurationActionCreator {
             payload,
         );
     };
+
+    public setSaveAssessmentDialogState = async (
+        payload: SaveAssessmentDialogStatePayload,
+    ): Promise<void> => {
+        await this.userConfigActions.setSaveAssessmentDialogState.invoke(payload);
+        this.telemetryEventHandler.publishTelemetry(
+            TelemetryEvents.SET_SAVE_ASSESSMENT_DIALOG_STATE,
+            payload,
+        );
+    };
 }

src/background/stores/global/user-configuration-store.ts

@@ -8,6 +8,7 @@ import { StoreNames } from '../../../common/stores/store-names';
 import { UserConfigurationStoreData } from '../../../common/types/store-data/user-configuration-store';
 import {
     AutoDetectedFailuresDialogStatePayload,
+    SaveAssessmentDialogStatePayload,
     SaveIssueFilingSettingsPayload,
     SaveWindowBoundsPayload,
     SetHighContrastModePayload,
@@ -30,6 +31,7 @@ export class UserConfigurationStore extends PersistentStore<UserConfigurationSto
         lastWindowBounds: null,
         lastWindowState: null,
         showAutoDetectedFailuresDialog: true,
+        showSaveAssessmentDialog: true,
     };
 
     constructor(
@@ -81,6 +83,9 @@ export class UserConfigurationStore extends PersistentStore<UserConfigurationSto
         this.userConfigActions.setAutoDetectedFailuresDialogState.addListener(
             this.onSetAutoDetectedFailuresDialogState,
         );
+        this.userConfigActions.setSaveAssessmentDialogState.addListener(
+            this.onSetSaveAssessmentDialogState,
+        );
     }
 
     private onSetAdbLocation = async (location: string): Promise<void> => {
@@ -159,4 +164,11 @@ export class UserConfigurationStore extends PersistentStore<UserConfigurationSto
 
         this.emitChanged();
     };
+
+    private onSetSaveAssessmentDialogState = async (
+        payload: SaveAssessmentDialogStatePayload,
+    ): Promise<void> => {
+        this.state.showSaveAssessmentDialog = payload.enabled;
+        this.emitChanged();
+    };
 }

src/common/extension-telemetry-events.ts

@@ -80,6 +80,7 @@ export const LEFT_NAV_PANEL_EXPANDED: string = 'leftNavPanelExpanded';
 export const NEEDS_REVIEW_TOGGLE: string = 'NeedsReviewToggled';
 export const NAVIGATE_TO_NEW_CARDS_VIEW: string = 'NavigateToNewCardsView';
 export const SET_AUTO_DETECTED_FAILURES_DIALOG_STATE: string = 'setAutoDetectedFailuresDialogState';
+export const SET_SAVE_ASSESSMENT_DIALOG_STATE: string = 'setSaveAssessmentDialogState';
 export const UNHANDLED_ERROR: string = 'unhandledError';
 export const ACCESSIBLENAMES_TOGGLE: string = 'accessibleNamesToggled';
 
@@ -285,6 +286,10 @@ export type AutoDetectedFailuresDialogStateTelemetryData = {
     enabled: boolean;
 };
 
+export type ShowAssessmentDialogStateTelemetryData = {
+    enabled: boolean;
+};
+
 export enum ErrorType {
     WindowError = 'WindowError',
     UnhandledRejection = 'UnhandledRejection',
@@ -327,4 +332,5 @@ export type TelemetryData =
     | SetAllUrlsPermissionTelemetryData
     | TabStopsAutomatedResultsTelemetryData
     | AutoDetectedFailuresDialogStateTelemetryData
+    | ShowAssessmentDialogStateTelemetryData
     | UnhandledErrorTelemetryData;

src/common/message-creators/user-config-message-creator.ts

@@ -2,6 +2,7 @@
 // Licensed under the MIT License.
 import {
     AutoDetectedFailuresDialogStatePayload,
+    SaveAssessmentDialogStatePayload,
     SaveIssueFilingSettingsPayload,
     SaveWindowBoundsPayload,
     SetAdbLocationPayload,
@@ -103,4 +104,16 @@ export class UserConfigMessageCreator {
             payload,
         });
     }
+
+    public setSaveAssessmentDialogState(showDialog: boolean): void {
+        const telemetry = this.telemetryFactory.forSetShowAssessmentDialogState(showDialog);
+        const payload: SaveAssessmentDialogStatePayload = {
+            enabled: showDialog,
+            telemetry,
+        };
+        this.dispatcher.dispatchMessage({
+            messageType: Messages.UserConfig.SetSaveAssessmentDialogState,
+            payload,
+        });
+    }
 }

src/common/messages.ts

@@ -69,6 +69,7 @@ export const Messages = {
         SetAdbLocationConfig: `${messagePrefix}/userConfig/setAdbLocationConfig`,
         SaveWindowBounds: `${messagePrefix}/userConfig/saveWindowBounds`,
         SetAutoDetectedFailuresDialogState: `${messagePrefix}/userConfig/setAutoDetectedFailuresDialogState`,
+        SetSaveAssessmentDialogState: `${messagePrefix}/userConfig/setSaveAssessmentDialogState`,
     },
 
     Popup: {

src/common/telemetry-data-factory.ts

@@ -30,6 +30,7 @@ import {
     SetAllUrlsPermissionTelemetryData,
     SettingsOpenSourceItem,
     SettingsOpenTelemetryData,
+    ShowAssessmentDialogStateTelemetryData,
     TabStopAutomatedFailuresInstanceCount,
     TabStopRequirementInstanceCount,
     TabStopsAutomatedResultsTelemetryData,
@@ -510,4 +511,16 @@ export class TelemetryDataFactory {
             enabled,
         };
     }
+
+    public forSetShowAssessmentDialogState(
+        enabled: boolean,
+    ): ShowAssessmentDialogStateTelemetryData | undefined {
+        if (enabled === undefined) {
+            return undefined;
+        }
+
+        return {
+            enabled,
+        };
+    }
 }