lib: add types to more cockpit-components

type cockpit-components-empty-state component
type cockpit-components-truncate

pkg/lib/cockpit-components-empty-state.tsx

@@ -0,0 +1,93 @@
+/*
+ * 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 <https://www.gnu.org/licenses/>.
+ */
+
+import React from "react";
+import PropTypes from 'prop-types';
+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, EmptyStateHeader, EmptyStateIcon, EmptyStateVariant
+} from "@patternfly/react-core/dist/esm/components/EmptyState/index.js";
+import type { EmptyStateIconProps, EmptyStateHeaderProps } 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?: EmptyStateHeaderProps["titleText"],
+    paragraph?: React.ReactNode,
+    loading?: boolean,
+    icon?: EmptyStateIconProps["icon"],
+    action?: React.ReactNode | string,
+    isActionInProgress?: boolean,
+    onAction?: ButtonProps["onClick"],
+    actionVariant?: ButtonProps["variant"],
+    secondary?: React.ReactNode,
+    headingLevel?: EmptyStateHeaderProps['headingLevel'],
+}) => {
+    const slimType = title || paragraph ? "" : "slim";
+    const emptyStateHeaderIcon = loading ? Spinner : icon;
+
+    return (
+        <EmptyState variant={EmptyStateVariant.full}>
+            <EmptyStateHeader
+                titleText={title}
+                headingLevel={headingLevel}
+                {...emptyStateHeaderIcon && { icon: <EmptyStateIcon 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>
+    );
+};
+
+EmptyStatePanel.propTypes = {
+    loading: PropTypes.bool,
+    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func]),
+    title: PropTypes.string,
+    paragraph: PropTypes.node,
+    action: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+    actionVariant: PropTypes.string,
+    isActionInProgress: PropTypes.bool,
+    onAction: PropTypes.func,
+    secondary: PropTypes.node,
+};

pkg/lib/cockpit-components-truncate.jsx → pkg/lib/cockpit-components-truncate.tsx

@@ -31,6 +31,8 @@ import './cockpit-components-truncate.scss';
 export const Truncate = ({
     content,
     ...props
+}: {
+    content: string,
 }) => {
     return (
         <span className="pf-v5-c-truncate ct-no-truncate-min-width" {...props}>