[UnifiedSearch] Fix cursor type on single filter case (elastic#172273)

## Summary Fix elastic#172171 This is a possible solution to fix the bug described in the linked issue. The fix is actually double: the fact that the field value input shows a `disabled` cursor icon when still disabled is just a side effect of the root issue. Once made available the disabled cursor is still shown there. So this PR fixes this sub-issue as well. ![filter_cursor_fix](https://github.com/elastic/kibana/assets/924948/ae29c314-f02d-4ae8-a0e9-11c75d2d5807) Co-authored-by: Stratoula Kalafateli <[email protected]>
e40pud · Dec 4, 2023 · f619392 · f619392
1 parent 90d6358
commit f619392
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 2 deletions.
diff --git a/src/plugins/unified_search/public/filter_bar/filter_editor/filter_editor.tsx b/src/plugins/unified_search/public/filter_bar/filter_editor/filter_editor.tsx
@@ -142,6 +142,7 @@ export interface FilterEditorComponentProps {
   mode?: 'edit' | 'add';
   suggestionsAbstraction?: SuggestionsAbstraction;
   docLinks: DocLinksStart;
+  filtersCount?: number;
 }
 
 export type FilterEditorProps = WithEuiThemeProps & FilterEditorComponentProps;
@@ -355,6 +356,7 @@ class FilterEditorComponent extends Component<FilterEditorProps, State> {
               onChange={this.onLocalFilterChange}
               disabled={!selectedDataView}
               suggestionsAbstraction={this.props.suggestionsAbstraction}
+              filtersCount={this.props.filtersCount}
             />
           </EuiToolTip>
         </div>

diff --git a/src/plugins/unified_search/public/filter_bar/filter_item/filter_item.tsx b/src/plugins/unified_search/public/filter_bar/filter_item/filter_item.tsx
@@ -61,6 +61,7 @@ export interface FilterItemProps extends WithCloseFilterEditorConfirmModalProps
   filtersForSuggestions?: Filter[];
   readOnly?: boolean;
   suggestionsAbstraction?: SuggestionsAbstraction;
+  filtersCount?: number;
 }
 
 type FilterPopoverProps = HTMLAttributes<HTMLDivElement> & EuiPopoverProps;
@@ -398,6 +399,7 @@ function FilterItemComponent(props: FilterItemProps) {
                 filtersForSuggestions={props.filtersForSuggestions}
                 suggestionsAbstraction={props.suggestionsAbstraction}
                 docLinks={docLinks}
+                filtersCount={props.filtersCount}
               />
             </div>,
           ]}

diff --git a/src/plugins/unified_search/public/filter_bar/filter_item/filter_items.tsx b/src/plugins/unified_search/public/filter_bar/filter_item/filter_items.tsx
@@ -83,6 +83,7 @@ const FilterItemsUI = React.memo(function FilterItemsUI(props: FilterItemsProps)
           filtersForSuggestions={props.filtersForSuggestions}
           readOnly={readOnly}
           suggestionsAbstraction={props.suggestionsAbstraction}
+          filtersCount={props.filters.length}
         />
       </EuiFlexItem>
     ));

diff --git a/src/plugins/unified_search/public/filters_builder/filter_group.tsx b/src/plugins/unified_search/public/filters_builder/filter_group.tsx
@@ -44,6 +44,7 @@ export interface FilterGroupProps {
   /** @internal used for recursive rendering **/
   renderedLevel?: number;
   reverseBackground?: boolean;
+  filtersCount?: number;
 }
 
 /** @internal **/
@@ -75,6 +76,7 @@ export const FilterGroup = ({
   path,
   reverseBackground = false,
   renderedLevel = 0,
+  filtersCount,
 }: FilterGroupProps) => {
   const {
     globalParams: { maxDepth, hideOr },
@@ -128,6 +130,7 @@ export const FilterGroup = ({
               color={color}
               index={index}
               renderedLevel={renderedLevel}
+              filtersCount={filtersCount}
             />
           </EuiFlexItem>
 

diff --git a/src/plugins/unified_search/public/filters_builder/filter_item/filter_item.tsx b/src/plugins/unified_search/public/filters_builder/filter_item/filter_item.tsx
@@ -24,6 +24,7 @@ import { buildEmptyFilter, getFilterParams, BooleanRelation } from '@kbn/es-quer
 import { DataViewField } from '@kbn/data-views-plugin/common';
 import { cx } from '@emotion/css';
 
+import { css } from '@emotion/react';
 import { FieldInput } from './field_input';
 import { OperatorInput } from './operator_input';
 import { ParamsEditor } from './params_editor';
@@ -71,6 +72,7 @@ export interface FilterItemProps {
   /** @internal used for recursive rendering **/
   renderedLevel: number;
   reverseBackground: boolean;
+  filtersCount?: number;
 }
 
 const isMaxFilterNesting = (path: string) => {
@@ -89,6 +91,7 @@ export function FilterItem({
   index,
   renderedLevel,
   draggable = true,
+  filtersCount = 1,
 }: FilterItemProps) {
   const {
     dispatch,
@@ -253,6 +256,15 @@ export function FilterItem({
                       className={cx({
                         [cursorOrCss]: dropTarget === path && !hideOr,
                       })}
+                      css={
+                        // With a single filter there's a disabled cursor set at dragging level
+                        // so we need to revert such css directive for the rest of the editor row
+                        filtersCount === 1
+                          ? css`
+                              cursor: auto;
+                            `
+                          : undefined
+                      }
                     >
                       <EuiFlexItem
                         role="button"
@@ -301,7 +313,18 @@ export function FilterItem({
                           </EuiFlexItem>
                           <EuiFlexItem className={fieldAndParamCss(euiTheme)}>
                             <EuiFormRow>
-                              <div data-test-subj="filterParams">
+                              <div
+                                data-test-subj="filterParams"
+                                css={
+                                  // The disabled cursor downstream is unset
+                                  // so force the correct cursor here based on the operator
+                                  operator
+                                    ? undefined
+                                    : css`
+                                        cursor: not-allowed;
+                                      `
+                                }
+                              >
                                 <ParamsEditor
                                   dataView={dataView}
                                   field={field}

diff --git a/src/plugins/unified_search/public/filters_builder/filters_builder.tsx b/src/plugins/unified_search/public/filters_builder/filters_builder.tsx
@@ -28,6 +28,7 @@ export interface FiltersBuilderProps {
   hideOr?: boolean;
   disabled?: boolean;
   suggestionsAbstraction?: SuggestionsAbstraction;
+  filtersCount?: number;
 }
 
 const rootLevelConditionType = BooleanRelation.AND;
@@ -43,6 +44,7 @@ function FiltersBuilder({
   hideOr = false,
   disabled = false,
   suggestionsAbstraction,
+  filtersCount,
 }: FiltersBuilderProps) {
   const filtersRef = useRef(filters);
   const [state, dispatch] = useReducer(FiltersBuilderReducer, { filters });
@@ -135,7 +137,12 @@ function FiltersBuilder({
         }}
       >
         <EuiDragDropContext onDragEnd={onDragEnd} onDragUpdate={onDragActive}>
-          <FilterGroup filters={state.filters} booleanRelation={rootLevelConditionType} path={''} />
+          <FilterGroup
+            filters={state.filters}
+            booleanRelation={rootLevelConditionType}
+            path={''}
+            filtersCount={filtersCount}
+          />
         </EuiDragDropContext>
       </FiltersBuilderContextType.Provider>
     </div>