merge with master

.prettierignore

@@ -6,6 +6,7 @@
 **/*.gitignore
 **/*.icns
 **/*.ico
+**/*.mp3
 **/*.nsh
 **/*.png
 **/*.snap

build.yaml

@@ -97,25 +97,31 @@ jobs:
             displayName: publish drop
             timeoutInMinutes: 5
 
-    - job: 'e2e_mac_web_unified'
+    - job: 'e2e_web_mac'
       pool:
           vmImage: macOS-10.15
       steps:
           - template: pipeline/install-node-prerequisites.yaml
           - template: pipeline/e2e-test-from-agent.yaml
           - template: pipeline/e2e-test-publish-results.yaml
+
+    - job: 'e2e_unified_mac'
+      pool:
+          vmImage: macOS-10.15
+      steps:
+          - template: pipeline/install-node-prerequisites.yaml
           - template: pipeline/unified/unified-e2e-test-interactive.yaml
           - template: pipeline/unified/unified-e2e-publish-results.yaml
 
-    - job: 'e2e_linux_unified'
+    - job: 'e2e_unified_linux'
       pool:
           vmImage: ubuntu-18.04
       steps:
           - template: pipeline/install-node-prerequisites.yaml
           - template: pipeline/unified/unified-e2e-test-linux.yaml
           - template: pipeline/unified/unified-e2e-publish-results.yaml
 
-    - job: 'e2e_windows_unified'
+    - job: 'e2e_unified_windows'
       pool:
           vmImage: windows-2019
       steps:

package.json

@@ -64,12 +64,12 @@
         "@types/enzyme": "^3.10.5",
         "@types/enzyme-adapter-react-16": "^1.0.6",
         "@types/jest": "^25.2.2",
-        "@types/jsdom": "^16.2.2",
+        "@types/jsdom": "^16.2.3",
         "@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.3",
+        "@types/q": "^1.5.4",
         "@types/react": "^16.9.35",
         "@types/react-copy-to-clipboard": "^4.3.0",
         "@types/react-dom": "^16.9.8",
@@ -80,7 +80,7 @@
         "@types/uuid": "^7.0.3",
         "app-builder-lib": "^22.6.1",
         "case-sensitive-paths-webpack-plugin": "^2.3.0",
-        "codecov": "^3.6.5",
+        "codecov": "^3.7.0",
         "commander": "^5.1.0",
         "core-js-bundle": "^3.6.5",
         "cross-env": "^7.0.2",
@@ -113,7 +113,7 @@
         "npm-run-all": "^4.1.5",
         "preprocess": "^3.2.0",
         "prettier": "^2.0.5",
-        "puppeteer": "^3.0.4",
+        "puppeteer": "^3.1.0",
         "react-devtools": "^4.6.0",
         "regenerator-runtime": "^0.13.5",
         "sass-loader": "^8.0.2",
@@ -123,7 +123,7 @@
         "source-map-loader": "^0.2.4",
         "spectron": "^10.0.1",
         "terser-webpack-plugin": "^3.0.1",
-        "ts-jest": "^25.5.1",
+        "ts-jest": "^26.0.0",
         "ts-loader": "^7.0.4",
         "tslint": "^5.20.1",
         "tslint-microsoft-contrib": "6.2.0",

src/DetailsView/Styles/detailsview.scss

@@ -235,7 +235,9 @@ div.insights-file-issue-details-dialog-container {
         grid-template-rows: 1fr;
         width: 100%;
         min-height: 0;
-
+        &.reflow-ui {
+            grid-template-columns: $detailsViewReflowLeftNavWidth 1fr;
+        }
         .details-view-test-nav-area {
             box-sizing: border-box;
             max-height: calc(
@@ -393,10 +395,14 @@ div.insights-file-issue-details-dialog-container {
             .dark-gray {
                 color: $neutral-60;
             }
+            .is-selected .button-flex-container {
+                color: $always-black;
+            }
             .button-flex-container {
                 padding-left: 5%;
                 padding-right: 8%;
                 width: $detailsViewLeftNavWidth;
+                color: $primary-text;
                 .status-icon {
                     font-size: 24px;
                 }

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

@@ -68,12 +68,17 @@ export const AssessmentTestView = NamedFC<AssessmentTestViewProps>(
             return (
                 <ReflowAssessmentView
                     deps={deps}
-                    assessmentNavState={assessmentNavState}
-                    assessmentData={assessmentData}
                     currentTarget={currentTarget}
                     prevTarget={prevTarget}
-                    assessmentTestResult={assessmentTestResult}
+                    scanningInProgress={isScanning}
                     selectedRequirementIsEnabled={selectedRequirementIsEnabled}
+                    assessmentNavState={assessmentNavState}
+                    assessmentData={assessmentData}
+                    assessmentDefaultMessageGenerator={deps.assessmentDefaultMessageGenerator}
+                    assessmentTestResult={assessmentTestResult}
+                    assessmentInstanceTableHandler={props.assessmentInstanceTableHandler}
+                    featureFlagStoreData={props.featureFlagStoreData}
+                    pathSnippetStoreData={props.pathSnippetStoreData}
                 />
             );
         };

src/DetailsView/components/getting-started-view.scss

@@ -7,3 +7,19 @@
     padding-left: 6px;
     padding-top: 1vh;
 }
+
+.getting-started-header {
+    @include text-style-title-m;
+    padding-top: 8px;
+    i {
+        font-size: 16px;
+    }
+}
+
+.getting-started-header-title {
+    margin-right: 8px;
+}
+
+.getting-started-title {
+    @include text-style-title-s;
+}

src/DetailsView/components/getting-started-view.tsx

@@ -3,15 +3,26 @@
 import { NamedFC } from 'common/react/named-fc';
 import * as styles from 'DetailsView/components/getting-started-view.scss';
 import * as React from 'react';
+import { ContentLink, ContentLinkDeps } from 'views/content/content-link';
+import { ContentPageComponent } from 'views/content/content-page';
+
+export type GettingStartedViewDeps = ContentLinkDeps;
 
 export interface GettingStartedViewProps {
+    deps: GettingStartedViewDeps;
     gettingStartedContent: JSX.Element;
+    title: string;
+    guidance: ContentPageComponent;
 }
 
 export const GettingStartedView = NamedFC<GettingStartedViewProps>('GettingStartedView', props => {
     return (
         <div className={styles.gettingStartedView}>
-            <h2>Getting Started</h2>
+            <h1 className={styles.gettingStartedHeader}>
+                <span className={styles.gettingStartedHeaderTitle}>{props.title}</span>
+                <ContentLink deps={props.deps} reference={props.guidance} iconName="info" />
+            </h1>
+            <h2 className={styles.gettingStartedTitle}>Getting Started</h2>
             {props.gettingStartedContent}
         </div>
     );

src/DetailsView/components/issue-filing-dialog.tsx

@@ -4,7 +4,7 @@ import { cloneDeep, isEqual } from 'lodash';
 import { Dialog, DialogFooter, DialogType } from 'office-ui-fabric-react';
 import * as React from 'react';
 
-import { EnvironmentInfoProvider } from '../../common/environment-info-provider';
+import { ToolData } from 'common/types/store-data/unified-data-interface';
 import { IssueFilingActionMessageCreator } from '../../common/message-creators/issue-filing-action-message-creator';
 import { UserConfigMessageCreator } from '../../common/message-creators/user-config-message-creator';
 import { CreateIssueDetailsTextData } from '../../common/types/create-issue-details-text-data';
@@ -29,7 +29,7 @@ export interface IssueFilingDialogProps {
 }
 
 export type IssueFilingDialogDeps = {
-    environmentInfoProvider: EnvironmentInfoProvider;
+    toolData: ToolData;
     userConfigMessageCreator: UserConfigMessageCreator;
     issueFilingServiceProvider: IssueFilingServiceProvider;
     issueFilingActionMessageCreator: IssueFilingActionMessageCreator;

src/DetailsView/components/left-nav/details-view-left-nav.tsx

@@ -7,6 +7,7 @@ import { AssessmentsProvider } from 'assessments/types/assessments-provider';
 import { FlaggedComponent } from 'common/components/flagged-component';
 import { FeatureFlags } from 'common/feature-flags';
 import { DetailsViewPivotType } from 'common/types/details-view-pivot-type';
+import { generateReflowAssessmentTestKey } from 'DetailsView/components/left-nav/left-nav-link-builder';
 import { Switcher, SwitcherDeps } from 'DetailsView/components/switcher';
 import { leftNavSwitcherStyleNames } from 'DetailsView/components/switcher-style-names';
 import { NamedFC } from '../../../common/react/named-fc';
@@ -49,6 +50,12 @@ export const DetailsViewLeftNav = NamedFC<DetailsViewLeftNavProps>('DetailsViewL
 
     const selectedKey: string = rightPanelConfiguration.GetLeftNavSelectedKey({
         visualizationType: selectedTest,
+        selectedSubview: assessmentStoreData.assessmentNavState.selectedTestSubview,
+        featureFlagStoreData,
+        assessmentsProvider,
+        deps: {
+            generateReflowAssessmentTestKey,
+        },
     });
     const filteredProvider = assessmentsProviderWithFeaturesEnabled(
         assessmentsProvider,

src/DetailsView/components/left-nav/get-left-nav-selected-key.ts

@@ -1,15 +1,37 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
+import { AssessmentsProvider } from 'assessments/types/assessments-provider';
+import { FeatureFlags } from 'common/feature-flags';
+import { GettingStarted, RequirementName } from 'common/types/store-data/assessment-result-data';
+import { FeatureFlagStoreData } from 'common/types/store-data/feature-flag-store-data';
+import { reflowAssessmentTestKeyGenerator } from 'DetailsView/components/left-nav/left-nav-link-builder';
 import { VisualizationType } from '../../../common/types/visualization-type';
 
+export type GetLeftNavSelectedKeyDeps = {
+    generateReflowAssessmentTestKey: reflowAssessmentTestKeyGenerator;
+};
+
 export type GetLeftNavSelectedKeyProps = {
+    deps: GetLeftNavSelectedKeyDeps;
     visualizationType: VisualizationType;
+    assessmentsProvider: AssessmentsProvider;
+    featureFlagStoreData: FeatureFlagStoreData;
+    selectedSubview: RequirementName | GettingStarted;
 };
 
 export function getOverviewKey(): string {
     return 'Overview';
 }
 
 export function getTestViewKey(props: GetLeftNavSelectedKeyProps): string {
-    return VisualizationType[props.visualizationType];
+    if (
+        props.assessmentsProvider.isValidType(props.visualizationType) === false ||
+        props.featureFlagStoreData[FeatureFlags.reflowUI] === false
+    ) {
+        return VisualizationType[props.visualizationType];
+    }
+    return props.deps.generateReflowAssessmentTestKey(
+        props.visualizationType,
+        props.selectedSubview,
+    );
 }

src/DetailsView/components/left-nav/getting-started-nav-link.scss

@@ -1,5 +1,11 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
+@import '../../../common/styles/common.scss';
 .getting-started {
     padding-left: 5%;
+    color: $primary-text;
+}
+
+:global(.is-selected) .getting-started {
+    color: $always-black;
 }

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

@@ -1,18 +1,20 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { INavLink } from 'office-ui-fabric-react';
+import { css, INavLink } from 'office-ui-fabric-react';
 import * as React from 'react';
 import { NamedFC } from '../../../common/react/named-fc';
 import { StatusIcon } from '../status-icon';
 
 export type LeftNavIconProps = {
     item: INavLink;
+    className?: string;
 };
 
 export const LeftNavStatusIcon = NamedFC<LeftNavIconProps>('LeftNavStatusIcon', props => {
     const { item } = props;
+    const classes = css('dark-gray', props.className);
 
-    return <StatusIcon status={item.status} className={'dark-gray'} level="test" />;
+    return <StatusIcon status={item.status} className={classes} level="test" />;
 });
 
 export const LeftNavIndexIcon = NamedFC<LeftNavIconProps>('LeftNavIndexIcon', props => {

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

@@ -0,0 +1,10 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+/*
+Specificity due to clashes with details-view.scss & avoiding use of !important
+*/
+:global(#details-container .details-view-body-nav-content-layout .left-nav .button-flex-container)
+    .requirement-status-icon {
+    font-size: 20px;
+}

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

@@ -13,6 +13,7 @@ import {
 } from 'DetailsView/components/left-nav/assessment-left-nav';
 import { GettingStartedNavLink } from 'DetailsView/components/left-nav/getting-started-nav-link';
 import { LeftNavIndexIcon, LeftNavStatusIcon } from 'DetailsView/components/left-nav/left-nav-icon';
+import { requirementStatusIcon } from 'DetailsView/components/left-nav/left-nav-link-builder.scss';
 import { NavLinkHandler } from 'DetailsView/components/left-nav/nav-link-handler';
 import { map } from 'lodash';
 import * as React from 'react';
@@ -46,6 +47,15 @@ export type AssessmentLinkBuilderDeps = {
 
 export type VisualizationConfigurationLinkBuilderDeps = {};
 
+export function generateReflowAssessmentTestKey(
+    test: VisualizationType,
+    selectedSubview: string,
+): string {
+    return `${VisualizationType[test]}: ${selectedSubview}`;
+}
+
+export type reflowAssessmentTestKeyGenerator = typeof generateReflowAssessmentTestKey;
+
 export class LeftNavLinkBuilder {
     public buildOverviewLink(
         deps: OverviewLinkBuilderDeps,
@@ -165,11 +175,11 @@ export class LeftNavLinkBuilder {
             VisualizationType[assessment.visualizationType],
             index,
             l => <TestViewLeftNavLink link={l} renderIcon={this.renderAssessmentTestIcon} />,
-            navLinkHandler.onAssessmentTestClick,
+            () => {},
         );
 
         const gettingStartedLink = this.buildGettingStartedLink(
-            navLinkHandler.onRequirementClick,
+            navLinkHandler.onGettingStartedClick,
             assessment,
         );
 
@@ -214,7 +224,7 @@ export class LeftNavLinkBuilder {
 
         const baselink = this.buildBaseLink(
             name,
-            requirement.key,
+            generateReflowAssessmentTestKey(test, requirement.key),
             requirementIndex,
             l => <TestViewLeftNavLink link={l} renderIcon={this.renderRequirementIcon} />,
             onClick,
@@ -234,11 +244,12 @@ export class LeftNavLinkBuilder {
         onClick: onTestGettingStartedClick,
         test: Assessment,
     ): TestGettingStartedNavLink {
+        const testType = test.visualizationType;
         return {
-            testType: test.visualizationType,
+            testType,
             ...this.buildBaseLink(
                 'Getting Started',
-                gettingStartedSubview,
+                generateReflowAssessmentTestKey(testType, gettingStartedSubview),
                 0,
                 () => <GettingStartedNavLink />,
                 onClick,
@@ -251,7 +262,7 @@ export class LeftNavLinkBuilder {
             return <>{link.displayedIndex}</>;
         }
 
-        return <LeftNavStatusIcon item={link} />;
+        return <LeftNavStatusIcon className={requirementStatusIcon} item={link} />;
     };
 
     private renderAssessmentTestIcon: onBaseLeftNavItemRender = (link: AssessmentLeftNavLink) => {