@strapi/admin 4.15.0-alpha.0 → 4.15.1

package/admin/src/content-manager/hooks/useSyncRbac/reducer.js

@@ -1,33 +0,0 @@
-/**
- *
- * RBACManager reducer
- */
-
-import produce from 'immer';
-
-import { RESET_PERMISSIONS, SET_PERMISSIONS } from './constants';
-
-export const initialState = {
-  permissions: null,
-};
-
-const rbacManagerReducer = (state = initialState, action) =>
-  // eslint-disable-next-line consistent-return
-  produce(state, (draftState) => {
-    switch (action.type) {
-      case SET_PERMISSIONS: {
-        draftState.permissions = Object.entries(action.permissions).reduce((acc, current) => {
-          return [...acc, ...current[1]];
-        }, []);
-        break;
-      }
-      case RESET_PERMISSIONS: {
-        draftState.permissions = null;
-        break;
-      }
-      default:
-        return draftState;
-    }
-  });
-
-export default rbacManagerReducer;

package/admin/src/content-manager/hooks/useSyncRbac/selectors.js

@@ -1,4 +0,0 @@
-export const selectPermissions = (state) => state['content-manager_rbacManager'].permissions;
-
-export const selectCollectionTypePermissions = (state) =>
-  state.rbacProvider.collectionTypesRelatedPermissions;

package/admin/src/content-manager/hooks/useWysiwyg.js

@@ -1,7 +0,0 @@
-import { useContext } from 'react';
-
-import WysiwygContext from '../contexts/Wysiwyg';
-
-const useWysiwyg = () => useContext(WysiwygContext);
-
-export default useWysiwyg;

package/admin/src/content-manager/pages/App/LeftMenu/index.js

@@ -1,142 +0,0 @@
-/**
- *
- * LeftMenu
- *
- */
-
-import React, { useMemo, useState } from 'react';
-
-import {
-  SubNav,
-  SubNavHeader,
-  SubNavLink,
-  SubNavSection,
-  SubNavSections,
-} from '@strapi/design-system/v2';
-import { useCollator, useFilter } from '@strapi/helper-plugin';
-import { useIntl } from 'react-intl';
-import { shallowEqual, useSelector } from 'react-redux';
-import { NavLink } from 'react-router-dom';
-
-import getTrad from '../../../utils/getTrad';
-import { makeSelectModelLinks } from '../selectors';
-
-const LeftMenu = () => {
-  const [search, setSearch] = useState('');
-  const { formatMessage, locale } = useIntl();
-  const modelLinksSelector = useMemo(makeSelectModelLinks, []);
-  const { collectionTypeLinks, singleTypeLinks } = useSelector(modelLinksSelector, shallowEqual);
-
-  const { startsWith } = useFilter(locale, {
-    sensitivity: 'base',
-  });
-
-  /**
-   * @type {Intl.Collator}
-   */
-  const formatter = useCollator(locale, {
-    sensitivity: 'base',
-  });
-
-  const menu = useMemo(
-    () =>
-      [
-        {
-          id: 'collectionTypes',
-          title: {
-            id: getTrad('components.LeftMenu.collection-types'),
-            defaultMessage: 'Collection Types',
-          },
-          searchable: true,
-          links: collectionTypeLinks,
-        },
-        {
-          id: 'singleTypes',
-          title: {
-            id: getTrad('components.LeftMenu.single-types'),
-            defaultMessage: 'Single Types',
-          },
-          searchable: true,
-          links: singleTypeLinks,
-        },
-      ].map((section) => ({
-        ...section,
-        links: section.links
-          /**
-           * Filter by the search value
-           */
-          .filter((link) => startsWith(link.title, search))
-          /**
-           * Sort correctly using the language
-           */
-          .sort((a, b) => formatter.compare(a.title, b.title))
-          /**
-           * Apply the formated strings to the links from react-intl
-           */
-          .map((link) => {
-            return {
-              ...link,
-              title: formatMessage({ id: link.title, defaultMessage: link.title }),
-            };
-          }),
-      })),
-    [collectionTypeLinks, search, singleTypeLinks, startsWith, formatMessage, formatter]
-  );
-
-  const handleClear = () => {
-    setSearch('');
-  };
-
-  const handleChangeSearch = ({ target: { value } }) => {
-    setSearch(value);
-  };
-
-  const label = formatMessage({
-    id: getTrad('header.name'),
-    defaultMessage: 'Content',
-  });
-
-  return (
-    <SubNav ariaLabel={label}>
-      <SubNavHeader
-        label={label}
-        searchable
-        value={search}
-        onChange={handleChangeSearch}
-        onClear={handleClear}
-        searchLabel={formatMessage({
-          id: 'content-manager.components.LeftMenu.Search.label',
-          defaultMessage: 'Search for a content type',
-        })}
-      />
-      <SubNavSections>
-        {menu.map((section) => {
-          const label = formatMessage(
-            { id: section.title.id, defaultMessage: section.title.defaultMessage },
-            section.title.values
-          );
-
-          return (
-            <SubNavSection
-              key={section.id}
-              label={label}
-              badgeLabel={section.links.length.toString()}
-            >
-              {section.links.map((link) => {
-                const search = link.search ? `?${link.search}` : '';
-
-                return (
-                  <SubNavLink as={NavLink} key={link.uid} to={`${link.to}${search}`}>
-                    {link.title}
-                  </SubNavLink>
-                );
-              })}
-            </SubNavSection>
-          );
-        })}
-      </SubNavSections>
-    </SubNav>
-  );
-};
-
-export default LeftMenu;

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

@@ -1,24 +0,0 @@
-import { GET_INIT_DATA, RESET_INIT_DATA, SET_INIT_DATA } from './constants';
-
-export const getInitData = () => ({
-  type: GET_INIT_DATA,
-});
-
-export const resetInitData = () => ({ type: RESET_INIT_DATA });
-
-export const setInitData = ({
-  authorizedCollectionTypeLinks,
-  authorizedSingleTypeLinks,
-  contentTypeSchemas,
-  components,
-  fieldSizes,
-}) => ({
-  type: SET_INIT_DATA,
-  data: {
-    authorizedCollectionTypeLinks,
-    authorizedSingleTypeLinks,
-    components,
-    contentTypeSchemas,
-    fieldSizes,
-  },
-});

package/admin/src/content-manager/pages/App/components/CardDragPreview.js

@@ -1,95 +0,0 @@
-import React from 'react';
-
-import { Flex, Typography } from '@strapi/design-system';
-import { pxToRem } from '@strapi/helper-plugin';
-import { Cross, Drag, Pencil } from '@strapi/icons';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-
-const ActionBox = styled(Flex)`
-  height: ${({ theme }) => theme.spaces[7]};
-
-  &:last-child {
-    padding: 0 ${({ theme }) => theme.spaces[3]};
-  }
-`;
-
-const DragButton = styled(ActionBox)`
-  border-right: 1px solid
-    ${({ theme, isSibling }) => (isSibling ? theme.colors.neutral150 : theme.colors.primary200)};
-
-  svg {
-    width: ${12 / 16}rem;
-    height: ${12 / 16}rem;
-  }
-`;
-
-const FieldContainer = styled(Flex)`
-  border: 1px solid
-    ${({ theme, isSibling }) => (isSibling ? theme.colors.neutral150 : theme.colors.primary200)};
-
-  svg {
-    width: ${10 / 16}rem;
-    height: ${10 / 16}rem;
-
-    path {
-      fill: ${({ theme, isSibling }) => (isSibling ? undefined : theme.colors.primary600)};
-    }
-  }
-`;
-
-const TypographyMaxWidth = styled(Typography)`
-  max-width: ${72 / 16}rem;
-`;
-
-export function CardDragPreview({ labelField, transparent, isSibling }) {
-  return (
-    <FieldContainer
-      background={isSibling ? 'neutral100' : 'primary100'}
-      display="inline-flex"
-      gap={3}
-      hasRadius
-      justifyContent="space-between"
-      transparent={transparent}
-      isSibling={isSibling}
-      max-height={pxToRem(32)}
-      maxWidth="min-content"
-      opacity={transparent ? 0 : 1}
-    >
-      <Flex gap={3}>
-        <DragButton alignItems="center" cursor="all-scroll" padding={3}>
-          <Drag />
-        </DragButton>
-
-        <TypographyMaxWidth
-          textColor={isSibling ? undefined : 'primary600'}
-          fontWeight="bold"
-          ellipsis
-        >
-          {labelField}
-        </TypographyMaxWidth>
-      </Flex>
-
-      <Flex>
-        <ActionBox alignItems="center">
-          <Pencil />
-        </ActionBox>
-
-        <ActionBox alignItems="center">
-          <Cross />
-        </ActionBox>
-      </Flex>
-    </FieldContainer>
-  );
-}
-
-CardDragPreview.defaultProps = {
-  isSibling: false,
-  transparent: false,
-};
-
-CardDragPreview.propTypes = {
-  isSibling: PropTypes.bool,
-  labelField: PropTypes.string.isRequired,
-  transparent: PropTypes.bool,
-};

package/admin/src/content-manager/pages/App/components/ComponentDragPreview.js

@@ -1,76 +0,0 @@
-import React from 'react';
-
-import { Flex, IconButton, Typography } from '@strapi/design-system';
-import { pxToRem } from '@strapi/helper-plugin';
-import { CarretDown, Drag, Trash } from '@strapi/icons';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-
-const DropdownIconWrapper = styled(Flex)`
-  border-radius: 50%;
-
-  svg {
-    height: ${6 / 16}rem;
-    width: ${11 / 16}rem;
-    > path {
-      fill: ${({ theme }) => theme.colors.neutral600};
-    }
-  }
-`;
-
-// TODO: we shouldn't have to reset a whole button
-const ToggleButton = styled.button`
-  border: none;
-  background: transparent;
-  display: block;
-  width: 100%;
-  text-align: unset;
-  padding: 0;
-`;
-
-export function ComponentDragPreview({ displayedValue }) {
-  return (
-    <Flex
-      background="neutral0"
-      borderColor="neutral200"
-      justifyContent="space-between"
-      gap={3}
-      padding={3}
-      width={pxToRem(300)}
-    >
-      <ToggleButton type="button">
-        <Flex gap={6}>
-          <DropdownIconWrapper
-            alignItems="center"
-            justifyContent="center"
-            background="neutral200"
-            height={pxToRem(32)}
-            width={pxToRem(32)}
-          >
-            <CarretDown />
-          </DropdownIconWrapper>
-
-          <Flex maxWidth={pxToRem(150)}>
-            <Typography textColor="neutral700" ellipsis>
-              {displayedValue}
-            </Typography>
-          </Flex>
-        </Flex>
-      </ToggleButton>
-
-      <Flex gap={2}>
-        <IconButton noBorder>
-          <Trash />
-        </IconButton>
-
-        <IconButton noBorder>
-          <Drag />
-        </IconButton>
-      </Flex>
-    </Flex>
-  );
-}
-
-ComponentDragPreview.propTypes = {
-  displayedValue: PropTypes.string.isRequired,
-};

package/admin/src/content-manager/pages/App/components/RelationDragPreview.js

@@ -1,81 +0,0 @@
-import * as React from 'react';
-
-import { Box, Flex, Icon, IconButton, Status, Typography } from '@strapi/design-system';
-import { Cross, Drag } from '@strapi/icons';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-
-import { DisconnectButton, LinkEllipsis } from '../../../components/RelationInput';
-import {
-  ChildrenWrapper,
-  FlexWrapper,
-} from '../../../components/RelationInput/components/RelationItem';
-import { PUBLICATION_STATES } from '../../../components/RelationInputDataManager/constants';
-import { getTrad } from '../../../utils';
-
-export const RelationDragPreview = ({ status, displayedValue, width }) => {
-  const { formatMessage } = useIntl();
-
-  const stateMessage = {
-    [PUBLICATION_STATES.DRAFT]: formatMessage({
-      id: getTrad('relation.publicationState.draft'),
-      defaultMessage: 'Draft',
-    }),
-
-    [PUBLICATION_STATES.PUBLISHED]: formatMessage({
-      id: getTrad('relation.publicationState.published'),
-      defaultMessage: 'Published',
-    }),
-  };
-
-  const statusColor = status === PUBLICATION_STATES.DRAFT ? 'secondary' : 'success';
-
-  return (
-    <Box style={{ width }}>
-      <Flex
-        paddingTop={2}
-        paddingBottom={2}
-        paddingLeft={2}
-        paddingRight={4}
-        hasRadius
-        borderSize={1}
-        background="neutral0"
-        borderColor="neutral200"
-        justifyContent="space-between"
-      >
-        <FlexWrapper gap={1}>
-          <IconButton noBorder>
-            <Drag />
-          </IconButton>
-          <ChildrenWrapper maxWidth="100%" justifyContent="space-between">
-            <Box minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}>
-              <LinkEllipsis>
-                <Typography textColor="primary600" ellipsis>
-                  {displayedValue}
-                </Typography>
-              </LinkEllipsis>
-            </Box>
-            {status && (
-              <Status variant={statusColor} showBullet={false} size="S">
-                <Typography fontWeight="bold" textColor={`${statusColor}700`}>
-                  {stateMessage[status]}
-                </Typography>
-              </Status>
-            )}
-          </ChildrenWrapper>
-        </FlexWrapper>
-        <Box paddingLeft={4}>
-          <DisconnectButton type="button">
-            <Icon width="12px" as={Cross} />
-          </DisconnectButton>
-        </Box>
-      </Flex>
-    </Box>
-  );
-};
-
-RelationDragPreview.propTypes = {
-  status: PropTypes.string.isRequired,
-  displayedValue: PropTypes.string.isRequired,
-  width: PropTypes.number.isRequired,
-};

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

@@ -1,3 +0,0 @@
-export const GET_INIT_DATA = 'ContentManager/App/GET_INIT_DATA';
-export const RESET_INIT_DATA = 'ContentManager/App/RESET_INIT_DATA';
-export const SET_INIT_DATA = 'ContentManager/App/SET_INIT_DATA';

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

@@ -1,166 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-
-import { HeaderLayout, Layout, Main } from '@strapi/design-system';
-import {
-  AnErrorOccurred,
-  CheckPagePermissions,
-  LoadingIndicatorPage,
-  useGuidedTour,
-} from '@strapi/helper-plugin';
-import sortBy from 'lodash/sortBy';
-import { Helmet } from 'react-helmet';
-import { useIntl } from 'react-intl';
-import { useSelector } from 'react-redux';
-import { Redirect, Route, Switch, useLocation, useRouteMatch } from 'react-router-dom';
-
-import { DragLayer } from '../../../components/DragLayer';
-import { selectAdminPermissions } from '../../../pages/App/selectors';
-import ModelsContext from '../../contexts/ModelsContext';
-import getTrad from '../../utils/getTrad';
-import ItemTypes from '../../utils/ItemTypes';
-import CollectionTypeRecursivePath from '../CollectionTypeRecursivePath';
-import ComponentSettingsView from '../ComponentSetttingsView';
-import NoContentType from '../NoContentType';
-import NoPermissions from '../NoPermissions';
-import SingleTypeRecursivePath from '../SingleTypeRecursivePath';
-
-import { CardDragPreview } from './components/CardDragPreview';
-import { ComponentDragPreview } from './components/ComponentDragPreview';
-import { RelationDragPreview } from './components/RelationDragPreview';
-import LeftMenu from './LeftMenu';
-import useContentManagerInitData from './useContentManagerInitData';
-
-function renderDraglayerItem({ type, item }) {
-  if ([ItemTypes.EDIT_FIELD, ItemTypes.FIELD].includes(type)) {
-    return <CardDragPreview labelField={item.labelField} />;
-  }
-
-  /**
-   * Because a user may have multiple relations / dynamic zones / repeable fields in the same content type,
-   * we append the fieldName for the item type to make them unique, however, we then want to extract that
-   * first type to apply the correct preview.
-   */
-  const [actualType] = type.split('_');
-
-  switch (actualType) {
-    case ItemTypes.COMPONENT:
-    case ItemTypes.DYNAMIC_ZONE:
-      return <ComponentDragPreview displayedValue={item.displayedValue} />;
-
-    case ItemTypes.RELATION:
-      return (
-        <RelationDragPreview
-          displayedValue={item.displayedValue}
-          status={item.status}
-          width={item.width}
-        />
-      );
-
-    default:
-      return null;
-  }
-}
-
-const App = () => {
-  const contentTypeMatch = useRouteMatch(`/content-manager/:kind/:uid`);
-  const { status, collectionTypeLinks, singleTypeLinks, models, refetchData } =
-    useContentManagerInitData();
-  const authorisedModels = sortBy([...collectionTypeLinks, ...singleTypeLinks], (model) =>
-    model.title.toLowerCase()
-  );
-  const { pathname } = useLocation();
-  const { formatMessage } = useIntl();
-  const { startSection } = useGuidedTour();
-  const startSectionRef = useRef(startSection);
-  const permissions = useSelector(selectAdminPermissions);
-
-  useEffect(() => {
-    if (startSectionRef.current) {
-      startSectionRef.current('contentManager');
-    }
-  }, []);
-
-  if (status === 'loading') {
-    return (
-      <Main aria-busy="true">
-        <HeaderLayout
-          title={formatMessage({
-            id: getTrad('header.name'),
-            defaultMessage: 'Content',
-          })}
-        />
-        <LoadingIndicatorPage />
-      </Main>
-    );
-  }
-
-  // Array of models that are displayed in the content manager
-  const supportedModelsToDisplay = models.filter(({ isDisplayed }) => isDisplayed);
-
-  // Redirect the user to the 403 page
-  if (
-    authorisedModels.length === 0 &&
-    supportedModelsToDisplay.length > 0 &&
-    pathname !== '/content-manager/403'
-  ) {
-    return <Redirect to="/content-manager/403" />;
-  }
-
-  // Redirect the user to the create content type page
-  if (supportedModelsToDisplay.length === 0 && pathname !== '/content-manager/no-content-types') {
-    return <Redirect to="/content-manager/no-content-types" />;
-  }
-
-  if (!contentTypeMatch && authorisedModels.length > 0) {
-    return (
-      <Redirect
-        to={`${authorisedModels[0].to}${
-          authorisedModels[0].search ? `?${authorisedModels[0].search}` : ''
-        }`}
-      />
-    );
-  }
-
-  return (
-    <Layout sideNav={<LeftMenu />}>
-      <DragLayer renderItem={renderDraglayerItem} />
-      <ModelsContext.Provider value={{ refetchData }}>
-        <Switch>
-          <Route path="/content-manager/components/:uid/configurations/edit">
-            <CheckPagePermissions permissions={permissions.contentManager.componentsConfigurations}>
-              <ComponentSettingsView />
-            </CheckPagePermissions>
-          </Route>
-          <Route
-            path="/content-manager/collectionType/:slug"
-            component={CollectionTypeRecursivePath}
-          />
-          <Route path="/content-manager/singleType/:slug" component={SingleTypeRecursivePath} />
-
-          <Route path="/content-manager/403">
-            <NoPermissions />
-          </Route>
-          <Route path="/content-manager/no-content-types">
-            <NoContentType />
-          </Route>
-          <Route path="" component={AnErrorOccurred} />
-        </Switch>
-      </ModelsContext.Provider>
-    </Layout>
-  );
-};
-
-export { App };
-
-export default function () {
-  const { formatMessage } = useIntl();
-
-  return (
-    <>
-      <Helmet
-        title={formatMessage({ id: getTrad('plugin.name'), defaultMessage: 'Content Manager' })}
-      />
-      <App />
-    </>
-  );
-}

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

@@ -1,50 +0,0 @@
-/**
- *
- * main reducer
- */
-/* eslint-disable consistent-return */
-import produce from 'immer';
-
-import { GET_INIT_DATA, RESET_INIT_DATA, SET_INIT_DATA } from './constants';
-
-const initialState = {
-  components: [],
-  status: 'loading',
-  models: [],
-  collectionTypeLinks: [],
-  singleTypeLinks: [],
-};
-
-/**
- * Known as content-manager_app in the redux store
- */
-const mainReducer = (state = initialState, action) =>
-  produce(state, (draftState) => {
-    switch (action.type) {
-      case GET_INIT_DATA: {
-        draftState.status = 'loading';
-        break;
-      }
-      case RESET_INIT_DATA: {
-        return initialState;
-      }
-      case SET_INIT_DATA: {
-        draftState.collectionTypeLinks = action.data.authorizedCollectionTypeLinks.filter(
-          ({ isDisplayed }) => isDisplayed
-        );
-        draftState.singleTypeLinks = action.data.authorizedSingleTypeLinks.filter(
-          ({ isDisplayed }) => isDisplayed
-        );
-        draftState.components = action.data.components;
-        draftState.models = action.data.contentTypeSchemas;
-        draftState.fieldSizes = action.data.fieldSizes;
-        draftState.status = 'resolved';
-        break;
-      }
-      default:
-        return draftState;
-    }
-  });
-
-export default mainReducer;
-export { initialState };