yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-22 06:50:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

feedback fixes

Browse Source
This commit is contained in:
Julie Plantey 2022-11-18 13:12:31 +01:00
parent bd177a0215
commit a04305a2bb
8 changed files with 81 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/upload/admin/src/components/TableList/PreviewCell.js
View File

@ -54,7 +54,7 @@ export const PreviewCell = ({ alternativeText, fileExtension, mime, thumbnailURL
PreviewCell.defaultProps = {
alternativeText: null,
fileExtension: '',
mime: null,
mime: '',
thumbnailURL: null,
url: null,
};

17
packages/core/upload/admin/src/components/TableList/TableRows.js
View File

@ -5,10 +5,10 @@ import { getFileExtension } from '@strapi/helper-plugin';
import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
import { IconButton } from '@strapi/design-system/IconButton';
import { Tbody, Td, Tr } from '@strapi/design-system/Table';
import { Typography } from '@strapi/design-system/Typography';
import Pencil from '@strapi/icons/Pencil';
import { PreviewCell } from './PreviewCell';
import { TextCell } from './TextCell';
import { AssetDefinition, FolderDefinition } from '../../constants';
import { formatBytes, getTrad } from '../../utils';
@ -30,7 +30,7 @@ export const TableRows = ({ onEditAsset, onEditFolder, onSelectOne, rows, select
mime,
formats,
type,
} = element || {};
} = element;
const isSelected = !!selected.find((currentRow) => currentRow.id === id);
@ -61,19 +61,19 @@ export const TableRows = ({ onEditAsset, onEditFolder, onSelectOne, rows, select
/>
</Td>
<Td>
<Typography>{name}</Typography>
<TextCell content={name} />
</Td>
<Td>
<Typography>{ext ? getFileExtension(ext).toUpperCase() : '-'}</Typography>
<TextCell content={ext && getFileExtension(ext).toUpperCase()} />
</Td>
<Td>
<Typography>{size ? formatBytes(size) : '-'}</Typography>
<TextCell content={size && formatBytes(size)} />
</Td>
<Td>
<Typography>{formatDate(new Date(createdAt))}</Typography>
<TextCell content={formatDate(new Date(createdAt))} />
</Td>
<Td>
<Typography>{formatDate(new Date(updatedAt))}</Typography>
<TextCell content={formatDate(new Date(updatedAt))} />
</Td>
{((type === 'asset' && onEditAsset) || (type === 'folder' && onEditFolder)) && (
<Td>
@ -99,11 +99,12 @@ export const TableRows = ({ onEditAsset, onEditFolder, onSelectOne, rows, select
TableRows.defaultProps = {
onEditAsset: null,
onEditFolder: null,
rows: [],
selected: [],
};
TableRows.propTypes = {
rows: PropTypes.arrayOf(AssetDefinition, FolderDefinition).isRequired,
rows: PropTypes.arrayOf(AssetDefinition, FolderDefinition),
onEditAsset: PropTypes.func,
onEditFolder: PropTypes.func,
onSelectOne: PropTypes.func.isRequired,

19
packages/core/upload/admin/src/components/TableList/TextCell.js Normal file
View File

@ -0,0 +1,19 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Typography } from '@strapi/design-system/Typography';
export const TextCell = ({ content }) => {
if (content) {
return <Typography>{content}</Typography>;
}
return <Typography>-</Typography>;
};
TextCell.defaultProps = {
content: '',
};
TextCell.propTypes = {
content: PropTypes.string,
};

5
packages/core/upload/admin/src/components/TableList/index.js
View File

@ -14,6 +14,7 @@ import { TableRows } from './TableRows';
export const TableList = ({
assetCount,
folderCount,
indeterminate,
onEditAsset,
onEditFolder,
onSelectAll,
@ -34,7 +35,7 @@ export const TableList = ({
id: getTrad('bulk.select.label'),
defaultMessage: 'Select all folders & assets',
})}
indeterminate={selected?.length > 0 && selected?.length !== assetCount + folderCount}
indeterminate={indeterminate}
onChange={(e) => {
if (e.target.checked) {
trackUsage('didSelectAllMediaLibraryElements');
@ -79,6 +80,7 @@ export const TableList = ({
TableList.defaultProps = {
assetCount: 0,
folderCount: 0,
indeterminate: false,
onEditAsset: null,
onEditFolder: null,
rows: [],
@ -88,6 +90,7 @@ TableList.defaultProps = {
TableList.propTypes = {
assetCount: PropTypes.number,
folderCount: PropTypes.number,
indeterminate: PropTypes.bool,
onEditAsset: PropTypes.func,
onEditFolder: PropTypes.func,
onSelectAll: PropTypes.func.isRequired,

2
packages/core/upload/admin/src/components/TableList/tests/PreviewCell.test.js
View File

@ -29,7 +29,7 @@ const ComponentFixture = (props) => {
const setup = (props) => render(<ComponentFixture {...props} />);
describe('AssetTableList | PreviewCell', () => {
describe('TableList | PreviewCell', () => {
describe('rendering images', () => {
it('should render an image with thumbnail if available', () => {
const { getByRole } = setup();

2
packages/core/upload/admin/src/components/TableList/tests/TableRows.test.js
View File

@ -58,7 +58,7 @@ const ComponentFixture = (props) => {
const setup = (props) => render(<ComponentFixture {...props} />);
describe('AssetTableList | TableRows', () => {
describe('TableList | TableRows', () => {
describe('rendering assets', () => {
it('should properly render every asset attribute', () => {
const { getByRole, getByText } = setup();

27
packages/core/upload/admin/src/components/TableList/tests/TextCell.test.js Normal file
View File

@ -0,0 +1,27 @@
import React from 'react';
import { render } from '@testing-library/react';
import { ThemeProvider, lightTheme } from '@strapi/design-system';
import { TextCell } from '../TextCell';
const ComponentFixture = (props) => (
<ThemeProvider theme={lightTheme}>
<TextCell {...props} />
</ThemeProvider>
);
const setup = (props) => render(<ComponentFixture {...props} />);
describe('TableList | TextCell', () => {
it('should render content', () => {
const { getByText } = setup({ content: 'michka' });
expect(getByText('michka')).toBeInTheDocument();
});
it('should render a default content', () => {
const { getByText } = setup();
expect(getByText('-')).toBeInTheDocument();
});
});

31
packages/core/upload/admin/src/pages/App/MediaLibrary.js
View File

@ -86,7 +86,7 @@ export const MediaLibrary = () => {
});
const {
data: folders,
data: foldersData,
isLoading: foldersLoading,
errors: foldersError,
} = useFolders({
@ -107,8 +107,9 @@ export const MediaLibrary = () => {
push(pathname);
}
const folders = foldersData ?? [];
const folderCount = folders?.length || 0;
const assets = assetsData?.results;
const assets = assetsData?.results || [];
const assetCount = assets?.length ?? 0;
const isLoading = isCurrentFolderLoading || foldersLoading || permissionsLoading || assetsLoading;
const [showUploadAssetDialog, setShowUploadAssetDialog] = useState(false);
@ -116,6 +117,8 @@ export const MediaLibrary = () => {
const [assetToEdit, setAssetToEdit] = useState(undefined);
const [folderToEdit, setFolderToEdit] = useState(undefined);
const [selected, { selectOne, selectAll }] = useSelectionState(['type', 'id'], []);
const indeterminateBulkSelect =
selected?.length > 0 && selected?.length !== assetCount + folderCount;
const toggleUploadAssetDialog = () => setShowUploadAssetDialog((prev) => !prev);
const toggleEditFolderDialog = ({ created = false } = {}) => {
// folders are only displayed on the first page, therefore
@ -183,9 +186,7 @@ export const MediaLibrary = () => {
id: getTrad('bulk.select.label'),
defaultMessage: 'Select all folders & assets',
})}
indeterminate={
selected?.length > 0 && selected?.length !== assetCount + folderCount
}
indeterminate={indeterminateBulkSelect}
value={
(assetCount > 0 || folderCount > 0) &&
selected.length === assetCount + folderCount
@ -196,9 +197,7 @@ export const MediaLibrary = () => {
}
selectAll([
...assets.map((asset) => ({ ...asset, type: 'asset' })),
...(folders
? folders.map((folder) => ({ ...folder, type: 'folder' }))
: []),
...folders.map((folder) => ({ ...folder, type: 'folder' })),
]);
}}
/>
@ -243,14 +242,22 @@ export const MediaLibrary = () => {
<TableList
assetCount={assetCount}
folderCount={folderCount}
indeterminate={indeterminateBulkSelect}
onEditAsset={setAssetToEdit}
onEditFolder={handleEditFolder}
onSelectOne={selectOne}
onSelectAll={selectAll}
rows={[
...(folders ? folders.map((folder) => ({ ...folder, type: 'folder' })) : []),
...(assets ? assets.map((asset) => ({ ...asset, type: 'asset' })) : []),
]}
rows={
// TODO: remove when fixed on DS side
// when number of rows in Table changes, the keyboard tab from a row to another
// is not working for 1st and last column
!assetsLoading && !foldersLoading
? [
...folders.map((folder) => ({ ...folder, type: 'folder' })),
...assets.map((asset) => ({ ...asset, type: 'asset' })),
]
: []
}
selected={selected}
/>
)}