From c83f077dd3f048740c85b4d75d945ee344a80e43 Mon Sep 17 00:00:00 2001
From: Tomasz Ciecierski <tomasz.ciecierski@elastic.co>
Date: Mon, 21 Nov 2022 15:25:43 +0100
Subject: [PATCH] [Osquery] Fix Global Packs  (#145820)

(cherry picked from commit 80af40e3005527b948ba045eb5681024882f6310)
---
 .../osquery/common/schemas/common/utils.ts    |  2 +-
 .../osquery/public/packs/form/index.tsx       |  5 +++++
 .../packs/form/shards/pack_shards_field.tsx   | 20 +++++++++++++++----
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/osquery/common/schemas/common/utils.ts b/x-pack/plugins/osquery/common/schemas/common/utils.ts
index b6dec6a6f920d1..2a9061507be463 100644
--- a/x-pack/plugins/osquery/common/schemas/common/utils.ts
+++ b/x-pack/plugins/osquery/common/schemas/common/utils.ts
@@ -84,7 +84,7 @@ export const convertShardsToArray = (
   reduce(
     shards,
     (acc, value, key) => {
-      if (value) {
+      if (value != null) {
         acc.push({
           policy: {
             key,
diff --git a/x-pack/plugins/osquery/public/packs/form/index.tsx b/x-pack/plugins/osquery/public/packs/form/index.tsx
index dc19739c32adf2..e2a9a48612fcf6 100644
--- a/x-pack/plugins/osquery/public/packs/form/index.tsx
+++ b/x-pack/plugins/osquery/public/packs/form/index.tsx
@@ -242,16 +242,19 @@ const PackFormComponent: React.FC<PackFormProps> = ({
             <NameField euiFieldProps={euiFieldProps} />
           </EuiFlexItem>
         </EuiFlexGroup>
+        <EuiSpacer size="m" />
 
         <EuiFlexGroup>
           <EuiFlexItem>
             <DescriptionField euiFieldProps={euiFieldProps} />
           </EuiFlexItem>
         </EuiFlexGroup>
+        <EuiSpacer size="m" />
 
         <EuiFlexGroup>
           <PackTypeSelectable packType={packType} setPackType={changePackType} />
         </EuiFlexGroup>
+        <EuiSpacer size="m" />
 
         {packType === 'policy' && (
           <>
@@ -260,6 +263,7 @@ const PackFormComponent: React.FC<PackFormProps> = ({
                 <PolicyIdComboBoxField options={availableOptions} />
               </EuiFlexItem>
             </EuiFlexGroup>
+            <EuiSpacer size="m" />
 
             <EuiFlexGroup>
               <EuiFlexItem>
@@ -274,6 +278,7 @@ const PackFormComponent: React.FC<PackFormProps> = ({
                 </StyledEuiAccordion>
               </EuiFlexItem>
             </EuiFlexGroup>
+            <EuiSpacer size="m" />
           </>
         )}
 
diff --git a/x-pack/plugins/osquery/public/packs/form/shards/pack_shards_field.tsx b/x-pack/plugins/osquery/public/packs/form/shards/pack_shards_field.tsx
index c78d36f20aa194..ceb0ecab3fcdde 100644
--- a/x-pack/plugins/osquery/public/packs/form/shards/pack_shards_field.tsx
+++ b/x-pack/plugins/osquery/public/packs/form/shards/pack_shards_field.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useEffect } from 'react';
+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';
@@ -40,15 +40,26 @@ const PackShardsFieldComponent = ({ options }: PackShardsFieldProps) => {
 
   const rootShards = watchRoot('shards');
 
+  const initialShardsArray = useMemo(() => {
+    const initialConvertedShards = convertShardsToArray(rootShards, agentPoliciesById);
+    if (!isEmpty(initialConvertedShards)) {
+      if (initialConvertedShards[initialConvertedShards.length - 1].policy.key) {
+        return [...initialConvertedShards, defaultShardData];
+      }
+
+      return initialConvertedShards;
+    }
+
+    return [defaultShardData];
+  }, [agentPoliciesById, rootShards]);
+
   const { control, watch, getFieldState, formState, resetField, setValue } = useForm<{
     shardsArray: ShardsArray;
   }>({
     mode: 'all',
     shouldUnregister: true,
     defaultValues: {
-      shardsArray: !isEmpty(convertShardsToArray(rootShards, agentPoliciesById))
-        ? [...convertShardsToArray(rootShards, agentPoliciesById), defaultShardData]
-        : [defaultShardData],
+      shardsArray: initialShardsArray,
     },
   });
   const { fields, remove, append } = useFieldArray({
@@ -108,6 +119,7 @@ const PackShardsFieldComponent = ({ options }: PackShardsFieldProps) => {
             control={control}
             options={options}
           />
+          <EuiSpacer size="xs" />
         </div>
       ))}
     </>