diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/index.js index d9dd7c30eb..c788267fcc 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/index.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/index.js @@ -1,4 +1,4 @@ -import React, { useEffect, useState, useRef, useReducer, useMemo } from 'react'; +import React, { useEffect, useState, useRef, useReducer } from 'react'; import { useIntl } from 'react-intl'; import { SettingsPageTitle, @@ -164,7 +164,7 @@ const ApiTokenCreateView = () => { } ); - const handleSubmit = async (body, actions, tokenType) => { + const handleSubmit = async (body, actions) => { trackUsageRef.current(isCreating ? 'willCreateToken' : 'willEditToken'); lockApp(); @@ -178,13 +178,13 @@ const ApiTokenCreateView = () => { body.lifespan && parseInt(body.lifespan, 10) ? parseInt(body.lifespan, 10) : body.lifespan, - permissions: tokenType === 'custom' ? state.selectedActions : null, + permissions: body.type === 'custom' ? state.selectedActions : null, }) : await axiosInstance.put(`/admin/api-tokens/${id}`, { name: body.name, description: body.description, type: body.type, - permissions: tokenType === 'custom' ? state.selectedActions : null, + permissions: body.type === 'custom' ? state.selectedActions : null, }); if (isCreating) { @@ -231,49 +231,10 @@ const ApiTokenCreateView = () => { } }; - const hasAllActionsSelected = useMemo(() => { - const { data, selectedActions } = state; - - const areAllActionsSelected = data.allActionsIds.every((actionId) => - selectedActions.includes(actionId) - ); - - return areAllActionsSelected; - }, [state]); - - const hasAllActionsNotSelected = useMemo(() => { - const { selectedActions } = state; - - const areAllActionsNotSelected = selectedActions.length === 0; - - return areAllActionsNotSelected; - }, [state]); - - const hasReadOnlyActionsSelected = useMemo(() => { - const { data, selectedActions } = state; - - const areAllActionsReadOnly = data.allActionsIds.every((actionId) => { - if (actionId.includes('find') || actionId.includes('findOne')) { - return selectedActions.includes(actionId); - } - - return !selectedActions.includes(actionId); - }); - - return areAllActionsReadOnly; - }, [state]); - - const tokenTypeValue = useMemo(() => { - if (hasAllActionsSelected && !hasReadOnlyActionsSelected) return 'full-access'; - - if (hasReadOnlyActionsSelected) return 'read-only'; - - if (hasAllActionsNotSelected) return null; - - return 'custom'; - }, [hasAllActionsSelected, hasReadOnlyActionsSelected, hasAllActionsNotSelected]); + const [hasChangedPermissions, setHasChangedPermissions] = useState(false); const handleChangeCheckbox = ({ target: { value } }) => { + setHasChangedPermissions(true); dispatch({ type: 'ON_CHANGE', value, @@ -281,6 +242,7 @@ const ApiTokenCreateView = () => { }; const handleChangeSelectAllCheckbox = ({ target: { value } }) => { + setHasChangedPermissions(true); value.forEach((action) => { dispatch({ type: 'ON_CHANGE', @@ -290,6 +252,8 @@ const ApiTokenCreateView = () => { }; const handleChangeSelectApiTokenType = ({ target: { value } }) => { + setHasChangedPermissions(false); + if (value === 'full-access') { dispatch({ type: 'SELECT_ALL_ACTIONS', @@ -344,9 +308,13 @@ const ApiTokenCreateView = () => { lifespan: apiToken?.lifespan ? apiToken.lifespan.toString() : apiToken?.lifespan, }} enableReinitialize - onSubmit={(body, actions) => handleSubmit(body, actions, tokenTypeValue)} + onSubmit={(body, actions) => handleSubmit(body, actions)} > - {({ errors, handleChange, isSubmitting, values }) => { + {({ errors, handleChange, isSubmitting, values, setFieldValue }) => { + if (hasChangedPermissions && values?.type !== 'custom') { + setFieldValue('type', 'custom'); + } + return (
{ id: 'Settings.apiTokens.form.type', defaultMessage: 'Token type', })} - value={tokenTypeValue} + value={values?.type} error={ errors.type ? formatMessage( @@ -572,7 +540,13 @@ const ApiTokenCreateView = () => { - + diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/tests/__snapshots__/index.test.js.snap index 4fc657d53c..eab216f9cc 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/tests/__snapshots__/index.test.js.snap +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/tests/__snapshots__/index.test.js.snap @@ -1782,7 +1782,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot box-shadow: 0px 1px 4px rgba(33,33,52,0.1); } -.c75 { +.c76 { background: #ffffff; padding: 16px; } @@ -1860,7 +1860,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot height: 100%; } -.c100 .c14 { +.c101 .c14 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1871,15 +1871,15 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot align-items: center; } -.c100 .c17 { +.c101 .c17 { color: #ffffff; } -.c100[aria-disabled='true'] .c17 { +.c101[aria-disabled='true'] .c17 { color: #666687; } -.c100[aria-disabled='true']:active .c17 { +.c101[aria-disabled='true']:active .c17 { color: #666687; } @@ -2147,6 +2147,16 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot line-height: 1.43; } +.c69 { + color: #32324d; + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-size: 0.875rem; + line-height: 1.43; +} + .c57 { line-height: 0; } @@ -2234,7 +2244,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot width: 0.375rem; } -.c69 { +.c70 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2243,7 +2253,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot border: none; } -.c69 svg { +.c70 svg { width: 0.375rem; } @@ -2306,12 +2316,12 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot margin-top: 16px; } -.c74 > * { +.c75 > * { margin-top: 0; margin-bottom: 0; } -.c74 > * + * { +.c75 > * + * { margin-top: 8px; } @@ -2703,7 +2713,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot word-break: break-all; } -.c99 { +.c100 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -2775,20 +2785,20 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot outline: none; } -.c70 { +.c71 { background: #ffffff; border-radius: 4px; box-shadow: 0px 1px 4px rgba(33,33,52,0.1); } -.c73 { +.c74 { padding-top: 24px; padding-right: 32px; padding-bottom: 24px; padding-left: 32px; } -.c98 { +.c99 { background: #eaeaef; padding-top: 24px; padding-right: 32px; @@ -2802,7 +2812,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot gap: 20px; } -.c71 { +.c72 { display: grid; grid-template-columns: repeat(12,1fr); gap: 0px; @@ -2813,23 +2823,23 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot max-width: 100%; } -.c72 { +.c73 { grid-column: span 7; max-width: 100%; } -.c97 { +.c98 { grid-column: span 5; max-width: 100%; } -.c89 { +.c90 { color: #4945ff; font-size: 0.75rem; line-height: 1.33; } -.c90 { +.c91 { color: #4a4a6a; display: block; white-space: nowrap; @@ -2840,11 +2850,11 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot line-height: 1.25; } -.c76 { +.c77 { border-radius: 4px; } -.c79 { +.c80 { background: #f6f6f9; padding-top: 24px; padding-right: 24px; @@ -2852,21 +2862,21 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot padding-left: 24px; } -.c82 { +.c83 { max-width: 100%; -webkit-flex: 1; -ms-flex: 1; flex: 1; } -.c85 { +.c86 { min-width: 0px; -webkit-flex: 1; -ms-flex: 1; flex: 1; } -.c91 { +.c92 { background: #dcdce4; border-radius: 50%; cursor: pointer; @@ -2878,12 +2888,12 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot cursor: pointer; } -.c93 { +.c94 { color: #666687; width: 0.6875rem; } -.c96 { +.c97 { background: #ffffff; padding-top: 24px; padding-right: 24px; @@ -2891,7 +2901,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot padding-left: 24px; } -.c80 { +.c81 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -2909,7 +2919,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot justify-content: space-between; } -.c83 { +.c84 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -2923,7 +2933,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot flex-direction: row; } -.c92 { +.c93 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -2944,70 +2954,70 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot justify-content: center; } -.c77 { +.c78 { border: 1px solid #f6f6f9; } -.c77:hover:not([aria-disabled='true']) { +.c78:hover:not([aria-disabled='true']) { border: 1px solid #4945ff; } -.c77:hover:not([aria-disabled='true']) .sc-OVzLa { +.c78:hover:not([aria-disabled='true']) .sc-OVzLa { color: #271fe0; } -.c77:hover:not([aria-disabled='true']) .c88 { +.c78:hover:not([aria-disabled='true']) .c89 { color: #4945ff; } -.c77:hover:not([aria-disabled='true']) > .c78 { +.c78:hover:not([aria-disabled='true']) > .c79 { background: #f0f0ff; } -.c77:hover:not([aria-disabled='true']) [data-strapi-dropdown='true'] { +.c78:hover:not([aria-disabled='true']) [data-strapi-dropdown='true'] { background: #d9d8ff; } -.c95 { +.c96 { border: 1px solid #ffffff; } -.c95:hover:not([aria-disabled='true']) { +.c96:hover:not([aria-disabled='true']) { border: 1px solid #4945ff; } -.c95:hover:not([aria-disabled='true']) .sc-OVzLa { +.c96:hover:not([aria-disabled='true']) .sc-OVzLa { color: #271fe0; } -.c95:hover:not([aria-disabled='true']) .c88 { +.c96:hover:not([aria-disabled='true']) .c89 { color: #4945ff; } -.c95:hover:not([aria-disabled='true']) > .c78 { +.c96:hover:not([aria-disabled='true']) > .c79 { background: #f0f0ff; } -.c95:hover:not([aria-disabled='true']) [data-strapi-dropdown='true'] { +.c96:hover:not([aria-disabled='true']) [data-strapi-dropdown='true'] { background: #d9d8ff; } -.c86 { +.c87 { background: transparent; border: none; position: relative; outline: none; } -.c86[aria-disabled='true'] { +.c87[aria-disabled='true'] { pointer-events: none; } -.c86[aria-disabled='true'] svg path { +.c87[aria-disabled='true'] svg path { fill: #666687; } -.c86 svg { +.c87 svg { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -3015,11 +3025,11 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot font-size: 0.625rem; } -.c86 svg path { +.c87 svg path { fill: #4945ff; } -.c86:after { +.c87:after { -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.2s; @@ -3034,11 +3044,11 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot border: 2px solid transparent; } -.c86:focus-visible { +.c87:focus-visible { outline: none; } -.c86:focus-visible:after { +.c87:focus-visible:after { border-radius: 8px; content: ''; position: absolute; @@ -3049,42 +3059,42 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot border: 2px solid #4945ff; } -.c84 > * { +.c85 > * { margin-left: 0; margin-right: 0; } -.c84 > * + * { +.c85 > * + * { margin-left: 12px; } -.c94 path { +.c95 path { fill: #666687; } -.c87 { +.c88 { text-align: left; } -.c87 > span { +.c88 > span { max-width: 100%; } -.c87 svg { +.c88 svg { width: 0.875rem; height: 0.875rem; } -.c87 svg path { +.c88 svg path { fill: #8e8ea9; } -.c81 { +.c82 { min-height: 5.5rem; border-radius: 4px; } -.c81:hover svg path { +.c82:hover svg path { fill: #4945ff; } @@ -3101,25 +3111,25 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot } @media (max-width:68.75rem) { - .c72 { + .c73 { grid-column: span; } } @media (max-width:34.375rem) { - .c72 { + .c73 { grid-column: span; } } @media (max-width:68.75rem) { - .c97 { + .c98 { grid-column: span; } } @media (max-width:34.375rem) { - .c97 { + .c98 { grid-column: span; } } @@ -3551,10 +3561,10 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot class="c62" > - Select + Read-only @@ -3563,7 +3573,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot >