@reltio/profile 1.4.1585 → 1.4.1586-mui5

package/src/components/PerspectiveProfileBand/PerspectiveProfileBand.tsx

@@ -0,0 +1,304 @@
+import React, {useCallback, useMemo, useState} from 'react';
+import i18n from 'ui-i18n';
+import classnames from 'classnames';
+import {useSelector, useDispatch} from 'react-redux';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import SvgIcon from '@mui/material/SvgIcon';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import DeleteIcon from '@mui/icons-material/Delete';
+import CreateIcon from '@mui/icons-material/Create';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+
+import {
+    getEntityType,
+    Entity,
+    checkMetadataPermission,
+    isDataTenantEntity,
+    isTempUri,
+    MetadataPermissions,
+    ModeTypes,
+    Mode,
+    isSuggestMode,
+    isEditableMode,
+    CollaborationObjectTypes,
+    createRelatedObjectUris,
+    Operation,
+    ProfileBandConfig
+} from '@reltio/mdm-sdk';
+import mdm, {profile} from '@reltio/mdm-module';
+import {
+    ProfileBand,
+    ModeSwitcherSelect,
+    CommentsContainer,
+    COMMENTS_CONTAINER_VISIBILITY_AREA,
+    ProfileBandNavigation,
+    ProfileBandHistory,
+    ConfirmationDialog,
+    DropDownMenuButton,
+    MultilineMenuItem,
+    SmallIconButton
+} from '@reltio/components';
+import {useCloneAction} from './hooks/useCloneAction';
+
+import SuggestSvg from './suggest.svg';
+import CopySvg from './copy.svg';
+
+import {useStyles} from './styles';
+
+type MultilineMenuItemProps = React.ComponentProps<typeof MultilineMenuItem>;
+type Props = {
+    className?: string;
+    showMenu?: boolean;
+    profileBandConfig?: ProfileBandConfig;
+    menuItems: MultilineMenuItemProps['item'][];
+};
+
+const SuggestIcon = (props) => (
+    <SvgIcon {...props}>
+        <SuggestSvg />
+    </SvgIcon>
+);
+
+const CopyIcon = (props) => (
+    <SvgIcon {...props}>
+        <CopySvg />
+    </SvgIcon>
+);
+
+type Group = {
+    label: string;
+    value: string;
+    description: string;
+    icon: React.ElementType;
+    permission: string;
+    onClick?: (value: string) => void;
+};
+
+const filterGroupByPermissions = <T extends Group>(
+    group: T[],
+    entityType,
+    isTempEntity: boolean,
+    isWorkflowEnabled?: boolean,
+    canStartProcessInstanceSearchQuery?: boolean
+): T[] =>
+        group.filter(({value, permission}) => {
+            if (isTempEntity && !isEditableMode(value)) return false;
+            if ((!isWorkflowEnabled || !canStartProcessInstanceSearchQuery) && isSuggestMode(value)) return false;
+            return checkMetadataPermission(permission, entityType);
+        });
+
+const hasOnlyReadPermission = (entityType) => {
+    return (
+        checkMetadataPermission(MetadataPermissions.READ, entityType) &&
+        !checkMetadataPermission(MetadataPermissions.UPDATE, entityType) &&
+        !checkMetadataPermission(MetadataPermissions.DELETE, entityType) &&
+        !checkMetadataPermission(MetadataPermissions.INITIATE_CHANGE_REQUEST, entityType)
+    );
+};
+
+export const PerspectiveProfileBand = ({className, profileBandConfig, menuItems, showMenu = true}: Props) => {
+    const styles = useStyles();
+    const dispatch = useDispatch();
+    const canStartProcessInstanceSearchQuery = useSelector(mdm.selectors.getCanUserStartProcessFromQuery);
+    const entity = useSelector(mdm.selectors.getEntityWithoutDiff) as Entity;
+    const modifiedEntity = useSelector((state) => mdm.selectors.getModifiedEntity(state, entity.uri));
+    const metadata = useSelector(mdm.selectors.getMetadata);
+    const isWorkflowEnabled = useSelector(mdm.selectors.isWorkflowEnabled) as boolean;
+    const mode = useSelector(mdm.selectors.getMode) as Mode;
+    const isEditableMode = useSelector(mdm.selectors.getIsEditableMode) as boolean;
+    const isViewMode = useSelector(mdm.selectors.getIsViewMode) as boolean;
+    const isHistoryModeEnabled = useSelector(mdm.selectors.getIsHistoryModeEnabled);
+    const profileOperation = useSelector(mdm.selectors.getProfileOperation);
+    const entityTypeUri = entity?.type;
+    const entityType = useMemo(() => getEntityType(metadata, entityTypeUri), [entityTypeUri, metadata]);
+    const isOperationSaving = profileOperation === Operation.Saving;
+    const isOperationCloning = profileOperation === Operation.Cloning;
+    const isDisabledButtons = isOperationCloning || isOperationSaving;
+    const [openCloneConfirmationDialog, setOpenCloneConfirmationDialog] = useState(false);
+    const onCloneDiscard = useCallback(() => {
+        setOpenCloneConfirmationDialog(false);
+    }, []);
+    const onClone = useCloneAction({cloneAction: profileBandConfig?.cloneAction, onCloneDiscard});
+    const OPTIONS_GROUP = useMemo(
+        () => [
+            {
+                label: i18n.text('Editing'),
+                value: ModeTypes.EDITING,
+                description: i18n.text('Edit profile directly'),
+                icon: CreateIcon,
+                permission: 'UPDATE'
+            },
+            {
+                label: i18n.text('Suggesting'),
+                value: ModeTypes.SUGGESTING,
+                description: i18n.text('Suggest changes and initiate a workflow review'),
+                icon: SuggestIcon,
+                permission: 'INITIATE_CHANGE_REQUEST'
+            },
+            {
+                label: i18n.text('Viewing'),
+                value: ModeTypes.VIEWING,
+                description: i18n.text('Read or print profile'),
+                icon: VisibilityIcon,
+                permission: 'READ'
+            }
+        ],
+        []
+    );
+
+    const BUTTONS_GROUP = useMemo(
+        () => [
+            ...(onClone
+                ? [
+                    {
+                        label: i18n.text('Clone'),
+                        value: 'Clone',
+                        description: i18n.text('Create a copy of the profile'),
+                        icon: CopyIcon,
+                        onClick: () => setOpenCloneConfirmationDialog(true),
+                        permission: 'CREATE'
+                    }
+                ]
+                : []),
+            {
+                label: i18n.text('Delete'),
+                value: 'Delete',
+                description: i18n.text('Permanently delete profile'),
+                icon: DeleteIcon,
+                onClick: () => {
+                    const conf = window.confirm(i18n.text('Are you sure you want to delete this?'));
+                    if (conf) {
+                        dispatch(profile.entity.actions.entityRemoveRequested({entityUri: entity.uri}));
+                    }
+                },
+                permission: 'DELETE'
+            }
+        ],
+        [dispatch, entity.uri, onClone]
+    );
+
+    const shouldShowSelect = !isHistoryModeEnabled && !isDataTenantEntity(entity) && !hasOnlyReadPermission(entityType);
+
+    const isTempEntity = isTempUri(entity?.uri);
+
+    const accessibleOptionsGroup = useMemo(() => {
+        return filterGroupByPermissions(
+            OPTIONS_GROUP,
+            entityType,
+            isTempEntity,
+            isWorkflowEnabled,
+            canStartProcessInstanceSearchQuery
+        );
+    }, [OPTIONS_GROUP, entityType, isWorkflowEnabled, canStartProcessInstanceSearchQuery, isTempEntity]);
+    const accessibleButtonsGroup = useMemo(() => {
+        return filterGroupByPermissions(
+            BUTTONS_GROUP,
+            entityType,
+            isTempEntity,
+            isWorkflowEnabled,
+            canStartProcessInstanceSearchQuery
+        );
+    }, [BUTTONS_GROUP, entityType, isWorkflowEnabled, canStartProcessInstanceSearchQuery, isTempEntity]);
+
+    const handleChange = useCallback(
+        (value: Mode) => {
+            dispatch(profile.mode.actions.modeUpdated(value));
+        },
+        [dispatch]
+    );
+
+    const onCancel = useCallback(() => {
+        dispatch(profile.mode.actions.modeCancelEditing());
+    }, [dispatch]);
+
+    const handleSave = useCallback(() => {
+        dispatch(profile.actions.saveProfile());
+    }, [dispatch]);
+
+    return (
+        <>
+            <ProfileBand
+                className={classnames(className, COMMENTS_CONTAINER_VISIBILITY_AREA)}
+                entity={isEditableMode && modifiedEntity ? modifiedEntity : entity}
+            >
+                <Box display="flex" alignItems="center">
+                    <Box mr={3}>
+                        {isEditableMode && (
+                            <Box className={styles.editingButtons}>
+                                <Button
+                                    variant="outlined"
+                                    className={styles.cancelButton}
+                                    onClick={onCancel}
+                                    data-reltio-id="reltio-profile-cancel-editing"
+                                    disabled={isDisabledButtons}
+                                >
+                                    {i18n.text('Cancel')}
+                                </Button>
+                                <Button
+                                    variant="contained"
+                                    color="primary"
+                                    data-reltio-id="reltio-profile-save-profile"
+                                    onClick={handleSave}
+                                    disabled={isDisabledButtons}
+                                >
+                                    {isSuggestMode(mode) ? i18n.text('Suggest') : i18n.text('Save')}
+                                </Button>
+                            </Box>
+                        )}
+                        {isHistoryModeEnabled && isViewMode ? (
+                            <ProfileBandHistory />
+                        ) : (
+                            isViewMode && <ProfileBandNavigation />
+                        )}
+                    </Box>
+                    {shouldShowSelect && (
+                        <ModeSwitcherSelect
+                            optionsGroup={accessibleOptionsGroup}
+                            buttonsGroup={accessibleButtonsGroup}
+                            value={mode}
+                            onChange={handleChange}
+                            disabled={isDisabledButtons}
+                        />
+                    )}
+                    {showMenu && (
+                        <DropDownMenuButton
+                            menuId="profile-header-menu"
+                            buttonComponent={SmallIconButton}
+                            buttonProps={{
+                                icon: MoreVertIcon,
+                                size: 'L',
+                                'data-reltio-id': 'reltio-profile-header-menu',
+                                className: styles.menuButton
+                            }}
+                            menuItems={menuItems}
+                            MenuItemRenderer={MultilineMenuItem}
+                        />
+                    )}
+                </Box>
+                <Box className={styles.comments}>
+                    <CommentsContainer
+                        uri={entity.uri}
+                        relatedObjectUris={createRelatedObjectUris(CollaborationObjectTypes.ENTITY, {
+                            entityUri: entity.uri
+                        })}
+                        objectType={CollaborationObjectTypes.ENTITY}
+                    />
+                </Box>
+            </ProfileBand>
+            {!!onClone && (
+                <ConfirmationDialog
+                    open={openCloneConfirmationDialog}
+                    title={i18n.text('Do you want to create a clone of the profile?')}
+                    content={i18n.text(
+                        'Cloning will create a copy of the current profile. You can modify the cloned profile in the next step. Are you sure you want to proceed?'
+                    )}
+                    onSave={onClone}
+                    onDiscard={onCloneDiscard}
+                    saveCaption={i18n.text('Proceed')}
+                    discardCaption={i18n.text('Cancel')}
+                />
+            )}
+        </>
+    );
+};