Skip to content

Commit

Permalink
fix(web): use right type for icon name at core/EmptyState (#1711)
Browse files Browse the repository at this point in the history
## Problem

Unfortunately, #1690 broken a
type import at core/EmptyState component that has been cough [by
OBS](https://build.opensuse.org/package/live_build_log/systemsmanagement:Agama:Devel/agama-web-ui/openSUSE_Tumbleweed/x86_64)


## Solution

To use the right type
(d9554b1)
and take the opportunity for migrating the component to TypeScript
(9719d0b)
which makes possible to get rid of a `@ts-expect-error` directive
(749db9e)

## Testing

Tested manually by running `NODE_ENV=production npm run build`
  • Loading branch information
dgdavid authored Oct 29, 2024
2 parents bcb9c5c + 749db9e commit aa2bb2c
Show file tree
Hide file tree
Showing 3 changed files with 14 additions and 19 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,6 @@
* find current contact information at www.suse.com.
*/

// @ts-check

import React from "react";
import {
EmptyState,
Expand All @@ -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").IconName} IconName
* @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
Expand All @@ -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 {IconName} 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({
Expand All @@ -66,7 +62,7 @@ export default function EmptyStateWrapper({
actions,
children,
...rest
}) {
}: Partial<EmptyStateProps> & EmptyStateWrapperProps) {
// @ts-ignore
if (noPadding) rest.className = [rest.className, "no-padding"].join(" ").trim();

Expand Down
2 changes: 1 addition & 1 deletion web/src/components/layout/Icon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ const icons = {

const PREDEFINED_SIZES = ["xxxs", "xxs", "xs", "s", "m", "l", "xl", "xxl", "xxxl"];

type IconProps = React.SVGAttributes<SVGElement> & {
export type IconProps = React.SVGAttributes<SVGElement> & {
/** 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 */
Expand Down
1 change: 0 additions & 1 deletion web/src/components/storage/zfcp/ZFCPPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,6 @@ const NoDisksFound = () => {
<EmptyState
title={_("No zFCP disks found.")}
icon="warning"
// @ts-expect-error: core/EmptyState props are not well defined
variant="sm"
actions={
activeController && (
Expand Down

0 comments on commit aa2bb2c

Please sign in to comment.