@strapi/admin 4.9.0-alpha.0 → 4.9.0-exp.90df253ba90fd6879eb56a720a1f80d04ff745b8

package/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/index.js

@@ -0,0 +1,221 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { useIntl } from 'react-intl';
+import { Formik } from 'formik';
+import { useRouteMatch, useHistory } from 'react-router-dom';
+import { useQuery } from 'react-query';
+import {
+  SettingsPageTitle,
+  useFocusWhenNavigate,
+  Form,
+  useOverlayBlocker,
+  useNotification,
+  useTracking,
+  useGuidedTour,
+  useRBAC,
+  useFetchClient,
+} from '@strapi/helper-plugin';
+import { ContentLayout, Main, Flex } from '@strapi/design-system';
+import { formatAPIErrors } from '../../../../../utils';
+import { schema } from './utils';
+import LoadingView from './components/LoadingView';
+import adminPermissions from '../../../../../permissions';
+import FormTransferTokenContainer from './components/FormTransferTokenContainer';
+import TokenBox from '../../../components/Tokens/TokenBox';
+import FormHead from '../../../components/Tokens/FormHead';
+import { TRANSFER_TOKEN_TYPE } from '../../../components/Tokens/constants';
+
+const MSG_ERROR_NAME_TAKEN = 'Name already taken';
+
+const TransferTokenCreateView = () => {
+  useFocusWhenNavigate();
+  const { formatMessage } = useIntl();
+  const { lockApp, unlockApp } = useOverlayBlocker();
+  const toggleNotification = useNotification();
+  const history = useHistory();
+  const [transferToken, setTransferToken] = useState(
+    history.location.state?.transferToken.accessKey
+      ? {
+          ...history.location.state.transferToken,
+        }
+      : null
+  );
+  const { trackUsage } = useTracking();
+  const trackUsageRef = useRef(trackUsage);
+  const { setCurrentStep } = useGuidedTour();
+  const {
+    allowedActions: { canCreate, canUpdate, canRegenerate },
+  } = useRBAC(adminPermissions.settings['transfer-tokens']);
+  const {
+    params: { id },
+  } = useRouteMatch('/settings/transfer-tokens/:id');
+  const { get, post, put } = useFetchClient();
+
+  const isCreating = id === 'create';
+
+  useEffect(() => {
+    trackUsageRef.current(isCreating ? 'didAddTokenFromList' : 'didEditTokenFromList', {
+      tokenType: TRANSFER_TOKEN_TYPE,
+    });
+  }, [isCreating]);
+
+  const { status } = useQuery(
+    ['transfer-token', id],
+    async () => {
+      const {
+        data: { data },
+      } = await get(`/admin/transfer/tokens/${id}`);
+
+      setTransferToken({
+        ...data,
+      });
+
+      return data;
+    },
+    {
+      enabled: !isCreating && !transferToken,
+      onError() {
+        toggleNotification({
+          type: 'warning',
+          message: { id: 'notification.error', defaultMessage: 'An error occured' },
+        });
+      },
+    }
+  );
+
+  const handleSubmit = async (body, actions) => {
+    trackUsageRef.current(isCreating ? 'willCreateToken' : 'willEditToken', {
+      tokenType: TRANSFER_TOKEN_TYPE,
+    });
+    lockApp();
+    const lifespanVal =
+      body.lifespan && parseInt(body.lifespan, 10) && body.lifespan !== '0'
+        ? parseInt(body.lifespan, 10)
+        : null;
+
+    const permissions = body.permissions.split('-');
+
+    try {
+      const {
+        data: { data: response },
+      } = isCreating
+        ? await post(`/admin/transfer/tokens`, {
+            ...body,
+            lifespan: lifespanVal,
+            permissions,
+          })
+        : await put(`/admin/transfer/tokens/${id}`, {
+            name: body.name,
+            description: body.description,
+            permissions,
+          });
+
+      unlockApp();
+
+      if (isCreating) {
+        history.replace(`/settings/transfer-tokens/${response.id}`, { transferToken: response });
+        setCurrentStep('transferTokens.success');
+      }
+      setTransferToken({
+        ...response,
+      });
+
+      toggleNotification({
+        type: 'success',
+        message: isCreating
+          ? formatMessage({
+              id: 'notification.success.transfertokencreated',
+              defaultMessage: 'Transfer Token successfully created',
+            })
+          : formatMessage({
+              id: 'notification.success.transfertokenedited',
+              defaultMessage: 'Transfer Token successfully edited',
+            }),
+      });
+
+      trackUsageRef.current(isCreating ? 'didCreateToken' : 'didEditToken', {
+        type: transferToken?.permissions,
+        tokenType: TRANSFER_TOKEN_TYPE,
+      });
+    } catch (err) {
+      const errors = formatAPIErrors(err.response.data);
+      actions.setErrors(errors);
+
+      if (err?.response?.data?.error?.message === MSG_ERROR_NAME_TAKEN) {
+        toggleNotification({
+          type: 'warning',
+          message: err.response.data.message || 'notification.error.tokennamenotunique',
+        });
+      } else {
+        toggleNotification({
+          type: 'warning',
+          message: err?.response?.data?.message || 'notification.error',
+        });
+      }
+      unlockApp();
+    }
+  };
+
+  const canEditInputs = (canUpdate && !isCreating) || (canCreate && isCreating);
+  const isLoading = !isCreating && !transferToken && status !== 'success';
+
+  if (isLoading) {
+    return <LoadingView transferTokenName={transferToken?.name} />;
+  }
+
+  return (
+    <Main>
+      <SettingsPageTitle name="Transfer Tokens" />
+      <Formik
+        validationSchema={schema}
+        validateOnChange={false}
+        initialValues={{
+          name: transferToken?.name || '',
+          description: transferToken?.description || '',
+          lifespan: transferToken?.lifespan
+            ? transferToken.lifespan.toString()
+            : transferToken?.lifespan,
+          permissions: transferToken?.permissions.join('-'),
+        }}
+        enableReinitialize
+        onSubmit={(body, actions) => handleSubmit(body, actions)}
+      >
+        {({ errors, handleChange, isSubmitting, values }) => {
+          return (
+            <Form>
+              <FormHead
+                backUrl="/settings/transfer-tokens"
+                title={{
+                  id: 'Settings.transferTokens.createPage.title',
+                  defaultMessage: 'Create Transfer Token',
+                }}
+                token={transferToken}
+                setToken={setTransferToken}
+                canEditInputs={canEditInputs}
+                canRegenerate={canRegenerate}
+                isSubmitting={isSubmitting}
+                regenerateUrl="/admin/transfer/tokens/"
+              />
+              <ContentLayout>
+                <Flex direction="column" alignItems="stretch" gap={6}>
+                  {Boolean(transferToken?.name) && (
+                    <TokenBox token={transferToken?.accessKey} tokenType={TRANSFER_TOKEN_TYPE} />
+                  )}
+                  <FormTransferTokenContainer
+                    errors={errors}
+                    onChange={handleChange}
+                    canEditInputs={canEditInputs}
+                    isCreating={isCreating}
+                    values={values}
+                    transferToken={transferToken}
+                  />
+                </Flex>
+              </ContentLayout>
+            </Form>
+          );
+        }}
+      </Formik>
+    </Main>
+  );
+};
+
+export default TransferTokenCreateView;

package/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/utils/getDateOfExpiration.js

@@ -0,0 +1,16 @@
+import { addDays, format } from 'date-fns';
+import * as locales from 'date-fns/locale';
+
+const getDateOfExpiration = (createdAt, duration, language = 'en') => {
+  if (duration && typeof duration === 'number') {
+    const durationInDays = duration / 24 / 60 / 60 / 1000;
+
+    return format(addDays(new Date(createdAt), durationInDays), 'PPP', {
+      locale: locales[language],
+    });
+  }
+
+  return 'Unlimited';
+};
+
+export default getDateOfExpiration;

package/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/utils/index.js

@@ -0,0 +1,4 @@
+import getDateOfExpiration from './getDateOfExpiration';
+import schema from './schema';
+
+export { getDateOfExpiration, schema };

package/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/utils/schema.js

@@ -0,0 +1,11 @@
+import * as yup from 'yup';
+import { translatedErrors } from '@strapi/helper-plugin';
+
+const schema = yup.object().shape({
+  name: yup.string(translatedErrors.string).max(100).required(translatedErrors.required),
+  description: yup.string().nullable(),
+  lifespan: yup.number().integer().min(0).nullable().defined(translatedErrors.required),
+  permissions: yup.string(translatedErrors.string).required(translatedErrors.required),
+});
+
+export default schema;

package/admin/src/pages/SettingsPage/pages/TransferTokens/ListView/index.js

@@ -0,0 +1,194 @@
+import React, { useEffect, useRef } from 'react';
+import { useIntl } from 'react-intl';
+import { useQuery, useMutation, useQueryClient } from 'react-query';
+import { useHistory } from 'react-router-dom';
+import qs from 'qs';
+
+import {
+  SettingsPageTitle,
+  useFocusWhenNavigate,
+  useNotification,
+  NoPermissions,
+  useRBAC,
+  NoContent,
+  useTracking,
+  useGuidedTour,
+  LinkButton,
+  useFetchClient,
+} from '@strapi/helper-plugin';
+import { HeaderLayout, ContentLayout, Main, Button } from '@strapi/design-system';
+import { Plus } from '@strapi/icons';
+
+import adminPermissions from '../../../../../permissions';
+import tableHeaders from './utils/tableHeaders';
+import Table from '../../../components/Tokens/Table';
+import { TRANSFER_TOKEN_TYPE } from '../../../components/Tokens/constants';
+
+const TransferTokenListView = () => {
+  useFocusWhenNavigate();
+  const queryClient = useQueryClient();
+  const { formatMessage } = useIntl();
+  const toggleNotification = useNotification();
+  const {
+    allowedActions: { canCreate, canDelete, canUpdate, canRead },
+  } = useRBAC(adminPermissions.settings['transfer-tokens']);
+  const { push } = useHistory();
+  const { trackUsage } = useTracking();
+
+  const { startSection } = useGuidedTour();
+  const startSectionRef = useRef(startSection);
+  const { get, del } = useFetchClient();
+
+  useEffect(() => {
+    if (startSectionRef.current) {
+      startSectionRef.current('transferTokens');
+    }
+  }, []);
+
+  useEffect(() => {
+    push({ search: qs.stringify({ sort: 'name:ASC' }, { encode: false }) });
+  }, [push]);
+
+  const headers = tableHeaders.map((header) => ({
+    ...header,
+    metadatas: {
+      ...header.metadatas,
+      label: formatMessage(header.metadatas.label),
+    },
+  }));
+
+  const {
+    data: transferTokens,
+    status,
+    isFetching,
+  } = useQuery(
+    ['transfer-tokens'],
+    async () => {
+      trackUsage('willAccessTokenList', {
+        tokenType: TRANSFER_TOKEN_TYPE,
+      });
+      const {
+        data: { data },
+      } = await get(`/admin/transfer/tokens`);
+
+      trackUsage('didAccessTokenList', { number: data.length, tokenType: TRANSFER_TOKEN_TYPE });
+
+      return data;
+    },
+    {
+      enabled: canRead,
+      onError() {
+        toggleNotification({
+          type: 'warning',
+          message: { id: 'notification.error', defaultMessage: 'An error occured' },
+        });
+      },
+    }
+  );
+
+  const isLoading =
+    canRead &&
+    ((status !== 'success' && status !== 'error') || (status === 'success' && isFetching));
+
+  const deleteMutation = useMutation(
+    async (id) => {
+      await del(`/admin/transfer/tokens/${id}`);
+    },
+    {
+      async onSuccess() {
+        await queryClient.invalidateQueries(['transfer-tokens']);
+      },
+      onError(err) {
+        if (err?.response?.data?.data) {
+          toggleNotification({ type: 'warning', message: err.response.data.data });
+        } else {
+          toggleNotification({
+            type: 'warning',
+            message: { id: 'notification.error', defaultMessage: 'An error occured' },
+          });
+        }
+      },
+    }
+  );
+
+  const shouldDisplayDynamicTable = canRead && transferTokens;
+  const shouldDisplayNoContent = canRead && !transferTokens && !canCreate;
+  const shouldDisplayNoContentWithCreationButton = canRead && !transferTokens && canCreate;
+
+  return (
+    <Main aria-busy={isLoading}>
+      <SettingsPageTitle name="Transfer Tokens" />
+      <HeaderLayout
+        title={formatMessage({
+          id: 'Settings.transferTokens.title',
+          defaultMessage: 'Transfer Tokens',
+        })}
+        subtitle={formatMessage({
+          id: 'Settings.transferTokens.description',
+          defaultMessage: '"List of generated transfer tokens"', // TODO change this message
+        })}
+        primaryAction={
+          canCreate ? (
+            <LinkButton
+              data-testid="create-transfer-token-button"
+              startIcon={<Plus />}
+              size="S"
+              onClick={() =>
+                trackUsage('willAddTokenFromList', {
+                  tokenType: TRANSFER_TOKEN_TYPE,
+                })
+              }
+              to="/settings/transfer-tokens/create"
+            >
+              {formatMessage({
+                id: 'Settings.transferTokens.create',
+                defaultMessage: 'Create new Transfer Token',
+              })}
+            </LinkButton>
+          ) : undefined
+        }
+      />
+      <ContentLayout>
+        {!canRead && <NoPermissions />}
+        {shouldDisplayDynamicTable && (
+          <Table
+            permissions={{ canRead, canDelete, canUpdate }}
+            headers={headers}
+            contentType="trasfer-tokens"
+            rows={transferTokens}
+            isLoading={isLoading}
+            onConfirmDelete={(id) => deleteMutation.mutateAsync(id)}
+            tokens={transferTokens}
+            tokenType={TRANSFER_TOKEN_TYPE}
+          />
+        )}
+        {shouldDisplayNoContentWithCreationButton && (
+          <NoContent
+            content={{
+              id: 'Settings.transferTokens.addFirstToken',
+              defaultMessage: 'Add your first Transfer Token',
+            }}
+            action={
+              <Button variant="secondary" startIcon={<Plus />}>
+                {formatMessage({
+                  id: 'Settings.transferTokens.addNewToken',
+                  defaultMessage: 'Add new Transfer Token',
+                })}
+              </Button>
+            }
+          />
+        )}
+        {shouldDisplayNoContent && (
+          <NoContent
+            content={{
+              id: 'Settings.transferTokens.emptyStateLayout',
+              defaultMessage: 'You don’t have any content yet...',
+            }}
+          />
+        )}
+      </ContentLayout>
+    </Main>
+  );
+};
+
+export default TransferTokenListView;

package/admin/src/pages/SettingsPage/pages/TransferTokens/ListView/utils/tableHeaders.js

@@ -0,0 +1,48 @@
+const tableHeaders = [
+  {
+    name: 'name',
+    key: 'name',
+    metadatas: {
+      label: {
+        id: 'Settings.tokens.ListView.headers.name',
+        defaultMessage: 'Name',
+      },
+      sortable: true,
+    },
+  },
+  {
+    name: 'description',
+    key: 'description',
+    metadatas: {
+      label: {
+        id: 'Settings.tokens.ListView.headers.description',
+        defaultMessage: 'Description',
+      },
+      sortable: false,
+    },
+  },
+  {
+    name: 'createdAt',
+    key: 'createdAt',
+    metadatas: {
+      label: {
+        id: 'Settings.tokens.ListView.headers.createdAt',
+        defaultMessage: 'Created at',
+      },
+      sortable: false,
+    },
+  },
+  {
+    name: 'lastUsedAt',
+    key: 'lastUsedAt',
+    metadatas: {
+      label: {
+        id: 'Settings.tokens.ListView.headers.lastUsedAt',
+        defaultMessage: 'Last used',
+      },
+      sortable: false,
+    },
+  },
+];
+
+export default tableHeaders;

package/admin/src/pages/SettingsPage/pages/TransferTokens/ProtectedCreateView/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { CheckPagePermissions } from '@strapi/helper-plugin';
+import adminPermissions from '../../../../../permissions';
+import EditView from '../EditView';
+
+const ProtectedTransferTokenCreateView = () => {
+  return (
+    <CheckPagePermissions permissions={adminPermissions.settings['transfer-tokens'].create}>
+      <EditView />
+    </CheckPagePermissions>
+  );
+};
+
+export default ProtectedTransferTokenCreateView;

package/admin/src/pages/SettingsPage/pages/TransferTokens/ProtectedEditView/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { CheckPagePermissions } from '@strapi/helper-plugin';
+import adminPermissions from '../../../../../permissions';
+import EditView from '../EditView';
+
+const ProtectedTransferTokenCreateView = () => {
+  return (
+    <CheckPagePermissions permissions={adminPermissions.settings['transfer-tokens'].read}>
+      <EditView />
+    </CheckPagePermissions>
+  );
+};
+
+export default ProtectedTransferTokenCreateView;

package/admin/src/pages/SettingsPage/pages/TransferTokens/ProtectedListView/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { CheckPagePermissions } from '@strapi/helper-plugin';
+import adminPermissions from '../../../../../permissions';
+import ListView from '../ListView';
+
+const ProtectedTransferTokenListView = () => (
+  <CheckPagePermissions permissions={adminPermissions.settings['transfer-tokens'].main}>
+    <ListView />
+  </CheckPagePermissions>
+);
+
+export default ProtectedTransferTokenListView;

package/admin/src/pages/SettingsPage/pages/Users/EditPage/index.js

@@ -19,15 +19,18 @@ import {
 } from '@strapi/helper-plugin';
 import { useQuery } from 'react-query';
 import { Formik } from 'formik';
-import { Box } from '@strapi/design-system/Box';
-import { Button } from '@strapi/design-system/Button';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
-import { Typography } from '@strapi/design-system/Typography';
-import { Main } from '@strapi/design-system/Main';
-import { Stack } from '@strapi/design-system/Stack';
-import ArrowLeft from '@strapi/icons/ArrowLeft';
-import Check from '@strapi/icons/Check';
+import {
+  Box,
+  Button,
+  Grid,
+  GridItem,
+  HeaderLayout,
+  ContentLayout,
+  Typography,
+  Main,
+  Flex,
+} from '@strapi/design-system';
+import { ArrowLeft, Check } from '@strapi/icons';
 import MagicLink from 'ee_else_ce/pages/SettingsPage/pages/Users/components/MagicLink';
 import { formatAPIErrors, getFullName } from '../../../../../utils';
 import { fetchUser, putUser } from './utils/api';
@@ -44,15 +47,12 @@ const EditPage = ({ canUpdate }) => {
   } = useRouteMatch('/settings/users/:id');
   const { push } = useHistory();
   const { setUserDisplayName } = useAppInfos();
-
   const toggleNotification = useNotification();
   const { lockApp, unlockApp } = useOverlayBlocker();
   useFocusWhenNavigate();
 
   const { status, data } = useQuery(['user', id], () => fetchUser(id), {
     retry: false,
-    keepPreviousData: false,
-    staleTime: 1000 * 20,
     onError(err) {
       const status = err.response.status;
 
@@ -106,7 +106,7 @@ const EditPage = ({ canUpdate }) => {
       actions.setErrors(fieldsErrors);
       toggleNotification({
         type: 'warning',
-        message: get(err, 'response.data.message', 'notification.error'),
+        message: get(err, 'response.data.error.message', 'notification.error'),
       });
     }
 
@@ -205,7 +205,7 @@ const EditPage = ({ canUpdate }) => {
                     <MagicLink registrationToken={data.registrationToken} />
                   </Box>
                 )}
-                <Stack spacing={7}>
+                <Flex direction="column" alignItems="stretch" gap={7}>
                   <Box
                     background="neutral0"
                     hasRadius
@@ -215,7 +215,7 @@ const EditPage = ({ canUpdate }) => {
                     paddingLeft={7}
                     paddingRight={7}
                   >
-                    <Stack spacing={4}>
+                    <Flex direction="column" alignItems="stretch" gap={4}>
                       <Typography variant="delta" as="h2">
                         {formatMessage({
                           id: 'app.components.Users.ModalCreateBody.block-title.details',
@@ -239,7 +239,7 @@ const EditPage = ({ canUpdate }) => {
                           });
                         })}
                       </Grid>
-                    </Stack>
+                    </Flex>
                   </Box>
                   <Box
                     background="neutral0"
@@ -250,7 +250,7 @@ const EditPage = ({ canUpdate }) => {
                     paddingLeft={7}
                     paddingRight={7}
                   >
-                    <Stack spacing={4}>
+                    <Flex direction="column" alignItems="stretch" gap={4}>
                       <Typography variant="delta" as="h2">
                         {formatMessage({
                           id: 'global.roles',
@@ -267,9 +267,9 @@ const EditPage = ({ canUpdate }) => {
                           />
                         </GridItem>
                       </Grid>
-                    </Stack>
+                    </Flex>
                   </Box>
-                </Stack>
+                </Flex>
               </ContentLayout>
             </Form>
           );

package/admin/src/pages/SettingsPage/pages/Users/ListPage/CreateAction/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { Button } from '@strapi/design-system';
+import { Envelop } from '@strapi/icons';
+
+const CreateAction = ({ onClick }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Button onClick={onClick} startIcon={<Envelop />} size="S">
+      {formatMessage({
+        id: 'Settings.permissions.users.create',
+        defaultMessage: 'Invite new user',
+      })}
+    </Button>
+  );
+};
+
+CreateAction.propTypes = {
+  onClick: PropTypes.func.isRequired,
+};
+
+export default CreateAction;