Users and Permissions in Settings menu

.eslintignore

@@ -7,7 +7,7 @@ examples/**
 cypress/**
 packages/strapi-generate-plugin/files/admin/src/**
 packages/strapi-helper-plugin/**
-packages/strapi-plugin-users-permissions/admin/**
+packages/strapi-plugin-users-permissions/admin/OLD/**
 .eslintrc.js
 .eslintrc.front.js
 .eslintrc.back.js

packages/strapi-admin/admin/src/components/Roles/Permissions/PluginsAndSettingsPermissions/PermissionRow/SubCategory/index.js

@@ -3,7 +3,7 @@ import { intersectionWith } from 'lodash';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { Flex, Padded, Text, Checkbox } from '@buffetjs/core';
-
+import { useIntl } from 'react-intl';
 import { usePermissionsContext } from '../../../../../../hooks';
 import ConditionsModal from '../../../../ConditionsModal';
 import ConditionsButton from '../../../../ConditionsButton';
@@ -20,6 +20,7 @@ const Border = styled.div`
 `;
 
 const SubCategory = ({ subCategory }) => {
+  const { formatMessage } = useIntl();
   const [modal, setModal] = useState({ isOpen: false, isMounted: false });
   const {
     pluginsAndSettingsPermissions,
@@ -133,7 +134,7 @@ const SubCategory = ({ subCategory }) => {
             <BaselineAlignment />
             <Checkbox
               name={`select-all-${subCategory.subCategory}`}
-              message="Select all"
+              message={formatMessage({ id: 'app.utils.select-all' })}
               disabled
               onChange={handleSubCategoryPermissions}
               someChecked={hasSomeCategoryActions}

packages/strapi-admin/admin/src/containers/SettingsPage/StyledLeftMenu.js

@@ -3,7 +3,7 @@ import { LeftMenu } from 'strapi-helper-plugin';
 
 const StyledLeftMenu = styled(LeftMenu)`
   > div {
-    margin-bottom: 28px;
+    margin-bottom: 27px;
   }
 `;
 

packages/strapi-admin/admin/src/translations/de.json

@@ -65,7 +65,6 @@
   "Settings.PageTitle": "Einstellungen - {name}",
   "Settings.error": "Fehler",
   "Settings.global": "Globale Einstellungen",
-  "Settings.permissions": "Berechtigungen",
   "Settings.permissions.category": "Berechtigungseinstellungen für die {category}",
   "Settings.permissions.conditions.anytime": "Jederzeit",
   "Settings.permissions.conditions.apply": "Anwenden",
@@ -205,7 +204,7 @@
   "app.components.PluginCard.compatible": "Mit dieser App kompatibel",
   "app.components.PluginCard.compatibleCommunity": "Mit der Community kompatibel",
   "app.components.PluginCard.more-details": "Mehr Details",
-   "app.components.Users.MagicLink.connect": "Diesen Link dem Benutzer zum Verbinden schicken.",
+  "app.components.Users.MagicLink.connect": "Diesen Link dem Benutzer zum Verbinden schicken.",
   "app.components.Users.ModalCreateBody.block-title.details": "Details",
   "app.components.Users.ModalCreateBody.block-title.roles": "Rolle des Benutzers",
   "app.components.Users.SortPicker.button-label": "Sortieren nach",
@@ -232,11 +231,11 @@
   "app.containers.Users.EditPage.roles-bloc-title": "Zugewiesene Rollen",
   "app.containers.Users.ModalForm.footer.button-success": "Nutzer erstellen",
   "app.links.configure-view": "Anzeige konfigurieren",
+  "app.static.links.cheatsheet": "CheatSheet",
   "app.utils.SelectOption.defaultMessage": " ",
   "app.utils.defaultMessage": " ",
   "app.utils.delete": "Löschen",
   "app.utils.filters": "Filter",
-  "app.static.links.cheatsheet": "CheatSheet",
   "app.utils.placeholder.defaultMessage": " ",
   "component.Input.error.validation.integer": "Der Wert muss eine Ganzzahl sein",
   "components.AutoReloadBlocker.description": "Führen Sie Strapi mit einem der folgenden Befehle aus:",

packages/strapi-admin/admin/src/translations/en.json

@@ -69,7 +69,7 @@
   "Settings.PageTitle": "Settings - {name}",
   "Settings.error": "Error",
   "Settings.global": "Global Settings",
-  "Settings.permissions": "Permissions",
+  "Settings.permissions": "Administration panel",
   "Settings.permissions.category": "Permissions settings for the {category}",
   "Settings.permissions.conditions.anytime": "Anytime",
   "Settings.permissions.conditions.apply": "Apply",
@@ -245,13 +245,14 @@
   "app.containers.Users.EditPage.roles-bloc-title": "Attributed roles",
   "app.containers.Users.ModalForm.footer.button-success": "Create user",
   "app.links.configure-view": "Configure the view",
+  "app.static.links.cheatsheet": "CheatSheet",
   "app.utils.SelectOption.defaultMessage": " ",
   "app.utils.add-filter": "Add filter",
   "app.utils.defaultMessage": " ",
   "app.utils.delete": "Delete",
   "app.utils.filters": "Filters",
-  "app.static.links.cheatsheet": "CheatSheet",
   "app.utils.placeholder.defaultMessage": " ",
+  "app.utils.select-all": "Select all",
   "component.Input.error.validation.integer": "The value must be an integer",
   "components.AutoReloadBlocker.description": "Run Strapi with one of the following commands:",
   "components.AutoReloadBlocker.header": "Reload feature is required for this plugin.",

packages/strapi-admin/ee/admin/components/Roles/Permissions/PluginsAndSettingsPermissions/PermissionRow/SubCategory/index.js

@@ -3,7 +3,7 @@ import { intersectionWith } from 'lodash';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { Flex, Padded, Text, Checkbox } from '@buffetjs/core';
-
+import { useIntl } from 'react-intl';
 import { usePermissionsContext } from '../../../../../../../../admin/src/hooks';
 import CheckboxWrapper from '../../../../../../../../admin/src/components/Roles/Permissions/PluginsAndSettingsPermissions/PermissionRow/CheckboxWrapper';
 import BaselineAlignment from '../../../../../../../../admin/src/components/Roles/Permissions/PluginsAndSettingsPermissions/PermissionRow/BaselineAlignment';
@@ -20,6 +20,7 @@ const Border = styled.div`
 `;
 
 const SubCategory = ({ subCategory }) => {
+  const { formatMessage } = useIntl();
   const [modal, setModal] = useState({ isOpen: false, isMounted: false });
   const {
     isSuperAdmin,
@@ -134,7 +135,7 @@ const SubCategory = ({ subCategory }) => {
             <BaselineAlignment />
             <Checkbox
               name={`select-all-${subCategory.subCategory}`}
-              message="Select all"
+              message={formatMessage({ id: 'app.utils.select-all' })}
               disabled={isSuperAdmin}
               onChange={handleSubCategoryPermissions}
               someChecked={hasSomeCategoryActions}

packages/strapi-helper-plugin/lib/src/components/FormBloc/index.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Flex, Padded, Text } from '@buffetjs/core';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import LoadingIndicator from '../LoadingIndicator';
+import Row from '../Row';
+
+const BaselineAlignment = styled.div`
+  padding-top: ${({ size, top }) => top && size};
+  padding-right: ${({ size, right }) => right && size};
+  padding-bottom: ${({ size, bottom }) => bottom && size};
+  padding-left: ${({ size, left }) => left && size};
+`;
+const Bloc = styled.div`
+  background: ${({ theme }) => theme.main.colors.white};
+  border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+  box-shadow: 0 2px 4px #e3e9f3;
+`;
+
+const FormBloc = ({ children, actions, isLoading, title, subtitle }) => (
+  <Bloc>
+    <BaselineAlignment top size={title ? '18px' : '22px'} />
+    <Padded left right size="sm">
+      {isLoading ? (
+        <>
+          <LoadingIndicator />
+          <BaselineAlignment bottom size="22px" />
+        </>
+      ) : (
+        <>
+          {title && (
+            <>
+              <Padded left right size="xs">
+                <Flex justifyContent="space-between">
+                  <Padded left right size="sm">
+                    <Text fontSize="lg" fontWeight="bold">
+                      {title}
+                    </Text>
+                    {subtitle && (
+                      <Text color="grey" lineHeight="1.8rem">
+                        {subtitle}
+                      </Text>
+                    )}
+                  </Padded>
+                  {actions}
+                </Flex>
+              </Padded>
+              <BaselineAlignment top size="18px" />
+            </>
+          )}
+          <Row>{children}</Row>
+        </>
+      )}
+    </Padded>
+  </Bloc>
+);
+
+FormBloc.defaultProps = {
+  actions: null,
+  isLoading: false,
+  subtitle: null,
+  title: null,
+};
+
+FormBloc.propTypes = {
+  actions: PropTypes.any,
+  children: PropTypes.node.isRequired,
+  isLoading: PropTypes.bool,
+  subtitle: PropTypes.string,
+  title: PropTypes.string,
+};
+
+export default FormBloc;

packages/strapi-helper-plugin/lib/src/components/IntlInput/index.js

@@ -0,0 +1,81 @@
+import React, { useMemo } from 'react';
+import { useIntl } from 'react-intl';
+import { Inputs } from '@buffetjs/custom';
+import PropTypes from 'prop-types';
+import { isObject } from 'lodash';
+import translatedErrors from '../../utils/translatedErrors';
+
+const IntlInput = ({
+  description,
+  label,
+  defaultMessage,
+  error,
+  placeholder: placeholderId,
+  ...rest
+}) => {
+  const { formatMessage } = useIntl();
+
+  let formattedDescription = '';
+  let formattedLabel = '';
+
+  if (label) {
+    const params = label.params || {};
+
+    formattedLabel = isObject(label)
+      ? formatMessage({ id: label.id, defaultMessage: label.defaultMessage || label.id }, params)
+      : formatMessage({ id: label, defaultMessage: label });
+  }
+
+  if (description) {
+    const params = description.params || {};
+
+    formattedDescription = isObject(description)
+      ? formatMessage(
+          { id: description.id, defaultMessage: description.defaultMessage || description.id },
+          params
+        )
+      : formatMessage({ id: description, defaultMessage: description });
+  }
+  const placeholder = placeholderId
+    ? formatMessage({ id: placeholderId, defaultMessage: placeholderId })
+    : '';
+  const translatedError = error ? formatMessage(error) : null;
+  const formattedErrors = useMemo(() => {
+    return Object.keys(translatedErrors).reduce((acc, current) => {
+      acc[current] = formatMessage({ id: translatedErrors[current] });
+
+      return acc;
+    }, {});
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <Inputs
+      {...rest}
+      label={formattedLabel}
+      description={formattedDescription}
+      error={translatedError}
+      translatedErrors={formattedErrors}
+      placeholder={placeholder}
+    />
+  );
+};
+
+IntlInput.defaultProps = {
+  defaultMessage: null,
+  description: null,
+  error: null,
+  placeholder: null,
+};
+
+IntlInput.propTypes = {
+  defaultMessage: PropTypes.string,
+  description: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  error: PropTypes.shape({
+    id: PropTypes.string,
+  }),
+  label: PropTypes.string.isRequired,
+  placeholder: PropTypes.string,
+};
+
+export default IntlInput;

packages/strapi-helper-plugin/lib/src/components/SettingsPageTitle/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { Helmet } from 'react-helmet';
+
+const SettingsPageTitle = ({ name }) => {
+  const { formatMessage } = useIntl();
+  const text = formatMessage({ id: 'Settings.PageTitle' }, { name });
+
+  return <Helmet title={text} />;
+};
+
+SettingsPageTitle.propTypes = {
+  name: PropTypes.string.isRequired,
+};
+
+export default SettingsPageTitle;

packages/strapi-helper-plugin/lib/src/components/SizedInput/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Col } from 'reactstrap';
+import PropTypes from 'prop-types';
+import IntlInput from '../IntlInput';
+
+const SizedInput = ({ size, ...rest }) => {
+  return (
+    <Col {...size}>
+      <IntlInput {...rest} />
+    </Col>
+  );
+};
+
+SizedInput.defaultProps = {
+  size: {
+    xs: '6',
+  },
+};
+
+SizedInput.propTypes = {
+  size: PropTypes.object,
+};
+
+export default SizedInput;

packages/strapi-helper-plugin/lib/src/index.js

@@ -81,6 +81,10 @@ export { default as UserProvider } from './components/UserProvider';
 export { default as ViewContainer } from './components/ViewContainer';
 export { default as CheckPagePermissions } from './components/CheckPagePermissions';
 export { default as CheckPermissions } from './components/CheckPermissions';
+export { default as SettingsPageTitle } from './components/SettingsPageTitle';
+export { default as FormBloc } from './components/FormBloc';
+export { default as IntlInput } from './components/IntlInput';
+export { default as SizedInput } from './components/SizedInput';
 
 // Contexts
 export { GlobalContext, GlobalContextProvider, useGlobalContext } from './contexts/GlobalContext';

packages/strapi-helper-plugin/package.json

@@ -63,6 +63,7 @@
     "moment": "^2.16.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
+    "react-helmet": "^6.0.0",
     "react-intl": "4.5.0",
     "react-router": "^5.0.0",
     "react-router-dom": "^5.0.0",

packages/strapi-plugin-graphql/test/graphqlCrud.test.e2e.js

@@ -181,22 +181,22 @@ describe('Test Graphql API End to End', () => {
 
     test('List posts with `created_by` and `updated_by`', async () => {
       const res = await graphqlQuery({
-	query: /* GraphQL */ `
-	  {
-	    posts(start: 1) {
-	      id
-	      name
-	      bigint
-	      nullable
-	      created_by {
-		username
-	      }
-	      updated_by {
-		username
-	      }
-	    }
-	  }
-	`,
+        query: /* GraphQL */ `
+          {
+            posts(start: 1) {
+              id
+              name
+              bigint
+              nullable
+              created_by {
+                username
+              }
+              updated_by {
+                username
+              }
+            }
+          }
+        `,
       });
 
       expect(res.statusCode).toBe(200);
@@ -306,9 +306,7 @@ describe('Test Graphql API End to End', () => {
 
       // all expected values are in the result
       expected.forEach(expectedPost => {
-        expect(res.body.data.posts).toEqual(
-          expect.arrayContaining([expectedPost])
-        );
+        expect(res.body.data.posts).toEqual(expect.arrayContaining([expectedPost]));
       });
     });