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

package/admin/src/components/Roles/Permissions/index.js

@@ -1,155 +0,0 @@
-import React, { forwardRef, memo, useCallback, useImperativeHandle, useReducer } from 'react';
-import PropTypes from 'prop-types';
-import { difference } from '@strapi/helper-plugin';
-import { has, isEmpty } from 'lodash';
-import Tabs from '../Tabs';
-import PermissionsDataManagerProvider from '../PermissionsDataManagerProvider';
-import ContentTypes from '../ContentTypes';
-import PluginsAndSettings from '../PluginsAndSettings';
-import TAB_LABELS from './utils/tabLabels';
-import formatPermissionsToAPI from './utils/formatPermissionsToAPI';
-import init from './init';
-import reducer, { initialState } from './reducer';
-
-const Permissions = forwardRef(({ layout, isFormDisabled, permissions }, ref) => {
-  const [{ initialData, layouts, modifiedData }, dispatch] = useReducer(reducer, initialState, () =>
-    init(layout, permissions)
-  );
-
-  useImperativeHandle(ref, () => {
-    return {
-      getPermissions: () => {
-        const collectionTypesDiff = difference(
-          initialData.collectionTypes,
-          modifiedData.collectionTypes
-        );
-        const singleTypesDiff = difference(initialData.singleTypes, modifiedData.singleTypes);
-
-        const contentTypesDiff = { ...collectionTypesDiff, ...singleTypesDiff };
-
-        let didUpdateConditions;
-
-        if (isEmpty(contentTypesDiff)) {
-          didUpdateConditions = false;
-        } else {
-          didUpdateConditions = Object.values(contentTypesDiff).some(permission => {
-            return Object.values(permission).some(permissionValue =>
-              has(permissionValue, 'conditions')
-            );
-          });
-        }
-
-        return { permissionsToSend: formatPermissionsToAPI(modifiedData), didUpdateConditions };
-      },
-      resetForm: () => {
-        dispatch({ type: 'RESET_FORM' });
-      },
-      setFormAfterSubmit: () => {
-        dispatch({ type: 'SET_FORM_AFTER_SUBMIT' });
-      },
-    };
-  });
-
-  const handleChangeCollectionTypeLeftActionRowCheckbox = (
-    pathToCollectionType,
-    propertyName,
-    rowName,
-    value
-  ) => {
-    dispatch({
-      type: 'ON_CHANGE_COLLECTION_TYPE_ROW_LEFT_CHECKBOX',
-      pathToCollectionType,
-      propertyName,
-      rowName,
-      value,
-    });
-  };
-
-  const handleChangeCollectionTypeGlobalActionCheckbox = (collectionTypeKind, actionId, value) => {
-    dispatch({
-      type: 'ON_CHANGE_COLLECTION_TYPE_GLOBAL_ACTION_CHECKBOX',
-      collectionTypeKind,
-      actionId,
-      value,
-    });
-  };
-
-  const handleChangeConditions = conditions => {
-    dispatch({ type: 'ON_CHANGE_CONDITIONS', conditions });
-  };
-
-  const handleChangeSimpleCheckbox = useCallback(({ target: { name, value } }) => {
-    dispatch({
-      type: 'ON_CHANGE_SIMPLE_CHECKBOX',
-      keys: name,
-      value,
-    });
-  }, []);
-
-  const handleChangeParentCheckbox = useCallback(({ target: { name, value } }) => {
-    dispatch({
-      type: 'ON_CHANGE_TOGGLE_PARENT_CHECKBOX',
-      keys: name,
-      value,
-    });
-  }, []);
-
-  return (
-    <PermissionsDataManagerProvider
-      value={{
-        availableConditions: layout.conditions,
-        modifiedData,
-        onChangeConditions: handleChangeConditions,
-        onChangeSimpleCheckbox: handleChangeSimpleCheckbox,
-        onChangeParentCheckbox: handleChangeParentCheckbox,
-        onChangeCollectionTypeLeftActionRowCheckbox: handleChangeCollectionTypeLeftActionRowCheckbox,
-        onChangeCollectionTypeGlobalActionCheckbox: handleChangeCollectionTypeGlobalActionCheckbox,
-      }}
-    >
-      <Tabs tabsLabel={TAB_LABELS}>
-        <ContentTypes
-          layout={layouts.collectionTypes}
-          kind="collectionTypes"
-          isFormDisabled={isFormDisabled}
-        />
-        <ContentTypes
-          layout={layouts.singleTypes}
-          kind="singleTypes"
-          isFormDisabled={isFormDisabled}
-        />
-        <PluginsAndSettings
-          layout={layouts.plugins}
-          kind="plugins"
-          isFormDisabled={isFormDisabled}
-        />
-        <PluginsAndSettings
-          layout={layouts.settings}
-          kind="settings"
-          isFormDisabled={isFormDisabled}
-        />
-      </Tabs>
-    </PermissionsDataManagerProvider>
-  );
-});
-
-Permissions.defaultProps = {
-  permissions: [],
-  layout: {
-    conditions: [],
-    sections: {
-      collectionTypes: {},
-      singleTypes: {
-        actions: [],
-      },
-      settings: [],
-      plugins: [],
-    },
-  },
-};
-Permissions.propTypes = {
-  layout: PropTypes.object,
-  isFormDisabled: PropTypes.bool.isRequired,
-  permissions: PropTypes.array,
-};
-
-export default memo(Permissions);

package/admin/src/components/Roles/PermissionsDataManagerProvider/index.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { PermissionsDataManagerContext } from '../../../contexts';
-
-const PermissionsDataManagerProvider = ({ children, value }) => {
-  return (
-    <PermissionsDataManagerContext.Provider value={value}>
-      {children}
-    </PermissionsDataManagerContext.Provider>
-  );
-};
-
-PermissionsDataManagerProvider.propTypes = {
-  children: PropTypes.node.isRequired,
-  value: PropTypes.exact({
-    availableConditions: PropTypes.array.isRequired,
-    modifiedData: PropTypes.object.isRequired,
-    onChangeCollectionTypeLeftActionRowCheckbox: PropTypes.func.isRequired,
-    onChangeConditions: PropTypes.func.isRequired,
-    onChangeSimpleCheckbox: PropTypes.func.isRequired,
-    onChangeParentCheckbox: PropTypes.func.isRequired,
-    onChangeCollectionTypeGlobalActionCheckbox: PropTypes.func.isRequired,
-  }).isRequired,
-};
-
-export default PermissionsDataManagerProvider;

package/admin/src/components/Roles/PluginsAndSettings/ListWrapper.js

@@ -1,10 +0,0 @@
-import styled from 'styled-components';
-
-const ListWrapper = styled.div`
-  background-color: ${({ theme }) => theme.main.colors.white};
-  border-bottom-left-radius: ${({ theme }) => theme.main.sizes.borderRadius};
-  border-bottom-right-radius: ${({ theme }) => theme.main.sizes.borderRadius};
-  padding: 1.8rem 0;
-`;
-
-export default ListWrapper;

package/admin/src/components/Roles/PluginsAndSettings/Row/Wrapper.js

@@ -1,28 +0,0 @@
-import styled from 'styled-components';
-import { Text } from '@buffetjs/core';
-
-const activeStyle = theme => `
-    background-color: ${theme.main.colors.lightestBlue};
-    border: 1px solid ${theme.main.colors.darkBlue};
-    ${Text} {
-      color: ${theme.main.colors.mediumBlue};
-    }
-    svg {
-      color: ${theme.main.colors.mediumBlue};
-    }
-`;
-
-const RowStyle = styled.div`
-  height: 5.4rem;
-  padding: 1rem 3rem;
-  border: 1px solid transparent;
-  background-color: ${({ theme, isWhite }) => theme.main.colors[isWhite ? 'white' : 'lightGrey']};
-  cursor: pointer;
-  &:hover {
-    background-color: ${({ theme }) => theme.main.colors.lightestBlue};
-    ${({ theme }) => activeStyle(theme)};
-  }
-  ${({ isActive, theme }) => isActive && activeStyle(theme)};
-`;
-
-export default RowStyle;

package/admin/src/components/Roles/PluginsAndSettings/Row/index.js

@@ -1,82 +0,0 @@
-import React, { useMemo } from 'react';
-import { Flex, Text } from '@buffetjs/core';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { PermissionsWrapper, RowContainer } from '@strapi/helper-plugin';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import SubCategory from '../SubCategory';
-import RowStyle from './Wrapper';
-
-const PermissionRow = ({
-  childrenForm,
-  kind,
-  name,
-  isOpen,
-  isFormDisabled,
-  isWhite,
-  onOpenCategory,
-  pathToData,
-}) => {
-  const { formatMessage } = useIntl();
-
-  const handleClick = () => {
-    onOpenCategory(name);
-  };
-
-  const categoryName = useMemo(() => {
-    const split = name.split('::');
-
-    return split.pop();
-  }, [name]);
-
-  return (
-    <RowContainer isWhite={isWhite}>
-      <RowStyle isWhite={isWhite} isActive={isOpen} onClick={handleClick}>
-        <Flex alignItems="center" justifyContent="space-between">
-          <div>
-            <Text color="grey" fontWeight="bold" fontSize="xs" textTransform="uppercase">
-              {categoryName}
-            </Text>
-            <Text lineHeight="22px" color="grey">
-              {formatMessage({ id: 'Settings.permissions.category' }, { category: categoryName })}
-              &nbsp;{kind === 'plugins' ? 'plugin' : kind}
-            </Text>
-          </div>
-          <div>
-            <FontAwesomeIcon style={{ width: '11px' }} color="#9EA7B8" icon="chevron-down" />
-          </div>
-        </Flex>
-      </RowStyle>
-
-      {isOpen && (
-        <PermissionsWrapper isWhite={isWhite}>
-          {childrenForm.map(({ actions, subCategoryName, subCategoryId }) => (
-            <SubCategory
-              key={subCategoryName}
-              actions={actions}
-              categoryName={categoryName}
-              isFormDisabled={isFormDisabled}
-              subCategoryName={subCategoryName}
-              pathToData={[...pathToData, subCategoryId]}
-            />
-          ))}
-        </PermissionsWrapper>
-      )}
-    </RowContainer>
-  );
-};
-
-PermissionRow.defaultProps = {};
-
-PermissionRow.propTypes = {
-  childrenForm: PropTypes.array.isRequired,
-  isOpen: PropTypes.bool.isRequired,
-  isFormDisabled: PropTypes.bool.isRequired,
-  isWhite: PropTypes.bool.isRequired,
-  kind: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  onOpenCategory: PropTypes.func.isRequired,
-  pathToData: PropTypes.array.isRequired,
-};
-
-export default PermissionRow;

package/admin/src/components/Roles/PluginsAndSettings/SubCategory/CheckboxWrapper.js

@@ -1,22 +0,0 @@
-/* eslint-disable indent */
-import styled from 'styled-components';
-
-const CheckboxWrapper = styled.div`
-  min-width: 33%;
-  padding: 0.9rem;
-  height: 3.6rem;
-  position: relative;
-  ${({ hasConditions, disabled, theme }) =>
-    hasConditions &&
-    `
-    &:before {
-      content: '•';
-      position: absolute;
-      top: 2px;
-      left: 0px;
-      color: ${disabled ? theme.main.colors.grey : theme.main.colors.mediumBlue};
-    }
-  `}
-`;
-
-export default CheckboxWrapper;

package/admin/src/components/Roles/PluginsAndSettings/SubCategory/ConditionsButtonWrapper.js

@@ -1,13 +0,0 @@
-/* eslint-disable indent */
-import styled from 'styled-components';
-
-const ConditionsButtonWrapper = styled.div`
-  padding: 0.9rem;
-  ${({ hasConditions }) =>
-    hasConditions &&
-    `
-    padding-left: 22px;
-  `}
-`;
-
-export default ConditionsButtonWrapper;

package/admin/src/components/Roles/PluginsAndSettings/SubCategory/Wrapper.js

@@ -1,26 +0,0 @@
-/* eslint-disable indent */
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  padding-bottom: 2.6rem;
-  input[type='checkbox'] {
-    &:after {
-      color: ${({ theme }) => theme.main.colors.mediumBlue};
-    }
-  }
-  ${({ disabled, theme }) =>
-    disabled &&
-    `
-    label {
-      cursor: default !important;
-      color: ${theme.main.colors.grey};
-    }
-    input[type='checkbox'] {
-        &:after {
-          color: ${theme.main.colors.grey};
-        }
-      }
-    `}
-`;
-
-export default Wrapper;

package/admin/src/components/Roles/PluginsAndSettings/SubCategory/index.js

@@ -1,136 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import { Flex, Padded, Text, Checkbox } from '@buffetjs/core';
-import { useIntl } from 'react-intl';
-import { BaselineAlignment } from '@strapi/helper-plugin';
-import { get } from 'lodash';
-import IS_DISABLED from 'ee_else_ce/components/Roles/PluginsAndSettings/SubCategory/utils/constants';
-import { usePermissionsDataManager } from '../../../../hooks';
-import { getCheckboxState, removeConditionKeyFromData } from '../../utils';
-import ConditionsButton from '../../ConditionsButton';
-import ConditionsModal from '../../ConditionsModal';
-import CheckboxWrapper from './CheckboxWrapper';
-import ConditionsButtonWrapper from './ConditionsButtonWrapper';
-import Wrapper from './Wrapper';
-import { formatActions, getConditionsButtonState } from './utils';
-
-const Border = styled.div`
-  flex: 1;
-  align-self: center;
-  border-top: 1px solid #f6f6f6;
-  padding: 0px 10px;
-`;
-
-const SubCategory = ({ categoryName, isFormDisabled, subCategoryName, actions, pathToData }) => {
-  const [modalState, setModalState] = useState({ isOpen: false, isMounted: false });
-  const {
-    modifiedData,
-    onChangeParentCheckbox,
-    onChangeSimpleCheckbox,
-  } = usePermissionsDataManager();
-  const { formatMessage } = useIntl();
-
-  const mainData = get(modifiedData, pathToData, {});
-  const dataWithoutCondition = useMemo(() => {
-    return Object.keys(mainData).reduce((acc, current) => {
-      acc[current] = removeConditionKeyFromData(mainData[current]);
-
-      return acc;
-    }, {});
-  }, [mainData]);
-
-  const { hasAllActionsSelected, hasSomeActionsSelected } = getCheckboxState(dataWithoutCondition);
-
-  const handleToggleModalIsOpen = () => {
-    setModalState(prevState => ({ isMounted: true, isOpen: !prevState.isOpen }));
-  };
-
-  const handleModalClose = () => {
-    setModalState(prevState => ({ ...prevState, isMounted: false }));
-  };
-
-  // We need to format the actions so it matches the shape of the ConditionsModal actions props
-  const formattedActions = formatActions(actions, modifiedData, pathToData);
-  const doesButtonHasCondition = getConditionsButtonState(get(modifiedData, [...pathToData], {}));
-
-  return (
-    <>
-      <Wrapper>
-        <Flex justifyContent="space-between" alignItems="center">
-          <Padded right size="sm">
-            <Text
-              lineHeight="18px"
-              color="#919bae"
-              fontWeight="bold"
-              fontSize="xs"
-              textTransform="uppercase"
-            >
-              {subCategoryName}
-            </Text>
-          </Padded>
-          <Border />
-          <Padded left size="sm">
-            <BaselineAlignment top size="1px" />
-            <Checkbox
-              name={pathToData.join('..')}
-              message={formatMessage({ id: 'app.utils.select-all' })}
-              disabled={isFormDisabled || IS_DISABLED}
-              onChange={onChangeParentCheckbox}
-              someChecked={hasSomeActionsSelected}
-              value={hasAllActionsSelected}
-            />
-          </Padded>
-        </Flex>
-        <BaselineAlignment top size="1px" />
-        <Padded top size="xs">
-          <Flex flexWrap="wrap">
-            {formattedActions.map(({ checkboxName, value, action, displayName, hasConditions }) => {
-              return (
-                <CheckboxWrapper
-                  disabled={isFormDisabled || IS_DISABLED}
-                  hasConditions={hasConditions}
-                  key={action}
-                >
-                  <Checkbox
-                    name={checkboxName}
-                    disabled={isFormDisabled || IS_DISABLED}
-                    message={displayName}
-                    onChange={onChangeSimpleCheckbox}
-                    value={value}
-                  />
-                </CheckboxWrapper>
-              );
-            })}
-          </Flex>
-          <ConditionsButtonWrapper disabled={isFormDisabled} hasConditions={doesButtonHasCondition}>
-            <ConditionsButton
-              hasConditions={doesButtonHasCondition}
-              onClick={handleToggleModalIsOpen}
-            />
-          </ConditionsButtonWrapper>
-        </Padded>
-      </Wrapper>
-      {modalState.isMounted && (
-        <ConditionsModal
-          headerBreadCrumbs={[categoryName, subCategoryName]}
-          actions={formattedActions}
-          isOpen={modalState.isOpen}
-          isFormDisabled={isFormDisabled}
-          onClosed={handleModalClose}
-          onToggle={handleToggleModalIsOpen}
-        />
-      )}
-    </>
-  );
-};
-
-SubCategory.propTypes = {
-  actions: PropTypes.array.isRequired,
-  categoryName: PropTypes.string.isRequired,
-  isFormDisabled: PropTypes.bool.isRequired,
-  subCategoryName: PropTypes.string.isRequired,
-  pathToData: PropTypes.array.isRequired,
-};
-
-export default SubCategory;

package/admin/src/components/Roles/PluginsAndSettings/index.js

@@ -1,53 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { Padded } from '@buffetjs/core';
-import ListWrapper from './ListWrapper';
-import PermissionRow from './Row';
-
-const PluginsAndSettingsPermissions = ({ isFormDisabled, kind, layout }) => {
-  const [openedCategory, setOpenedCategory] = useState(null);
-
-  const handleOpenCategory = categoryName => {
-    setOpenedCategory(categoryName === openedCategory ? null : categoryName);
-  };
-
-  return (
-    <ListWrapper>
-      <Padded left right size="md">
-        {layout.map(({ category, categoryId, childrenForm }, index) => {
-          return (
-            <PermissionRow
-              key={category}
-              childrenForm={childrenForm}
-              kind={kind}
-              isFormDisabled={isFormDisabled}
-              isOpen={openedCategory === category}
-              isWhite={index % 2 === 1}
-              name={category}
-              onOpenCategory={handleOpenCategory}
-              pathToData={[kind, categoryId]}
-            />
-          );
-        })}
-      </Padded>
-    </ListWrapper>
-  );
-};
-
-PluginsAndSettingsPermissions.propTypes = {
-  isFormDisabled: PropTypes.bool.isRequired,
-  kind: PropTypes.string.isRequired,
-  layout: PropTypes.arrayOf(
-    PropTypes.shape({
-      category: PropTypes.string.isRequired,
-      categoryId: PropTypes.string.isRequired,
-      childrenForm: PropTypes.arrayOf(
-        PropTypes.shape({
-          actions: PropTypes.array.isRequired,
-        })
-      ).isRequired,
-    }).isRequired
-  ).isRequired,
-};
-
-export default PluginsAndSettingsPermissions;

package/admin/src/components/Roles/RequiredSign/index.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-const Required = styled.span`
-  color: ${({ theme }) => theme.main.colors.red};
-  padding-left: 2px;
-`;
-
-const RequiredSign = () => <Required>*</Required>;
-
-export default RequiredSign;

package/admin/src/components/Roles/RoleForm/NameInput.js

@@ -1,6 +0,0 @@
-import React from 'react';
-import SizedInput from '../../SizedInput';
-
-const NameInput = inputProps => <SizedInput name="name" type="text" {...inputProps} />;
-
-export default NameInput;

package/admin/src/components/Roles/RoleForm/RoleForm.js

@@ -1,94 +0,0 @@
-import React from 'react';
-import { PropTypes } from 'prop-types';
-import { useIntl } from 'react-intl';
-
-import NameInput from './NameInput';
-
-import FormCard from '../../FormBloc';
-import SizedInput from '../../SizedInput';
-import ButtonWithNumber from '../ButtonWithNumber';
-
-const RoleForm = ({ disabled, role, values, errors, onChange, onBlur, isLoading }) => {
-  const { formatMessage } = useIntl();
-
-  const actions = [
-    <ButtonWithNumber
-      number={role.usersCount}
-      onClick={() => console.log('Open user modal')}
-      key="user-button"
-    >
-      {formatMessage({
-        id: 'Settings.roles.form.button.users-with-role',
-        defaultMessage: 'Users with this role',
-      })}
-    </ButtonWithNumber>,
-  ];
-
-  return (
-    <FormCard
-      actions={actions}
-      isLoading={isLoading}
-      title={
-        /* eslint-disable indent */
-        role
-          ? role.name
-          : formatMessage({
-              id: 'Settings.roles.form.title',
-              defaultMessage: 'Details',
-            })
-      }
-      subtitle={
-        role
-          ? role.description
-          : formatMessage({
-              id: 'Settings.roles.form.description',
-              defaultMessage: 'Name and description of the role',
-            })
-      }
-      /* eslint-enable indent */
-    >
-      <NameInput
-        disabled={disabled}
-        label="Settings.roles.form.input.name"
-        defaultMessage="Name"
-        name="name"
-        type="text"
-        error={errors.name ? { id: errors.name } : null}
-        onBlur={onBlur}
-        value={values.name}
-        onChange={onChange}
-      />
-
-      <SizedInput
-        disabled={disabled}
-        label="Settings.roles.form.input.description"
-        defaultMessage="Description"
-        name="description"
-        type="textarea"
-        onBlur={onBlur}
-        value={values.description}
-        onChange={onChange}
-        // Override the default height of the textarea
-        style={{ height: 115 }}
-      />
-    </FormCard>
-  );
-};
-
-RoleForm.defaultProps = {
-  disabled: false,
-  isLoading: false,
-  role: null,
-  values: { name: '', description: '' },
-};
-RoleForm.propTypes = {
-  disabled: PropTypes.bool,
-  errors: PropTypes.object.isRequired,
-  isLoading: PropTypes.bool,
-  onBlur: PropTypes.func.isRequired,
-  onChange: PropTypes.func.isRequired,
-  role: PropTypes.object,
-  values: PropTypes.object,
-};
-
-export default RoleForm;

package/admin/src/components/Roles/RoleForm/index.js

@@ -1,2 +0,0 @@
-export { default as NameInput } from './NameInput';
-export { default as RoleForm } from './RoleForm';

package/admin/src/components/Roles/RoleList/RoleDescription.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { Text } from '@buffetjs/core';
-
-const RoleDescription = styled(props => <Text {...props} ellipsis />)`
-  max-width: 25rem;
-`;
-
-export default RoleDescription;