[8.6] [Osquery] Fix small issues (#146101) (#146387)

# Backport

This will backport the following commits from `main` to `8.6`:
- [[Osquery] Fix small issues
(#146101)](https://github.com/elastic/kibana/pull/146101)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Tomasz
Ciecierski","email":"tomasz.ciecierski@elastic.co"},"sourceCommit":{"committedDate":"2022-11-28T13:02:21Z","message":"[Osquery]
Fix small issues
(#146101)","sha":"bc2eeda0d80a62adb8a6620df51bc9b5b41dd4ad","branchLabelMapping":{"^v8.7.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:skip","Team:Asset
Management","Feature:Osquery","v8.6.0","v8.7.0"],"number":146101,"url":"https://github.com/elastic/kibana/pull/146101","mergeCommit":{"message":"[Osquery]
Fix small issues
(#146101)","sha":"bc2eeda0d80a62adb8a6620df51bc9b5b41dd4ad"}},"sourceBranch":"main","suggestedTargetBranches":["8.6"],"targetPullRequestStates":[{"branch":"8.6","label":"v8.6.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.7.0","labelRegex":"^v8.7.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/146101","number":146101,"mergeCommit":{"message":"[Osquery]
Fix small issues
(#146101)","sha":"bc2eeda0d80a62adb8a6620df51bc9b5b41dd4ad"}}]}]
BACKPORT-->

Co-authored-by: Tomasz Ciecierski <tomasz.ciecierski@elastic.co>

x-pack/plugins/osquery/cypress/e2e/all/packs.cy.ts

@@ -457,8 +457,14 @@ describe('ALL - Packs', () => {
       findFormFieldByRowsLabelAndType('Name', shardPack);
 
       cy.contains('Partial deployment (shards)').click();
-      cy.getBySel('shards-field-policy').type('Default{downArrow}{enter}');
-      cy.get('#shardsPercentage0').type('{backspace}{backspace}5');
+      cy.getBySel('packShardsForm-0').within(() => {
+        cy.getBySel('shards-field-policy').type('Default{downArrow}{enter}');
+        cy.get('#shardsPercentage0').type('{backspace}{backspace}5');
+      });
+      cy.getBySel('packShardsForm-1').within(() => {
+        cy.getBySel('shards-field-policy').type('{downArrow}{enter}');
+        cy.get('#shardsPercentage1').type('{backspace}{backspace}{backspace}');
+      });
       findAndClickButton('Save pack');
 
       cy.contains(`Successfully created "${shardPack}" pack`);
@@ -477,6 +483,13 @@ describe('ALL - Packs', () => {
       cy.contains(shardPack).click();
       cy.contains('Edit').click();
       cy.get('#shardsPercentage0').should('have.value', '15');
+      cy.getBySel('packShardsForm-1').within(() => {
+        cy.getBySel('shards-field-policy').contains('testGlobal');
+        cy.get('#shardsPercentage1').should('have.value', '0');
+      });
+      cy.getBySel('policyIdsComboBox').within(() => {
+        cy.contains('testGlobal').should('not.exist');
+      });
     });
   });
 });

x-pack/plugins/osquery/cypress/e2e/all/saved_queries.cy.ts

@@ -32,4 +32,13 @@ describe('ALL - Saved queries', () => {
       cy.contains('Snapshot');
     });
   });
+  it('checks result type on prebuilt saved query', () => {
+    cy.contains('Saved queries').click();
+    cy.react('CustomItemAction', {
+      props: { index: 1, item: { attributes: { id: 'users_elastic' } } },
+    }).click();
+    cy.getBySel('resultsTypeField').within(() => {
+      cy.contains('Snapshot');
+    });
+  });
 });

x-pack/plugins/osquery/public/packs/form/index.tsx

@@ -37,6 +37,7 @@ import { NameField } from './name_field';
 import { DescriptionField } from './description_field';
 import type { PackQueryFormData } from '../queries/use_pack_query_form';
 import { PackTypeSelectable } from './shards/pack_type_selectable';
+import { overflowCss } from '../utils';
 
 type PackFormData = Omit<PackItem, 'id' | 'queries'> & { queries: PackQueryFormData[] };
 
@@ -80,7 +81,10 @@ const PackFormComponent: React.FC<PackFormProps> = ({
   });
 
   const deserializer = (payload: PackItem) => {
-    const defaultPolicyIds = filter(payload.policy_ids, (policyId) => !payload.shards?.[policyId]);
+    const defaultPolicyIds = filter(
+      payload.policy_ids,
+      (policyId) => payload.shards?.[policyId] == null
+    );
 
     return {
       ...payload,
@@ -259,14 +263,14 @@ const PackFormComponent: React.FC<PackFormProps> = ({
         {packType === 'policy' && (
           <>
             <EuiFlexGroup>
-              <EuiFlexItem>
+              <EuiFlexItem css={overflowCss}>
                 <PolicyIdComboBoxField options={availableOptions} />
               </EuiFlexItem>
             </EuiFlexGroup>
             <EuiSpacer size="m" />
 
             <EuiFlexGroup>
-              <EuiFlexItem>
+              <EuiFlexItem css={overflowCss}>
                 <StyledEuiAccordion
                   id="shardsToggle"
                   forceState={shardsToggleState}

x-pack/plugins/osquery/public/packs/form/policy_id_combobox_field.tsx

@@ -146,7 +146,7 @@ const PolicyIdComboBoxFieldComponent: React.FC<PolicyIdComboBoxFieldProps> = ({
         isInvalid={hasError}
         selectedOptions={selectedOptions}
         fullWidth
-        data-test-subj="input"
+        data-test-subj="policyIdsComboBox"
         isClearable
         options={options}
         renderOption={renderOption}

x-pack/plugins/osquery/public/packs/form/shards/pack_shards_field.tsx

@@ -9,6 +9,7 @@ import React, { useEffect, useMemo } from 'react';
 import type { InternalFieldErrors } from 'react-hook-form';
 import { useFieldArray, useForm, useFormContext } from 'react-hook-form';
 import type { EuiComboBoxOptionOption } from '@elastic/eui';
+import { EuiFlexItem } from '@elastic/eui';
 import { EuiSpacer } from '@elastic/eui';
 import deepEqual from 'fast-deep-equal';
 import { isEmpty, last, reject } from 'lodash';
@@ -111,7 +112,7 @@ const PackShardsFieldComponent = ({ options }: PackShardsFieldProps) => {
       <EuiSpacer size="s" />
 
       {fields.map((item, index, array) => (
-        <div key={item.id}>
+        <EuiFlexItem key={item.id}>
           <ShardsForm
             index={index}
             onDelete={remove}
@@ -120,7 +121,7 @@ const PackShardsFieldComponent = ({ options }: PackShardsFieldProps) => {
             options={options}
           />
           <EuiSpacer size="xs" />
-        </div>
+        </EuiFlexItem>
       ))}
     </>
   );

x-pack/plugins/osquery/public/packs/form/shards/shards_form.tsx

@@ -14,6 +14,7 @@ import type { UseFieldArrayRemove, UseFormReturn } from 'react-hook-form';
 import type { ShardsArray } from '../../../../common/schemas/common/utils';
 import { ShardsPolicyField } from './shards_policy_field';
 import { ShardsPercentageField } from './shards_percentage_field';
+import { overflowCss } from '../../utils';
 
 const StyledButtonWrapper = styled.div`
   margin-top: ${(props: { index: number }) => props.index === 0 && '16px'};
@@ -44,18 +45,18 @@ const ShardsFormComponent = ({
 
   return (
     <>
-      <EuiFlexGroup data-test-subj="packShardsForm" alignItems="flexStart" gutterSize="s">
-        <EuiFlexItem>
-          <EuiFlexGroup alignItems="flexStart" gutterSize="s" wrap>
-            <EuiFlexItem>
-              <ShardsPolicyField
-                index={index}
-                control={control}
-                hideLabel={index !== 0}
-                options={options}
-              />
-            </EuiFlexItem>
-          </EuiFlexGroup>
+      <EuiFlexGroup
+        data-test-subj={`packShardsForm-${index}`}
+        alignItems="flexStart"
+        gutterSize="s"
+      >
+        <EuiFlexItem css={overflowCss}>
+          <ShardsPolicyField
+            index={index}
+            control={control}
+            hideLabel={index !== 0}
+            options={options}
+          />
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiFlexGroup alignItems="center" gutterSize="s">

x-pack/plugins/osquery/public/packs/queries/ecs_mapping_editor_field.tsx

@@ -55,6 +55,7 @@ import osquerySchema from '../../common/schemas/osquery/v5.5.1.json';
 import { FieldIcon } from '../../common/lib/kibana';
 import { OsqueryIcon } from '../../components/osquery_icon';
 import { removeMultilines } from '../../../common/utils/build_query/remove_multilines';
+import { overflowCss } from '../utils';
 
 export type ECSMappingFormReturn = UseFormReturn<{ ecsMappingArray: ECSMappingArray }>;
 
@@ -572,8 +573,10 @@ const OsqueryColumnFieldComponent: React.FC<OsqueryColumnFieldProps> = ({
       isDisabled={euiFieldProps.isDisabled}
     >
       <EuiFlexGroup gutterSize="none">
-        <EuiFlexItem grow={false}>{Prepend}</EuiFlexItem>
-        <EuiFlexItem>
+        <EuiFlexItem css={overflowCss} grow={false}>
+          {Prepend}
+        </EuiFlexItem>
+        <EuiFlexItem css={overflowCss}>
           <ResultComboBox
             error={resultFieldState.error?.message}
             // eslint-disable-next-line react/jsx-no-bind, react-perf/jsx-no-new-function-as-prop
@@ -643,9 +646,9 @@ export const ECSMappingEditorForm: React.FC<ECSMappingEditorFormProps> = ({
   return (
     <>
       <EuiFlexGroup data-test-subj="ECSMappingEditorForm" alignItems="flexStart" gutterSize="s">
-        <EuiFlexItem>
+        <EuiFlexItem css={overflowCss}>
           <EuiFlexGroup alignItems="flexStart" gutterSize="s" wrap>
-            <EuiFlexItem>
+            <EuiFlexItem css={overflowCss}>
               <ECSComboboxField
                 control={control}
                 watch={watch}
@@ -663,7 +666,7 @@ export const ECSMappingEditorForm: React.FC<ECSMappingEditorFormProps> = ({
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>
-        <EuiFlexItem>
+        <EuiFlexItem css={overflowCss}>
           <EuiFlexGroup alignItems="flexStart" gutterSize="s" wrap>
             <ECSFieldWrapper>
               <OsqueryColumnField

x-pack/plugins/osquery/public/packs/queries/query_flyout.tsx

@@ -36,6 +36,7 @@ import { usePackQueryForm } from './use_pack_query_form';
 import { SavedQueriesDropdown } from '../../saved_queries/saved_queries_dropdown';
 import { ECSMappingEditorField } from './lazy_ecs_mapping_editor_field';
 import { useKibana } from '../../common/lib/kibana';
+import { overflowCss } from '../utils';
 
 interface QueryFlyoutProps {
   uniqueQueryIds: string[];
@@ -151,7 +152,7 @@ const QueryFlyoutComponent: React.FC<QueryFlyoutProps> = ({
           </EuiFlexGroup>
           <EuiSpacer />
           <EuiFlexGroup>
-            <EuiFlexItem>
+            <EuiFlexItem css={overflowCss}>
               <ECSMappingEditorField />
             </EuiFlexItem>
           </EuiFlexGroup>

x-pack/plugins/osquery/public/packs/utils.tsx

@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export const overflowCss = { overflow: 'auto' };

x-pack/plugins/osquery/public/saved_queries/form/index.tsx

@@ -29,6 +29,7 @@ import { ALL_OSQUERY_VERSIONS_OPTIONS } from '../../packs/queries/constants';
 import { ECSMappingEditorField } from '../../packs/queries/lazy_ecs_mapping_editor_field';
 import { PlaygroundFlyout } from './playground_flyout';
 import { CodeEditorField } from './code_editor_field';
+import { overflowCss } from '../../packs/utils';
 
 interface SavedQueryFormProps {
   viewMode?: boolean;
@@ -90,7 +91,7 @@ const SavedQueryFormComponent: React.FC<SavedQueryFormProps> = ({
       <CodeEditorField euiFieldProps={euiFieldProps} />
       <EuiSpacer size="xl" />
       <EuiFlexGroup>
-        <EuiFlexItem>
+        <EuiFlexItem css={overflowCss}>
           <ECSMappingEditorField euiFieldProps={euiFieldProps} />
         </EuiFlexItem>
       </EuiFlexGroup>

x-pack/plugins/osquery/public/saved_queries/form/use_saved_query_form.tsx

@@ -46,8 +46,8 @@ const deserializer = (payload: SavedQuerySOFormData): SavedQueryFormData => ({
   description: payload.description,
   query: payload.query,
   interval: payload.interval ? parseInt(payload.interval, 10) : 3600,
-  snapshot: payload.snapshot,
-  removed: payload.removed,
+  snapshot: payload.snapshot ?? true,
+  removed: payload.removed ?? false,
   platform: payload.platform,
   version: payload.version ? [payload.version] : [],
   ecs_mapping: !isEmpty(payload.ecs_mapping) ? payload.ecs_mapping : {},