Adding CRI fixes to pre RBAC commit (#1902)

Co-authored-by: Asier Isayas <aisayas@microsoft.com>

src/Explorer/Controls/ThroughputInput/ThroughputInput.less

@@ -20,7 +20,7 @@
   outline-offset: 2px;
 }
 
-.outlineNone {
+.outlineNone{
   outline: none !important;
 }
 
@@ -28,8 +28,3 @@
 .deleteQuery:focus::after {
   outline: none !important;
 }
-
-.highlightedButtonStyles {
-  outline: 1px dashed back;
-  background-color: #ebebeb;
-}

src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx

@@ -34,13 +34,12 @@ import { SamplePrompts, SamplePromptsProps } from "Explorer/QueryCopilot/Shared/
 import { Action } from "Shared/Telemetry/TelemetryConstants";
 import { userContext } from "UserContext";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
-import React, { useCallback, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import HintIcon from "../../../images/Hint.svg";
 import RecentIcon from "../../../images/Recent.svg";
 import errorIcon from "../../../images/close-black.svg";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { useTabs } from "../../hooks/useTabs";
-import "../Controls/ThroughputInput/ThroughputInput.less";
 import { useCopilotStore } from "../QueryCopilot/QueryCopilotContext";
 import { useSelectedNode } from "../useSelectedNode";
 
@@ -109,7 +108,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
     setErrorMessage,
     errorMessage,
   } = useCopilotStore();
-  const [focusedIndex, setFocusedIndex] = useState(-1);
+
   const sampleProps: SamplePromptsProps = {
     isSamplePromptsOpen: isSamplePromptsOpen,
     setIsSamplePromptsOpen: setIsSamplePromptsOpen,
@@ -302,41 +301,6 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
       return "Content is updated";
     }
   };
-  const openSamplePrompts = () => {
-    inputEdited.current = true;
-    setShowSamplePrompts(true);
-  };
-  const suggestionHistory = filteredHistories.concat(filteredSuggestedPrompts.map((item) => item.text));
-  const handleKeyDown: React.KeyboardEventHandler = (e) => {
-    const { key } = e;
-    if (key === "ArrowDown") {
-      setFocusedIndex((focusedIndex + 1) % suggestionHistory.length);
-    }
-    if (key === "ArrowUp") {
-      setFocusedIndex((focusedIndex + suggestionHistory.length - 1) % suggestionHistory.length);
-    }
-    if (key === "Enter") {
-      e.preventDefault();
-      handleSelection(focusedIndex);
-    }
-  };
-  const handleSelection = (selectedIndex: number) => {
-    const selectedItem = suggestionHistory[selectedIndex];
-    if (!selectedItem) {
-      return resetSearchComplete();
-    } else {
-      handlePromptSet(selectedItem);
-    }
-  };
-  const resetSearchComplete = useCallback(() => {
-    setFocusedIndex(-1);
-    setShowSamplePrompts(false);
-  }, []);
-
-  const handlePromptSet = (promptText: string) => {
-    inputEdited.current = true;
-    setUserPrompt(promptText);
-  };
 
   React.useEffect(() => {
     useTabs.getState().setIsQueryErrorThrown(false);
@@ -367,13 +331,23 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
               id="naturalLanguageInput"
               value={userPrompt}
               onChange={handleUserPromptChange}
-              onClick={openSamplePrompts}
+              onClick={() => {
-              onFocus={() => setShowSamplePrompts(true)}
+                inputEdited.current = true;
-              onKeyDown={handleKeyDown}
+                setShowSamplePrompts(true);
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && userPrompt) {
+                  inputEdited.current = true;
+                  startGenerateQueryProcess();
+                }
+              }}
               style={{ lineHeight: 30 }}
               styles={{
                 root: { width: "100%" },
-                suffix: { background: "none", padding: 0 },
+                suffix: {
+                  background: "none",
+                  padding: 0,
+                },
                 fieldGroup: {
                   borderRadius: 4,
                   borderColor: "#D1D1D1",
@@ -386,8 +360,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                 },
               }}
               disabled={isGeneratingQuery}
-              autoComplete="list"
+              autoComplete="off"
-              aria-expanded={showSamplePrompts}
               placeholder="Ask a question in natural language and we’ll generate the query for you."
               aria-labelledby="copilot-textfield-label"
               onRenderSuffix={() => {
@@ -396,10 +369,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                     iconProps={{ iconName: "Send" }}
                     disabled={isGeneratingQuery || !userPrompt.trim()}
                     style={{ background: "none" }}
-                    onClick={() => {
+                    onClick={() => startGenerateQueryProcess()}
-                      startGenerateQueryProcess();
-                      setShowSamplePrompts(false);
-                    }}
                     aria-label="Send"
                   />
                 );
@@ -464,7 +434,6 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                           }}
                           onRenderIcon={() => <Image src={RecentIcon} styles={{ root: { overflow: "unset" } }} />}
                           styles={promptStyles}
-                          className={focusedIndex === i ? "highlightedButtonStyles" : "buttonstyles"}
                         >
                           {history}
                         </DefaultButton>
@@ -485,7 +454,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                       >
                         Suggested Prompts
                       </Text>
-                      {filteredSuggestedPrompts.map((prompt, index) => (
+                      {filteredSuggestedPrompts.map((prompt) => (
                         <DefaultButton
                           key={prompt.id}
                           onClick={() => {
@@ -495,7 +464,6 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                           }}
                           onRenderIcon={() => <Image src={HintIcon} />}
                           styles={promptStyles}
-                          className={focusedIndex === filteredHistories.length + index ? "highlightedButtonStyles" : ""}
                         >
                           {prompt.text}
                         </DefaultButton>