@strapi/admin 4.15.0-alpha.0 → 4.15.1

package/admin/src/content-manager/pages/ListSettingsView/components/SortDisplayedFields.js

@@ -1,115 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-
-import { Box, Flex, VisuallyHidden, Typography } from '@strapi/design-system';
-import { Menu } from '@strapi/design-system/v2';
-import { Plus } from '@strapi/icons';
-import { PropTypes } from 'prop-types';
-import { useIntl } from 'react-intl';
-
-import { getTrad } from '../../../utils';
-
-import DraggableCard from './DraggableCard';
-
-export const SortDisplayedFields = ({
-  displayedFields,
-  listRemainingFields,
-  metadatas,
-  onAddField,
-  onClickEditField,
-  onMoveField,
-  onRemoveField,
-}) => {
-  const { formatMessage } = useIntl();
-  const [isDraggingSibling, setIsDraggingSibling] = useState(false);
-  const [lastAction, setLastAction] = useState(null);
-  const scrollableContainerRef = useRef();
-
-  function handleAddField(...args) {
-    setLastAction('add');
-    onAddField(...args);
-  }
-
-  function handleRemoveField(...args) {
-    setLastAction('remove');
-    onRemoveField(...args);
-  }
-
-  useEffect(() => {
-    if (lastAction === 'add' && scrollableContainerRef?.current) {
-      scrollableContainerRef.current.scrollLeft = scrollableContainerRef.current.scrollWidth;
-    }
-  }, [displayedFields, lastAction]);
-
-  return (
-    <Flex alignItems="stretch" direction="column" gap={4}>
-      <Typography variant="delta" as="h2">
-        {formatMessage({
-          id: getTrad('containers.SettingPage.view'),
-          defaultMessage: 'View',
-        })}
-      </Typography>
-
-      <Flex padding={4} borderColor="neutral300" borderStyle="dashed" borderWidth="1px" hasRadius>
-        <Box flex="1" overflow="scroll hidden" ref={scrollableContainerRef}>
-          <Flex gap={3}>
-            {displayedFields.map((field, index) => (
-              <DraggableCard
-                key={field}
-                index={index}
-                isDraggingSibling={isDraggingSibling}
-                onMoveField={onMoveField}
-                onClickEditField={onClickEditField}
-                onRemoveField={(e) => handleRemoveField(e, index)}
-                name={field}
-                labelField={metadatas[field].list.label || field}
-                setIsDraggingSibling={setIsDraggingSibling}
-              />
-            ))}
-          </Flex>
-        </Box>
-
-        <Menu.Root>
-          <Menu.Trigger
-            paddingLeft={2}
-            paddingRight={2}
-            justifyContent="center"
-            endIcon={null}
-            disabled={listRemainingFields.length <= 0}
-            variant="tertiary"
-          >
-            <VisuallyHidden as="span">
-              {formatMessage({
-                id: getTrad('components.FieldSelect.label'),
-                defaultMessage: 'Add a field',
-              })}
-            </VisuallyHidden>
-            <Plus aria-hidden focusable={false} style={{ position: 'relative', top: 2 }} />
-          </Menu.Trigger>
-          <Menu.Content>
-            {listRemainingFields.map((field) => (
-              <Menu.Item key={field} onSelect={() => handleAddField(field)}>
-                {metadatas[field].list.label || field}
-              </Menu.Item>
-            ))}
-          </Menu.Content>
-        </Menu.Root>
-      </Flex>
-    </Flex>
-  );
-};
-
-SortDisplayedFields.propTypes = {
-  displayedFields: PropTypes.array.isRequired,
-  listRemainingFields: PropTypes.array.isRequired,
-  metadatas: PropTypes.objectOf(
-    PropTypes.shape({
-      list: PropTypes.shape({
-        label: PropTypes.string,
-      }),
-    })
-  ).isRequired,
-  onAddField: PropTypes.func.isRequired,
-  onClickEditField: PropTypes.func.isRequired,
-  onMoveField: PropTypes.func.isRequired,
-  onRemoveField: PropTypes.func.isRequired,
-};

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

@@ -1,8 +0,0 @@
-export const EXCLUDED_SORT_ATTRIBUTE_TYPES = [
-  'media',
-  'richtext',
-  'dynamiczone',
-  'relation',
-  'component',
-  'json',
-];

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

@@ -1,288 +0,0 @@
-import * as React from 'react';
-
-import {
-  Button,
-  ContentLayout,
-  Divider,
-  Flex,
-  HeaderLayout,
-  Layout,
-  Main,
-} from '@strapi/design-system';
-import { Link, useFetchClient, useNotification, useTracking } from '@strapi/helper-plugin';
-import { ArrowLeft, Check } from '@strapi/icons';
-import isEqual from 'lodash/isEqual';
-import upperFirst from 'lodash/upperFirst';
-import PropTypes from 'prop-types';
-import { stringify } from 'qs';
-import { useIntl } from 'react-intl';
-import { useMutation } from 'react-query';
-
-import ModelsContext from '../../contexts/ModelsContext';
-import { usePluginsQueryParams } from '../../hooks';
-import { checkIfAttributeIsDisplayable, getTrad } from '../../utils';
-
-import { EditFieldForm } from './components/EditFieldForm';
-import { Settings } from './components/Settings';
-import { SortDisplayedFields } from './components/SortDisplayedFields';
-import { EXCLUDED_SORT_ATTRIBUTE_TYPES } from './constants';
-import reducer, { initialState } from './reducer';
-
-export const ListSettingsView = ({ layout, slug }) => {
-  const { put } = useFetchClient();
-  const { formatMessage } = useIntl();
-  const { trackUsage } = useTracking();
-  const pluginsQueryParams = usePluginsQueryParams();
-  const toggleNotification = useNotification();
-  const { refetchData } = React.useContext(ModelsContext);
-  const [{ fieldToEdit, fieldForm, initialData, modifiedData }, dispatch] = React.useReducer(
-    reducer,
-    initialState,
-    () => ({
-      ...initialState,
-      initialData: layout,
-      modifiedData: layout,
-    })
-  );
-
-  const isModalFormOpen = Object.keys(fieldForm).length !== 0;
-
-  const { attributes, options } = layout;
-  const displayedFields = modifiedData.layouts.list;
-
-  const goBackUrl = () => {
-    const {
-      settings: { pageSize, defaultSortBy, defaultSortOrder },
-      kind,
-      uid,
-    } = initialData;
-    const sort = `${defaultSortBy}:${defaultSortOrder}`;
-    const goBackSearch = `${stringify(
-      {
-        page: 1,
-        pageSize,
-        sort,
-      },
-      { encode: false }
-    )}${pluginsQueryParams ? `&${pluginsQueryParams}` : ''}`;
-
-    return `/content-manager/${kind}/${uid}?${goBackSearch}`;
-  };
-
-  const handleChange = ({ target: { name, value } }) => {
-    dispatch({
-      type: 'ON_CHANGE',
-      keys: name,
-      value: name === 'settings.pageSize' ? parseInt(value, 10) : value,
-    });
-  };
-
-  const { isLoading: isSubmittingForm, mutate } = useMutation(
-    (body) => put(`/content-manager/content-types/${slug}/configuration`, body),
-    {
-      onSuccess() {
-        trackUsage('didEditListSettings');
-        refetchData();
-      },
-      onError() {
-        toggleNotification({
-          type: 'warning',
-          message: { id: 'notification.error' },
-        });
-      },
-    }
-  );
-
-  const handleAddField = (item) => {
-    dispatch({
-      type: 'ADD_FIELD',
-      item,
-    });
-  };
-
-  const handleRemoveField = (e, index) => {
-    e.stopPropagation();
-
-    if (displayedFields.length === 1) {
-      toggleNotification({
-        type: 'info',
-        message: { id: getTrad('notification.info.minimumFields') },
-      });
-    } else {
-      dispatch({
-        type: 'REMOVE_FIELD',
-        index,
-      });
-    }
-  };
-
-  const handleSubmit = (event) => {
-    event.preventDefault();
-
-    const { layouts, settings, metadatas } = modifiedData;
-
-    mutate({
-      layouts,
-      settings,
-      metadatas,
-    });
-
-    trackUsage('willSaveContentTypeLayout');
-  };
-
-  const handleClickEditField = (fieldToEdit) => {
-    dispatch({
-      type: 'SET_FIELD_TO_EDIT',
-      fieldToEdit,
-    });
-  };
-
-  const handleCloseModal = () => {
-    dispatch({
-      type: 'UNSET_FIELD_TO_EDIT',
-    });
-  };
-
-  const handleSubmitFieldEdit = (e) => {
-    e.preventDefault();
-    dispatch({
-      type: 'SUBMIT_FIELD_FORM',
-    });
-    handleCloseModal();
-  };
-
-  const handleChangeEditLabel = ({ target: { name, value } }) => {
-    dispatch({
-      type: 'ON_CHANGE_FIELD_METAS',
-      name,
-      value,
-    });
-  };
-
-  const listRemainingFields = Object.entries(attributes)
-    .filter(
-      ([name, attribute]) =>
-        checkIfAttributeIsDisplayable(attribute) && !displayedFields.includes(name)
-    )
-    .map(([name]) => name)
-    .sort();
-
-  const sortOptions = Object.entries(attributes)
-    .filter(([, attribute]) => !EXCLUDED_SORT_ATTRIBUTE_TYPES.includes(attribute.type))
-    .map(([name]) => ({
-      value: name,
-      label: layout.metadatas[name].list.label,
-    }));
-
-  const move = (originalIndex, atIndex) => {
-    dispatch({
-      type: 'MOVE_FIELD',
-      originalIndex,
-      atIndex,
-    });
-  };
-
-  return (
-    <Layout>
-      <Main aria-busy={isSubmittingForm}>
-        <form onSubmit={handleSubmit}>
-          <HeaderLayout
-            navigationAction={
-              <Link startIcon={<ArrowLeft />} to={goBackUrl} id="go-back">
-                {formatMessage({ id: 'global.back', defaultMessage: 'Back' })}
-              </Link>
-            }
-            primaryAction={
-              <Button
-                size="S"
-                startIcon={<Check />}
-                disabled={isEqual(modifiedData, initialData)}
-                type="submit"
-              >
-                {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}
-              </Button>
-            }
-            subtitle={formatMessage({
-              id: getTrad('components.SettingsViewWrapper.pluginHeader.description.list-settings'),
-              defaultMessage: 'Define the settings of the list view.',
-            })}
-            title={formatMessage(
-              {
-                id: getTrad('components.SettingsViewWrapper.pluginHeader.title'),
-                defaultMessage: 'Configure the view - {name}',
-              },
-              { name: upperFirst(modifiedData.info.displayName) }
-            )}
-          />
-          <ContentLayout>
-            <Flex
-              alignItems="stretch"
-              background="neutral0"
-              direction="column"
-              gap={6}
-              hasRadius
-              shadow="tableShadow"
-              paddingTop={6}
-              paddingBottom={6}
-              paddingLeft={7}
-              paddingRight={7}
-            >
-              <Settings
-                contentTypeOptions={options}
-                modifiedData={modifiedData}
-                onChange={handleChange}
-                sortOptions={sortOptions}
-              />
-
-              <Divider />
-
-              <SortDisplayedFields
-                listRemainingFields={listRemainingFields}
-                displayedFields={displayedFields}
-                onAddField={handleAddField}
-                onClickEditField={handleClickEditField}
-                onMoveField={move}
-                onRemoveField={handleRemoveField}
-                metadatas={modifiedData.metadatas}
-              />
-            </Flex>
-          </ContentLayout>
-        </form>
-
-        {isModalFormOpen && (
-          <EditFieldForm
-            attributes={attributes}
-            fieldForm={fieldForm}
-            fieldToEdit={fieldToEdit}
-            onChangeEditLabel={handleChangeEditLabel}
-            onCloseModal={handleCloseModal}
-            onSubmit={handleSubmitFieldEdit}
-            type={attributes?.[fieldToEdit]?.type ?? 'text'}
-          />
-        )}
-      </Main>
-    </Layout>
-  );
-};
-
-ListSettingsView.propTypes = {
-  layout: PropTypes.shape({
-    uid: PropTypes.string.isRequired,
-    settings: PropTypes.shape({
-      bulkable: PropTypes.bool,
-      defaultSortBy: PropTypes.string,
-      defaultSortOrder: PropTypes.string,
-      filterable: PropTypes.bool,
-      pageSize: PropTypes.number,
-      searchable: PropTypes.bool,
-    }).isRequired,
-    metadatas: PropTypes.object.isRequired,
-    options: PropTypes.object.isRequired,
-    attributes: PropTypes.objectOf(
-      PropTypes.shape({
-        type: PropTypes.string,
-      })
-    ).isRequired,
-  }).isRequired,
-  slug: PropTypes.string.isRequired,
-};

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

@@ -1,83 +0,0 @@
-import produce from 'immer'; // current
-import get from 'lodash/get';
-import set from 'lodash/set';
-
-import { arrayMoveItem } from '../../utils';
-
-const initialState = {
-  fieldForm: {},
-  fieldToEdit: '',
-  initialData: {},
-  modifiedData: {},
-};
-
-const reducer = (state = initialState, action) =>
-  // eslint-disable-next-line consistent-return
-  produce(state, (draftState) => {
-    const layoutFieldListPath = ['modifiedData', 'layouts', 'list'];
-    switch (action.type) {
-      case 'ADD_FIELD': {
-        const layoutFieldList = get(state, layoutFieldListPath, []);
-        set(draftState, layoutFieldListPath, [...layoutFieldList, action.item]);
-        break;
-      }
-      case 'MOVE_FIELD': {
-        const layoutFieldList = get(state, layoutFieldListPath, []);
-        const { originalIndex, atIndex } = action;
-        set(
-          draftState,
-          layoutFieldListPath,
-          arrayMoveItem(layoutFieldList, originalIndex, atIndex)
-        );
-        break;
-      }
-      case 'ON_CHANGE': {
-        set(draftState, ['modifiedData', ...action.keys.split('.')], action.value);
-        break;
-      }
-      case 'ON_CHANGE_FIELD_METAS': {
-        set(draftState, ['fieldForm', action.name], action.value);
-        break;
-      }
-      case 'REMOVE_FIELD': {
-        const layoutFieldList = get(state, layoutFieldListPath, []);
-        set(
-          draftState,
-          layoutFieldListPath,
-          layoutFieldList.filter((_, index) => action.index !== index)
-        );
-        break;
-      }
-      case 'SET_FIELD_TO_EDIT': {
-        const { fieldToEdit } = action;
-        draftState.fieldToEdit = fieldToEdit;
-        draftState.fieldForm.label = get(
-          draftState,
-          ['modifiedData', 'metadatas', fieldToEdit, 'list', 'label'],
-          ''
-        );
-        draftState.fieldForm.sortable = get(
-          draftState,
-          ['modifiedData', 'metadatas', fieldToEdit, 'list', 'sortable'],
-          ''
-        );
-        break;
-      }
-      case 'UNSET_FIELD_TO_EDIT': {
-        draftState.fieldForm = {};
-        draftState.fieldToEdit = '';
-        break;
-      }
-      case 'SUBMIT_FIELD_FORM': {
-        const fieldMetadataPath = ['modifiedData', 'metadatas', state.fieldToEdit, 'list'];
-        set(draftState, [...fieldMetadataPath, 'label'], state.fieldForm.label);
-        set(draftState, [...fieldMetadataPath, 'sortable'], state.fieldForm.sortable);
-        break;
-      }
-      default:
-        return draftState;
-    }
-  });
-
-export default reducer;
-export { initialState };

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

@@ -1,35 +0,0 @@
-import {
-  GET_DATA,
-  GET_DATA_SUCCEEDED,
-  ON_CHANGE_LIST_HEADERS,
-  ON_RESET_LIST_HEADERS,
-  RESET_PROPS,
-  SET_LIST_LAYOUT,
-} from './constants';
-
-export const getData = () => ({ type: GET_DATA });
-
-export const getDataSucceeded = (pagination, data) => ({
-  type: GET_DATA_SUCCEEDED,
-  pagination,
-  data,
-});
-
-export const onResetListHeaders = () => ({ type: ON_RESET_LIST_HEADERS });
-
-export function resetProps() {
-  return { type: RESET_PROPS };
-}
-
-export const setLayout = ({ components, contentType }) => {
-  const { layouts } = contentType;
-
-  return {
-    contentType,
-    components,
-    displayedHeaders: layouts.list,
-    type: SET_LIST_LAYOUT,
-  };
-};
-
-export const onChangeListHeaders = (target) => ({ type: ON_CHANGE_LIST_HEADERS, target });