Use empty-state component for search dialog

Fixes #56
Closes 607

lib/cockpit-components-empty-state.css

@@ -0,0 +1,3 @@
+.pf-c-empty-state .pf-c-button.pf-m-primary.slim {
+    margin: 0px;
+}

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 <http://www.gnu.org/licenses/>.
+ */
+
+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 (
+        <EmptyState variant={EmptyStateVariant.full}>
+            { loading && <Spinner size="xl" /> }
+            { icon && <EmptyStateIcon icon={icon} /> }
+            <Title headingLevel="h1" size="lg">
+                {title}
+            </Title>
+            <EmptyStateBody>
+                {paragraph}
+            </EmptyStateBody>
+            { action && (typeof action == "string" ? <Button variant="primary" className={slimType} onClick={onAction}>{action}</Button> : action)}
+            { secondary && <EmptyStateSecondaryActions>{secondary}</EmptyStateSecondaryActions> }
+        </EmptyState>
+    );
+};
+
+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,
+};

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;
 }

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 {
                     </Flex>
                 </Form>
 
-                {this.state.searchInProgress && <Bullseye><Spinner id='search-image-dialog-waiting' /></Bullseye>}
+                {this.state.searchInProgress && <EmptyStatePanel loading title={_("Searching...")} /> }
 
-                {this.state.searchFinished && !this.state.imageIdentifier == '' && <>
-                    {this.state.imageList.length == 0 && <div className="no-results"> {cockpit.format(_("No results for $0. Please retry another term."), this.state.imageIdentifier)} </div>}
+                {((!this.state.searchInProgress && !this.state.searchFinished) || this.state.imageIdentifier == "") && <EmptyStatePanel title={_("No images found")} paragraph={_("Please start typing to look for images.")} /> }
+
+                {this.state.searchFinished && this.state.imageIdentifier !== '' && <>
+                    {this.state.imageList.length == 0 && <EmptyStatePanel icon={ExclamationCircleIcon}
+                                                                          title={cockpit.format(_("No results for $0"), this.state.imageIdentifier)}
+                                                                          paragraph={_("Please retry another term.")}
+                    />}
                     {this.state.imageList.length > 0 &&
                     <DataList isCompact
                               selectedDataListItemId={"image-list-item-" + this.state.selected}

test/check-application

@@ -1348,7 +1348,7 @@ class TestApplication(testlib.MachineCase):
         self.check_container(sha, auth, ['busybox-without-publish', 'busybox:latest', '/bin/sh', 'exited'])
         b.click('#containers-containers tr:contains("busybox-without-publish") .pf-c-table__toggle button')
         b.click(".pf-m-expanded a:contains('Console')")
-        b.wait_text(".pf-m-expanded span.empty-message", "Container is not running")
+        b.wait_text(".pf-m-expanded .pf-c-title", "Container is not running")
 
         b.click('#containers-images tbody tr:contains("busybox:latest") td.pf-c-table__toggle button')
         b.click("#containers-images tbody tr:contains('busybox:latest') a:contains('Used by')")