@strapi/admin 4.0.0-next.12 → 4.0.0-next.16

package/admin/src/content-manager/components/SelectMany/ListItem.js

@@ -1,85 +1,98 @@
-import React, { memo, useEffect } from 'react';
+import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import { useDrag, useDrop } from 'react-dnd';
-import { getEmptyImage } from 'react-dnd-html5-backend';
-import { has } from 'lodash';
-import ItemTypes from '../../utils/ItemTypes';
+import styled from 'styled-components';
+import { pxToRem } from '@strapi/helper-plugin';
+import { useIntl } from 'react-intl';
+import { useLocation } from 'react-router-dom';
+import has from 'lodash/has';
+import isEmpty from 'lodash/isEmpty';
+import { IconButton } from '@strapi/parts/IconButton';
+import { Box } from '@strapi/parts/Box';
+import { Row } from '@strapi/parts/Row';
+import { Text } from '@strapi/parts/Text';
+import { Link } from '@strapi/parts/Link';
+import BaseMinus from '@strapi/icons/Minus';
+import { getTrad } from '../../utils';
 
-import { Li } from './components';
-import Relation from './Relation';
+const Minus = styled(IconButton)`
+  padding: 0;
+  border: 0;
+  width: 20px;
+  height: 20px;
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+`;
+const StyledBullet = styled.div`
+  width: ${pxToRem(6)};
+  height: ${pxToRem(6)};
+  margin-right: ${({ theme }) => theme.spaces[2]};
+  background: ${({ theme, isDraft }) => theme.colors[isDraft ? 'secondary700' : 'success200']};
+  border-radius: 50%;
+  cursor: pointer;
+`;
 
 function ListItem({
   data,
   displayNavigationLink,
-  findRelation,
   isDisabled,
   mainField,
-  moveRelation,
   onRemove,
   searchToPersist,
   targetModel,
 }) {
+  const { formatMessage } = useIntl();
   const to = `/content-manager/collectionType/${targetModel}/${data.id}`;
+  let cursor = 'pointer';
 
-  const hasDraftAndPublish = has(data, 'publishedAt');
-
-  const originalIndex = findRelation(data.id).index;
-  const [{ isDragging }, drag, preview] = useDrag({
-    type: ItemTypes.RELATION,
-    item: () => ({
-      id: data.id,
-      originalIndex,
-      data,
-      hasDraftAndPublish,
-      mainField,
-    }),
-    collect: monitor => ({
-      isDragging: monitor.isDragging(),
-    }),
-  });
-  const [, drop] = useDrop({
-    accept: ItemTypes.RELATION,
-    canDrop: () => false,
-    hover({ id: draggedId }) {
-      if (draggedId !== data.id) {
-        const { index: overIndex } = findRelation(data.id);
-        moveRelation(draggedId, overIndex);
-      }
-    },
-  });
+  if (isDisabled) {
+    cursor = 'not-allowed';
+  }
 
-  useEffect(() => {
-    preview(getEmptyImage(), { captureDraggingState: true });
-  }, [preview]);
+  if (!displayNavigationLink) {
+    cursor = 'default';
+  }
 
-  const opacity = isDragging ? 0.2 : 1;
+  const hasDraftAndPublish = has(data, 'publishedAt');
+  const isDraft = isEmpty(data.publishedAt);
+  const value = data[mainField.name];
+  const draftMessage = {
+    id: getTrad('components.Select.draft-info-title'),
+    defaultMessage: 'State: Draft',
+  };
+  const publishedMessage = {
+    id: getTrad('components.Select.publish-info-title'),
+    defaultMessage: 'State: Published',
+  };
+  const title = isDraft ? formatMessage(draftMessage) : formatMessage(publishedMessage);
+  const { pathname } = useLocation();
 
   return (
-    <Li
-      ref={node => {
-        if (!isDisabled) {
-          drag(drop(node));
-        }
-      }}
-      style={{ opacity }}
-    >
-      <Relation
-        displayNavigationLink={displayNavigationLink}
-        hasDraftAndPublish={hasDraftAndPublish}
-        mainField={mainField}
-        onRemove={onRemove}
-        data={data}
-        to={to}
-        isDisabled={isDisabled}
-        searchToPersist={searchToPersist}
-      />
-    </Li>
+    <Row as="li" alignItems="center">
+      <Row style={{ flex: 1 }} alignItems="center">
+        {hasDraftAndPublish && (
+          <Box paddingLeft={1} paddingRight={2}>
+            <StyledBullet isDraft={isDraft} title={title} />
+          </Box>
+        )}
+        {displayNavigationLink ? (
+          <Link
+            to={{ pathname: to, state: { from: pathname }, search: searchToPersist }}
+            style={{ textTransform: 'none' }}
+          >
+            {value || data.id}
+          </Link>
+        ) : (
+          <Text small>{value || data.id}</Text>
+        )}
+      </Row>
+      <Minus onClick={onRemove} icon={<BaseMinus />} label="Remove" style={{ cursor }} />
+    </Row>
   );
 }
 
 ListItem.defaultProps = {
-  findRelation: () => {},
-  moveRelation: () => {},
   onRemove: () => {},
   searchToPersist: null,
   targetModel: '',
@@ -88,7 +101,6 @@ ListItem.defaultProps = {
 ListItem.propTypes = {
   data: PropTypes.object.isRequired,
   displayNavigationLink: PropTypes.bool.isRequired,
-  findRelation: PropTypes.func,
   isDisabled: PropTypes.bool.isRequired,
   mainField: PropTypes.shape({
     name: PropTypes.string.isRequired,
@@ -96,7 +108,6 @@ ListItem.propTypes = {
       type: PropTypes.string.isRequired,
     }).isRequired,
   }).isRequired,
-  moveRelation: PropTypes.func,
   onRemove: PropTypes.func,
   searchToPersist: PropTypes.string,
   targetModel: PropTypes.string,

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

@@ -1,10 +1,10 @@
-import React, { memo, useCallback } from 'react';
+import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import { isEmpty } from 'lodash';
-import { useDrop } from 'react-dnd';
+import { useIntl } from 'react-intl';
+import isEmpty from 'lodash/isEmpty';
 import Select, { createFilter } from 'react-select';
-import ItemTypes from '../../utils/ItemTypes';
-import { ListShadow, ListWrapper } from './components';
+import { Box } from '@strapi/parts/Box';
+import { Stack } from '@strapi/parts/Stack';
 import ListItem from './ListItem';
 
 function SelectMany({
@@ -15,7 +15,6 @@ function SelectMany({
   name,
   isDisabled,
   isLoading,
-  move,
   onInputChange,
   onMenuClose,
   onMenuOpen,
@@ -28,27 +27,7 @@ function SelectMany({
   targetModel,
   value,
 }) {
-  const [, drop] = useDrop({ accept: ItemTypes.RELATION });
-  const findRelation = id => {
-    const relation = value.filter(c => {
-      return `${c.id}` === `${id}`;
-    })[0];
-
-    return {
-      relation,
-      index: value.indexOf(relation),
-    };
-  };
-
-  const moveRelation = useCallback(
-    (id, atIndex) => {
-      const { index } = findRelation(id);
-
-      move(index, atIndex, name);
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [value]
-  );
+  const { formatMessage } = useIntl();
 
   const filterConfig = {
     ignoreCase: true,
@@ -88,23 +67,22 @@ function SelectMany({
         onMenuClose={onMenuClose}
         onMenuOpen={onMenuOpen}
         onMenuScrollToBottom={onMenuScrollToBottom}
-        placeholder={placeholder}
+        placeholder={formatMessage(
+          placeholder || { id: 'components.Select.placeholder', defaultMessage: 'Select...' }
+        )}
         styles={styles}
         value={[]}
       />
-
-      <ListWrapper ref={drop}>
-        {!isEmpty(value) && (
-          <ul>
-            {value.map((data, index) => (
+      <Box paddingTop={3}>
+        <Stack as="ul" size={4} style={{ maxHeight: '128px', overflowY: 'auto' }}>
+          {value?.map((data, index) => {
+            return (
               <ListItem
                 key={data.id}
                 data={data}
                 displayNavigationLink={displayNavigationLink}
                 isDisabled={isDisabled}
-                findRelation={findRelation}
                 mainField={mainField}
-                moveRelation={moveRelation}
                 onRemove={() => {
                   if (!isDisabled) {
                     onRemove(`${name}.${index}`);
@@ -113,18 +91,17 @@ function SelectMany({
                 searchToPersist={searchToPersist}
                 targetModel={targetModel}
               />
-            ))}
-          </ul>
-        )}
-        {!isEmpty(value) && value.length > 4 && <ListShadow />}
-      </ListWrapper>
+            );
+          })}
+        </Stack>
+      </Box>
     </>
   );
 }
 
 SelectMany.defaultProps = {
   components: {},
-  move: () => {},
+  placeholder: null,
   searchToPersist: null,
   value: null,
 };
@@ -141,7 +118,6 @@ SelectMany.propTypes = {
       type: PropTypes.string.isRequired,
     }).isRequired,
   }).isRequired,
-  move: PropTypes.func,
   name: PropTypes.string.isRequired,
   onInputChange: PropTypes.func.isRequired,
   onMenuClose: PropTypes.func.isRequired,
@@ -149,7 +125,10 @@ SelectMany.propTypes = {
   onMenuScrollToBottom: PropTypes.func.isRequired,
   onRemove: PropTypes.func.isRequired,
   options: PropTypes.array.isRequired,
-  placeholder: PropTypes.node.isRequired,
+  placeholder: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    defaultMessage: PropTypes.string.isRequired,
+  }),
   searchToPersist: PropTypes.string,
   styles: PropTypes.object.isRequired,
   targetModel: PropTypes.string.isRequired,

package/admin/src/content-manager/components/SelectOne/SingleValue.js

@@ -1,46 +1,53 @@
 import React from 'react';
 import { components } from 'react-select';
 import PropTypes from 'prop-types';
-import { get, has, isEmpty } from 'lodash';
-import { Flex, Padded, Text } from '@buffetjs/core';
-import { RelationDPState } from '@strapi/helper-plugin';
-import { getDisplayedValue } from '../../utils';
+import styled from 'styled-components';
+import { useIntl } from 'react-intl';
+import { pxToRem } from '@strapi/helper-plugin';
+import { Row } from '@strapi/parts/Row';
+import { Text } from '@strapi/parts/Text';
+import get from 'lodash/get';
+import has from 'lodash/has';
+import isEmpty from 'lodash/isEmpty';
+import { getTrad } from '../../utils';
+
+const StyledBullet = styled.div`
+  width: ${pxToRem(6)};
+  height: ${pxToRem(6)};
+  margin-right: ${({ theme }) => theme.spaces[2]};
+  background: ${({ theme, isDraft }) => theme.colors[isDraft ? 'secondary700' : 'success200']};
+  border-radius: 50%;
+  cursor: pointer;
+`;
 
 const SingleValue = props => {
+  const { formatMessage } = useIntl();
   const Component = components.SingleValue;
   const hasDraftAndPublish = has(get(props, 'data.value'), 'publishedAt');
   const isDraft = isEmpty(get(props, 'data.value.publishedAt'));
-  const mainField = get(props, ['selectProps', 'mainField'], {});
-  const value = getDisplayedValue(mainField.schema.type, props.data.label, mainField.name);
 
   if (hasDraftAndPublish) {
+    const draftMessage = {
+      id: getTrad('components.Select.draft-info-title'),
+      defaultMessage: 'State: Draft',
+    };
+    const publishedMessage = {
+      id: getTrad('components.Select.publish-info-title'),
+      defaultMessage: 'State: Published',
+    };
+    const title = isDraft ? formatMessage(draftMessage) : formatMessage(publishedMessage);
+
     return (
       <Component {...props}>
-        <Padded left size="sm" right>
-          <Flex>
-            <RelationDPState
-              marginLeft="0"
-              marginTop="1px"
-              marginRight="10px"
-              isDraft={isDraft}
-              marginBottom="0"
-            />
-            <div>
-              <Text ellipsis>{value}</Text>
-            </div>
-          </Flex>
-        </Padded>
+        <Row>
+          <StyledBullet title={title} isDraft={isDraft} />
+          <Text ellipsis>{props.data.label || '-'}</Text>
+        </Row>
       </Component>
     );
   }
 
-  return (
-    <Component {...props}>
-      <Padded left right size="sm">
-        {value}
-      </Padded>
-    </Component>
-  );
+  return <Component {...props}>{props.data.label || '-'}</Component>;
 };
 
 SingleValue.propTypes = {

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

@@ -1,6 +1,8 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import { get, isNull } from 'lodash';
+import { useIntl } from 'react-intl';
+import get from 'lodash/get';
+import isNull from 'lodash/isNull';
 import Select from 'react-select';
 import SingleValue from './SingleValue';
 
@@ -20,9 +22,14 @@ function SelectOne({
   styles,
   value,
 }) {
+  const { formatMessage } = useIntl();
+
   return (
     <Select
-      components={{ ...components, SingleValue }}
+      components={{
+        ...components,
+        SingleValue,
+      }}
       id={name}
       isClearable
       isDisabled={isDisabled}
@@ -34,7 +41,9 @@ function SelectOne({
       onMenuClose={onMenuClose}
       onMenuOpen={onMenuOpen}
       onMenuScrollToBottom={onMenuScrollToBottom}
-      placeholder={placeholder}
+      placeholder={formatMessage(
+        placeholder || { id: 'components.Select.placeholder', defaultMessage: 'Select...' }
+      )}
       styles={styles}
       value={isNull(value) ? null : { label: get(value, [mainField.name], ''), value }}
     />
@@ -43,6 +52,7 @@ function SelectOne({
 
 SelectOne.defaultProps = {
   components: {},
+  placeholder: null,
   value: null,
 };
 
@@ -63,7 +73,10 @@ SelectOne.propTypes = {
   onMenuOpen: PropTypes.func.isRequired,
   onMenuScrollToBottom: PropTypes.func.isRequired,
   options: PropTypes.array.isRequired,
-  placeholder: PropTypes.node.isRequired,
+  placeholder: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    defaultMessage: PropTypes.string.isRequired,
+  }),
   styles: PropTypes.object.isRequired,
   value: PropTypes.object,
 };

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

@@ -1,13 +1,16 @@
 import React from 'react';
-import { Remove } from '@buffetjs/icons';
 import { components } from 'react-select';
+import CloseAlertIcon from '@strapi/icons/CloseAlertIcon';
+import IconBox from './IconBox';
 
 const ClearIndicator = props => {
   const Component = components.ClearIndicator;
 
   return (
     <Component {...props}>
-      <Remove width="11px" height="11px" fill="#9EA7B8" />
+      <IconBox as="button" type="button">
+        <CloseAlertIcon />
+      </IconBox>
     </Component>
   );
 };

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import DropdownIcon from '@strapi/icons/FilterDropdownIcon';
+import IconBox from './IconBox';
+
+export const CaretBox = styled(IconBox)`
+  display: flex;
+  background: none;
+  border: none;
+
+  svg {
+    width: ${6 / 16}rem;
+  }
+`;
+
+const DropdownIndicator = () => {
+  return (
+    <CaretBox as="button" type="button" paddingRight={3}>
+      <DropdownIcon />
+    </CaretBox>
+  );
+};
+
+export default DropdownIndicator;

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

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+import { Box } from '@strapi/parts/Box';
+
+export const IconBox = styled(Box)`
+  background: transparent;
+  border: none;
+  position: relative;
+  z-index: 1;
+
+  svg {
+    height: ${11 / 16}rem;
+    width: ${11 / 16}rem;
+  }
+
+  svg path {
+    fill: ${({ theme }) => theme.colors.neutral600};
+  }
+`;
+
+export default IconBox;

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+import { Box } from '@strapi/parts/Box';
+import { Row } from '@strapi/parts/Row';
+import { Text } from '@strapi/parts/Text';
+
+const LabelAction = styled(Box)`
+  svg path {
+    fill: ${({ theme }) => theme.colors.neutral500};
+  }
+`;
+
+const Label = ({ intlLabel, id, labelAction, link, name, numberOfEntries, isSingle }) => {
+  const { formatMessage } = useIntl();
+  const label = intlLabel?.id ? formatMessage(intlLabel) : name;
+
+  return (
+    <Row justifyContent="space-between">
+      <Row>
+        <Text textColor="neutral800" htmlFor={id || name} small bold as="label">
+          {label}
+          {!isSingle && <>&nbsp;({numberOfEntries})</>}
+        </Text>
+        {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
+      </Row>
+      {link}
+    </Row>
+  );
+};
+
+Label.defaultProps = {
+  id: undefined,
+  labelAction: undefined,
+  link: null,
+  numberOfEntries: 0,
+};
+
+Label.propTypes = {
+  id: PropTypes.string,
+  intlLabel: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    defaultMessage: PropTypes.string.isRequired,
+    values: PropTypes.object,
+  }).isRequired,
+  isSingle: PropTypes.bool.isRequired,
+  labelAction: PropTypes.element,
+  link: PropTypes.element,
+  name: PropTypes.string.isRequired,
+  numberOfEntries: PropTypes.number,
+};
+
+export default Label;

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

@@ -4,12 +4,18 @@ import { components } from 'react-select';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { get, has, isEmpty } from 'lodash';
-import { Flex, Text } from '@buffetjs/core';
-import { RelationDPState } from '@strapi/helper-plugin';
-import { getDisplayedValue, getTrad } from '../../utils';
+import { Row } from '@strapi/parts/Row';
+import { Text } from '@strapi/parts/Text';
+import { pxToRem } from '@strapi/helper-plugin';
+import { getTrad } from '../../utils';
 
-const TextGrow = styled(Text)`
-  flex-grow: 2;
+const StyledBullet = styled.div`
+  width: ${pxToRem(6)};
+  height: ${pxToRem(6)};
+  margin-right: ${({ theme }) => theme.spaces[2]};
+  background: ${({ theme, isDraft }) => theme.colors[isDraft ? 'secondary700' : 'success200']};
+  border-radius: 50%;
+  cursor: pointer;
 `;
 
 const Option = props => {
@@ -17,42 +23,31 @@ const Option = props => {
   const Component = components.Option;
   const hasDraftAndPublish = has(get(props, 'data.value'), 'publishedAt');
   const isDraft = isEmpty(get(props, 'data.value.publishedAt'));
-  const titleLabelID = isDraft
-    ? 'components.Select.draft-info-title'
-    : 'components.Select.publish-info-title';
-  const title = formatMessage({ id: getTrad(titleLabelID) });
-  const fontWeight = props.isFocused ? 'bold' : 'regular';
-  const mainField = get(props, ['selectProps', 'mainField'], {});
-  const value = getDisplayedValue(mainField.schema.type, props.label, mainField.name);
 
   if (hasDraftAndPublish) {
-    return (
-      <Component {...props}>
-        <Flex>
-          <RelationDPState
-            marginLeft="0"
-            marginTop="1px"
-            marginRight="10px"
-            isDraft={isDraft}
-            marginBottom="0"
-            title={title}
-          />
+    if (hasDraftAndPublish) {
+      const draftMessage = {
+        id: getTrad('components.Select.draft-info-title'),
+        defaultMessage: 'State: Draft',
+      };
+      const publishedMessage = {
+        id: getTrad('components.Select.publish-info-title'),
+        defaultMessage: 'State: Published',
+      };
+      const title = isDraft ? formatMessage(draftMessage) : formatMessage(publishedMessage);
 
-          <TextGrow ellipsis as="div" fontWeight={fontWeight} title={value}>
-            {value}&nbsp;
-          </TextGrow>
-        </Flex>
-      </Component>
-    );
+      return (
+        <Component {...props}>
+          <Row>
+            <StyledBullet title={title} isDraft={isDraft} />
+            <Text ellipsis>{props.label || '-'}</Text>
+          </Row>
+        </Component>
+      );
+    }
   }
 
-  return (
-    <Component {...props}>
-      <Text ellipsis fontWeight={fontWeight} title={value}>
-        {value}
-      </Text>
-    </Component>
-  );
+  return <Component {...props}>{props.label || '-'}</Component>;
 };
 
 Option.defaultProps = {