@strapi/plugin-users-permissions 0.0.0-4fc90398602f

package/LICENSE

@@ -0,0 +1,22 @@
+Copyright (c) 2015-present Strapi Solutions SAS
+
+Portions of the Strapi software are licensed as follows:
+
+* All software that resides under an "ee/" directory (the “EE Software”), if that directory exists, is licensed under the license defined in "ee/LICENSE".
+
+* All software outside of the above-mentioned directories or restrictions above is available under the "MIT Expat" license as set forth below.
+
+MIT Expat License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# Strapi plugin

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

@@ -0,0 +1,72 @@
+import React from 'react';
+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 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 { 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 (
+    <Stack spacing={2}>
+      <Typography variant="delta" as="h3">
+        {formatMessage({
+          id: 'users-permissions.BoundRoute.title',
+          defaultMessage: 'Bound route to',
+        })}
+        &nbsp;
+        <span>{controller}</span>
+        <Typography variant="delta" textColor="primary600">
+          .{action}
+        </Typography>
+      </Typography>
+      <Stack horizontal hasRadius background="neutral0" borderColor="neutral200" spacing={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) => (
+            <Typography key={value} textColor={value.includes(':') ? 'neutral600' : 'neutral900'}>
+              /{value}
+            </Typography>
+          ))}
+        </Box>
+      </Stack>
+    </Stack>
+  );
+}
+
+BoundRoute.defaultProps = {
+  route: {
+    handler: 'Nocontroller.error',
+    method: 'GET',
+    path: '/there-is-no-path',
+  },
+};
+
+BoundRoute.propTypes = {
+  route: PropTypes.shape({
+    handler: PropTypes.string,
+    method: PropTypes.string,
+    path: PropTypes.string,
+  }),
+};
+
+export default BoundRoute;

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}/api/connect/${providerToEditName}/callback` : value;
+
+  const label = formatMessage(
+    { id: intlLabel.id, defaultMessage: intlLabel.defaultMessage },
+    { provider: providerToEditName, ...intlLabel.values }
+  );
+  const hint = description
+    ? formatMessage(
+        { id: description.id, defaultMessage: description.defaultMessage },
+        { provider: providerToEditName, ...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,121 @@
+/**
+ *
+ * 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 spacing={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: 'global.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

@@ -0,0 +1,30 @@
+import styled, { css } from 'styled-components';
+import { Box } from '@strapi/design-system/Box';
+
+const activeCheckboxWrapperStyles = css`
+  background: ${(props) => props.theme.colors.primary100};
+  svg {
+    opacity: 1;
+  }
+`;
+
+const CheckboxWrapper = styled(Box)`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  svg {
+    opacity: 0;
+    path {
+      fill: ${(props) => props.theme.colors.primary600};
+    }
+  }
+
+  /* Show active style both on hover and when the action is selected */
+  ${(props) => props.isActive && activeCheckboxWrapperStyles}
+  &:hover {
+    ${activeCheckboxWrapperStyles}
+  }
+`;
+
+export default CheckboxWrapper;

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

@@ -0,0 +1,114 @@
+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

@@ -0,0 +1,53 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import sortBy from 'lodash/sortBy';
+import { Box } from '@strapi/design-system/Box';
+import SubCategory from './SubCategory';
+
+const PermissionRow = ({ name, permissions }) => {
+  const subCategories = useMemo(() => {
+    return sortBy(
+      Object.values(permissions.controllers).reduce((acc, curr, index) => {
+        const currentName = `${name}.controllers.${Object.keys(permissions.controllers)[index]}`;
+        const actions = sortBy(
+          Object.keys(curr).reduce((acc, current) => {
+            return [
+              ...acc,
+              {
+                ...curr[current],
+                label: current,
+                name: `${currentName}.${current}`,
+              },
+            ];
+          }, []),
+          'label'
+        );
+
+        return [
+          ...acc,
+          {
+            actions,
+            label: Object.keys(permissions.controllers)[index],
+            name: currentName,
+          },
+        ];
+      }, []),
+      'label'
+    );
+  }, [name, permissions]);
+
+  return (
+    <Box padding={6}>
+      {subCategories.map((subCategory) => (
+        <SubCategory key={subCategory.name} subCategory={subCategory} />
+      ))}
+    </Box>
+  );
+};
+
+PermissionRow.propTypes = {
+  name: PropTypes.string.isRequired,
+  permissions: PropTypes.object.isRequired,
+};
+
+export default PermissionRow;

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

@@ -0,0 +1,56 @@
+import React, { useReducer } from 'react';
+import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-system/Accordion';
+import { useIntl } from 'react-intl';
+import { Box } from '@strapi/design-system/Box';
+import { Stack } from '@strapi/design-system/Stack';
+import { useUsersPermissions } from '../../contexts/UsersPermissionsContext';
+import formatPluginName from '../../utils/formatPluginName';
+import PermissionRow from './PermissionRow';
+import init from './init';
+import { initialState, reducer } from './reducer';
+
+const Permissions = () => {
+  const { modifiedData } = useUsersPermissions();
+  const { formatMessage } = useIntl();
+  const [{ collapses }, dispatch] = useReducer(reducer, initialState, (state) =>
+    init(state, modifiedData)
+  );
+
+  const handleToggle = (index) =>
+    dispatch({
+      type: 'TOGGLE_COLLAPSE',
+      index,
+    });
+
+  return (
+    <Stack spacing={1}>
+      {collapses.map((collapse, index) => (
+        <Accordion
+          expanded={collapse.isOpen}
+          onToggle={() => handleToggle(index)}
+          key={collapse.name}
+          variant={index % 2 === 0 ? 'secondary' : undefined}
+        >
+          <AccordionToggle
+            title={formatPluginName(collapse.name)}
+            description={formatMessage(
+              {
+                id: 'users-permissions.Plugin.permissions.plugins.description',
+                defaultMessage: 'Define all allowed actions for the {name} plugin.',
+              },
+              { name: collapse.name }
+            )}
+            variant={index % 2 ? 'primary' : 'secondary'}
+          />
+          <AccordionContent>
+            <Box>
+              <PermissionRow permissions={modifiedData[collapse.name]} name={collapse.name} />
+            </Box>
+          </AccordionContent>
+        </Accordion>
+      ))}
+    </Stack>
+  );
+};
+
+export default Permissions;

package/admin/src/components/Permissions/init.js

@@ -0,0 +1,9 @@
+const init = (initialState, permissions) => {
+  const collapses = Object.keys(permissions)
+    .sort()
+    .map((name) => ({ name, isOpen: false }));
+
+  return { ...initialState, collapses };
+};
+
+export default init;

package/admin/src/components/Permissions/reducer.js

@@ -0,0 +1,27 @@
+import produce from 'immer';
+
+const initialState = {
+  collapses: [],
+};
+
+const reducer = (state, action) =>
+  // eslint-disable-next-line consistent-return
+  produce(state, (draftState) => {
+    switch (action.type) {
+      case 'TOGGLE_COLLAPSE': {
+        draftState.collapses = state.collapses.map((collapse, index) => {
+          if (index === action.index) {
+            return { ...collapse, isOpen: !collapse.isOpen };
+          }
+
+          return { ...collapse, isOpen: false };
+        });
+
+        break;
+      }
+      default:
+        return draftState;
+    }
+  });
+
+export { initialState, reducer };