Add token type select to frontend

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

@@ -5,6 +5,7 @@ import { Box, Grid, GridItem, Flex, Typography } from '@strapi/design-system';
 import LifeSpanInput from '../../../../../components/Tokens/LifeSpanInput';
 import TokenName from '../../../../../components/Tokens/TokenName';
 import TokenDescription from '../../../../../components/Tokens/TokenDescription';
+import TokenTypeSelect from '../../../../../components/Tokens/TokenTypeSelect';
 
 const FormTransferTokenContainer = ({
   errors,
@@ -16,6 +17,30 @@ const FormTransferTokenContainer = ({
 }) => {
   const { formatMessage } = useIntl();
 
+  const typeOptions = [
+    {
+      value: 'push',
+      label: {
+        id: 'Settings.transferTokens.types.push',
+        defaultMessage: 'Push',
+      },
+    },
+    {
+      value: 'pull',
+      label: {
+        id: 'Settings.transferTokens.types.pull',
+        defaultMessage: 'Pull',
+      },
+    },
+    {
+      value: 'push-pull',
+      label: {
+        id: 'Settings.transferTokens.types.pull',
+        defaultMessage: 'Push & pull',
+      },
+    },
+  ];
+
   return (
     <Box
       background="neutral0"
@@ -59,6 +84,21 @@ const FormTransferTokenContainer = ({
               token={transferToken}
             />
           </GridItem>
+          <GridItem key="type" col={6} xs={12}>
+            <TokenTypeSelect
+              values={values}
+              errors={errors}
+              label={{
+                id: 'Settings.tokens.form.type',
+                defaultMessage: 'Token type',
+              }}
+              onChange={(value) => {
+                onChange({ target: { name: 'type', value } });
+              }}
+              options={typeOptions}
+              canEditInputs={canEditInputs}
+            />
+          </GridItem>
         </Grid>
       </Flex>
     </Box>

packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/index.js

@@ -92,6 +92,8 @@ const TransferTokenCreateView = () => {
         ? parseInt(body.lifespan, 10)
         : null;
 
+    const permissions = body.type.split('-');
+
     try {
       const {
         data: { data: response },
@@ -99,13 +101,13 @@ const TransferTokenCreateView = () => {
         ? await post(`/admin/transfer/tokens`, {
             ...body,
             lifespan: lifespanVal,
-            permissions: ['push'],
+            permissions,
           })
         : await put(`/admin/transfer/tokens/${id}`, {
             name: body.name,
             description: body.description,
             type: body.type,
-            permissions: ['push'],
+            permissions,
           });
 
       unlockApp();
@@ -173,6 +175,7 @@ const TransferTokenCreateView = () => {
           lifespan: transferToken?.lifespan
             ? transferToken.lifespan.toString()
             : transferToken?.lifespan,
+          type: transferToken?.permissions.join('-'),
         }}
         enableReinitialize
         onSubmit={(body, actions) => handleSubmit(body, actions)}

packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/utils/schema.js

@@ -5,6 +5,7 @@ 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),
+  type: yup.string(translatedErrors.string).required(translatedErrors.required),
 });
 
 export default schema;