[Osquery] Add labels, move osquery schema link (elastic#132584)

klacabane · May 23, 2022 · 40df1f3 · 40df1f3
1 parent fbaf058
commit 40df1f3
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 31 deletions.
diff --git a/x-pack/plugins/osquery/cypress/integration/all/add_integration.spec.ts b/x-pack/plugins/osquery/cypress/integration/all/add_integration.spec.ts
@@ -101,7 +101,9 @@ describe('ALL - Add Integration', () => {
     findFormFieldByRowsLabelAndType('Name', 'Integration');
     findFormFieldByRowsLabelAndType('Scheduled agent policies (optional)', '{downArrow} {enter}');
     findAndClickButton('Add query');
-    cy.react('EuiComboBox', { props: { placeholder: 'Search for saved queries' } })
+    cy.react('EuiComboBox', {
+      props: { placeholder: 'Search for a query to run, or write a new query below' },
+    })
       .click()
       .type('{downArrow} {enter}');
     cy.contains(/^Save$/).click();

diff --git a/x-pack/plugins/osquery/cypress/screens/live_query.ts b/x-pack/plugins/osquery/cypress/screens/live_query.ts
@@ -14,4 +14,6 @@ export const RESULTS_TABLE = 'osqueryResultsTable';
 export const RESULTS_TABLE_BUTTON = 'dataGridFullScreenButton';
 export const RESULTS_TABLE_CELL_WRRAPER = 'EuiDataGridHeaderCellWrapper';
 export const getSavedQueriesDropdown = () =>
-  cy.react('EuiComboBox', { props: { placeholder: 'Search for saved queries' } });
+  cy.react('EuiComboBox', {
+    props: { placeholder: 'Search for a query to run, or write a new query below' },
+  });
diff --git a/x-pack/plugins/osquery/cypress/tasks/live_query.ts b/x-pack/plugins/osquery/cypress/tasks/live_query.ts
@@ -13,7 +13,7 @@ export const BIG_QUERY = 'select * from processes, users limit 200;';
 export const selectAllAgents = () => {
   cy.react('AgentsTable').find('input').should('not.be.disabled');
   cy.react('AgentsTable EuiComboBox', {
-    props: { placeholder: 'Select agents or groups' },
+    props: { placeholder: 'Select agents or groups to query' },
   }).click();
   cy.react('EuiFilterSelectItem').contains('All agents').should('exist');
   cy.react('AgentsTable EuiComboBox').type('{downArrow}{enter}{esc}');

diff --git a/x-pack/plugins/osquery/public/agents/agents_table.tsx b/x-pack/plugins/osquery/public/agents/agents_table.tsx
@@ -7,7 +7,7 @@
 
 import { find } from 'lodash/fp';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { EuiComboBox, EuiHealth, EuiHighlight, EuiSpacer } from '@elastic/eui';
+import { EuiComboBox, EuiHealth, EuiFormRow, EuiHighlight, EuiSpacer } from '@elastic/eui';
 import deepEqual from 'fast-deep-equal';
 
 import useDebounce from 'react-use/lib/useDebounce';
@@ -190,18 +190,20 @@ const AgentsTableComponent: React.FC<AgentsTableProps> = ({ agentSelection, onCh
 
   return (
     <div>
-      <EuiComboBox
-        data-test-subj="agentSelection"
-        placeholder={SELECT_AGENT_LABEL}
-        isLoading={modifyingSearch || groupsLoading || agentsLoading}
-        options={options}
-        isClearable={true}
-        fullWidth={true}
-        onSearchChange={onSearchChange}
-        selectedOptions={selectedOptions}
-        onChange={onSelection}
-        renderOption={renderOption}
-      />
+      <EuiFormRow label={AGENT_SELECTION_LABEL} fullWidth>
+        <EuiComboBox
+          data-test-subj="agentSelection"
+          placeholder={SELECT_AGENT_LABEL}
+          isLoading={modifyingSearch || groupsLoading || agentsLoading}
+          options={options}
+          isClearable={true}
+          fullWidth={true}
+          onSearchChange={onSearchChange}
+          selectedOptions={selectedOptions}
+          onChange={onSelection}
+          renderOption={renderOption}
+        />
+      </EuiFormRow>
       <EuiSpacer size="xs" />
       {numAgentsSelected > 0 ? <span>{generateSelectedAgentsMessage(numAgentsSelected)}</span> : ''}
     </div>

diff --git a/x-pack/plugins/osquery/public/agents/translations.ts b/x-pack/plugins/osquery/public/agents/translations.ts
@@ -40,7 +40,7 @@ export const AGENT_SELECTION_LABEL = i18n.translate('xpack.osquery.agents.select
 });
 
 export const SELECT_AGENT_LABEL = i18n.translate('xpack.osquery.agents.selectAgentLabel', {
-  defaultMessage: `Select agents or groups`,
+  defaultMessage: `Select agents or groups to query`,
 });
 
 export const ERROR_ALL_AGENTS = i18n.translate('xpack.osquery.agents.errorSearchDescription', {

diff --git a/x-pack/plugins/osquery/public/live_queries/form/index.tsx b/x-pack/plugins/osquery/public/live_queries/form/index.tsx
@@ -254,7 +254,6 @@ const LiveQueryFormComponent: React.FC<LiveQueryFormProps> = ({
                   disabled={isSavedQueryDisabled}
                   onChange={handleSavedQueryChange}
                 />
-                <EuiSpacer />
               </>
             )}
             <UseField

diff --git a/x-pack/plugins/osquery/public/live_queries/form/live_query_query_field.tsx b/x-pack/plugins/osquery/public/live_queries/form/live_query_query_field.tsx
@@ -9,7 +9,6 @@ import { EuiCodeBlock, EuiFormRow } from '@elastic/eui';
 import React, { useCallback } from 'react';
 import styled from 'styled-components';
 
-import { OsquerySchemaLink } from '../../components/osquery_schema_link';
 import { EuiCodeEditorProps, FieldHook } from '../../shared_imports';
 import { OsqueryEditor } from '../../editor';
 import { useKibana } from '../../common/lib/kibana';
@@ -45,7 +44,6 @@ const LiveQueryQueryFieldComponent: React.FC<LiveQueryQueryFieldProps> = ({
       isInvalid={typeof error === 'string'}
       error={error}
       fullWidth
-      labelAppend={<OsquerySchemaLink />}
       isDisabled={!permissions.writeLiveQueries || disabled}
     >
       {!permissions.writeLiveQueries || disabled ? (

diff --git a/x-pack/plugins/osquery/public/saved_queries/constants.ts b/x-pack/plugins/osquery/public/saved_queries/constants.ts
@@ -4,6 +4,20 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+import { i18n } from '@kbn/i18n';
 
 export const SAVED_QUERIES_ID = 'savedQueryList';
 export const SAVED_QUERY_ID = 'savedQuery';
+
+export const QUERIES_DROPDOWN_LABEL = i18n.translate(
+  'xpack.osquery.savedQueries.dropdown.searchFieldPlaceholder',
+  {
+    defaultMessage: `Search for a query to run, or write a new query below`,
+  }
+);
+export const QUERIES_DROPDOWN_SEARCH_FIELD_LABEL = i18n.translate(
+  'xpack.osquery.savedQueries.dropdown.searchFieldLabel',
+  {
+    defaultMessage: `Query`,
+  }
+);
diff --git a/x-pack/plugins/osquery/public/saved_queries/saved_queries_dropdown.tsx b/x-pack/plugins/osquery/public/saved_queries/saved_queries_dropdown.tsx
@@ -9,9 +9,9 @@ import { find } from 'lodash/fp';
 import { EuiCodeBlock, EuiFormRow, EuiComboBox, EuiTextColor } from '@elastic/eui';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { SimpleSavedObject } from '@kbn/core/public';
-import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n-react';
 import styled from 'styled-components';
+import { QUERIES_DROPDOWN_LABEL, QUERIES_DROPDOWN_SEARCH_FIELD_LABEL } from './constants';
+import { OsquerySchemaLink } from '../components/osquery_schema_link';
 
 import { useSavedQueries } from './use_saved_queries';
 import { useFormData } from '../shared_imports';
@@ -133,20 +133,14 @@ const SavedQueriesDropdownComponent: React.FC<SavedQueriesDropdownProps> = ({
 
   return (
     <EuiFormRow
-      label={
-        <FormattedMessage
-          id="xpack.osquery.savedQueries.dropdown.searchFieldLabel"
-          defaultMessage="Build from a saved query (optional)"
-        />
-      }
+      label={QUERIES_DROPDOWN_SEARCH_FIELD_LABEL}
+      labelAppend={<OsquerySchemaLink />}
       fullWidth
     >
       <EuiComboBox
         isDisabled={disabled}
         fullWidth
-        placeholder={i18n.translate('xpack.osquery.savedQueries.dropdown.searchFieldPlaceholder', {
-          defaultMessage: 'Search for saved queries',
-        })}
+        placeholder={QUERIES_DROPDOWN_LABEL}
         // eslint-disable-next-line react-perf/jsx-no-new-object-as-prop
         singleSelection={{ asPlainText: true }}
         options={queryOptions}