refactor(kube/namespaces): migrate table to react [EE-4694] (#10988)

app/react/components/StatusBadge.stories.tsx

@@ -0,0 +1,67 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Check } from 'lucide-react';
+
+import { StatusBadge } from './StatusBadge';
+
+const meta: Meta<typeof StatusBadge> = {
+  title: 'Components/StatusBadge',
+  component: StatusBadge,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof StatusBadge>;
+
+export const Default: Story = {
+  args: {
+    children: 'Default',
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    icon: Check,
+    children: 'With Icon',
+  },
+};
+
+export const Success: Story = {
+  args: {
+    color: 'success',
+    children: 'Success',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    color: 'warning',
+    children: 'Warning',
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    color: 'danger',
+    children: 'Danger',
+  },
+};
+
+export const WithAriaAttributes: Story = {
+  args: {
+    'aria-label': 'Badge with Aria Attributes',
+    children: 'With Aria Attributes',
+  },
+};
+
+export const WithChildren: Story = {
+  args: {
+    children: (
+      <>
+        <span role="img" aria-label="Star">
+          ⭐️
+        </span>
+        With Children
+      </>
+    ),
+  },
+};

app/react/components/StatusBadge.tsx

@@ -12,20 +12,21 @@ export function StatusBadge({
 }: PropsWithChildren<
   {
     className?: string;
-    color?: 'success' | 'danger' | 'warning' | 'default';
+    color?: 'success' | 'danger' | 'warning' | 'info' | 'default';
     icon?: IconProps['icon'];
   } & AriaAttributes
 >) {
   return (
     <span
       className={clsx(
-        'flex items-center gap-1 rounded',
+        'inline-flex items-center gap-1 rounded',
         'w-fit px-1.5 py-0.5',
         'text-sm font-medium text-white',
         {
-          ' bg-success-7  th-dark:bg-success-9': color === 'success',
-          ' bg-warning-7  th-dark:bg-warning-9': color === 'warning',
-          ' bg-error-7  th-dark:bg-error-9': color === 'danger',
+          'bg-success-7 th-dark:bg-success-9': color === 'success',
+          'bg-warning-7 th-dark:bg-warning-9': color === 'warning',
+          'bg-error-7 th-dark:bg-error-9': color === 'danger',
+          'bg-blue-9': color === 'info',
         },
         className
       )}

app/react/components/buttons/DeleteButton.tsx

@@ -5,18 +5,30 @@ import { confirmDelete } from '@@/modals/confirm';
 
 import { Button } from './Button';
 
+type ConfirmOrClick =
+  | {
+      confirmMessage: ReactNode;
+      onConfirmed(): Promise<void> | void;
+      onClick?: never;
+    }
+  | {
+      confirmMessage?: never;
+      onConfirmed?: never;
+      /** if onClick is set, will skip confirmation (confirmation should be done on the parent) */
+      onClick(): void;
+    };
+
 export function DeleteButton({
   disabled,
-  confirmMessage,
-  onConfirmed,
   size,
   children,
-}: PropsWithChildren<{
-  size?: ComponentProps<typeof Button>['size'];
-  disabled?: boolean;
-  confirmMessage: ReactNode;
-  onConfirmed(): Promise<void> | void;
-}>) {
+  ...props
+}: PropsWithChildren<
+  ConfirmOrClick & {
+    size?: ComponentProps<typeof Button>['size'];
+    disabled?: boolean;
+  }
+>) {
   return (
     <Button
       size={size}
@@ -31,6 +43,11 @@ export function DeleteButton({
   );
 
   async function handleClick() {
+    const { confirmMessage, onConfirmed, onClick } = props;
+    if (onClick) {
+      return onClick();
+    }
+
     if (!(await confirmDelete(confirmMessage))) {
       return undefined;
     }