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 &&