[Security Solution][Endpoint] Don't hide form when loading policies, …

…display a specific loader instead (elastic#123461) * Don't hide form when loading policies, display a specific loader instead * Uses existing prop for loading state and keep the selector available, only displays the loader for the by policy selection * Fix test Co-authored-by: Kibana Machine <[email protected]>
kibanamachine · Jan 26, 2022 · 9024098 · 9024098
1 parent 5dbe273
commit 9024098
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 27 deletions.
diff --git a/...ution/public/management/components/effected_policy_select/effected_policy_select.test.tsx b/...ution/public/management/components/effected_policy_select/effected_policy_select.test.tsx
@@ -149,5 +149,12 @@ describe('when using EffectedPolicySelect component', () => {
         selected: [componentProps.options[0]],
       });
     });
+
+    it('should show loader only when by polocy selected', () => {
+      const { queryByTestId } = render({ isLoading: true });
+      expect(queryByTestId('loading-spinner')).toBeNull();
+      selectPerPolicy();
+      expect(queryByTestId('loading-spinner')).not.toBeNull();
+    });
   });
 });
diff --git a/...y_solution/public/management/components/effected_policy_select/effected_policy_select.tsx b/...y_solution/public/management/components/effected_policy_select/effected_policy_select.tsx
@@ -28,6 +28,7 @@ import { LinkToApp } from '../../../common/components/endpoint/link_to_app';
 import { getPolicyDetailPath } from '../../common/routing';
 import { useTestIdGenerator } from '../hooks/use_test_id_generator';
 import { useAppUrl } from '../../../common/lib/kibana/hooks';
+import { Loader } from '../../../common/components/loader';
 
 const NOOP = () => {};
 const DEFAULT_LIST_PROPS: EuiSelectableProps['listProps'] = { bordered: true, showIcons: false };
@@ -79,6 +80,7 @@ export const EffectedPolicySelect = memo<EffectedPolicySelectProps>(
     isGlobal,
     isPlatinumPlus,
     description,
+    isLoading = false,
     onChange,
     listProps,
     options,
@@ -215,28 +217,32 @@ export const EffectedPolicySelect = memo<EffectedPolicySelectProps>(
                 onChange={handleGlobalButtonChange}
                 color="primary"
                 isFullWidth
+                data-test-subj={getTestId('byPolicyGlobalButtonGroup')}
               />
             </EuiFormRow>
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiSpacer />
-        {!isGlobal && (
-          <EuiFormRow fullWidth>
-            <StyledEuiSelectable>
-              <EuiSelectable<OptionPolicyData>
-                {...otherSelectableProps}
-                options={selectableOptions}
-                listProps={listProps || DEFAULT_LIST_PROPS}
-                onChange={handleOnPolicySelectChange}
-                searchProps={SEARCH_PROPS}
-                searchable={true}
-                data-test-subj={getTestId('policiesSelectable')}
-              >
-                {listBuilderCallback}
-              </EuiSelectable>
-            </StyledEuiSelectable>
-          </EuiFormRow>
-        )}
+        {!isGlobal &&
+          (isLoading ? (
+            <Loader size="l" data-test-subj={getTestId('policiesLoader')} />
+          ) : (
+            <EuiFormRow fullWidth>
+              <StyledEuiSelectable>
+                <EuiSelectable<OptionPolicyData>
+                  {...otherSelectableProps}
+                  options={selectableOptions}
+                  listProps={listProps || DEFAULT_LIST_PROPS}
+                  onChange={handleOnPolicySelectChange}
+                  searchProps={SEARCH_PROPS}
+                  searchable={true}
+                  data-test-subj={getTestId('policiesSelectable')}
+                >
+                  {listBuilderCallback}
+                </EuiSelectable>
+              </StyledEuiSelectable>
+            </EuiFormRow>
+          ))}
       </EffectivePolicyFormContainer>
     );
   }

diff --git a/...ns/security_solution/public/management/pages/event_filters/view/components/form/index.tsx b/...ns/security_solution/public/management/pages/event_filters/view/components/form/index.tsx
@@ -127,11 +127,10 @@ export const EventFiltersForm: React.FC<EventFiltersFormProps> = memo(
     const handleOnBuilderChange = useCallback(
       (arg: OnChangeProps) => {
         if (
-          (hasFormChanged === false && arg.exceptionItems[0] === undefined) ||
-          (arg.exceptionItems[0] !== undefined &&
-            exception !== undefined &&
-            isEqual(exception?.entries, arg.exceptionItems[0].entries))
+          (!hasFormChanged && arg.exceptionItems[0] === undefined) ||
+          isEqual(arg.exceptionItems[0]?.entries, exception?.entries)
         ) {
+          setHasFormChanged(true);
           return;
         }
         setHasFormChanged(true);
@@ -400,12 +399,13 @@ export const EventFiltersForm: React.FC<EventFiltersFormProps> = memo(
           selected={selection.selected}
           options={policies}
           isGlobal={selection.isGlobal}
+          isLoading={arePoliciesLoading}
           isPlatinumPlus={isPlatinumPlus}
           onChange={handleOnChangeEffectScope}
           data-test-subj={'effectedPolicies-select'}
         />
       ),
-      [policies, selection, isPlatinumPlus, handleOnChangeEffectScope]
+      [policies, selection, isPlatinumPlus, handleOnChangeEffectScope, arePoliciesLoading]
     );
 
     const commentsSection = useMemo(
@@ -435,7 +435,7 @@ export const EventFiltersForm: React.FC<EventFiltersFormProps> = memo(
       [commentsInputMemo]
     );
 
-    if (isIndexPatternLoading || !exception || arePoliciesLoading) {
+    if (isIndexPatternLoading || !exception) {
       return <Loader size="xl" />;
     }
 

diff --git a/...ion/public/management/pages/trusted_apps/view/components/create_trusted_app_form.test.tsx b/...ion/public/management/pages/trusted_apps/view/components/create_trusted_app_form.test.tsx
@@ -311,10 +311,7 @@ describe('When using the Trusted App Form', () => {
         policies: ['123'],
       };
       render();
-      expect(
-        renderResult.getByTestId(`${dataTestSubjForForm}-effectedPolicies-policiesSelectable`)
-          .textContent
-      ).toEqual('Loading options');
+      expect(renderResult.queryByTestId('loading-spinner')).not.toBeNull();
     });
   });