From 1d3b672a14573871fc27a91432c2630b66d13afe Mon Sep 17 00:00:00 2001
From: Laurent Nguyen <laurent.nguyen@microsoft.com>
Date: Fri, 26 Jun 2020 16:52:28 +0200
Subject: [PATCH] Fix focus to match portal (#56)

---
 less/Common/Constants.less                     |  4 +++-
 less/documentDB.less                           | 18 +++++++++++-------
 .../FeaturePanel/FeaturePanelComponent.tsx     |  2 +-
 .../Controls/TreeComponent/TreeComponent.tsx   |  8 ++++++--
 .../__snapshots__/TreeComponent.test.tsx.snap  | 14 ++++++++++++++
 5 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/less/Common/Constants.less b/less/Common/Constants.less
index 4c9882ceb..face1837c 100644
--- a/less/Common/Constants.less
+++ b/less/Common/Constants.less
@@ -54,6 +54,8 @@
 
 @SelectionColor: #3074B0;
 
+@FocusColor: #00bcf2;
+
 /******************************************************************************
                                 METRICS
 /******************************************************************************/
@@ -198,7 +200,7 @@
 }
 
 .focus() {
-    outline: 1px dashed @AccentMedium;
+    outline: 1px dashed @FocusColor;
 }
 
 /************************************************************************************************
diff --git a/less/documentDB.less b/less/documentDB.less
index 9ef913527..4d3a2c9b7 100644
--- a/less/documentDB.less
+++ b/less/documentDB.less
@@ -14,6 +14,10 @@ body {
     font-family: @DataExplorerFont;
     font-size: 12px;
     height: 100%;
+
+    :focus {
+        .focus()
+    }
 }
 
 .float-right {
@@ -174,7 +178,7 @@ body {
                     &:active {
                         .active();
                     }
-                    
+
                     &:focus .urlTokenCopyTooltiptext, &:focus .urlTokenCopyTooltiptext {
                         .tooltipVisible();
                     }
@@ -362,7 +366,7 @@ body {
 }
 
 .splashLoaderContainer {
-    z-index: 5;    
+    z-index: 5;
     position: absolute;
     left: 0;
     top: 0;
@@ -1449,7 +1453,7 @@ p {
     .throughputModeRadio {
         vertical-align: text-bottom;
     }
-    
+
     .nonFirstRadio {
         margin-left: @LargeSpace;
     }
@@ -1484,7 +1488,7 @@ p {
 
     .largePartitionKeyDescription {
         margin: @DefaultSpace 0px 0px;
-    } 
+    }
 }
 
 .enableAnalyticalStorage {
@@ -2216,13 +2220,13 @@ a:link {
 
 .documentsGridHeaderContainer table thead tr {
     position: sticky;
-    top: 0;   
+    top: 0;
     th {
         position: sticky;
-        top: 0; 
+        top: 0;
         background-color: #fff !important;
         border-bottom: 1px solid #CCCCCC !important;
-    } 
+    }
 }
 
 .documentsGridHeader {
diff --git a/src/Explorer/Controls/FeaturePanel/FeaturePanelComponent.tsx b/src/Explorer/Controls/FeaturePanel/FeaturePanelComponent.tsx
index eb3dee367..dfc33a85a 100644
--- a/src/Explorer/Controls/FeaturePanel/FeaturePanelComponent.tsx
+++ b/src/Explorer/Controls/FeaturePanel/FeaturePanelComponent.tsx
@@ -133,7 +133,7 @@ export const FeaturePanelComponent: React.FunctionComponent = () => {
       .find(f => f.key === "feature.notebookserverurl")
       .reactState[1]("https://localhost:10001/12345/notebook/");
     stringFeatures.find(f => f.key === "feature.notebookservertoken").reactState[1]("token");
-    stringFeatures.find(f => f.key === "feature.notebookbasepath").reactState[1](".");
+    stringFeatures.find(f => f.key === "feature.notebookbasepath").reactState[1]("./notebooks");
     setPlatform(platformOptions.find(o => o.key === "Hosted"));
   };
 
diff --git a/src/Explorer/Controls/TreeComponent/TreeComponent.tsx b/src/Explorer/Controls/TreeComponent/TreeComponent.tsx
index 966e3e599..0bee76439 100644
--- a/src/Explorer/Controls/TreeComponent/TreeComponent.tsx
+++ b/src/Explorer/Controls/TreeComponent/TreeComponent.tsx
@@ -6,10 +6,9 @@
  */
 
 import * as React from "react";
-import * as ReactDOM from "react-dom";
 import * as Constants from "../../../Common/Constants";
 import AnimateHeight from "react-animate-height";
-import { IconButton } from "office-ui-fabric-react/lib/Button";
+import { IconButton, IButtonStyles } from "office-ui-fabric-react/lib/Button";
 import {
   DirectionalHint,
   IContextualMenuItemProps,
@@ -227,6 +226,10 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
 
   private renderContextMenuButton(node: TreeNode): JSX.Element {
     const menuItemLabel = "More";
+    const buttonStyles: Partial<IButtonStyles> = {
+      rootFocused: { outline: `1px dashed ${Constants.StyleConstants.FocusColor}` }
+    };
+
     return (
       <div ref={this.contextMenuRef} onContextMenu={this.onRightClick} onKeyPress={this.onMoreButtonKeyPress}>
         <IconButton
@@ -264,6 +267,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
               onRenderIcon: (props: any) => <img src={menuItem.iconSrc} alt="" />
             }))
           }}
+          styles={buttonStyles}
         />
       </div>
     );
diff --git a/src/Explorer/Controls/TreeComponent/__snapshots__/TreeComponent.test.tsx.snap b/src/Explorer/Controls/TreeComponent/__snapshots__/TreeComponent.test.tsx.snap
index 7c98828f7..d6e323cfc 100644
--- a/src/Explorer/Controls/TreeComponent/__snapshots__/TreeComponent.test.tsx.snap
+++ b/src/Explorer/Controls/TreeComponent/__snapshots__/TreeComponent.test.tsx.snap
@@ -191,6 +191,13 @@ exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`]
           }
         }
         name="More"
+        styles={
+          Object {
+            "rootFocused": Object {
+              "outline": "1px dashed undefined",
+            },
+          }
+        }
       />
     </div>
   </div>
@@ -314,6 +321,13 @@ exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents
           }
         }
         name="More"
+        styles={
+          Object {
+            "rootFocused": Object {
+              "outline": "1px dashed undefined",
+            },
+          }
+        }
       />
     </div>
   </div>