Merge branch 'features/ML-folder' of https://github.com/strapi/strapi into ML-folder/bulk-move-select

This commit is contained in:
ronronscelestes 2022-06-23 09:03:32 +02:00
commit c62640d3eb
7 changed files with 128 additions and 35 deletions

View File

@ -79,7 +79,15 @@ const getSelectStyles = (theme, error) => {
backgroundColor = theme.colors.primary100;
}
return { ...base, lineHeight: theme.spaces[5], backgroundColor, borderRadius: 4 };
return {
...base,
lineHeight: theme.spaces[5],
backgroundColor,
borderRadius: theme.borderRadius,
'&:active': {
backgroundColor: theme.colors.primary100,
},
};
},
placeholder: base => ({ ...base, marginLeft: 0 }),
singleValue: base => ({ ...base, marginLeft: 0, color: theme.colors.neutral800 }),

View File

@ -80,6 +80,13 @@ export const BrowseStep = ({
const assetCount = assets.length;
const folderCount = folders.length;
const handleClickFolderCard = (...args) => {
// Search query will always fetch the same results
// we remove it here to allow navigating in a folder and see the result of this navigation
onChangeSearch('');
onChangeFolder(...args);
};
return (
<Stack spacing={4}>
{onSelectAllAsset && (
@ -181,7 +188,7 @@ export const BrowseStep = ({
<FolderCard
ariaLabel={folder.name}
id={`folder-${folder.id}`}
onClick={() => onChangeFolder(folder.id)}
onClick={() => handleClickFolderCard(folder.id)}
cardActions={
onEditFolder && (
<IconButton
@ -196,7 +203,7 @@ export const BrowseStep = ({
}
>
<FolderCardBody>
<FolderCardBodyAction onClick={() => onChangeFolder(folder.id)}>
<FolderCardBodyAction onClick={() => handleClickFolderCard(folder.id)}>
<Flex as="h2" direction="column" alignItems="start" maxWidth="100%">
<TypographyMaxWidth fontWeight="semiBold" ellipsis>
{folder.name}

View File

@ -152,6 +152,30 @@ describe('useAssets', () => {
);
});
test('does not use folder filter in params if _q', async () => {
const { result, waitFor, waitForNextUpdate } = await setup({
query: { folder: 5, _q: 'something', filters: { $and: [{ something: 'true' }] } },
});
await waitFor(() => result.current.isSuccess);
await waitForNextUpdate();
const expected = {
filters: {
$and: [
{
something: true,
},
],
},
_q: 'something',
};
expect(axiosInstance.get).toBeCalledWith(
`/upload/files?${stringify(expected, { encode: false })}`
);
});
test('it does not fetch, if skipWhen is set', async () => {
const { result, waitFor } = await setup({ skipWhen: true });

View File

@ -104,6 +104,33 @@ describe('useFolders', () => {
);
});
test('does not use parent filter in params if _q', async () => {
const { result, waitFor, waitForNextUpdate } = await setup({
query: { folder: 5, _q: 'something', filters: { $and: [{ something: 'true' }] } },
});
await waitFor(() => result.current.isSuccess);
await waitForNextUpdate();
const expected = {
filters: {
$and: [
{
something: 'true',
},
],
},
pagination: {
pageSize: -1,
},
_q: 'something',
};
expect(axiosInstance.get).toBeCalledWith(
`/upload/folders?${stringify(expected, { encode: false })}`
);
});
test('fetches data from the right URL if a query param was set', async () => {
const { result, waitFor, waitForNextUpdate } = await setup({ query: { folder: 1 } });

View File

@ -12,22 +12,32 @@ export const useAssets = ({ skipWhen = false, query = {} } = {}) => {
const toggleNotification = useNotification();
const { notifyStatus } = useNotifyAT();
const dataRequestURL = getRequestUrl('files');
const { folder, ...paramsExceptFolder } = query;
const params = {
...paramsExceptFolder,
filters: {
$and: [
...(query?.filters?.$and ?? []),
{
folder: {
id: query?.folder ?? {
$null: true,
const { folder, _q, ...paramsExceptFolderAndQ } = query;
let params;
if (_q) {
params = {
...paramsExceptFolderAndQ,
_q,
};
} else {
params = {
...paramsExceptFolderAndQ,
filters: {
$and: [
...(paramsExceptFolderAndQ?.filters?.$and ?? []),
{
folder: {
id: folder ?? {
$null: true,
},
},
},
},
],
},
};
],
},
};
}
const getAssets = async () => {
try {

View File

@ -12,25 +12,38 @@ export const useFolders = ({ enabled = true, query = {} }) => {
const toggleNotification = useNotification();
const { notifyStatus } = useNotifyAT();
const dataRequestURL = getRequestUrl('folders');
const { folder, ...paramsExceptFolder } = query;
const params = {
...paramsExceptFolder,
pagination: {
pageSize: -1,
},
filters: {
$and: [
...(query?.filters?.$and ?? []),
{
parent: {
id: query?.folder ?? {
$null: true,
const { folder, _q, ...paramsExceptFolderAndQ } = query;
let params;
if (_q) {
params = {
...paramsExceptFolderAndQ,
pagination: {
pageSize: -1,
},
_q,
};
} else {
params = {
...paramsExceptFolderAndQ,
pagination: {
pageSize: -1,
},
filters: {
$and: [
...(paramsExceptFolderAndQ?.filters?.$and ?? []),
{
parent: {
id: folder ?? {
$null: true,
},
},
},
},
],
},
};
],
},
};
}
const fetchFolders = async () => {
try {

View File

@ -262,8 +262,12 @@ export const MediaLibrary = () => {
const isSelected = !!selectedFolders.find(
currentFolder => currentFolder.id === folder.id
);
// Search query will always fetch the same results
// we remove it here to allow navigating in a folder and see the result of this navigation
const { _q, ...queryParamsWithoutQ } = query;
const url = `${pathname}?${stringify({
...query,
...queryParamsWithoutQ,
folder: folder.id,
})}`;