@strato-admin/cloudscape 0.1.0 → 0.1.1

package/dist/button/BulkDeleteButton.d.ts

@@ -2,6 +2,8 @@ export interface BulkDeleteButtonProps {
     label?: string;
     variant?: 'primary' | 'normal' | 'link';
     mutationMode?: 'undoable' | 'optimistic' | 'pessimistic';
+    dialogTitle?: string;
+    dialogDescription?: string;
 }
-export declare const BulkDeleteButton: ({ label, variant, mutationMode, }: BulkDeleteButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const BulkDeleteButton: ({ label, variant, mutationMode, dialogTitle, dialogDescription, }: BulkDeleteButtonProps) => import("react/jsx-runtime").JSX.Element | null;
 export default BulkDeleteButton;

package/dist/button/BulkDeleteButton.js

@@ -1,17 +1,43 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useBulkDeleteController, useTranslate, useListContext, useResourceDefinition } from '@strato-admin/core';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useBulkDeleteController, useTranslate, useListContext, useResourceDefinition, useResourceContext, useGetResourceLabel, } from '@strato-admin/core';
+import Modal from '@cloudscape-design/components/modal';
+import Box from '@cloudscape-design/components/box';
+import SpaceBetween from '@cloudscape-design/components/space-between';
 import { Button } from './Button';
-export const BulkDeleteButton = ({ label, variant = 'normal', mutationMode = 'pessimistic', }) => {
+export const BulkDeleteButton = ({ label, variant = 'normal', mutationMode = 'pessimistic', dialogTitle, dialogDescription, }) => {
     const translate = useTranslate();
     const { selectedIds } = useListContext();
+    const resource = useResourceContext();
+    const getResourceLabel = useGetResourceLabel();
     const { options } = useResourceDefinition();
     const { handleDelete, isPending, isLoading } = useBulkDeleteController({
         mutationMode,
     });
+    const [isOpen, setIsOpen] = useState(false);
     if (options?.canDelete === false) {
         return null;
     }
     const isBusy = isPending || isLoading;
-    return (_jsx(Button, { variant: variant, onClick: handleDelete, loading: isBusy, disabled: isBusy || !selectedIds || selectedIds.length === 0, children: label || translate('ra.action.delete', { _: 'Delete' }) }));
+    const handleConfirm = () => {
+        handleDelete();
+        setIsOpen(false);
+    };
+    const handleOpen = () => {
+        setIsOpen(true);
+    };
+    const handleClose = () => {
+        setIsOpen(false);
+    };
+    console.log('selectedIds', selectedIds);
+    const defaultTitle = translate('ra.message.bulk_delete_title', {
+        smart_count: selectedIds?.length || 0,
+        _: `Delete ${selectedIds?.length || 0} items`,
+    });
+    const defaultDescription = translate('ra.message.bulk_delete_content', {
+        smart_count: selectedIds?.length || 0,
+        _: `Are you sure you want to delete these ${selectedIds?.length || 0} items?`,
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: variant, onClick: handleOpen, loading: isBusy, disabled: isBusy || !selectedIds || selectedIds.length === 0, children: label || translate('ra.action.delete', { _: 'Delete' }) }), _jsx(Modal, { onDismiss: handleClose, visible: isOpen, closeAriaLabel: translate('ra.action.close', { _: 'Close' }), footer: _jsx(Box, { float: "right", children: _jsxs(SpaceBetween, { direction: "horizontal", size: "xs", children: [_jsx(Button, { variant: "link", onClick: handleClose, children: translate('ra.action.cancel', { _: 'Cancel' }) }), _jsx(Button, { variant: "primary", onClick: handleConfirm, loading: isBusy, "data-testid": "confirm-bulk-delete", children: translate('ra.action.confirm', { _: 'Confirm' }) })] }) }), header: dialogTitle || defaultTitle, children: dialogDescription || defaultDescription })] }));
 };
 export default BulkDeleteButton;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strato-admin/cloudscape",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Strato Admin Cloudscape implementation - UI component library and theme for React Admin",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -31,7 +31,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/vgrits/strato-admin.git",
+    "url": "https://github.com/vadimgu/strato-admin.git",
     "directory": "packages/strato-cloudscape"
   },
   "dependencies": {
@@ -41,9 +41,9 @@
     "inflection": "^3.0.2",
     "react-hook-form": "^7.71.2",
     "react-router-dom": "^6.22.3",
-    "@strato-admin/core": "0.1.0",
-    "@strato-admin/i18n": "0.1.0",
-    "@strato-admin/language-en": "0.1.0"
+    "@strato-admin/language-en": "0.1.1",
+    "@strato-admin/core": "0.1.1",
+    "@strato-admin/i18n": "0.1.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.0.1",

package/src/button/BulkDeleteButton.test.tsx

@@ -2,13 +2,22 @@
 import { render, screen, fireEvent, cleanup } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { BulkDeleteButton } from './BulkDeleteButton';
-import { useListContext, useBulkDeleteController, useTranslate, useResourceDefinition } from '@strato-admin/core';
+import {
+  useListContext,
+  useBulkDeleteController,
+  useTranslate,
+  useResourceDefinition,
+  useResourceContext,
+  useGetResourceLabel,
+} from '@strato-admin/core';
 
 vi.mock('@strato-admin/core', () => ({
   useListContext: vi.fn(),
   useBulkDeleteController: vi.fn(),
   useTranslate: vi.fn(),
   useResourceDefinition: vi.fn(),
+  useResourceContext: vi.fn(),
+  useGetResourceLabel: vi.fn(),
 }));
 
 describe('BulkDeleteButton', () => {
@@ -21,6 +30,8 @@ describe('BulkDeleteButton', () => {
       isLoading: false,
     });
     (useResourceDefinition as any).mockReturnValue({ options: {} });
+    (useResourceContext as any).mockReturnValue('posts');
+    (useGetResourceLabel as any).mockReturnValue(() => 'Posts');
   });
 
   afterEach(() => {
@@ -30,13 +41,12 @@ describe('BulkDeleteButton', () => {
   it('should be disabled when no ids are selected', () => {
     (useListContext as any).mockReturnValue({ selectedIds: [] });
     render(<BulkDeleteButton />);
-    expect(screen.getByRole('button')).toHaveProperty('disabled', true);
+    expect(screen.getByText('Delete').closest('button')).toHaveProperty('disabled', true);
   });
 
   it('should render when ids are selected', () => {
     (useListContext as any).mockReturnValue({ selectedIds: [1, 2] });
     render(<BulkDeleteButton />);
-    expect(screen.getByRole('button')).toBeDefined();
     expect(screen.getByText('Delete')).toBeDefined();
   });
 
@@ -47,7 +57,7 @@ describe('BulkDeleteButton', () => {
     expect(container.firstChild).toBeNull();
   });
 
-  it('should call handleDelete on click', () => {
+  it('should open dialog on click and call handleDelete on confirm', () => {
     const handleDelete = vi.fn();
     (useBulkDeleteController as any).mockReturnValue({
       handleDelete,
@@ -57,8 +67,22 @@ describe('BulkDeleteButton', () => {
     (useListContext as any).mockReturnValue({ selectedIds: [1, 2] });
 
     render(<BulkDeleteButton />);
-    fireEvent.click(screen.getByRole('button'));
+    fireEvent.click(screen.getByText('Delete'));
 
+    expect(handleDelete).not.toHaveBeenCalled();
+    expect(screen.getByText('Delete 2 items')).toBeDefined();
+    expect(screen.getByText('Are you sure you want to delete these 2 items?')).toBeDefined();
+
+    fireEvent.click(screen.getByTestId('confirm-bulk-delete'));
     expect(handleDelete).toHaveBeenCalled();
   });
+
+  it('should use custom dialogTitle and dialogDescription', () => {
+    (useListContext as any).mockReturnValue({ selectedIds: [1, 2] });
+    render(<BulkDeleteButton dialogTitle="Custom Title" dialogDescription="Custom Description" />);
+    fireEvent.click(screen.getByText('Delete'));
+
+    expect(screen.getByText('Custom Title')).toBeDefined();
+    expect(screen.getByText('Custom Description')).toBeDefined();
+  });
 });

package/src/button/BulkDeleteButton.tsx

@@ -1,40 +1,108 @@
 
-import { useBulkDeleteController, useTranslate, useListContext, useResourceDefinition } from '@strato-admin/core';
+import React, { useState } from 'react';
+import {
+  useBulkDeleteController,
+  useTranslate,
+  useListContext,
+  useResourceDefinition,
+  useResourceContext,
+  useGetResourceLabel,
+} from '@strato-admin/core';
+import Modal from '@cloudscape-design/components/modal';
+import Box from '@cloudscape-design/components/box';
+import SpaceBetween from '@cloudscape-design/components/space-between';
 import { Button } from './Button';
 
 export interface BulkDeleteButtonProps {
   label?: string;
   variant?: 'primary' | 'normal' | 'link';
   mutationMode?: 'undoable' | 'optimistic' | 'pessimistic';
+  dialogTitle?: string;
+  dialogDescription?: string;
 }
 
 export const BulkDeleteButton = ({
   label,
   variant = 'normal',
   mutationMode = 'pessimistic',
+  dialogTitle,
+  dialogDescription,
 }: BulkDeleteButtonProps) => {
   const translate = useTranslate();
   const { selectedIds } = useListContext();
+  const resource = useResourceContext();
+  const getResourceLabel = useGetResourceLabel();
   const { options } = useResourceDefinition();
   const { handleDelete, isPending, isLoading } = useBulkDeleteController({
     mutationMode,
   });
 
+  const [isOpen, setIsOpen] = useState(false);
+
   if (options?.canDelete === false) {
     return null;
   }
 
   const isBusy = isPending || isLoading;
 
+  const handleConfirm = () => {
+    handleDelete();
+    setIsOpen(false);
+  };
+
+  const handleOpen = () => {
+    setIsOpen(true);
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+  console.log('selectedIds', selectedIds);
+  const defaultTitle = translate('ra.message.bulk_delete_title', {
+    smart_count: selectedIds?.length || 0,
+    _: `Delete ${selectedIds?.length || 0} items`,
+  });
+
+  const defaultDescription = translate('ra.message.bulk_delete_content', {
+    smart_count: selectedIds?.length || 0,
+    _: `Are you sure you want to delete these ${selectedIds?.length || 0} items?`,
+  });
   return (
-    <Button
-      variant={variant}
-      onClick={handleDelete}
-      loading={isBusy}
-      disabled={isBusy || !selectedIds || selectedIds.length === 0}
-    >
-      {label || translate('ra.action.delete', { _: 'Delete' })}
-    </Button>
+    <>
+      <Button
+        variant={variant}
+        onClick={handleOpen}
+        loading={isBusy}
+        disabled={isBusy || !selectedIds || selectedIds.length === 0}
+      >
+        {label || translate('ra.action.delete', { _: 'Delete' })}
+      </Button>
+      <Modal
+        onDismiss={handleClose}
+        visible={isOpen}
+        closeAriaLabel={translate('ra.action.close', { _: 'Close' })}
+        footer={
+          <Box float="right">
+            <SpaceBetween direction="horizontal" size="xs">
+              <Button variant="link" onClick={handleClose}>
+                {translate('ra.action.cancel', { _: 'Cancel' })}
+              </Button>
+              <Button
+                variant="primary"
+                onClick={handleConfirm}
+                loading={isBusy}
+                data-testid="confirm-bulk-delete"
+              >
+                {translate('ra.action.confirm', { _: 'Confirm' })}
+              </Button>
+            </SpaceBetween>
+          </Box>
+        }
+        header={dialogTitle || defaultTitle}
+      >
+        {dialogDescription || defaultDescription}
+      </Modal>
+    </>
   );
 };