From 6d22f95d1984cbee3f21fce87091963124cc4b14 Mon Sep 17 00:00:00 2001
From: tomasmatus <tomatus777@gmail.com>
Date: Thu, 7 Nov 2024 16:58:40 +0100
Subject: [PATCH] lib: add types to more cockpit-components

type cockpit-components-empty-state component
type cockpit-components-truncate
---
 pkg/lib/cockpit-components-empty-state.jsx    | 58 ------------
 pkg/lib/cockpit-components-empty-state.tsx    | 93 +++++++++++++++++++
 ...te.jsx => cockpit-components-truncate.tsx} |  2 +
 3 files changed, 95 insertions(+), 58 deletions(-)
 delete mode 100644 pkg/lib/cockpit-components-empty-state.jsx
 create mode 100644 pkg/lib/cockpit-components-empty-state.tsx
 rename pkg/lib/{cockpit-components-truncate.jsx => cockpit-components-truncate.tsx} (98%)

diff --git a/pkg/lib/cockpit-components-empty-state.jsx b/pkg/lib/cockpit-components-empty-state.jsx
deleted file mode 100644
index 82d7b97eb9ab..000000000000
--- a/pkg/lib/cockpit-components-empty-state.jsx
+++ /dev/null
@@ -1,58 +0,0 @@
-/*
- * 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 { EmptyStateActions, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateHeader, EmptyStateIcon, EmptyStateVariant } 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" }) => {
-    const slimType = title || paragraph ? "" : "slim";
-    return (
-        <EmptyState variant={EmptyStateVariant.full}>
-            <EmptyStateHeader titleText={title} headingLevel={headingLevel} icon={(loading || icon) && <EmptyStateIcon icon={loading ? Spinner : icon} />} />
-            <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.node,
-    actionVariant: PropTypes.string,
-    isActionInProgress: PropTypes.bool,
-    onAction: PropTypes.func,
-    secondary: PropTypes.node,
-};
diff --git a/pkg/lib/cockpit-components-empty-state.tsx b/pkg/lib/cockpit-components-empty-state.tsx
new file mode 100644
index 000000000000..4e6570d1f8fd
--- /dev/null
+++ b/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,
+};
diff --git a/pkg/lib/cockpit-components-truncate.jsx b/pkg/lib/cockpit-components-truncate.tsx
similarity index 98%
rename from pkg/lib/cockpit-components-truncate.jsx
rename to pkg/lib/cockpit-components-truncate.tsx
index 32299aed82cf..fe0101127924 100644
--- a/pkg/lib/cockpit-components-truncate.jsx
+++ b/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}>