@configuratorware/configurator-admingui 1.41.1 → 1.42.1

package/src/Screens/Creator/Components/Rules/Translations.js

@@ -1,226 +0,0 @@
-require('../../../../App/i18n').use(
-    {
-        en: {
-            rules: 'Rules',
-            ruleEditor: {
-                addRule: 'Add rule',
-                selectRuleTypeHint: 'Select the desired rule',
-                listHeadline: 'The following rules applied to this product:',
-                ruleTypes: {
-                    optiondependency: {
-                        name: 'Prerequisite',
-                        optionText: 'This option',
-                        optionLabel: 'option a',
-                        dataOptionText: 'requires the following option',
-                        dataOptionLabel: 'option b',
-                        description:
-                            'If the user chooses %{optionA}, %{optionB} will be selected automatically. A hint is displayed.<br/>' +
-                            'If the user deselects %{optionA}, %{optionB} stays in the configuration. No hint is displayed.<br/>' +
-                            'If the user deselects %{optionB}, %{optionA} is deselected, if possible, or the default option for the component is selected automatically. A hint is displayed.',
-                    },
-                    optionexclusion: {
-                        name: 'Direct incompatibility',
-                        optionText: 'These two options cannot be combined',
-                        optionLabel: 'option a',
-                        dataOptionLabel: 'option b',
-                        description:
-                            'If the user chooses %{optionA}, %{optionB} will be removed, if possible, or the default option for the component is selected automatically. ' +
-                            'Reversely, %{optionA} will be removed if possible or the default option for the component is selected, if the user chooses %{optionB}.',
-                    },
-                    optionclassificationminamount: {
-                        name: 'Component, minimum quantity',
-                        componentsText:
-                            'For the following component, the user has to select a minimum quantity of options.',
-                        componentsLabel: 'Component',
-                        minAmountText: 'The minimum quantity of options is',
-                        minAmountLabel: 'Minimum quantity',
-                        description:
-                            'If the minimum amount is deceeded, there is not hint. Only when sending the configuration to the shopping cart, a hint is displayed.',
-                    },
-                    optionclassificationmaxamount: {
-                        name: 'Component, maximum quantity',
-                        componentsText:
-                            'For the following component, the user can only select a predetermined quantity of options.',
-                        componentsLabel: 'Component',
-                        maxAmountText: 'The maximum quantity of options is',
-                        maxAmountLabel: 'Maximum quantity',
-                        description:
-                            'If the maximum quantity is exceeded when selecting options, a hint is displayed and the option is not added to the configuration.',
-                    },
-                    itemattributematch: {
-                        name: 'Attribute incompatibility',
-                        attributeText: 'The following attribute is used to determine incompatibilities',
-                        attributeLabel: 'attribute',
-                        description:
-                            'If multiple options have this attribute, they are only compatible, if the attribute values for the options match.<br/>' +
-                            'If the user selects an option b that has the attribute %{attribute} with the attribute value x and has already selected option a, that also has the %{attribute} but with a deviant attribute value y, then option b is incompatible. A hint is displayed.',
-                    },
-                    itemattributemaxsum: {
-                        name: 'Add up attribute values',
-                        attributeText:
-                            'The sum of all values for the selected options must not exceed the provided maximum sum. The numeric attribute values of the attribute selected for the rule will be summed up.',
-                        attributeLabel: 'attribute',
-                        maxAmountText: 'The maximum sum is',
-                        maxAmountLabel: 'Maximum sum',
-                    },
-                    optionmaxamount: {
-                        name: 'Option, maximum quantity',
-                        optionText:
-                            'For the following option, there’s a restriction that defines how many times the option can be added to the configuration.',
-                        optionLabel: 'option',
-                        maxAmountText: 'The maximum quantity is',
-                        maxAmountLabel: 'Maximum quantity',
-                        description:
-                            'If the maximum amount is exceeded when selecting the option, a hint gets displayed and the option is not added to the configuration.',
-                    },
-                    defaultoption: {
-                        name: 'Default option',
-                        optionText:
-                            'The following option is a default part and always has to be in the configuration.',
-                        optionLabel: 'option default part',
-                        description:
-                            'If the user selects an option that is incompatible with %{option}, the %{option} is removed from the configuration. If the user deselects the incompatible option, %{option} is automatically added to the configuration again.<br/><br/>' +
-                            'No hint is displayed.',
-                    },
-                    additionaloption: {
-                        name: 'Dependent options',
-                        optionText: 'To the option',
-                        optionLabel: 'option a',
-                        dataOptionText: 'there always belongs an',
-                        dataOptionLabel: 'option b',
-                        description:
-                            'When configuring %{optionA}, %{optionB} is selected automatically. When removing %{optionA}, %{optionB} is removed automatically without a hint being shown.',
-                    },
-                    attribute_value_group_auto_switch: {
-                        name: 'Joint change',
-                        attributeText:
-                            'This rule allows for options that share a common attribute, to be switched simultaneously. This attribute is',
-                        attributeLabel: 'attribute',
-                        switchText: 'The rule is applied per component, not across all components.',
-                        description:
-                            'The rule is applied to grouped options, when an option has different variants (e.g. standard and premium). ' +
-                            'All the variants of the option need to have the attribute %{attribute} with different attribute values (e.g. standard and premium).<br/>' +
-                            'If the user chooses one option that has the attribute value premium, the variants that also have the attribute value are automatically configured for every selected option group. No hint is displayed.',
-                    },
-                },
-            },
-            Attribute: 'Attributes',
-            rule: {
-                addButtonLabel: 'Add Rule',
-            },
-        },
-        de: {
-            rule: {
-                addButtonLabel: ' Regel hinzufügen',
-            },
-            Attribute: 'Attribute',
-            rules: 'Regeln',
-            ruleEditor: {
-                addRule: 'Regel hinzufügen',
-                selectRuleTypeHint: 'Wähle die gewünschte Regel aus',
-                listHeadline: 'Folgende Regeln gelten für dieses Produkt:',
-                ruleTypes: {
-                    optiondependency: {
-                        name: 'Voraussetzung',
-                        optionText: 'Diese Option',
-                        optionLabel: 'Option A',
-                        dataOptionText: 'setzt die folgende Option voraus',
-                        dataOptionLabel: 'Option B',
-                        description:
-                            'Wählt der Nutzer %{optionA} wird %{optionB} automatisch ausgewählt. Dabei wird ein Hinweis ausgegeben.<br/>' +
-                            'Wählt der Nutzer %{optionA} ab, bleibt %{optionB} Teil der Konfiguration. Es wird kein Hinweis ausgegeben.<br/>' +
-                            'Wählt der Nutzer %{optionB} ab, wird %{optionA} falls möglich abgewählt oder es wird die Standardoption der Kategorie automatisch gewählt. Es wird ein Hinweis ausgegeben.',
-                    },
-                    optionexclusion: {
-                        name: 'Direkte Inkompatibilität',
-                        optionText: 'Diese beiden Optionen können nicht kombiniert werden',
-                        optionLabel: 'Option A',
-                        dataOptionLabel: 'Option B',
-                        description:
-                            'Wählt der Nutzer %{optionA} wird %{optionB} falls möglich entfernt oder es wird die Standardoption in der Kategorie gewählt. ' +
-                            'Umgekehrt wird %{optionA} falls möglich entfernt oder es wird die Standardoption in der Kategorie gewählt, wenn der Nutzer %{optionB} wählt.',
-                    },
-                    optionclassificationminamount: {
-                        name: 'Komponente, Minimalmenge',
-                        componentsText:
-                            'In der folgenden Komponente muss der Nutzer minimal eine bestimmte Menge an Optionen wählen',
-                        componentsLabel: 'Komponente',
-                        minAmountText: 'Die Minimalmenge an Optionen ist',
-                        minAmountLabel: 'Minimalmenge',
-                        description:
-                            'Beim Unterschreiten der Minimalmenge erscheint kein Hinweis. Erst beim Abschicken der Konfiguration zum Warenkorb, wird ein Hinweis ausgegeben.',
-                    },
-                    optionclassificationmaxamount: {
-                        name: 'Komponente, Maximalmenge',
-                        componentsText:
-                            'In der folgenden Komponente kann der Nutzer maximal nur eine bestimmte Menge an Optionen wählen',
-                        componentsLabel: 'Komponente',
-                        maxAmountText: 'Die Maximalmenge an Optionen ist',
-                        maxAmountLabel: 'Maximalmenge',
-                        description:
-                            'Wird die Maximalmenge bei der Auswahl einer Option überschritten erscheint ein Hinweis und die Option wird nicht in die Konfiguration übernommen.',
-                    },
-                    itemattributematch: {
-                        name: 'Attribut-Inkompatibilität',
-                        attributeText:
-                            'Folgendes Attribut wird für das Feststellen von Inkompatibiliäten verwendet',
-                        attributeLabel: 'Attribut',
-                        description:
-                            'Wenn mehrere Optionen dieses Attribut besitzen sind sie nur dann miteinander kompatibel, wenn die Attributwerte an den Optionen übereinstimmen.<br/>' +
-                            'Falls der Nutzer eine Option B mit dem Attribut %{attribute} mit dem Wert X wählt und eine andere bereits gewählte Option A das Attribut ebenfalls besitzt, aber mit einem abweichenden Wert Y, dann ist Option B inkompatibel. Es wird ein Hinweis ausgegeben.',
-                    },
-                    itemattributemaxsum: {
-                        name: 'Attributwerte aufsummieren',
-                        attributeText:
-                            'Die Summe der Zahlenwerte an allen gewählten Optionen dürfen die Maximalsumme nicht überschreiten. Die Zahlenwerte des folgenden Attributs werden addiert.',
-                        attributeLabel: 'Attribut',
-                        maxAmountText: 'Die Maximalsumme ist',
-                        maxAmountLabel: 'Maximalsumme',
-                    },
-                    optionmaxamount: {
-                        name: 'Option, Maximalmenge',
-                        optionText:
-                            'Für folgende Option gibt es eine Beschränkung, wie oft die Option in die Konfiguration gelegt werden kann',
-                        optionLabel: 'Option',
-                        maxAmountText: 'Die Maximalmenge ist',
-                        maxAmountLabel: 'Maximalmenge',
-                        description:
-                            'Wird die Maximalmenge bei der Auswahl einer Option überschritten erscheint ein Hinweis und die Option wird nicht in die Konfiguration übernommen.',
-                    },
-                    defaultoption: {
-                        name: 'Standardteil',
-                        optionText:
-                            'Die folgende Option ist ein Standardteil und muss immer Teil der Konfiguration sein',
-                        optionLabel: 'Option Standardteil',
-                        description:
-                            'Wählt der Nutzer eine zu %{option} inkompatible Option, wird %{option} entfernt. Wählt der Nutzer die inkompatible Option wieder ab, wird %{option} automatisch wieder Teil der Konfiguration.<br/><br/>' +
-                            'Dabei wird kein Hinweis ausgegeben.',
-                    },
-                    additionaloption: {
-                        name: 'Abhängige Optionen',
-                        optionText: 'Zu folgender Option',
-                        optionLabel: 'Option A',
-                        dataOptionText: 'gehört immer auch',
-                        dataOptionLabel: 'Option B',
-                        description:
-                            'Bei der Auswahl von %{optionA} wird %{optionB} automatisch gewählt. Wählt der Nutzer %{optionA} ab, wird %{optionB} ebenfalls automatisch abgewählt.<br/><br/>' +
-                            'Dabei wird kein Hinweis ausgegeben.',
-                    },
-                    attribute_value_group_auto_switch: {
-                        name: 'Gemeinsamer Wechsel',
-                        attributeText:
-                            'Diese Regel ermöglicht, dass Optionen, die ein bestimmtes gemeinsames Attribut haben gemeinsam getauscht werden. Dieses Attribut ist',
-                        attributeLabel: 'Attribut',
-                        switchText:
-                            'Die Regel wird pro Komponente angewendet, nicht über alle Komponenten hinweg',
-                        description:
-                            'Die Regel wird auf gruppierte Optionen angewendet, wenn es also zu einer Option mehrere Varianten gibt (z.B. standard und premium). ' +
-                            'Die Varianten der Optionen müssen das Attribut %{attribute} mit unterschiedlichen Werten besitzen (z.B. standard und premium).<br/>' +
-                            'Wählt der Nutzer eine Option mit dem Attributwert premium, werden pro gewählter Optionsgruppierung diejenigen Varianten eingetauscht, die auch den Attributwert premium besitzen. Es wird kein Hinweis ausgegeben.',
-                    },
-                },
-            },
-        },
-    },
-    true
-);

package/src/Screens/Creator/Components/Rules/index.js

@@ -1,26 +0,0 @@
-import React from 'react';
-
-import actions, { REDUCER_NAME } from '../../Reducers/Rules/Actions';
-import List from './Containers/List';
-import Edit from './Containers/Edit';
-
-import './Translations';
-
-import './Styles.scss';
-
-import { generateCustomScreen, ModalScreen } from '../../../../Components/DefaultScreen';
-import { connectDefault } from '../../../../Components/DefaultConnectedScreen';
-
-class ScreenContainer extends React.Component {
-    render() {
-        return <ModalScreen {...this.props} headlineText={false} className="rules"></ModalScreen>;
-    }
-}
-
-export default connectDefault(
-    generateCustomScreen('rules', List, Edit, ScreenContainer),
-    REDUCER_NAME,
-    actions.invalidateList,
-    actions.unsavedEntity,
-    actions.hideDetails
-);

package/src/Screens/Creator/Components/ShowPreviewErrorDialog.js

@@ -1,46 +0,0 @@
-import React from 'react';
-import Dialog from '../../../UIComponents/Dialog';
-import withStyles from '@material-ui/core/styles/withStyles';
-import FlatButton from '../../../UIComponents/FlatButton';
-import { T } from '../../../App/i18n';
-
-const styles = () => ({
-    paperRoot: {
-        minWidth: '450px',
-    },
-    dialogContentRoot: {
-        overflow: 'hidden',
-        display: 'flex',
-    },
-    dialogContentTextRoot: {
-        width: '100%',
-    },
-});
-
-const ShowPreviewErrorDialog = withStyles(styles)(
-    ({
-        classes,
-        dialogTitle,
-        open,
-        onClose,
-        children,
-    }) => {
-        return (
-                <Dialog
-                    title={dialogTitle}
-                    open={open}
-                    maxWidth="sm"
-                    classes={{
-                        dialogContentTextRoot: classes.dialog,
-                    }}
-                    actions={[
-                        <FlatButton label={T('Ok')} key="closeButton" primary={false} onClick={onClose} />,
-                    ]}
-                >
-                    {children}
-                </Dialog>
-        );
-    }
-);
-
-export default withStyles(styles)(ShowPreviewErrorDialog);

package/src/Screens/Creator/Components/VisualizationAndMediaData/ApiCalls.js

@@ -1,8 +0,0 @@
-import { lazyFetch } from '../../../../Utils/Request/lazyFetch';
-
-const SETTINGS_URL = 'settings/1';
-
-export const loadSettings = async () => {
-    const response = await lazyFetch(SETTINGS_URL);
-    return response.data;
-};

package/src/Screens/Creator/Components/VisualizationAndMediaData/Components/ConfirmDelete.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogActions from '@material-ui/core/DialogActions';
-import Dialog from '../../../../../UIComponents/Dialog';
-import Button from '../../../../../UIComponents/Button';
-import { t } from '../../../../../App/i18n';
-
-const ConfirmDelete = ({ open, onCancel, onConfirm, message, cancelText, confirmText, title }) => {
-    return (
-        <Dialog disableBackdropClick disableEscapeKeyDown maxWidth="xs" open={open}>
-            {title && <DialogTitle>{title}</DialogTitle>}
-            <DialogContent dividers>{message}</DialogContent>
-            <DialogActions>
-                <Button autoFocus onClick={onCancel} color="primary" aria-label="cancel">
-                    {cancelText}
-                </Button>
-                <Button onClick={onConfirm} color="primary" aria-label="ok">
-                    {confirmText}
-                </Button>
-            </DialogActions>
-        </Dialog>
-    );
-};
-ConfirmDelete.defaultProps = {
-    cancelText: t('Cancel'),
-    confirmText: t('Ok'),
-};
-ConfirmDelete.propTypes = {
-    open: PropTypes.bool.isRequired,
-    onCancel: PropTypes.func.isRequired,
-    onConfirm: PropTypes.func.isRequired,
-    message: PropTypes.node,
-    cancelText: PropTypes.node,
-    confirmText: PropTypes.node,
-    title: PropTypes.node,
-};
-ConfirmDelete.displayName = 'ConfirmDelete';
-
-export default ConfirmDelete;

package/src/Screens/Creator/Components/VisualizationAndMediaData/Components/EditableText.js

@@ -1,83 +0,0 @@
-import withStyles from '@material-ui/core/styles/withStyles';
-import React, { useEffect, useRef, useState } from 'react';
-import EditIcon from '@material-ui/icons/Edit';
-import TextField from '../../../../../UIComponents/TextField';
-import InputAdornment from '../../../../../UIComponents/InputAdornment';
-import IconButton from '../../../../../UIComponents/IconButton';
-import CheckmarkIcon from '../../../../../UIComponents/icons/CheckmarkIcon';
-
-export const EditableText = withStyles(() => ({
-    textFieldRoot: {
-        padding: 0,
-    },
-    iconButton: {
-        fontSize: '1em',
-        padding: 4,
-        color: 'white',
-    },
-    input: {
-        padding: 2,
-        paddingLeft: 0,
-    },
-    inputRoot: {
-        font: 'inherit',
-        color: 'inherit',
-    },
-    container: {
-        flex: 1,
-        display: 'flex',
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-    },
-}))(({ value, onChange, classes, ...props }) => {
-    const [open, setOpen] = useState(false);
-    const [currentValue, setCurrentValue] = useState(value);
-    const inputRef = useRef();
-
-    useEffect(() => {
-        setCurrentValue(value);
-    }, [value]);
-
-    const onClose = () => {
-        onChange && onChange(currentValue);
-        setOpen(false);
-    };
-
-    return open ? (
-        <TextField
-            disabled={!open}
-            autoFocus={true}
-            InputProps={{
-                endAdornment: (
-                    <InputAdornment position="end">
-                        <IconButton aria-label="Save" onClick={onClose} className={classes.iconButton}>
-                            <CheckmarkIcon fontSize="small" />
-                        </IconButton>
-                    </InputAdornment>
-                ),
-                disableUnderline: true,
-                classes: {
-                    root: classes.inputRoot,
-                    input: classes.input,
-                },
-            }}
-            inputRef={inputRef}
-            classes={{
-                root: classes.textFieldRoot,
-            }}
-            value={currentValue}
-            onChange={({ target: { value } }) => setCurrentValue(value)}
-            {...props}
-        />
-    ) : (
-        <div className={classes.container}>
-            <span>{currentValue}</span>
-            <IconButton aria-label="Edit" onClick={() => setOpen(true)} className={classes.iconButton}>
-                <EditIcon fontSize="small" />
-            </IconButton>
-        </div>
-    );
-});
-
-export default EditableText;

package/src/Screens/Creator/Components/VisualizationAndMediaData/Components/Image.js

@@ -1,93 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import withStyles from '@material-ui/core/styles/withStyles';
-import { T } from '../../../../../App/i18n';
-import { Tooltip } from '@material-ui/core';
-
-const Image = withStyles({
-    image: {
-        backgroundColor: 'rgba(255, 255, 255, 0.6)',
-        border: '1px solid rgba(0, 0, 0, 0.2)',
-        minWidth: 100,
-        maxWidth: 100,
-        height: '100%',
-        maxHeight: 100,
-        alignSelf: 'center',
-        display: 'inline-flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        boxSizing: 'border-box',
-        flex: 1,
-        '& > *': {
-            flex: 1,
-        },
-        '&$loading img': {
-            display: 'none',
-        },
-        '& img': {
-            maxWidth: '100%',
-            maxHeight: '100%',
-            flex: 0,
-            margin: 'auto',
-        },
-    },
-    '@global': {
-        '@keyframes pulse': {
-            '0%': { backgroundPosition: '0% 0%' },
-            '50%': { backgroundPosition: '100% 100%' },
-            '100%': { backgroundPosition: '0% 0%' },
-        },
-    },
-    loading: {
-        background:
-            'linear-gradient(115deg, rgba(160, 160, 160, 0.2), rgba(255, 255, 255, 0.2), rgba(160, 160, 160, 0.2))',
-        backgroundSize: '400% 400%',
-        animation: 'pulse 2s ease-in-out infinite',
-    },
-    broken: {
-        color: 'red',
-    },
-    tooltip: {
-        maxWidth: 'none',
-    },
-})(({ src, classes }) => {
-    const [broken, setBroken] = useState(false);
-    const [loading, setLoading] = useState(false);
-    useEffect(() => {
-        setBroken(false);
-        src && setLoading(true);
-    }, [src]);
-    return (
-        <div
-            className={
-                classes.image + (loading ? ` ${classes.loading}` : '') + (broken ? ` ${classes.broken}` : '')
-            }
-        >
-            {src ? (
-                broken ? (
-                    T('visualizationAndMediaData.imageStatus.broken')
-                ) : (
-                    <Tooltip
-                        title={src}
-                        classes={{
-                            tooltip: classes.tooltip,
-                        }}
-                    >
-                        <img
-                            src={src}
-                            onLoad={() => setLoading(false)}
-                            onError={() => {
-                                setBroken(true);
-                                setLoading(false);
-                            }}
-                        />
-                    </Tooltip>
-                )
-            ) : (
-                T('visualizationAndMediaData.imageStatus.noImage')
-            )}
-        </div>
-    );
-});
-Image.displayName = 'Image';
-
-export default Image;

package/src/Screens/Creator/Components/VisualizationAndMediaData/Components/ImageEditTools.js

@@ -1,117 +0,0 @@
-import React, { useRef, useState } from 'react';
-import withStyles from '@material-ui/core/styles/withStyles';
-import ImageSearchIcon from '@material-ui/icons/ImageSearch';
-import IconButton from '../../../../../UIComponents/IconButton';
-import DeleteIcon from '../../../../../UIComponents/icons/DeleteIcon';
-import { t } from '../../../../../App/i18n';
-import ConfirmDelete from './ConfirmDelete';
-import Api from '../../../../../App/Api';
-import { networkError } from '../../../../../App/Reducers/Api/Actions';
-import { showErrorMessage, cancelErrorMessage } from '../../../../../App/Reducers/Frame/Actions';
-import { useDispatch } from 'react-redux';
-import { Tooltip } from '@material-ui/core';
-import FileDrop from 'react-file-drop';
-
-const ImageEditTools = withStyles({
-    root: {
-        background: 'rgba(255, 255, 255, 0.6)',
-    },
-    fileInput: {
-        display: 'none',
-    },
-    fileDrop: {
-        position: 'absolute',
-        top: 0,
-        left: '50%',
-        width: 150,
-        marginLeft: -75,
-        height: 100,
-    },
-})(({ classes, className, deleteEnabled, uploadUrl, removeUrl, onUpdate }) => {
-    const fileInputRef = useRef(null);
-    const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
-    const dispatch = useDispatch();
-
-    const uploadImage = async image => {
-        const allowedFormats = ['image/jpeg', 'image/jpg', 'image/png'];
-
-        if (!uploadUrl) {
-            throw new Error('uploadUrl is not provided!');
-        }
-        if (allowedFormats.indexOf(image.type) === -1) {
-            return dispatch(showErrorMessage(t('visualizationAndMediaData.unsupportedFileTypeError')));
-        }
-        try {
-            const data = new FormData();
-            data.append('file', image);
-            dispatch(cancelErrorMessage());
-            return await Api.request({ method: 'post', url: uploadUrl, data });
-        } catch (e) {
-            dispatch(networkError('image', 'image', e));
-        }
-    };
-    const removeImage = async () => {
-        if (!removeUrl) {
-            throw new Error('removeUrl is not provided!');
-        }
-        try {
-            return await Api.request({ method: 'delete', url: removeUrl });
-        } catch (e) {
-            dispatch(networkError('image', 'image', e));
-        }
-    };
-
-    return (
-        <FileDrop
-            className={classes.fileDrop}
-            onDrop={async files => {
-                await uploadImage(files[0]);
-                onUpdate && onUpdate();
-            }}
-            multiple={false}
-        >
-            <div className={`${classes.root} ${className}`}>
-                <input
-                    ref={fileInputRef}
-                    type="file"
-                    accept="image/jpeg, image/png"
-                    className={classes.fileInput}
-                    onChange={async evt => {
-                        if (evt.target.files.length) {
-                            await uploadImage(evt.target.files[0]);
-                            onUpdate && onUpdate();
-                        }
-                    }}
-                />
-                <label>
-                    <Tooltip title={t('visualizationAndMediaData.imageAddTooltip')}>
-                        <IconButton onClick={() => fileInputRef.current.click()}>
-                            <ImageSearchIcon />
-                        </IconButton>
-                    </Tooltip>
-                </label>
-                {deleteEnabled && (
-                    <Tooltip title={t('visualizationAndMediaData.imageDeleteTooltip')}>
-                        <IconButton onClick={() => setShowDeleteConfirm(true)}>
-                            <DeleteIcon />
-                        </IconButton>
-                    </Tooltip>
-                )}
-
-                <ConfirmDelete
-                    open={showDeleteConfirm}
-                    onCancel={() => setShowDeleteConfirm(false)}
-                    onConfirm={async () => {
-                        await removeImage();
-                        setShowDeleteConfirm(false);
-                        onUpdate && onUpdate();
-                    }}
-                    title={t('visualizationAndMediaData.imageDeleteConfirm.title')}
-                    message={t('visualizationAndMediaData.imageDeleteConfirm.message')}
-                />
-            </div>
-        </FileDrop>
-    );
-});
-
-export default ImageEditTools;