Present field selection table mass actions in a menu

src/components/collection/Selector/List/Header/Toggle/MenuContent.tsx

@@ -1,8 +1,8 @@
 import { Box, Button, Divider, RadioGroup, Stack } from '@mui/material';
+import RadioMenuItem from 'components/shared/RadioMenuItem';
 import { useEntityType } from 'context/EntityContext';
 import { SyntheticEvent, useState } from 'react';
-import { FormattedMessage } from 'react-intl';
-import ScopeMenuItem from './MenuItem';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { Scopes } from './types';
 
 interface MenuOption {
@@ -30,6 +30,7 @@ function ScopeMenuContent({
     menuOptions,
     updateScope,
 }: Props) {
+    const intl = useIntl();
     const entityType = useEntityType();
 
     const [scope, setScope] = useState(initialScope);
@@ -41,26 +42,22 @@ function ScopeMenuContent({
                 value={scope}
                 style={{ maxWidth: 320, textWrap: 'wrap' }}
             >
-                <ScopeMenuItem
-                    desc={
-                        <FormattedMessage
-                            id={menuOptions[0].desc}
-                            values={{ itemType, entityType }}
-                        />
-                    }
-                    scope="all"
-                    title={<FormattedMessage id={menuOptions[0].title} />}
+                <RadioMenuItem
+                    description={intl.formatMessage(
+                        { id: menuOptions[0].desc },
+                        { itemType, entityType }
+                    )}
+                    label={intl.formatMessage({ id: menuOptions[0].title })}
+                    value="all"
                 />
 
-                <ScopeMenuItem
-                    desc={
-                        <FormattedMessage
-                            id={menuOptions[1].desc}
-                            values={{ itemType, entityType }}
-                        />
-                    }
-                    scope="page"
-                    title={<FormattedMessage id={menuOptions[1].title} />}
+                <RadioMenuItem
+                    description={intl.formatMessage(
+                        { id: menuOptions[1].desc },
+                        { itemType, entityType }
+                    )}
+                    label={intl.formatMessage({ id: menuOptions[1].title })}
+                    value="page"
                 />
             </RadioGroup>
 

src/components/editor/Bindings/FieldSelection/FieldActions/MenuActions.tsx

@@ -0,0 +1,45 @@
+import { Box, Button, Stack } from '@mui/material';
+import { useIntl } from 'react-intl';
+import { useBindingStore } from 'stores/Binding/Store';
+import SaveButton from './SaveButton';
+import { MenuActionProps } from './types';
+
+export default function MenuActions({
+    bindingUUID,
+    closeMenu,
+    loading,
+    projections,
+}: MenuActionProps) {
+    const intl = useIntl();
+
+    const selectionAlgorithm = useBindingStore(
+        (state) => state.selectionAlgorithm
+    );
+
+    return (
+        <Stack
+            direction="row"
+            spacing={1}
+            style={{ paddingBottom: 4, justifyContent: 'flex-end' }}
+        >
+            <Button
+                component={Box}
+                disabled={loading}
+                onClick={() => {
+                    closeMenu();
+                }}
+                variant="text"
+            >
+                {intl.formatMessage({ id: 'cta.cancel' })}
+            </Button>
+
+            <SaveButton
+                bindingUUID={bindingUUID}
+                closeMenu={closeMenu}
+                loading={loading}
+                projections={projections}
+                selectedAlgorithm={selectionAlgorithm}
+            />
+        </Stack>
+    );
+}

src/components/editor/Bindings/FieldSelection/FieldActions/MenuOptions.tsx

@@ -0,0 +1,46 @@
+import { RadioGroup } from '@mui/material';
+import RadioMenuItem from 'components/shared/RadioMenuItem';
+import { useIntl } from 'react-intl';
+import { SelectionAlgorithm } from 'stores/Binding/slices/FieldSelection';
+import { useBindingStore } from 'stores/Binding/Store';
+
+export default function MenuOptions() {
+    const intl = useIntl();
+
+    const selectionAlgorithm = useBindingStore(
+        (state) => state.selectionAlgorithm
+    );
+    const setSelectionAlgorithm = useBindingStore(
+        (state) => state.setSelectionAlgorithm
+    );
+
+    return (
+        <RadioGroup
+            onChange={(event) =>
+                setSelectionAlgorithm(event.target.value as SelectionAlgorithm)
+            }
+            value={selectionAlgorithm}
+            style={{ maxWidth: 320, textWrap: 'wrap' }}
+        >
+            <RadioMenuItem
+                description={intl.formatMessage({
+                    id: 'fieldSelection.massActionMenu.recommended.description',
+                })}
+                label={intl.formatMessage({
+                    id: 'fieldSelection.massActionMenu.recommended.label',
+                })}
+                value="recommended"
+            />
+
+            <RadioMenuItem
+                description={intl.formatMessage({
+                    id: 'fieldSelection.massActionMenu.excludeAll.description',
+                })}
+                label={intl.formatMessage({
+                    id: 'fieldSelection.massActionMenu.excludeAll.label',
+                })}
+                value="excludeAll"
+            />
+        </RadioGroup>
+    );
+}

src/components/editor/Bindings/FieldSelection/FieldActions/SaveButton.tsx

@@ -0,0 +1,57 @@
+import { Button } from '@mui/material';
+import { useIntl } from 'react-intl';
+import {
+    useBinding_recommendFields,
+    useBinding_setMultiSelection,
+} from 'stores/Binding/hooks';
+import { useFormStateStore_isActive } from 'stores/FormState/hooks';
+import { hasLength } from 'utils/misc-utils';
+import { evaluateUpdatedFields } from './shared';
+import { SaveButtonProps } from './types';
+
+export default function SaveButton({
+    bindingUUID,
+    closeMenu,
+    loading,
+    projections,
+    selectedAlgorithm,
+}: SaveButtonProps) {
+    const intl = useIntl();
+
+    const recommended = useBinding_recommendFields();
+    const setMultiSelection = useBinding_setMultiSelection();
+
+    const formActive = useFormStateStore_isActive();
+
+    return (
+        <Button
+            disabled={
+                loading ||
+                formActive ||
+                !hasLength(projections) ||
+                !selectedAlgorithm
+            }
+            onClick={() => {
+                if (projections && selectedAlgorithm) {
+                    const selectedValue =
+                        selectedAlgorithm === 'excludeAll'
+                            ? 'exclude'
+                            : 'default';
+
+                    const updatedFields = evaluateUpdatedFields(
+                        projections,
+                        recommended[bindingUUID],
+                        selectedValue
+                    );
+
+                    setMultiSelection(bindingUUID, updatedFields);
+                    closeMenu();
+                }
+            }}
+            size="small"
+            variant="outlined"
+        >
+            {intl.formatMessage({ id: 'cta.evolve' })}
+        </Button>
+    );
+}

src/components/editor/Bindings/FieldSelection/FieldActions/index.tsx

@@ -0,0 +1,61 @@
+import { Button, Divider, Menu } from '@mui/material';
+import { NavArrowDown } from 'iconoir-react';
+import { useState } from 'react';
+import { useIntl } from 'react-intl';
+import MenuActions from './MenuActions';
+import MenuOptions from './MenuOptions';
+import { BaseProps } from './types';
+
+export default function FieldActions({
+    bindingUUID,
+    loading,
+    projections,
+}: BaseProps) {
+    const intl = useIntl();
+
+    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+    const openMenu = Boolean(anchorEl);
+    const closeMenu = () => {
+        setAnchorEl(null);
+    };
+
+    return (
+        <>
+            <Button
+                disabled={loading}
+                endIcon={
+                    <NavArrowDown style={{ fontSize: 14, fontWeight: 500 }} />
+                }
+                onClick={(event) => {
+                    event.stopPropagation();
+                    setAnchorEl(event.currentTarget);
+                }}
+                size="small"
+                style={{ minWidth: 'fit-content' }}
+                variant="outlined"
+            >
+                {intl.formatMessage({
+                    id: 'fieldSelection.cta.selectAlgorithm',
+                })}
+            </Button>
+
+            <Menu
+                anchorEl={anchorEl}
+                onClose={closeMenu}
+                open={openMenu}
+                sx={{ '& .MuiMenu-paper': { px: 2, borderRadius: 3 } }}
+            >
+                <MenuOptions />
+
+                <Divider style={{ marginTop: 4, marginBottom: 12 }} />
+
+                <MenuActions
+                    bindingUUID={bindingUUID}
+                    closeMenu={closeMenu}
+                    loading={loading}
+                    projections={projections}
+                />
+            </Menu>
+        </>
+    );
+}