@strapi/admin 4.15.0-alpha.0 → 4.15.1

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

@@ -1,404 +0,0 @@
-import React, { useReducer, useState } from 'react';
-
-import {
-  Box,
-  Button,
-  ContentLayout,
-  Divider,
-  Flex,
-  Grid,
-  GridItem,
-  HeaderLayout,
-  Main,
-  Option,
-  Select,
-  Typography,
-} from '@strapi/design-system';
-import {
-  ConfirmDialog,
-  Link,
-  useFetchClient,
-  useNotification,
-  useTracking,
-} from '@strapi/helper-plugin';
-import { ArrowLeft, Check } from '@strapi/icons';
-import cloneDeep from 'lodash/cloneDeep';
-import isEqual from 'lodash/isEqual';
-import upperFirst from 'lodash/upperFirst';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { useMutation } from 'react-query';
-import { useSelector } from 'react-redux';
-import { useHistory } from 'react-router-dom';
-
-import { getTrad } from '../../utils';
-import { selectFieldSizes } from '../App/selectors';
-
-import DisplayedFields from './components/DisplayedFields';
-import ModalForm from './components/FormModal';
-import { LayoutDndProvider } from './components/LayoutDndProvider';
-import init from './init';
-import reducer, { initialState } from './reducer';
-import { unformatLayout } from './utils/layout';
-
-const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, updateLayout }) => {
-  const [reducerState, dispatch] = useReducer(reducer, initialState, () =>
-    init(initialState, mainLayout, components)
-  );
-  const [isDraggingSibling, setIsDraggingSibling] = useState(false);
-  const { trackUsage } = useTracking();
-  const toggleNotification = useNotification();
-  const { goBack } = useHistory();
-  const [isModalFormOpen, setIsModalFormOpen] = useState(false);
-  const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState(false);
-  const { componentLayouts, initialData, modifiedData, metaToEdit, metaForm } = reducerState;
-  const { formatMessage } = useIntl();
-  const modelName = mainLayout.info.displayName;
-  const attributes = modifiedData?.attributes ?? {};
-  const fieldSizes = useSelector(selectFieldSizes);
-  const { put } = useFetchClient();
-
-  const entryTitleOptions = Object.keys(attributes).filter((attr) => {
-    const type = attributes?.[attr]?.type ?? '';
-
-    return (
-      ![
-        'dynamiczone',
-        'json',
-        'text',
-        'relation',
-        'component',
-        'boolean',
-        'media',
-        'password',
-        'richtext',
-        'timestamp',
-      ].includes(type) && !!type
-    );
-  });
-  const editLayout = modifiedData.layouts.edit;
-  const displayedFields = editLayout.flatMap((layout) => layout.rowContent);
-  const editLayoutFields = Object.keys(modifiedData.attributes)
-    .filter((attr) => (modifiedData?.metadatas?.[attr]?.edit?.visible ?? false) === true)
-    .filter((attr) => displayedFields.findIndex((el) => el.name === attr) === -1)
-    .sort();
-
-  const handleChange = ({ target: { name, value } }) => {
-    dispatch({
-      type: 'ON_CHANGE',
-      keys: name.split('.'),
-      value,
-    });
-  };
-
-  const handleToggleModal = () => {
-    setIsModalFormOpen((prev) => !prev);
-  };
-
-  const toggleConfirmDialog = () => {
-    setIsConfirmDialogOpen((prev) => !prev);
-  };
-
-  const handleMetaChange = ({ target: { name, value } }) => {
-    dispatch({
-      type: 'ON_CHANGE_META',
-      keys: name.split('.'),
-      value,
-    });
-  };
-
-  const handleSizeChange = ({ name, value }) => {
-    dispatch({
-      type: 'ON_CHANGE_SIZE',
-      name,
-      value,
-    });
-  };
-
-  const handleMetaSubmit = (e) => {
-    e.preventDefault();
-    dispatch({
-      type: 'SUBMIT_META_FORM',
-    });
-    handleToggleModal();
-  };
-
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    toggleConfirmDialog();
-  };
-
-  const submitMutation = useMutation(
-    (body) => {
-      return put(
-        isContentTypeView
-          ? `/content-manager/content-types/${slug}/configuration`
-          : `/content-manager/components/${slug}/configuration`,
-        body
-      );
-    },
-    {
-      onSuccess({ data }) {
-        if (updateLayout) {
-          updateLayout(data.data);
-        }
-        dispatch({
-          type: 'SUBMIT_SUCCEEDED',
-        });
-        toggleConfirmDialog();
-        trackUsage('didEditEditSettings');
-      },
-      onError() {
-        toggleNotification({ type: 'warning', message: { id: 'notification.error' } });
-      },
-    }
-  );
-  const { isLoading: isSubmittingForm } = submitMutation;
-
-  const handleConfirm = () => {
-    const { layouts, metadatas, settings } = cloneDeep(modifiedData);
-    submitMutation.mutate({
-      layouts: {
-        ...layouts,
-        edit: unformatLayout(layouts.edit),
-      },
-      metadatas,
-      settings,
-    });
-  };
-
-  const handleMoveRelation = (fromIndex, toIndex) => {
-    dispatch({
-      type: 'MOVE_RELATION',
-      fromIndex,
-      toIndex,
-    });
-  };
-
-  const handleMoveField = (fromIndex, toIndex) => {
-    dispatch({
-      type: 'MOVE_FIELD',
-      fromIndex,
-      toIndex,
-    });
-  };
-
-  const moveItem = (dragIndex, hoverIndex, dragRowIndex, hoverRowIndex) => {
-    // Same row = just reorder
-    if (dragRowIndex === hoverRowIndex) {
-      dispatch({
-        type: 'REORDER_ROW',
-        dragRowIndex,
-        dragIndex,
-        hoverIndex,
-      });
-    } else {
-      dispatch({
-        type: 'REORDER_DIFF_ROW',
-        dragIndex,
-        hoverIndex,
-        dragRowIndex,
-        hoverRowIndex,
-      });
-    }
-  };
-
-  const moveRow = (fromIndex, toIndex) => {
-    dispatch({
-      type: 'MOVE_ROW',
-      fromIndex,
-      toIndex,
-    });
-  };
-
-  return (
-    <LayoutDndProvider
-      isContentTypeView={isContentTypeView}
-      attributes={attributes}
-      modifiedData={modifiedData}
-      slug={slug}
-      componentLayouts={componentLayouts}
-      selectedField={metaToEdit}
-      fieldForm={metaForm}
-      onMoveRelation={handleMoveRelation}
-      onMoveField={handleMoveField}
-      moveRow={moveRow}
-      moveItem={moveItem}
-      setEditFieldToSelect={(name) => {
-        dispatch({
-          type: 'SET_FIELD_TO_EDIT',
-          name,
-        });
-        handleToggleModal();
-      }}
-      isDraggingSibling={isDraggingSibling}
-      setIsDraggingSibling={setIsDraggingSibling}
-    >
-      <Main>
-        <form onSubmit={handleSubmit}>
-          <HeaderLayout
-            title={formatMessage(
-              {
-                id: getTrad('components.SettingsViewWrapper.pluginHeader.title'),
-                defaultMessage: `Configure the view - ${upperFirst(modelName)}`,
-              },
-              { name: upperFirst(modelName) }
-            )}
-            subtitle={formatMessage({
-              id: getTrad('components.SettingsViewWrapper.pluginHeader.description.edit-settings'),
-              defaultMessage: 'Customize how the edit view will look like.',
-            })}
-            navigationAction={
-              <Link
-                startIcon={<ArrowLeft />}
-                onClick={(e) => {
-                  e.preventDefault();
-                  goBack();
-                }}
-                to="/"
-              >
-                {formatMessage({
-                  id: 'global.back',
-                  defaultMessage: 'Back',
-                })}
-              </Link>
-            }
-            primaryAction={
-              <Button
-                disabled={isEqual(initialData, modifiedData)}
-                startIcon={<Check />}
-                type="submit"
-              >
-                {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}
-              </Button>
-            }
-          />
-          <ContentLayout>
-            <Box
-              background="neutral0"
-              hasRadius
-              shadow="filterShadow"
-              paddingTop={6}
-              paddingBottom={6}
-              paddingLeft={7}
-              paddingRight={7}
-            >
-              <Flex direction="column" alignItems="stretch" gap={4}>
-                <Typography variant="delta" as="h2">
-                  {formatMessage({
-                    id: getTrad('containers.SettingPage.settings'),
-                    defaultMessage: 'Settings',
-                  })}
-                </Typography>
-                <Grid>
-                  <GridItem col={6} s={12}>
-                    <Select
-                      label={formatMessage({
-                        id: getTrad('containers.SettingPage.editSettings.entry.title'),
-                        defaultMessage: 'Entry title',
-                      })}
-                      hint={formatMessage({
-                        id: getTrad('containers.SettingPage.editSettings.entry.title.description'),
-                        defaultMessage: 'Set the display field of your entry',
-                      })}
-                      onChange={(value) => {
-                        handleChange({
-                          target: {
-                            name: 'settings.mainField',
-                            value: value === '' ? null : value,
-                          },
-                        });
-                      }}
-                      value={modifiedData.settings.mainField}
-                    >
-                      {entryTitleOptions.map((attribute) => (
-                        <Option key={attribute} value={attribute}>
-                          {attribute}
-                        </Option>
-                      ))}
-                    </Select>
-                  </GridItem>
-                </Grid>
-                <Box paddingTop={2} paddingBottom={2}>
-                  <Divider />
-                </Box>
-                <Typography variant="delta" as="h3">
-                  {formatMessage({
-                    id: getTrad('containers.SettingPage.view'),
-                    defaultMessage: 'View',
-                  })}
-                </Typography>
-
-                <DisplayedFields
-                  attributes={attributes}
-                  editLayout={editLayout}
-                  fields={editLayoutFields}
-                  onAddField={(field) => {
-                    dispatch({
-                      type: 'ON_ADD_FIELD',
-                      name: field,
-                      fieldSizes,
-                    });
-                  }}
-                  onRemoveField={(rowId, index) => {
-                    dispatch({
-                      type: 'REMOVE_FIELD',
-                      rowIndex: rowId,
-                      fieldIndex: index,
-                    });
-                  }}
-                />
-              </Flex>
-            </Box>
-          </ContentLayout>
-          <ConfirmDialog
-            bodyText={{
-              id: getTrad('popUpWarning.warning.updateAllSettings'),
-              defaultMessage: 'This will modify all your settings',
-            }}
-            iconRightButton={<Check />}
-            isConfirmButtonLoading={isSubmittingForm}
-            isOpen={isConfirmDialogOpen}
-            onToggleDialog={toggleConfirmDialog}
-            onConfirm={handleConfirm}
-            variantRightButton="success-light"
-          />
-        </form>
-        {isModalFormOpen && (
-          <ModalForm
-            onSubmit={handleMetaSubmit}
-            onToggle={handleToggleModal}
-            onMetaChange={handleMetaChange}
-            onSizeChange={handleSizeChange}
-            type={attributes?.[metaToEdit]?.type ?? ''}
-            customFieldUid={attributes?.[metaToEdit]?.customField ?? ''}
-          />
-        )}
-      </Main>
-    </LayoutDndProvider>
-  );
-};
-
-EditSettingsView.defaultProps = {
-  isContentTypeView: false,
-  updateLayout: null,
-};
-
-EditSettingsView.propTypes = {
-  components: PropTypes.object.isRequired,
-  isContentTypeView: PropTypes.bool,
-  mainLayout: PropTypes.shape({
-    attributes: PropTypes.object.isRequired,
-    info: PropTypes.object.isRequired,
-    layouts: PropTypes.shape({
-      list: PropTypes.array.isRequired,
-      edit: PropTypes.array.isRequired,
-    }).isRequired,
-    metadatas: PropTypes.object.isRequired,
-    options: PropTypes.object.isRequired,
-  }).isRequired,
-  slug: PropTypes.string.isRequired,
-  updateLayout: PropTypes.func,
-};
-
-export default EditSettingsView;

package/admin/src/content-manager/pages/EditSettingsView/init.js

@@ -1,19 +0,0 @@
-import cloneDeep from 'lodash/cloneDeep';
-import set from 'lodash/set';
-
-import { createLayout, formatLayout } from './utils/layout';
-
-const init = (initialState, mainLayout, components) => {
-  let initialData = cloneDeep(mainLayout);
-
-  set(initialData, ['layouts', 'edit'], formatLayout(createLayout(mainLayout.layouts.edit)));
-
-  return {
-    ...initialState,
-    initialData,
-    modifiedData: initialData,
-    componentLayouts: components,
-  };
-};
-
-export default init;

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

@@ -1,196 +0,0 @@
-import produce from 'immer';
-import cloneDeep from 'lodash/cloneDeep';
-import get from 'lodash/get';
-import set from 'lodash/set';
-
-import { arrayMoveItem } from '../../utils';
-
-import { formatLayout, getFieldSize, setFieldSize } from './utils/layout';
-
-const DEFAULT_FIELD_SIZE = 6;
-
-const initialState = {
-  fieldForm: {},
-  componentLayouts: {},
-  metaToEdit: '',
-  initialData: {},
-  metaForm: {},
-  modifiedData: {},
-};
-
-const reducer = (state = initialState, action) =>
-  // eslint-disable-next-line consistent-return
-  produce(state, (draftState) => {
-    const layoutPathEdit = ['modifiedData', 'layouts', 'edit'];
-
-    switch (action.type) {
-      case 'MOVE_ROW': {
-        const editFieldLayoutValue = get(state, layoutPathEdit, []);
-        const { fromIndex, toIndex } = action;
-        set(draftState, layoutPathEdit, arrayMoveItem(editFieldLayoutValue, fromIndex, toIndex));
-        break;
-      }
-      case 'ON_ADD_FIELD': {
-        const newState = cloneDeep(state);
-        const attribute = get(newState, ['modifiedData', 'attributes', action.name], {});
-
-        // Get the default size, checking custom fields first, then the type and generic defaults
-        const size =
-          action.fieldSizes[attribute?.customField]?.default ??
-          action.fieldSizes[attribute?.type]?.default ??
-          DEFAULT_FIELD_SIZE;
-
-        const listSize = get(newState, layoutPathEdit, []).length;
-        const actualRowContentPath = [...layoutPathEdit, listSize - 1, 'rowContent'];
-        const rowContentToSet = get(newState, actualRowContentPath, []);
-        let newList = get(newState, layoutPathEdit, []);
-
-        if (Array.isArray(rowContentToSet)) {
-          set(
-            newList,
-            [listSize > 0 ? listSize - 1 : 0, 'rowContent'],
-            [...rowContentToSet, { name: action.name, size }]
-          );
-        } else {
-          set(
-            newList,
-            [listSize > 0 ? listSize - 1 : 0, 'rowContent'],
-            [{ name: action.name, size }]
-          );
-        }
-
-        const formattedList = formatLayout(newList);
-        set(draftState, layoutPathEdit, formattedList);
-        break;
-      }
-      case 'ON_CHANGE': {
-        set(draftState, ['modifiedData', ...action.keys], action.value);
-        break;
-      }
-      case 'ON_CHANGE_META': {
-        set(draftState, ['metaForm', 'metadata', ...action.keys], action.value);
-        break;
-      }
-      case 'ON_CHANGE_SIZE': {
-        set(draftState, ['metaForm', 'size'], action.value);
-        break;
-      }
-      case 'ON_RESET': {
-        draftState.modifiedData = state.initialData;
-        break;
-      }
-      case 'REMOVE_FIELD': {
-        const row = get(state, [...layoutPathEdit, action.rowIndex, 'rowContent'], []);
-        let newState = cloneDeep(state);
-
-        if (row.length === 1 || (row.length === 2 && get(row, [1, 'name'], '') === '_TEMP_')) {
-          const currentRowFieldList = get(state, layoutPathEdit, []);
-          set(
-            newState,
-            layoutPathEdit,
-            currentRowFieldList.filter((_, index) => action.rowIndex !== index)
-          );
-        } else {
-          set(
-            newState,
-            [...layoutPathEdit, action.rowIndex, 'rowContent'],
-            row.filter((_, index) => index !== action.fieldIndex)
-          );
-        }
-        const updatedList = formatLayout(get(newState, layoutPathEdit, []));
-        set(draftState, layoutPathEdit, updatedList);
-        break;
-      }
-      case 'REORDER_DIFF_ROW': {
-        const actualRowContent = get(
-          state,
-          [...layoutPathEdit, action.dragRowIndex, 'rowContent'],
-          []
-        );
-        const targetRowContent = get(
-          state,
-          [...layoutPathEdit, action.hoverRowIndex, 'rowContent'],
-          []
-        );
-        const itemToInsert = get(
-          state,
-          [...layoutPathEdit, action.dragRowIndex, 'rowContent', action.dragIndex],
-          {}
-        );
-        const rowContent = [...targetRowContent, itemToInsert];
-        let newState = cloneDeep(state);
-
-        set(
-          newState,
-          [...layoutPathEdit, action.dragRowIndex, 'rowContent'],
-          actualRowContent.filter((_, index) => action.dragIndex !== index)
-        );
-        set(
-          newState,
-          [...layoutPathEdit, action.hoverRowIndex, 'rowContent'],
-          arrayMoveItem(rowContent, rowContent.length - 1, action.hoverIndex)
-        );
-
-        const updatedList = formatLayout(get(newState, layoutPathEdit, []));
-        set(draftState, layoutPathEdit, updatedList);
-        break;
-      }
-      case 'REORDER_ROW': {
-        const newState = cloneDeep(state);
-        const rowContent = get(
-          newState,
-          [...layoutPathEdit, action.dragRowIndex, 'rowContent'],
-          []
-        );
-
-        set(
-          newState,
-          [...layoutPathEdit, action.dragRowIndex, 'rowContent'],
-          arrayMoveItem(rowContent, action.dragIndex, action.hoverIndex)
-        );
-
-        const updatedList = formatLayout(get(newState, layoutPathEdit, []));
-        set(draftState, layoutPathEdit, updatedList);
-        break;
-      }
-      case 'SET_FIELD_TO_EDIT': {
-        draftState.metaToEdit = action.name;
-        draftState.metaForm = {
-          metadata: get(state, ['modifiedData', 'metadatas', action.name, 'edit'], {}),
-          size: getFieldSize(action.name, state.modifiedData?.layouts?.edit) ?? DEFAULT_FIELD_SIZE,
-        };
-
-        break;
-      }
-      case 'SUBMIT_META_FORM': {
-        set(
-          draftState,
-          ['modifiedData', 'metadatas', state.metaToEdit, 'edit'],
-          state.metaForm.metadata
-        );
-
-        const layoutsCopy = cloneDeep(get(state, layoutPathEdit, []));
-        const nextLayoutValue = setFieldSize(state.metaToEdit, state.metaForm.size, layoutsCopy);
-
-        if (nextLayoutValue.length > 0) {
-          set(draftState, layoutPathEdit, formatLayout(nextLayoutValue));
-        }
-
-        break;
-      }
-      case 'SUBMIT_SUCCEEDED': {
-        draftState.initialData = state.modifiedData;
-        break;
-      }
-      case 'UNSET_FIELD_TO_EDIT': {
-        draftState.metaToEdit = '';
-        draftState.metaForm = {};
-        break;
-      }
-      default:
-        return draftState;
-    }
-  });
-
-export default reducer;
-export { initialState };

package/admin/src/content-manager/pages/EditSettingsView/utils/createPossibleMainFieldsForModelsAndComponents.js

@@ -1,24 +0,0 @@
-const createPossibleMainFieldsForModelsAndComponents = (array) => {
-  return array.reduce((acc, current) => {
-    const attributes = current?.attributes ?? {};
-    const possibleMainFields = Object.keys(attributes).filter((attr) => {
-      return ![
-        'boolean',
-        'component',
-        'dynamiczone',
-        'json',
-        'media',
-        'password',
-        'relation',
-        'text',
-        'richtext',
-      ].includes(attributes?.[attr]?.type ?? '');
-    });
-
-    acc[current.uid] = possibleMainFields;
-
-    return acc;
-  }, {});
-};
-
-export default createPossibleMainFieldsForModelsAndComponents;

package/admin/src/content-manager/pages/EditSettingsView/utils/getInputProps.js

@@ -1,30 +0,0 @@
-import { getTrad } from '../../../utils';
-
-const getInputProps = (fieldName) => {
-  let type;
-
-  switch (fieldName) {
-    case 'description':
-    case 'label':
-    case 'placeholder':
-      type = 'text';
-      break;
-    case 'mainField':
-      type = 'select';
-      break;
-    case 'editable':
-      type = 'bool';
-      break;
-    default:
-      type = '';
-  }
-
-  const labelId =
-    fieldName === 'mainField'
-      ? getTrad('containers.SettingPage.editSettings.entry.title')
-      : getTrad(`form.Input.${fieldName}`);
-
-  return { type, label: { id: labelId } };
-};
-
-export default getInputProps;

package/admin/src/content-manager/pages/EditSettingsView/utils/index.js

@@ -1,2 +0,0 @@
-export { default as createPossibleMainFieldsForModelsAndComponents } from './createPossibleMainFieldsForModelsAndComponents';
-export { default as getInputProps } from './getInputProps';