feat(1243500): [Attribute] Configuration Attributes Analyzer

packages/components/src/components/atoms/form/InfoTooltip.tsx

@@ -7,11 +7,31 @@ interface IProps {
   title: string | NonNullable<React.ReactNode>
   children?: ReactNode
   noStyle?: boolean
+  withHTMLTitle?: boolean
 }
 
-function InfoTooltip({ title, children, noStyle }: IProps): JSX.Element {
+function InfoTooltip({
+  title,
+  children,
+  noStyle,
+  withHTMLTitle,
+}: IProps): JSX.Element {
   return (
-    <Tooltip title={title} placement="right">
+    <Tooltip
+      title={
+        typeof title === 'string' && withHTMLTitle ? (
+          <span
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{
+              __html: title,
+            }}
+          />
+        ) : (
+          title
+        )
+      }
+      placement="right"
+    >
       <span
         style={{
           display: 'inline-block',

packages/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,12 @@ function CustomTableHeader(props: IProps): JSX.Element {
             }}
           >
             {stickyHeader.label}
+            {stickyHeader.gridHeaderInfoTooltip?.trim() ? (
+              <InfoTooltip
+                title={stickyHeader.gridHeaderInfoTooltip}
+                withHTMLTitle
+              />
+            ) : null}
           </StickyTableCell>
         ))}
 
@@ -135,14 +142,22 @@ 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}
+                  withHTMLTitle
+                />
+              ) : null}
             </BaseTableCell>
           ))}
       </TableRow>

packages/components/src/components/organisms/CustomTable/CustomTableRow/DraggableRow.tsx

@@ -130,36 +130,41 @@ function DraggableRow(props: IProps): JSX.Element {
         </StickyTableCell>
       )}
 
-      {stickyHeaders.map((stickyHeader, i) => (
-        <StickyTableCell
-          key={stickyHeader.name}
-          sx={{
-            ...stickyStyle(
-              cssLeftValues[i + 1 + Number(withSelection)],
-              shadow,
-              stickyHeader.isLastSticky,
-              stickyHeader.type
-            ),
-            ...stickyHeader.cellsStyle,
-          }}
-        >
-          <Field
-            {...stickyHeader}
-            diffValue={diffRow ? diffRow[stickyHeader.name] ?? null : undefined}
-            label=""
-            onChange={handleChange}
-            row={tableRow}
-            value={tableRow[stickyHeader.name]}
-            {...getFieldState(
-              tableRow,
-              stickyHeader.depends,
-              tableConfig[stickyHeader.name]
-            )}
-          />
-        </StickyTableCell>
-      ))}
+      {stickyHeaders.map(({ gridHeaderInfoTooltip, ...stickyHeader }, i) => {
+        const { visible, ...otherProps } = getFieldState(
+          tableRow,
+          stickyHeader.depends,
+          tableConfig[stickyHeader.name]
+        )
+        return (
+          <StickyTableCell
+            key={stickyHeader.name}
+            sx={{
+              ...stickyStyle(
+                cssLeftValues[i + 1 + Number(withSelection)],
+                shadow,
+                stickyHeader.isLastSticky,
+                stickyHeader.type
+              ),
+              ...stickyHeader.cellsStyle,
+            }}
+          >
+            <Field
+              {...stickyHeader}
+              diffValue={
+                diffRow ? diffRow[stickyHeader.name] ?? null : undefined
+              }
+              label=""
+              onChange={handleChange}
+              row={tableRow}
+              value={tableRow[stickyHeader.name]}
+              {...otherProps}
+            />
+          </StickyTableCell>
+        )
+      })}
 
-      {nonStickyHeaders.map((header) => {
+      {nonStickyHeaders.map(({ gridHeaderInfoTooltip, ...header }) => {
         const value =
           tableRow[header.name] && header.input === 'image'
             ? getImageValue(
@@ -168,6 +173,11 @@ function DraggableRow(props: IProps): JSX.Element {
               )
             : tableRow[header.name]
 
+        const { visible, ...otherProps } = getFieldState(
+          tableRow,
+          header.depends,
+          tableConfig[header.name]
+        )
         return (
           <BaseTableCell
             sx={{ ...nonStickyStyle(header.type), ...header.cellsStyle }}
@@ -180,11 +190,7 @@ function DraggableRow(props: IProps): JSX.Element {
               onChange={handleChange}
               row={tableRow}
               value={value}
-              {...getFieldState(
-                tableRow,
-                header.depends,
-                tableConfig[header.name]
-              )}
+              {...otherProps}
             />
           </BaseTableCell>
         )

packages/components/src/components/organisms/CustomTable/CustomTableRow/NonDraggableRow.tsx

@@ -119,7 +119,12 @@ function NonDraggableRow(props: IProps): JSX.Element {
         </StickyTableCell>
       )}
 
-      {stickyHeaders.map((stickyHeader, i) => {
+      {stickyHeaders.map(({ gridHeaderInfoTooltip, ...stickyHeader }, i) => {
+        const { visible, ...otherProps } = getFieldState(
+          tableRow,
+          stickyHeader.depends,
+          tableConfig[stickyHeader.name]
+        )
         return (
           <StickyTableCell
             key={stickyHeader.name}
@@ -142,24 +147,27 @@ function NonDraggableRow(props: IProps): JSX.Element {
               onChange={handleChange}
               row={tableRow}
               value={tableRow[stickyHeader.name]}
-              {...getFieldState(
-                tableRow,
-                stickyHeader.depends,
-                tableConfig[stickyHeader.name]
-              )}
+              {...otherProps}
             />
           </StickyTableCell>
         )
       })}
 
-      {nonStickyHeaders.map((header) => {
+      {nonStickyHeaders.map(({ gridHeaderInfoTooltip, ...header }) => {
         const value =
           tableRow[header.name] && header.input === 'image'
             ? getImageValue(
                 configuration['base_url/media'],
                 tableRow[header.name] as IImage | string
               )
             : tableRow[header.name]
+
+        const { visible, ...otherProps } = getFieldState(
+          tableRow,
+          header.depends,
+          tableConfig[header.name]
+        )
+
         return (
           <BaseTableCell
             sx={{ ...nonStickyStyle(header.type), ...header.cellsStyle }}
@@ -172,11 +180,7 @@ function NonDraggableRow(props: IProps): JSX.Element {
               onChange={handleChange}
               row={tableRow}
               value={value}
-              {...getFieldState(
-                tableRow,
-                header.depends,
-                tableConfig[header.name]
-              )}
+              {...otherProps}
             />
           </BaseTableCell>
         )

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: {

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

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

packages/components/src/hooks/useApiTable.ts

@@ -30,11 +30,12 @@ export function useApiHeadersForm(
   resource: IResource
 ): IFieldConfigFormWithFieldset[] {
   const apiHeaders = useApiHeaders(resource)
+
   return useMemo(() => {
     const apiHeaderMap = apiHeaders.reduce<
       Record<string, IFieldConfigFormWithFieldset>
     >(
-      (acc, header) => {
+      (acc, { gridHeaderInfoTooltip, ...header }) => {
         const fieldsetCode = header.fieldset
         const fieldset = resource.gally?.fieldset?.[fieldsetCode]
         if (fieldsetCode && fieldset) {

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>>

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 })