Design feedback

elastic · Jan 30, 2023 · 355c513 · 355c513
1 parent 41e5b8c
commit 355c513
Showing 1 changed file with 43 additions and 19 deletions.
diff --git a/x-pack/plugins/lists/public/exceptions/components/builder/entry_renderer.tsx b/x-pack/plugins/lists/public/exceptions/components/builder/entry_renderer.tsx
@@ -7,7 +7,16 @@
 
 import React, { useCallback, useMemo } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiIconTip, EuiSpacer } from '@elastic/eui';
+import {
+  EuiAccordion,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiIcon,
+  EuiIconTip,
+  EuiSpacer,
+  useEuiPaddingSize,
+} from '@elastic/eui';
 import styled from 'styled-components';
 import {
   ExceptionListType,
@@ -97,6 +106,8 @@ export const BuilderEntryItem: React.FC<EntryItemProps> = ({
   operatorsList,
   allowCustomOptions = false,
 }): JSX.Element => {
+  const sPaddingSize = useEuiPaddingSize('s');
+
   const handleError = useCallback(
     (err: boolean): void => {
       setErrorsExist(err);
@@ -199,31 +210,43 @@ export const BuilderEntryItem: React.FC<EntryItemProps> = ({
         />
       );
 
+      const warningIconCss = { marginRight: `${sPaddingSize}` };
       const getMappingConflictsWarning = (field: DataViewFieldBase): React.ReactNode | null => {
         const conflictsInfo = getMappingConflictsInfo(field);
         if (!conflictsInfo) {
           return null;
         }
         return (
           <>
-            {i18n.FIELD_CONFLICT_INDICES_WARNING_DESCRIPTION}
-            {conflictsInfo.map((info) => {
-              const groupDetails = info.groupedIndices.map(
-                ({ name, count }) =>
-                  `${count > 1 ? i18n.CONFLICT_MULTIPLE_INDEX_DESCRIPTION(name, count) : name}`
-              );
-              return (
+            <EuiSpacer size="s" />
+            <EuiAccordion
+              id={'1'}
+              buttonContent={
                 <>
-                  <EuiSpacer size="s" />
-                  {`${
-                    info.totalIndexCount > 1
-                      ? i18n.CONFLICT_MULTIPLE_INDEX_DESCRIPTION(info.type, info.totalIndexCount)
-                      : info.type
-                  }: ${groupDetails.join(', ')}`}
+                  <EuiIcon tabIndex={0} type="alert" size="s" css={warningIconCss} />
+                  {i18n.FIELD_CONFLICT_INDICES_WARNING_DESCRIPTION}
                 </>
-              );
-            })}
-            <EuiSpacer size="s" />
+              }
+              arrowDisplay="none"
+            >
+              {conflictsInfo.map((info) => {
+                const groupDetails = info.groupedIndices.map(
+                  ({ name, count }) =>
+                    `${count > 1 ? i18n.CONFLICT_MULTIPLE_INDEX_DESCRIPTION(name, count) : name}`
+                );
+                return (
+                  <>
+                    <EuiSpacer size="s" />
+                    {`${
+                      info.totalIndexCount > 1
+                        ? i18n.CONFLICT_MULTIPLE_INDEX_DESCRIPTION(info.type, info.totalIndexCount)
+                        : info.type
+                    }: ${groupDetails.join(', ')}`}
+                  </>
+                );
+              })}
+              <EuiSpacer size="s" />
+            </EuiAccordion>
           </>
         );
       };
@@ -235,8 +258,8 @@ export const BuilderEntryItem: React.FC<EntryItemProps> = ({
           customOptionText
         ) : (
           <>
-            {getMappingConflictsWarning(entry.field)}
             {customOptionText}
+            {getMappingConflictsWarning(entry.field)}
           </>
         );
       return (
@@ -255,9 +278,10 @@ export const BuilderEntryItem: React.FC<EntryItemProps> = ({
       entry,
       listType,
       listTypeSpecificIndexPatternFilter,
-      handleFieldChange,
       osTypes,
       isDisabled,
+      handleFieldChange,
+      sPaddingSize,
       allowCustomOptions,
     ]
   );