[Explore] minor update on the edit query placement (opensearch-project#10259)

* minor update on the edit query placement

Signed-off-by: Justin Kim <jungkm@amazon.com>

* Changeset file for PR opensearch-project#10259 created/updated

---------

Signed-off-by: Justin Kim <jungkm@amazon.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

Author: angle943

changelogs/fragments/10259.yml

@@ -0,0 +1,2 @@
+refactor:
+- Change query editor ui ([#10259](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/10259))

src/plugins/explore/public/components/query_panel/query_panel_editor/query_panel_editor.scss

@@ -76,6 +76,7 @@
 
   &__promptIcon {
     color: $ouiColorDisabledText;
+    filter: brightness(0.65);
     position: absolute;
     left: $ouiSizeXXS;
     top: 9px; // hard-coding to align it to editor

src/plugins/explore/public/components/query_panel/query_panel_generated_query/query_panel_generated_query.scss

@@ -18,14 +18,10 @@
 
   &__query {
     color: $ouiColorDisabledText;
-    flex: 1;
     // stylelint-disable-next-line @osd/stylelint/no_restricted_properties
     font-family: $ouiCodeFontFamily;
-    word-wrap: anywhere;
-  }
-
-  &__rightSection {
-    align-items: center;
-    display: flex;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 }

src/plugins/explore/public/components/query_panel/query_panel_generated_query/query_panel_generated_query.tsx

@@ -6,12 +6,16 @@
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { i18n } from '@osd/i18n';
-import { EuiButtonEmpty, EuiIcon, EuiText } from '@elastic/eui';
+import { EuiBadge, EuiIcon, EuiText } from '@elastic/eui';
 import { selectLastExecutedTranslatedQuery } from '../../../application/utils/state_management/selectors';
 import { useEditorFocus, useSetEditorTextWithQuery } from '../../../application/hooks';
 import { clearLastExecutedData } from '../../../application/utils/state_management/slices';
 import './query_panel_generated_query.scss';
 
+const editQueryText = i18n.translate('explore.queryPanel.queryPanelGeneratedQuery.editQuery', {
+  defaultMessage: 'Edit query',
+});
+
 export const QueryPanelGeneratedQuery = () => {
   const lastExecutedTranslatedQuery = useSelector(selectLastExecutedTranslatedQuery);
   const setEditorTextWithQuery = useSetEditorTextWithQuery();
@@ -34,22 +38,17 @@ export const QueryPanelGeneratedQuery = () => {
       <EuiText className="exploreQueryPanelGeneratedQuery__query" size="s">
         {lastExecutedTranslatedQuery}
       </EuiText>
-      <div className="exploreQueryPanelGeneratedQuery__rightSection">
-        <EuiButtonEmpty
-          onClick={onEditClick}
-          data-test-subj="exploreQueryPanelGeneratedQuery_editQuery"
-          size="xs"
-        >
-          <div className="exploreQueryPanelGeneratedQuery__buttonTextWrapper">
-            <EuiIcon type="editorCodeBlock" size="s" />
-            <EuiText size="xs">
-              {i18n.translate('explore.queryPanel.queryPanelGeneratedQuery.editQuery', {
-                defaultMessage: 'Edit query',
-              })}
-            </EuiText>
-          </div>
-        </EuiButtonEmpty>
-      </div>
+      <EuiBadge
+        data-test-subj="exploreQueryPanelGeneratedQuery_editQuery"
+        onClick={onEditClick}
+        onClickAriaLabel={editQueryText}
+        color="hollow"
+      >
+        <div className="exploreQueryPanelGeneratedQuery__buttonTextWrapper">
+          <EuiIcon type="editorCodeBlock" size="s" />
+          <EuiText size="xs">{editQueryText}</EuiText>
+        </div>
+      </EuiBadge>
     </div>
   );
 };