Fix "See some examples" requires non-empty query [BUG] (#82) (#84)

* fix: Style conflict Signed-off-by: Mingkun Ma <[email protected]> * Add label to search button Signed-off-by: Mingkun Ma <[email protected]> * fix: Default tab spacing in query box Signed-off-by: Mingkun Ma <[email protected]> * fix: Query Box on blur issue Signed-off-by: Mingkun Ma <[email protected]> * feat: Add default query Signed-off-by: Mingkun Ma <[email protected]> Signed-off-by: Mingkun Ma <[email protected]> Co-authored-by: Mingkun Ma <[email protected]> (cherry picked from commit 047700f) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Signed-off-by: Mingkun Ma <[email protected]> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Mingkun Ma <[email protected]>
opensearch-project · Nov 8, 2022 · 1f9ac3b · 1f9ac3b
1 parent 97f730a
commit 1f9ac3b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 12 deletions.
diff --git a/public/components/query_compare/search_result/index.tsx b/public/components/query_compare/search_result/index.tsx
@@ -15,13 +15,15 @@ import { SearchResults, QueryError, QueryStringError } from '../../../types/inde
 import { ResultComponents } from './result_components/result_components';
 import { useSearchRelevanceContext, initialQueryErrorState } from '../../../contexts';
 
+const DEFAULT_QUERY = '{}';
+
 interface SearchResultProps {
   http: CoreStart['http'];
 }
 
 export const SearchResult = ({ http }: SearchResultProps) => {
-  const [queryString1, setQueryString1] = useState('');
-  const [queryString2, setQueryString2] = useState('');
+  const [queryString1, setQueryString1] = useState(DEFAULT_QUERY);
+  const [queryString2, setQueryString2] = useState(DEFAULT_QUERY);
   const [queryResult1, setQueryResult1] = useState<SearchResults>({} as any);
   const [queryResult2, setQueryResult2] = useState<SearchResults>({} as any);
   const [searchBarValue, setSearchBarValue] = useState('');

diff --git a/...components/query_compare/search_result/search_components/search_configs/search_config.tsx b/...components/query_compare/search_result/search_components/search_configs/search_config.tsx
@@ -108,6 +108,13 @@ export const SearchConfig: FunctionComponent<SearchConfigProps> = ({
         label="Query"
         error={!!queryError.queryString.length && <span>{queryError.queryString}</span>}
         isInvalid={!!queryError.queryString.length}
+        labelAppend={
+          <EuiText size="xs">
+            <EuiButtonEmpty size="xs" color="primary" onClick={() => setShowFlyout(true)}>
+              Help
+            </EuiButtonEmpty>
+          </EuiText>
+        }
       >
         <EuiCodeEditor
           mode="json"
@@ -130,16 +137,7 @@ export const SearchConfig: FunctionComponent<SearchConfigProps> = ({
       <EuiText>
         <p style={{ fontSize: '14px', fontWeight: '400', lineHeight: '18px' }}>
           Enter a query in OpenSearch Query DSL. Use %SearchText% to refer to the text in the search
-          bar. Need more help?{' '}
-          <EuiButtonEmpty
-            size="xs"
-            color="primary"
-            onClick={() => setShowFlyout(true)}
-            style={{ margin: '0 -8px' }}
-          >
-            See some examples
-          </EuiButtonEmpty>
-          .
+          bar.
         </p>
       </EuiText>
     </>