feat(#1243500): add header InfotoolTip in the grid and adapt the code…

… to the new 'depends' format in JSONLD
Elastic-Suite · Jan 20, 2025 · 25e3aed · 25e3aed
1 parent 5b5d1f6
commit 25e3aed
Show file tree

Hide file tree

Showing 13 changed files with 93 additions and 86 deletions.
diff --git a/...s/components/src/components/organisms/CustomTable/CustomTableHeader/CustomTableHeader.tsx b/...s/components/src/components/organisms/CustomTable/CustomTableHeader/CustomTableHeader.tsx
@@ -13,6 +13,7 @@ import { useTranslation } from 'next-i18next'
 import { manageStickyHeaders, stickyBorderStyle } from '../../../../services'
 
 import { BaseTableCell, StickyTableCell } from '../CustomTable.styled'
+import InfoTooltip from '../../../atoms/form/InfoTooltip'
 
 interface IProps {
   cssLeftValues: number[]
@@ -116,6 +117,9 @@ function CustomTableHeader(props: IProps): JSX.Element {
             }}
           >
             {stickyHeader.label}
+            {stickyHeader.gridHeaderInfoTooltip?.trim() ? (
+              <InfoTooltip title={stickyHeader.gridHeaderInfoTooltip} />
+            ) : null}
           </StickyTableCell>
         ))}
 
@@ -135,14 +139,19 @@ function CustomTableHeader(props: IProps): JSX.Element {
                 whiteSpace: 'nowrap',
                 ...((header.type === DataContentType.SCORE ||
                   header.type === DataContentType.PRICE) && { width: '10%' }),
-                ...(header.type === DataContentType.STOCK && { width: '15%' }),
+                ...(header.type === DataContentType.STOCK && {
+                  width: '15%',
+                }),
                 ...(header.type === DataContentType.STRING && {
                   maxWidth: 'fit-content',
                 }),
                 ...header.headerStyle,
               }}
             >
               {t(header.label)}
+              {header.gridHeaderInfoTooltip?.trim() ? (
+                <InfoTooltip title={header.gridHeaderInfoTooltip} />
+              ) : null}
             </BaseTableCell>
           ))}
       </TableRow>

diff --git a/packages/components/src/components/organisms/CustomTable/CustomTableRow/DraggableRow.tsx b/packages/components/src/components/organisms/CustomTable/CustomTableRow/DraggableRow.tsx
@@ -9,7 +9,6 @@ import {
   ITableHeader,
   ITableHeaderSticky,
   ITableRow,
-  getFieldState,
   getImageValue,
 } from '@elastic-suite/gally-admin-shared'
 
@@ -150,11 +149,7 @@ function DraggableRow(props: IProps): JSX.Element {
             onChange={handleChange}
             row={tableRow}
             value={tableRow[stickyHeader.name]}
-            {...getFieldState(
-              tableRow,
-              stickyHeader.depends,
-              tableConfig[stickyHeader.name]
-            )}
+            data={tableRow}
           />
         </StickyTableCell>
       ))}
@@ -180,11 +175,7 @@ function DraggableRow(props: IProps): JSX.Element {
               onChange={handleChange}
               row={tableRow}
               value={value}
-              {...getFieldState(
-                tableRow,
-                header.depends,
-                tableConfig[header.name]
-              )}
+              data={tableRow}
             />
           </BaseTableCell>
         )

diff --git a/packages/components/src/components/organisms/CustomTable/CustomTableRow/NonDraggableRow.tsx b/packages/components/src/components/organisms/CustomTable/CustomTableRow/NonDraggableRow.tsx
@@ -9,7 +9,6 @@ import {
   ITableHeader,
   ITableHeaderSticky,
   ITableRow,
-  getFieldState,
   getImageValue,
 } from '@elastic-suite/gally-admin-shared'
 
@@ -142,11 +141,7 @@ function NonDraggableRow(props: IProps): JSX.Element {
               onChange={handleChange}
               row={tableRow}
               value={tableRow[stickyHeader.name]}
-              {...getFieldState(
-                tableRow,
-                stickyHeader.depends,
-                tableConfig[stickyHeader.name]
-              )}
+              data={tableRow}
             />
           </StickyTableCell>
         )
@@ -172,11 +167,7 @@ function NonDraggableRow(props: IProps): JSX.Element {
               onChange={handleChange}
               row={tableRow}
               value={value}
-              {...getFieldState(
-                tableRow,
-                header.depends,
-                tableConfig[header.name]
-              )}
+              data={tableRow}
             />
           </BaseTableCell>
         )

diff --git a/packages/components/src/components/stateful/FieldGuesser/EditableFieldGuesser.tsx b/packages/components/src/components/stateful/FieldGuesser/EditableFieldGuesser.tsx
@@ -2,7 +2,6 @@ import React, { SyntheticEvent } from 'react'
 import { useTranslation } from 'next-i18next'
 import {
   DataContentType,
-  IDependsForm,
   IExpansions,
   IFieldGuesserProps,
   IOption,
@@ -23,7 +22,6 @@ import { IDoubleDatePickerValues } from '../../atoms/form/DoubleDatePickerWithou
 import DoubleDatePicker from '../../atoms/form/DoubleDatePicker'
 import { Box } from '@mui/material'
 import RequestTypeManager from '../../stateful/RequestTypeManager/RequestTypeManager'
-import { isHiddenDepends } from '../../../services'
 import RulesManager from '../RulesManager/RulesManager'
 import Slider from '../../atoms/form/Slider'
 import Synonym from '../../atoms/form/Synonym'
@@ -33,7 +31,6 @@ function EditableFieldGuesser(props: IFieldGuesserProps): JSX.Element {
   const {
     diffValue,
     input,
-    disabled,
     label,
     multiple,
     name,
@@ -46,7 +43,6 @@ function EditableFieldGuesser(props: IFieldGuesserProps): JSX.Element {
     suffix,
     type,
     validation,
-    depends,
     requestTypeConfigurations,
     data,
     optionConfig,
@@ -55,6 +51,7 @@ function EditableFieldGuesser(props: IFieldGuesserProps): JSX.Element {
     error,
     helperText,
     replacementErrorsMessages,
+    disabled,
   } = props
 
   const { t } = useTranslation('common')
@@ -85,17 +82,6 @@ function EditableFieldGuesser(props: IFieldGuesserProps): JSX.Element {
     }
   }
 
-  if (depends) {
-    const isHidden = isHiddenDepends(
-      depends instanceof Array ? (depends as IDependsForm[]) : [depends],
-      data
-    )
-
-    if (isHidden) {
-      return null
-    }
-  }
-
   switch (input ?? type) {
     case DataContentType.NUMBER:
     case DataContentType.STRING: {

diff --git a/packages/components/src/components/stateful/FieldGuesser/FieldGuesser.tsx b/packages/components/src/components/stateful/FieldGuesser/FieldGuesser.tsx
@@ -1,15 +1,25 @@
 import React from 'react'
-import { IFieldGuesserProps } from '@elastic-suite/gally-admin-shared'
+import {
+  IFieldGuesserProps,
+  getFieldState,
+} from '@elastic-suite/gally-admin-shared'
 
 import EditableFieldGuesser from './EditableFieldGuesser'
 import ReadableFieldGuesser from './ReadableFieldGuesser'
 
 function FieldGuesser(props: IFieldGuesserProps): JSX.Element {
   const { editable, ...fieldProps } = props
+  const { visible, ...fieldStateProps } = getFieldState(
+    fieldProps.data,
+    fieldProps.depends
+  )
+
+  if (visible === false) return null
+
   if (editable) {
-    return <EditableFieldGuesser {...fieldProps} />
+    return <EditableFieldGuesser {...fieldProps} {...fieldStateProps} />
   }
-  return <ReadableFieldGuesser {...fieldProps} />
+  return <ReadableFieldGuesser {...fieldProps} {...fieldStateProps} />
 }
 
 export default FieldGuesser
diff --git a/packages/components/src/components/stateful/FieldGuesser/FormFieldGuesser.tsx b/packages/components/src/components/stateful/FieldGuesser/FormFieldGuesser.tsx
@@ -15,7 +15,11 @@ interface IFormFieldGuesserProps
 function FormFieldGuesser(props: IFormFieldGuesserProps): JSX.Element {
   const { data, field, ...fieldProps } = props
   const value = useValue(field, data)
-  return <FieldGuesser {...field} {...fieldProps} data={data} value={value} />
+
+  return (
+    <FieldGuesser {...field} {...fieldProps} data={data} value={value} />
+    // )
+  )
 }
 
 export default FormFieldGuesser
diff --git a/packages/components/src/services/form.ts b/packages/components/src/services/form.ts
@@ -1,5 +1,4 @@
 import {
-  IDependsForm,
   IFetch,
   IFieldConfig,
   IHydraResponse,
@@ -29,20 +28,6 @@ export function getDoubleDatePickerValue(
   return { fromDate: data?.fromDate, toDate: data?.toDate }
 }
 
-export function isHiddenDepends(
-  dependsForm: IDependsForm[],
-  data: Record<string, unknown> | undefined
-): boolean {
-  return dependsForm.some((item) => {
-    const field = item?.field as string
-    const { value } = item
-    const fieldValue = data?.[field]
-    return (
-      fieldValue === undefined || (value !== fieldValue && value !== undefined)
-    )
-  })
-}
-
 export function getRequestTypeData(
   data?: Record<string, any>,
   limitationTypeOptionsApi?: IFetch<IHydraResponse<ILimitationsTypes>>

diff --git a/packages/shared/src/services/field.test.ts b/packages/shared/src/services/field.test.ts
@@ -147,7 +147,7 @@ describe('Field service', () => {
       expect(
         getFieldState(
           { foo: 'bar', baz: true },
-          { conditions: { baz: true }, disabled: true }
+          { conditions: { field: 'baz', value: false }, type: 'enabled' }
         )
       ).toEqual({ disabled: true })
     })
@@ -159,7 +159,7 @@ describe('Field service', () => {
       expect(
         getFieldState(
           { foo: 'bar', baz: true },
-          { conditions: { baz: true }, disabled: true },
+          { conditions: { field: 'baz', value: true }, type: 'enabled' },
           { disabled: false }
         )
       ).toEqual({ disabled: false })

diff --git a/packages/shared/src/services/field.ts b/packages/shared/src/services/field.ts
@@ -2,9 +2,9 @@ import {
   IDropdownApiOptions,
   IDropdownStaticOptions,
   IField,
-  IFieldCondition,
   IFieldConfig,
   IFieldConfigFormWithFieldset,
+  IFieldDepends,
   IFieldState,
 } from '../types'
 
@@ -59,20 +59,54 @@ export function isDropdownStaticOptions(
   return 'values' in options
 }
 
+/**
+ * Allows to return a state based on conditions dependent on another field.
+ * The field [field name] depends on the condition [condition] to be [type].
+ */
 export function getFieldState(
-  entity: Record<string, unknown>,
-  depends?: IFieldCondition,
+  entity?: Record<string, unknown>,
+  depends?: IFieldDepends,
   state: IFieldState = {}
 ): IFieldState {
+  if (!entity) return {}
   if (!depends?.conditions) {
     return state
   }
-  const { conditions, ...conditionalState } = depends
-  const conditionActive = Object.entries(conditions).every(
-    ([field, value]) => entity[field] === value
-  )
+  const { conditions, type } = depends
+
+  let conditionActive = false
+
+  if (Array.isArray(conditions)) {
+    for (const item of conditions) {
+      if (!conditionActive) {
+        if (Array.isArray(item)) {
+          conditionActive = item.every(
+            ({ field, value }) => entity[field] === value
+          )
+        } else {
+          const { field, value } = item
+          conditionActive = entity[field] === value
+        }
+      } else {
+        break
+      }
+    }
+  } else {
+    conditionActive = entity[conditions.field] === conditions.value
+  }
+
+  const newState: IFieldState = {}
+
+  switch (type) {
+    case 'visible':
+      newState.visible = conditionActive
+      break
+    case 'enabled':
+      newState.disabled = !conditionActive
+  }
+
   return {
-    ...(conditionActive && conditionalState),
+    ...newState,
     ...state,
   }
 }

diff --git a/packages/shared/src/services/form.ts b/packages/shared/src/services/form.ts
@@ -1,7 +1,6 @@
 import { TFunction } from 'next-i18next'
 import {
   IExpansions,
-  IField,
   IRequestType,
   IRequestTypesOptions,
   ISearchLimitations,
@@ -138,14 +137,3 @@ export function getExpansionsErrorMessages(expansions: IExpansions): string[] {
 export function areExpansionsValid(expansions: IExpansions): boolean {
   return getExpansionsErrorMessages(expansions).length === 0
 }
-
-export function isDependsField(
-  field: IField,
-  data: Record<string, unknown>
-): boolean {
-  return (
-    !field?.gally?.depends ||
-    (field.gally.depends?.field in data &&
-      data[field.gally.depends.field] === field.gally.depends?.value)
-  )
-}
diff --git a/packages/shared/src/services/table.ts b/packages/shared/src/services/table.ts
@@ -120,6 +120,7 @@ export function getFieldHeader(field: IField, t: TFunction): IFieldConfig {
     ...fieldConfig,
     editable: field.gally?.editable && field.writeable,
     fieldset: field.gally?.fieldset,
+    gridHeaderInfoTooltip: field.gally?.gridHeaderInfoTooltip,
     id,
     input,
     infoTooltip: field.gally?.infoTooltip,

diff --git a/packages/shared/src/types/field.ts b/packages/shared/src/types/field.ts
@@ -5,17 +5,23 @@ import { DataContentType, ITableRow } from './customTables'
 import { IMultipleInputConfiguration, IMultipleValueFormat } from './hydra'
 import { IOption, IOptions } from './option'
 
-export interface IFieldCondition {
-  conditions: Record<string, unknown>
+export interface IFieldState {
   disabled?: boolean
+  visible?: boolean
 }
 
-export interface IFieldState {
-  disabled?: boolean
+export interface IFieldCondition {
+  field: string
+  value: any
+}
+
+export interface IFieldDepends {
+  type: 'enabled' | 'visible'
+  conditions: (IFieldCondition | IFieldCondition[])[] | IFieldCondition
 }
 
 export interface IFieldConfig extends IFieldState {
-  depends?: any
+  depends?: IFieldDepends
   editable?: boolean
   field?: IField
   fieldset?: string
@@ -42,6 +48,7 @@ export interface IFieldConfig extends IFieldState {
   cellsStyle?: CSSProperties
   showError?: boolean
   replacementErrorsMessages?: Record<string, string>
+  gridHeaderInfoTooltip?: string
 }
 
 export interface IFieldConfigFormWithFieldset {