Line data Source code
1 : /*
2 : * Copyright (C) 2019 Red Hat, Inc.
3 : * SPDX-License-Identifier: LGPL-2.1-or-later
4 : */
5 :
6 711 : import React from "react";
7 : import { Button } from "@patternfly/react-core/dist/esm/components/Button/index.js";
8 : import type { ButtonProps } from "@patternfly/react-core/dist/esm/components/Button/index.js";
9 : import {
10 : EmptyStateActions, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateVariant
11 : } from "@patternfly/react-core/dist/esm/components/EmptyState/index.js";
12 : import type { EmptyStateProps } from "@patternfly/react-core/dist/esm/components/EmptyState/index.js";
13 : import { Spinner } from "@patternfly/react-core/dist/esm/components/Spinner/index.js";
14 : import "./cockpit-components-empty-state.css";
15 :
16 178 : export const EmptyStatePanel = ({
17 178 : title,
18 178 : paragraph,
19 178 : loading = false,
20 178 : icon,
21 178 : action,
22 178 : isActionInProgress = false,
23 178 : onAction,
24 178 : actionVariant = "primary",
25 178 : secondary,
26 178 : headingLevel = "h1"
27 178 : }: {
28 : title?: EmptyStateProps["titleText"],
29 : paragraph?: React.ReactNode,
30 : loading?: boolean,
31 : icon?: EmptyStateProps["icon"],
32 : action?: React.ReactNode | string,
33 : isActionInProgress?: boolean,
34 : onAction?: ButtonProps["onClick"],
35 : actionVariant?: ButtonProps["variant"],
36 : secondary?: React.ReactNode,
37 : headingLevel?: EmptyStateProps['headingLevel'],
38 178 : }) => {
39 44 : const slimType = title || paragraph ? "" : "slim";
40 71 : const emptyStateHeaderIcon = loading ? Spinner : icon;
41 :
42 178 : return (
43 178 : <EmptyState headingLevel={headingLevel} titleText={title} variant={EmptyStateVariant.full} {...emptyStateHeaderIcon && { icon: emptyStateHeaderIcon }}>
44 178 : <EmptyStateBody>
45 178 : {paragraph}
46 178 : </EmptyStateBody>
47 165 : {(action || secondary) &&
48 77 : <EmptyStateFooter>
49 66 : { action && (typeof action == "string"
50 43 : ? <Button variant={actionVariant} className={slimType}
51 43 : isLoading={isActionInProgress}
52 43 : isDisabled={isActionInProgress}
53 43 : onClick={onAction}>
54 43 : {action}
55 43 : </Button>
56 49 : : action)}
57 38 : { secondary && <EmptyStateActions>{secondary}</EmptyStateActions> }
58 77 : </EmptyStateFooter>}
59 178 : </EmptyState>
60 : );
61 178 : };
|