removed icons in callouts in searchable snapshot field, added ability…

… to control field toggles
elastic · Dec 4, 2020 · 12de66f · 12de66f
1 parent d2dbed7
commit 12de66f
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 52 deletions.
diff --git a/...y/components/phases/shared_fields/searchable_snapshot_field/searchable_snapshot_field.tsx b/...y/components/phases/shared_fields/searchable_snapshot_field/searchable_snapshot_field.tsx
@@ -4,23 +4,24 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { get } from 'lodash';
 import { i18n } from '@kbn/i18n';
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, useState, useEffect } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiComboBoxOptionOption,
   EuiTextColor,
   EuiSpacer,
   EuiCallOut,
   EuiLink,
-  EuiFormRow,
 } from '@elastic/eui';
 
 import {
   UseField,
   ComboBoxField,
   useKibana,
   fieldValidators,
+  useFormData,
 } from '../../../../../../../shared_imports';
 
 import { useEditPolicyContext } from '../../../../edit_policy_context';
@@ -59,6 +60,19 @@ export const SearchableSnapshotField: FunctionComponent<Props> = ({ phase }) =>
 
   const isDisabled = isDisabledDueToLicense || isDisabledInColdDueToHotPhase;
 
+  const [isFieldToggleChecked, setIsFieldToggleChecked] = useState(() =>
+    Boolean(policy.phases[phase]?.actions?.searchable_snapshot?.snapshot_repository)
+  );
+
+  useEffect(() => {
+    if (isDisabled) {
+      setIsFieldToggleChecked(false);
+    }
+  }, [isDisabled]);
+
+  const [formData] = useFormData({ watch: searchableSnapshotPath });
+  const searchableSnapshotRepo = get(formData, searchableSnapshotPath);
+
   const renderField = () => (
     <SearchableSnapshotDataProvider>
       {({ error, isLoading, resendRequest, data }) => {
@@ -128,6 +142,44 @@ export const SearchableSnapshotField: FunctionComponent<Props> = ({ phase }) =>
                 />
               </EuiCallOut>
             );
+          } else if (searchableSnapshotRepo && !repos.includes(searchableSnapshotRepo)) {
+            calloutContent = (
+              <>
+                <EuiSpacer size="m" />
+                <EuiCallOut
+                  data-test-subj="customPolicyCallout"
+                  color="warning"
+                  title={
+                    <FormattedMessage
+                      id="xpack.indexLifecycleMgmt.editPolicy.searchableSnapshot.repositoryNotFoundTitle"
+                      defaultMessage="Repository name not found"
+                    />
+                  }
+                >
+                  <FormattedMessage
+                    id="xpack.indexLifecycleMgmt.editPolicy.deletePhase.customPolicyMessage"
+                    defaultMessage="{link} with this name."
+                    values={{
+                      link: (
+                        <EuiLink
+                          href={getUrlForApp('management', {
+                            path: `data/snapshot_restore/add_repository`,
+                          })}
+                          target="_blank"
+                        >
+                          {i18n.translate(
+                            'xpack.indexLifecycleMgmt.editPolicy.createSearchableSnapshotLink',
+                            {
+                              defaultMessage: 'Create a snapshot repository',
+                            }
+                          )}
+                        </EuiLink>
+                      ),
+                    }}
+                  />
+                </EuiCallOut>
+              </>
+            );
           }
         }
 
@@ -205,34 +257,15 @@ export const SearchableSnapshotField: FunctionComponent<Props> = ({ phase }) =>
             'xpack.indexLifecycleMgmt.editPolicy.searchableSnapshotCalloutTitle',
             { defaultMessage: 'Some actions have been disabled' }
           )}
-          iconType="questionInCircle"
         >
           {i18n.translate('xpack.indexLifecycleMgmt.editPolicy.searchableSnapshotCalloutBody', {
             defaultMessage:
               'Force merge, shrink, freeze and cold phase searchable snapshots are not allowed when searchable snapshots are enabled in the hot phase.',
           })}
         </EuiCallOut>
       );
-    }
-
-    if (infoCallout) {
-      return (
-        <>
-          <EuiSpacer size="s" />
-          {infoCallout}
-          <EuiSpacer size="s" />
-        </>
-      );
-    }
-
-    return;
-  };
-
-  const renderDisabledCallout = (): JSX.Element | undefined => {
-    let disabledCallout: JSX.Element | undefined;
-
-    if (isDisabledDueToLicense) {
-      disabledCallout = (
+    } else if (isDisabledDueToLicense) {
+      infoCallout = (
         <EuiCallOut
           data-test-subj="searchableSnapshotDisabledDueToLicense"
           title={i18n.translate(
@@ -250,46 +283,43 @@ export const SearchableSnapshotField: FunctionComponent<Props> = ({ phase }) =>
         </EuiCallOut>
       );
     } else if (isDisabledInColdDueToHotPhase) {
-      disabledCallout = (
+      infoCallout = (
         <EuiCallOut
+          size="s"
           data-test-subj="searchableSnapshotFieldsEnabledInHotCallout"
           title={i18n.translate(
-            'xpack.indexLifecycleMgmt.editPolicy.searchableSnapshotDisabledCalloutTitle',
-            { defaultMessage: 'Searchable snapshot disabled' }
-          )}
-          iconType="questionInCircle"
-        >
-          {i18n.translate(
             'xpack.indexLifecycleMgmt.editPolicy.searchableSnapshotDisabledCalloutBody',
             {
               defaultMessage:
                 'Cannot perform searchable snapshot in cold when it is configured in hot phase.',
             }
           )}
-        </EuiCallOut>
+        />
       );
     }
 
-    return disabledCallout;
+    return infoCallout ? (
+      <>
+        <EuiSpacer />
+        {infoCallout}
+        <EuiSpacer />
+      </>
+    ) : undefined;
   };
 
   return (
     <DescribedFormField
       data-test-subj={`searchableSnapshotField-${phase}`}
-      switchProps={
-        isDisabled
-          ? undefined
-          : {
-              'data-test-subj': 'searchableSnapshotToggle',
-              label: i18n.translate(
-                'xpack.indexLifecycleMgmt.editPolicy.searchableSnapshotsToggleLabel',
-                { defaultMessage: 'Create searchable snapshot' }
-              ),
-              initialValue: Boolean(
-                policy.phases[phase]?.actions?.searchable_snapshot?.snapshot_repository
-              ),
-            }
-      }
+      switchProps={{
+        checked: isFieldToggleChecked,
+        disabled: isDisabled,
+        onChange: setIsFieldToggleChecked,
+        'data-test-subj': 'searchableSnapshotToggle',
+        label: i18n.translate(
+          'xpack.indexLifecycleMgmt.editPolicy.searchableSnapshotsToggleLabel',
+          { defaultMessage: 'Create searchable snapshot' }
+        ),
+      }}
       title={
         <h3>
           {i18n.translate('xpack.indexLifecycleMgmt.editPolicy.searchableSnapshotFieldTitle', {
@@ -313,7 +343,7 @@ export const SearchableSnapshotField: FunctionComponent<Props> = ({ phase }) =>
       }
       fullWidth
     >
-      {isDisabled ? <EuiFormRow>{renderDisabledCallout() ?? <div />}</EuiFormRow> : renderField}
+      {isDisabled ? <div /> : renderField}
     </DescribedFormField>
   );
 };
diff --git a/...lication/sections/edit_policy/components/phases/shared_fields/snapshot_policies_field.tsx b/...lication/sections/edit_policy/components/phases/shared_fields/snapshot_policies_field.tsx
@@ -71,7 +71,6 @@ export const SnapshotPoliciesField: React.FunctionComponent = () => {
         <EuiSpacer size="m" />
         <EuiCallOut
           data-test-subj="noPoliciesCallout"
-          iconType="help"
           color="warning"
           title={
             <FormattedMessage
@@ -105,7 +104,6 @@ export const SnapshotPoliciesField: React.FunctionComponent = () => {
         <EuiSpacer size="m" />
         <EuiCallOut
           data-test-subj="customPolicyCallout"
-          iconType="help"
           color="warning"
           title={
             <FormattedMessage

diff --git a/...ecycle_management/public/application/sections/edit_policy/components/toggleable_field.tsx b/...ecycle_management/public/application/sections/edit_policy/components/toggleable_field.tsx
@@ -9,17 +9,23 @@ import { EuiSpacer, EuiSwitch, EuiSwitchProps } from '@elastic/eui';
 
 export interface Props extends Omit<EuiSwitchProps, 'checked' | 'onChange'> {
   children: (() => JSX.Element) | JSX.Element | JSX.Element[] | undefined;
-  initialValue: boolean;
+  checked?: boolean;
+  initialValue?: boolean;
   onChange?: (nextValue: boolean) => void;
 }
 
 export const ToggleableField: FunctionComponent<Props> = ({
   initialValue,
+  checked,
   onChange,
   children,
   ...restProps
 }) => {
-  const [isContentVisible, setIsContentVisible] = useState<boolean>(initialValue);
+  const [uncontrolledIsContentVisible, setUncontrolledIsContentVisible] = useState<boolean>(
+    initialValue ?? false
+  );
+
+  const isContentVisible = Boolean(checked ?? uncontrolledIsContentVisible);
 
   return (
     <>
@@ -28,7 +34,7 @@ export const ToggleableField: FunctionComponent<Props> = ({
         checked={isContentVisible}
         onChange={(e) => {
           const nextValue = e.target.checked;
-          setIsContentVisible(nextValue);
+          setUncontrolledIsContentVisible(nextValue);
           if (onChange) {
             onChange(nextValue);
           }