@strapi/admin 4.9.0-alpha.0 → 4.9.0-beta.1

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/AddLogoDialog.js

@@ -1,9 +1,7 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
-import { Tabs, Tab, TabGroup, TabPanels, TabPanel } from '@strapi/design-system/Tabs';
-import { Box } from '@strapi/design-system/Box';
-import { Divider } from '@strapi/design-system/Divider';
+import { Tabs, Tab, TabGroup, TabPanels, TabPanel, Box, Divider } from '@strapi/design-system';
 import FromComputerForm from './FromComputerForm';
 import FromUrlForm from './FromUrlForm';
 

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/FromComputerForm.js

@@ -2,15 +2,18 @@ import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
-import { Flex } from '@strapi/design-system/Flex';
-import { Icon } from '@strapi/design-system/Icon';
-import { Typography } from '@strapi/design-system/Typography';
-import { ModalFooter } from '@strapi/design-system/ModalLayout';
-import { Button } from '@strapi/design-system/Button';
-import { Field, FieldError, FieldInput } from '@strapi/design-system/Field';
-import PicturePlus from '@strapi/icons/PicturePlus';
+import {
+  Box,
+  Flex,
+  Icon,
+  Typography,
+  ModalFooter,
+  Button,
+  Field,
+  FieldError,
+  FieldInput,
+} from '@strapi/design-system';
+import { PicturePlus } from '@strapi/icons';
 import { parseFileMetadatas } from '../../utils/parseFileMetadatas';
 import { ACCEPTED_FORMAT, SIZE, DIMENSION } from '../../utils/constants';
 
@@ -77,7 +80,7 @@ const FromComputerForm = ({ setLocalImage, goTo, next, onClose }) => {
         <Box paddingLeft={8} paddingRight={8} paddingTop={6} paddingBottom={6}>
           <Field name="logo-upload" error={fileError}>
             <label htmlFor="logo-upload">
-              <Stack spacing={2}>
+              <Flex direction="column" alignItems="stretch" gap={2}>
                 <Flex
                   paddingTop={9}
                   paddingBottom={7}
@@ -143,7 +146,7 @@ const FromComputerForm = ({ setLocalImage, goTo, next, onClose }) => {
                   </Box>
                 </Flex>
                 <FieldError />
-              </Stack>
+              </Flex>
             </label>
           </Field>
         </Box>

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/FromUrlForm.js

@@ -1,10 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Box } from '@strapi/design-system/Box';
-import { Button } from '@strapi/design-system/Button';
-import { TextInput } from '@strapi/design-system/TextInput';
-import { ModalFooter } from '@strapi/design-system/ModalLayout';
+import { Box, Button, TextInput, ModalFooter } from '@strapi/design-system';
 import urlToFile from '../../utils/urlToFile';
 import { parseFileMetadatas } from '../../utils/parseFileMetadatas';
 import { SIZE, DIMENSION } from '../../utils/constants';

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/ImageCardAsset.js

@@ -10,7 +10,7 @@ import {
   CardHeader,
   CardTitle,
   CardSubtitle,
-} from '@strapi/design-system/Card';
+} from '@strapi/design-system';
 
 const ImageCardAsset = ({ asset }) => {
   const { formatMessage } = useIntl();

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/PendingLogoDialog.js

@@ -2,11 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { pxToRem } from '@strapi/helper-plugin';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Button } from '@strapi/design-system/Button';
-import { ModalFooter } from '@strapi/design-system/ModalLayout';
-import { Typography } from '@strapi/design-system/Typography';
+import { Box, Flex, Button, ModalFooter, Typography } from '@strapi/design-system';
 import ImageCardAsset from './ImageCardAsset';
 
 const PendingLogoDialog = ({ onClose, asset, prev, next, goTo, setLocalImage, onChangeLogo }) => {

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/index.js

@@ -1,8 +1,7 @@
 import React, { useReducer } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { ModalLayout, ModalHeader } from '@strapi/design-system/ModalLayout';
-import { Typography } from '@strapi/design-system/Typography';
+import { ModalLayout, ModalHeader, Typography } from '@strapi/design-system';
 import reducer, { initialState } from './reducer';
 
 const LogoModalStepper = ({

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/index.js

@@ -9,16 +9,21 @@ import {
   useRBAC,
   useTracking,
 } from '@strapi/helper-plugin';
-import { HeaderLayout, Layout, ContentLayout } from '@strapi/design-system/Layout';
-import { Main } from '@strapi/design-system/Main';
-import { Box } from '@strapi/design-system/Box';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Typography } from '@strapi/design-system/Typography';
-import { Stack } from '@strapi/design-system/Stack';
-import { Button } from '@strapi/design-system/Button';
-import { Link } from '@strapi/design-system/v2/Link';
-import ExternalLink from '@strapi/icons/ExternalLink';
-import Check from '@strapi/icons/Check';
+import {
+  Button,
+  ContentLayout,
+  Flex,
+  Grid,
+  GridItem,
+  HeaderLayout,
+  Layout,
+  Link,
+  Main,
+  Typography,
+} from '@strapi/design-system';
+import { ExternalLink, Check } from '@strapi/icons';
+import AdminSeatInfo from 'ee_else_ce/pages/SettingsPage/pages/ApplicationInfosPage/components/AdminSeatInfo';
+
 import adminPermissions from '../../../../permissions';
 import { useConfigurations } from '../../../../hooks';
 import CustomizationInfos from './components/CustomizationInfos';
@@ -33,7 +38,7 @@ const ApplicationInfosPage = () => {
   const queryClient = useQueryClient();
   useFocusWhenNavigate();
   const appInfos = useAppInfos();
-  const { shouldUpdateStrapi, latestStrapiReleaseTag, strapiVersion } = appInfos;
+  const { latestStrapiReleaseTag, shouldUpdateStrapi, strapiVersion } = appInfos;
   const { updateProjectSettings } = useConfigurations();
 
   const {
@@ -43,10 +48,6 @@ const ApplicationInfosPage = () => {
 
   const { data } = useQuery('project-settings', fetchProjectSettings, { enabled: canRead });
 
-  const currentPlan = appInfos.communityEdition
-    ? 'app.components.UpgradePlanModal.text-ce'
-    : 'app.components.UpgradePlanModal.text-ee';
-
   const submitMutation = useMutation((body) => postProjectSettings(body), {
     async onSuccess({ menuLogo, authLogo }) {
       await queryClient.invalidateQueries('project-settings', { refetchActive: true });
@@ -112,9 +113,11 @@ const ApplicationInfosPage = () => {
             }
           />
           <ContentLayout>
-            <Stack spacing={6}>
-              <Stack
-                spacing={5}
+            <Flex direction="column" alignItems="stretch" gap={6}>
+              <Flex
+                direction="column"
+                alignItems="stretch"
+                gap={4}
                 hasRadius
                 background="neutral0"
                 shadow="tableShadow"
@@ -130,87 +133,73 @@ const ApplicationInfosPage = () => {
                   })}
                 </Typography>
 
-                <Grid paddingTop={1}>
+                <Grid gap={5} as="dl">
                   <GridItem col={6} s={12}>
-                    <Typography variant="sigma" textColor="neutral600">
+                    <Typography variant="sigma" textColor="neutral600" as="dt">
                       {formatMessage({
                         id: 'Settings.application.strapiVersion',
                         defaultMessage: 'strapi version',
                       })}
                     </Typography>
-                    <Typography as="p">v{strapiVersion}</Typography>
-                    <Link
-                      href={
-                        appInfos.communityEdition
-                          ? 'https://discord.strapi.io'
-                          : 'https://support.strapi.io/support/home'
-                      }
-                      isExternal
-                      endIcon={<ExternalLink />}
-                    >
-                      {formatMessage({
-                        id: 'Settings.application.get-help',
-                        defaultMessage: 'Get help',
-                      })}
-                    </Link>
+                    <Flex gap={3} direction="column" alignItems="start" as="dd">
+                      <Typography>v{strapiVersion}</Typography>
+                      {shouldUpdateStrapi && (
+                        <Link
+                          href={`https://github.com/strapi/strapi/releases/tag/${latestStrapiReleaseTag}`}
+                          isExternal
+                          endIcon={<ExternalLink />}
+                        >
+                          {formatMessage({
+                            id: 'Settings.application.link-upgrade',
+                            defaultMessage: 'Upgrade your admin panel',
+                          })}
+                        </Link>
+                      )}
+                    </Flex>
                   </GridItem>
                   <GridItem col={6} s={12}>
-                    <Typography variant="sigma" textColor="neutral600">
+                    <Typography variant="sigma" textColor="neutral600" as="dt">
                       {formatMessage({
                         id: 'Settings.application.edition-title',
                         defaultMessage: 'current plan',
                       })}
                     </Typography>
-                    <Typography as="p">
-                      {formatMessage({
-                        id: currentPlan,
-                        defaultMessage: `${
-                          appInfos.communityEdition ? 'Community Edition' : 'Enterprise Edition'
-                        }`,
-                      })}
-                    </Typography>
-                  </GridItem>
-                </Grid>
-
-                <Grid paddingTop={1}>
-                  <GridItem col={6} s={12}>
-                    {shouldUpdateStrapi && (
+                    <Flex gap={3} direction="column" alignItems="start" as="dd">
+                      <Typography>
+                        {formatMessage(
+                          {
+                            id: 'Settings.application.ee-or-ce',
+                            defaultMessage:
+                              '{communityEdition, select, true {Community Edition} other {Enterprise Edition}}',
+                          },
+                          { communityEdition: appInfos.communityEdition }
+                        )}
+                      </Typography>
                       <Link
-                        href={`https://github.com/strapi/strapi/releases/tag/${latestStrapiReleaseTag}`}
+                        href="https://strapi.io/pricing-self-hosted"
                         isExternal
                         endIcon={<ExternalLink />}
                       >
                         {formatMessage({
-                          id: 'Settings.application.link-upgrade',
-                          defaultMessage: 'Upgrade your admin panel',
+                          id: 'Settings.application.link-pricing',
+                          defaultMessage: 'See all pricing plans',
                         })}
                       </Link>
-                    )}
+                    </Flex>
                   </GridItem>
+
                   <GridItem col={6} s={12}>
-                    <Link
-                      href="https://strapi.io/pricing-self-hosted"
-                      isExternal
-                      endIcon={<ExternalLink />}
-                    >
+                    <Typography variant="sigma" textColor="neutral600" as="dt">
                       {formatMessage({
-                        id: 'Settings.application.link-pricing',
-                        defaultMessage: 'See all pricing plans',
+                        id: 'Settings.application.node-version',
+                        defaultMessage: 'node version',
                       })}
-                    </Link>
+                    </Typography>
+                    <Typography as="dd">{appInfos.nodeVersion}</Typography>
                   </GridItem>
+                  <AdminSeatInfo />
                 </Grid>
-
-                <Box paddingTop={1}>
-                  <Typography variant="sigma" textColor="neutral600">
-                    {formatMessage({
-                      id: 'Settings.application.node-version',
-                      defaultMessage: 'node version',
-                    })}
-                  </Typography>
-                  <Typography as="p">{appInfos.nodeVersion}</Typography>
-                </Box>
-              </Stack>
+              </Flex>
               {canRead && data && (
                 <CustomizationInfos
                   canUpdate={canUpdate}
@@ -218,7 +207,7 @@ const ApplicationInfosPage = () => {
                   projectSettingsStored={data}
                 />
               )}
-            </Stack>
+            </Flex>
           </ContentLayout>
         </form>
       </Main>

package/admin/src/pages/SettingsPage/pages/Roles/CreatePage/index.js

@@ -1,8 +1,270 @@
-import React from 'react';
-import { Redirect } from 'react-router-dom';
+import React, { useRef, useState } from 'react';
+import { format } from 'date-fns';
+import {
+  CheckPagePermissions,
+  Form,
+  LoadingIndicatorPage,
+  SettingsPageTitle,
+  request,
+  useNotification,
+  useOverlayBlocker,
+  useTracking,
+  Link,
+} from '@strapi/helper-plugin';
+import {
+  Box,
+  Button,
+  ContentLayout,
+  HeaderLayout,
+  Grid,
+  GridItem,
+  Main,
+  Flex,
+  Typography,
+  TextInput,
+  Textarea,
+} from '@strapi/design-system';
+import { ArrowLeft } from '@strapi/icons';
+import { Formik } from 'formik';
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+import { useIntl } from 'react-intl';
+import { useHistory, useRouteMatch } from 'react-router-dom';
+import styled from 'styled-components';
+import Permissions from '../EditPage/components/Permissions';
+import { useFetchPermissionsLayout, useFetchRole } from '../../../../../hooks';
+import adminPermissions from '../../../../../permissions';
+import schema from './utils/schema';
+
+const UsersRoleNumber = styled.div`
+  border: 1px solid ${({ theme }) => theme.colors.primary200};
+  background: ${({ theme }) => theme.colors.primary100};
+  padding: ${({ theme }) => `${theme.spaces[2]} ${theme.spaces[4]}`};
+  color: ${({ theme }) => theme.colors.primary600};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  font-size: ${12 / 16}rem;
+  font-weight: bold;
+`;
 
 const CreatePage = () => {
-  return <Redirect to="/404" />;
+  const toggleNotification = useNotification();
+  const { lockApp, unlockApp } = useOverlayBlocker();
+  const { formatMessage } = useIntl();
+  const [isSubmitting, setIsSubmiting] = useState(false);
+  const { replace } = useHistory();
+  const permissionsRef = useRef();
+  const { trackUsage } = useTracking();
+  const params = useRouteMatch('/settings/roles/duplicate/:id');
+  const id = get(params, 'params.id', null);
+  const { isLoading: isLayoutLoading, data: permissionsLayout } = useFetchPermissionsLayout();
+  const { permissions: rolePermissions, isLoading: isRoleLoading } = useFetchRole(id);
+
+  const handleCreateRoleSubmit = (data) => {
+    lockApp();
+    setIsSubmiting(true);
+
+    if (id) {
+      trackUsage('willDuplicateRole');
+    } else {
+      trackUsage('willCreateNewRole');
+    }
+
+    Promise.resolve(
+      request('/admin/roles', {
+        method: 'POST',
+        body: data,
+      })
+    )
+      .then(async (res) => {
+        const { permissionsToSend } = permissionsRef.current.getPermissions();
+
+        if (id) {
+          trackUsage('didDuplicateRole');
+        } else {
+          trackUsage('didCreateNewRole');
+        }
+
+        if (res.data.id && !isEmpty(permissionsToSend)) {
+          await request(`/admin/roles/${res.data.id}/permissions`, {
+            method: 'PUT',
+            body: { permissions: permissionsToSend },
+          });
+        }
+
+        return res;
+      })
+      .then((res) => {
+        setIsSubmiting(false);
+        toggleNotification({
+          type: 'success',
+          message: { id: 'Settings.roles.created', defaultMessage: 'created' },
+        });
+        replace(`/settings/roles/${res.data.id}`);
+      })
+      .catch((err) => {
+        console.error(err);
+        setIsSubmiting(false);
+        toggleNotification({
+          type: 'warning',
+          message: { id: 'notification.error' },
+        });
+      })
+      .finally(() => {
+        unlockApp();
+      });
+  };
+
+  const defaultDescription = `${formatMessage({
+    id: 'Settings.roles.form.created',
+    defaultMessage: 'Created',
+  })} ${format(new Date(), 'PPP')}`;
+
+  return (
+    <Main>
+      <SettingsPageTitle name="Roles" />
+      <Formik
+        initialValues={{ name: '', description: defaultDescription }}
+        onSubmit={handleCreateRoleSubmit}
+        validationSchema={schema}
+        validateOnChange={false}
+      >
+        {({ handleSubmit, values, errors, handleReset, handleChange }) => (
+          <Form noValidate>
+            <>
+              <HeaderLayout
+                primaryAction={
+                  <Flex gap={2}>
+                    <Button
+                      variant="secondary"
+                      onClick={() => {
+                        handleReset();
+                        permissionsRef.current.resetForm();
+                      }}
+                      size="L"
+                    >
+                      {formatMessage({
+                        id: 'app.components.Button.reset',
+                        defaultMessage: 'Reset',
+                      })}
+                    </Button>
+                    <Button onClick={handleSubmit} loading={isSubmitting} size="L">
+                      {formatMessage({
+                        id: 'global.save',
+                        defaultMessage: 'Save',
+                      })}
+                    </Button>
+                  </Flex>
+                }
+                title={formatMessage({
+                  id: 'Settings.roles.create.title',
+                  defaultMessage: 'Create a role',
+                })}
+                subtitle={formatMessage({
+                  id: 'Settings.roles.create.description',
+                  defaultMessage: 'Define the rights given to the role',
+                })}
+                navigationAction={
+                  <Link startIcon={<ArrowLeft />} to="/settings/roles">
+                    {formatMessage({
+                      id: 'global.back',
+                      defaultMessage: 'Back',
+                    })}
+                  </Link>
+                }
+              />
+              <ContentLayout>
+                <Flex direction="column" alignItems="stretch" gap={6}>
+                  <Box background="neutral0" padding={6} shadow="filterShadow" hasRadius>
+                    <Flex direction="column" alignItems="stretch" gap={4}>
+                      <Flex justifyContent="space-between">
+                        <Box>
+                          <Box>
+                            <Typography fontWeight="bold">
+                              {formatMessage({
+                                id: 'global.details',
+                                defaultMessage: 'Details',
+                              })}
+                            </Typography>
+                          </Box>
+                          <Box>
+                            <Typography variant="pi" textColor="neutral600">
+                              {formatMessage({
+                                id: 'Settings.roles.form.description',
+                                defaultMessage: 'Name and description of the role',
+                              })}
+                            </Typography>
+                          </Box>
+                        </Box>
+                        <UsersRoleNumber>
+                          {formatMessage(
+                            {
+                              id: 'Settings.roles.form.button.users-with-role',
+                              defaultMessage:
+                                '{number, plural, =0 {# users} one {# user} other {# users}} with this role',
+                            },
+                            { number: 0 }
+                          )}
+                        </UsersRoleNumber>
+                      </Flex>
+                      <Grid gap={4}>
+                        <GridItem col={6}>
+                          <TextInput
+                            name="name"
+                            error={errors.name && formatMessage({ id: errors.name })}
+                            label={formatMessage({
+                              id: 'global.name',
+                              defaultMessage: 'Name',
+                            })}
+                            onChange={handleChange}
+                            value={values.name}
+                          />
+                        </GridItem>
+                        <GridItem col={6}>
+                          <Textarea
+                            label={formatMessage({
+                              id: 'global.description',
+                              defaultMessage: 'Description',
+                            })}
+                            name="description"
+                            error={errors.description && formatMessage({ id: errors.description })}
+                            onChange={handleChange}
+                          >
+                            {values.description}
+                          </Textarea>
+                        </GridItem>
+                      </Grid>
+                    </Flex>
+                  </Box>
+                  {!isLayoutLoading && !isRoleLoading ? (
+                    <Box shadow="filterShadow" hasRadius>
+                      <Permissions
+                        isFormDisabled={false}
+                        ref={permissionsRef}
+                        permissions={rolePermissions}
+                        layout={permissionsLayout}
+                      />
+                    </Box>
+                  ) : (
+                    <Box background="neutral0" padding={6} shadow="filterShadow" hasRadius>
+                      <LoadingIndicatorPage />
+                    </Box>
+                  )}
+                </Flex>
+              </ContentLayout>
+            </>
+          </Form>
+        )}
+      </Formik>
+    </Main>
+  );
 };
 
-export default CreatePage;
+export default function () {
+  return (
+    <CheckPagePermissions permissions={adminPermissions.settings.roles.create}>
+      <CreatePage />
+    </CheckPagePermissions>
+  );
+}
+
+export { CreatePage };

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/CollapseLabel/index.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { Flex } from '@strapi/design-system/Flex';
+import { Flex } from '@strapi/design-system';
 
 const CollapseLabel = styled(Flex)`
   padding-right: ${({ theme }) => theme.spaces[2]};

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsButton/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Cog from '@strapi/icons/Cog';
-import { Button } from '@strapi/design-system/Button';
+import { Cog } from '@strapi/icons';
+import { Button } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ActionRow/index.js

@@ -1,10 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import IS_DISABLED from 'ee_else_ce/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ActionRow/utils/constants';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import { MultiSelectNested } from '@strapi/design-system/Select';
+import { Box, Flex, Typography, MultiSelectNested } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 
 import { getNestedOptions, getSelectedValues, getNewStateFromChangedValues } from './utils/options';
@@ -55,7 +51,7 @@ const ActionRow = ({
           onChange={handleChange}
           value={getSelectedValues(value)}
           options={getNestedOptions(arrayOfOptionsGroupedByCategory)}
-          disabled={isFormDisabled || IS_DISABLED}
+          disabled={isFormDisabled}
         />
       </Box>
     </Flex>

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/index.js

@@ -1,14 +1,15 @@
 import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Button } from '@strapi/design-system/Button';
 import {
+  Button,
   ModalFooter,
   ModalHeader,
   ModalLayout,
   ModalBody,
-} from '@strapi/design-system/ModalLayout';
-import { Breadcrumbs, Crumb } from '@strapi/design-system/Breadcrumbs';
-import { Typography } from '@strapi/design-system/Typography';
+  Breadcrumbs,
+  Crumb,
+  Typography,
+} from '@strapi/design-system';
 import produce from 'immer';
 import get from 'lodash/get';
 import groupBy from 'lodash/groupBy';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/utils/createDefaultConditionsForm.js

@@ -1,4 +1,4 @@
-import { get } from 'lodash';
+import get from 'lodash/get';
 
 const createConditionsForm = (conditions, valueObject) => {
   return conditions.reduce((acc, current) => {