UNPKG

@craftercms/studio-ui

Version:

Services, components, models & utils to build CrafterCMS authoring extensions.

128 lines (126 loc) 5 kB
/* * 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/>. */ var __rest = (this && this.__rest) || function (s, e) { var t = {}; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; if (s != null && typeof Object.getOwnPropertySymbols === 'function') for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; } return t; }; import React, { useEffect } from 'react'; import useSpreadState from '../../hooks/useSpreadState'; import useActiveSiteId from '../../hooks/useActiveSiteId'; import { fetchPublishingHistoryPackageItems } from '../../services/dashboard'; import { delay } from 'rxjs/operators'; import { FormattedMessage } from 'react-intl'; import DialogContent from '@mui/material/DialogContent'; import { LoadingState } from '../LoadingState'; import Typography from '@mui/material/Typography'; import { EmptyState } from '../EmptyState'; import List from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; import ItemDisplay from '../ItemDisplay'; import { EnhancedDialog } from '../EnhancedDialog'; export function PackageDetailsDialog(props) { const { packageId } = props, enhancedDialogProps = __rest(props, ['packageId']); const site = useActiveSiteId(); const [state, setState] = useSpreadState({ items: null, loading: false, error: null }); useEffect(() => { if (packageId) { setState({ items: null, loading: true }); fetchPublishingHistoryPackageItems(site, packageId) .pipe(delay(1000)) .subscribe({ next: (items) => setState({ items, loading: false }), error(error) { setState({ error, loading: false }); } }); } }, [packageId, site, setState]); return React.createElement( EnhancedDialog, Object.assign({ fullWidth: true, maxWidth: 'md' }, enhancedDialogProps, { title: React.createElement(FormattedMessage, { id: 'packageDetailsDialog.packageDetailsDialogTitle', defaultMessage: 'Publishing Package Details' }) }), React.createElement( DialogContent, null, state.loading && React.createElement(LoadingState, { styles: { root: { width: 100 } } }), !Boolean(packageId) && React.createElement( Typography, { color: 'error.main' }, React.createElement(FormattedMessage, { id: 'packageDetailsDialog.missingPackageId', defaultMessage: 'Unable to fetch package details as package id was not provided to this UI' }) ), state.items && (state.items.length === 0 ? React.createElement(EmptyState, { title: React.createElement(FormattedMessage, { id: 'packageDetailsDialog.emptyPackageMessage', defaultMessage: 'The package is empty' }), subtitle: React.createElement(FormattedMessage, { id: 'packageDetailsDialog.emptyPackageMessageSubtitle', defaultMessage: 'Fetched package id is {packageId}', values: { packageId } }) }) : React.createElement( List, null, state.items.map((item) => React.createElement( ListItem, { key: item.id }, React.createElement(ItemDisplay, { item: item, showNavigableAsLinks: false }) ) ) )) ) ); } export default PackageDetailsDialog;