@strapi/admin 4.3.4 → 4.4.0-alpha.0

package/admin/src/content-manager/pages/ListSettingsView/index.js

@@ -34,9 +34,9 @@ const ListSettingsView = ({ layout, slug }) => {
   const { refetchData } = useContext(ModelsContext);
 
   const [showWarningSubmit, setWarningSubmit] = useState(false);
-  const toggleWarningSubmit = () => setWarningSubmit(prevState => !prevState);
+  const toggleWarningSubmit = () => setWarningSubmit((prevState) => !prevState);
   const [isModalFormOpen, setIsModalFormOpen] = useState(false);
-  const toggleModalForm = () => setIsModalFormOpen(prevState => !prevState);
+  const toggleModalForm = () => setIsModalFormOpen((prevState) => !prevState);
   const [reducerState, dispatch] = useReducer(reducer, initialState, () =>
     init(initialState, layout)
   );
@@ -76,7 +76,7 @@ const ListSettingsView = ({ layout, slug }) => {
     submitMutation.mutate(body);
   };
 
-  const handleAddField = item => {
+  const handleAddField = (item) => {
     dispatch({
       type: 'ADD_FIELD',
       item,
@@ -99,13 +99,13 @@ const ListSettingsView = ({ layout, slug }) => {
     }
   };
 
-  const handleSubmit = e => {
+  const handleSubmit = (e) => {
     e.preventDefault();
     toggleWarningSubmit();
     trackUsage('willSaveContentTypeLayout');
   };
 
-  const handleClickEditField = fieldToEdit => {
+  const handleClickEditField = (fieldToEdit) => {
     dispatch({
       type: 'SET_FIELD_TO_EDIT',
       fieldToEdit,
@@ -120,7 +120,7 @@ const ListSettingsView = ({ layout, slug }) => {
     toggleModalForm();
   };
 
-  const handleSubmitFieldEdit = e => {
+  const handleSubmitFieldEdit = (e) => {
     e.preventDefault();
     toggleModalForm();
     dispatch({
@@ -128,12 +128,12 @@ const ListSettingsView = ({ layout, slug }) => {
     });
   };
 
-  const submitMutation = useMutation(body => putCMSettingsLV(body, slug), {
-    onSuccess: () => {
+  const submitMutation = useMutation((body) => putCMSettingsLV(body, slug), {
+    onSuccess() {
       trackUsage('didEditListSettings');
       refetchData();
     },
-    onError: () => {
+    onError() {
       toggleNotification({
         type: 'warning',
         message: { id: 'notification.error' },

package/admin/src/content-manager/pages/ListSettingsView/reducer.js

@@ -12,7 +12,7 @@ const initialState = {
 
 const reducer = (state = initialState, action) =>
   // eslint-disable-next-line consistent-return
-  produce(state, draftState => {
+  produce(state, (draftState) => {
     const layoutFieldListPath = ['modifiedData', 'layouts', 'list'];
     switch (action.type) {
       case 'ADD_FIELD': {

package/admin/src/content-manager/pages/ListSettingsView/utils/ellipsisCardTitle.js

@@ -1,4 +1,4 @@
-const ellipsisCardTitle = title => {
+const ellipsisCardTitle = (title) => {
   const formatedTitle = title.length > 20 ? `${title.substring(0, 20)}...` : title;
 
   return formatedTitle;

package/admin/src/content-manager/pages/ListView/FieldPicker/index.js

@@ -16,7 +16,7 @@ const FieldPicker = ({ layout }) => {
   const { trackUsage } = useTracking();
   const { formatMessage } = useIntl();
 
-  const allAllowedHeaders = getAllAllowedHeaders(layout.contentType.attributes).map(attrName => {
+  const allAllowedHeaders = getAllAllowedHeaders(layout.contentType.attributes).map((attrName) => {
     const metadatas = layout.contentType.metadatas[attrName].list;
 
     return {
@@ -26,18 +26,18 @@ const FieldPicker = ({ layout }) => {
   });
   const values = displayedHeaders.map(({ name }) => name);
 
-  const handleChange = updatedValues => {
+  const handleChange = (updatedValues) => {
     trackUsage('didChangeDisplayedFields');
 
     // removing a header
     if (updatedValues.length < values.length) {
-      const removedHeader = values.filter(value => {
+      const removedHeader = values.filter((value) => {
         return updatedValues.indexOf(value) === -1;
       });
 
       dispatch(onChangeListHeaders({ name: removedHeader[0], value: true }));
     } else {
-      const addedHeader = updatedValues.filter(value => {
+      const addedHeader = updatedValues.filter((value) => {
         return values.indexOf(value) === -1;
       });
 
@@ -51,18 +51,19 @@ const FieldPicker = ({ layout }) => {
         aria-label="change displayed fields"
         value={values}
         onChange={handleChange}
-        customizeContent={values =>
+        customizeContent={(values) =>
           formatMessage(
             {
               id: getTrad('select.currently.selected'),
               defaultMessage: '{count} currently selected',
             },
             { count: values.length }
-          )}
+          )
+        }
         multi
         size="S"
       >
-        {allAllowedHeaders.map(header => {
+        {allAllowedHeaders.map((header) => {
           return (
             <Option key={header.name} value={header.name}>
               {formatMessage({

package/admin/src/content-manager/pages/ListView/FieldPicker/utils/getAllAllowedHeader.js

@@ -1,6 +1,6 @@
 import { checkIfAttributeIsDisplayable } from '../../../../utils';
 
-const getAllAllowedHeaders = attributes => {
+const getAllAllowedHeaders = (attributes) => {
   const allowedAttributes = Object.keys(attributes).reduce((acc, current) => {
     const attribute = attributes[current];
 

package/admin/src/content-manager/pages/ListView/actions.js

@@ -32,4 +32,4 @@ export const setLayout = ({ components, contentType }) => {
   };
 };
 
-export const onChangeListHeaders = target => ({ type: ON_CHANGE_LIST_HEADERS, target });
+export const onChangeListHeaders = (target) => ({ type: ON_CHANGE_LIST_HEADERS, target });

package/admin/src/content-manager/pages/ListView/index.js

@@ -151,7 +151,7 @@ function ListView({
   );
 
   const handleConfirmDeleteAllData = useCallback(
-    async ids => {
+    async (ids) => {
       try {
         await axiosInstance.post(getRequestUrl(`collection-types/${slug}/actions/bulkDelete`), {
           ids,
@@ -171,7 +171,7 @@ function ListView({
   );
 
   const handleConfirmDeleteData = useCallback(
-    async idToDelete => {
+    async (idToDelete) => {
       try {
         await axiosInstance.delete(getRequestUrl(`collection-types/${slug}/${idToDelete}`));
 
@@ -236,7 +236,7 @@ function ListView({
       )
     : null;
 
-  const getCreateAction = props =>
+  const getCreateAction = (props) =>
     canCreate ? (
       <Button
         {...props}

package/admin/src/content-manager/pages/ListView/reducer.js

@@ -28,7 +28,7 @@ export const initialState = {
 
 const listViewReducer = (state = initialState, action) =>
   // eslint-disable-next-line consistent-return
-  produce(state, draftState => {
+  produce(state, (draftState) => {
     switch (action.type) {
       case GET_DATA: {
         return {
@@ -105,7 +105,7 @@ const listViewReducer = (state = initialState, action) =>
           }
         } else {
           draftState.displayedHeaders = state.displayedHeaders.filter(
-            header => header.name !== name
+            (header) => header.name !== name
           );
         }
 

package/admin/src/content-manager/pages/ListView/selectors.js

@@ -4,7 +4,7 @@ import { initialState } from './reducer';
 /**
  * Direct selector to the listView state domain
  */
-const listViewDomain = () => state => state['content-manager_listView'] || initialState;
+const listViewDomain = () => (state) => state['content-manager_listView'] || initialState;
 
 /**
  * Other specific selectors
@@ -15,11 +15,11 @@ const listViewDomain = () => state => state['content-manager_listView'] || initi
  */
 
 const makeSelectListView = () =>
-  createSelector(listViewDomain(), substate => {
+  createSelector(listViewDomain(), (substate) => {
     return substate;
   });
 
-const selectDisplayedHeaders = state => {
+const selectDisplayedHeaders = (state) => {
   const { displayedHeaders } = state['content-manager_listView'];
 
   return displayedHeaders;

package/admin/src/content-manager/pages/ListView/utils/createPluginsFilter.js

@@ -1,4 +1,4 @@
-const createPluginsFilter = obj =>
+const createPluginsFilter = (obj) =>
   Object.values(obj || {}).reduce((acc, current) => Object.assign(acc, current), {});
 
 export default createPluginsFilter;

package/admin/src/content-manager/pages/ListViewLayoutManager/Permissions.js

@@ -5,7 +5,7 @@ import { useRBAC, LoadingIndicatorPage, difference } from '@strapi/helper-plugin
 import ListView from '../ListView';
 import { generatePermissionsObject } from '../../utils';
 
-const Permissions = props => {
+const Permissions = (props) => {
   const viewPermissions = useMemo(() => generatePermissionsObject(props.slug), [props.slug]);
 
   const { isLoading, allowedActions } = useRBAC(viewPermissions, props.permissions);
@@ -35,7 +35,7 @@ export default memo(Permissions, (prev, next) => {
   // this hack prevents this
   // TODO at some point we will need to refacto the LV and migrate to react-query
   const propNamesThatHaveChanged = Object.keys(differenceBetweenRerenders).filter(
-    propName => propName !== 'state'
+    (propName) => propName !== 'state'
   );
 
   return propNamesThatHaveChanged.length > 0;

package/admin/src/content-manager/sharedReducers/crudReducer/actions.js

@@ -14,7 +14,7 @@ export const getData = () => {
   };
 };
 
-export const getDataSucceeded = data => ({
+export const getDataSucceeded = (data) => ({
   type: GET_DATA_SUCCEEDED,
   data,
 });
@@ -33,12 +33,12 @@ export const setDataStructures = (componentsDataStructure, contentTypeDataStruct
   contentTypeDataStructure,
 });
 
-export const setStatus = status => ({
+export const setStatus = (status) => ({
   type: SET_STATUS,
   status,
 });
 
-export const submitSucceeded = data => ({
+export const submitSucceeded = (data) => ({
   type: SUBMIT_SUCCEEDED,
   data,
 });

package/admin/src/content-manager/sharedReducers/crudReducer/reducer.js

@@ -26,7 +26,7 @@ const crudInitialState = {
 };
 
 const crudReducer = (state = crudInitialState, action) =>
-  produce(state, draftState => {
+  produce(state, (draftState) => {
     switch (action.type) {
       case GET_DATA: {
         draftState.isLoading = true;

package/admin/src/content-manager/sharedReducers/crudReducer/selectors.js

@@ -1,3 +1,3 @@
-const selectCrudReducer = state => state['content-manager_editViewCrudReducer'];
+const selectCrudReducer = (state) => state['content-manager_editViewCrudReducer'];
 
 export default selectCrudReducer;

package/admin/src/content-manager/utils/checkIfAttributeIsDisplayable.js

@@ -1,6 +1,6 @@
 import { toLower } from 'lodash';
 
-const checkIfAttributeIsDisplayable = attribute => {
+const checkIfAttributeIsDisplayable = (attribute) => {
   const type = attribute.type;
 
   if (type === 'relation') {

package/admin/src/content-manager/utils/formatLayoutToApi.js

@@ -1,7 +1,7 @@
 import { omit, get } from 'lodash';
 
 const formatLayoutToApi = ({ layouts, metadatas, ...rest }) => {
-  const list = layouts.list.map(obj => {
+  const list = layouts.list.map((obj) => {
     if (obj.name) {
       return obj.name;
     }
@@ -27,7 +27,7 @@ const formatLayoutToApi = ({ layouts, metadatas, ...rest }) => {
     };
   }, {});
 
-  const edit = layouts.edit.map(row =>
+  const edit = layouts.edit.map((row) =>
     row.map(({ name, size }) => ({
       name,
       size,

package/admin/src/content-manager/utils/generatePermissionsObject.js

@@ -1,6 +1,7 @@
-const addSubjectToPermissionsArray = (array, uid) => array.map(data => ({ ...data, subject: uid }));
+const addSubjectToPermissionsArray = (array, uid) =>
+  array.map((data) => ({ ...data, subject: uid }));
 
-const generatePermissionsObject = uid => {
+const generatePermissionsObject = (uid) => {
   const permissions = {
     create: [{ action: 'plugin::content-manager.explorer.create', subject: null }],
     delete: [{ action: 'plugin::content-manager.explorer.delete', subject: null }],

package/admin/src/content-manager/utils/getFieldName.js

@@ -1,6 +1,6 @@
 import { isNaN } from 'lodash';
 
-const getFieldName = stringName =>
-  stringName.split('.').filter(string => isNaN(parseInt(string, 10)));
+const getFieldName = (stringName) =>
+  stringName.split('.').filter((string) => isNaN(parseInt(string, 10)));
 
 export default getFieldName;

package/admin/src/content-manager/utils/getMaxTempKey.js

@@ -1,11 +1,11 @@
-const getMaxTempKey = arr => {
+const getMaxTempKey = (arr) => {
   if (arr.length === 0) {
     return -1;
   }
 
   return Math.max.apply(
     Math,
-    arr.map(o => o.__temp_key__)
+    arr.map((o) => o.__temp_key__)
   );
 };
 

package/admin/src/content-manager/utils/getRequestUrl.js

@@ -1,4 +1,4 @@
 // FIXME when back-end ready
-const getRequestUrl = path => `/content-manager/${path}`;
+const getRequestUrl = (path) => `/content-manager/${path}`;
 
 export default getRequestUrl;

package/admin/src/content-manager/utils/getTrad.js

@@ -1,3 +1,3 @@
-const getTrad = id => `content-manager.${id}`;
+const getTrad = (id) => `content-manager.${id}`;
 
 export default getTrad;

package/admin/src/content-manager/utils/mergeMetasWithSchema.js

@@ -1,14 +1,14 @@
 import { set } from 'lodash';
 
 const mergeMetasWithSchema = (data, schemas, mainSchemaKey) => {
-  const findSchema = refUid => schemas.find(obj => obj.uid === refUid);
+  const findSchema = (refUid) => schemas.find((obj) => obj.uid === refUid);
   const merged = Object.assign({}, data);
   const mainUID = data[mainSchemaKey].uid;
   const mainSchema = findSchema(mainUID);
 
   set(merged, [mainSchemaKey], { ...data[mainSchemaKey], ...mainSchema });
 
-  Object.keys(data.components).forEach(compoUID => {
+  Object.keys(data.components).forEach((compoUID) => {
     const compoSchema = findSchema(compoUID);
 
     set(merged, ['components', compoUID], { ...data.components[compoUID], ...compoSchema });

package/admin/src/content-manager/utils/removeKeyInObject.js

@@ -17,7 +17,7 @@ const removeKeyInObject = (obj, keyToRemove) => {
         return acc;
       }
 
-      return { ...acc, [current]: value.map(obj => removeKeyInObject(obj, keyToRemove)) };
+      return { ...acc, [current]: value.map((obj) => removeKeyInObject(obj, keyToRemove)) };
     }
 
     if (typeof value === 'object') {

package/admin/src/content-manager/utils/removePasswordFieldsFromData.js

@@ -10,7 +10,7 @@ const removePasswordFieldsFromData = (data, contentTypeSchema, componentSchema)
       const isRepeatable = getOtherInfos(schema, [current, 'repeatable']);
 
       if (attrType === 'dynamiczone') {
-        acc[current] = value.map(componentValue => {
+        acc[current] = value.map((componentValue) => {
           const subCleanedData = recursiveCleanData(
             componentValue,
             componentSchema[componentValue.__component]
@@ -26,7 +26,7 @@ const removePasswordFieldsFromData = (data, contentTypeSchema, componentSchema)
         if (isRepeatable) {
           /* eslint-disable indent */
           acc[current] = value
-            ? value.map(compoData => {
+            ? value.map((compoData) => {
                 const subCleanedData = recursiveCleanData(compoData, componentSchema[component]);
 
                 return subCleanedData;

package/admin/src/core/apis/CustomFields.js

@@ -0,0 +1,80 @@
+import invariant from 'invariant';
+
+const ALLOWED_TYPES = [
+  'biginteger',
+  'boolean',
+  'date',
+  'datetime',
+  'decimal',
+  'email',
+  'enumeration',
+  'float',
+  'integer',
+  'json',
+  'password',
+  'richtext',
+  'string',
+  'text',
+  'time',
+  'timestamp',
+  'uid',
+];
+
+class CustomFields {
+  constructor() {
+    this.customFields = {};
+  }
+
+  register(customFields) {
+    if (Array.isArray(customFields)) {
+      // If several custom fields are passed, register them one by one
+      customFields.forEach(customField => {
+        this.register(customField);
+      });
+    } else {
+      // Handle individual custom field
+      const { name, pluginId, type, intlLabel, intlDescription, components } = customFields;
+
+      // Ensure required attributes are provided
+      invariant(name, 'A name must be provided');
+      invariant(type, 'A type must be provided');
+      invariant(intlLabel, 'An intlLabel must be provided');
+      invariant(intlDescription, 'An intlDescription must be provided');
+      invariant(components, 'A components object must be provided');
+      invariant(components.Input, 'An Input component must be provided');
+
+      // Ensure the type is valid
+      invariant(
+        ALLOWED_TYPES.includes(type),
+        `Custom field type: '${type}' is not a valid Strapi type or it can't be used with a Custom Field`
+      );
+
+      // Ensure name has no special characters
+      const isValidObjectKey = /^(?![0-9])[a-zA-Z0-9$_-]+$/g;
+      invariant(
+        isValidObjectKey.test(name),
+        `Custom field name: '${name}' is not a valid object key`
+      );
+
+      // When no plugin is specified, default to the global namespace
+      const uid = pluginId ? `plugin::${pluginId}.${name}` : `global::${name}`;
+
+      // Ensure the uid is unique
+      const uidAlreadyUsed = Object.prototype.hasOwnProperty.call(this.customFields, uid);
+      invariant(!uidAlreadyUsed, `Custom field: '${uid}' has already been registered`);
+
+      this.customFields[uid] = customFields;
+    }
+  }
+
+  getAll() {
+    return this.customFields;
+  }
+
+  get(uid) {
+    return this.customFields[uid];
+  }
+}
+
+// Export an instance since it's a singleton
+export default new CustomFields();

package/admin/src/core/apis/Plugin.js

@@ -27,4 +27,4 @@ class Plugin {
   }
 }
 
-export default pluginConf => new Plugin(pluginConf);
+export default (pluginConf) => new Plugin(pluginConf);

package/admin/src/core/apis/index.js

@@ -3,3 +3,4 @@ export { default as Components } from './Components';
 export { default as Middlewares } from './Middlewares';
 export { default as Plugin } from './Plugin';
 export { default as Reducers } from './Reducers';
+export { default as customFields } from './CustomFields';

package/admin/src/core/store/configureStore.js

@@ -4,7 +4,7 @@ import createReducer from './createReducer';
 const configureStore = (appMiddlewares, appReducers) => {
   const middlewares = [];
 
-  appMiddlewares.forEach(middleware => {
+  appMiddlewares.forEach((middleware) => {
     middlewares.push(middleware());
   });
 

package/admin/src/core/store/createReducer.js

@@ -1,5 +1,5 @@
 import { combineReducers } from 'redux';
 
-const createReducer = reducers => combineReducers(reducers);
+const createReducer = (reducers) => combineReducers(reducers);
 
 export default createReducer;

package/admin/src/core/utils/axiosInstance.js

@@ -6,7 +6,7 @@ const instance = axios.create({
 });
 
 instance.interceptors.request.use(
-  async config => {
+  async (config) => {
     config.headers = {
       Authorization: `Bearer ${auth.getToken()}`,
       Accept: 'application/json',
@@ -15,14 +15,14 @@ instance.interceptors.request.use(
 
     return config;
   },
-  error => {
+  (error) => {
     Promise.reject(error);
   }
 );
 
 instance.interceptors.response.use(
-  response => response,
-  error => {
+  (response) => response,
+  (error) => {
     // whatever you want to do with the error
     if (error?.response?.status === 401) {
       auth.clearAppStorage();

package/admin/src/core/utils/createHook.js

@@ -25,7 +25,7 @@ const createHook = () => {
       return result;
     },
     runSeries(...args) {
-      return _handlers.map(fn => fn(...args));
+      return _handlers.map((fn) => fn(...args));
     },
     async runSeriesAsync(...args) {
       const result = [];
@@ -38,7 +38,7 @@ const createHook = () => {
     },
     runParallel(...args) {
       return Promise.all(
-        _handlers.map(fn => {
+        _handlers.map((fn) => {
           return fn(...args);
         })
       );

package/admin/src/hooks/useFetchEnabledPlugins/index.js

@@ -2,16 +2,16 @@ import { useQuery } from 'react-query';
 import { useNotification } from '@strapi/helper-plugin';
 import { fetchEnabledPlugins } from './utils/api';
 
-const useFetchEnabledPlugins = notifyLoad => {
+const useFetchEnabledPlugins = (notifyLoad) => {
   const toggleNotification = useNotification();
 
   return useQuery('list-enabled-plugins', () => fetchEnabledPlugins(), {
-    onSuccess: () => {
+    onSuccess() {
       if (notifyLoad) {
         notifyLoad();
       }
     },
-    onError: () => {
+    onError() {
       toggleNotification({
         type: 'warning',
         message: { id: 'notification.error', defaultMessage: 'An error occured' },

package/admin/src/hooks/useFetchMarketplacePlugins/index.js

@@ -2,16 +2,16 @@ import { useQuery } from 'react-query';
 import { useNotification } from '@strapi/helper-plugin';
 import { fetchMarketplacePlugins } from './utils/api';
 
-const useFetchMarketplacePlugins = notifyLoad => {
+const useFetchMarketplacePlugins = (notifyLoad) => {
   const toggleNotification = useNotification();
 
   return useQuery('list-marketplace-plugins', () => fetchMarketplacePlugins(), {
-    onSuccess: () => {
+    onSuccess() {
       if (notifyLoad) {
         notifyLoad();
       }
     },
-    onError: () => {
+    onError() {
       toggleNotification({
         type: 'warning',
         message: { id: 'notification.error', defaultMessage: 'An error occured' },

package/admin/src/hooks/useFetchMarketplacePlugins/utils/api.js

@@ -8,7 +8,7 @@ const fetchMarketplacePlugins = async () => {
   // Only keep v4 plugins
   const filteredResponse = {
     ...response,
-    data: response.data.filter(plugin => plugin.attributes.strapiCompatibility === 'v4'),
+    data: response.data.filter((plugin) => plugin.attributes.strapiCompatibility === 'v4'),
   };
 
   return filteredResponse;

package/admin/src/hooks/useFetchMarketplaceProviders/index.js

@@ -2,16 +2,16 @@ import { useQuery } from 'react-query';
 import { useNotification } from '@strapi/helper-plugin';
 import { fetchMarketplacePlugins } from './utils/api';
 
-const useFetchMarketplaceProviders = notifyLoad => {
+const useFetchMarketplaceProviders = (notifyLoad) => {
   const toggleNotification = useNotification();
 
   return useQuery('list-marketplace-providers', () => fetchMarketplacePlugins(), {
-    onSuccess: () => {
+    onSuccess() {
       if (notifyLoad) {
         notifyLoad();
       }
     },
-    onError: () => {
+    onError() {
       toggleNotification({
         type: 'warning',
         message: { id: 'notification.error', defaultMessage: 'An error occured' },

package/admin/src/hooks/useFetchPermissionsLayout/index.js

@@ -3,7 +3,7 @@ import { request } from '@strapi/helper-plugin';
 
 import reducer, { initialState } from './reducer';
 
-const useFetchPermissionsLayout = id => {
+const useFetchPermissionsLayout = (id) => {
   const [{ data, error, isLoading }, dispatch] = useReducer(reducer, initialState);
 
   useEffect(() => {