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

package/admin/src/content-manager/components/DynamicTable/CellContent/Relation/index.js

@@ -0,0 +1,107 @@
+import React, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { IconButton } from '@strapi/parts/IconButton';
+import { Text } from '@strapi/parts/Text';
+import { Box } from '@strapi/parts/Box';
+import { Badge } from '@strapi/parts/Badge';
+import { Row } from '@strapi/parts/Row';
+import { Popover } from '@strapi/parts/Popover';
+import { SortIcon, stopPropagation } from '@strapi/helper-plugin';
+import styled from 'styled-components';
+import PopoverContent from './PopoverContent';
+import CellValue from '../CellValue';
+
+const SINGLE_RELATIONS = ['oneToOne', 'manyToOne'];
+
+const ActionWrapper = styled.span`
+  svg {
+    height: ${4 / 16}rem;
+  }
+`;
+
+const RelationCountBadge = styled(Badge)`
+  display: flex;
+  align-items: center;
+  height: ${20 / 16}rem;
+  width: ${16 / 16}rem;
+`;
+
+const Relation = ({ fieldSchema, metadatas, queryInfos, name, rowId, value }) => {
+  const { formatMessage } = useIntl();
+  const [visible, setVisible] = useState(false);
+  const buttonRef = useRef();
+
+  if (SINGLE_RELATIONS.includes(fieldSchema.relation)) {
+    return (
+      <Text textColor="neutral800">
+        <CellValue type={metadatas.mainField.schema.type} value={value[metadatas.mainField.name]} />
+      </Text>
+    );
+  }
+
+  const handleTogglePopover = () => setVisible(prev => !prev);
+
+  return (
+    <Row {...stopPropagation}>
+      <RelationCountBadge>{value.count}</RelationCountBadge>
+      <Box paddingLeft={2}>
+        <Text textColor="neutral800">
+          {formatMessage(
+            {
+              id: 'content-manager.containers.ListPage.items',
+              defaultMessage: '{number, plural, =0 {items} one {item} other {items}}',
+            },
+            { number: value.count }
+          )}
+        </Text>
+      </Box>
+      {value.count > 0 && (
+        <ActionWrapper>
+          <IconButton
+            onClick={handleTogglePopover}
+            ref={buttonRef}
+            noBorder
+            label={formatMessage({
+              id: 'content-manager.popover.display-relations.label',
+              defaultMessage: 'Display relations',
+            })}
+            icon={<SortIcon isUp={visible} />}
+          />
+          {visible && (
+            <Popover source={buttonRef} spacing={16} centered>
+              <PopoverContent
+                queryInfos={queryInfos}
+                name={name}
+                fieldSchema={metadatas.mainField}
+                targetModel={fieldSchema.targetModel}
+                rowId={rowId}
+                count={value.count}
+              />
+            </Popover>
+          )}
+        </ActionWrapper>
+      )}
+    </Row>
+  );
+};
+
+Relation.propTypes = {
+  fieldSchema: PropTypes.shape({
+    relation: PropTypes.string,
+    targetModel: PropTypes.string,
+    type: PropTypes.string.isRequired,
+  }).isRequired,
+  metadatas: PropTypes.shape({
+    mainField: PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      schema: PropTypes.shape({ type: PropTypes.string.isRequired }).isRequired,
+    }),
+  }).isRequired,
+  name: PropTypes.string.isRequired,
+  rowId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  queryInfos: PropTypes.shape({ endPoint: PropTypes.string.isRequired }).isRequired,
+  value: PropTypes.object.isRequired,
+};
+
+export default Relation;

package/admin/src/content-manager/components/DynamicTable/CellContent/index.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Text } from '@strapi/parts/Text';
+import Media from './Media';
+import MultipleMedias from './MultipleMedias';
+import Relation from './Relation';
+import CellValue from './CellValue';
+
+const TextMaxWidth = styled(Text)`
+  max-width: 300px;
+`;
+
+const CellContent = ({ content, fieldSchema, metadatas, name, queryInfos, rowId }) => {
+  if (content === null || content === undefined) {
+    return <Text textColor="neutral800">-</Text>;
+  }
+
+  if (fieldSchema.type === 'media' && !fieldSchema.multiple) {
+    return <Media {...content} />;
+  }
+
+  if (fieldSchema.type === 'media' && fieldSchema.multiple) {
+    return <MultipleMedias value={content} />;
+  }
+
+  if (fieldSchema.type === 'relation') {
+    return (
+      <Relation
+        fieldSchema={fieldSchema}
+        queryInfos={queryInfos}
+        metadatas={metadatas}
+        value={content}
+        name={name}
+        rowId={rowId}
+      />
+    );
+  }
+
+  return (
+    <TextMaxWidth ellipsis textColor="neutral800">
+      <CellValue type={fieldSchema.type} value={content} />
+    </TextMaxWidth>
+  );
+};
+
+CellContent.defaultProps = {
+  content: undefined,
+  queryInfos: undefined,
+};
+
+CellContent.propTypes = {
+  content: PropTypes.any,
+  fieldSchema: PropTypes.shape({ multiple: PropTypes.bool, type: PropTypes.string.isRequired })
+    .isRequired,
+  metadatas: PropTypes.object.isRequired,
+  name: PropTypes.string.isRequired,
+  rowId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  queryInfos: PropTypes.shape({ endPoint: PropTypes.string.isRequired }),
+};
+
+export default CellContent;

package/admin/src/content-manager/components/DynamicTable/ConfirmDialogDelete/index.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Dialog, DialogBody, DialogFooter } from '@strapi/parts/Dialog';
+import { Stack } from '@strapi/parts/Stack';
+import { Row } from '@strapi/parts/Row';
+import { Text } from '@strapi/parts/Text';
+import { Button } from '@strapi/parts/Button';
+import AlertWarningIcon from '@strapi/icons/AlertWarningIcon';
+import DeleteIcon from '@strapi/icons/DeleteIcon';
+import InjectionZoneList from '../../InjectionZoneList';
+
+const ConfirmDialogDelete = ({ isConfirmButtonLoading, isOpen, onToggleDialog, onConfirm }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Dialog
+      onClose={onToggleDialog}
+      title={formatMessage({
+        id: 'app.components.ConfirmDialog.title',
+        defaultMessage: 'Confirmation',
+      })}
+      labelledBy="confirmation"
+      describedBy="confirm-description"
+      isOpen={isOpen}
+    >
+      <DialogBody icon={<AlertWarningIcon />}>
+        <Stack size={2}>
+          <Row justifyContent="center">
+            <Text id="confirm-description">
+              {formatMessage({
+                id: 'components.popUpWarning.message',
+                defaultMessage: 'Are you sure you want to delete this?',
+              })}
+            </Text>
+          </Row>
+          <Row>
+            <InjectionZoneList area="contentManager.listView.deleteModalAdditionalInfos" />
+          </Row>
+        </Stack>
+      </DialogBody>
+      <DialogFooter
+        startAction={
+          <Button onClick={onToggleDialog} variant="tertiary">
+            {formatMessage({
+              id: 'app.components.Button.cancel',
+              defaultMessage: 'Cancel',
+            })}
+          </Button>
+        }
+        endAction={
+          <Button
+            onClick={onConfirm}
+            variant="danger-light"
+            startIcon={<DeleteIcon />}
+            id="confirm-delete"
+            loading={isConfirmButtonLoading}
+          >
+            {formatMessage({
+              id: 'app.components.Button.confirm',
+              defaultMessage: 'Confirm',
+            })}
+          </Button>
+        }
+      />
+    </Dialog>
+  );
+};
+
+ConfirmDialogDelete.propTypes = {
+  isConfirmButtonLoading: PropTypes.bool.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+  onToggleDialog: PropTypes.func.isRequired,
+};
+
+export default ConfirmDialogDelete;

package/admin/src/content-manager/components/DynamicTable/ConfirmDialogDeleteAll/index.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Dialog, DialogBody, DialogFooter } from '@strapi/parts/Dialog';
+import { Stack } from '@strapi/parts/Stack';
+import { Row } from '@strapi/parts/Row';
+import { Text } from '@strapi/parts/Text';
+import { Button } from '@strapi/parts/Button';
+import AlertWarningIcon from '@strapi/icons/AlertWarningIcon';
+import DeleteIcon from '@strapi/icons/DeleteIcon';
+import InjectionZoneList from '../../InjectionZoneList';
+import { getTrad } from '../../../utils';
+
+const ConfirmDialogDeleteAll = ({ isConfirmButtonLoading, isOpen, onToggleDialog, onConfirm }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Dialog
+      onClose={onToggleDialog}
+      title={formatMessage({
+        id: 'app.components.ConfirmDialog.title',
+        defaultMessage: 'Confirmation',
+      })}
+      labelledBy="confirmation"
+      describedBy="confirm-description"
+      isOpen={isOpen}
+    >
+      <DialogBody icon={<AlertWarningIcon />}>
+        <Stack size={2}>
+          <Row justifyContent="center">
+            <Text id="confirm-description">
+              {formatMessage({
+                id: getTrad('popUpWarning.bodyMessage.contentType.delete.all'),
+                defaultMessage: 'Are you sure you want to delete these entries?',
+              })}
+            </Text>
+          </Row>
+          <Row>
+            <InjectionZoneList area="contentManager.listView.deleteModalAdditionalInfos" />
+          </Row>
+        </Stack>
+      </DialogBody>
+      <DialogFooter
+        startAction={
+          <Button onClick={onToggleDialog} variant="tertiary">
+            {formatMessage({
+              id: 'app.components.Button.cancel',
+              defaultMessage: 'Cancel',
+            })}
+          </Button>
+        }
+        endAction={
+          <Button
+            onClick={onConfirm}
+            variant="danger-light"
+            startIcon={<DeleteIcon />}
+            id="confirm-delete"
+            loading={isConfirmButtonLoading}
+          >
+            {formatMessage({
+              id: 'app.components.Button.confirm',
+              defaultMessage: 'Confirm',
+            })}
+          </Button>
+        }
+      />
+    </Dialog>
+  );
+};
+
+ConfirmDialogDeleteAll.propTypes = {
+  isConfirmButtonLoading: PropTypes.bool.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+  onToggleDialog: PropTypes.func.isRequired,
+};
+
+export default ConfirmDialogDeleteAll;

package/admin/src/content-manager/components/DynamicTable/TableRows/index.js

@@ -0,0 +1,182 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { BaseCheckbox } from '@strapi/parts/BaseCheckbox';
+import { Box } from '@strapi/parts/Box';
+import { IconButton } from '@strapi/parts/IconButton';
+import { Tbody, Td, Tr } from '@strapi/parts/Table';
+import { Row } from '@strapi/parts/Row';
+import DeleteIcon from '@strapi/icons/DeleteIcon';
+import Duplicate from '@strapi/icons/Duplicate';
+import EditIcon from '@strapi/icons/EditIcon';
+import { useTracking, stopPropagation, onRowClick } from '@strapi/helper-plugin';
+import { useHistory } from 'react-router-dom';
+import { useIntl } from 'react-intl';
+import { usePluginsQueryParams } from '../../../hooks';
+import CellContent from '../CellContent';
+
+const TableRows = ({
+  canCreate,
+  canDelete,
+  headers,
+  entriesToDelete,
+  onClickDelete,
+  onSelectRow,
+  withMainAction,
+  withBulkActions,
+  rows,
+}) => {
+  const {
+    push,
+    location: { pathname },
+  } = useHistory();
+  const { formatMessage } = useIntl();
+
+  const { trackUsage } = useTracking();
+  const pluginsQueryParams = usePluginsQueryParams();
+
+  return (
+    <Tbody>
+      {rows.map((data, index) => {
+        const isChecked = entriesToDelete.findIndex(id => id === data.id) !== -1;
+        const itemLineText = formatMessage(
+          {
+            id: 'content-manager.components.DynamicTable.row-line',
+            defaultMessage: 'item line {number}',
+          },
+          { number: index }
+        );
+
+        return (
+          <Tr
+            key={data.id}
+            {...onRowClick({
+              fn: () => {
+                trackUsage('willEditEntryFromButton');
+                push({
+                  pathname: `${pathname}/${data.id}`,
+                  state: { from: pathname },
+                  search: pluginsQueryParams,
+                });
+              },
+              condition: withBulkActions,
+            })}
+          >
+            {withMainAction && (
+              <Td {...stopPropagation}>
+                <BaseCheckbox
+                  aria-label={formatMessage(
+                    {
+                      id: 'app.component.table.select.one-entry',
+                      defaultMessage: `Select {target}`,
+                    },
+                    { target: `${data.firstname} ${data.lastname}` }
+                  )}
+                  checked={isChecked}
+                  onChange={() => {
+                    onSelectRow({ name: data.id, value: !isChecked });
+                  }}
+                />
+              </Td>
+            )}
+            {headers.map(({ key, cellFormatter, name, ...rest }) => {
+              return (
+                <Td key={key}>
+                  {typeof cellFormatter === 'function' ? (
+                    cellFormatter(data, { key, name, ...rest })
+                  ) : (
+                    <CellContent content={data[name]} name={name} {...rest} rowId={data.id} />
+                  )}
+                </Td>
+              );
+            })}
+
+            {withBulkActions && (
+              <Td>
+                <Row justifyContent="end" {...stopPropagation}>
+                  <IconButton
+                    onClick={() => {
+                      trackUsage('willEditEntryFromButton');
+                      push({
+                        pathname: `${pathname}/${data.id}`,
+                        state: { from: pathname },
+                        search: pluginsQueryParams,
+                      });
+                    }}
+                    label={formatMessage(
+                      { id: 'app.component.table.edit', defaultMessage: 'Edit {target}' },
+                      { target: itemLineText }
+                    )}
+                    noBorder
+                    icon={<EditIcon />}
+                  />
+
+                  {canCreate && (
+                    <Box paddingLeft={1}>
+                      <IconButton
+                        onClick={() => {
+                          push({
+                            pathname: `${pathname}/create/clone${data.id}`,
+                            state: { from: pathname },
+                            search: pluginsQueryParams,
+                          });
+                        }}
+                        label={formatMessage(
+                          {
+                            id: 'app.component.table.duplicate',
+                            defaultMessage: 'Duplicate {target}',
+                          },
+                          { target: itemLineText }
+                        )}
+                        noBorder
+                        icon={<Duplicate />}
+                      />
+                    </Box>
+                  )}
+
+                  {canDelete && (
+                    <Box paddingLeft={1}>
+                      <IconButton
+                        onClick={() => onClickDelete(data.id)}
+                        label={formatMessage(
+                          { id: 'app.component.table.delete', defaultMessage: 'Delete {target}' },
+                          { target: itemLineText }
+                        )}
+                        noBorder
+                        icon={<DeleteIcon />}
+                      />
+                    </Box>
+                  )}
+                </Row>
+              </Td>
+            )}
+          </Tr>
+        );
+      })}
+    </Tbody>
+  );
+};
+
+TableRows.defaultProps = {
+  canCreate: false,
+  canDelete: false,
+  entriesToDelete: [],
+  onClickDelete: () => {},
+  onSelectRow: () => {},
+  rows: [],
+  withBulkActions: false,
+  withMainAction: false,
+};
+
+TableRows.propTypes = {
+  canCreate: PropTypes.bool,
+  canDelete: PropTypes.bool,
+  entriesToDelete: PropTypes.array,
+  headers: PropTypes.array.isRequired,
+  onClickDelete: PropTypes.func,
+  onSelectRow: PropTypes.func,
+  rows: PropTypes.array,
+  withBulkActions: PropTypes.bool,
+  withMainAction: PropTypes.bool,
+};
+
+export default TableRows;

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

@@ -0,0 +1,112 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { DynamicTable as Table, useStrapiApp } from '@strapi/helper-plugin';
+import { useSelector } from 'react-redux';
+import isEmpty from 'lodash/isEmpty';
+import { INJECT_COLUMN_IN_TABLE } from '../../../exposedHooks';
+import { selectDisplayedHeaders } from '../../pages/ListView/selectors';
+import { getTrad } from '../../utils';
+import State from '../State';
+import TableRows from './TableRows';
+import ConfirmDialogDeleteAll from './ConfirmDialogDeleteAll';
+import ConfirmDialogDelete from './ConfirmDialogDelete';
+
+const DynamicTable = ({
+  canCreate,
+  canDelete,
+  contentTypeName,
+  isBulkable,
+  isLoading,
+  onConfirmDelete,
+  onConfirmDeleteAll,
+  layout,
+  rows,
+}) => {
+  const { runHookWaterfall } = useStrapiApp();
+  const hasDraftAndPublish = layout.contentType.options.draftAndPublish || false;
+  const { formatMessage } = useIntl();
+  const displayedHeaders = useSelector(selectDisplayedHeaders);
+
+  const tableHeaders = useMemo(() => {
+    const headers = runHookWaterfall(INJECT_COLUMN_IN_TABLE, {
+      displayedHeaders,
+      layout,
+    });
+
+    if (!hasDraftAndPublish) {
+      return headers.displayedHeaders;
+    }
+
+    return [
+      ...headers.displayedHeaders,
+      {
+        key: '__published_at_temp_key__',
+        name: 'publishedAt',
+        fieldSchema: {
+          type: 'custom',
+        },
+        metadatas: {
+          label: formatMessage({ id: getTrad('containers.ListPage.table-headers.published_at') }),
+          searchable: false,
+          sortable: true,
+        },
+        cellFormatter: cellData => {
+          const isPublished = !isEmpty(cellData.publishedAt);
+
+          return <State isPublished={isPublished} />;
+        },
+      },
+    ];
+  }, [runHookWaterfall, displayedHeaders, layout, hasDraftAndPublish, formatMessage]);
+
+  return (
+    <Table
+      components={{ ConfirmDialogDelete, ConfirmDialogDeleteAll }}
+      contentType={contentTypeName}
+      isLoading={isLoading}
+      headers={tableHeaders}
+      onConfirmDelete={onConfirmDelete}
+      onConfirmDeleteAll={onConfirmDeleteAll}
+      rows={rows}
+      withBulkActions
+      withMainAction={canDelete && isBulkable}
+    >
+      <TableRows
+        canCreate={canCreate}
+        canDelete={canDelete}
+        headers={tableHeaders}
+        rows={rows}
+        withBulkActions
+        withMainAction={canDelete && isBulkable}
+      />
+    </Table>
+  );
+};
+
+DynamicTable.propTypes = {
+  canCreate: PropTypes.bool.isRequired,
+  canDelete: PropTypes.bool.isRequired,
+  contentTypeName: PropTypes.string.isRequired,
+  isBulkable: PropTypes.bool.isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  layout: PropTypes.exact({
+    components: PropTypes.object.isRequired,
+    contentType: PropTypes.shape({
+      attributes: PropTypes.object.isRequired,
+      metadatas: PropTypes.object.isRequired,
+      info: PropTypes.shape({ label: PropTypes.string.isRequired }).isRequired,
+      layouts: PropTypes.shape({
+        list: PropTypes.array.isRequired,
+        editRelations: PropTypes.array,
+      }).isRequired,
+      options: PropTypes.object.isRequired,
+      settings: PropTypes.object.isRequired,
+    }).isRequired,
+  }).isRequired,
+  onConfirmDelete: PropTypes.func.isRequired,
+  onConfirmDeleteAll: PropTypes.func.isRequired,
+  rows: PropTypes.array.isRequired,
+};
+
+export default DynamicTable;