diff --git a/lib/cockpit-components-empty-state.css b/lib/cockpit-components-empty-state.css new file mode 100644 index 000000000..2970fa036 --- /dev/null +++ b/lib/cockpit-components-empty-state.css @@ -0,0 +1,3 @@ +.pf-c-empty-state .pf-c-button.pf-m-primary.slim { + margin: 0px; +} diff --git a/lib/cockpit-components-empty-state.jsx b/lib/cockpit-components-empty-state.jsx new file mode 100644 index 000000000..4f6a8b6eb --- /dev/null +++ b/lib/cockpit-components-empty-state.jsx @@ -0,0 +1,60 @@ +/* + * This file is part of Cockpit. + * + * Copyright (C) 2019 Red Hat, Inc. + * + * Cockpit is free software; you can redistribute it and/or modify it + * under the terms of the GNU Lesser General Public License as published by + * the Free Software Foundation; either version 2.1 of the License, or + * (at your option) any later version. + * + * Cockpit 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 Cockpit; If not, see . + */ + +import React from "react"; +import PropTypes from 'prop-types'; +import { + Title, + Button, + EmptyState, + EmptyStateVariant, + EmptyStateIcon, + EmptyStateBody, + EmptyStateSecondaryActions, + Spinner, +} from '@patternfly/react-core'; +import "./cockpit-components-empty-state.css"; + +export const EmptyStatePanel = ({ title, paragraph, loading, icon, action, onAction, secondary }) => { + const slimType = title || paragraph ? "" : "slim"; + return ( + + { loading && } + { icon && } + + {title} + + + {paragraph} + + { action && (typeof action == "string" ? : action)} + { secondary && {secondary} } + + ); +}; + +EmptyStatePanel.propTypes = { + loading: PropTypes.bool, + icon: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), + title: PropTypes.string, + paragraph: PropTypes.node, + action: PropTypes.node, + onAction: PropTypes.func, + secondary: PropTypes.node, +}; diff --git a/src/ImageSearchModal.css b/src/ImageSearchModal.css index 3bf6d1424..f163b0944 100644 --- a/src/ImageSearchModal.css +++ b/src/ImageSearchModal.css @@ -30,10 +30,6 @@ max-height: 75vh; } -#search-image-dialog-waiting.pf-c-spinner { - margin-top: 3rem; -} - .image-list-item { display: grid; grid-gap: 0 1rem; @@ -98,11 +94,6 @@ margin: 0; } -.no-results { - border: 1px solid var(--pf-global--BorderColor--100); - padding: var(--pf-global--spacer--md); -} - .image-tag-entry { max-width: 15rem; } diff --git a/src/ImageSearchModal.jsx b/src/ImageSearchModal.jsx index d32249b18..268f4f5b9 100644 --- a/src/ImageSearchModal.jsx +++ b/src/ImageSearchModal.jsx @@ -1,11 +1,12 @@ import React from 'react'; import { - Bullseye, Button, - DataList, DataListItem, DataListItemRow, DataListCell, DataListItemCells, - Flex, Form, FormGroup, Modal, Radio, Spinner, TextInput + Button, DataList, DataListItem, DataListItemRow, DataListCell, DataListItemCells, + Flex, Form, FormGroup, Modal, Radio, TextInput } from '@patternfly/react-core'; +import { ExclamationCircleIcon } from '@patternfly/react-icons'; import * as Select from '../lib/cockpit-components-select.jsx'; +import { EmptyStatePanel } from "../lib/cockpit-components-empty-state.jsx"; import { ErrorNotification } from './Notification.jsx'; import cockpit from 'cockpit'; import rest from './rest.js'; @@ -161,10 +162,15 @@ export class ImageSearchModal extends React.Component { - {this.state.searchInProgress && } + {this.state.searchInProgress && } - {this.state.searchFinished && !this.state.imageIdentifier == '' && <> - {this.state.imageList.length == 0 &&
{cockpit.format(_("No results for $0. Please retry another term."), this.state.imageIdentifier)}
} + {((!this.state.searchInProgress && !this.state.searchFinished) || this.state.imageIdentifier == "") && } + + {this.state.searchFinished && this.state.imageIdentifier !== '' && <> + {this.state.imageList.length == 0 && } {this.state.imageList.length > 0 &&