@strapi/admin 4.6.1 → 4.7.0-beta.0

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

@@ -0,0 +1,201 @@
+import React, { useState } 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,
+  useGuidedTour,
+  useRBAC,
+  useFetchClient,
+} from '@strapi/helper-plugin';
+import { Main } from '@strapi/design-system/Main';
+import { Stack } from '@strapi/design-system/Stack';
+import { ContentLayout } from '@strapi/design-system/Layout';
+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';
+
+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 { 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 { 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) => {
+    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',
+            }),
+      });
+    } 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} />}
+                  <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;

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

@@ -0,0 +1,182 @@
+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,
+  useGuidedTour,
+  LinkButton,
+  useFetchClient,
+} from '@strapi/helper-plugin';
+import { HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
+import { Main } from '@strapi/design-system/Main';
+import { Button } from '@strapi/design-system/Button';
+import Plus from '@strapi/icons/Plus';
+
+import adminPermissions from '../../../../../permissions';
+import tableHeaders from './utils/tableHeaders';
+import Table from '../../../components/Tokens/Table';
+
+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 { 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 () => {
+      const {
+        data: { data },
+      } = await get(`/admin/transfer/tokens`);
+
+      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"
+              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}
+          />
+        )}
+        {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.transferTokens.ListView.headers.name',
+        defaultMessage: 'Name',
+      },
+      sortable: true,
+    },
+  },
+  {
+    name: 'description',
+    key: 'description',
+    metadatas: {
+      label: {
+        id: 'Settings.transferTokens.ListView.headers.description',
+        defaultMessage: 'Description',
+      },
+      sortable: false,
+    },
+  },
+  {
+    name: 'createdAt',
+    key: 'createdAt',
+    metadatas: {
+      label: {
+        id: 'Settings.transferTokens.ListView.headers.createdAt',
+        defaultMessage: 'Created at',
+      },
+      sortable: false,
+    },
+  },
+  {
+    name: 'lastUsedAt',
+    key: 'lastUsedAt',
+    metadatas: {
+      label: {
+        id: 'Settings.transferTokens.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/utils/defaultRoutes.js

@@ -123,6 +123,39 @@ const defaultRoutes = [
     to: '/settings/api-tokens/:id',
     exact: true,
   },
+  {
+    async Component() {
+      const component = await import(
+        /* webpackChunkName: "transfer-tokens-create-page" */ '../pages/TransferTokens/ProtectedCreateView'
+      );
+
+      return component;
+    },
+    to: '/settings/transfer-tokens/create',
+    exact: true,
+  },
+  {
+    async Component() {
+      const component = await import(
+        /* webpackChunkName: "transfer-tokens-list-page" */ '../pages/TransferTokens/ProtectedListView'
+      );
+
+      return component;
+    },
+    to: '/settings/transfer-tokens',
+    exact: true,
+  },
+  {
+    async Component() {
+      const component = await import(
+        /* webpackChunkName: "transfer-tokens-edit-page" */ '../pages/TransferTokens/ProtectedEditView'
+      );
+
+      return component;
+    },
+    to: '/settings/transfer-tokens/:id',
+    exact: true,
+  },
 ];
 
 export default defaultRoutes;

package/admin/src/permissions/defaultPermissions.js

@@ -87,6 +87,14 @@ const permissions = {
       update: [{ action: 'admin::api-tokens.update', subject: null }],
       regenerate: [{ action: 'admin::api-tokens.regenerate', subject: null }],
     },
+    'transfer-tokens': {
+      main: [{ action: 'admin::transfer.tokens.access', subject: null }],
+      create: [{ action: 'admin::transfer.tokens.create', subject: null }],
+      delete: [{ action: 'admin::transfer.tokens.delete', subject: null }],
+      read: [{ action: 'admin::transfer.tokens.read', subject: null }],
+      update: [{ action: 'admin::transfer.tokens.update', subject: null }],
+      regenerate: [{ action: 'admin::transfer.tokens.regenerate', subject: null }],
+    },
     'project-settings': {
       read: [{ action: 'admin::project-settings.read', subject: null }],
       update: [{ action: 'admin::project-settings.update', subject: null }],

package/admin/src/translations/en.json

@@ -109,6 +109,17 @@
   "Settings.apiTokens.popUpWarning.message": "Are you sure you want to regenerate this token?",
   "Settings.apiTokens.Button.cancel": "Cancel",
   "Settings.apiTokens.Button.regenerate": "Regenerate",
+  "Settings.transferTokens.title": "Transfer Tokens",
+  "Settings.transferTokens.description": "List of generated transfer tokens",
+  "Settings.transferTokens.create": "Create new Transfer Token",
+  "Settings.transferTokens.addFirstToken": "Add your first Transfer Token",
+  "Settings.transferTokens.addNewToken": "Add new Transfer Token",
+  "Settings.transferTokens.emptyStateLayout": "You don’t have any content yet...",
+  "Settings.transferTokens.ListView.headers.name": "Name",
+  "Settings.transferTokens.ListView.headers.description": "Description",
+  "Settings.transferTokens.ListView.headers.type": "Token type",
+  "Settings.transferTokens.ListView.headers.createdAt": "Created at",
+  "Settings.transferTokens.ListView.headers.lastUsedAt": "Last used",
   "Settings.application.description": "Administration panel’s global information",
   "Settings.application.edition-title": "current plan",
   "Settings.application.get-help": "Get help",
@@ -433,7 +444,11 @@
   "app.components.Official": "Official",
   "app.components.Onboarding.help.button": "Help button",
   "app.components.Onboarding.label.completed": "% completed",
-  "app.components.Onboarding.title": "Get Started Videos",
+  "app.components.Onboarding.title": "Get started videos",
+  "app.components.Onboarding.link.more-videos": "Watch more videos",
+  "app.components.Onboarding.link.build-content": "Build a content architecture",
+  "app.components.Onboarding.link.manage-content": "Add & manage content",
+  "app.components.Onboarding.link.manage-media": "Manage media",
   "app.components.PluginCard.Button.label.download": "Download",
   "app.components.PluginCard.Button.label.install": "Already installed",
   "app.components.PluginCard.PopUpWarning.install.impossible.autoReload.needed": "The autoReload feature needs to be enabled. Please start your app with `yarn develop`.",
@@ -841,6 +856,8 @@
   "notification.success.title": "Success:",
   "notification.success.tokencreated": "API Token successfully created",
   "notification.success.tokenedited": "API Token successfully edited",
+  "notification.success.transfertokencreated": "Transfer Token successfully created",
+  "notification.success.transfertokenedited": "Transfer Token successfully edited",
   "notification.error.tokennamenotunique": "Name already assigned to another token",
   "notification.version.update.message": "A new version of Strapi is available!",
   "notification.warning.title": "Warning:",