@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
183 lines (181 loc) • 6.71 kB
JavaScript
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import * as React from 'react';
import { useEffect, useState } from 'react';
import DialogBody from '../DialogBody/DialogBody';
import EmptyState from '../EmptyState/EmptyState';
import { FormattedMessage } from 'react-intl';
import Alert from '@mui/material/Alert';
import DialogFooter from '../DialogFooter/DialogFooter';
import SecondaryButton from '../SecondaryButton';
import PrimaryButton from '../PrimaryButton';
import LoadingState from '../LoadingState/LoadingState';
import { Box, ListItem, ListItemText, TextField } from '@mui/material';
import Typography from '@mui/material/Typography';
import List from '@mui/material/List';
import ItemDisplay from '../ItemDisplay';
function getStyles(sx) {
return {
content: {
background: (theme) => theme.palette.background.paper,
...sx?.content
},
emphasisedText: {
fontWeight: 600,
...sx?.emphasisedText
},
loadingStateWrapper: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
display: 'flex',
background: 'rgba(255,255,255,0.7)',
...sx?.loadingStateWrapper
}
};
}
export function UninstallPluginDialogBody(props) {
const {
onCloseButtonClick,
resource,
pluginId,
onSubmit: onSubmitProp,
password = 'uninstall',
isSubmitting
} = props;
const data = resource.read();
const hasUsages = data.length > 0;
const [confirmPasswordPassed, setConfirmPasswordPassed] = useState(false);
const [passwordFieldValue, setPasswordFieldValue] = useState('');
const sx = getStyles(props.sx);
useEffect(() => {
setConfirmPasswordPassed(passwordFieldValue.toLowerCase() === password.toLowerCase());
}, [password, passwordFieldValue]);
const onSubmit = (e) => {
e.preventDefault();
if (confirmPasswordPassed || !hasUsages) {
onSubmitProp?.();
}
};
return React.createElement(
'form',
{ onSubmit: onSubmit },
React.createElement(
DialogBody,
null,
hasUsages
? React.createElement(
React.Fragment,
null,
React.createElement(
Alert,
{ variant: 'outlined', severity: 'warning', icon: false },
React.createElement(FormattedMessage, {
id: 'uninstallPluginDialog.reviewDependenciesMessage',
defaultMessage: 'Please review the dependant items of "{pluginId}"',
values: {
pluginId
}
})
),
React.createElement(
List,
null,
data.map((item) =>
React.createElement(
ListItem,
{ key: item.id, divider: true, sx: sx.content },
React.createElement(ListItemText, {
primary: React.createElement(ItemDisplay, { item: item, showNavigableAsLinks: false }),
secondary: React.createElement(Typography, {
variant: 'body2',
color: 'textSecondary',
children: item.path
})
})
)
)
),
React.createElement(
Alert,
{ severity: 'warning' },
React.createElement(FormattedMessage, {
id: 'uninstallPluginDialog.typePassword',
defaultMessage: 'Type the word "<b>{password}</b>" to confirm the deletion of the plugin.',
values: {
password,
b: (message) => React.createElement(Box, { component: 'strong', sx: sx.emphasisedText }, message)
}
}),
React.createElement(TextField, {
fullWidth: true,
disabled: isSubmitting,
value: passwordFieldValue,
onChange: (e) => setPasswordFieldValue(e.target.value),
onKeyPress: (e) => e.key === 'Enter' && onSubmit(e)
})
)
)
: React.createElement(
'div',
null,
React.createElement(EmptyState, {
title: React.createElement(FormattedMessage, {
id: 'uninstallPluginDialog.noUsagesFound',
defaultMessage: 'No usages found'
}),
subtitle: React.createElement(FormattedMessage, {
id: 'uninstallPluginDialog.pluginSafeToUninstall',
defaultMessage: 'The plugin can be safely uninstalled.'
})
})
)
),
React.createElement(
DialogFooter,
null,
React.createElement(
SecondaryButton,
{ onClick: onCloseButtonClick, autoFocus: true, disabled: isSubmitting },
React.createElement(FormattedMessage, { id: 'words.cancel', defaultMessage: 'Cancel' })
),
React.createElement(
PrimaryButton,
{ disabled: (hasUsages && !confirmPasswordPassed) || isSubmitting, type: 'submit' },
React.createElement(FormattedMessage, { id: 'words.uninstall', defaultMessage: 'Uninstall' })
)
),
isSubmitting && React.createElement(Box, { sx: sx.loadingStateWrapper }, React.createElement(LoadingState, null))
);
}
export default UninstallPluginDialogBody;