merge with master

package.json

@@ -60,16 +60,16 @@
         "7zip-bin": "^5.0.3",
         "@electron/get": "^1.12.2",
         "@types/applicationinsights-js": "^1.0.7",
-        "@types/chrome": "0.0.110",
+        "@types/chrome": "0.0.112",
         "@types/enzyme": "^3.10.5",
         "@types/enzyme-adapter-react-16": "^1.0.6",
         "@types/jest": "^25.2.2",
-        "@types/jsdom": "^16.2.1",
-        "@types/lodash": "^4.14.150",
+        "@types/jsdom": "^16.2.2",
+        "@types/lodash": "^4.14.151",
         "@types/make-dir": "^2.1.0",
         "@types/moment": "^2.13.0",
         "@types/puppeteer": "^2.1.0",
-        "@types/q": "^1.5.2",
+        "@types/q": "^1.5.3",
         "@types/react": "^16.9.35",
         "@types/react-copy-to-clipboard": "^4.3.0",
         "@types/react-dom": "^16.9.8",
@@ -129,7 +129,7 @@
         "tslint-microsoft-contrib": "6.2.0",
         "typed-scss-modules": "^1.3.0",
         "typemoq": "^2.1.0",
-        "typescript": "^3.8.3",
+        "typescript": "^3.9.2",
         "webdriverio": "^4.13.0",
         "webpack": "^4.43.0",
         "webpack-cli": "^3.3.11",

src/DetailsView/components/assessment-test-view.tsx

@@ -73,6 +73,7 @@ export const AssessmentTestView = NamedFC<AssessmentTestViewProps>(
                     currentTarget={currentTarget}
                     prevTarget={prevTarget}
                     assessmentTestResult={assessmentTestResult}
+                    selectedRequirementIsEnabled={selectedRequirementIsEnabled}
                 />
             );
         };

src/DetailsView/components/assessment-view-update-handler.ts

@@ -26,7 +26,7 @@ export interface AssessmentViewUpdateHandlerProps {
     deps: AssessmentViewUpdateHandlerDeps;
     assessmentNavState: AssessmentNavState;
     assessmentData: AssessmentData;
-    isRequirementEnabled: boolean;
+    selectedRequirementIsEnabled: boolean;
     currentTarget: Tab;
     prevTarget: PersistedTabInfo;
 }
@@ -65,12 +65,12 @@ export class AssessmentViewUpdateHandler {
             return;
         }
 
-        const isRequirementNotScanned = !props.assessmentData.testStepStatus[step].isStepScanned;
-        if (props.isRequirementEnabled === false || isRequirementNotScanned) {
+        const isStepNotScanned = !props.assessmentData.testStepStatus[step].isStepScanned;
+        if (props.selectedRequirementIsEnabled === false || isStepNotScanned) {
             props.deps.detailsViewActionMessageCreator.enableVisualHelper(
                 test,
                 step,
-                isRequirementNotScanned,
+                isStepNotScanned,
                 sendTelemetry,
             );
         }

src/DetailsView/components/assessment-view.tsx

@@ -92,13 +92,23 @@ export class AssessmentView extends React.Component<AssessmentViewProps> {
         );
     }
 
+    public componentDidMount(): void {
+        this.deps.assessmentViewUpdateHandler.onMount(this.props);
+    }
+
     public componentDidUpdate(prevProps: AssessmentViewProps): void {
+        this.deps.assessmentViewUpdateHandler.update(prevProps, this.props);
+
         const { assessmentTestResult } = this.props;
         this.deps.detailsViewExtensionPoint
             .apply(assessmentTestResult.definition.extensions)
             .onAssessmentViewUpdate(prevProps, this.props);
     }
 
+    public componentWillUnmount(): void {
+        this.deps.assessmentViewUpdateHandler.onUnmount(this.props);
+    }
+
     private renderTargetChangeDialog(): JSX.Element {
         return (
             <TargetChangeDialog
@@ -174,9 +184,6 @@ export class AssessmentView extends React.Component<AssessmentViewProps> {
                         }
                         featureFlagStoreData={this.props.featureFlagStoreData}
                         pathSnippetStoreData={this.props.pathSnippetStoreData}
-                        assessmentData={this.props.assessmentData}
-                        currentTarget={this.props.currentTarget}
-                        prevTarget={this.props.prevTarget}
                     />
                 </div>
             </div>

src/DetailsView/components/assessment-visualization-enabled-toggle.tsx

@@ -1,13 +1,12 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 import { GeneratedAssessmentInstance } from 'common/types/store-data/assessment-result-data';
-import { isEmpty } from 'lodash';
 
 import { BaseVisualHelperToggle } from './base-visual-helper-toggle';
 
 export class AssessmentVisualizationEnabledToggle extends BaseVisualHelperToggle {
-    protected isDisabled(filteredInstances: GeneratedAssessmentInstance<{}, {}>[]): boolean {
-        return isEmpty(filteredInstances);
+    protected isDisabled(instances: GeneratedAssessmentInstance<{}, {}>[]): boolean {
+        return !this.isAnyInstanceVisualizable(instances);
     }
 
     protected isChecked(instances: GeneratedAssessmentInstance<{}, {}>[]): boolean {
@@ -28,10 +27,16 @@ export class AssessmentVisualizationEnabledToggle extends BaseVisualHelperToggle
     };
 
     private isAnyInstanceVisible(instances: GeneratedAssessmentInstance<{}, {}>[]): boolean {
+        const testStep = this.props.assessmentNavState.selectedTestSubview;
         return instances.some(
-            instance =>
-                instance.testStepResults[this.props.assessmentNavState.selectedTestSubview]
-                    .isVisualizationEnabled,
+            instance => instance.testStepResults[testStep].isVisualizationEnabled,
+        );
+    }
+
+    private isAnyInstanceVisualizable(instances: GeneratedAssessmentInstance<{}, {}>[]): boolean {
+        const testStep = this.props.assessmentNavState.selectedTestSubview;
+        return instances.some(
+            instance => instance.testStepResults[testStep].isVisualizationSupported,
         );
     }
 }

src/DetailsView/components/base-visual-helper-toggle.tsx

@@ -7,6 +7,7 @@ import { VisualizationToggle } from '../../common/components/visualization-toggl
 import { GeneratedAssessmentInstance } from '../../common/types/store-data/assessment-result-data';
 import { DictionaryStringTo } from '../../types/common-types';
 
+export const visualHelperToggleAutomationId = 'visual-helper-toggle';
 export const visualHelperText = 'Visual helper';
 
 export abstract class BaseVisualHelperToggle extends React.Component<VisualHelperToggleConfig> {
@@ -30,6 +31,7 @@ export abstract class BaseVisualHelperToggle extends React.Component<VisualHelpe
                         onClick={onClick}
                         className="visual-helper-toggle"
                         visualizationName={visualHelperText}
+                        data-automation-id={visualHelperToggleAutomationId}
                     />
                 </div>
                 {disabledMessage}

src/DetailsView/components/left-nav/assessment-left-nav.tsx

@@ -41,6 +41,7 @@ export type TestGettingStartedNavLink = {
 export type TestRequirementLeftNavLink = {
     displayedIndex: string;
     testType: VisualizationType;
+    requirementKey: string;
 } & AssessmentLeftNavLink;
 
 export type onTestRequirementClick = (

src/DetailsView/components/left-nav/left-nav-link-builder.tsx

@@ -226,6 +226,7 @@ export class LeftNavLinkBuilder {
             title: `${displayedIndex}: ${name} (${narratorRequirementStatus})`,
             displayedIndex,
             testType: test,
+            requirementKey: requirement.key,
         };
     }
 

src/DetailsView/components/left-nav/nav-link-handler.ts

@@ -41,7 +41,11 @@ export class NavLinkHandler {
         event: React.MouseEvent<HTMLElement>,
         item: TestRequirementLeftNavLink,
     ) => {
-        this.detailsViewActionMessageCreator.selectRequirement(event, item.key, item.testType);
+        this.detailsViewActionMessageCreator.selectRequirement(
+            event,
+            item.requirementKey,
+            item.testType,
+        );
         this.detailsViewActionMessageCreator.changeRightContentPanel('TestView');
     };
 

src/DetailsView/components/left-nav/requirement-table-section.tsx

@@ -0,0 +1,86 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { AssessmentDefaultMessageGenerator } from 'assessments/assessment-default-message-generator';
+import { AssessmentsProvider } from 'assessments/types/assessments-provider';
+import { Requirement } from 'assessments/types/requirement';
+import { NamedFC } from 'common/react/named-fc';
+import {
+    AssessmentNavState,
+    GeneratedAssessmentInstance,
+    ManualTestStepResult,
+} from 'common/types/store-data/assessment-result-data';
+import { FeatureFlagStoreData } from 'common/types/store-data/feature-flag-store-data';
+import { PathSnippetStoreData } from 'common/types/store-data/path-snippet-store-data';
+import { AssessmentInstanceTable } from 'DetailsView/components/assessment-instance-table';
+import { ManualTestStepView } from 'DetailsView/components/manual-test-step-view';
+import { AssessmentInstanceTableHandler } from 'DetailsView/handlers/assessment-instance-table-handler';
+import { Spinner, SpinnerSize } from 'office-ui-fabric-react';
+import * as React from 'react';
+import { DictionaryStringTo } from 'types/common-types';
+
+export type RequirementTableSectionProps = {
+    assessmentNavState: AssessmentNavState;
+    requirement: Requirement;
+    instancesMap: DictionaryStringTo<GeneratedAssessmentInstance>;
+    assessmentInstanceTableHandler: AssessmentInstanceTableHandler;
+    assessmentsProvider: AssessmentsProvider;
+    featureFlagStoreData: FeatureFlagStoreData;
+    pathSnippetStoreData: PathSnippetStoreData;
+    scanningInProgress: boolean;
+    manualRequirementResultMap: DictionaryStringTo<ManualTestStepResult>;
+    assessmentDefaultMessageGenerator: AssessmentDefaultMessageGenerator;
+    isRequirementScanned: boolean;
+    selectedRequirementHasVisualHelper: boolean;
+};
+
+export const RequirementTableSection = NamedFC<RequirementTableSectionProps>(
+    'RequirementTableSection',
+    props => {
+        if (props.requirement.isManual) {
+            return (
+                <ManualTestStepView
+                    test={props.assessmentNavState.selectedTestType}
+                    step={props.assessmentNavState.selectedTestSubview}
+                    manualTestStepResultMap={props.manualRequirementResultMap}
+                    assessmentInstanceTableHandler={props.assessmentInstanceTableHandler}
+                    assessmentsProvider={props.assessmentsProvider}
+                    featureFlagStoreData={props.featureFlagStoreData}
+                    pathSnippetStoreData={props.pathSnippetStoreData}
+                />
+            );
+        }
+
+        if (props.scanningInProgress) {
+            return (
+                <Spinner
+                    className="details-view-spinner"
+                    size={SpinnerSize.large}
+                    label={'Scanning'}
+                />
+            );
+        }
+
+        const renderScanCompleteAlert = () => {
+            if (!props.requirement.isManual && props.isRequirementScanned) {
+                return <div role="alert" aria-live="polite" aria-label="Scan Complete" />;
+            }
+        };
+
+        return (
+            <React.Fragment>
+                {renderScanCompleteAlert()}
+                <h3>Instances</h3>
+                <AssessmentInstanceTable
+                    instancesMap={props.instancesMap}
+                    assessmentInstanceTableHandler={props.assessmentInstanceTableHandler}
+                    assessmentNavState={props.assessmentNavState}
+                    renderInstanceTableHeader={props.requirement.renderInstanceTableHeader}
+                    getDefaultMessage={props.requirement.getDefaultMessage}
+                    assessmentDefaultMessageGenerator={props.assessmentDefaultMessageGenerator}
+                    hasVisualHelper={props.selectedRequirementHasVisualHelper}
+                />
+            </React.Fragment>
+        );
+    },
+);

src/DetailsView/components/reflow-assessment-view.tsx

@@ -5,6 +5,7 @@ import * as React from 'react';
 import {
     AssessmentViewUpdateHandler,
     AssessmentViewUpdateHandlerDeps,
+    AssessmentViewUpdateHandlerProps,
 } from 'DetailsView/components/assessment-view-update-handler';
 import { AssessmentTestResult } from '../../common/assessment/assessment-test-result';
 import { Tab } from '../../common/itab';
@@ -28,7 +29,7 @@ export type ReflowAssessmentViewProps = {
     currentTarget: Tab;
     prevTarget: PersistedTabInfo;
     assessmentTestResult: AssessmentTestResult;
-};
+} & AssessmentViewUpdateHandlerProps;
 
 export class ReflowAssessmentView extends React.Component<ReflowAssessmentViewProps> {
     public render(): JSX.Element {
@@ -46,6 +47,18 @@ export class ReflowAssessmentView extends React.Component<ReflowAssessmentViewPr
         return null;
     }
 
+    public componentDidMount(): void {
+        this.props.deps.assessmentViewUpdateHandler.onMount(this.props);
+    }
+
+    public componentDidUpdate(prevProps: ReflowAssessmentViewProps): void {
+        this.props.deps.assessmentViewUpdateHandler.update(prevProps, this.props);
+    }
+
+    public componentWillUnmount(): void {
+        this.props.deps.assessmentViewUpdateHandler.onUnmount(this.props);
+    }
+
     private renderTargetChangeDialog(): JSX.Element {
         return (
             <TargetChangeDialog

src/DetailsView/components/requirement-view.scss

@@ -7,3 +7,14 @@
     padding-left: 6px;
     padding-top: 1vh;
 }
+
+:global(.visual-helper) {
+    display: flex;
+    padding-top: 1.5vh;
+    &-text {
+        padding-right: 0.9vh;
+        font-family: $fontFamily;
+        font-size: 14px;
+        line-height: 20px;
+    }
+}

src/DetailsView/components/requirement-view.tsx

@@ -1,22 +1,54 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { Requirement } from 'assessments/types/requirement';
+import { AssessmentsProvider } from 'assessments/types/assessments-provider';
+import { Requirement, VisualHelperToggleConfig } from 'assessments/types/requirement';
 import { NamedFC } from 'common/react/named-fc';
+import {
+    AssessmentNavState,
+    GeneratedAssessmentInstance,
+} from 'common/types/store-data/assessment-result-data';
+import { DetailsViewActionMessageCreator } from 'DetailsView/actions/details-view-action-message-creator';
 import { RequirementInstructions } from 'DetailsView/components/requirement-instructions';
 import {
     RequirementViewTitle,
     RequirementViewTitleDeps,
 } from 'DetailsView/components/requirement-view-title';
 import * as React from 'react';
+import { DictionaryStringTo } from 'types/common-types';
 import * as styles from './requirement-view.scss';
 
-export type RequirementViewDeps = RequirementViewTitleDeps;
+export type RequirementViewDeps = {
+    detailsViewActionMessageCreator: DetailsViewActionMessageCreator;
+} & RequirementViewTitleDeps;
+
 export interface RequirementViewProps {
     deps: RequirementViewDeps;
     requirement: Requirement;
+    assessmentsProvider: AssessmentsProvider;
+    assessmentNavState: AssessmentNavState;
+    instancesMap: DictionaryStringTo<GeneratedAssessmentInstance>;
+    isStepEnabled: boolean;
+    isStepScanned: boolean;
 }
 
 export const RequirementView = NamedFC<RequirementViewProps>('RequirementView', props => {
+    const requirement: Readonly<Requirement> = props.assessmentsProvider.getStep(
+        props.assessmentNavState.selectedTestType,
+        props.assessmentNavState.selectedTestSubview,
+    );
+
+    const visualHelperToggleConfig: VisualHelperToggleConfig = {
+        deps: props.deps,
+        assessmentNavState: props.assessmentNavState,
+        instancesMap: props.instancesMap,
+        isStepEnabled: props.isStepEnabled,
+        isStepScanned: props.isStepScanned,
+    };
+
+    const visualHelperToggle = requirement.getVisualHelperToggle
+        ? requirement.getVisualHelperToggle(visualHelperToggleConfig)
+        : null;
+
     return (
         <div className={styles.requirementView}>
             <RequirementViewTitle
@@ -26,6 +58,7 @@ export const RequirementView = NamedFC<RequirementViewProps>('RequirementView',
                 infoAndExamples={props.requirement.infoAndExamples}
             />
             {props.requirement.description}
+            {visualHelperToggle}
             <RequirementInstructions howToTest={props.requirement.howToTest} />
         </div>
     );