@strapi/admin 4.4.0-rc.1 → 4.5.0-alpha.0

package/admin/src/content-manager/components/SelectWrapper/index.js

@@ -1,356 +0,0 @@
-import React, { useCallback, useState, useEffect, useMemo, memo } from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { useLocation } from 'react-router-dom';
-import { Stack } from '@strapi/design-system/Stack';
-import findIndex from 'lodash/findIndex';
-import get from 'lodash/get';
-import isArray from 'lodash/isArray';
-import isEmpty from 'lodash/isEmpty';
-import set from 'lodash/set';
-import {
-  NotAllowedInput,
-  useCMEditViewDataManager,
-  useQueryParams,
-  Link,
-} from '@strapi/helper-plugin';
-import { stringify } from 'qs';
-import axios from 'axios';
-import { axiosInstance } from '../../../core/utils';
-import { getTrad } from '../../utils';
-import Label from './Label';
-import SelectOne from '../SelectOne';
-import SelectMany from '../SelectMany';
-import Option from './Option';
-import { connect, select } from './utils';
-
-const initialPaginationState = {
-  contains: '',
-  limit: 20,
-  start: 0,
-};
-
-const buildParams = (query, paramsToKeep) => {
-  if (!paramsToKeep) {
-    return {};
-  }
-
-  return paramsToKeep.reduce((acc, current) => {
-    const value = get(query, current, null);
-
-    if (value) {
-      set(acc, current, value);
-    }
-
-    return acc;
-  }, {});
-};
-function SelectWrapper({
-  description,
-  editable,
-  labelAction,
-  intlLabel,
-  isCreatingEntry,
-  isFieldAllowed,
-  isFieldReadable,
-  mainField,
-  name,
-  relationType,
-  targetModel,
-  placeholder,
-  queryInfos,
-}) {
-  const { formatMessage } = useIntl();
-  const [{ query }] = useQueryParams();
-  // Disable the input in case of a polymorphic relation
-  const isMorph = useMemo(() => relationType.toLowerCase().includes('morph'), [relationType]);
-  const { addRelation, modifiedData, moveRelation, onChange, onRemoveRelation } =
-    useCMEditViewDataManager();
-  const { pathname } = useLocation();
-
-  const value = get(modifiedData, name, null);
-  const [state, setState] = useState(initialPaginationState);
-  const [options, setOptions] = useState([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isOpen, setIsOpen] = useState(false);
-
-  const filteredOptions = useMemo(() => {
-    return options.filter((option) => {
-      if (!isEmpty(value)) {
-        // SelectMany
-        if (Array.isArray(value)) {
-          return findIndex(value, (o) => o.id === option.value.id) === -1;
-        }
-
-        // SelectOne
-        return get(value, 'id', '') !== option.value.id;
-      }
-
-      return true;
-    });
-  }, [options, value]);
-
-  const { endPoint, containsKey, defaultParams, shouldDisplayRelationLink, paramsToKeep } =
-    queryInfos;
-
-  const isSingle = ['oneWay', 'oneToOne', 'manyToOne', 'oneToManyMorph', 'oneToOneMorph'].includes(
-    relationType
-  );
-
-  const idsToOmit = useMemo(() => {
-    if (!value) {
-      return [];
-    }
-
-    if (isSingle) {
-      return [value.id];
-    }
-
-    return value.map((val) => val.id);
-  }, [isSingle, value]);
-
-  const getData = useCallback(
-    async (source) => {
-      // Currently polymorphic relations are not handled
-      if (isMorph) {
-        setIsLoading(false);
-
-        return;
-      }
-
-      if (!isFieldAllowed) {
-        setIsLoading(false);
-
-        return;
-      }
-
-      setIsLoading(true);
-
-      const params = { limit: state.limit, ...defaultParams, start: state.start };
-
-      if (state.contains) {
-        params[`filters[${containsKey}][$contains]`] = state.contains;
-      }
-
-      try {
-        const { data } = await axiosInstance.post(
-          endPoint,
-          { idsToOmit },
-          { params, cancelToken: source.token }
-        );
-
-        const formattedData = data.map((obj) => {
-          return { value: obj, label: obj[mainField.name] };
-        });
-
-        setOptions((prevState) =>
-          prevState.concat(formattedData).filter((obj, index) => {
-            const objIndex = prevState.findIndex((el) => el.value.id === obj.value.id);
-
-            if (objIndex === -1) {
-              return true;
-            }
-
-            return prevState.findIndex((el) => el.value.id === obj.value.id) === index;
-          })
-        );
-        setIsLoading(false);
-      } catch (err) {
-        // Silent
-        setIsLoading(false);
-      }
-    },
-    [
-      containsKey,
-      defaultParams,
-      endPoint,
-      idsToOmit,
-      isFieldAllowed,
-      isMorph,
-      mainField.name,
-      state.contains,
-      state.limit,
-      state.start,
-    ]
-  );
-
-  useEffect(() => {
-    const CancelToken = axios.CancelToken;
-    const source = CancelToken.source();
-
-    if (isOpen) {
-      getData(source);
-    }
-
-    return () => source.cancel('Operation canceled by the user.');
-  }, [getData, isOpen]);
-
-  const handleInputChange = (inputValue, { action }) => {
-    if (action === 'input-change') {
-      setState((prevState) => {
-        if (prevState.contains === inputValue) {
-          return prevState;
-        }
-
-        return { ...prevState, contains: inputValue, start: 0 };
-      });
-    }
-
-    return inputValue;
-  };
-
-  const handleMenuScrollToBottom = () => {
-    setState((prevState) => ({
-      ...prevState,
-      start: prevState.start + 20,
-    }));
-  };
-
-  const handleMenuClose = () => {
-    setState(initialPaginationState);
-    setIsOpen(false);
-  };
-
-  const handleChange = (value) => {
-    onChange({ target: { name, value: value ? value.value : value } });
-  };
-
-  const handleAddRelation = (value) => {
-    if (!isEmpty(value)) {
-      addRelation({ target: { name, value } });
-    }
-  };
-
-  const handleMenuOpen = () => {
-    setIsOpen(true);
-  };
-
-  const to = `/content-manager/collectionType/${targetModel}/${value ? value.id : null}`;
-
-  const searchToPersist = stringify(buildParams(query, paramsToKeep), { encode: false });
-
-  let link = null;
-
-  if (isSingle && value && shouldDisplayRelationLink) {
-    link = (
-      <Link to={{ pathname: to, state: { from: pathname }, search: searchToPersist }}>
-        {formatMessage({ id: getTrad('containers.Edit.seeDetails'), defaultMessage: 'Details' })}
-      </Link>
-    );
-  }
-
-  const Component = isSingle ? SelectOne : SelectMany;
-  const associationsLength = isArray(value) ? value.length : 0;
-
-  const isDisabled = useMemo(() => {
-    if (isMorph) {
-      return true;
-    }
-
-    if (!isCreatingEntry) {
-      return (!isFieldAllowed && isFieldReadable) || !editable;
-    }
-
-    return !editable;
-  }, [isMorph, isCreatingEntry, editable, isFieldAllowed, isFieldReadable]);
-
-  if (!isFieldAllowed && isCreatingEntry) {
-    return <NotAllowedInput intlLabel={intlLabel} labelAction={labelAction} />;
-  }
-
-  if (!isCreatingEntry && !isFieldAllowed && !isFieldReadable) {
-    return <NotAllowedInput intlLabel={intlLabel} labelAction={labelAction} />;
-  }
-
-  return (
-    <Stack spacing={1}>
-      <Label
-        intlLabel={intlLabel}
-        isSingle={isSingle}
-        labelAction={labelAction}
-        link={link}
-        name={name}
-        numberOfEntries={associationsLength}
-      />
-      <Component
-        addRelation={handleAddRelation}
-        components={{
-          Option,
-        }}
-        displayNavigationLink={shouldDisplayRelationLink}
-        id={name}
-        isDisabled={isDisabled}
-        isLoading={isLoading}
-        isClearable
-        loadingMessage={() =>
-          formatMessage({
-            id: getTrad('DynamicTable.relation-loading'),
-            defaultMessage: 'Relations are loading',
-          })
-        }
-        mainField={mainField}
-        move={moveRelation}
-        name={name}
-        options={filteredOptions}
-        onChange={handleChange}
-        onInputChange={handleInputChange}
-        onMenuClose={handleMenuClose}
-        onMenuOpen={handleMenuOpen}
-        onMenuScrollToBottom={handleMenuScrollToBottom}
-        onRemove={onRemoveRelation}
-        placeholder={placeholder}
-        searchToPersist={searchToPersist}
-        targetModel={targetModel}
-        value={value}
-        description={description}
-      />
-    </Stack>
-  );
-}
-
-SelectWrapper.defaultProps = {
-  editable: true,
-  description: '',
-  labelAction: null,
-  isFieldAllowed: true,
-  placeholder: null,
-};
-
-SelectWrapper.propTypes = {
-  editable: PropTypes.bool,
-  description: PropTypes.string,
-  intlLabel: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-    values: PropTypes.object,
-  }).isRequired,
-  labelAction: PropTypes.element,
-  isCreatingEntry: PropTypes.bool.isRequired,
-  isFieldAllowed: PropTypes.bool,
-  isFieldReadable: PropTypes.bool.isRequired,
-  mainField: PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    schema: PropTypes.shape({
-      type: PropTypes.string.isRequired,
-    }).isRequired,
-  }).isRequired,
-  name: PropTypes.string.isRequired,
-  placeholder: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-    values: PropTypes.object,
-  }),
-  relationType: PropTypes.string.isRequired,
-  targetModel: PropTypes.string.isRequired,
-  queryInfos: PropTypes.shape({
-    containsKey: PropTypes.string.isRequired,
-    defaultParams: PropTypes.object,
-    endPoint: PropTypes.string.isRequired,
-    shouldDisplayRelationLink: PropTypes.bool.isRequired,
-    paramsToKeep: PropTypes.array,
-  }).isRequired,
-};
-
-const Memoized = memo(SelectWrapper);
-
-export default connect(Memoized, select);

package/admin/src/content-manager/pages/EditSettingsView/components/RelationalFieldButton.js

@@ -1,135 +0,0 @@
-import React, { useRef, useEffect } from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import { useDrop, useDrag } from 'react-dnd';
-import { getEmptyImage } from 'react-dnd-html5-backend';
-import { Flex } from '@strapi/design-system/Flex';
-import Drag from '@strapi/icons/Drag';
-import { ItemTypes } from '../../../utils';
-import FieldButtonContent from './FieldButtonContent';
-
-const CustomDragIcon = styled(Drag)`
-  height: ${12 / 16}rem;
-  width: ${12 / 16}rem;
-  path {
-    fill: ${({ theme }) => theme.colors.neutral600};
-  }
-`;
-const CustomFlex = styled(Flex)`
-  opacity: ${({ isDragging }) => (isDragging ? 0 : 1)};
-`;
-const DragButton = styled(Flex)`
-  cursor: all-scroll;
-  border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
-`;
-
-const RelationalFieldButton = ({
-  attribute,
-  onEditField,
-  onDeleteField,
-  children,
-  index,
-  name,
-  onMoveField,
-}) => {
-  const dragButtonRef = useRef();
-
-  const [, drop] = useDrop({
-    accept: ItemTypes.EDIT_RELATION,
-    hover(item) {
-      if (!dragButtonRef.current) {
-        return;
-      }
-      const dragIndex = item.index;
-      const hoverIndex = index;
-
-      // Don't replace items with themselves
-      if (dragIndex === hoverIndex) {
-        return;
-      }
-
-      onMoveField(dragIndex, hoverIndex);
-
-      item.index = hoverIndex;
-    },
-  });
-
-  const [{ isDragging }, drag, dragPreview] = useDrag({
-    type: ItemTypes.EDIT_RELATION,
-    item() {
-      return { index, labelField: children, name };
-    },
-    collect: (monitor) => ({
-      isDragging: monitor.isDragging(),
-    }),
-  });
-
-  useEffect(() => {
-    dragPreview(getEmptyImage(), { captureDraggingState: true });
-  }, [dragPreview]);
-
-  drag(drop(dragButtonRef));
-
-  const getHeight = () => {
-    const higherFields = ['json', 'text', 'file', 'media', 'component', 'richtext', 'dynamiczone'];
-
-    if (attribute && higherFields.includes(attribute.type)) {
-      return `${74 / 16}rem`;
-    }
-
-    return `${32 / 16}rem`;
-  };
-
-  return (
-    <CustomFlex
-      width="100%"
-      borderColor="neutral150"
-      hasRadius
-      background="neutral100"
-      minHeight={getHeight()}
-      alignItems="stretch"
-      isDragging={isDragging}
-    >
-      <DragButton
-        as="span"
-        type="button"
-        ref={dragButtonRef}
-        onClick={(e) => e.stopPropagation()}
-        alignItems="center"
-        paddingLeft={3}
-        paddingRight={3}
-        // Disable the keyboard navigation since the drag n drop isn't accessible with the keyboard for the moment
-        tabIndex={-1}
-      >
-        <CustomDragIcon />
-      </DragButton>
-      <FieldButtonContent
-        attribute={attribute}
-        onEditField={onEditField}
-        onDeleteField={onDeleteField}
-      >
-        {children}
-      </FieldButtonContent>
-    </CustomFlex>
-  );
-};
-
-RelationalFieldButton.defaultProps = {
-  attribute: undefined,
-};
-
-RelationalFieldButton.propTypes = {
-  attribute: PropTypes.shape({
-    components: PropTypes.array,
-    component: PropTypes.string,
-    type: PropTypes.string,
-  }),
-  onEditField: PropTypes.func.isRequired,
-  onDeleteField: PropTypes.func.isRequired,
-  children: PropTypes.string.isRequired,
-  index: PropTypes.number.isRequired,
-  name: PropTypes.string.isRequired,
-  onMoveField: PropTypes.func.isRequired,
-};
-
-export default RelationalFieldButton;

package/admin/src/content-manager/pages/EditSettingsView/components/RelationalFields.js

@@ -1,103 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import get from 'lodash/get';
-import { useIntl } from 'react-intl';
-import { Button } from '@strapi/design-system/Button';
-import { Box } from '@strapi/design-system/Box';
-import { Typography } from '@strapi/design-system/Typography';
-import { Stack } from '@strapi/design-system/Stack';
-import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu';
-import Plus from '@strapi/icons/Plus';
-import { getTrad } from '../../../utils';
-import { useLayoutDnd } from '../../../hooks';
-import RelationalFieldButton from './RelationalFieldButton';
-
-const RelationalFields = ({
-  relationsLayout,
-  editRelationsLayoutRemainingFields,
-  onRemoveField,
-  onAddField,
-}) => {
-  const { formatMessage } = useIntl();
-  const { setEditFieldToSelect, modifiedData, onMoveRelation } = useLayoutDnd();
-
-  return (
-    <Stack spacing={4}>
-      <div>
-        <Box>
-          <Typography fontWeight="bold">
-            {formatMessage({
-              id: getTrad('containers.SettingPage.relations'),
-              defaultMessage: 'Relational fields',
-            })}
-          </Typography>
-        </Box>
-        <Box>
-          <Typography variant="pi" textColor="neutral600">
-            {formatMessage({
-              id: 'containers.SettingPage.editSettings.description',
-              defaultMessage: 'Drag & drop the fields to build the layout',
-            })}
-          </Typography>
-        </Box>
-      </div>
-      <Box padding={4} hasRadius borderStyle="dashed" borderWidth="1px" borderColor="neutral300">
-        <Stack spacing={2}>
-          {relationsLayout.map((relationName, index) => {
-            const relationLabel = get(
-              modifiedData,
-              ['metadatas', relationName, 'edit', 'label'],
-              ''
-            );
-
-            return (
-              <RelationalFieldButton
-                onEditField={() => setEditFieldToSelect(relationName)}
-                onDeleteField={() => onRemoveField(index)}
-                key={relationName}
-                index={index}
-                name={relationName}
-                onMoveField={onMoveRelation}
-              >
-                {relationLabel || relationName}
-              </RelationalFieldButton>
-            );
-          })}
-          <SimpleMenu
-            id="label"
-            label={formatMessage({
-              id: 'containers.SettingPage.add.relational-field',
-              defaultMessage: 'Insert another relational field',
-            })}
-            data-testid="add-relation"
-            as={Button}
-            fullWidth
-            startIcon={<Plus />}
-            endIcon={null}
-            variant="secondary"
-            disabled={editRelationsLayoutRemainingFields.length === 0}
-          >
-            {editRelationsLayoutRemainingFields.map((remainingRelation) => (
-              <MenuItem
-                id={`menuItem-${remainingRelation}`}
-                key={`menuItem-${remainingRelation}`}
-                onClick={() => onAddField(remainingRelation)}
-              >
-                {remainingRelation}
-              </MenuItem>
-            ))}
-          </SimpleMenu>
-        </Stack>
-      </Box>
-    </Stack>
-  );
-};
-
-RelationalFields.propTypes = {
-  relationsLayout: PropTypes.array.isRequired,
-  editRelationsLayoutRemainingFields: PropTypes.array.isRequired,
-  onRemoveField: PropTypes.func.isRequired,
-  onAddField: PropTypes.func.isRequired,
-};
-
-export default RelationalFields;

package/admin/src/content-manager/pages/EditView/Header/utils/getDraftRelations.js

@@ -1,62 +0,0 @@
-import { get, has, isEmpty, isNil } from 'lodash';
-
-const getDraftRelations = (data, ctSchema, components) => {
-  const getDraftRelationsCount = (data, schema) =>
-    Object.keys(data).reduce((acc, current) => {
-      const type = get(schema, ['attributes', current, 'type'], 'string');
-      const relationType = get(schema, ['attributes', current, 'relationType'], '');
-      const isMorph = relationType.toLowerCase().includes('morph');
-      const oneWayTypes = ['oneWay', 'oneToOne', 'manyToOne'];
-      const currentData = data[current];
-
-      if (isNil(currentData)) {
-        return acc;
-      }
-
-      if (type === 'dynamiczone') {
-        currentData.forEach((curr) => {
-          const compoSchema = get(components, curr.__component, {});
-
-          acc += getDraftRelationsCount(curr, compoSchema);
-        });
-      }
-
-      if (type === 'component') {
-        const isRepeatable = get(schema, ['attributes', current, 'repeatable'], false);
-        const compoUID = get(schema, ['attributes', current, 'component'], '');
-        const compoSchema = get(components, compoUID, {});
-
-        if (isRepeatable) {
-          currentData.forEach((curr) => {
-            acc += getDraftRelationsCount(curr, compoSchema);
-          });
-        } else {
-          acc += getDraftRelationsCount(currentData, compoSchema);
-        }
-      }
-
-      if (type === 'relation' && !isMorph) {
-        if (oneWayTypes.includes(relationType)) {
-          const hasDraftAndPublish = has(currentData, 'publishedAt');
-
-          if (hasDraftAndPublish && isEmpty(currentData.publishedAt)) {
-            acc += 1;
-          }
-        } else {
-          currentData.forEach((value) => {
-            if (has(value, 'publishedAt') && isEmpty(value.publishedAt)) {
-              acc += 1;
-            }
-          });
-        }
-      }
-
-      return acc;
-    }, 0);
-
-  const count = getDraftRelationsCount(data, ctSchema, components);
-
-  return count;
-};
-
-export default getDraftRelations;

package/admin/src/contexts/ApiTokenPermissions/index.js

@@ -1,24 +0,0 @@
-import React, { createContext, useContext } from 'react';
-import PropTypes from 'prop-types';
-
-const ApiTokenPermissionsContext = createContext({});
-
-const ApiTokenPermissionsContextProvider = ({ children, ...rest }) => {
-  return (
-    <ApiTokenPermissionsContext.Provider value={rest}>
-      {children}
-    </ApiTokenPermissionsContext.Provider>
-  );
-};
-
-const useApiTokenPermissionsContext = () => useContext(ApiTokenPermissionsContext);
-
-ApiTokenPermissionsContextProvider.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export {
-  ApiTokenPermissionsContext,
-  ApiTokenPermissionsContextProvider,
-  useApiTokenPermissionsContext,
-};