@strapi/plugin-users-permissions 4.0.0-next.6 → 4.0.0

package/admin/src/components/BoundRoute/getMethodColor.js

@@ -0,0 +1,41 @@
+const getMethodColor = verb => {
+  switch (verb) {
+    case 'POST': {
+      return {
+        text: 'success600',
+        border: 'success200',
+        background: 'success100',
+      };
+    }
+    case 'GET': {
+      return {
+        text: 'secondary600',
+        border: 'secondary200',
+        background: 'secondary100',
+      };
+    }
+    case 'PUT': {
+      return {
+        text: 'warning600',
+        border: 'warning200',
+        background: 'warning100',
+      };
+    }
+    case 'DELETE': {
+      return {
+        text: 'danger600',
+        border: 'danger200',
+        background: 'danger100',
+      };
+    }
+    default: {
+      return {
+        text: 'neutral600',
+        border: 'neutral200',
+        background: 'neutral100',
+      };
+    }
+  }
+};
+
+export default getMethodColor;

package/admin/src/components/BoundRoute/index.js

@@ -1,39 +1,55 @@
-/**
- *
- * BoundRoute
- *
- */
-
 import React from 'react';
-import { get, includes, map, tail, toLower } from 'lodash';
-import { FormattedMessage } from 'react-intl';
+import styled from 'styled-components';
+import { Stack } from '@strapi/design-system/Stack';
+import { Box } from '@strapi/design-system/Box';
+import { Typography } from '@strapi/design-system/Typography';
+import map from 'lodash/map';
+import tail from 'lodash/tail';
+import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
-import { Header, Path, Verb, Wrapper } from './Components';
+import getMethodColor from './getMethodColor';
+
+const MethodBox = styled(Box)`
+  margin: -1px;
+  border-radius: ${({ theme }) => theme.spaces[1]} 0 0 ${({ theme }) => theme.spaces[1]};
+`;
 
 function BoundRoute({ route }) {
-  const title = get(route, 'handler');
-  const formattedRoute = get(route, 'path') ? tail(get(route, 'path').split('/')) : [];
+  const { formatMessage } = useIntl();
+
+  const { method, handler: title, path } = route;
+  const formattedRoute = path ? tail(path.split('/')) : [];
   const [controller = '', action = ''] = title ? title.split('.') : [];
+  const colors = getMethodColor(route.method);
 
   return (
-    <div className="col-md-12">
-      <Header>
-        <FormattedMessage id="users-permissions.BoundRoute.title" />
+    <Stack size={2}>
+      <Typography variant="delta" as="h3">
+        {formatMessage({
+          id: 'users-permissions.BoundRoute.title',
+          defaultMessage: 'Bound route to',
+        })}
         &nbsp;
         <span>{controller}</span>
-        <span>.{action} </span>
-      </Header>
-      <Wrapper>
-        <Verb className={toLower(get(route, 'method'))}>{get(route, 'method')}</Verb>
-        <Path>
+        <Typography variant="delta" textColor="primary600">
+          .{action}
+        </Typography>
+      </Typography>
+      <Stack horizontal hasRadius background="neutral0" borderColor="neutral200" size={0}>
+        <MethodBox background={colors.background} borderColor={colors.border} padding={2}>
+          <Typography fontWeight="bold" textColor={colors.text}>
+            {method}
+          </Typography>
+        </MethodBox>
+        <Box paddingLeft={2} paddingRight={2}>
           {map(formattedRoute, value => (
-            <span key={value} style={includes(value, ':') ? { color: '#787E8F' } : {}}>
+            <Typography key={value} textColor={value.includes(':') ? 'neutral600' : 'neutral900'}>
               /{value}
-            </span>
+            </Typography>
           ))}
-        </Path>
-      </Wrapper>
-    </div>
+        </Box>
+      </Stack>
+    </Stack>
   );
 }
 

package/admin/src/components/FormModal/Input/index.js

@@ -0,0 +1,121 @@
+/**
+ *
+ * Input
+ *
+ */
+
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { ToggleInput } from '@strapi/design-system/ToggleInput';
+import { TextInput } from '@strapi/design-system/TextInput';
+import PropTypes from 'prop-types';
+
+const Input = ({
+  description,
+  disabled,
+  intlLabel,
+  error,
+  name,
+  onChange,
+  placeholder,
+  providerToEditName,
+  type,
+  value,
+}) => {
+  const { formatMessage } = useIntl();
+  const inputValue =
+    name === 'noName' ? `${strapi.backendURL}/connect/${providerToEditName}/callback` : value;
+
+  const label = formatMessage(
+    { id: intlLabel.id, defaultMessage: intlLabel.defaultMessage },
+    { ...intlLabel.values }
+  );
+  const hint = description
+    ? formatMessage(
+        { id: description.id, defaultMessage: description.defaultMessage },
+        { ...description.values }
+      )
+    : '';
+
+  if (type === 'bool') {
+    return (
+      <ToggleInput
+        aria-label={name}
+        checked={value}
+        disabled={disabled}
+        hint={hint}
+        label={label}
+        name={name}
+        offLabel={formatMessage({
+          id: 'app.components.ToggleCheckbox.off-label',
+          defaultMessage: 'Off',
+        })}
+        onLabel={formatMessage({
+          id: 'app.components.ToggleCheckbox.on-label',
+          defaultMessage: 'On',
+        })}
+        onChange={e => {
+          onChange({ target: { name, value: e.target.checked } });
+        }}
+      />
+    );
+  }
+
+  const formattedPlaceholder = placeholder
+    ? formatMessage(
+        { id: placeholder.id, defaultMessage: placeholder.defaultMessage },
+        { ...placeholder.values }
+      )
+    : '';
+
+  const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';
+
+  return (
+    <TextInput
+      aria-label={name}
+      disabled={disabled}
+      error={errorMessage}
+      label={label}
+      name={name}
+      onChange={onChange}
+      placeholder={formattedPlaceholder}
+      type={type}
+      value={inputValue}
+    />
+  );
+};
+
+Input.defaultProps = {
+  description: null,
+  disabled: false,
+  error: '',
+  placeholder: null,
+  value: '',
+};
+
+Input.propTypes = {
+  description: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    defaultMessage: PropTypes.string.isRequired,
+    values: PropTypes.object,
+  }),
+  disabled: PropTypes.bool,
+  error: PropTypes.string,
+  intlLabel: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    defaultMessage: PropTypes.string.isRequired,
+    values: PropTypes.object,
+  }).isRequired,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  placeholder: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    defaultMessage: PropTypes.string.isRequired,
+    values: PropTypes.object,
+  }),
+  providerToEditName: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+};
+
+export default Input;

package/admin/src/components/FormModal/index.js

@@ -0,0 +1,123 @@
+/**
+ *
+ * FormModal
+ *
+ */
+
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { Button } from '@strapi/design-system/Button';
+import { Stack } from '@strapi/design-system/Stack';
+import { Breadcrumbs, Crumb } from '@strapi/design-system/Breadcrumbs';
+import { Grid, GridItem } from '@strapi/design-system/Grid';
+import {
+  ModalLayout,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+} from '@strapi/design-system/ModalLayout';
+import PropTypes from 'prop-types';
+import { Formik } from 'formik';
+import { Form } from '@strapi/helper-plugin';
+import Input from './Input';
+
+const FormModal = ({
+  headerBreadcrumbs,
+  initialData,
+  isSubmiting,
+  layout,
+  isOpen,
+  onSubmit,
+  onToggle,
+  providerToEditName,
+}) => {
+  const { formatMessage } = useIntl();
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <ModalLayout onClose={onToggle} labelledBy="title">
+      <ModalHeader>
+        <Breadcrumbs label={headerBreadcrumbs.join(', ')}>
+          {headerBreadcrumbs.map(crumb => (
+            <Crumb key={crumb}>{crumb}</Crumb>
+          ))}
+        </Breadcrumbs>
+      </ModalHeader>
+      <Formik
+        onSubmit={values => onSubmit(values)}
+        initialValues={initialData}
+        validationSchema={layout.schema}
+        validateOnChange={false}
+      >
+        {({ errors, handleChange, values }) => {
+          return (
+            <Form>
+              <ModalBody>
+                <Stack size={1}>
+                  <Grid gap={5}>
+                    {layout.form.map(row => {
+                      return row.map(input => {
+                        return (
+                          <GridItem key={input.name} col={input.size} xs={12}>
+                            <Input
+                              {...input}
+                              error={errors[input.name]}
+                              onChange={handleChange}
+                              value={values[input.name]}
+                              providerToEditName={providerToEditName}
+                            />
+                          </GridItem>
+                        );
+                      });
+                    })}
+                  </Grid>
+                </Stack>
+              </ModalBody>
+              <ModalFooter
+                startActions={
+                  <Button variant="tertiary" onClick={onToggle} type="button">
+                    {formatMessage({
+                      id: 'app.components.Button.cancel',
+                      defaultMessage: 'Cancel',
+                    })}
+                  </Button>
+                }
+                endActions={
+                  <>
+                    <Button type="submit" loading={isSubmiting}>
+                      {formatMessage({ id: 'app.components.Button.save', defaultMessage: 'Save' })}
+                    </Button>
+                  </>
+                }
+              />
+            </Form>
+          );
+        }}
+      </Formik>
+    </ModalLayout>
+  );
+};
+
+FormModal.defaultProps = {
+  initialData: null,
+  providerToEditName: null,
+};
+
+FormModal.propTypes = {
+  headerBreadcrumbs: PropTypes.arrayOf(PropTypes.string).isRequired,
+  initialData: PropTypes.object,
+  layout: PropTypes.shape({
+    form: PropTypes.arrayOf(PropTypes.array),
+    schema: PropTypes.object,
+  }).isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  isSubmiting: PropTypes.bool.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  onToggle: PropTypes.func.isRequired,
+  providerToEditName: PropTypes.string,
+};
+
+export default FormModal;

package/admin/src/components/Permissions/PermissionRow/CheckboxWrapper.js

@@ -1,37 +1,30 @@
-/* eslint-disable indent */
-import styled from 'styled-components';
-import PolicyWrapper from './SubCategory/PolicyWrapper';
+import styled, { css } from 'styled-components';
+import { Box } from '@strapi/design-system/Box';
 
-const CheckboxWrapper = styled.div`
+const activeCheckboxWrapperStyles = css`
+  background: ${props => props.theme.colors.primary100};
+  svg {
+    opacity: 1;
+  }
+`;
+
+const CheckboxWrapper = styled(Box)`
   display: flex;
   justify-content: space-between;
-  min-width: 50%;
-  padding: 0.9rem;
-  height: 3.6rem;
-  position: relative;
-  ${PolicyWrapper} {
+  align-items: center;
+
+  svg {
     opacity: 0;
-    > svg {
-      align-self: center;
-      font-size: 1.4rem;
-      color: ${({ theme }) => theme.main.colors.greyDark};
+    path {
+      fill: ${props => props.theme.colors.primary600};
     }
-    cursor: pointer;
   }
+
+  /* Show active style both on hover and when the action is selected */
+  ${props => props.isActive && activeCheckboxWrapperStyles}
   &:hover {
-    ${PolicyWrapper} {
-      opacity: 1;
-    }
-    background-color: ${({ theme }) => theme.main.colors.mediumGrey};
+    ${activeCheckboxWrapperStyles}
   }
-  ${({ isActive, theme }) =>
-    isActive &&
-    `
-    ${PolicyWrapper} {
-        opacity: 1;
-      }
-    background-color: ${theme.main.colors.mediumGrey};
-  `}
 `;
 
 export default CheckboxWrapper;

package/admin/src/components/Permissions/PermissionRow/SubCategory.js

@@ -0,0 +1,118 @@
+import React, { useCallback, useMemo } from 'react';
+import { get } from 'lodash';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { Box } from '@strapi/design-system/Box';
+import { Checkbox } from '@strapi/design-system/Checkbox';
+import { Flex } from '@strapi/design-system/Flex';
+import { Typography } from '@strapi/design-system/Typography';
+import { Grid, GridItem } from '@strapi/design-system/Grid';
+import CogIcon from '@strapi/icons/Cog';
+import { useIntl } from 'react-intl';
+import CheckboxWrapper from './CheckboxWrapper';
+import { useUsersPermissions } from '../../../contexts/UsersPermissionsContext';
+
+const Border = styled.div`
+  flex: 1;
+  align-self: center;
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral150};
+`;
+
+const SubCategory = ({ subCategory }) => {
+  const { formatMessage } = useIntl();
+  const {
+    onChange,
+    onChangeSelectAll,
+    onSelectedAction,
+    selectedAction,
+    modifiedData,
+  } = useUsersPermissions();
+
+  const currentScopedModifiedData = useMemo(() => {
+    return get(modifiedData, subCategory.name, {});
+  }, [modifiedData, subCategory]);
+
+  const hasAllActionsSelected = useMemo(() => {
+    return Object.values(currentScopedModifiedData).every(action => action.enabled === true);
+  }, [currentScopedModifiedData]);
+
+  const hasSomeActionsSelected = useMemo(() => {
+    return (
+      Object.values(currentScopedModifiedData).some(action => action.enabled === true) &&
+      !hasAllActionsSelected
+    );
+  }, [currentScopedModifiedData, hasAllActionsSelected]);
+
+  const handleChangeSelectAll = useCallback(
+    ({ target: { name } }) => {
+      onChangeSelectAll({ target: { name, value: !hasAllActionsSelected } });
+    },
+    [hasAllActionsSelected, onChangeSelectAll]
+  );
+
+  const isActionSelected = useCallback(
+    actionName => {
+      return selectedAction === actionName;
+    },
+    [selectedAction]
+  );
+
+  return (
+    <Box>
+      <Flex justifyContent="space-between" alignItems="center">
+        <Box paddingRight={4}>
+          <Typography variant="sigma" textColor="neutral600">
+            {subCategory.label}
+          </Typography>
+        </Box>
+        <Border />
+        <Box paddingLeft={4}>
+          <Checkbox
+            name={subCategory.name}
+            value={hasAllActionsSelected}
+            onValueChange={value =>
+              handleChangeSelectAll({ target: { name: subCategory.name, value } })}
+            indeterminate={hasSomeActionsSelected}
+          >
+            {formatMessage({ id: 'app.utils.select-all', defaultMessage: 'Select all' })}
+          </Checkbox>
+        </Box>
+      </Flex>
+      <Flex paddingTop={6} paddingBottom={6}>
+        <Grid gap={2} style={{ flex: 1 }}>
+          {subCategory.actions.map(action => {
+            const name = `${action.name}.enabled`;
+
+            return (
+              <GridItem col={6} key={action.name}>
+                <CheckboxWrapper isActive={isActionSelected(action.name)} padding={2} hasRadius>
+                  <Checkbox
+                    value={get(modifiedData, name, false)}
+                    name={name}
+                    onValueChange={value => onChange({ target: { name, value } })}
+                  >
+                    {action.label}
+                  </Checkbox>
+                  <button
+                    type="button"
+                    data-testid="action-cog"
+                    onClick={() => onSelectedAction(action.name)}
+                    style={{ display: 'inline-flex', alignItems: 'center' }}
+                  >
+                    <CogIcon />
+                  </button>
+                </CheckboxWrapper>
+              </GridItem>
+            );
+          })}
+        </Grid>
+      </Flex>
+    </Box>
+  );
+};
+
+SubCategory.propTypes = {
+  subCategory: PropTypes.object.isRequired,
+};
+
+export default SubCategory;

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

@@ -1,24 +1,11 @@
 import React, { useMemo } from 'react';
-import { Flex, Text } from '@buffetjs/core';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { sortBy } from 'lodash';
-import { PermissionsWrapper, RowContainer } from '@strapi/helper-plugin';
-
-import getTrad from '../../../utils/getTrad';
+import sortBy from 'lodash/sortBy';
+import { Box } from '@strapi/design-system/Box';
 import SubCategory from './SubCategory';
-import RowStyle from './RowStyle';
-
-const PermissionRow = ({ isOpen, isWhite, name, onOpenPlugin, permissions }) => {
-  const { formatMessage } = useIntl();
 
+const PermissionRow = ({ name, permissions }) => {
   const subCategories = useMemo(() => {
-    // Avoid computing when not necesserary
-    if (!isOpen) {
-      return [];
-    }
-
     return sortBy(
       Object.values(permissions.controllers).reduce((acc, curr, index) => {
         const currentName = `${name}.controllers.${Object.keys(permissions.controllers)[index]}`;
@@ -47,45 +34,19 @@ const PermissionRow = ({ isOpen, isWhite, name, onOpenPlugin, permissions }) =>
       }, []),
       'label'
     );
-  }, [isOpen, name, permissions]);
+  }, [name, permissions]);
 
   return (
-    <RowContainer isWhite={isWhite}>
-      <RowStyle isActive={isOpen} isWhite={isWhite} onClick={onOpenPlugin}>
-        <Flex alignItems="center" justifyContent="space-between">
-          <div>
-            <Text color="grey" fontWeight="bold" fontSize="xs" textTransform="uppercase">
-              {name}
-            </Text>
-            <Text lineHeight="22px" color="grey">
-              {formatMessage({ id: getTrad('Plugin.permissions.plugins.description') }, { name })}
-            </Text>
-          </div>
-          <div>
-            <FontAwesomeIcon
-              style={{ width: '11px' }}
-              color="#9EA7B8"
-              icon={isOpen ? 'chevron-up' : 'chevron-down'}
-            />
-          </div>
-        </Flex>
-      </RowStyle>
-      {isOpen && (
-        <PermissionsWrapper isWhite={isWhite}>
-          {subCategories.map(subCategory => (
-            <SubCategory key={subCategory.name} subCategory={subCategory} />
-          ))}
-        </PermissionsWrapper>
-      )}
-    </RowContainer>
+    <Box padding={6}>
+      {subCategories.map(subCategory => (
+        <SubCategory key={subCategory.name} subCategory={subCategory} />
+      ))}
+    </Box>
   );
 };
 
 PermissionRow.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  isWhite: PropTypes.bool.isRequired,
   name: PropTypes.string.isRequired,
-  onOpenPlugin: PropTypes.func.isRequired,
   permissions: PropTypes.object.isRequired,
 };