From d9554b145904d0eb2883d61b8f1cd4d7f0c6e9dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Tue, 29 Oct 2024 10:20:56 +0000 Subject: [PATCH 1/3] fix(web) use right type for icon name at EmptyState It was broken when migration layout/Icon.jsx to layout/Icon.tsx in https://github.com/agama-project/agama/pull/1690 --- web/src/components/core/EmptyState.jsx | 4 ++-- web/src/components/layout/Icon.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/web/src/components/core/EmptyState.jsx b/web/src/components/core/EmptyState.jsx index 056ca56e8a..72c69802ad 100644 --- a/web/src/components/core/EmptyState.jsx +++ b/web/src/components/core/EmptyState.jsx @@ -34,7 +34,7 @@ import { import { Icon } from "~/components/layout"; /** - * @typedef {import("~/components/layout/Icon").IconName} IconName + * @typedef {import("~/components/layout/Icon").IconProps} IconProps * @typedef {import("@patternfly/react-core").EmptyStateProps} EmptyStateProps * @typedef {import("@patternfly/react-core").EmptyStateHeaderProps} EmptyStateHeaderProps */ @@ -48,7 +48,7 @@ import { Icon } from "~/components/layout"; * * @param {object} props * @param {string} props.title - * @param {IconName} props.icon + * @param {IconProps["name"]} props.icon * @param {string} [props.color="color-100"] * @param {EmptyStateHeaderProps["headingLevel"]} [props.headingLevel="h4"] * @param {boolean} [props.noPadding=false] diff --git a/web/src/components/layout/Icon.tsx b/web/src/components/layout/Icon.tsx index acab440e37..6612381b44 100644 --- a/web/src/components/layout/Icon.tsx +++ b/web/src/components/layout/Icon.tsx @@ -152,7 +152,7 @@ const icons = { const PREDEFINED_SIZES = ["xxxs", "xxs", "xs", "s", "m", "l", "xl", "xxl", "xxxl"]; -type IconProps = React.SVGAttributes & { +export type IconProps = React.SVGAttributes & { /** Name of the desired icon */ name: keyof typeof icons; /** Size used for both, width and height.It can be a CSS unit or one of PREDEFINED_SIZES */ From 9719d0b201e7f1d861062e18fd9748a3e9c50373 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Tue, 29 Oct 2024 10:30:56 +0000 Subject: [PATCH 2/3] refactor(web) migrate core/EptyState to TypeScript Since it has been touched in a previous commit, moves it to TypeScript although still being an unfinished component and its future is even unknown. --- .../core/{EmptyState.jsx => EmptyState.tsx} | 30 ++++++++----------- 1 file changed, 13 insertions(+), 17 deletions(-) rename web/src/components/core/{EmptyState.jsx => EmptyState.tsx} (77%) diff --git a/web/src/components/core/EmptyState.jsx b/web/src/components/core/EmptyState.tsx similarity index 77% rename from web/src/components/core/EmptyState.jsx rename to web/src/components/core/EmptyState.tsx index 72c69802ad..49451b9c1f 100644 --- a/web/src/components/core/EmptyState.jsx +++ b/web/src/components/core/EmptyState.tsx @@ -20,8 +20,6 @@ * find current contact information at www.suse.com. */ -// @ts-check - import React from "react"; import { EmptyState, @@ -30,14 +28,21 @@ import { Stack, EmptyStateFooter, EmptyStateActions, + EmptyStateProps, + EmptyStateHeaderProps, } from "@patternfly/react-core"; import { Icon } from "~/components/layout"; +import { IconProps } from "../layout/Icon"; -/** - * @typedef {import("~/components/layout/Icon").IconProps} IconProps - * @typedef {import("@patternfly/react-core").EmptyStateProps} EmptyStateProps - * @typedef {import("@patternfly/react-core").EmptyStateHeaderProps} EmptyStateHeaderProps - */ +type EmptyStateWrapperProps = { + title: string; + icon: IconProps["name"]; + color?: string; + headingLevel?: EmptyStateHeaderProps["headingLevel"]; + noPadding?: boolean; + actions?: React.ReactNode; + children?: React.ReactNode; +}; /** * Convenient wrapper for easing the use of PF/EmptyState component @@ -46,15 +51,6 @@ import { Icon } from "~/components/layout"; * directly when dealing with a very specific UI use case and more freedom is * needed. * - * @param {object} props - * @param {string} props.title - * @param {IconProps["name"]} props.icon - * @param {string} [props.color="color-100"] - * @param {EmptyStateHeaderProps["headingLevel"]} [props.headingLevel="h4"] - * @param {boolean} [props.noPadding=false] - * @param {React.ReactNode} [props.actions] - * @param {React.ReactNode} [props.children] - * @param {EmptyStateProps} [props.rest] * @todo write documentation */ export default function EmptyStateWrapper({ @@ -66,7 +62,7 @@ export default function EmptyStateWrapper({ actions, children, ...rest -}) { +}: Partial & EmptyStateWrapperProps) { // @ts-ignore if (noPadding) rest.className = [rest.className, "no-padding"].join(" ").trim(); From 749db9e4d9c2a49d2c6b0ebb601d0ed1ae0dc961 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Tue, 29 Oct 2024 10:40:15 +0000 Subject: [PATCH 3/3] fix(web): drop no longer needed @ts-expect-error That was at core/EmptyState because props were not well defined when using JSDoc. Now these props are properly defined with TypeScript, such a directive is no longer necessary. --- web/src/components/storage/zfcp/ZFCPPage.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/web/src/components/storage/zfcp/ZFCPPage.tsx b/web/src/components/storage/zfcp/ZFCPPage.tsx index 8eea02ee79..5eeaa53ba8 100644 --- a/web/src/components/storage/zfcp/ZFCPPage.tsx +++ b/web/src/components/storage/zfcp/ZFCPPage.tsx @@ -84,7 +84,6 @@ const NoDisksFound = () => {