Merge branch 'main' into update-java-version

sumukhswamy · Jul 17, 2024 · 01404e5 · 01404e5
2 parents 1a45bca + 9eb9980
commit 01404e5
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 12 deletions.
diff --git a/public/components/common/search/query_area.tsx b/public/components/common/search/query_area.tsx
@@ -74,7 +74,7 @@ export function QueryArea({
     <EuiPanel paddingSize="none">
       <EuiAccordion
         id="ppl-query-accordion"
-        buttonContent="PPL Query"
+        buttonContent="Query Assist"
         initialIsOpen
         className="ppl-query-accordion"
         // this paddingSize is for accordion children

diff --git a/public/components/event_analytics/explorer/no_results.tsx b/public/components/event_analytics/explorer/no_results.tsx
@@ -262,11 +262,20 @@ export const NoResults = ({ tabId, dataSourceConnectionType, eventsLoading }: No
           ) : (
             <EuiEmptyPrompt
               iconType={'editorCodeBlock'}
-              title={<h2>Get started</h2>}
+              title={
+                <h2>
+                  <FormattedMessage
+                    id="observability.noResults.queryAssist.getStarted.title"
+                    defaultMessage="Get started"
+                  />
+                </h2>
+              }
               body={
                 <p>
-                  Run a query to view results, or use the Natural Language Query Generator to
-                  automatically generate complex queries using simple conversational prompts.
+                  <FormattedMessage
+                    id="observability.noResults.queryAssist.getStarted.body"
+                    defaultMessage="Enter your natural language question to automatically generate summaries and complex queries using simple conversational prompts."
+                  />
                 </p>
               }
             />

diff --git a/public/components/event_analytics/explorer/query_assist/input.tsx b/public/components/event_analytics/explorer/query_assist/input.tsx
@@ -127,6 +127,10 @@ export const QueryAssistInput: React.FC<React.PropsWithChildren<Props>> = (props
   const inputRef = useRef<HTMLInputElement>(null);
   const selectedIndex = props.selectedIndex[0]?.label || '';
 
+  useEffect(() => {
+    if (inputRef.current) inputRef.current.focus();
+  }, []);
+
   useEffect(() => {
     if (
       props.nlqInput.trim().length === 0 ||
@@ -321,17 +325,21 @@ export const QueryAssistInput: React.FC<React.PropsWithChildren<Props>> = (props
 
   return (
     <>
-      <EuiFlexGroup gutterSize="s">
+      <EuiFlexGroup gutterSize="none" alignItems="center" justifyContent="center">
+        <EuiFlexItem grow={false}>
+          <EuiIcon
+            className="euiFieldText"
+            style={{ padding: 8 }}
+            size="original"
+            type={chatLogo}
+          />
+        </EuiFlexItem>
         <EuiFlexItem>
           <EuiInputPopover
             input={
               <EuiFieldText
                 inputRef={inputRef}
-                placeholder={
-                  selectedIndex
-                    ? `Ask a natural language question about ${selectedIndex} to generate a query`
-                    : 'Select a data source or index to ask a question.'
-                }
+                placeholder="Ask me a question"
                 disabled={loading}
                 value={props.nlqInput}
                 onChange={(e) => {
@@ -342,7 +350,6 @@ export const QueryAssistInput: React.FC<React.PropsWithChildren<Props>> = (props
                   // listen to enter key manually. the cursor jumps to CodeEditor with EuiForm's onSubmit
                   if (e.key === 'Enter') runAndSummarize();
                 }}
-                prepend={<EuiIcon type={chatLogo} />}
                 fullWidth
                 onFocus={() => {
                   props.setNeedsUpdate(false);
@@ -359,8 +366,9 @@ export const QueryAssistInput: React.FC<React.PropsWithChildren<Props>> = (props
             }}
           >
             <EuiListGroup flush={true} bordered={false} wrapText={true} maxWidth={false}>
-              {HARDCODED_SUGGESTIONS[selectedIndex]?.map((question) => (
+              {HARDCODED_SUGGESTIONS[selectedIndex]?.map((question, i) => (
                 <EuiListGroupItem
+                  key={i}
                   onClick={() => {
                     props.setNlqInput(question);
                     inputRef.current?.focus();