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

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

@@ -0,0 +1,263 @@
+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,
+  useAPIErrorHandler,
+} 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';
+
+  const { formatAPIError } = useAPIErrorHandler();
+
+  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(err) {
+        if (err.response.data.error.details?.code === 'INVALID_TOKEN_SALT') {
+          toggleNotification({
+            type: 'warning',
+            message: {
+              id: 'notification.error.invalid.configuration',
+              defaultMessage:
+                'You have an invalid configuration, check your server log for more information.',
+            },
+          });
+        } else {
+          toggleNotification({
+            type: 'warning',
+            message: formatAPIError(err),
+          });
+        }
+      },
+    }
+  );
+
+  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 if (err?.response?.data?.error?.details?.code === 'INVALID_TOKEN_SALT') {
+        toggleNotification({
+          type: 'warning',
+          message: {
+            id: 'notification.error.invalid.configuration',
+            defaultMessage:
+              'You have an invalid configuration, check your server log for more information.',
+          },
+        });
+      } 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} />;
+  }
+
+  const handleErrorRegenerate = (err) => {
+    if (err?.response?.data?.error?.details?.code === 'INVALID_TOKEN_SALT') {
+      toggleNotification({
+        type: 'warning',
+        message: {
+          id: 'notification.error.invalid.configuration',
+          defaultMessage:
+            'You have an invalid configuration, check your server log for more information.',
+        },
+      });
+    } else {
+      toggleNotification({
+        type: 'warning',
+        message: formatAPIError(err),
+      });
+    }
+  };
+
+  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/"
+                onErrorRegenerate={handleErrorRegenerate}
+              />
+              <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,216 @@
+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(err) {
+        console.log('error', err);
+
+        if (err?.response?.data?.error?.details?.code === 'INVALID_TOKEN_SALT') {
+          toggleNotification({
+            type: 'warning',
+            message: {
+              id: 'notification.error.invalid.configuration',
+              defaultMessage:
+                'You have an invalid configuration, check your server log for more information.',
+            },
+          });
+        } else {
+          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 if (err?.response?.data?.error?.details?.code === 'INVALID_TOKEN_SALT') {
+          toggleNotification({
+            type: 'warning',
+            message: {
+              id: 'notification.error.invalid.configuration',
+              defaultMessage:
+                'You have an invalid configuration, check your server log for more information.',
+            },
+          });
+        } 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;