From a672b66b7f249d79ff379bfcd1bab3b564c49f67 Mon Sep 17 00:00:00 2001 From: HichamELBSI Date: Thu, 9 Apr 2020 12:11:52 +0200 Subject: [PATCH] Fix filters and allowed types Signed-off-by: HichamELBSI --- .../homepage/models/homepage.settings.json | 2 +- .../src/components/BrowseAssets/index.js | 2 + .../admin/src/components/Card/index.js | 16 +- .../admin/src/components/CardWrapper/index.js | 2 + .../admin/src/components/Filters/index.js | 2 +- .../FiltersPicker/FiltersCard/index.js | 8 +- .../src/components/FiltersPicker/index.js | 5 +- .../admin/src/components/List/index.js | 28 +- .../admin/src/containers/HomePage/index.js | 12 +- .../src/containers/InputModalStepper/index.js | 8 - .../InputModalStepperProvider/index.js | 19 +- .../InputModalStepperProvider/reducer.js | 251 +++++++++--------- .../tests/reducer.test.js | 101 +++++++ .../admin/src/translations/en.json | 1 + .../admin/src/utils/formatFilters.js | 23 ++ .../admin/src/utils/index.js | 1 + .../src/utils/tests/formatFilters.test.js | 21 ++ 17 files changed, 335 insertions(+), 167 deletions(-) create mode 100644 packages/strapi-plugin-upload/admin/src/utils/formatFilters.js create mode 100644 packages/strapi-plugin-upload/admin/src/utils/tests/formatFilters.test.js diff --git a/examples/getstarted/api/homepage/models/homepage.settings.json b/examples/getstarted/api/homepage/models/homepage.settings.json index 5c5d7f3dc4..ba07b2b325 100644 --- a/examples/getstarted/api/homepage/models/homepage.settings.json +++ b/examples/getstarted/api/homepage/models/homepage.settings.json @@ -20,7 +20,7 @@ "model": "file", "via": "related", "allowedTypes": [ - "images", + "images", "files", "videos" ], diff --git a/packages/strapi-plugin-upload/admin/src/components/BrowseAssets/index.js b/packages/strapi-plugin-upload/admin/src/components/BrowseAssets/index.js index 2f259ae33c..c7ba281114 100644 --- a/packages/strapi-plugin-upload/admin/src/components/BrowseAssets/index.js +++ b/packages/strapi-plugin-upload/admin/src/components/BrowseAssets/index.js @@ -15,6 +15,7 @@ import CardControl from '../CardControl'; const BrowseAssets = () => { const { + allowedTypes, count, files, goTo, @@ -118,6 +119,7 @@ const BrowseAssets = () => { onChange={handleFileSelection} selectedItems={selectedFiles} onCardClick={handleListCardClick} + allowedTypes={allowedTypes} smallCards renderCardControl={id => ( { + const { formatMessage } = useGlobalContext(); const fileSize = formatBytes(size, 0); const fileType = mime || type; const handleClick = () => { - onClick(id); + if (!isDisabled) { + onClick(id); + } }; return ( - + { return ( <> - + diff --git a/packages/strapi-plugin-upload/admin/src/components/FiltersPicker/FiltersCard/index.js b/packages/strapi-plugin-upload/admin/src/components/FiltersPicker/FiltersCard/index.js index 6d60e30edf..f8abe67a0f 100644 --- a/packages/strapi-plugin-upload/admin/src/components/FiltersPicker/FiltersCard/index.js +++ b/packages/strapi-plugin-upload/admin/src/components/FiltersPicker/FiltersCard/index.js @@ -12,7 +12,7 @@ import InputWrapper from './InputWrapper'; import FilterButton from './FilterButton'; import FilterInput from './FilterInput'; -const FiltersCard = ({ onChange, filters }) => { +const FiltersCard = ({ onChange }) => { const { plugins } = useGlobalContext(); const timestamps = getFileModelTimestamps(plugins); const [state, dispatch] = useReducer(reducer, initialState, () => init(initialState, timestamps)); @@ -20,9 +20,7 @@ const FiltersCard = ({ onChange, filters }) => { const type = filtersForm[name].type; const filtersOptions = getFilterType(type); - const options = ['image', 'video', 'file'].filter( - f => !filters.find(e => e.value === f && e.isDisabled) - ); + const options = ['image', 'video', 'file']; const handleChange = ({ target: { name, value } }) => { dispatch({ @@ -89,12 +87,10 @@ const FiltersCard = ({ onChange, filters }) => { }; FiltersCard.defaultProps = { - filters: [], onChange: () => {}, }; FiltersCard.propTypes = { - filters: PropTypes.arrayOf(PropTypes.object), onChange: PropTypes.func, }; diff --git a/packages/strapi-plugin-upload/admin/src/components/FiltersPicker/index.js b/packages/strapi-plugin-upload/admin/src/components/FiltersPicker/index.js index dd1c571b89..8c75453406 100644 --- a/packages/strapi-plugin-upload/admin/src/components/FiltersPicker/index.js +++ b/packages/strapi-plugin-upload/admin/src/components/FiltersPicker/index.js @@ -9,7 +9,7 @@ import Picker from '../Picker'; import formatFilter from './utils/formatFilter'; -const FiltersPicker = ({ onChange, filters }) => { +const FiltersPicker = ({ onChange }) => { const handleChange = ({ target: { value } }) => { onChange({ target: { name: 'filters', value: formatFilter(value) } }); }; @@ -25,7 +25,6 @@ const FiltersPicker = ({ onChange, filters }) => { )} renderSectionContent={onToggle => ( { handleChange(e); onToggle(); @@ -38,12 +37,10 @@ const FiltersPicker = ({ onChange, filters }) => { }; FiltersPicker.defaultProps = { - filters: [], onChange: () => {}, }; FiltersPicker.propTypes = { - filters: PropTypes.arrayOf(PropTypes.object), onChange: PropTypes.func, }; diff --git a/packages/strapi-plugin-upload/admin/src/components/List/index.js b/packages/strapi-plugin-upload/admin/src/components/List/index.js index 8fdc40567d..e22f5d3083 100644 --- a/packages/strapi-plugin-upload/admin/src/components/List/index.js +++ b/packages/strapi-plugin-upload/admin/src/components/List/index.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { Checkbox } from '@buffetjs/core'; import { get } from 'lodash'; import { prefixFileUrlWithBackendUrl } from 'strapi-helper-plugin'; -import { getTrad } from '../../utils'; +import { getTrad, getType } from '../../utils'; import Card from '../Card'; import CardControlsWrapper from '../CardControlsWrapper'; import ListWrapper from '../ListWrapper'; @@ -12,6 +12,7 @@ import ListCell from './ListCell'; import ListRow from './ListRow'; const List = ({ + allowedTypes, clickable, data, onChange, @@ -23,7 +24,7 @@ const List = ({ }) => { const selectedAssets = selectedItems.length; - const handleClick = e => { + const handleCheckboxClick = e => { e.stopPropagation(); }; @@ -40,12 +41,15 @@ const List = ({ {data.map(item => { const { id } = item; const url = get(item, ['formats', 'thumbnail', 'url'], item.url); + const isAllowed = + allowedTypes.length > 0 ? allowedTypes.includes(getType(item.mime)) : true; const checked = selectedItems.findIndex(file => file.id === id) !== -1; const fileUrl = prefixFileUrlWithBackendUrl(url); return ( {(checked || canSelect) && ( <> - - - + {isAllowed && ( + + + + )} {renderCardControl && ( {renderCardControl(id)} @@ -80,6 +86,7 @@ const List = ({ }; List.defaultProps = { + allowedTypes: [], clickable: false, canSelect: true, data: [], @@ -91,6 +98,7 @@ List.defaultProps = { }; List.propTypes = { + allowedTypes: PropTypes.array, clickable: PropTypes.bool, canSelect: PropTypes.bool, data: PropTypes.array, diff --git a/packages/strapi-plugin-upload/admin/src/containers/HomePage/index.js b/packages/strapi-plugin-upload/admin/src/containers/HomePage/index.js index 8c26e3ed84..ec9d517e25 100644 --- a/packages/strapi-plugin-upload/admin/src/containers/HomePage/index.js +++ b/packages/strapi-plugin-upload/admin/src/containers/HomePage/index.js @@ -1,5 +1,5 @@ import React, { useReducer, useState, useRef, useEffect } from 'react'; -import { includes, isEmpty, toString } from 'lodash'; +import { includes, isEmpty, toString, isEqual, intersectionWith } from 'lodash'; import { useHistory, useLocation } from 'react-router-dom'; import { Header } from '@buffetjs/custom'; import { useDebounce } from '@buffetjs/hooks'; @@ -183,9 +183,15 @@ const HomePage = () => { let updatedQueryParams = generateNewSearch({ [name]: value }); if (name === 'filters') { - const filters = [...generateFiltersFromSearch(search), value]; + const existingFilters = generateFiltersFromSearch(search); + const canAddFilter = intersectionWith(existingFilters, [value], isEqual).length === 0; + updatedQueryParams = generateNewSearch({ [name]: existingFilters }); - updatedQueryParams = generateNewSearch({ [name]: filters }); + if (canAddFilter) { + const filters = [...existingFilters, value]; + + updatedQueryParams = generateNewSearch({ [name]: filters }); + } } if (name === '_limit') { diff --git a/packages/strapi-plugin-upload/admin/src/containers/InputModalStepper/index.js b/packages/strapi-plugin-upload/admin/src/containers/InputModalStepper/index.js index d78ba9e798..6a58becac2 100644 --- a/packages/strapi-plugin-upload/admin/src/containers/InputModalStepper/index.js +++ b/packages/strapi-plugin-upload/admin/src/containers/InputModalStepper/index.js @@ -19,13 +19,6 @@ const InputModal = ({ step, }) => { const singularTypes = allowedTypes.map(type => type.substring(0, type.length - 1)); - const typesToDisable = ['video', 'image', 'file'].filter(f => !singularTypes.includes(f)); - const nContainsFilters = typesToDisable.map(type => ({ - name: 'mime', - filter: '_ncontains', - value: type, - isDisabled: true, - })); return ( @@ -34,7 +27,6 @@ const InputModal = ({ onClosed={onClosed} initialFilesToUpload={filesToUpload} initialFileToEdit={fileToEdit} - initialFilters={nContainsFilters} isOpen={isOpen} multiple={multiple} selectedFiles={selectedFiles} diff --git a/packages/strapi-plugin-upload/admin/src/containers/InputModalStepperProvider/index.js b/packages/strapi-plugin-upload/admin/src/containers/InputModalStepperProvider/index.js index c1e92cdc3d..a0cab5186a 100644 --- a/packages/strapi-plugin-upload/admin/src/containers/InputModalStepperProvider/index.js +++ b/packages/strapi-plugin-upload/admin/src/containers/InputModalStepperProvider/index.js @@ -12,6 +12,7 @@ import { createNewFilesToUploadArray, urlSchema, getFileModelTimestamps, + formatFilters, } from '../../utils'; import InputModalStepperContext from '../../contexts/InputModal/InputModalDataManager'; import init from './init'; @@ -24,7 +25,6 @@ const InputModalStepperProvider = ({ children, initialFilesToUpload, initialFileToEdit, - initialFilters, isOpen, multiple, onClosed, @@ -38,6 +38,7 @@ const InputModalStepperProvider = ({ const [reducerState, dispatch] = useReducer(reducer, initialState, state => init({ ...state, + allowedTypes, currentStep: step, fileToEdit: initialFileToEdit, selectedFiles: Array.isArray(selectedFiles) ? selectedFiles : [selectedFiles], @@ -49,7 +50,6 @@ const InputModalStepperProvider = ({ : [], params: { ...state.params, - filters: initialFilters, _sort: `${updated_at}:DESC`, }, }) @@ -293,10 +293,16 @@ const InputModalStepperProvider = ({ handleRemoveFileToUpload(fileIndex); }; + const getFilters = () => { + const compactedParams = compactParams(params); + const searchParams = generateSearchFromFilters(compactedParams, ['_limit', '_sort', '_start']); + + return formatFilters(searchParams); + }; + const fetchMediaLibFilesCount = async () => { const requestURL = getRequestUrl('files/count'); - const compactedParams = compactParams(params); - const paramsToSend = generateSearchFromFilters(compactedParams, ['_limit', '_sort', '_start']); + const paramsToSend = getFilters(); try { return await request(`${requestURL}?${paramsToSend}`, { @@ -321,8 +327,7 @@ const InputModalStepperProvider = ({ const fetchMediaLibFiles = async () => { const requestURL = getRequestUrl('files'); - const compactedParams = compactParams(params); - const paramsToSend = generateSearchFromFilters(compactedParams); + const paramsToSend = getFilters(); try { return await request(`${requestURL}?${paramsToSend}`, { @@ -472,7 +477,6 @@ InputModalStepperProvider.propTypes = { children: PropTypes.node.isRequired, initialFilesToUpload: PropTypes.object, initialFileToEdit: PropTypes.object, - initialFilters: PropTypes.arrayOf(PropTypes.object), isOpen: PropTypes.bool, multiple: PropTypes.bool.isRequired, onClosed: PropTypes.func.isRequired, @@ -483,7 +487,6 @@ InputModalStepperProvider.propTypes = { InputModalStepperProvider.defaultProps = { initialFileToEdit: null, - initialFilters: [], initialFilesToUpload: null, isOpen: false, onInputMediaChange: () => {}, diff --git a/packages/strapi-plugin-upload/admin/src/containers/InputModalStepperProvider/reducer.js b/packages/strapi-plugin-upload/admin/src/containers/InputModalStepperProvider/reducer.js index f69083fe16..e285f33ece 100644 --- a/packages/strapi-plugin-upload/admin/src/containers/InputModalStepperProvider/reducer.js +++ b/packages/strapi-plugin-upload/admin/src/containers/InputModalStepperProvider/reducer.js @@ -1,5 +1,5 @@ import produce from 'immer'; -import { intersectionWith, differenceWith, unionWith, set } from 'lodash'; +import { intersectionWith, differenceWith, unionWith, set, isEqual } from 'lodash'; import { createNewFilesToDownloadArray, @@ -30,6 +30,17 @@ const reducer = (state, action) => // eslint-disable-next-line consistent-return produce(state, draftState => { switch (action.type) { + case 'ADD_FILES_TO_UPLOAD': { + draftState.filesToUpload = [ + ...draftState.filesToUpload, + ...createNewFilesToUploadArray(action.filesToUpload), + ].map((fileToUpload, index) => ({ + ...fileToUpload, + originalIndex: index, + })); + draftState.currentStep = action.nextStep; + break; + } case 'ADD_URLS_TO_FILES_TO_UPLOAD': { draftState.filesToUpload = [ ...draftState.filesToUpload, @@ -43,12 +54,32 @@ const reducer = (state, action) => break; } + case 'CLEAN_FILES_ERROR': { + draftState.filesToUpload.forEach((fileToUpload, index) => { + draftState.filesToUpload[index] = { + ...fileToUpload, + hasError: false, + errorMessage: null, + }; + }); + break; + } case 'CLEAR_FILES_TO_UPLOAD_AND_DOWNLOAD': { draftState.filesToUpload = []; draftState.filesToDownload = []; break; } + case 'EDIT_EXISTING_FILE': { + const index = draftState.selectedFiles.findIndex( + selectedFile => selectedFile.id === action.file.id + ); + + if (index !== -1) { + draftState.selectedFiles[index] = action.file; + } + break; + } case 'FILE_DOWNLOADED': { const index = state.filesToUpload.findIndex(file => file.tempId === action.fileTempId); @@ -60,32 +91,13 @@ const reducer = (state, action) => break; } - case 'ON_CHANGE': { - set(draftState.fileToEdit, action.keys.split('.'), action.value); - break; - } - case 'ON_CHANGE_URLS_TO_DOWNLOAD': { - set(draftState, ['filesToDownload'], action.value); - break; - } case 'GET_DATA_SUCCEEDED': { draftState.files = action.files; draftState.count = action.countData.count; break; } - case 'SET_PARAM': { - const { name, value } = action.param; - - if (name === 'filters') { - draftState.params.filters.push(value); - break; - } - - if (name === '_limit') { - draftState.params._start = 0; - } - - draftState.params[name] = value; + case 'GO_TO': { + draftState.currentStep = action.to; break; } case 'MOVE_ASSET': { @@ -97,6 +109,18 @@ const reducer = (state, action) => break; } + case 'ON_ABORT_UPLOAD': { + draftState.fileToEdit.isUploading = false; + break; + } + case 'ON_CHANGE': { + set(draftState.fileToEdit, action.keys.split('.'), action.value); + break; + } + case 'ON_CHANGE_URLS_TO_DOWNLOAD': { + set(draftState, ['filesToDownload'], action.value); + break; + } case 'ON_FILE_SELECTION': { const { id } = action; const stringId = id.toString(); @@ -111,71 +135,8 @@ const reducer = (state, action) => draftState.selectedFiles.push(fileToStore); break; } - case 'TOGGLE_SELECT_ALL': { - const comparator = (first, second) => first.id === second.id; - const isSelected = - intersectionWith(state.selectedFiles, state.files, comparator).length === - state.files.length; - - if (isSelected) { - draftState.selectedFiles = differenceWith(state.selectedFiles, state.files, comparator); - break; - } - - draftState.selectedFiles = unionWith(state.selectedFiles, state.files, comparator); - break; - } - case 'SET_FILE_ERROR': { - draftState.filesToUpload.forEach((fileToUpload, index) => { - if (fileToUpload.originalIndex === action.fileIndex) { - draftState.filesToUpload[index] = { - ...draftState.filesToUpload[index], - isUploading: false, - hasError: true, - errorMessage: action.errorMessage, - }; - } - }); - break; - } - case 'REMOVE_FILTER': { - const { filterToRemove } = action; - - draftState.params.filters.splice(filterToRemove, 1); - break; - } - case 'GO_TO': { - draftState.currentStep = action.to; - break; - } - case 'RESET_PROPS': { - if (action.defaultSort) { - draftState.params._sort = action.defaultSort; - } else { - return initialState; - } - break; - } - case 'SET_FILES_UPLOADING_STATE': { - draftState.filesToUpload.forEach((fileToUpload, index) => { - draftState.filesToUpload[index] = { - ...fileToUpload, - isUploading: true, - hasError: false, - errorMessage: null, - }; - }); - break; - } - case 'ADD_FILES_TO_UPLOAD': { - draftState.filesToUpload = [ - ...draftState.filesToUpload, - ...createNewFilesToUploadArray(action.filesToUpload), - ].map((fileToUpload, index) => ({ - ...fileToUpload, - originalIndex: index, - })); - draftState.currentStep = action.nextStep; + case 'ON_SUBMIT_EDIT_EXISTING_FILE': { + draftState.fileToEdit.isUploading = true; break; } case 'REMOVE_FILE_TO_UPLOAD': { @@ -195,30 +156,37 @@ const reducer = (state, action) => draftState.filesToUpload.splice(index, 1); break; } + case 'REMOVE_FILTER': { + const { filterToRemove } = action; + + draftState.params.filters.splice(filterToRemove, 1); + break; + } + case 'RESET_PROPS': { + if (action.defaultSort) { + draftState.params._sort = action.defaultSort; + } else { + return initialState; + } + break; + } case 'SET_CROP_RESULT': { draftState.fileToEdit.file = action.blob; break; } - case 'CLEAN_FILES_ERROR': { + case 'SET_FILE_ERROR': { draftState.filesToUpload.forEach((fileToUpload, index) => { - draftState.filesToUpload[index] = { - ...fileToUpload, - hasError: false, - errorMessage: null, - }; + if (fileToUpload.originalIndex === action.fileIndex) { + draftState.filesToUpload[index] = { + ...draftState.filesToUpload[index], + isUploading: false, + hasError: true, + errorMessage: action.errorMessage, + }; + } }); break; } - case 'SET_NEW_FILE_TO_EDIT': { - draftState.fileToEdit = draftState.filesToUpload[action.fileIndex]; - break; - } - case 'SET_FILE_TO_EDIT': { - draftState.fileToEdit = formatFileForEditing( - state.files.find(file => file.id.toString() === action.fileId.toString()) - ); - break; - } case 'SET_FILE_TO_DOWNLOAD_ERROR': { const index = state.filesToUpload.findIndex(file => file.tempId === action.fileTempId); @@ -231,20 +199,10 @@ const reducer = (state, action) => break; } - case 'SET_FORM_DISABLED': { - draftState.isFormDisabled = action.isFormDisabled; - break; - } - case 'ON_ABORT_UPLOAD': { - draftState.fileToEdit.isUploading = false; - break; - } - case 'TOGGLE_MODAL_WARNING': { - draftState.isWarningDeleteOpen = !state.isWarningDeleteOpen; - break; - } - case 'ON_SUBMIT_EDIT_EXISTING_FILE': { - draftState.fileToEdit.isUploading = true; + case 'SET_FILE_TO_EDIT': { + draftState.fileToEdit = formatFileForEditing( + state.files.find(file => file.id.toString() === action.fileId.toString()) + ); break; } case 'SET_FILE_TO_EDIT_ERROR': { @@ -253,14 +211,61 @@ const reducer = (state, action) => draftState.fileToEdit.errorMessage = action.errorMessage; break; } - case 'EDIT_EXISTING_FILE': { - const index = draftState.selectedFiles.findIndex( - selectedFile => selectedFile.id === action.file.id - ); + case 'SET_FILES_UPLOADING_STATE': { + draftState.filesToUpload.forEach((fileToUpload, index) => { + draftState.filesToUpload[index] = { + ...fileToUpload, + isUploading: true, + hasError: false, + errorMessage: null, + }; + }); + break; + } + case 'SET_FORM_DISABLED': { + draftState.isFormDisabled = action.isFormDisabled; + break; + } + case 'SET_NEW_FILE_TO_EDIT': { + draftState.fileToEdit = draftState.filesToUpload[action.fileIndex]; + break; + } + case 'SET_PARAM': { + const { name, value } = action.param; - if (index !== -1) { - draftState.selectedFiles[index] = action.file; + if (name === 'filters') { + const canAddFilter = + intersectionWith(state.params.filters, [value], isEqual).length === 0; + + if (canAddFilter) { + draftState.params.filters.push(value); + } + break; } + + if (name === '_limit') { + draftState.params._start = 0; + } + + draftState.params[name] = value; + break; + } + case 'TOGGLE_MODAL_WARNING': { + draftState.isWarningDeleteOpen = !state.isWarningDeleteOpen; + break; + } + case 'TOGGLE_SELECT_ALL': { + const comparator = (first, second) => first.id === second.id; + const isSelected = + intersectionWith(state.selectedFiles, state.files, comparator).length === + state.files.length; + + if (isSelected) { + draftState.selectedFiles = differenceWith(state.selectedFiles, state.files, comparator); + break; + } + + draftState.selectedFiles = unionWith(state.selectedFiles, state.files, comparator); break; } diff --git a/packages/strapi-plugin-upload/admin/src/containers/InputModalStepperProvider/tests/reducer.test.js b/packages/strapi-plugin-upload/admin/src/containers/InputModalStepperProvider/tests/reducer.test.js index b58fac0a34..1841b2789e 100644 --- a/packages/strapi-plugin-upload/admin/src/containers/InputModalStepperProvider/tests/reducer.test.js +++ b/packages/strapi-plugin-upload/admin/src/containers/InputModalStepperProvider/tests/reducer.test.js @@ -1933,4 +1933,105 @@ describe('UPLOAD | containers | ModalStepper | reducer', () => { expect(reducer(state, action)).toEqual(expected); }); }); + + describe('SET_PARAM', () => { + it('should set the _start param to 0 if the pagination limit changed', () => { + const action = { + type: 'SET_PARAM', + param: { + name: '_limit', + value: 50, + }, + }; + const state = { + params: { + _start: 10, + }, + }; + const expected = { + params: { + _start: 0, + _limit: 50, + }, + }; + + expect(reducer(state, action)).toEqual(expected); + }); + + it('should add filter to params', () => { + const action = { + type: 'SET_PARAM', + param: { + name: 'filters', + value: { + name: 'mime', + filter: '_contains', + value: 'image', + }, + }, + }; + const state = { + params: { + _start: 0, + filters: [], + }, + }; + const expected = { + params: { + _start: 0, + filters: [ + { + name: 'mime', + filter: '_contains', + value: 'image', + }, + ], + }, + }; + + expect(reducer(state, action)).toEqual(expected); + }); + + it('should not add filter to params if it is already exist', () => { + const action = { + type: 'SET_PARAM', + param: { + name: 'filters', + value: { + name: 'mime', + filter: '_contains', + value: 'image', + }, + }, + }; + const state = { + params: { + _start: 0, + _limit: 50, + filters: [ + { + name: 'mime', + filter: '_contains', + value: 'image', + }, + ], + }, + }; + const expected = { + params: { + _start: 0, + _limit: 50, + filters: [ + { + name: 'mime', + filter: '_contains', + value: 'image', + }, + ], + }, + }; + + expect(reducer(state, action)).toEqual(expected); + }); + }); }); diff --git a/packages/strapi-plugin-upload/admin/src/translations/en.json b/packages/strapi-plugin-upload/admin/src/translations/en.json index d53b2759d0..61881e5b33 100644 --- a/packages/strapi-plugin-upload/admin/src/translations/en.json +++ b/packages/strapi-plugin-upload/admin/src/translations/en.json @@ -30,6 +30,7 @@ "list.assets-empty.title": "There is no asset yet", "list.assets-empty.title-withSearch": "There is no asset with the applied filters", "list.assets-empty.subtitle": "Add a first one to the list.", + "list.assets.type-not-allowed": "This type of file is not allowed.", "list.assets.selected.plural": "{number} assets selected", "list.assets.selected.singular": "{number} asset selected", "modal.header.browse": "Upload assets", diff --git a/packages/strapi-plugin-upload/admin/src/utils/formatFilters.js b/packages/strapi-plugin-upload/admin/src/utils/formatFilters.js new file mode 100644 index 0000000000..79710cc3c1 --- /dev/null +++ b/packages/strapi-plugin-upload/admin/src/utils/formatFilters.js @@ -0,0 +1,23 @@ +const formatFilters = params => { + const indexOfFileFilterContains = params.indexOf('mime_contains=file'); + const indexOfFileFilterNContains = params.indexOf('mime_ncontains=file'); + let paramsToReturn = params; + + if (indexOfFileFilterContains !== -1) { + paramsToReturn = paramsToReturn.replace( + 'mime_contains=file', + 'mime_ncontains=image&mime_ncontains=video' + ); + } + + if (indexOfFileFilterNContains !== -1) { + paramsToReturn = paramsToReturn.replace( + 'mime_ncontains=file', + 'mime_contains=image&mime_contains=video' + ); + } + + return paramsToReturn; +}; + +export default formatFilters; diff --git a/packages/strapi-plugin-upload/admin/src/utils/index.js b/packages/strapi-plugin-upload/admin/src/utils/index.js index 1a92f2502f..6297fe55cb 100644 --- a/packages/strapi-plugin-upload/admin/src/utils/index.js +++ b/packages/strapi-plugin-upload/admin/src/utils/index.js @@ -6,6 +6,7 @@ export { default as createNewFilesToDownloadArray } from './createNewFilesToDown export { default as createNewFilesToUploadArray } from './createNewFilesToUploadArray'; export { default as formatBytes } from './formatBytes'; export { default as formatFileForEditing } from './formatFileForEditing'; +export { default as formatFilters } from './formatFilters'; export { default as generatePageFromStart } from './generatePageFromStart'; export { default as generateStartFromPage } from './generateStartFromPage'; export { default as getExtension } from './getExtension'; diff --git a/packages/strapi-plugin-upload/admin/src/utils/tests/formatFilters.test.js b/packages/strapi-plugin-upload/admin/src/utils/tests/formatFilters.test.js new file mode 100644 index 0000000000..844e9e11ff --- /dev/null +++ b/packages/strapi-plugin-upload/admin/src/utils/tests/formatFilters.test.js @@ -0,0 +1,21 @@ +import formatFilters from '../formatFilters'; + +describe('UPLOAD | utils | formatFilters', () => { + it('should remove the file filter and add image and video filters', () => { + const stringParams = '&mime_ncontains=file&mime_contains=file'; + + const actual = formatFilters(stringParams); + const expected = + '&mime_contains=image&mime_contains=video&mime_ncontains=image&mime_ncontains=video'; + + expect(actual).toEqual(expected); + }); + + it('should return the string params if there is no file filter', () => { + const stringParams = '&mime_contains=image&mime_contains=video'; + + const actual = formatFilters(stringParams); + const expected = '&mime_contains=image&mime_contains=video'; + expect(actual).toEqual(expected); + }); +});