@strapi/admin 4.4.0-beta.3 → 4.4.0-beta.4

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/init.js

@@ -0,0 +1,13 @@
+import { transformPermissionsData } from './utils';
+
+const init = (state, permissions = []) => {
+  return {
+    ...state,
+    selectedAction: null,
+    routes: [],
+    selectedActions: [],
+    data: transformPermissionsData(permissions),
+  };
+};
+
+export default init;

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/reducer.js

@@ -0,0 +1,72 @@
+/* eslint-disable consistent-return */
+import produce from 'immer';
+import { pull } from 'lodash';
+import { transformPermissionsData } from './utils';
+
+export const initialState = {
+  data: {},
+  selectedActions: [],
+};
+
+const reducer = (state, action) =>
+  produce(state, (draftState) => {
+    switch (action.type) {
+      case 'ON_CHANGE': {
+        if (draftState.selectedActions.includes(action.value)) {
+          pull(draftState.selectedActions, action.value);
+        } else {
+          draftState.selectedActions.push(action.value);
+        }
+        break;
+      }
+      case 'SELECT_ALL_IN_PERMISSION': {
+        const areAllSelected = action.value.every((item) =>
+          draftState.selectedActions.includes(item.actionId)
+        );
+
+        if (areAllSelected) {
+          action.value.forEach((item) => {
+            pull(draftState.selectedActions, item.actionId);
+          });
+        } else {
+          action.value.forEach((item) => {
+            draftState.selectedActions.push(item.actionId);
+          });
+        }
+        break;
+      }
+
+      case 'SELECT_ALL_ACTIONS': {
+        draftState.selectedActions = [...draftState.data.allActionsIds];
+
+        break;
+      }
+      case 'ON_CHANGE_READ_ONLY': {
+        const onlyReadOnlyActions = draftState.data.allActionsIds.filter(
+          (actionId) => actionId.includes('find') || actionId.includes('findOne')
+        );
+        draftState.selectedActions = [...onlyReadOnlyActions];
+        break;
+      }
+      case 'UPDATE_PERMISSIONS_LAYOUT': {
+        draftState.data = transformPermissionsData(action.value);
+        break;
+      }
+      case 'UPDATE_ROUTES': {
+        draftState.routes = { ...action.value };
+        break;
+      }
+      case 'UPDATE_PERMISSIONS': {
+        draftState.selectedActions = [...action.value];
+        break;
+      }
+      case 'SET_SELECTED_ACTION': {
+        draftState.selectedAction = action.value;
+        break;
+      }
+      default:
+        return draftState;
+    }
+  });
+
+export default reducer;

package/admin/src/pages/SettingsPage/pages/ApiTokens/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/ApiTokens/EditView/utils/index.js

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

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

@@ -5,9 +5,10 @@ const schema = yup.object().shape({
   name: yup.string(translatedErrors.string).required(translatedErrors.required),
   type: yup
     .string(translatedErrors.string)
-    .oneOf(['read-only', 'full-access'])
+    .oneOf(['read-only', 'full-access', 'custom'])
     .required(translatedErrors.required),
   description: yup.string().nullable(),
+  lifespan: yup.number().integer().min(1).nullable().defined(translatedErrors.required),
 });
 
 export default schema;

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/utils/transformPermissionsData.js

@@ -0,0 +1,36 @@
+import { flatten } from 'lodash';
+
+const transformPermissionsData = (data) => {
+  const layout = {
+    allActionsIds: [],
+    permissions: [],
+  };
+
+  layout.permissions = Object.keys(data).map((apiId) => ({
+    apiId,
+    label: apiId.split('::')[1],
+    controllers: flatten(
+      Object.keys(data[apiId].controllers).map((controller) => ({
+        controller,
+        actions: flatten(
+          data[apiId].controllers[controller].map((action) => {
+            const actionId = `${apiId}.${controller}.${action}`;
+
+            if (apiId.includes('api::')) {
+              layout.allActionsIds.push(actionId);
+            }
+
+            return {
+              action,
+              actionId,
+            };
+          })
+        ),
+      }))
+    ),
+  }));
+
+  return layout;
+};
+
+export default transformPermissionsData;

package/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/DefaultButton/index.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { Link } from '@strapi/helper-plugin';
+import { useHistory } from 'react-router-dom';
+import styled from 'styled-components';
+
+const MESSAGES_MAP = {
+  edit: {
+    id: 'app.component.table.edit',
+    defaultMessage: 'Edit {target}',
+  },
+  read: {
+    id: 'app.component.table.read',
+    defaultMessage: 'Read {target}',
+  },
+};
+
+const LinkStyled = styled(Link)`
+  svg {
+    path {
+      fill: ${({ theme }) => theme.colors.neutral500};
+    }
+  }
+
+  &:hover,
+  &:focus {
+    svg {
+      path {
+        fill: ${({ theme }) => theme.colors.neutral800};
+      }
+    }
+  }
+`;
+
+const DefaultButton = ({ tokenName, tokenId, buttonType, children }) => {
+  const { formatMessage } = useIntl();
+  const {
+    location: { pathname },
+  } = useHistory();
+
+  return (
+    <LinkStyled
+      to={`${pathname}/${tokenId}`}
+      title={formatMessage(MESSAGES_MAP[buttonType], { target: tokenName })}
+    >
+      {children}
+    </LinkStyled>
+  );
+};
+
+DefaultButton.propTypes = {
+  tokenName: PropTypes.string.isRequired,
+  tokenId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  buttonType: PropTypes.string,
+  children: PropTypes.node.isRequired,
+};
+
+DefaultButton.defaultProps = {
+  buttonType: 'edit',
+};
+
+export default DefaultButton;

package/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/DeleteButton/index.js

@@ -24,6 +24,7 @@ const DeleteButton = ({ tokenName, onClickDelete }) => {
           },
           { target: `${tokenName}` }
         )}
+        name="delete"
         noBorder
         icon={<Trash />}
       />

package/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/ReadButton/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import Eye from '@strapi/icons/Eye';
+import PropTypes from 'prop-types';
+import DefaultButton from '../DefaultButton';
+
+const ReadButton = ({ tokenName, tokenId }) => {
+  return (
+    <DefaultButton tokenName={tokenName} tokenId={tokenId} buttonType="read">
+      <Eye />
+    </DefaultButton>
+  );
+};
+
+ReadButton.propTypes = {
+  tokenName: PropTypes.string.isRequired,
+  tokenId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+};
+
+export default ReadButton;

package/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/UpdateButton/index.js

@@ -1,46 +1,13 @@
 import React from 'react';
 import Pencil from '@strapi/icons/Pencil';
-import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
-import { Link } from '@strapi/helper-plugin';
-import { useHistory } from 'react-router-dom';
-import styled from 'styled-components';
-
-const LinkUpdate = styled(Link)`
-  svg {
-    path {
-      fill: ${({ theme }) => theme.colors.neutral500};
-    }
-  }
-
-  &:hover {
-    svg {
-      path {
-        fill: ${({ theme }) => theme.colors.neutral800};
-      }
-    }
-  }
-`;
+import DefaultButton from '../DefaultButton';
 
 const UpdateButton = ({ tokenName, tokenId }) => {
-  const { formatMessage } = useIntl();
-  const {
-    location: { pathname },
-  } = useHistory();
-
   return (
-    <LinkUpdate
-      to={`${pathname}/${tokenId}`}
-      title={formatMessage(
-        {
-          id: 'app.component.table.edit',
-          defaultMessage: 'Edit {target}',
-        },
-        { target: `${tokenName}` }
-      )}
-    >
+    <DefaultButton tokenName={tokenName} tokenId={tokenId}>
       <Pencil />
-    </LinkUpdate>
+    </DefaultButton>
   );
 };
 

package/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/index.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 
@@ -13,12 +12,11 @@ import {
   pxToRem,
   useTracking,
 } from '@strapi/helper-plugin';
-
 import DeleteButton from './DeleteButton';
 import UpdateButton from './UpdateButton';
+import ReadButton from './ReadButton';
 
-const TableRows = ({ canDelete, canUpdate, onClickDelete, withBulkActions, rows }) => {
-  const { formatMessage } = useIntl();
+const TableRows = ({ canDelete, canUpdate, canRead, onClickDelete, withBulkActions, rows }) => {
   const [{ query }] = useQueryParams();
   const [, sortOrder] = query.sort.split(':');
   const {
@@ -59,22 +57,24 @@ const TableRows = ({ canDelete, canUpdate, onClickDelete, withBulkActions, rows
             </Td>
             <Td>
               <Typography textColor="neutral800">
-                {formatMessage({
-                  id: `Settings.apiTokens.types.${apiToken.type}`,
-                  defaultMessage: 'Type unknown',
-                })}
+                <RelativeTime timestamp={new Date(apiToken.createdAt)} />
               </Typography>
             </Td>
             <Td>
-              <Typography textColor="neutral800">
-                <RelativeTime timestamp={new Date(apiToken.createdAt)} />
-              </Typography>
+              {apiToken.lastUsedAt && (
+                <Typography textColor="neutral800">
+                  <RelativeTime timestamp={new Date(apiToken.lastUsedAt)} />
+                </Typography>
+              )}
             </Td>
 
             {withBulkActions && (
               <Td>
                 <Flex justifyContent="end">
                   {canUpdate && <UpdateButton tokenName={apiToken.name} tokenId={apiToken.id} />}
+                  {!canUpdate && canRead && (
+                    <ReadButton tokenName={apiToken.name} tokenId={apiToken.id} />
+                  )}
                   {canDelete && (
                     <DeleteButton
                       tokenName={apiToken.name}
@@ -94,6 +94,7 @@ const TableRows = ({ canDelete, canUpdate, onClickDelete, withBulkActions, rows
 TableRows.defaultProps = {
   canDelete: false,
   canUpdate: false,
+  canRead: false,
   onClickDelete() {},
   rows: [],
   withBulkActions: false,
@@ -102,6 +103,7 @@ TableRows.defaultProps = {
 TableRows.propTypes = {
   canDelete: PropTypes.bool,
   canUpdate: PropTypes.bool,
+  canRead: PropTypes.bool,
   onClickDelete: PropTypes.func,
   rows: PropTypes.array,
   withBulkActions: PropTypes.bool,

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

@@ -147,15 +147,16 @@ const ApiTokenListView = () => {
             headers={headers}
             contentType="api-tokens"
             rows={apiTokens}
-            withBulkActions={canDelete || canUpdate}
+            withBulkActions={canDelete || canUpdate || canRead}
             isLoading={isLoading}
             onConfirmDelete={(id) => deleteMutation.mutateAsync(id)}
           >
             <TableRows
+              canRead={canRead}
               canDelete={canDelete}
               canUpdate={canUpdate}
               rows={apiTokens}
-              withBulkActions={canDelete || canUpdate}
+              withBulkActions={canDelete || canUpdate || canRead}
             />
           </DynamicTable>
         )}

package/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/utils/tableHeaders.js

@@ -22,23 +22,23 @@ const tableHeaders = [
     },
   },
   {
-    name: 'type',
-    key: 'type',
+    name: 'createdAt',
+    key: 'createdAt',
     metadatas: {
       label: {
-        id: 'Settings.apiTokens.ListView.headers.type',
-        defaultMessage: 'Token type',
+        id: 'Settings.apiTokens.ListView.headers.createdAt',
+        defaultMessage: 'Created at',
       },
       sortable: false,
     },
   },
   {
-    name: 'createdAt',
-    key: 'createdAt',
+    name: 'lastUsedAt',
+    key: 'lastUsedAt',
     metadatas: {
       label: {
-        id: 'Settings.apiTokens.ListView.headers.createdAt',
-        defaultMessage: 'Created at',
+        id: 'Settings.apiTokens.ListView.headers.lastUsedAt',
+        defaultMessage: 'Last used',
       },
       sortable: false,
     },

package/admin/src/pages/SettingsPage/pages/ApiTokens/ProtectedEditView/index.js

@@ -5,7 +5,7 @@ import EditView from '../EditView';
 
 const ProtectedApiTokenCreateView = () => {
   return (
-    <CheckPagePermissions permissions={adminPermissions.settings['api-tokens'].update}>
+    <CheckPagePermissions permissions={adminPermissions.settings['api-tokens'].read}>
       <EditView />
     </CheckPagePermissions>
   );

package/admin/src/permissions/defaultPermissions.js

@@ -76,16 +76,12 @@ const permissions = {
       update: [{ action: 'admin::webhooks.update', subject: null }],
     },
     'api-tokens': {
-      main: [
-        { action: 'admin::api-tokens.create', subject: null },
-        { action: 'admin::api-tokens.read', subject: null },
-        { action: 'admin::api-tokens.update', subject: null },
-        { action: 'admin::api-tokens.delete', subject: null },
-      ],
+      main: [{ action: 'admin::api-tokens.access', subject: null }],
       create: [{ action: 'admin::api-tokens.create', subject: null }],
       delete: [{ action: 'admin::api-tokens.delete', subject: null }],
       read: [{ action: 'admin::api-tokens.read', subject: null }],
       update: [{ action: 'admin::api-tokens.update', subject: null }],
+      regenerate: [{ action: 'admin::api-tokens.regenerate', subject: null }],
     },
   },
 };

package/admin/src/translations/en.json

@@ -91,10 +91,24 @@
   "Settings.apiTokens.ListView.headers.description": "Description",
   "Settings.apiTokens.ListView.headers.type": "Token type",
   "Settings.apiTokens.ListView.headers.createdAt": "Created at",
+  "Settings.apiTokens.ListView.headers.lastUsedAt": "Last used",
   "Settings.apiTokens.notification.copied": "Token copied to clipboard.",
   "Settings.apiTokens.title": "API Tokens",
   "Settings.apiTokens.types.full-access": "Full access",
   "Settings.apiTokens.types.read-only": "Read-only",
+  "Settings.apiTokens.duration.7-days": "7 days",
+  "Settings.apiTokens.duration.30-days": "30 days",
+  "Settings.apiTokens.duration.90-days": "90 days",
+  "Settings.apiTokens.duration.unlimited": "Unlimited",
+  "Settings.apiTokens.form.duration":"Token duration",
+  "Settings.apiTokens.form.type":"Token type",
+  "Settings.apiTokens.duration.expiration-date":"Expiration date",
+  "Settings.apiTokens.createPage.permissions.title":"Permissions",
+  "Settings.apiTokens.createPage.permissions.description":"Only actions bound by a route are listed below.",
+  "Settings.apiTokens.RegenerateDialog.title": "Regenerate token",
+  "Settings.apiTokens.popUpWarning.message": "Are you sure you want to regenerate this token?",
+  "Settings.apiTokens.Button.cancel": "Cancel",
+  "Settings.apiTokens.Button.regenerate": "Regenerate",
   "Settings.application.description": "Administration panel’s global information",
   "Settings.application.edition-title": "current plan",
   "Settings.application.get-help": "Get help",
@@ -758,6 +772,9 @@
   "notification.success.delete": "The item has been deleted",
   "notification.success.saved": "Saved",
   "notification.success.title": "Success:",
+  "notification.success.tokencreated": "API Token successfully created",
+  "notification.success.tokenedited": "API 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:",
   "notification.warning.404": "404 - Not found",

package/build/4235.c44d8565.chunk.js

@@ -0,0 +1,30 @@
+"use strict";(self.webpackChunk_strapi_admin=self.webpackChunk_strapi_admin||[]).push([[4235],{54235:(on,Le,r)=>{r.d(Le,{Z:()=>Qt});var a=r(32735),k=r(5636),m=r(88425),B=r(11856),oe=r(16540),z=r(44526),Ne=r(88677),se=r.n(Ne),Be=r(98599),we=r.n(Be),De=r(83281),O=r(90662),A=r(9808),T=r(95602),S=r(78330),je=r(37178),Ve=r(90353),P=r(25716),I=r(92891),ie=r(5141),re=r(84968),Ge=r(7602),w=r(17247),le=r(64213),Ue=r(54049);const $e=(n,e,t="en")=>{if(e&&typeof e=="number"){const o=e/24/60/60/1e3;return(0,le.format)((0,le.addDays)(new Date(n),o),"PPP",{locale:Ue[t]})}return"Unlimited"};var M=r(5173);const He=M.Ry().shape({name:M.Z_(m.translatedErrors.string).required(m.translatedErrors.required),type:M.Z_(m.translatedErrors.string).oneOf(["read-only","full-access","custom"]).required(m.translatedErrors.required),description:M.Z_().nullable(),lifespan:M.Rx().integer().min(1).nullable().defined(m.translatedErrors.required)}),ce=n=>{const e={allActionsIds:[],permissions:[]};return e.permissions=Object.keys(n).map(t=>({apiId:t,label:t.split("::")[1],controllers:(0,I.flatten)(Object.keys(n[t].controllers).map(o=>({controller:o,actions:(0,I.flatten)(n[t].controllers[o].map(l=>{const p=`${t}.${o}.${l}`;return t.includes("api::")&&e.allActionsIds.push(p),{action:l,actionId:p}}))})))})),e};var Fe=r(60216),f=r.n(Fe);const K=({apiTokenName:n})=>{const{formatMessage:e}=(0,k.useIntl)();return(0,m.useFocusWhenNavigate)(),a.createElement(oe.Main,{"aria-busy":"true"},a.createElement(m.SettingsPageTitle,{name:"API Tokens"}),a.createElement(B.HeaderLayout,{primaryAction:a.createElement(z.Button,{disabled:!0,startIcon:a.createElement(se(),null),type:"button",size:"L"},e({id:"global.save",defaultMessage:"Save"})),title:n||e({id:"Settings.apiTokens.createPage.title",defaultMessage:"Create API Token"})}),a.createElement(B.ContentLayout,null,a.createElement(m.LoadingIndicatorPage,null)))};K.defaultProps={apiTokenName:null},K.propTypes={apiTokenName:f().string};const We=K;var ze=r(20763),Ke=r(68192),Ye=r.n(Ke),Ze=r(59087),Qe=r(18909),Je=r.n(Qe);const Y=({apiToken:n})=>{const{formatMessage:e}=(0,k.useIntl)(),t=(0,m.useNotification)(),{trackUsage:o}=(0,m.useTracking)(),l=(0,a.useRef)(o);return a.createElement(m.ContentBox,{endAction:n&&a.createElement("span",{style:{alignSelf:"start"}},a.createElement(Ze.CopyToClipboard,{onCopy:()=>{l.current("didCopyTokenKey"),t({type:"success",message:{id:"Settings.apiTokens.notification.copied"}})},text:n},a.createElement(ze.IconButton,{label:e({id:"app.component.CopyToClipboard.label",defaultMessage:"Copy to clipboard"}),noBorder:!0,icon:a.createElement(Ye(),null),style:{padding:0,height:"1rem"}}))),title:n||e({id:"Settings.apiTokens.copy.editTitle",defaultMessage:"This token isn\u2019t accessible anymore."}),subtitle:e(n?{id:"Settings.apiTokens.copy.lastWarning",defaultMessage:"Make sure to copy this token, you won\u2019t be able to see it again!"}:{id:"Settings.apiTokens.copy.editMessage",defaultMessage:"For security reasons, you can only see your token once."}),icon:a.createElement(Je(),null),iconBackground:"neutral100"})};Y.defaultProps={apiToken:null},Y.propTypes={apiToken:f().string};const Xe=Y;var Z=r(12001),de=r(52111),qe=r(19192),_e=r(42258),et=r.n(_e),D=r(19615),pe=Object.getOwnPropertySymbols,tt=Object.prototype.hasOwnProperty,nt=Object.prototype.propertyIsEnumerable,at=(n,e)=>{var t={};for(var o in n)tt.call(n,o)&&e.indexOf(o)<0&&(t[o]=n[o]);if(n!=null&&pe)for(var o of pe(n))e.indexOf(o)<0&&nt.call(n,o)&&(t[o]=n[o]);return t};const ue=(0,a.createContext)({}),me=n=>{var e=n,{children:t}=e,o=at(e,["children"]);return a.createElement(ue.Provider,{value:o},t)},Q=()=>(0,a.useContext)(ue);me.propTypes={children:f().node.isRequired};const ge=D.css`
+  background: ${n=>n.theme.colors.primary100};
+  svg {
+    opacity: 1;
+  }
+`,ot=(0,D.default)(A.Box)`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  svg {
+    opacity: 0;
+    path {
+      fill: ${n=>n.theme.colors.primary600};
+    }
+  }
+
+  /* Show active style both on hover and when the action is selected */
+  ${n=>n.isActive&&ge}
+  &:hover {
+    ${ge}
+  }
+`,st=D.default.div`
+  flex: 1;
+  align-self: center;
+  border-top: 1px solid ${({theme:n})=>n.colors.neutral150};
+`,J=({controllers:n,label:e,orderNumber:t,disabled:o,onExpanded:l,indexExpandendCollapsedContent:p})=>{const{value:{onChangeSelectAll:i,onChange:c,selectedActions:d,setSelectedAction:y,selectedAction:te}}=Q(),[L,U]=(0,a.useState)(!1),$=()=>{U(g=>!g),l(t)};(0,a.useEffect)(()=>{p!==null&&p!==t&&L&&U(!1)},[p,t,L]);const ne=g=>g===te;return a.createElement(Z.Accordion,{expanded:L,onToggle:$,variant:t%2?"primary":"secondary"},a.createElement(Z.AccordionToggle,{title:(0,I.capitalize)(e)}),a.createElement(Z.AccordionContent,null,n==null?void 0:n.map(g=>{const E=g.actions.every(u=>d.includes(u.actionId)),R=g.actions.some(u=>d.includes(u.actionId));return a.createElement(A.Box,{key:`${e}.${g==null?void 0:g.controller}`},a.createElement(qe.Flex,{justifyContent:"space-between",alignItems:"center",padding:4},a.createElement(A.Box,{paddingRight:4},a.createElement(T.Typography,{variant:"sigma",textColor:"neutral600"},g==null?void 0:g.controller)),a.createElement(st,null),a.createElement(A.Box,{paddingLeft:4},a.createElement(de.Checkbox,{value:E,indeterminate:!E&&R,onValueChange:()=>{i({target:{value:[...g.actions]}})},disabled:o},"Select all"))),a.createElement(S.Grid,{gap:4,padding:4},(g==null?void 0:g.actions)&&(g==null?void 0:g.actions.map(u=>a.createElement(S.GridItem,{col:6,key:u.actionId},a.createElement(ot,{isActive:ne(u.actionId),padding:2,hasRadius:!0},a.createElement(de.Checkbox,{value:d.includes(u.actionId),name:u.actionId,onValueChange:()=>{c({target:{value:u.actionId}})},disabled:o},u.action),a.createElement("button",{type:"button","data-testid":"action-cog",onClick:()=>y({target:{value:u.actionId}}),style:{display:"inline-flex",alignItems:"center"}},a.createElement(et(),null))))))))})))};J.defaultProps={controllers:[],orderNumber:0,disabled:!1,onExpanded:()=>null,indexExpandendCollapsedContent:null},J.propTypes={controllers:f().array,orderNumber:f().number,label:f().string.isRequired,disabled:f().bool,onExpanded:f().func,indexExpandendCollapsedContent:f().number};const it=J;var rt=Object.defineProperty,j=Object.getOwnPropertySymbols,fe=Object.prototype.hasOwnProperty,ye=Object.prototype.propertyIsEnumerable,ve=(n,e,t)=>e in n?rt(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t,lt=(n,e)=>{for(var t in e||(e={}))fe.call(e,t)&&ve(n,t,e[t]);if(j)for(var t of j(e))ye.call(e,t)&&ve(n,t,e[t]);return n},ct=(n,e)=>{var t={};for(var o in n)fe.call(n,o)&&e.indexOf(o)<0&&(t[o]=n[o]);if(n!=null&&j)for(var o of j(n))e.indexOf(o)<0&&ye.call(n,o)&&(t[o]=n[o]);return t};const X=n=>{var e=n,{section:t}=e,o=ct(e,["section"]);const[l,p]=(0,a.useState)(null),i=c=>p(c);return a.createElement(A.Box,{padding:4,background:"neutral0"},t&&t.map((c,d)=>a.createElement(it,lt({key:c.apiId,label:c.label,controllers:c.controllers,orderNumber:d,indexExpandendCollapsedContent:l,onExpanded:i,name:c.apiId},o))))};X.defaultProps={section:null},X.propTypes={section:f().arrayOf(f().object)};const dt=X;var pt=r(37213),ut=r.n(pt),mt=r(15738),gt=r.n(mt);const ft=n=>{switch(n){case"POST":return{text:"success600",border:"success200",background:"success100"};case"GET":return{text:"secondary600",border:"secondary200",background:"secondary100"};case"PUT":return{text:"warning600",border:"warning200",background:"warning100"};case"DELETE":return{text:"danger600",border:"danger200",background:"danger100"};default:return{text:"neutral600",border:"neutral200",background:"neutral100"}}},yt=(0,D.default)(A.Box)`
+  margin: -1px;
+  border-radius: ${({theme:n})=>n.spaces[1]} 0 0 ${({theme:n})=>n.spaces[1]};
+`;function q({route:n}){const{formatMessage:e}=(0,k.useIntl)(),{method:t,handler:o,path:l}=n,p=l?gt()(l.split("/")):[],[i="",c=""]=o?o.split("."):[],d=ft(n.method);return a.createElement(O.Stack,{spacing:2},a.createElement(T.Typography,{variant:"delta",as:"h3"},e({id:"Settings.apiTokens.createPage.BoundRoute.title",defaultMessage:"Bound route to"}),"\xA0",a.createElement("span",null,i),a.createElement(T.Typography,{variant:"delta",textColor:"primary600"},".",c)),a.createElement(O.Stack,{horizontal:!0,hasRadius:!0,background:"neutral0",borderColor:"neutral200",spacing:0},a.createElement(yt,{background:d.background,borderColor:d.border,padding:2},a.createElement(T.Typography,{fontWeight:"bold",textColor:d.text},t)),a.createElement(A.Box,{paddingLeft:2,paddingRight:2},ut()(p,y=>a.createElement(T.Typography,{key:y,textColor:y.includes(":")?"neutral600":"neutral900"},"/",y)))))}q.defaultProps={route:{handler:"Nocontroller.error",method:"GET",path:"/there-is-no-path"}},q.propTypes={route:f().shape({handler:f().string,method:f().string,path:f().string})};const vt=q,Et=()=>{var n;const{value:{selectedAction:e,routes:t}}=Q(),{formatMessage:o}=(0,k.useIntl)(),l=e==null?void 0:e.split(".")[0];return a.createElement(S.GridItem,{col:5,background:"neutral150",paddingTop:6,paddingBottom:6,paddingLeft:7,paddingRight:7,style:{minHeight:"100%"}},e?a.createElement(O.Stack,{spacing:2},(n=t[l])==null?void 0:n.map(p=>{var i,c;return((c=(i=p.config.auth)==null?void 0:i.scope)==null?void 0:c.includes(e))||p.handler===e?a.createElement(vt,{key:p.handler,route:p}):null})):a.createElement(O.Stack,{spacing:2},a.createElement(T.Typography,{variant:"delta",as:"h3"},o({id:"Settings.apiTokens.createPage.permissions.header.title",defaultMessage:"Advanced settings"})),a.createElement(T.Typography,{as:"p",textColor:"neutral600"},o({id:"Settings.apiTokens.createPage.permissions.header.hint",defaultMessage:"Select the application's actions or the plugin's actions and click on the cog icon to display the bound route"}))))};var ht=Object.defineProperty,V=Object.getOwnPropertySymbols,Ee=Object.prototype.hasOwnProperty,he=Object.prototype.propertyIsEnumerable,Te=(n,e,t)=>e in n?ht(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t,Tt=(n,e)=>{for(var t in e||(e={}))Ee.call(e,t)&&Te(n,t,e[t]);if(V)for(var t of V(e))he.call(e,t)&&Te(n,t,e[t]);return n},St=(n,e)=>{var t={};for(var o in n)Ee.call(n,o)&&e.indexOf(o)<0&&(t[o]=n[o]);if(n!=null&&V)for(var o of V(n))e.indexOf(o)<0&&he.call(n,o)&&(t[o]=n[o]);return t};const Ct=n=>{var e=St(n,[]);const{value:{data:t}}=Q(),{formatMessage:o}=(0,k.useIntl)();return a.createElement(S.Grid,{gap:0,shadow:"filterShadow",hasRadius:!0,background:"neutral0"},a.createElement(S.GridItem,{col:7,paddingTop:6,paddingBottom:6,paddingLeft:7,paddingRight:7},a.createElement(O.Stack,{spacing:2},a.createElement(T.Typography,{variant:"delta",as:"h2"},o({id:"Settings.apiTokens.createPage.permissions.title",defaultMessage:"Permissions"})),a.createElement(T.Typography,{as:"p",textColor:"neutral600"},o({id:"Settings.apiTokens.createPage.permissions.description",defaultMessage:"Only actions bound by a route are listed below."}))),(t==null?void 0:t.permissions)&&a.createElement(dt,Tt({section:t==null?void 0:t.permissions},e))),a.createElement(Et,null))},Pt=(0,a.memo)(Ct);var Ot=r(23101),Se=r.n(Ot),At=r(775),kt=(n,e,t)=>new Promise((o,l)=>{var p=d=>{try{c(t.next(d))}catch(y){l(y)}},i=d=>{try{c(t.throw(d))}catch(y){l(y)}},c=d=>d.done?o(d.value):Promise.resolve(d.value).then(p,i);c((t=t.apply(n,e)).next())});const _=({onRegenerate:n,idToRegenerate:e})=>{const{formatMessage:t}=(0,k.useIntl)(),[o,l]=(0,a.useState)(!1),{regenerateData:p,isLoadingConfirmation:i}=(0,At.rW)(e,n),c=()=>kt(void 0,null,function*(){p(),l(!1)});return a.createElement(a.Fragment,null,a.createElement(z.Button,{startIcon:a.createElement(Se(),null),type:"button",size:"S",variant:"tertiary",onClick:()=>l(!0),name:"regenerate"},t({id:"Settings.apiTokens.regenerate",defaultMessage:"Regenerate"})),a.createElement(m.ConfirmDialog,{bodyText:{id:"Settings.apiTokens.popUpWarning.message",defaultMessage:"Are you sure you want to regenerate this token?"},iconRightButton:a.createElement(Se(),null),isConfirmButtonLoading:i,isOpen:o,onToggleDialog:()=>l(!1),onConfirm:c,leftButtonText:{id:"Settings.apiTokens.Button.cancel",defaultMessage:"Cancel"},rightButtonText:{id:"Settings.apiTokens.Button.regenerate",defaultMessage:"Regenerate"},title:{id:"Settings.apiTokens.RegenerateDialog.title",defaultMessage:"Regenerate token"}}))};_.defaultProps={onRegenerate(){}},_.propTypes={onRegenerate:f().func,idToRegenerate:f().string.isRequired};const Ce=_;var It=r(83983),xt=Object.defineProperty,bt=Object.defineProperties,Rt=Object.getOwnPropertyDescriptors,Pe=Object.getOwnPropertySymbols,Mt=Object.prototype.hasOwnProperty,Lt=Object.prototype.propertyIsEnumerable,Oe=(n,e,t)=>e in n?xt(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t,Nt=(n,e)=>{for(var t in e||(e={}))Mt.call(e,t)&&Oe(n,t,e[t]);if(Pe)for(var t of Pe(e))Lt.call(e,t)&&Oe(n,t,e[t]);return n},Bt=(n,e)=>bt(n,Rt(e));const wt=(n,e=[])=>Bt(Nt({},n),{selectedAction:null,routes:[],selectedActions:[],data:ce(e)});var Dt=r(49415),jt=Object.defineProperty,Ae=Object.getOwnPropertySymbols,Vt=Object.prototype.hasOwnProperty,Gt=Object.prototype.propertyIsEnumerable,ke=(n,e,t)=>e in n?jt(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t,Ut=(n,e)=>{for(var t in e||(e={}))Vt.call(e,t)&&ke(n,t,e[t]);if(Ae)for(var t of Ae(e))Gt.call(e,t)&&ke(n,t,e[t]);return n};const $t={data:{},selectedActions:[]},Ht=(n,e)=>(0,Dt.default)(n,t=>{switch(e.type){case"ON_CHANGE":{t.selectedActions.includes(e.value)?(0,I.pull)(t.selectedActions,e.value):t.selectedActions.push(e.value);break}case"SELECT_ALL_IN_PERMISSION":{e.value.every(l=>t.selectedActions.includes(l.actionId))?e.value.forEach(l=>{(0,I.pull)(t.selectedActions,l.actionId)}):e.value.forEach(l=>{t.selectedActions.push(l.actionId)});break}case"SELECT_ALL_ACTIONS":{t.selectedActions=[...t.data.allActionsIds];break}case"ON_CHANGE_READ_ONLY":{const o=t.data.allActionsIds.filter(l=>l.includes("find")||l.includes("findOne"));t.selectedActions=[...o];break}case"UPDATE_PERMISSIONS_LAYOUT":{t.data=ce(e.value);break}case"UPDATE_ROUTES":{t.routes=Ut({},e.value);break}case"UPDATE_PERMISSIONS":{t.selectedActions=[...e.value];break}case"SET_SELECTED_ACTION":{t.selectedAction=e.value;break}default:return t}});var Ft=Object.defineProperty,Wt=Object.defineProperties,zt=Object.getOwnPropertyDescriptors,Ie=Object.getOwnPropertySymbols,Kt=Object.prototype.hasOwnProperty,Yt=Object.prototype.propertyIsEnumerable,xe=(n,e,t)=>e in n?Ft(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t,b=(n,e)=>{for(var t in e||(e={}))Kt.call(e,t)&&xe(n,t,e[t]);if(Ie)for(var t of Ie(e))Yt.call(e,t)&&xe(n,t,e[t]);return n},ee=(n,e)=>Wt(n,zt(e)),G=(n,e,t)=>new Promise((o,l)=>{var p=d=>{try{c(t.next(d))}catch(y){l(y)}},i=d=>{try{c(t.throw(d))}catch(y){l(y)}},c=d=>d.done?o(d.value):Promise.resolve(d.value).then(p,i);c((t=t.apply(n,e)).next())});const Zt="Name already taken",Qt=()=>{var n;(0,m.useFocusWhenNavigate)();const{formatMessage:e}=(0,k.useIntl)(),{lockApp:t,unlockApp:o}=(0,m.useOverlayBlocker)(),l=(0,m.useNotification)(),p=(0,ie.useHistory)(),[i,c]=(0,a.useState)((n=p.location.state)!=null&&n.apiToken.accessKey?b({},p.location.state.apiToken):null),{trackUsage:d}=(0,m.useTracking)(),y=(0,a.useRef)(d),{setCurrentStep:te}=(0,m.useGuidedTour)(),{allowedActions:{canCreate:L,canUpdate:U,canRegenerate:$}}=(0,m.useRBAC)(It.Z.settings["api-tokens"]),[ne]=(0,m.usePersistentState)("strapi-admin-language","en"),[g,E]=(0,a.useReducer)(Ht,$t,s=>wt(s,{})),{params:{id:R}}=(0,ie.useRouteMatch)("/settings/api-tokens/:id"),u=R==="create";(0,re.useQuery)("content-api-permissions",()=>G(void 0,null,function*(){const[s,C]=yield Promise.all(["/admin/content-api/permissions","/admin/content-api/routes"].map(x=>G(void 0,null,function*(){const{data:v}=yield w.be.get(x);return v.data})));E({type:"UPDATE_PERMISSIONS_LAYOUT",value:s}),E({type:"UPDATE_ROUTES",value:C}),i&&((i==null?void 0:i.type)==="read-only"&&E({type:"ON_CHANGE_READ_ONLY"}),(i==null?void 0:i.type)==="full-access"&&E({type:"SELECT_ALL_ACTIONS"}),(i==null?void 0:i.type)==="custom"&&E({type:"UPDATE_PERMISSIONS",value:i==null?void 0:i.permissions}))}),{onError(){l({type:"warning",message:{id:"notification.error",defaultMessage:"An error occured"}})}}),(0,a.useEffect)(()=>{y.current(u?"didAddTokenFromList":"didEditTokenFromList")},[u]);const{status:Jt}=(0,re.useQuery)(["api-token",R],()=>G(void 0,null,function*(){const{data:{data:s}}=yield w.be.get(`/admin/api-tokens/${R}`);return c(b({},s)),(s==null?void 0:s.type)==="read-only"&&E({type:"ON_CHANGE_READ_ONLY"}),(s==null?void 0:s.type)==="full-access"&&E({type:"SELECT_ALL_ACTIONS"}),(s==null?void 0:s.type)==="custom"&&E({type:"UPDATE_PERMISSIONS",value:s==null?void 0:s.permissions}),s}),{enabled:!u&&!i,onError(){l({type:"warning",message:{id:"notification.error",defaultMessage:"An error occured"}})}}),Xt=(s,C)=>G(void 0,null,function*(){var x,v,H;y.current(u?"willCreateToken":"willEditToken"),t();try{const{data:{data:h}}=u?yield w.be.post("/admin/api-tokens",ee(b({},s),{lifespan:s.lifespan&&parseInt(s.lifespan,10)?parseInt(s.lifespan,10):s.lifespan,permissions:s.type==="custom"?g.selectedActions:null})):yield w.be.put(`/admin/api-tokens/${R}`,{name:s.name,description:s.description,type:s.type,permissions:s.type==="custom"?g.selectedActions:null});u&&(p.replace(`/settings/api-tokens/${h.id}`,{apiToken:h}),te("apiTokens.success")),o(),c(b({},h)),l({type:"success",message:e(u?{id:"notification.success.tokencreated",defaultMessage:"API Token successfully created"}:{id:"notification.success.tokenedited",defaultMessage:"API Token successfully edited"})}),y.current(u?"didCreateToken":"didEditToken",{type:i.type})}catch(h){const F=(0,Ge.Iz)(h.response.data);C.setErrors(F),((H=(v=(x=h==null?void 0:h.response)==null?void 0:x.data)==null?void 0:v.error)==null?void 0:H.message)===Zt?l({type:"warning",message:(0,I.get)(h,"response.data.message","notification.error.tokennamenotunique")}):l({type:"warning",message:(0,I.get)(h,"response.data.message","notification.error")}),o()}}),[qt,ae]=(0,a.useState)(!1),_t=({target:{value:s}})=>{ae(!0),E({type:"ON_CHANGE",value:s})},en=({target:{value:s}})=>{ae(!0),E({type:"SELECT_ALL_IN_PERMISSION",value:s})},tn=({target:{value:s}})=>{ae(!1),s==="full-access"&&E({type:"SELECT_ALL_ACTIONS"}),s==="read-only"&&E({type:"ON_CHANGE_READ_ONLY"})},nn=({target:{value:s}})=>{E({type:"SET_SELECTED_ACTION",value:s})},be=s=>{c(ee(b({},i),{accessKey:s}))},an=ee(b({},g),{onChange:_t,onChangeSelectAll:en,setSelectedAction:nn}),N=U&&!u||L&&u;return!u&&!i&&Jt!=="success"?a.createElement(We,{apiTokenName:i==null?void 0:i.name}):a.createElement(me,{value:an},a.createElement(oe.Main,null,a.createElement(m.SettingsPageTitle,{name:"API Tokens"}),a.createElement(De.Formik,{validationSchema:He,validateOnChange:!1,initialValues:{name:(i==null?void 0:i.name)||"",description:(i==null?void 0:i.description)||"",type:i==null?void 0:i.type,lifespan:i!=null&&i.lifespan?i.lifespan.toString():i==null?void 0:i.lifespan},enableReinitialize:!0,onSubmit:(s,C)=>Xt(s,C)},({errors:s,handleChange:C,isSubmitting:x,values:v,setFieldValue:H})=>{var h,F,Re,Me;return qt&&(v==null?void 0:v.type)!=="custom"&&H("type","custom"),a.createElement(m.Form,null,a.createElement(B.HeaderLayout,{title:(i==null?void 0:i.name)||e({id:"Settings.apiTokens.createPage.title",defaultMessage:"Create API Token"}),primaryAction:N?a.createElement(O.Stack,{horizontal:!0,spacing:2},$&&(i==null?void 0:i.id)&&a.createElement(Ce,{onRegenerate:be,idToRegenerate:i==null?void 0:i.id}),a.createElement(z.Button,{disabled:x,loading:x,startIcon:a.createElement(se(),null),type:"submit",size:"S"},e({id:"global.save",defaultMessage:"Save"}))):$&&(i==null?void 0:i.id)&&a.createElement(Ce,{onRegenerate:be,idToRegenerate:i==null?void 0:i.id}),navigationAction:a.createElement(m.Link,{startIcon:a.createElement(we(),null),to:"/settings/api-tokens"},e({id:"global.back",defaultMessage:"Back"}))}),a.createElement(B.ContentLayout,null,a.createElement(O.Stack,{spacing:6},Boolean(i==null?void 0:i.name)&&a.createElement(Xe,{apiToken:i.accessKey}),a.createElement(A.Box,{background:"neutral0",hasRadius:!0,shadow:"filterShadow",paddingTop:6,paddingBottom:6,paddingLeft:7,paddingRight:7},a.createElement(O.Stack,{spacing:4},a.createElement(T.Typography,{variant:"delta",as:"h2"},e({id:"global.details",defaultMessage:"Details"})),a.createElement(S.Grid,{gap:5},a.createElement(S.GridItem,{key:"name",col:6,xs:12},a.createElement(je.TextInput,{name:"name",error:s.name?e((h=s.name)!=null&&h.id?s.name:{id:s.name,defaultMessage:s.name}):null,label:e({id:"Settings.apiTokens.form.name",defaultMessage:"Name"}),onChange:C,value:v.name,disabled:!N,required:!0})),a.createElement(S.GridItem,{key:"description",col:6,xs:12},a.createElement(Ve.Textarea,{label:e({id:"Settings.apiTokens.form.description",defaultMessage:"Description"}),name:"description",error:s.description?e((F=s.description)!=null&&F.id?s.description:{id:s.description,defaultMessage:s.description}):null,onChange:C,disabled:!N},v.description)),a.createElement(S.GridItem,{key:"lifespan",col:6,xs:12},a.createElement(P.Select,{name:"lifespan",label:e({id:"Settings.apiTokens.form.duration",defaultMessage:"Token duration"}),value:v.lifespan,error:s.lifespan?e((Re=s.lifespan)!=null&&Re.id?s.lifespan:{id:s.lifespan,defaultMessage:s.lifespan}):null,onChange:W=>{C({target:{name:"lifespan",value:W}})},required:!0,disabled:!u,placeholder:"Select"},a.createElement(P.Option,{value:"604800000"},e({id:"Settings.apiTokens.duration.7-days",defaultMessage:"7 days"})),a.createElement(P.Option,{value:"2592000000"},e({id:"Settings.apiTokens.duration.30-days",defaultMessage:"30 days"})),a.createElement(P.Option,{value:"7776000000"},e({id:"Settings.apiTokens.duration.90-days",defaultMessage:"90 days"})),a.createElement(P.Option,{value:null},e({id:"Settings.apiTokens.duration.unlimited",defaultMessage:"Unlimited"}))),a.createElement(T.Typography,{variant:"pi",textColor:"neutral600"},!u&&`${e({id:"Settings.apiTokens.duration.expiration-date",defaultMessage:"Expiration date"})}: ${$e(i==null?void 0:i.createdAt,parseInt(v.lifespan,10),ne)}`)),a.createElement(S.GridItem,{key:"type",col:6,xs:12},a.createElement(P.Select,{name:"type",label:e({id:"Settings.apiTokens.form.type",defaultMessage:"Token type"}),value:v==null?void 0:v.type,error:s.type?e((Me=s.type)!=null&&Me.id?s.type:{id:s.type,defaultMessage:s.type}):null,onChange:W=>{tn({target:{value:W}}),C({target:{name:"type",value:W}})},placeholder:"Select",required:!0,disabled:!N},a.createElement(P.Option,{value:"read-only"},e({id:"Settings.apiTokens.types.read-only",defaultMessage:"Read-only"})),a.createElement(P.Option,{value:"full-access"},e({id:"Settings.apiTokens.types.full-access",defaultMessage:"Full access"})),a.createElement(P.Option,{value:"custom"},e({id:"Settings.apiTokens.types.custom",defaultMessage:"Custom"}))))))),a.createElement(Pt,{disabled:!N||(v==null?void 0:v.type)==="read-only"||(v==null?void 0:v.type)==="full-access"}))))})))}}}]);