Merge branch 'master' of https://github.com/Azure/cosmos-explorer into feature/materialized-views

less/Common/Constants.less

@@ -248,6 +248,10 @@
   outline: 1px dashed @FocusColor;
 }
 
+.focusedBorder() {
+  border: 1px dashed @FocusColor;
+}
+
 /************************************************************************************************
                                Common Toggle Switch
 *************************************************************************************************/

src/Common/Constants.ts

@@ -533,6 +533,9 @@ export class ariaLabelForLearnMoreLink {
 export class MaterializedViewsLabels {
   public static readonly NewMaterializedView: string = "New Materialized View";
 }
+export class FeedbackLabels {
+  public static readonly provideFeedback: string = "Provide feedback";
+}
 
 export const QueryCopilotSampleDatabaseId = "CopilotSampleDB";
 export const QueryCopilotSampleContainerId = "SampleContainer";

src/Explorer/Controls/Settings/SettingsSubComponents/MaterializedViewSourceComponent.tsx

@@ -51,7 +51,9 @@ export const MaterializedViewSourceComponent: React.FC<MaterializedViewSourceCom
     let disposed = false;
     const initMonaco = async () => {
       const monacoInstance = await loadMonaco();
-      if (disposed || !editorContainerRef.current) return;
+      if (disposed || !editorContainerRef.current) {
+        return;
+      }
 
       editorRef.current = monacoInstance.editor.create(editorContainerRef.current, {
         value: jsonValue,
@@ -86,11 +88,7 @@ export const MaterializedViewSourceComponent: React.FC<MaterializedViewSourceCom
           overflow: "hidden",
         }}
       />
-      <PrimaryButton
+      <PrimaryButton text="Add view" styles={{ root: { width: "fit-content", marginTop: 12 } }} onClick={() => {}} />
-        text="Add view"
-        styles={{ root: { width: "fit-content", marginTop: 12 } }}
-        onClick={() => console.log("Add view clicked")}
-      />
     </div>
   );
 };

src/Explorer/Menus/NotificationConsole/NotificationConsole.less

@@ -37,6 +37,10 @@
                 background-color:@NotificationHigh;
         }
         
+        &:focus {
+            .focusedBorder();
+        }
+
         .statusBar {
             .dataTypeIcons {
                 cursor: pointer;

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -81,10 +81,6 @@ export class NotificationConsoleComponent extends React.Component<
     }
   }
 
-  public setElememntRef = (element: HTMLElement): void => {
-    this.consoleHeaderElement = element;
-  };
-
   public render(): JSX.Element {
     const numInProgress = this.state.allConsoleData.filter(
       (data: ConsoleData) => data.type === ConsoleDataType.InProgress,
@@ -101,7 +97,9 @@ export class NotificationConsoleComponent extends React.Component<
         <div
           className="notificationConsoleHeader"
           id="notificationConsoleHeader"
-          ref={this.setElememntRef}
+          role="button"
+          aria-label="Console"
+          aria-expanded={this.props.isConsoleExpanded}
           onClick={() => this.expandCollapseConsole()}
           onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onExpandCollapseKeyPress(event)}
           tabIndex={0}
@@ -129,14 +127,7 @@ export class NotificationConsoleComponent extends React.Component<
               </span>
             </span>
           </div>
-          <div
+          <div className="expandCollapseButton" data-test="NotificationConsole/ExpandCollapseButton">
-            className="expandCollapseButton"
-            data-test="NotificationConsole/ExpandCollapseButton"
-            role="button"
-            tabIndex={0}
-            aria-label="Console"
-            aria-expanded={this.props.isConsoleExpanded}
-          >
             <img
               src={this.props.isConsoleExpanded ? ChevronDownIcon : ChevronUpIcon}
               alt={this.props.isConsoleExpanded ? "Collapse icon" : "Expand icon"}
@@ -259,9 +250,6 @@ export class NotificationConsoleComponent extends React.Component<
   }
 
   private onConsoleWasExpanded = (): void => {
-    if (this.props.isConsoleExpanded && this.consoleHeaderElement) {
-      this.consoleHeaderElement.focus();
-    }
     useNotificationConsole.getState().setConsoleAnimationFinished(true);
   };
 

src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap

@@ -5,10 +5,13 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
   className="notificationConsoleContainer"
 >
   <div
+    aria-expanded={false}
+    aria-label="Console"
     className="notificationConsoleHeader"
     id="notificationConsoleHeader"
     onClick={[Function]}
     onKeyDown={[Function]}
+    role="button"
     tabIndex={0}
   >
     <div
@@ -71,12 +74,8 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
       </span>
     </div>
     <div
-      aria-expanded={false}
-      aria-label="Console"
       className="expandCollapseButton"
       data-test="NotificationConsole/ExpandCollapseButton"
-      role="button"
-      tabIndex={0}
     >
       <img
         alt="Expand icon"
@@ -176,10 +175,13 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
   className="notificationConsoleContainer"
 >
   <div
+    aria-expanded={false}
+    aria-label="Console"
     className="notificationConsoleHeader"
     id="notificationConsoleHeader"
     onClick={[Function]}
     onKeyDown={[Function]}
+    role="button"
     tabIndex={0}
   >
     <div
@@ -244,12 +246,8 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
       </span>
     </div>
     <div
-      aria-expanded={false}
-      aria-label="Console"
       className="expandCollapseButton"
       data-test="NotificationConsole/ExpandCollapseButton"
-      role="button"
-      tabIndex={0}
     >
       <img
         alt="Expand icon"

src/Explorer/Panes/AddMaterializedViewPanel/AddMaterializedViewPanel.test.tsx

@@ -1,20 +1,27 @@
 import { shallow, ShallowWrapper } from "enzyme";
 import Explorer from "Explorer/Explorer";
-import { AddMaterializedViewPanel, AddMaterializedViewPanelProps } from "Explorer/Panes/AddMaterializedViewPanel/AddMaterializedViewPanel";
+import {
+  AddMaterializedViewPanel,
+  AddMaterializedViewPanelProps,
+} from "Explorer/Panes/AddMaterializedViewPanel/AddMaterializedViewPanel";
 import React, { Component } from "react";
 
 const props: AddMaterializedViewPanelProps = {
-  explorer: new Explorer()
+  explorer: new Explorer(),
 };
 
 describe("AddMaterializedViewPanel", () => {
   it("render default panel", () => {
-    const wrapper: ShallowWrapper<AddMaterializedViewPanelProps, {}, Component> = shallow(<AddMaterializedViewPanel {...props} />);
+    const wrapper: ShallowWrapper<AddMaterializedViewPanelProps, object, Component> = shallow(
+      <AddMaterializedViewPanel {...props} />,
+    );
     expect(wrapper).toMatchSnapshot();
   });
 
   it("should render form", () => {
-    const wrapper: ShallowWrapper<AddMaterializedViewPanelProps, {}, Component> = shallow(<AddMaterializedViewPanel {...props} />);
+    const wrapper: ShallowWrapper<AddMaterializedViewPanelProps, object, Component> = shallow(
+      <AddMaterializedViewPanel {...props} />,
+    );
     const form = wrapper.find("form").first();
     expect(form).toBeDefined();
   });

src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx

@@ -18,7 +18,7 @@ import {
   Text,
   TextField,
 } from "@fluentui/react";
-import { HttpStatusCodes, NormalizedEventKey } from "Common/Constants";
+import { FeedbackLabels, HttpStatusCodes, NormalizedEventKey } from "Common/Constants";
 import { handleError } from "Common/ErrorHandlingUtils";
 import QueryError, { QueryErrorSeverity } from "Common/QueryError";
 import { createUri } from "Common/UrlUtility";
@@ -579,7 +579,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                 <Stack horizontal verticalAlign="center" style={{ maxHeight: 20 }}>
                   {userContext.feedbackPolicies?.policyAllowFeedback && (
                     <Stack horizontal verticalAlign="center">
-                      <Text style={{ fontSize: 12 }}>Provide feedback</Text>
+                      <Text style={{ fontSize: 12 }}>{FeedbackLabels.provideFeedback}</Text>
                       {showCallout && !hideFeedbackModalForLikedQueries && (
                         <Callout
                           role="status"
@@ -629,8 +629,9 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                       <IconButton
                         id="likeBtn"
                         style={{ marginLeft: 10 }}
-                        aria-label="Like"
+                        aria-label={FeedbackLabels.provideFeedback}
-                        role="toggle"
+                        role="button"
+                        title="Like"
                         iconProps={{ iconName: likeQuery === true ? "LikeSolid" : "Like" }}
                         onClick={() => {
                           setShowCallout(!likeQuery);
@@ -648,8 +649,9 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                       />
                       <IconButton
                         style={{ margin: "0 4px" }}
-                        role="toggle"
+                        role="button"
-                        aria-label="Dislike"
+                        aria-label={FeedbackLabels.provideFeedback}
+                        title="Dislike"
                         iconProps={{ iconName: dislikeQuery === true ? "DislikeSolid" : "Dislike" }}
                         onClick={() => {
                           let toggleStatusValue = "Unpressed";