@strapi/admin 4.6.2 → 4.7.0-exp.3d6a31eb083e9d44afcf98f68c107fb7567e5720

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

@@ -11,19 +11,22 @@ import {
   useRBAC,
   useFetchClient,
 } from '@strapi/helper-plugin';
-import { Main } from '@strapi/design-system';
+import { Main, ContentLayout, Stack } from '@strapi/design-system';
 import { Formik } from 'formik';
 import { useRouteMatch, useHistory } from 'react-router-dom';
 import { useQuery } from 'react-query';
 import { formatAPIErrors } from '../../../../../utils';
 import { schema } from './utils';
 import LoadingView from './components/LoadingView';
-import FormHead from './components/FormHead';
-import FormBody from './components/FormBody';
 import adminPermissions from '../../../../../permissions';
 import { ApiTokenPermissionsContextProvider } from '../../../../../contexts/ApiTokenPermissions';
 import init from './init';
 import reducer, { initialState } from './reducer';
+import Permissions from './components/Permissions';
+import FormApiTokenContainer from './components/FormApiTokenContainer';
+import TokenBox from '../../../components/Tokens/TokenBox';
+import FormHead from '../../../components/Tokens/FormHead';
+import { API_TOKEN_TYPE } from '../../../components/Tokens/constants';
 
 const MSG_ERROR_NAME_TAKEN = 'Name already taken';
 
@@ -105,7 +108,9 @@ const ApiTokenCreateView = () => {
   );
 
   useEffect(() => {
-    trackUsageRef.current(isCreating ? 'didAddTokenFromList' : 'didEditTokenFromList');
+    trackUsageRef.current(isCreating ? 'didAddTokenFromList' : 'didEditTokenFromList', {
+      tokenType: API_TOKEN_TYPE,
+    });
   }, [isCreating]);
 
   const { status } = useQuery(
@@ -150,7 +155,9 @@ const ApiTokenCreateView = () => {
   );
 
   const handleSubmit = async (body, actions) => {
-    trackUsageRef.current(isCreating ? 'willCreateToken' : 'willEditToken');
+    trackUsageRef.current(isCreating ? 'willCreateToken' : 'willEditToken', {
+      tokenType: API_TOKEN_TYPE,
+    });
     lockApp();
     const lifespanVal =
       body.lifespan && parseInt(body.lifespan, 10) && body.lifespan !== '0'
@@ -197,6 +204,7 @@ const ApiTokenCreateView = () => {
 
       trackUsageRef.current(isCreating ? 'didCreateToken' : 'didEditToken', {
         type: apiToken.type,
+        tokenType: API_TOKEN_TYPE,
       });
     } catch (err) {
       const errors = formatAPIErrors(err.response.data);
@@ -280,22 +288,43 @@ const ApiTokenCreateView = () => {
             return (
               <Form>
                 <FormHead
-                  apiToken={apiToken}
-                  setApiToken={setApiToken}
+                  backUrl="/settings/api-tokens"
+                  title={{
+                    id: 'Settings.apiTokens.createPage.title',
+                    defaultMessage: 'Create API Token',
+                  }}
+                  token={apiToken}
+                  setToken={setApiToken}
                   canEditInputs={canEditInputs}
                   canRegenerate={canRegenerate}
                   isSubmitting={isSubmitting}
+                  regenerateUrl="/admin/api-tokens/"
                 />
-                <FormBody
-                  apiToken={apiToken}
-                  errors={errors}
-                  onChange={handleChange}
-                  canEditInputs={canEditInputs}
-                  isCreating={isCreating}
-                  values={values}
-                  onDispatch={dispatch}
-                  setHasChangedPermissions={setHasChangedPermissions}
-                />
+
+                <ContentLayout>
+                  <Stack spacing={6}>
+                    {Boolean(apiToken?.name) && (
+                      <TokenBox token={apiToken?.accessKey} tokenType={API_TOKEN_TYPE} />
+                    )}
+                    <FormApiTokenContainer
+                      errors={errors}
+                      onChange={handleChange}
+                      canEditInputs={canEditInputs}
+                      isCreating={isCreating}
+                      values={values}
+                      apiToken={apiToken}
+                      onDispatch={dispatch}
+                      setHasChangedPermissions={setHasChangedPermissions}
+                    />
+                    <Permissions
+                      disabled={
+                        !canEditInputs ||
+                        values?.type === 'read-only' ||
+                        values?.type === 'full-access'
+                      }
+                    />
+                  </Stack>
+                </ContentLayout>
               </Form>
             );
           }}

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

@@ -11,7 +11,6 @@ import {
   NoPermissions,
   useRBAC,
   NoContent,
-  DynamicTable,
   useTracking,
   useGuidedTour,
   useFetchClient,
@@ -22,7 +21,8 @@ import { Plus } from '@strapi/icons';
 
 import adminPermissions from '../../../../../permissions';
 import tableHeaders from './utils/tableHeaders';
-import TableRows from './DynamicTable';
+import Table from '../../../components/Tokens/Table';
+import { API_TOKEN_TYPE } from '../../../components/Tokens/constants';
 
 const ApiTokenListView = () => {
   useFocusWhenNavigate();
@@ -63,12 +63,14 @@ const ApiTokenListView = () => {
   } = useQuery(
     ['api-tokens'],
     async () => {
-      trackUsage('willAccessTokenList');
+      trackUsage('willAccessTokenList', {
+        tokenType: API_TOKEN_TYPE,
+      });
       const {
         data: { data },
       } = await get(`/admin/api-tokens`);
 
-      trackUsage('didAccessTokenList', { number: data.length });
+      trackUsage('didAccessTokenList', { number: data.length, tokenType: API_TOKEN_TYPE });
 
       return data;
     },
@@ -128,7 +130,11 @@ const ApiTokenListView = () => {
               data-testid="create-api-token-button"
               startIcon={<Plus />}
               size="S"
-              onClick={() => trackUsage('willAddTokenFromList')}
+              onClick={() =>
+                trackUsage('willAddTokenFromList', {
+                  tokenType: API_TOKEN_TYPE,
+                })
+              }
               to="/settings/api-tokens/create"
             >
               {formatMessage({
@@ -142,22 +148,16 @@ const ApiTokenListView = () => {
       <ContentLayout>
         {!canRead && <NoPermissions />}
         {shouldDisplayDynamicTable && (
-          <DynamicTable
+          <Table
+            permissions={{ canRead, canDelete, canUpdate }}
             headers={headers}
             contentType="api-tokens"
             rows={apiTokens}
-            withBulkActions={canDelete || canUpdate || canRead}
             isLoading={isLoading}
             onConfirmDelete={(id) => deleteMutation.mutateAsync(id)}
-          >
-            <TableRows
-              canRead={canRead}
-              canDelete={canDelete}
-              canUpdate={canUpdate}
-              rows={apiTokens}
-              withBulkActions={canDelete || canUpdate || canRead}
-            />
-          </DynamicTable>
+            tokens={apiTokens}
+            tokenType={API_TOKEN_TYPE}
+          />
         )}
         {shouldDisplayNoContentWithCreationButton && (
           <NoContent

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

@@ -0,0 +1,101 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { Box, Grid, GridItem, Stack, Typography } from '@strapi/design-system';
+import LifeSpanInput from '../../../../../components/Tokens/LifeSpanInput';
+import TokenName from '../../../../../components/Tokens/TokenName';
+import TokenDescription from '../../../../../components/Tokens/TokenDescription';
+
+const FormTransferTokenContainer = ({
+  errors,
+  onChange,
+  canEditInputs,
+  isCreating,
+  values,
+  transferToken,
+}) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Box
+      background="neutral0"
+      hasRadius
+      shadow="filterShadow"
+      paddingTop={6}
+      paddingBottom={6}
+      paddingLeft={7}
+      paddingRight={7}
+    >
+      <Stack spacing={4}>
+        <Typography variant="delta" as="h2">
+          {formatMessage({
+            id: 'global.details',
+            defaultMessage: 'Details',
+          })}
+        </Typography>
+        <Grid gap={5}>
+          <GridItem key="name" col={6} xs={12}>
+            <TokenName
+              errors={errors}
+              values={values}
+              canEditInputs={canEditInputs}
+              onChange={onChange}
+            />
+          </GridItem>
+          <GridItem key="description" col={6} xs={12}>
+            <TokenDescription
+              errors={errors}
+              values={values}
+              canEditInputs={canEditInputs}
+              onChange={onChange}
+            />
+          </GridItem>
+          <GridItem key="lifespan" col={6} xs={12}>
+            <LifeSpanInput
+              isCreating={isCreating}
+              errors={errors}
+              values={values}
+              onChange={onChange}
+              token={transferToken}
+            />
+          </GridItem>
+        </Grid>
+      </Stack>
+    </Box>
+  );
+};
+
+FormTransferTokenContainer.propTypes = {
+  errors: PropTypes.shape({
+    name: PropTypes.string,
+    description: PropTypes.string,
+    lifespan: PropTypes.string,
+    type: PropTypes.string,
+  }),
+  onChange: PropTypes.func.isRequired,
+  canEditInputs: PropTypes.bool.isRequired,
+  values: PropTypes.shape({
+    name: PropTypes.string,
+    description: PropTypes.string,
+    lifespan: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    type: PropTypes.string,
+  }).isRequired,
+  isCreating: PropTypes.bool.isRequired,
+  transferToken: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    type: PropTypes.string,
+    lifespan: PropTypes.string,
+    name: PropTypes.string,
+    accessKey: PropTypes.string,
+    permissions: PropTypes.array,
+    description: PropTypes.string,
+    createdAt: PropTypes.string,
+  }),
+};
+
+FormTransferTokenContainer.defaultProps = {
+  errors: {},
+  transferToken: {},
+};
+
+export default FormTransferTokenContainer;

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import {
+  SettingsPageTitle,
+  LoadingIndicatorPage,
+  useFocusWhenNavigate,
+} from '@strapi/helper-plugin';
+import { HeaderLayout, ContentLayout, Main, Button } from '@strapi/design-system';
+import { Check } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+
+const LoadingView = ({ transferTokenName }) => {
+  const { formatMessage } = useIntl();
+  useFocusWhenNavigate();
+
+  return (
+    <Main aria-busy="true">
+      <SettingsPageTitle name="Transfer Tokens" />
+      <HeaderLayout
+        primaryAction={
+          <Button disabled startIcon={<Check />} type="button" size="L">
+            {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}
+          </Button>
+        }
+        title={
+          transferTokenName ||
+          formatMessage({
+            id: 'Settings.transferTokens.createPage.title',
+            defaultMessage: 'Create Transfer Token',
+          })
+        }
+      />
+      <ContentLayout>
+        <LoadingIndicatorPage />
+      </ContentLayout>
+    </Main>
+  );
+};
+
+LoadingView.defaultProps = {
+  transferTokenName: null,
+};
+
+LoadingView.propTypes = {
+  transferTokenName: PropTypes.string,
+};
+
+export default LoadingView;

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

@@ -0,0 +1,219 @@
+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, Stack } 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;
+
+    try {
+      const {
+        data: { data: response },
+      } = isCreating
+        ? await post(`/admin/transfer/tokens`, {
+            ...body,
+            lifespan: lifespanVal,
+            permissions: ['push'],
+          })
+        : await put(`/admin/transfer/tokens/${id}`, {
+            name: body.name,
+            description: body.description,
+            type: body.type,
+            permissions: ['push'],
+          });
+
+      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?.type,
+        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,
+        }}
+        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>
+                <Stack spacing={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}
+                  />
+                </Stack>
+              </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,10 @@
+import * as yup from 'yup';
+import { translatedErrors } from '@strapi/helper-plugin';
+
+const schema = yup.object().shape({
+  name: yup.string(translatedErrors.string).required(translatedErrors.required),
+  description: yup.string().nullable(),
+  lifespan: yup.number().integer().min(0).nullable().defined(translatedErrors.required),
+});
+
+export default schema;