@strapi/admin 4.6.2 → 4.7.0-exp.117579f4c13806c2cd518e7d7d2f9d0c8a20107d

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

@@ -0,0 +1,194 @@
+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() {
+        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"
+              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.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

@@ -74,6 +74,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",
@@ -350,6 +361,8 @@
   "app.components.BlockLink.documentation.content": "Discover the essential concepts, guides and instructions.",
   "app.components.BlockLink.tutorial": "Tutorials",
   "app.components.BlockLink.tutorial.content": "Follow step-by-step instructions to use and customize Strapi.",
+  "app.components.BlockLink.cloud": "Strapi Cloud",
+  "app.components.BlockLink.cloud.content": "A fully composable, and collaborative platform to boost your team velocity.",
   "app.components.Button.cancel": "Cancel",
   "app.components.Button.confirm": "Confirm",
   "app.components.Button.reset": "Reset",
@@ -846,6 +859,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:",