🏡 index : quine-global-labs/mirror-cockpit-project-cockpit.git

/*
 * Copyright (C) 2019 Red Hat, Inc.
 * SPDX-License-Identifier: LGPL-2.1-or-later
 */

import React from "react";
import { Button } from "@patternfly/react-core/dist/esm/components/Button/index.js";
import type { ButtonProps } from "@patternfly/react-core/dist/esm/components/Button/index.js";
import {
    EmptyStateActions, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateVariant
} from "@patternfly/react-core/dist/esm/components/EmptyState/index.js";
import type { EmptyStateProps } from "@patternfly/react-core/dist/esm/components/EmptyState/index.js";
import { Spinner } from "@patternfly/react-core/dist/esm/components/Spinner/index.js";
import "./cockpit-components-empty-state.css";

export const EmptyStatePanel = ({
    title,
    paragraph,
    loading = false,
    icon,
    action,
    isActionInProgress = false,
    onAction,
    actionVariant = "primary",
    secondary,
    headingLevel = "h1"
}: {
    title?: EmptyStateProps["titleText"],
    paragraph?: React.ReactNode,
    loading?: boolean,
    icon?: EmptyStateProps["icon"],
    action?: React.ReactNode | string,
    isActionInProgress?: boolean,
    onAction?: ButtonProps["onClick"],
    actionVariant?: ButtonProps["variant"],
    secondary?: React.ReactNode,
    headingLevel?: EmptyStateProps['headingLevel'],
}) => {
    const slimType = title || paragraph ? "" : "slim";
    const emptyStateHeaderIcon = loading ? Spinner : icon;

    return (
        <EmptyState headingLevel={headingLevel} titleText={title} variant={EmptyStateVariant.full} {...emptyStateHeaderIcon && { icon: emptyStateHeaderIcon }}>
            <EmptyStateBody>
                {paragraph}
            </EmptyStateBody>
            {(action || secondary) &&
                <EmptyStateFooter>
                    { action && (typeof action == "string"
                        ? <Button variant={actionVariant} className={slimType}
                              isLoading={isActionInProgress}
                              isDisabled={isActionInProgress}
                              onClick={onAction}>
                            {action}
                        </Button>
                        : action)}
                    { secondary && <EmptyStateActions>{secondary}</EmptyStateActions> }
                </EmptyStateFooter>}
        </EmptyState>
    );
};