fix(web): use right type for icon name at core/EmptyState (agama-proj…

…ect#1711)

## Problem

Unfortunately, agama-project#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
(agama-project@d9554b1)
and take the opportunity for migrating the component to TypeScript
(agama-project@9719d0b)
which makes possible to get rid of a `@ts-expect-error` directive
(agama-project@749db9e)

## Testing

Tested manually by running `NODE_ENV=production npm run build`

web/src/components/core/EmptyState.jsx → 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").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
@@ -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({
@@ -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();
 

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<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 */

web/src/components/storage/zfcp/ZFCPPage.tsx

@@ -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 && (