fix minor issues in query assist UI (opensearch-project#1939)

Signed-off-by: Joshua Li <[email protected]>
ps48 · Jul 16, 2024 · 9eb9980 · 9eb9980
1 parent b328720
commit 9eb9980
Show file tree

Hide file tree

Showing 12 changed files with 215 additions and 12 deletions.
diff --git a/public/components/application_analytics/__tests__/__snapshots__/log_config.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/log_config.test.tsx.snap
@@ -89,6 +89,12 @@ exports[`Log Config component renders empty log config 1`] = `
         "registerLeft": [MockFunction],
         "registerRight": [MockFunction],
       },
+      "navGroup": Object {
+        "getCurrentNavGroup$": [MockFunction],
+        "getNavGroupEnabled": [MockFunction],
+        "getNavGroupsMap$": [MockFunction],
+        "setCurrentNavGroup": [MockFunction],
+      },
       "navLinks": Object {
         "enableForcedAppSwitcherNavigation": [MockFunction],
         "get": [MockFunction],
@@ -712,6 +718,12 @@ exports[`Log Config component renders with query 1`] = `
         "registerLeft": [MockFunction],
         "registerRight": [MockFunction],
       },
+      "navGroup": Object {
+        "getCurrentNavGroup$": [MockFunction],
+        "getNavGroupEnabled": [MockFunction],
+        "getNavGroupsMap$": [MockFunction],
+        "setCurrentNavGroup": [MockFunction],
+      },
       "navLinks": Object {
         "enableForcedAppSwitcherNavigation": [MockFunction],
         "get": [MockFunction],

diff --git a/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap
@@ -89,6 +89,12 @@ exports[`Service Config component renders empty service config 1`] = `
         "registerLeft": [MockFunction],
         "registerRight": [MockFunction],
       },
+      "navGroup": Object {
+        "getCurrentNavGroup$": [MockFunction],
+        "getNavGroupEnabled": [MockFunction],
+        "getNavGroupsMap$": [MockFunction],
+        "setCurrentNavGroup": [MockFunction],
+      },
       "navLinks": Object {
         "enableForcedAppSwitcherNavigation": [MockFunction],
         "get": [MockFunction],
@@ -1282,6 +1288,12 @@ exports[`Service Config component renders with one service selected 1`] = `
         "registerLeft": [MockFunction],
         "registerRight": [MockFunction],
       },
+      "navGroup": Object {
+        "getCurrentNavGroup$": [MockFunction],
+        "getNavGroupEnabled": [MockFunction],
+        "getNavGroupsMap$": [MockFunction],
+        "setCurrentNavGroup": [MockFunction],
+      },
       "navLinks": Object {
         "enableForcedAppSwitcherNavigation": [MockFunction],
         "get": [MockFunction],

diff --git a/public/components/application_analytics/__tests__/__snapshots__/trace_config.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/trace_config.test.tsx.snap
@@ -88,6 +88,12 @@ exports[`Trace Config component renders empty trace config 1`] = `
         "registerLeft": [MockFunction],
         "registerRight": [MockFunction],
       },
+      "navGroup": Object {
+        "getCurrentNavGroup$": [MockFunction],
+        "getNavGroupEnabled": [MockFunction],
+        "getNavGroupsMap$": [MockFunction],
+        "setCurrentNavGroup": [MockFunction],
+      },
       "navLinks": Object {
         "enableForcedAppSwitcherNavigation": [MockFunction],
         "get": [MockFunction],
@@ -994,6 +1000,12 @@ exports[`Trace Config component renders with one trace selected 1`] = `
         "registerLeft": [MockFunction],
         "registerRight": [MockFunction],
       },
+      "navGroup": Object {
+        "getCurrentNavGroup$": [MockFunction],
+        "getNavGroupEnabled": [MockFunction],
+        "getNavGroupsMap$": [MockFunction],
+        "setCurrentNavGroup": [MockFunction],
+      },
       "navLinks": Object {
         "enableForcedAppSwitcherNavigation": [MockFunction],
         "get": [MockFunction],

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/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap
@@ -1230,6 +1230,12 @@ exports[`Panels View Component renders panel view container with visualizations
           "registerLeft": [MockFunction],
           "registerRight": [MockFunction],
         },
+        "navGroup": Object {
+          "getCurrentNavGroup$": [MockFunction],
+          "getNavGroupEnabled": [MockFunction],
+          "getNavGroupsMap$": [MockFunction],
+          "setCurrentNavGroup": [MockFunction],
+        },
         "navLinks": Object {
           "enableForcedAppSwitcherNavigation": [MockFunction],
           "get": [MockFunction],
@@ -3019,6 +3025,12 @@ exports[`Panels View Component renders panel view container with visualizations
                           "registerLeft": [MockFunction],
                           "registerRight": [MockFunction],
                         },
+                        "navGroup": Object {
+                          "getCurrentNavGroup$": [MockFunction],
+                          "getNavGroupEnabled": [MockFunction],
+                          "getNavGroupsMap$": [MockFunction],
+                          "setCurrentNavGroup": [MockFunction],
+                        },
                         "navLinks": Object {
                           "enableForcedAppSwitcherNavigation": [MockFunction],
                           "get": [MockFunction],
@@ -3465,6 +3477,12 @@ exports[`Panels View Component renders panel view container without visualizatio
           "registerLeft": [MockFunction],
           "registerRight": [MockFunction],
         },
+        "navGroup": Object {
+          "getCurrentNavGroup$": [MockFunction],
+          "getNavGroupEnabled": [MockFunction],
+          "getNavGroupsMap$": [MockFunction],
+          "setCurrentNavGroup": [MockFunction],
+        },
         "navLinks": Object {
           "enableForcedAppSwitcherNavigation": [MockFunction],
           "get": [MockFunction],
@@ -5138,6 +5156,12 @@ exports[`Panels View Component renders panel view container without visualizatio
                           "registerLeft": [MockFunction],
                           "registerRight": [MockFunction],
                         },
+                        "navGroup": Object {
+                          "getCurrentNavGroup$": [MockFunction],
+                          "getNavGroupEnabled": [MockFunction],
+                          "getNavGroupsMap$": [MockFunction],
+                          "setCurrentNavGroup": [MockFunction],
+                        },
                         "navLinks": Object {
                           "enableForcedAppSwitcherNavigation": [MockFunction],
                           "get": [MockFunction],

diff --git a/...s/custom_panels/panel_modules/panel_grid/__tests__/__snapshots__/panel_grid.test.tsx.snap b/...s/custom_panels/panel_modules/panel_grid/__tests__/__snapshots__/panel_grid.test.tsx.snap
@@ -246,6 +246,12 @@ exports[`Panel Grid Component renders panel grid component with empty visualizat
         "registerLeft": [MockFunction],
         "registerRight": [MockFunction],
       },
+      "navGroup": Object {
+        "getCurrentNavGroup$": [MockFunction],
+        "getNavGroupEnabled": [MockFunction],
+        "getNavGroupsMap$": [MockFunction],
+        "setCurrentNavGroup": [MockFunction],
+      },
       "navLinks": Object {
         "enableForcedAppSwitcherNavigation": [MockFunction],
         "get": [MockFunction],

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();

diff --git a/public/components/metrics/view/__tests__/__snapshots__/metrics_grid.test.tsx.snap b/public/components/metrics/view/__tests__/__snapshots__/metrics_grid.test.tsx.snap
@@ -99,6 +99,12 @@ exports[`Metrics Grid Component renders Metrics Grid Component 1`] = `
           "registerLeft": [MockFunction],
           "registerRight": [MockFunction],
         },
+        "navGroup": Object {
+          "getCurrentNavGroup$": [MockFunction],
+          "getNavGroupEnabled": [MockFunction],
+          "getNavGroupsMap$": [MockFunction],
+          "setCurrentNavGroup": [MockFunction],
+        },
         "navLinks": Object {
           "enableForcedAppSwitcherNavigation": [MockFunction],
           "get": [MockFunction],
@@ -261,6 +267,12 @@ exports[`Metrics Grid Component renders Metrics Grid Component 1`] = `
             "registerLeft": [MockFunction],
             "registerRight": [MockFunction],
           },
+          "navGroup": Object {
+            "getCurrentNavGroup$": [MockFunction],
+            "getNavGroupEnabled": [MockFunction],
+            "getNavGroupsMap$": [MockFunction],
+            "setCurrentNavGroup": [MockFunction],
+          },
           "navLinks": Object {
             "enableForcedAppSwitcherNavigation": [MockFunction],
             "get": [MockFunction],

diff --git a/...ents/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard.test.tsx.snap b/...ents/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard.test.tsx.snap
@@ -102,6 +102,12 @@ exports[`Dashboard component renders dashboard 1`] = `
         "registerLeft": [MockFunction],
         "registerRight": [MockFunction],
       },
+      "navGroup": Object {
+        "getCurrentNavGroup$": [MockFunction],
+        "getNavGroupEnabled": [MockFunction],
+        "getNavGroupsMap$": [MockFunction],
+        "setCurrentNavGroup": [MockFunction],
+      },
       "navLinks": Object {
         "enableForcedAppSwitcherNavigation": [MockFunction],
         "get": [MockFunction],
@@ -441,6 +447,12 @@ exports[`Dashboard component renders dashboard 1`] = `
           "registerLeft": [MockFunction],
           "registerRight": [MockFunction],
         },
+        "navGroup": Object {
+          "getCurrentNavGroup$": [MockFunction],
+          "getNavGroupEnabled": [MockFunction],
+          "getNavGroupsMap$": [MockFunction],
+          "setCurrentNavGroup": [MockFunction],
+        },
         "navLinks": Object {
           "enableForcedAppSwitcherNavigation": [MockFunction],
           "get": [MockFunction],
@@ -1259,6 +1271,12 @@ exports[`Dashboard component renders empty dashboard 1`] = `
         "registerLeft": [MockFunction],
         "registerRight": [MockFunction],
       },
+      "navGroup": Object {
+        "getCurrentNavGroup$": [MockFunction],
+        "getNavGroupEnabled": [MockFunction],
+        "getNavGroupsMap$": [MockFunction],
+        "setCurrentNavGroup": [MockFunction],
+      },
       "navLinks": Object {
         "enableForcedAppSwitcherNavigation": [MockFunction],
         "get": [MockFunction],
@@ -1597,6 +1615,12 @@ exports[`Dashboard component renders empty dashboard 1`] = `
           "registerLeft": [MockFunction],
           "registerRight": [MockFunction],
         },
+        "navGroup": Object {
+          "getCurrentNavGroup$": [MockFunction],
+          "getNavGroupEnabled": [MockFunction],
+          "getNavGroupsMap$": [MockFunction],
+          "setCurrentNavGroup": [MockFunction],
+        },
         "navLinks": Object {
           "enableForcedAppSwitcherNavigation": [MockFunction],
           "get": [MockFunction],
@@ -2415,6 +2439,12 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = `
         "registerLeft": [MockFunction],
         "registerRight": [MockFunction],
       },
+      "navGroup": Object {
+        "getCurrentNavGroup$": [MockFunction],
+        "getNavGroupEnabled": [MockFunction],
+        "getNavGroupsMap$": [MockFunction],
+        "setCurrentNavGroup": [MockFunction],
+      },
       "navLinks": Object {
         "enableForcedAppSwitcherNavigation": [MockFunction],
         "get": [MockFunction],
@@ -2755,6 +2785,12 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = `
           "registerLeft": [MockFunction],
           "registerRight": [MockFunction],
         },
+        "navGroup": Object {
+          "getCurrentNavGroup$": [MockFunction],
+          "getNavGroupEnabled": [MockFunction],
+          "getNavGroupsMap$": [MockFunction],
+          "setCurrentNavGroup": [MockFunction],
+        },
         "navLinks": Object {
           "enableForcedAppSwitcherNavigation": [MockFunction],
           "get": [MockFunction],