From 8cfe86dafb5a9e1506a22bebd314d873f9c9dcb8 Mon Sep 17 00:00:00 2001 From: Rakesh Shivapooja Date: Fri, 9 Aug 2024 15:20:43 +0530 Subject: [PATCH] initial changes --- .../components/command-bar-buttons-menu.tsx | 4 +- .../components/command-button-styles.tsx | 5 +- .../components/details-view-command-bar.tsx | 33 +++++++ .../components/load-assessment-button.tsx | 2 + .../components/report-export-button.tsx | 3 +- .../save-assessment-button-factory.tsx | 2 + .../components/save-assessment-button.tsx | 31 ++++--- .../components/save-assessment-dialog.tsx | 87 +++++++++++++++++++ .../insights-command-button-style.tsx | 5 ++ .../controls/insights-command-button.tsx | 53 +++++++---- 10 files changed, 191 insertions(+), 34 deletions(-) create mode 100644 src/DetailsView/components/save-assessment-dialog.tsx diff --git a/src/DetailsView/components/command-bar-buttons-menu.tsx b/src/DetailsView/components/command-bar-buttons-menu.tsx index 831f4b81123..53072ca080f 100644 --- a/src/DetailsView/components/command-bar-buttons-menu.tsx +++ b/src/DetailsView/components/command-bar-buttons-menu.tsx @@ -15,6 +15,7 @@ import { MyFunctionType } from 'DetailsView/components/details-view-command-bar' 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 @@ export const CommandBarButtonsMenu = NamedFC( 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: }); } if (props.saveAssessmentButton && props.loadAssessmentButton) { diff --git a/src/DetailsView/components/command-button-styles.tsx b/src/DetailsView/components/command-button-styles.tsx index a9fe990b4ab..57888482691 100644 --- a/src/DetailsView/components/command-button-styles.tsx +++ b/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, diff --git a/src/DetailsView/components/details-view-command-bar.tsx b/src/DetailsView/components/details-view-command-bar.tsx index 7a93e4b7b65..e8d64947c4a 100644 --- a/src/DetailsView/components/details-view-command-bar.tsx +++ b/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 ( + + ); + }; + 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()} ); } @@ -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< (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) => { + 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, }; }; diff --git a/src/DetailsView/components/load-assessment-button.tsx b/src/DetailsView/components/load-assessment-button.tsx index 3c62eabd61c..d2647684482 100644 --- a/src/DetailsView/components/load-assessment-button.tsx +++ b/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( }} onClick={props.handleLoadAssessmentButtonClick} className={loadButtonStyles.assessmentButton} + {...props} > Load assessment diff --git a/src/DetailsView/components/report-export-button.tsx b/src/DetailsView/components/report-export-button.tsx index 5633722ccf4..04f93c6b800 100644 --- a/src/DetailsView/components/report-export-button.tsx +++ b/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('ReportExportButton', props => { const exportButtonStyles = useCommandButtonStyle(); - + console.log('props in report export button', props) return ( ) => void; }; export function getSaveButtonForAssessment(props: SaveAssessmentButtonFactoryProps): JSX.Element { diff --git a/src/DetailsView/components/save-assessment-button.tsx b/src/DetailsView/components/save-assessment-button.tsx index e4c985cc165..2f0184840dc 100644 --- a/src/DetailsView/components/save-assessment-button.tsx +++ b/src/DetailsView/components/save-assessment-button.tsx @@ -22,24 +22,25 @@ export interface SaveAssessmentButtonProps { href: string; deps: SaveAssessmentButtonDeps; userConfigurationStoreData: UserConfigurationStoreData; + handleSaveAssesmentButtonClick: (event: React.MouseEvent) => void; } export const SaveAssessmentButton = NamedFC( '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) => { - props.deps.getAssessmentActionMessageCreator().saveAssessment(event); - if (props.userConfigurationStoreData.showSaveAssessmentDialog) { - showDialog(); - } - }; + // const handleSaveAssessmentClick = (event: React.MouseEvent) => { + // props.deps.getAssessmentActionMessageCreator().saveAssessment(event); + // if (props.userConfigurationStoreData.showSaveAssessmentDialog) { + // showDialog(); + // } + // }; - function handleDontShowAgainClick(event: React.MouseEvent, checked?: boolean) { - if (checked === undefined) return; - props.deps.userConfigMessageCreator.setSaveAssessmentDialogState(!checked); - } + // function handleDontShowAgainClick(event: React.MouseEvent, checked?: boolean) { + // if (checked === undefined) return; + // props.deps.userConfigMessageCreator.setSaveAssessmentDialogState(!checked); + // } return ( <> @@ -48,15 +49,17 @@ export const SaveAssessmentButton = NamedFC( className={saveAssessmentStyles?.assessmentButton} download={props.download} href={props.href} - onClick={handleSaveAssessmentClick} + // onClick={handleSaveAssessmentClick} + onClick={props.handleSaveAssesmentButtonClick} insightsCommandButtonIconProps={{ icon: , }} + {...props} > Save assessment - + */} ); }, diff --git a/src/DetailsView/components/save-assessment-dialog.tsx b/src/DetailsView/components/save-assessment-dialog.tsx new file mode 100644 index 00000000000..3f057d26a14 --- /dev/null +++ b/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( + 'SaveAssessmentDialog', + props => { + const [dialogHidden, { setTrue: hideDialog, setFalse: showDialog }] = useBoolean(true); + + const handleSaveAssessmentClick = (event: React.MouseEvent) => { + props.deps.getAssessmentActionMessageCreator().saveAssessment(event); + if (props.userConfigurationStoreData.showSaveAssessmentDialog) { + showDialog(); + } + }; + + function handleDontShowAgainClick(event: React.MouseEvent, checked?: boolean) { + if (checked === undefined) return; + props.deps.userConfigMessageCreator.setSaveAssessmentDialogState(!checked); + } + + return ( + <> + + + ); + }, +); diff --git a/src/common/components/controls/insights-command-button-style.tsx b/src/common/components/controls/insights-command-button-style.tsx index 67ceaac1fdb..96a6572eaf1 100644 --- a/src/common/components/controls/insights-command-button-style.tsx +++ b/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, }, diff --git a/src/common/components/controls/insights-command-button.tsx b/src/common/components/controls/insights-command-button.tsx index 7735c485639..207a8553624 100644 --- a/src/common/components/controls/insights-command-button.tsx +++ b/src/common/components/controls/insights-command-button.tsx @@ -1,6 +1,6 @@ // Copyright (c) Microsoft Corporation. All rights reserved. // Licensed under the MIT License. -import { ButtonProps, mergeClasses, MenuButtonProps, Button } from '@fluentui/react-components'; +import { ButtonProps, mergeClasses, MenuButtonProps, Button, MenuItem } from '@fluentui/react-components'; import { useInsightsCommandButtonStyle } from 'common/components/controls/insights-command-button-style'; import { NamedFC } from 'common/react/named-fc'; @@ -15,6 +15,7 @@ export type InsightsCommandButtonIconProps = { export type InsightsCommandButtonProps = (ButtonProps | MenuButtonProps) & { insightsCommandButtonIconProps?: InsightsCommandButtonIconProps; ref?: any; + isNarrowMode?: boolean }; // See https://www.figma.com/file/Wj4Ggf6GGQBQkiDIaHfXRX2B/Accessibility-Insights%3A-Styles?node-id=1%3A27 @@ -24,22 +25,40 @@ export const InsightsCommandButton = NamedFC( const overrides = useInsightsCommandButtonStyle(); console.log('insights props', props); return ( - + props.isNarrowMode ? + + {props.children} + : + ); }), );