labelAction for MediaLibrabryInput component & CarousselAssets tests

examples/getstarted/src/api/category/content-types/category/schema.json

@@ -53,6 +53,21 @@
         }
       },
       "type": "date"
+    },
+    "localizedMedia": {
+      "allowedTypes": [
+        "images",
+        "files",
+        "videos",
+        "audios"
+      ],
+      "type": "media",
+      "multiple": true,
+      "pluginOptions": {
+        "i18n": {
+          "localized": true
+        }
+      }
     }
   }
-}
+}

packages/core/upload/admin/src/components/MediaLibraryInput/Carousel/CarouselAssets.js

@@ -15,6 +15,7 @@ export const CarouselAssets = ({
   error,
   hint,
   label,
+  labelAction,
   onAddAsset,
   onDeleteAsset,
   onDeleteAssetFromMediaLibrary,
@@ -35,6 +36,7 @@ export const CarouselAssets = ({
     <>
       <CarouselInput
         label={label}
+        labelAction={labelAction}
         secondaryLabel={currentAsset?.name}
         selectedSlide={selectedAssetIndex}
         previousLabel={formatMessage({
@@ -55,7 +57,6 @@ export const CarouselAssets = ({
             <CarouselAssetActions
               asset={currentAsset}
               onDeleteAsset={disabled ? undefined : onDeleteAsset}
-              onDeleteAssetFromMediaLibrary={onDeleteAssetFromMediaLibrary}
               onAddAsset={disabled ? undefined : onAddAsset}
               onEditAsset={onEditAsset ? () => setIsEditingAsset(true) : undefined}
             />
@@ -118,6 +119,7 @@ CarouselAssets.defaultProps = {
   disabled: false,
   error: undefined,
   hint: undefined,
+  labelAction: undefined,
   onDropAsset: undefined,
   required: false,
   trackedLocation: undefined,
@@ -129,6 +131,7 @@ CarouselAssets.propTypes = {
   error: PropTypes.string,
   hint: PropTypes.string,
   label: PropTypes.string.isRequired,
+  labelAction: PropTypes.node,
   onAddAsset: PropTypes.func.isRequired,
   onDeleteAsset: PropTypes.func.isRequired,
   onDeleteAssetFromMediaLibrary: PropTypes.func.isRequired,

packages/core/upload/admin/src/components/MediaLibraryInput/Carousel/tests/CarouselAssets.test.js

@@ -0,0 +1,124 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import { QueryClientProvider, QueryClient } from 'react-query';
+import { ThemeProvider, lightTheme } from '@strapi/design-system';
+
+import { CarouselAssets } from '../CarouselAssets';
+
+jest.mock('@strapi/helper-plugin', () => ({
+  ...jest.requireActual('@strapi/helper-plugin'),
+  useNotification: jest.fn(() => ({
+    toggleNotification: jest.fn(),
+  })),
+  useTracking: jest.fn(() => ({ trackUsage: jest.fn() })),
+}));
+
+const ASSET_FIXTURES = [
+  {
+    alternativeText: 'alternative text',
+    createdAt: '2021-10-01T08:04:56.326Z',
+    ext: '.jpeg',
+    formats: {
+      thumbnail: {
+        url: '/uploads/thumbnail_3874873_b5818bb250.jpg',
+      },
+    },
+    id: 1,
+    mime: 'image/jpeg',
+    name: 'michka',
+    size: 11.79,
+    updatedAt: '2021-10-18T08:04:56.326Z',
+    url: '/uploads/michka.jpg',
+  },
+];
+
+const client = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
+
+const ComponentFixture = (props) => {
+  return (
+    <QueryClientProvider client={client}>
+      <IntlProvider locale="en" messages={{}}>
+        <ThemeProvider theme={lightTheme}>
+          <CarouselAssets
+            assets={ASSET_FIXTURES}
+            label="Carousel"
+            onAddAsset={jest.fn}
+            onDeleteAsset={jest.fn}
+            onDeleteAssetFromMediaLibrary={jest.fn}
+            onEditAsset={jest.fn}
+            onNext={jest.fn}
+            onPrevious={jest.fn}
+            selectedAssetIndex={0}
+            {...props}
+          />
+        </ThemeProvider>
+      </IntlProvider>
+    </QueryClientProvider>
+  );
+};
+
+const setup = (props) => render(<ComponentFixture {...props} />);
+
+describe('MediaLibraryInput | Carousel | CarouselAssets', () => {
+  it('should render empty carousel', () => {
+    const { getByText } = setup({ assets: [] });
+
+    expect(
+      getByText('Click to add an asset or drag and drop one in this area')
+    ).toBeInTheDocument();
+  });
+
+  it('should render with an asset', () => {
+    const { getByRole } = setup();
+
+    expect(getByRole('img', { name: 'alternative text' })).toBeInTheDocument();
+  });
+
+  it('should render actions buttons', () => {
+    const { getByRole } = setup();
+
+    expect(getByRole('button', { name: 'Add' })).toBeInTheDocument();
+    expect(getByRole('button', { name: 'Copy link' })).toBeInTheDocument();
+    expect(getByRole('button', { name: 'Delete' })).toBeInTheDocument();
+    expect(getByRole('button', { name: 'edit' })).toBeInTheDocument();
+  });
+
+  it('should call onAddAsset', () => {
+    const onAddAssetSpy = jest.fn();
+    const { getByRole } = setup({ onAddAsset: onAddAssetSpy });
+
+    fireEvent.click(getByRole('button', { name: 'Add' }));
+
+    expect(onAddAssetSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('should call onDeleteAsset', () => {
+    const onDeleteAssetSpy = jest.fn();
+    const { getByRole } = setup({ onDeleteAsset: onDeleteAssetSpy });
+
+    fireEvent.click(getByRole('button', { name: 'Delete' }));
+
+    expect(onDeleteAssetSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('should open edit view', () => {
+    const { getByRole, getByText } = setup();
+
+    fireEvent.click(getByRole('button', { name: 'edit' }));
+
+    expect(getByText('Details')).toBeInTheDocument();
+  });
+
+  it('should render the localized label', () => {
+    const { getByText } = setup({ labelAction: <div>localized</div> });
+
+    expect(getByText('localized')).toBeInTheDocument();
+  });
+});

packages/core/upload/admin/src/components/MediaLibraryInput/index.js

@@ -21,6 +21,7 @@ export const MediaLibraryInput = ({
   description,
   disabled,
   error,
+  labelAction,
   multiple,
   name,
   onChange,
@@ -144,6 +145,7 @@ export const MediaLibraryInput = ({
         assets={selectedAssets}
         disabled={disabled}
         label={label}
+        labelAction={labelAction}
         onDeleteAsset={handleDeleteAsset}
         onDeleteAssetFromMediaLibrary={handleDeleteAssetFromMediaLibrary}
         onAddAsset={() => setStep(STEPS.AssetSelect)}
@@ -199,6 +201,7 @@ MediaLibraryInput.defaultProps = {
   description: undefined,
   error: undefined,
   intlLabel: undefined,
+  labelAction: undefined,
   multiple: false,
   required: false,
   value: [],
@@ -214,6 +217,7 @@ MediaLibraryInput.propTypes = {
   }),
   error: PropTypes.string,
   intlLabel: PropTypes.shape({ id: PropTypes.string, defaultMessage: PropTypes.string }),
+  labelAction: PropTypes.node,
   multiple: PropTypes.bool,
   onChange: PropTypes.func.isRequired,
   name: PropTypes.string.isRequired,