feat(1314737): [Boost] Add Proportional Attribute Component to the Fi…

…eldGuesser

packages/components/public/locales/en/boost.json

@@ -22,5 +22,9 @@
   "boost_zero": "boost",
   "boost_one": "boost",
   "boost_other": "boosts",
-  "preview": "Preview"
+  "preview": "Preview",
+  "boostConfig.sourceField": "Source field",
+  "boostConfig.sourceField.placeholder": "Select a SourceField",
+  "boostConfig.boostImpact": "Boost impact",
+  "boostConfig.scaleFactor": "Scale factor"
 }

packages/components/public/locales/fr/boost.json

@@ -22,5 +22,9 @@
   "boost_zero": "boost",
   "boost_one": "boost",
   "boost_other": "boosts",
-  "preview": "Prévisualiser"
+  "preview": "Prévisualiser",
+  "boostConfig.sourceField": "Source field",
+  "boostConfig.sourceField.placeholder": "Sélectionnez un SourceField",
+  "boostConfig.boostImpact": "Impacte du Boost",
+  "boostConfig.scaleFactor": "Scale factor"
 }

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

@@ -12,9 +12,7 @@ import RadioGroupWithoutError, {
 } from './RadioGroupWithoutError'
 import InputTextWithoutError from './InputTextWithoutError'
 
-interface IRadioGroupErrorProps extends IFieldErrorProps, IRadioGroupProps {
-  required?: boolean
-}
+interface IRadioGroupErrorProps extends IFieldErrorProps, IRadioGroupProps {}
 
 function RadioGroup(props: IRadioGroupErrorProps): JSX.Element {
   const { onChange, showError, additionalValidator, ...inputProps } = props

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

@@ -1,20 +1,26 @@
 import React, { ReactNode, SyntheticEvent } from 'react'
 import {
+  FormControl,
   FormControlLabel,
   FormHelperText,
+  InputLabel,
   Radio,
   RadioGroupProps,
   RadioGroup as RadioGrp,
 } from '@mui/material'
 import { IOption, IOptions } from '@elastic-suite/gally-admin-shared'
 import IonIcon from '../IonIcon/IonIcon'
+import InfoTooltip from '../../atoms/form/InfoTooltip'
 
 export interface IRadioGroupProps extends Omit<RadioGroupProps, 'onChange'> {
   options: IOptions<unknown>
   onChange?: (value: string, event: SyntheticEvent) => void
   error?: boolean
   helperText?: ReactNode
   helperIcon?: string
+  label?: string
+  infoTooltip?: string
+  required?: boolean
 }
 
 function RadioGroupWithoutError(props: IRadioGroupProps): JSX.Element {
@@ -24,12 +30,24 @@ function RadioGroupWithoutError(props: IRadioGroupProps): JSX.Element {
     helperIcon,
     options,
     onChange,
+    infoTooltip,
+    label,
     ...radioGroupProps
   } = props
   const foundNameDefaultValue = options.find((element) => element.default)
 
   return (
-    <div>
+    <FormControl variant="standard" margin="normal">
+      {Boolean(label || infoTooltip) && (
+        <InputLabel
+          shrink
+          style={{ position: 'relative' }}
+          required={radioGroupProps.required}
+        >
+          {label}
+          {infoTooltip ? <InfoTooltip title={infoTooltip} /> : null}
+        </InputLabel>
+      )}
       <RadioGrp
         {...radioGroupProps}
         onChange={(event, value): void => {
@@ -62,7 +80,7 @@ function RadioGroupWithoutError(props: IRadioGroupProps): JSX.Element {
           {helperText}
         </FormHelperText>
       )}
-    </div>
+    </FormControl>
   )
 }
 

packages/components/src/components/molecules/ProportionalToAttributes/ProportionalToAttributes.stories.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import ProportionalToAttributesComponent, {
+  IProportionalToAttributesValue,
+} from './ProportionalToAttributes'
+
+export default {
+  title: 'Molecules/ProportionalToAttributesComponent',
+  component: ProportionalToAttributesComponent,
+} as ComponentMeta<typeof ProportionalToAttributesComponent>
+
+const Template: ComponentStory<typeof ProportionalToAttributesComponent> = (
+  args
+) => {
+  const [value, setValue] = useState<IProportionalToAttributesValue>({
+    sourceField: undefined,
+    boostImpact: undefined,
+    scaleFactor: 0,
+  })
+  return (
+    <ProportionalToAttributesComponent
+      {...args}
+      value={value}
+      onChange={(value): void => setValue(value)}
+    />
+  )
+}
+
+export const ProportionalToAttributes = Template.bind({})
+
+ProportionalToAttributes.args = {
+  boostImpactOptions: [
+    {
+      label: 'Low',
+      value: 'Low',
+    },
+    {
+      label: 'Medium',
+      value: 'Medium',
+    },
+    {
+      label: 'High',
+      value: 'High',
+    },
+  ],
+  sourceFields: [
+    {
+      label: 'test',
+      value: 'test',
+    },
+  ],
+}

packages/components/src/components/molecules/ProportionalToAttributes/ProportionalToAttributes.tsx

@@ -0,0 +1,85 @@
+import React from 'react'
+import RadioGroup from '../../atoms/form/RadioGroup'
+import InputText from '../../atoms/form/InputText'
+import DropDown from '../../atoms/form/DropDown'
+import { styled } from '@mui/material'
+import { IOptions } from '@elastic-suite/gally-admin-shared'
+import { useTranslation } from 'next-i18next'
+
+const Container = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing(1),
+}))
+
+export interface IProportionalToAttributesValue {
+  sourceField?: string
+  boostImpact?: string
+  scaleFactor: number
+}
+export interface IProportionalToAttributesProps {
+  sourceFields: IOptions<string>
+  boostImpactOptions: IOptions<string>
+  value: IProportionalToAttributesValue
+  showError?: boolean
+  onChange: (value: IProportionalToAttributesValue) => void
+}
+
+function ProportionalToAttributes({
+  value,
+  sourceFields,
+  boostImpactOptions,
+  showError,
+  onChange,
+}: IProportionalToAttributesProps): JSX.Element {
+  const { sourceField, boostImpact, scaleFactor } = value
+  const { t } = useTranslation('boost')
+
+  function handleChange(
+    name: keyof IProportionalToAttributesProps['value'],
+    newValue: string | number
+  ): void {
+    onChange({
+      ...value,
+      [name]: newValue,
+    })
+  }
+
+  return (
+    <Container>
+      <DropDown
+        options={sourceFields}
+        label={t('boostConfig.sourceField')}
+        value={sourceField}
+        onChange={(value: string): void => handleChange('sourceField', value)}
+        required
+        showError={showError}
+        sx={{ minWidth: '230px' }}
+        placeholder={t('boostConfig.sourceField.placeholder')}
+      />
+
+      <RadioGroup
+        options={boostImpactOptions}
+        defaultValue={boostImpact}
+        onChange={(value: string): void => handleChange('boostImpact', value)}
+        label={t('boostConfig.boostImpact')}
+        required
+        showError={showError}
+      />
+
+      <InputText
+        type="number"
+        label={t('boostConfig.scaleFactor')}
+        required
+        inputProps={{
+          min: 0,
+        }}
+        value={scaleFactor}
+        onChange={(value: number): void => handleChange('scaleFactor', value)}
+        showError={showError}
+      />
+    </Container>
+  )
+}
+
+export default ProportionalToAttributes

packages/components/src/components/molecules/ProportionalToAttributes/ProportionalToAttributesManager.tsx

@@ -0,0 +1,65 @@
+import React, { useMemo } from 'react'
+import { useApiList, useResource } from '../../../hooks'
+import ProportionalToAttributes, {
+  IProportionalToAttributesProps,
+} from './ProportionalToAttributes'
+import { IOption } from '@elastic-suite/gally-admin-shared'
+
+function ProportionalToAttributesManager(
+  props: Omit<
+    IProportionalToAttributesProps,
+    'sourceFields' | 'boostImpactOptions'
+  >
+): JSX.Element {
+  const rowsPerPage = 200
+  const sourceFieldFixedFilters = useMemo(
+    () => ({
+      'metadata.entity': 'product',
+    }),
+    []
+  )
+
+  const boostImpactOptionResource = useResource('BoostImpactOption')
+  const boostAttributeValueFieldOptionsResource = useResource(
+    'BoostAttributeValueFieldOption'
+  )
+
+  const [boostImpactOptionsResponse] = useApiList<IOption<string>>(
+    boostImpactOptionResource,
+    false,
+    rowsPerPage,
+    undefined,
+    undefined,
+    false,
+    true
+  )
+
+  const [boostAttributeValueFieldOptionsResponse] = useApiList<IOption<string>>(
+    boostAttributeValueFieldOptionsResource,
+    false,
+    rowsPerPage,
+    sourceFieldFixedFilters,
+    undefined,
+    false,
+    true
+  )
+
+  if (
+    !boostImpactOptionsResponse?.data ||
+    !boostAttributeValueFieldOptionsResponse?.data
+  ) {
+    return null
+  }
+
+  return (
+    <ProportionalToAttributes
+      sourceFields={
+        boostAttributeValueFieldOptionsResponse.data['hydra:member']
+      }
+      boostImpactOptions={boostImpactOptionsResponse.data['hydra:member']}
+      {...props}
+    />
+  )
+}
+
+export default ProportionalToAttributesManager

packages/components/src/components/stateful/FieldGuesser/EditableFieldGuesser.tsx

@@ -28,7 +28,8 @@ import RulesManager from '../RulesManager/RulesManager'
 import Slider from '../../atoms/form/Slider'
 import Synonym from '../../atoms/form/Synonym'
 import Expansion from '../../atoms/form/Expansion'
-
+import { IProportionalToAttributesValue } from '../../molecules/ProportionalToAttributes/ProportionalToAttributes'
+import ProportionalToAttributesManager from '../../molecules/ProportionalToAttributes/ProportionalToAttributesManager'
 function EditableFieldGuesser(props: IFieldGuesserProps): JSX.Element {
   const {
     diffValue,
@@ -74,7 +75,8 @@ function EditableFieldGuesser(props: IFieldGuesserProps): JSX.Element {
       | IRequestType
       | IRuleCombination
       | ISynonyms
-      | IExpansions,
+      | IExpansions
+      | IProportionalToAttributesValue,
     event?: SyntheticEvent
   ): void {
     if (onChange) {
@@ -331,6 +333,16 @@ function EditableFieldGuesser(props: IFieldGuesserProps): JSX.Element {
       )
     }
 
+    case DataContentType.PROPARTIONALTOATTRIBUTE: {
+      return (
+        <ProportionalToAttributesManager
+          value={value as IProportionalToAttributesValue}
+          onChange={handleChange}
+          showError={showError}
+        />
+      )
+    }
+
     default: {
       return <ReadableFieldGuesser {...props} infoTooltip={infoTooltip} />
     }

packages/shared/src/services/hydra.ts

@@ -233,6 +233,13 @@ export function inputInitializer(input: string): unknown {
     case 'ruleEngine':
       return '{"type":"combination","operator":"all","value":"true","children":[]}'
 
+    case 'proportionalToAttribute':
+      return {
+        sourceField: undefined,
+        boostImpact: undefined,
+        scaleFactor: 0,
+      }
+
     default:
       return ''
   }

packages/shared/src/types/customTables.ts

@@ -31,6 +31,7 @@ export enum DataContentType {
   PRODUCTINFO = 'productInfo',
   BOOSTPREVIEW = 'boostPreview',
   POSITIONEFFECT = 'positionEffect',
+  PROPARTIONALTOATTRIBUTE = 'proportionalToAttribute',
 }
 
 export interface ITableHeader extends IFieldConfig {