Merge pull request #18 from microsoft/master

merge with master
AhmedAbdoOrtiga · Jun 5, 2020 · c3b4023 · c3b4023
2 parents 040214a + 7397e45
commit c3b4023
Show file tree

Hide file tree

Showing 54 changed files with 554 additions and 305 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -5,6 +5,7 @@ const path = require('path');
 const targets = require('./targets.config');
 const merge = require('lodash/merge');
 const yaml = require('js-yaml');
+const androidServiceBin = require('accessibility-insights-for-android-service-bin');
 
 module.exports = function (grunt) {
     const extensionPath = 'extension';
@@ -278,6 +279,25 @@ module.exports = function (grunt) {
         const dropPath = path.join(`drop/${productCategory}`, targetName);
         const dropExtensionPath = path.join(dropPath, 'product');
 
+        const productCategorySpecificCopyFiles = [];
+        if (productCategory === 'electron') {
+            productCategorySpecificCopyFiles.push(
+                {
+                    src: androidServiceBin.apkPath,
+                    // This should be kept in sync with android-service-apk.ts
+                    dest: path.join(dropExtensionPath, 'android-service', 'android-service.apk'),
+                },
+                {
+                    src: androidServiceBin.noticePath,
+                    dest: path.join(
+                        dropExtensionPath,
+                        'android-service',
+                        path.basename(androidServiceBin.noticePath),
+                    ),
+                },
+            );
+        }
+
         grunt.config.merge({
             drop: {
                 [targetName]: {
@@ -341,6 +361,7 @@ module.exports = function (grunt) {
                             dest: dropExtensionPath,
                             expand: true,
                         },
+                        ...productCategorySpecificCopyFiles,
                     ],
                 },
             },
@@ -461,6 +482,7 @@ module.exports = function (grunt) {
         config.appId = appId;
         config.directories.app = dropPath;
         config.directories.output = `${dropPath}/packed`;
+        config.extraResources[0].from = `${dropPath}/product/android-service`;
         config.extraMetadata.version = version;
         config.win.icon = `src/${electronIconBaseName}.ico`;
         // electron-builder infers the linux icon from the mac one

diff --git a/package.json b/package.json
@@ -129,13 +129,14 @@
         "tslint-microsoft-contrib": "6.2.0",
         "typed-scss-modules": "^1.3.0",
         "typemoq": "^2.1.0",
-        "typescript": "^3.9.3",
+        "typescript": "^3.9.5",
         "webdriverio": "^4.13.0",
         "webpack": "^4.43.0",
         "webpack-cli": "^3.3.11",
         "webpack-node-externals": "^1.7.2"
     },
     "dependencies": {
+        "accessibility-insights-for-android-service-bin": "^1.2.0",
         "applicationinsights-js": "^1.0.21",
         "axe-core": "3.5.1",
         "axios": "^0.19.2",

diff --git a/src/DetailsView/Styles/detailsview.scss b/src/DetailsView/Styles/detailsview.scss
@@ -228,9 +228,13 @@ div.insights-file-issue-details-dialog-container {
         }
     }
     .details-view-body-nav-content-layout {
+        display: flex;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+        align-items: flex-start;
+        align-content: stretch;
         padding-left: 0px;
         padding-right: 0px;
-        display: grid;
         grid-template-columns: $detailsViewLeftNavWidth 1fr;
         grid-template-rows: 1fr;
         width: 100%;
@@ -459,7 +463,7 @@ div.insights-file-issue-details-dialog-container {
             box-sizing: border-box;
             max-height: calc(100vh - (#{$detailsViewTotalHeaderHeight}));
             > div {
-                min-width: 600px;
+                width: 100%;
                 height: auto;
             }
             .ms-MessageBar-icon i {

diff --git a/src/DetailsView/components/assessment-view.scss b/src/DetailsView/components/assessment-view.scss
@@ -6,6 +6,7 @@
     flex-grow: 1;
     display: flex;
     flex-direction: column;
+    flex-wrap: wrap;
     width: 100%;
     margin-top: 24px;
     .assessment-title {
@@ -26,7 +27,6 @@
     .details-view-assessment-content {
         flex-grow: 1;
         display: flex;
-        height: 0;
         border-top: 1px solid $neutral-8;
 
         .test-steps-nav-container {

diff --git a/src/DetailsView/components/details-view-content-with-local-state.tsx b/src/DetailsView/components/details-view-content-with-local-state.tsx
@@ -1,23 +1,34 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { NamedFC } from 'common/react/named-fc';
 import { DetailsViewContent } from 'DetailsView/components/details-view-content';
 import { DetailsViewContainerProps } from 'DetailsView/details-view-container';
 import * as React from 'react';
 
 export type DetailsViewContentWithLocalStateProps = DetailsViewContainerProps;
+export type DetailsViewContentState = {
+    isSideNavOpen: boolean;
+};
 
-export const DetailsViewContentWithLocalState = NamedFC<DetailsViewContentWithLocalStateProps>(
-    'DetailsViewContentWithLocalState',
-    props => {
-        const [isSideNavOpen, setSideNavOpen] = React.useState(false);
+export class DetailsViewContentWithLocalState extends React.Component<
+    DetailsViewContentWithLocalStateProps,
+    DetailsViewContentState
+> {
+    constructor(props: DetailsViewContentWithLocalStateProps) {
+        super(props);
+        this.state = { isSideNavOpen: false };
+    }
 
+    private setSideNavOpen(isOpen: boolean): void {
+        this.setState({ isSideNavOpen: isOpen });
+    }
+
+    public render(): JSX.Element {
         return (
             <DetailsViewContent
-                {...props}
-                isSideNavOpen={isSideNavOpen}
-                setSideNavOpen={setSideNavOpen}
+                {...this.props}
+                isSideNavOpen={this.state.isSideNavOpen}
+                setSideNavOpen={(isOpen: boolean) => this.setSideNavOpen(isOpen)}
             />
         );
-    },
-);
+    }
+}
diff --git a/src/DetailsView/components/details-view-content.tsx b/src/DetailsView/components/details-view-content.tsx
@@ -32,6 +32,8 @@ export const DetailsViewContent = NamedFC<DetailsViewContentProps>('DetailsViewC
                 featureFlagStoreData={storeState.featureFlagStoreData}
                 tabClosed={props.storeState.tabStoreData.isClosed}
                 navMenu={selectedDetailsViewSwitcherNavConfiguration.leftNavHamburgerButton}
+                isSideNavOpen={props.isSideNavOpen}
+                setSideNavOpen={props.setSideNavOpen}
             />
         );
     };

diff --git a/src/DetailsView/components/interactive-header.tsx b/src/DetailsView/components/interactive-header.tsx
@@ -20,6 +20,8 @@ export interface InteractiveHeaderProps {
     tabClosed: boolean;
     selectedPivot: DetailsViewPivotType;
     navMenu: ReactFCWithDisplayName<ExpandCollpaseLeftNavButtonProps>;
+    isSideNavOpen: boolean;
+    setSideNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export const InteractiveHeader = NamedFC<InteractiveHeaderProps>('InteractiveHeader', props => {
@@ -30,7 +32,12 @@ export const InteractiveHeader = NamedFC<InteractiveHeaderProps>('InteractiveHea
     const getNavMenu = () => {
         return (
             <FlaggedComponent
-                enableJSXElement={<props.navMenu isLeftNavOpen={false} />}
+                enableJSXElement={
+                    <props.navMenu
+                        setSideNavOpen={props.setSideNavOpen}
+                        isSideNavOpen={props.isSideNavOpen}
+                    />
+                }
                 featureFlag={FeatureFlags.reflowUI}
                 featureFlagStoreData={props.featureFlagStoreData}
             />

diff --git a/src/DetailsView/components/left-nav/fluent-side-nav.scss b/src/DetailsView/components/left-nav/fluent-side-nav.scss
@@ -3,6 +3,15 @@
 @import '../../../common/styles/common.scss';
 
 #side-nav-container {
+    max-width: 25%;
+    min-width: 200px;
+
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: start;
+    align-items: self-start;
+    align-content: stretch;
+
     .left-nav-panel {
         margin-top: $detailsViewHeaderBarHeight;
         :global(.ms-Panel-main) {

diff --git a/src/DetailsView/components/left-nav/fluent-side-nav.tsx b/src/DetailsView/components/left-nav/fluent-side-nav.tsx
@@ -8,6 +8,7 @@ import {
     DetailsViewLeftNavProps,
 } from 'DetailsView/components/left-nav/details-view-left-nav';
 import * as styles from 'DetailsView/components/left-nav/fluent-side-nav.scss';
+import { isNil } from 'lodash';
 import { PanelType } from 'office-ui-fabric-react';
 import * as React from 'react';
 
@@ -27,7 +28,10 @@ export class FluentSideNav extends React.Component<FluentSideNavProps> {
         }
         const nav = <DetailsViewLeftNav {...this.props} />;
 
-        const dismissPanel = () => {
+        const dismissPanel = (ev: React.SyntheticEvent<HTMLElement, Event>) => {
+            if (isNil(ev)) {
+                return;
+            }
             this.props.setSideNavOpen(false);
         };
 

diff --git a/src/DetailsView/components/overview-content/overview-content-container.scss b/src/DetailsView/components/overview-content/overview-content-container.scss
@@ -5,4 +5,8 @@
     height: 168px;
     padding-top: 24px;
     margin-right: 32px;
+    @media screen and (max-width: 1200px) {
+        padding-top: 0px;
+        margin-bottom: 40px;
+    }
 }
diff --git a/src/background/actions/user-configuration-actions.ts b/src/background/actions/user-configuration-actions.ts
@@ -9,6 +9,7 @@ import {
 } from './action-payloads';
 
 export class UserConfigurationActions {
+    public readonly setAdbLocation = new Action<string>();
     public readonly setTelemetryState = new Action<boolean>();
     public readonly getCurrentState = new Action<void>();
     public readonly setHighContrastMode = new Action<SetHighContrastModePayload>();

diff --git a/src/background/stores/global/user-configuration-store.ts b/src/background/stores/global/user-configuration-store.ts
@@ -23,6 +23,7 @@ export class UserConfigurationStore extends BaseStoreImpl<UserConfigurationStore
         lastSelectedHighContrast: false,
         bugService: 'none',
         bugServicePropertiesMap: {},
+        adbLocation: null,
     };
 
     constructor(
@@ -51,6 +52,7 @@ export class UserConfigurationStore extends BaseStoreImpl<UserConfigurationStore
 
     protected addActionListeners(): void {
         this.userConfigActions.getCurrentState.addListener(this.onGetCurrentState);
+        this.userConfigActions.setAdbLocation.addListener(this.onSetAdbLocation);
         this.userConfigActions.setTelemetryState.addListener(this.onSetTelemetryState);
         this.userConfigActions.setHighContrastMode.addListener(this.onSetHighContrastMode);
         this.userConfigActions.setNativeHighContrastMode.addListener(
@@ -63,6 +65,11 @@ export class UserConfigurationStore extends BaseStoreImpl<UserConfigurationStore
         this.userConfigActions.saveIssueFilingSettings.addListener(this.onSaveIssueSettings);
     }
 
+    private onSetAdbLocation = (location: string): void => {
+        this.state.adbLocation = location;
+        this.saveAndEmitChanged();
+    };
+
     private onSetTelemetryState = (enableTelemetry: boolean): void => {
         this.state.isFirstTime = false;
         this.state.enableTelemetry = enableTelemetry;

diff --git a/src/common/components/expand-collapse-left-nav-hamburger-button.tsx b/src/common/components/expand-collapse-left-nav-hamburger-button.tsx
@@ -6,21 +6,34 @@ import { NamedFC } from 'common/react/named-fc';
 import * as React from 'react';
 
 export type ExpandCollpaseLeftNavButtonProps = {
-    isLeftNavOpen: boolean;
+    isSideNavOpen: boolean;
+    setSideNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 export const AssessmentLeftNavHamburgerButton = NamedFC<ExpandCollpaseLeftNavButtonProps>(
     'AssessmentLeftNavHamburgerButton',
     props => {
         const ariaLabel: string = 'Assessment - all tests and requirements list';
-        return <LeftNavHamburgerButton ariaLabel={ariaLabel} />;
+        return (
+            <LeftNavHamburgerButton
+                ariaLabel={ariaLabel}
+                isSideNavOpen={props.isSideNavOpen}
+                setSideNavOpen={props.setSideNavOpen}
+            />
+        );
     },
 );
 
 export const FastPassLeftNavHamburgerButton = NamedFC<ExpandCollpaseLeftNavButtonProps>(
     'FastPassLeftNavHamburgerButton',
     props => {
         const ariaLabel: string = 'FastPass - all tests list';
-        return <LeftNavHamburgerButton ariaLabel={ariaLabel} />;
+        return (
+            <LeftNavHamburgerButton
+                ariaLabel={ariaLabel}
+                isSideNavOpen={props.isSideNavOpen}
+                setSideNavOpen={props.setSideNavOpen}
+            />
+        );
     },
 );
diff --git a/src/common/components/left-nav-hamburger-button.tsx b/src/common/components/left-nav-hamburger-button.tsx
@@ -1,23 +1,30 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-
 import { NamedFC } from 'common/react/named-fc';
 import { IconButton } from 'office-ui-fabric-react';
 import * as React from 'react';
+
 import * as styles from './left-nav-hamburger-button.scss';
 
-type LeftNavHamburgerButtonProps = {
+export type LeftNavHamburgerButtonProps = {
     ariaLabel: string;
+    isSideNavOpen: boolean;
+    setSideNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 export const LeftNavHamburgerButton = NamedFC<LeftNavHamburgerButtonProps>(
     'LeftNavHamburgerButton',
     props => {
+        const onClick = () => {
+            props.setSideNavOpen(!props.isSideNavOpen);
+        };
+
         return (
             <IconButton
                 className={styles.leftNavHamburgerButton}
                 iconProps={{ iconName: 'GlobalNavButton' }}
                 ariaLabel={props.ariaLabel}
+                onClick={onClick}
             />
         );
     },

diff --git a/src/common/types/store-data/user-configuration-store.ts b/src/common/types/store-data/user-configuration-store.ts
@@ -11,6 +11,9 @@ export interface UserConfigurationStoreData {
 
     bugService: string;
     bugServicePropertiesMap: IssueFilingServicePropertiesMap;
+
+    // null if the path to adb is unknown
+    adbLocation: string | null;
 }
 
 export interface IssueFilingServicePropertiesMap {

diff --git a/src/electron/electron-builder/electron-builder.template.yaml b/src/electron/electron-builder/electron-builder.template.yaml
@@ -13,6 +13,14 @@ directories:
 
 files:
     - '!packed${/*}'
+    - '!product/android-service/**/*'
+
+# We include the android-service directory as an extraResource instead of a file because we need
+# to be able to pass the APK it contains as a file to adb; extraResources end up on the user's
+# machine as files as-is, but files get bundled together into a shared .asar archive.
+extraResources:
+    - from: TARGET_SPECIFIC
+      to: 'android-service'
 
 extraMetadata:
     main: product/bundle/main.bundle.js

diff --git a/src/electron/ipc/ipc-channel-names.ts b/src/electron/ipc/ipc-channel-names.ts
@@ -14,6 +14,7 @@ export const IPC_FROMRENDERER_CLOSE_BROWSERWINDOW_CHANNEL_NAME =
     '4a3872c2-6077-4c79-bbfc-684cdd15df3b';
 export const IPC_FROMRENDERER_SETSIZEANDCENTER_BROWSER_WINDOW_CHANNEL_NAME =
     '924a9a7e-b58f-4940-a5b3-c281a1ed621e';
+export const IPC_FROMRENDERER_GET_APP_PATH_CHANNEL_NAME = '5c13cdf4-ec5f-441a-8a0c-f755e1026d3d';
 export const IPC_FROMBROWSERWINDOW_ENTERFULLSCREEN_CHANNEL_NAME =
     '0a25c6e8-0108-4943-8c45-809bdf30d811';
 export const IPC_FROMBROWSERWINDOW_MAXIMIZE_CHANNEL_NAME = 'bef38a72-98cb-44c0-ba95-96f8f2cc658c';

diff --git a/src/electron/ipc/ipc-renderer-shim.ts b/src/electron/ipc/ipc-renderer-shim.ts
@@ -8,6 +8,7 @@ import {
     IPC_FROMBROWSERWINDOW_MAXIMIZE_CHANNEL_NAME,
     IPC_FROMBROWSERWINDOW_UNMAXIMIZE_CHANNEL_NAME,
     IPC_FROMRENDERER_CLOSE_BROWSERWINDOW_CHANNEL_NAME,
+    IPC_FROMRENDERER_GET_APP_PATH_CHANNEL_NAME,
     IPC_FROMRENDERER_MAIN_WINDOW_INITIALIZED_CHANNEL_NAME,
     IPC_FROMRENDERER_MAXIMIZE_BROWSER_WINDOW_CHANNEL_NAME,
     IPC_FROMRENDERER_MINIMIZE_BROWSER_WINDOW_CHANNEL_NAME,
@@ -46,6 +47,10 @@ export class IpcRendererShim {
     public readonly fromBrowserWindowUnmaximize = new Action<void>();
     public readonly fromBrowserWindowEnterFullScreen = new Action<void>();
 
+    public getAppPath = async (): Promise<string> => {
+        return await this.ipcRenderer.invoke(IPC_FROMRENDERER_GET_APP_PATH_CHANNEL_NAME);
+    };
+
     // Call these methods to send data FROM renderer process
     public initializeWindow = (): void => {
         this.ipcRenderer.send(IPC_FROMRENDERER_MAIN_WINDOW_INITIALIZED_CHANNEL_NAME);