@strapi/admin 4.6.0 → 4.7.0-beta.0

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

@@ -0,0 +1,105 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { Box } from '@strapi/design-system/Box';
+import { Grid, GridItem } from '@strapi/design-system/Grid';
+import { Stack } from '@strapi/design-system/Stack';
+
+import { Typography } from '@strapi/design-system/Typography';
+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,50 @@
+import React from 'react';
+import {
+  SettingsPageTitle,
+  LoadingIndicatorPage,
+  useFocusWhenNavigate,
+} 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 Check from '@strapi/icons/Check';
+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,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/pages/Users/EditPage/utils/api.js

@@ -1,13 +1,16 @@
-import { axiosInstance } from '../../../../../../core/utils';
+import { getFetchClient } from '@strapi/helper-plugin';
 
 const fetchUser = async (id) => {
-  const { data } = await axiosInstance.get(`/admin/users/${id}`);
+  const { get } = getFetchClient();
+  const { data } = await get(`/admin/users/${id}`);
 
   return data.data;
 };
 
 const putUser = async (id, body) => {
-  const { data } = await axiosInstance.put(`/admin/users/${id}`, body);
+  const { put } = getFetchClient();
+
+  const { data } = await put(`/admin/users/${id}`, body);
 
   return data.data;
 };