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

package/admin/src/pages/SettingsPage/components/Tokens/Table/index.js

@@ -1,135 +0,0 @@
-import React from 'react';
-import { useHistory } from 'react-router-dom';
-import PropTypes from 'prop-types';
-import { Typography } from '@strapi/design-system/Typography';
-import { Tbody, Tr, Td } from '@strapi/design-system/Table';
-import { Flex } from '@strapi/design-system/Flex';
-import {
-  RelativeTime,
-  onRowClick,
-  pxToRem,
-  DynamicTable,
-  useQueryParams,
-  useTracking,
-} from '@strapi/helper-plugin';
-import DeleteButton from './DeleteButton';
-import UpdateButton from './UpdateButton';
-import ReadButton from './ReadButton';
-
-const Table = ({ permissions, headers, contentType, isLoading, tokens, onConfirmDelete }) => {
-  const { canDelete, canUpdate, canRead } = permissions;
-  const withBulkActions = canDelete || canUpdate || canRead;
-  const [{ query }] = useQueryParams();
-  const [, sortOrder] = query ? query.sort.split(':') : 'ASC';
-  const {
-    push,
-    location: { pathname },
-  } = useHistory();
-  const { trackUsage } = useTracking(); // TODO: Track different types of tokens
-
-  const sortedTokens = tokens.sort((a, b) => {
-    const comparison = a.name.localeCompare(b.name);
-
-    return sortOrder === 'DESC' ? -comparison : comparison;
-  });
-
-  return (
-    <DynamicTable
-      headers={headers}
-      contentType={contentType}
-      rows={tokens}
-      withBulkActions={withBulkActions}
-      isLoading={isLoading}
-      onConfirmDelete={onConfirmDelete}
-    >
-      <Tbody>
-        {sortedTokens.map((token) => {
-          return (
-            <Tr
-              key={token.id}
-              {...onRowClick({
-                fn() {
-                  trackUsage('willEditTokenFromList');
-                  push(`${pathname}/${token.id}`);
-                },
-                condition: canUpdate,
-              })}
-            >
-              <Td>
-                <Typography textColor="neutral800" fontWeight="bold">
-                  {token.name}
-                </Typography>
-              </Td>
-              <Td maxWidth={pxToRem(250)}>
-                <Typography textColor="neutral800" ellipsis>
-                  {token.description}
-                </Typography>
-              </Td>
-              <Td>
-                <Typography textColor="neutral800">
-                  <RelativeTime timestamp={new Date(token.createdAt)} />
-                </Typography>
-              </Td>
-              <Td>
-                {token.lastUsedAt && (
-                  <Typography textColor="neutral800">
-                    <RelativeTime timestamp={new Date(token.lastUsedAt)} />
-                  </Typography>
-                )}
-              </Td>
-
-              {withBulkActions && (
-                <Td>
-                  <Flex justifyContent="end">
-                    {canUpdate && <UpdateButton tokenName={token.name} tokenId={token.id} />}
-                    {!canUpdate && canRead && (
-                      <ReadButton tokenName={token.name} tokenId={token.id} />
-                    )}
-                    {canDelete && (
-                      <DeleteButton
-                        tokenName={token.name}
-                        onClickDelete={() => onConfirmDelete(token.id)}
-                      />
-                    )}
-                  </Flex>
-                </Td>
-              )}
-            </Tr>
-          );
-        })}
-      </Tbody>
-    </DynamicTable>
-  );
-};
-
-Table.propTypes = {
-  tokens: PropTypes.array,
-  permissions: PropTypes.shape({
-    canRead: PropTypes.bool,
-    canDelete: PropTypes.bool,
-    canUpdate: PropTypes.bool,
-  }).isRequired,
-  headers: PropTypes.arrayOf(
-    PropTypes.shape({
-      cellFormatter: PropTypes.func,
-      key: PropTypes.string.isRequired,
-      metadatas: PropTypes.shape({
-        label: PropTypes.string.isRequired,
-        sortable: PropTypes.bool,
-      }).isRequired,
-      name: PropTypes.string.isRequired,
-    })
-  ),
-  contentType: PropTypes.string.isRequired,
-  isLoading: PropTypes.bool,
-  onConfirmDelete: PropTypes.func,
-};
-
-Table.defaultProps = {
-  tokens: [],
-  headers: [],
-  isLoading: false,
-  onConfirmDelete() {},
-};
-
-export default Table;

package/admin/src/pages/SettingsPage/components/Tokens/TokenDescription/index.js

@@ -1,51 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { Textarea } from '@strapi/design-system/Textarea';
-
-const TokenDescription = ({ errors, values, onChange, canEditInputs }) => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <Textarea
-      label={formatMessage({
-        id: 'Settings.tokens.form.description',
-        defaultMessage: 'Description',
-      })}
-      name="description"
-      error={
-        errors.description
-          ? formatMessage(
-              errors.description?.id
-                ? errors.description
-                : {
-                    id: errors.description,
-                    defaultMessage: errors.description,
-                  }
-            )
-          : null
-      }
-      onChange={onChange}
-      disabled={!canEditInputs}
-    >
-      {values.description}
-    </Textarea>
-  );
-};
-
-TokenDescription.propTypes = {
-  errors: PropTypes.shape({
-    description: PropTypes.string,
-  }),
-  onChange: PropTypes.func.isRequired,
-  canEditInputs: PropTypes.bool.isRequired,
-  values: PropTypes.shape({
-    description: PropTypes.string,
-  }).isRequired,
-};
-
-TokenDescription.defaultProps = {
-  errors: {},
-};
-
-export default TokenDescription;

package/admin/src/pages/SettingsPage/components/Tokens/TokenName/index.js

@@ -1,46 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { TextInput } from '@strapi/design-system/TextInput';
-
-const TokenName = ({ errors, values, onChange, canEditInputs }) => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <TextInput
-      name="name"
-      error={
-        errors.name
-          ? formatMessage(
-              errors.name?.id ? errors.name : { id: errors.name, defaultMessage: errors.name }
-            )
-          : null
-      }
-      label={formatMessage({
-        id: 'Settings.tokens.form.name',
-        defaultMessage: 'Name',
-      })}
-      onChange={onChange}
-      value={values.name}
-      disabled={!canEditInputs}
-      required
-    />
-  );
-};
-
-TokenName.propTypes = {
-  errors: PropTypes.shape({
-    name: PropTypes.string,
-  }),
-  onChange: PropTypes.func.isRequired,
-  canEditInputs: PropTypes.bool.isRequired,
-  values: PropTypes.shape({
-    name: PropTypes.string,
-  }).isRequired,
-};
-
-TokenName.defaultProps = {
-  errors: {},
-};
-
-export default TokenName;

package/admin/src/pages/SettingsPage/components/Tokens/TokenTypeSelect/index.js

@@ -1,69 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-
-import { Select, Option } from '@strapi/design-system/Select';
-
-const TokenTypeSelect = ({ errors, values, onChange, canEditInputs, options, label }) => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <Select
-      name="type"
-      label={formatMessage({
-        id: label.id,
-        defaultMessage: label.defaultMessage,
-      })}
-      value={values?.type}
-      error={
-        errors.type
-          ? formatMessage(
-              errors.type?.id ? errors.type : { id: errors.type, defaultMessage: errors.type }
-            )
-          : null
-      }
-      onChange={onChange}
-      placeholder="Select"
-      required
-      disabled={!canEditInputs}
-    >
-      {options &&
-        options.map(({ value, label }) => (
-          <Option key={value} value={value}>
-            {formatMessage(label)}
-          </Option>
-        ))}
-    </Select>
-  );
-};
-
-TokenTypeSelect.propTypes = {
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.shape({
-        id: PropTypes.string,
-        defaultMessage: PropTypes.string,
-      }),
-      value: PropTypes.string,
-    })
-  ),
-  errors: PropTypes.shape({
-    type: PropTypes.string,
-  }),
-  onChange: PropTypes.func.isRequired,
-  canEditInputs: PropTypes.bool.isRequired,
-  values: PropTypes.shape({
-    type: PropTypes.string,
-  }).isRequired,
-  label: PropTypes.shape({
-    id: PropTypes.string,
-    defaultMessage: PropTypes.string,
-  }).isRequired,
-};
-
-TokenTypeSelect.defaultProps = {
-  errors: {},
-  options: [],
-};
-
-export default TokenTypeSelect;

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

@@ -1,105 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,201 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

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

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

@@ -1,10 +0,0 @@
-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;