From d10d343e742a8d520a12c87dfdb3449e45a43f91 Mon Sep 17 00:00:00 2001
From: Paul Sebastian <paulstn@amazon.com>
Date: Mon, 16 Oct 2023 15:09:39 -0700
Subject: [PATCH] restructured sidebar fields to use exact same
 spacing/paneling as discover, so that field type icons look the same and
 field action buttons disappear if not hovered over

Signed-off-by: Paul Sebastian <paulstn@amazon.com>
---
 .../common/field_icon/field_icon.tsx          |   2 +-
 .../explorer/sidebar/field.tsx                | 127 ++++++++++--------
 .../explorer/sidebar/sidebar.scss             |  16 +++
 .../explorer/sidebar/sidebar.tsx              | 120 ++++++++++-------
 4 files changed, 157 insertions(+), 108 deletions(-)

diff --git a/public/components/common/field_icon/field_icon.tsx b/public/components/common/field_icon/field_icon.tsx
index 467c2c7c0..e5b2d0117 100644
--- a/public/components/common/field_icon/field_icon.tsx
+++ b/public/components/common/field_icon/field_icon.tsx
@@ -50,7 +50,7 @@ export const typeToEuiIconMap: Partial<Record<string, EuiTokenProps>> = {
 export function FieldIcon({
   type,
   label,
-  size = 'l',
+  size = 's',
   scripted,
   className,
   ...rest
diff --git a/public/components/event_analytics/explorer/sidebar/field.tsx b/public/components/event_analytics/explorer/sidebar/field.tsx
index b55f5ff2c..c11ea4bbd 100644
--- a/public/components/event_analytics/explorer/sidebar/field.tsx
+++ b/public/components/event_analytics/explorer/sidebar/field.tsx
@@ -73,57 +73,83 @@ export const Field = (props: IFieldProps) => {
     onToggleField(fields);
   };
 
-  const getFieldActionDOM = () => {
-    return (
-      <>
-        <EuiToolTip id="override-pattern" delay="long" content="Override default pattern">
-          <>
-            {isEqual(field.type, 'string') ? (
-              isEqual(selectedPattern, field.name) ? (
-                <EuiMark data-test-subj="eventFields__default-pattern-mark">
-                  Default Pattern
-                </EuiMark>
-              ) : isOverridingPattern ? (
+  return (
+    <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false} className="dscSidebarField">
+      <EuiFlexItem grow={false}>
+        <FieldIcon type={isEqual(field.type, 'timestamp') ? 'date' : field.type} />
+      </EuiFlexItem>
+      <EuiFlexItem grow>
+        <EuiText size="xs">{field.name}</EuiText>
+      </EuiFlexItem>
+      <EuiToolTip id="override-pattern" delay="long" content="Override default pattern">
+        <>
+          {isEqual(field.type, 'string') ? (
+            isEqual(selectedPattern, field.name) ? (
+              <EuiText size="xs">
+                {' '}
+                <EuiFlexItem grow={false}>
+                  <EuiMark data-test-subj="eventFields__default-timestamp-mark">
+                    Default Pattern
+                  </EuiMark>
+                </EuiFlexItem>
+              </EuiText>
+            ) : isOverridingPattern ? (
+              <EuiFlexItem grow={false}>
                 <EuiLoadingSpinner className="override_pattern_loading" size="s" />
-              ) : (
+              </EuiFlexItem>
+            ) : (
+              <EuiFlexItem grow={false}>
                 <EuiButtonIcon
                   aria-labelledby="override_pattern"
-                  size="s"
+                  size="xs"
                   color="text"
                   iconType="inputOutput"
                   onClick={() => handleOverridePattern(field)}
                   data-test-subj="eventExplorer__overrideDefaultPattern"
+                  className="dscSidebarField__actionButton"
                 >
                   Override
                 </EuiButtonIcon>
-              )
-            ) : null}
-          </>
-        </EuiToolTip>
-        <EuiToolTip id="override-timestamp" delay="long" content="Override default timestamp">
-          <>
-            {showTimestampOverrideButton && isEqual(field.type, 'timestamp') ? (
-              isEqual(selectedTimestamp, field.name) ? (
-                <EuiMark data-test-subj="eventFields__default-timestamp-mark">
-                  Default Timestamp
-                </EuiMark>
-              ) : isOverridingTimestamp ? (
+              </EuiFlexItem>
+            )
+          ) : null}
+        </>
+      </EuiToolTip>
+      <EuiToolTip id="override-timestamp" delay="long" content="Override default timestamp">
+        <>
+          {showTimestampOverrideButton && isEqual(field.type, 'timestamp') ? (
+            isEqual(selectedTimestamp, field.name) ? (
+              <EuiFlexItem grow={false}>
+                <EuiText size="xs">
+                  {' '}
+                  <EuiMark data-test-subj="eventFields__default-timestamp-mark">
+                    Default Timestamp
+                  </EuiMark>
+                </EuiText>
+              </EuiFlexItem>
+            ) : isOverridingTimestamp ? (
+              <EuiFlexItem grow={false}>
                 <EuiLoadingSpinner className="override_timestamp_loading" size="s" />
-              ) : (
+              </EuiFlexItem>
+            ) : (
+              <EuiFlexItem grow={false}>
                 <EuiButtonIcon
                   aria-labelledby="override_timestamp"
-                  size="s"
+                  size="xs"
                   color="text"
                   iconType="inputOutput"
                   onClick={() => handleOverrideTimestamp(field)}
                   data-test-subj="eventExplorer__overrideDefaultTimestamp"
+                  className="dscSidebarField__actionButton"
                 >
                   Override
                 </EuiButtonIcon>
-              )
-            ) : null}
-          </>
-        </EuiToolTip>
+              </EuiFlexItem>
+            )
+          ) : null}
+        </>
+      </EuiToolTip>
+      <EuiFlexItem grow={false}>
         <EuiToolTip delay="long" content="inspect">
           <EuiPopover
             ownFocus
@@ -132,7 +158,15 @@ export const Field = (props: IFieldProps) => {
             closePopover={() => setIsFieldDetailsOpen(false)}
             anchorPosition="rightUp"
             panelClassName="explorerSidebarItem__fieldPopoverPanel"
-            button={<EuiButtonIcon iconType="inspect" size="xs" onClick={togglePopover} />}
+            button={
+              <EuiButtonIcon
+                iconType="inspect"
+                size="xs"
+                onClick={togglePopover}
+                aria-label={'inspect'}
+                className="dscSidebarField__actionButton"
+              />
+            }
           >
             <EuiFlexGroup justifyContent="spaceBetween">
               <EuiFlexItem>
@@ -146,6 +180,8 @@ export const Field = (props: IFieldProps) => {
             <FieldInsights field={field} query={query} />
           </EuiPopover>
         </EuiToolTip>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
         <EuiToolTip
           delay="long"
           content={
@@ -164,6 +200,7 @@ export const Field = (props: IFieldProps) => {
                 isDisabled
                 data-test-subj={`fieldToggle-${field.name}`}
                 aria-label={selected ? removeLabelAria : addLabelAria}
+                className="dscSidebarField__actionButton"
               />
             ) : (
               <EuiButtonIcon
@@ -179,32 +216,12 @@ export const Field = (props: IFieldProps) => {
                 }}
                 data-test-subj={`fieldToggle-${field.name}`}
                 aria-label={selected ? removeLabelAria : addLabelAria}
+                className="dscSidebarField__actionButton"
               />
             )}
           </>
         </EuiToolTip>
-      </>
-    );
-  };
-
-  return (
-    <FieldButton
-      size="s"
-      className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
-      isActive={false}
-      dataTestSubj={`field-${field.name}-showDetails`}
-      fieldIcon={<FieldIcon type={isEqual(field.type, 'timestamp') ? 'date' : field.type} />}
-      fieldName={
-        <span
-          data-test-subj={`field-${field.name}`}
-          title={field.name}
-          className="dscSidebarField__name"
-        >
-          <EuiText size="xs">{field.name}</EuiText>
-        </span>
-      }
-      fieldAction={getFieldActionDOM()}
-      onClick={togglePopover}
-    />
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 };
diff --git a/public/components/event_analytics/explorer/sidebar/sidebar.scss b/public/components/event_analytics/explorer/sidebar/sidebar.scss
index 325fcd36c..b9eeb45ff 100644
--- a/public/components/event_analytics/explorer/sidebar/sidebar.scss
+++ b/public/components/event_analytics/explorer/sidebar/sidebar.scss
@@ -3,6 +3,22 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+ .dscSidebarField {
+  &__actionButton {
+    opacity: 0;
+    transition: opacity $euiAnimSpeedFast;
+
+    @include ouiBreakpoint("xs", "s", "m") {
+      opacity: 1;
+    }
+  }
+
+  &:hover &__actionButton,
+  &:focus &__actionButton {
+    opacity: 1;
+  }
+}
+
 .explorerIndexPattern__container {
   display: flex;
   align-items: center;
diff --git a/public/components/event_analytics/explorer/sidebar/sidebar.tsx b/public/components/event_analytics/explorer/sidebar/sidebar.tsx
index f66e59d8e..a9b2a3eed 100644
--- a/public/components/event_analytics/explorer/sidebar/sidebar.tsx
+++ b/public/components/event_analytics/explorer/sidebar/sidebar.tsx
@@ -10,6 +10,7 @@ import {
   EuiFieldSearch,
   EuiTitle,
   EuiSplitPanel,
+  EuiPanel,
 } from '@elastic/eui';
 import { FormattedMessage, I18nProvider } from '@osd/i18n/react';
 import { isEmpty } from 'lodash';
@@ -173,25 +174,30 @@ export const Sidebar = (props: ISidebarProps) => {
                             <EuiDraggable
                               spacing="m"
                               key={`field${field.name}`}
-                              data-attr-field={field.name}
-                              className="dscSidebar__item sidebar_content"
                               index={index}
                               draggableId={field.name}
                             >
-                              <Field
-                                query={query}
-                                field={field}
-                                selectedPattern={selectedPattern}
-                                isOverridingPattern={isOverridingPattern}
-                                handleOverridePattern={handleOverridePattern}
-                                isOverridingTimestamp={isOverridingTimestamp}
-                                selectedTimestamp={selectedTimestamp}
-                                handleOverrideTimestamp={handleOverrideTimestamp}
-                                selected={true}
-                                isFieldToggleButtonDisabled={true}
-                                showTimestampOverrideButton={false}
-                                onToggleField={handleRemoveField}
-                              />
+                              <EuiPanel
+                                data-attr-field={field.name}
+                                paddingSize="s"
+                                className="dscSidebar__item"
+                                data-test-subj={`fieldList-field`}
+                              >
+                                <Field
+                                  query={query}
+                                  field={field}
+                                  selectedPattern={selectedPattern}
+                                  isOverridingPattern={isOverridingPattern}
+                                  handleOverridePattern={handleOverridePattern}
+                                  isOverridingTimestamp={isOverridingTimestamp}
+                                  selectedTimestamp={selectedTimestamp}
+                                  handleOverrideTimestamp={handleOverrideTimestamp}
+                                  selected={true}
+                                  isFieldToggleButtonDisabled={true}
+                                  showTimestampOverrideButton={false}
+                                  onToggleField={handleRemoveField}
+                                />
+                              </EuiPanel>
                             </EuiDraggable>
                           );
                         })}
@@ -214,7 +220,7 @@ export const Sidebar = (props: ISidebarProps) => {
                   className="dscSidebarList explorerFieldList--selected"
                   aria-labelledby="selected_fields"
                   data-test-subj={`fieldList-selected`}
-                  droppableId=""
+                  droppableId="SELECTED FIELDS"
                   spacing="m"
                 >
                   {explorerData &&
@@ -225,25 +231,30 @@ export const Sidebar = (props: ISidebarProps) => {
                         <EuiDraggable
                           spacing="m"
                           key={`field${field.name}`}
-                          data-attr-field={field.name}
-                          className="dscSidebar__item sidebar_content"
                           index={index}
-                          draggableId=""
+                          draggableId={field.name}
                         >
-                          <Field
-                            query={query}
-                            field={field}
-                            selectedPattern={selectedPattern}
-                            isOverridingPattern={isOverridingPattern}
-                            handleOverridePattern={handleOverridePattern}
-                            selectedTimestamp={selectedTimestamp}
-                            isOverridingTimestamp={isOverridingTimestamp}
-                            handleOverrideTimestamp={handleOverrideTimestamp}
-                            selected={true}
-                            isFieldToggleButtonDisabled={isFieldToggleButtonDisabled}
-                            showTimestampOverrideButton={true}
-                            onToggleField={handleRemoveField}
-                          />
+                          <EuiPanel
+                            data-attr-field={field.name}
+                            paddingSize="s"
+                            className="dscSidebar__item"
+                            data-test-subj={`fieldList-field`}
+                          >
+                            <Field
+                              query={query}
+                              field={field}
+                              selectedPattern={selectedPattern}
+                              isOverridingPattern={isOverridingPattern}
+                              handleOverridePattern={handleOverridePattern}
+                              selectedTimestamp={selectedTimestamp}
+                              isOverridingTimestamp={isOverridingTimestamp}
+                              handleOverrideTimestamp={handleOverrideTimestamp}
+                              selected={true}
+                              isFieldToggleButtonDisabled={isFieldToggleButtonDisabled}
+                              showTimestampOverrideButton={true}
+                              onToggleField={handleRemoveField}
+                            />
+                          </EuiPanel>
                         </EuiDraggable>
                       );
                     })}
@@ -266,7 +277,7 @@ export const Sidebar = (props: ISidebarProps) => {
                   }`}
                   aria-labelledby="available_fields"
                   data-test-subj={`fieldList-unpopular`}
-                  droppableId=""
+                  droppableId="AVAILABLE FIELDS"
                   spacing="m"
                 >
                   {explorerFields?.availableFields &&
@@ -277,25 +288,30 @@ export const Sidebar = (props: ISidebarProps) => {
                           <EuiDraggable
                             spacing="m"
                             key={`field${field.name}`}
-                            data-attr-field={field.name}
-                            className="dscSidebar__item sidebar_content"
                             index={index}
-                            draggableId=""
+                            draggableId={field.name}
                           >
-                            <Field
-                              query={query}
-                              field={field}
-                              selectedPattern={selectedPattern}
-                              isOverridingPattern={isOverridingPattern}
-                              handleOverridePattern={handleOverridePattern}
-                              selectedTimestamp={selectedTimestamp}
-                              isOverridingTimestamp={isOverridingTimestamp}
-                              handleOverrideTimestamp={handleOverrideTimestamp}
-                              onToggleField={handleAddField}
-                              selected={false}
-                              isFieldToggleButtonDisabled={isFieldToggleButtonDisabled}
-                              showTimestampOverrideButton={true}
-                            />
+                            <EuiPanel
+                              data-attr-field={field.name}
+                              paddingSize="s"
+                              className="dscSidebar__item"
+                              data-test-subj={`fieldList-field`}
+                            >
+                              <Field
+                                query={query}
+                                field={field}
+                                selectedPattern={selectedPattern}
+                                isOverridingPattern={isOverridingPattern}
+                                handleOverridePattern={handleOverridePattern}
+                                selectedTimestamp={selectedTimestamp}
+                                isOverridingTimestamp={isOverridingTimestamp}
+                                handleOverrideTimestamp={handleOverrideTimestamp}
+                                onToggleField={handleAddField}
+                                selected={false}
+                                isFieldToggleButtonDisabled={isFieldToggleButtonDisabled}
+                                showTimestampOverrideButton={true}
+                              />
+                            </EuiPanel>
                           </EuiDraggable>
                         );
                       })}