initial changes

src/DetailsView/components/command-bar-buttons-menu.tsx

@@ -15,6 +15,7 @@
 import { StartOverMenuItem } from 'DetailsView/components/start-over-component-factory';
 import * as React from 'react';
 import styles from './command-bar-buttons-menu.scss';
+import { ReportExportButton } from 'DetailsView/components/report-export-button';
 
 export type CommandBarButtonsMenuProps = {
     renderExportReportButton: () => JSX.Element | null;
@@ -34,11 +35,12 @@
         const onOpenChange: MenuProps['onOpenChange'] = (e, data) => setOpen(data.open);
         const exportButton = props.renderExportReportButton();
         const overflowItems: any[] = [];
-
+        console.log('commandbarbuttonsmenu---->', props)
         if (exportButton != null) {
             overflowItems.push({
                 key: 'export report',
                 children: <>{exportButton}</>,
+                // children: <ReportExportButton {...props} />
             });
         }
         if (props.saveAssessmentButton && props.loadAssessmentButton) {

src/DetailsView/components/command-button-styles.tsx

@@ -10,12 +10,15 @@ export const useCommandButtonStyle = makeStyles({
         textDecoration: 'none !important',
 
         ':focus': {
-            border: `1px solid ${tokens.colorStrokeFocus2}`,
+            // border: `1px solid ${tokens.colorStrokeFocus2}`,
+            // border: 'inherit'
         },
 
         '&:hover': {
             background: 'none !important',
             color: tokens.colorNeutralForeground2BrandHover,
+            //border: 'unset !important',
+
             '& > span': {
                 '& >svg': {
                     color: tokens.colorNeutralForeground2BrandHover,

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

@@ -55,6 +55,7 @@ import { ReportGenerator } from 'reports/report-generator';
 import { AssessmentStoreData } from '../../common/types/store-data/assessment-result-data';
 import { TabStoreData } from '../../common/types/store-data/tab-store-data';
 import { DetailsRightPanelConfiguration } from './details-view-right-panel';
+import { SaveAssessmentDialog } from 'DetailsView/components/save-assessment-dialog';
 
 export type DetailsViewCommandBarDeps = {
     getCurrentDate: () => Date;
@@ -77,6 +78,7 @@ export type DetailsViewCommandBarState = {
     isReportExportDialogOpen: boolean;
     loadedAssessmentData: VersionedAssessmentData;
     startOverDialogState: StartOverDialogState;
+    isSaveAssessmentDialogOpen: boolean;
 };
 
 export type ReportExportDialogFactory = (
@@ -124,11 +126,22 @@ export class DetailsViewCommandBar extends React.Component<
             isInvalidLoadAssessmentDialogOpen: false,
             isLoadAssessmentDialogOpen: false,
             isReportExportDialogOpen: false,
+            isSaveAssessmentDialogOpen: false,
             loadedAssessmentData: {} as VersionedAssessmentData,
             startOverDialogState: 'none',
         };
     }
 
+    private renderSaveAssessmentDialog = (): JSX.Element | null => {
+        return (
+            <SaveAssessmentDialog
+                {...this.props}
+                isOpen={this.state.isSaveAssessmentDialogOpen}
+                onClose={this.toggleSaveAssessmentDialog}
+            ></SaveAssessmentDialog>
+        );
+    };
+
     public render(): JSX.Element | null {
         if (this.props.tabStoreData.isClosed) {
             return null;
@@ -143,6 +156,7 @@ export class DetailsViewCommandBar extends React.Component<
                 {this.renderLoadAssessmentDialog()}
                 {this.renderStartOverDialog()}
                 {this.renderTransferToAssessmentDialog()}
+                {this.renderSaveAssessmentDialog()}
             </div>
         );
     }
@@ -216,6 +230,7 @@ export class DetailsViewCommandBar extends React.Component<
                     this.startOverDialogCloseFocus = ref ?? undefined;
                     this.transferToAssessmentDialogCloseFocus = ref ?? undefined;
                 }}
+
             />
         );
     }
@@ -247,6 +262,7 @@ export class DetailsViewCommandBar extends React.Component<
             <ReportExportButton
                 showReportExportDialog={this.showReportExportDialog}
                 buttonRef={ref => (this.exportDialogCloseFocus = ref ?? undefined)}
+                isNarrowMode={this.props.narrowModeStatus.isCommandBarCollapsed}
             />
         );
     };
@@ -260,9 +276,24 @@ export class DetailsViewCommandBar extends React.Component<
         });
     }
 
+    private toggleSaveAssessmentDialog = () => {
+        this.setState(prevState => ({
+            isSaveAssessmentDialogOpen: !prevState.isSaveAssessmentDialogOpen,
+        }));
+    };
+
+    private handleSaveAssessmentButtonClick = (event: React.MouseEvent<any>) => {
+        this.props.deps.getAssessmentActionMessageCreator().saveAssessment(event);
+        if (this.props.userConfigurationStoreData.showSaveAssessmentDialog) {
+            this.toggleSaveAssessmentDialog();
+        }
+    };
+
     private renderSaveAssessmentButton = (): JSX.Element | null => {
         return this.props.switcherNavConfiguration.SaveAssessmentButton({
             ...this.props,
+            ...{ isNarrowMode: this.props.narrowModeStatus.isCommandBarCollapsed },
+            handleSaveAssesmentButtonClick: this.handleSaveAssessmentButtonClick,
         });
     };
 
@@ -288,6 +319,7 @@ export class DetailsViewCommandBar extends React.Component<
     private renderLoadAssessmentButton = (): JSX.Element | null => {
         return this.props.switcherNavConfiguration.LoadAssessmentButton({
             ...this.props,
+            isNarrowMode: this.props.narrowModeStatus.isCommandBarCollapsed,
             handleLoadAssessmentButtonClick: this.handleLoadAssessmentButtonClick,
         });
     };
@@ -384,6 +416,7 @@ export class DetailsViewCommandBar extends React.Component<
             ...this.props,
             openDialog: this.showStartOverDialog,
             buttonRef: ref => (this.startOverDialogCloseFocus = ref ?? undefined),
+            isNarrowMode: this.props.narrowModeStatus.isCommandBarCollapsed,
         };
     };
 

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

@@ -23,6 +23,7 @@ export interface LoadAssessmentButtonProps {
     tabStoreData: TabStoreData;
     assessmentStoreData: AssessmentStoreData;
     handleLoadAssessmentButtonClick: () => void;
+    isNarrowMode?: boolean
 }
 
 export const loadAssessmentButtonAutomationId = 'load-assessment-button';
@@ -39,6 +40,7 @@ export const LoadAssessmentButton = NamedFC<LoadAssessmentButtonProps>(
                 }}
                 onClick={props.handleLoadAssessmentButtonClick}
                 className={loadButtonStyles.assessmentButton}
+                {...props}
             >
                 Load assessment
             </InsightsCommandButton>

src/DetailsView/components/report-export-button.tsx

@@ -10,13 +10,14 @@ import * as React from 'react';
 export interface ReportExportButtonProps {
     showReportExportDialog: () => void;
     buttonRef?: MyFunctionType;
+    isNarrowMode?: boolean;
 }
 
 export const reportExportButtonAutomationId = 'report-export-button';
 
 export const ReportExportButton = NamedFC<ReportExportButtonProps>('ReportExportButton', props => {
     const exportButtonStyles = useCommandButtonStyle();
-
+    console.log('props in report export button', props)
     return (
         <InsightsCommandButton
             insightsCommandButtonIconProps={{

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

@@ -24,6 +24,8 @@ export type SaveAssessmentButtonFactoryProps = {
     assessmentStoreData: AssessmentStoreData;
     tabStoreData: TabStoreData;
     userConfigurationStoreData: UserConfigurationStoreData;
+    isNarrowMode?: boolean;
+    handleSaveAssesmentButtonClick: (event: React.MouseEvent<any>) => void;
 };
 
 export function getSaveButtonForAssessment(props: SaveAssessmentButtonFactoryProps): JSX.Element {

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

@@ -1,7 +1,7 @@
 // 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 { FluentUIV9Icon } from 'common/icons/fluentui-v9-icons';
 import { UserConfigMessageCreator } from 'common/message-creators/user-config-message-creator';
@@ -9,7 +9,7 @@
 import { UserConfigurationStoreData } from 'common/types/store-data/user-configuration-store';
 import { AssessmentActionMessageCreator } from 'DetailsView/actions/assessment-action-message-creator';
 import { useCommandButtonStyle } from 'DetailsView/components/command-button-styles';
 import styles from 'DetailsView/components/common-dialog-styles.scss';
 
 import * as React from 'react';
 
@@ -22,24 +22,25 @@
     href: string;
     deps: SaveAssessmentButtonDeps;
     userConfigurationStoreData: UserConfigurationStoreData;
+    handleSaveAssesmentButtonClick: (event: React.MouseEvent<any>) => void;
 }
 
 export const SaveAssessmentButton = NamedFC<SaveAssessmentButtonProps>(
     'SaveAssessmentButton',
     props => {
-        const [dialogHidden, { setTrue: hideDialog, setFalse: showDialog }] = useBoolean(true);
+        // const [dialogHidden, { setTrue: hideDialog, setFalse: showDialog }] = useBoolean(true);
         const saveAssessmentStyles = useCommandButtonStyle();
-        const handleSaveAssessmentClick = (event: React.MouseEvent<any>) => {
-            props.deps.getAssessmentActionMessageCreator().saveAssessment(event);
-            if (props.userConfigurationStoreData.showSaveAssessmentDialog) {
-                showDialog();
-            }
-        };
+        // const handleSaveAssessmentClick = (event: React.MouseEvent<any>) => {
+        //     props.deps.getAssessmentActionMessageCreator().saveAssessment(event);
+        //     if (props.userConfigurationStoreData.showSaveAssessmentDialog) {
+        //         showDialog();
+        //     }
+        // };
 
-        function handleDontShowAgainClick(event: React.MouseEvent<any>, checked?: boolean) {
-            if (checked === undefined) return;
-            props.deps.userConfigMessageCreator.setSaveAssessmentDialogState(!checked);
-        }
+        // function handleDontShowAgainClick(event: React.MouseEvent<any>, checked?: boolean) {
+        //     if (checked === undefined) return;
+        //     props.deps.userConfigMessageCreator.setSaveAssessmentDialogState(!checked);
+        // }
 
         return (
             <>
@@ -48,15 +49,17 @@
                     className={saveAssessmentStyles?.assessmentButton}
                     download={props.download}
                     href={props.href}
-                    onClick={handleSaveAssessmentClick}
+                    // onClick={handleSaveAssessmentClick}
+                    onClick={props.handleSaveAssesmentButtonClick}
                     insightsCommandButtonIconProps={{
                         icon: <FluentUIV9Icon iconName="SaveRegular" />,
                     }}
+                    {...props}
                 >
                     Save assessment
                 </InsightsCommandButton>
 
-                <Dialog
+                {/* <Dialog
                     hidden={dialogHidden}
                     onDismiss={hideDialog}
                     dialogContentProps={{
@@ -94,7 +97,7 @@
                             </Stack.Item>
                         </Stack>
                     </DialogFooter>
-                </Dialog>
+                </Dialog> */}
             </>
         );
     },

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

@@ -0,0 +1,87 @@
+// 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 { 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 { AssessmentActionMessageCreator } from 'DetailsView/actions/assessment-action-message-creator';
+import styles from 'DetailsView/components/common-dialog-styles.scss';
+import * as React from 'react';
+
+export type SaveAssessmentDialogDeps = {
+    getAssessmentActionMessageCreator: () => AssessmentActionMessageCreator;
+    userConfigMessageCreator: UserConfigMessageCreator;
+};
+
+export const saveAssessmentDialogLoadButtonAutomationId = 'save-assessment-dialog-load-button';
+export interface SaveAssessmentDialogProps {
+    deps: SaveAssessmentDialogDeps;
+    isOpen: boolean;
+    onClose: () => void;
+    userConfigurationStoreData: UserConfigurationStoreData;
+}
+
+export const SaveAssessmentDialog = NamedFC<SaveAssessmentDialogProps>(
+    'SaveAssessmentDialog',
+    props => {
+        const [dialogHidden, { setTrue: hideDialog, setFalse: showDialog }] = useBoolean(true);
+
+        const handleSaveAssessmentClick = (event: React.MouseEvent<any>) => {
+            props.deps.getAssessmentActionMessageCreator().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 (
+            <>
+                <Dialog
+                    hidden={!props.isOpen}
+                    onDismiss={props.onClose}
+                    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
+                                    checked={
+                                        !props.userConfigurationStoreData.showSaveAssessmentDialog
+                                    }
+                                    label="Don't show again"
+                                    onChange={handleDontShowAgainClick}
+                                />
+                            </Stack.Item>
+                            <Stack.Item grow>
+                                <PrimaryButton onClick={props.onClose} text="Got it" />
+                            </Stack.Item>
+                        </Stack>
+                    </DialogFooter>
+                </Dialog>
+            </>
+        );
+    },
+);

src/common/components/controls/insights-command-button-style.tsx

@@ -7,6 +7,11 @@ export const useInsightsCommandButtonStyle = makeStyles({
     button: {
         fontWeight: tokens?.fontWeightRegular,
     },
+
+    menuItem: {
+        border: 'unset !important'
+    },
+
     buttonIcon: {
         //color: tokens?.colorCompoundBrandStrokeHover,
     },