From 2f3555fe1d2951b7065aad4a6813c8241aaf6574 Mon Sep 17 00:00:00 2001 From: Simone Taeggi Date: Mon, 5 Sep 2022 16:19:50 +0200 Subject: [PATCH 1/9] change the logic for the sync between permissions and api token Type --- .../tests/__snapshots__/index.test.js.snap | 12 +- .../pages/EditView/Header/tests/index.test.js | 4 +- .../tests/__snapshots__/index.test.js.snap | 8 +- .../components/Login/tests/BaseLogin.test.js | 4 +- .../components/Oops/tests/index.test.js | 4 +- .../ResetPassword/tests/index.test.js | 4 +- .../src/pages/HomePage/tests/index.test.js | 4 +- .../pages/ApiTokens/EditView/index.js | 80 +- .../tests/__snapshots__/index.test.js.snap | 200 ++--- .../ApiTokens/ListView/tests/index.test.js | 4 +- .../ApplicationInfosPage/tests/index.test.js | 4 +- .../tests/__snapshots__/index.test.js.snap | 4 +- .../Webhooks/ListView/tests/index.test.js | 777 ++++++++++++++++-- .../tests/__snapshots__/index.test.js.snap | 4 +- .../tests/__snapshots__/index.test.js.snap | 4 +- .../__snapshots__/SelectTree.test.js.snap | 2 +- .../__snapshots__/flattenTree.test.js.snap | 26 +- .../tests/__snapshots__/Header.test.js.snap | 4 +- .../pages/Roles/EditPage/tests/index.test.js | 4 +- 19 files changed, 901 insertions(+), 252 deletions(-) diff --git a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/__snapshots__/index.test.js.snap index 7150720f14..ec8780d811 100644 --- a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/__snapshots__/index.test.js.snap +++ b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/__snapshots__/index.test.js.snap @@ -661,8 +661,8 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = ` .c6 { color: #4945ff; - font-size: 0.875rem; - line-height: 1.43; + font-size: 0.75rem; + line-height: 1.33; } .c4 { @@ -2574,8 +2574,8 @@ exports[`EditSettingsView should add field 1`] = ` .c6 { color: #4945ff; - font-size: 0.875rem; - line-height: 1.43; + font-size: 0.75rem; + line-height: 1.33; } .c4 { @@ -4487,8 +4487,8 @@ exports[`EditSettingsView should add relation 1`] = ` .c6 { color: #4945ff; - font-size: 0.875rem; - line-height: 1.43; + font-size: 0.75rem; + line-height: 1.33; } .c4 { diff --git a/packages/core/admin/admin/src/content-manager/pages/EditView/Header/tests/index.test.js b/packages/core/admin/admin/src/content-manager/pages/EditView/Header/tests/index.test.js index aab5569696..832844c920 100644 --- a/packages/core/admin/admin/src/content-manager/pages/EditView/Header/tests/index.test.js +++ b/packages/core/admin/admin/src/content-manager/pages/EditView/Header/tests/index.test.js @@ -208,8 +208,8 @@ describe('CONTENT MANAGER | EditView | Header', () => { .c5 { color: #4945ff; - font-size: 0.875rem; - line-height: 1.43; + font-size: 0.75rem; + line-height: 1.33; } .c3 { diff --git a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/__snapshots__/index.test.js.snap index eee928f4bf..28ff806332 100644 --- a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/__snapshots__/index.test.js.snap +++ b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/__snapshots__/index.test.js.snap @@ -706,8 +706,8 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1 .c9 { color: #4945ff; - font-size: 0.875rem; - line-height: 1.43; + font-size: 0.75rem; + line-height: 1.33; } .c7 { @@ -2574,8 +2574,8 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = ` .c9 { color: #4945ff; - font-size: 0.875rem; - line-height: 1.43; + font-size: 0.75rem; + line-height: 1.33; } .c7 { diff --git a/packages/core/admin/admin/src/pages/AuthPage/components/Login/tests/BaseLogin.test.js b/packages/core/admin/admin/src/pages/AuthPage/components/Login/tests/BaseLogin.test.js index 8f0c4d0794..8ae141ca36 100644 --- a/packages/core/admin/admin/src/pages/AuthPage/components/Login/tests/BaseLogin.test.js +++ b/packages/core/admin/admin/src/pages/AuthPage/components/Login/tests/BaseLogin.test.js @@ -577,8 +577,8 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => { .c39 { color: #4945ff; - font-size: 0.875rem; - line-height: 1.43; + font-size: 0.75rem; + line-height: 1.33; } .c38 { diff --git a/packages/core/admin/admin/src/pages/AuthPage/components/Oops/tests/index.test.js b/packages/core/admin/admin/src/pages/AuthPage/components/Oops/tests/index.test.js index eaecd7a6de..d447a4754a 100644 --- a/packages/core/admin/admin/src/pages/AuthPage/components/Oops/tests/index.test.js +++ b/packages/core/admin/admin/src/pages/AuthPage/components/Oops/tests/index.test.js @@ -126,8 +126,8 @@ describe('ADMIN | PAGES | AUTH | Oops', () => { .c22 { color: #4945ff; - font-size: 0.875rem; - line-height: 1.43; + font-size: 0.75rem; + line-height: 1.33; } .c21 { diff --git a/packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/tests/index.test.js b/packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/tests/index.test.js index 6817f7f097..b8448779e9 100644 --- a/packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/tests/index.test.js +++ b/packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/tests/index.test.js @@ -441,8 +441,8 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => { .c41 { color: #4945ff; - font-size: 0.875rem; - line-height: 1.43; + font-size: 0.75rem; + line-height: 1.33; } .c40 { diff --git a/packages/core/admin/admin/src/pages/HomePage/tests/index.test.js b/packages/core/admin/admin/src/pages/HomePage/tests/index.test.js index 9f0188064d..bad46f9421 100644 --- a/packages/core/admin/admin/src/pages/HomePage/tests/index.test.js +++ b/packages/core/admin/admin/src/pages/HomePage/tests/index.test.js @@ -339,8 +339,8 @@ describe('Homepage', () => { .c41 { color: #4945ff; - font-size: 0.875rem; - line-height: 1.43; + font-size: 0.75rem; + line-height: 1.33; } .c42 { 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 94b8aea0d7..43c44f452c 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, @@ -162,7 +162,7 @@ const ApiTokenCreateView = () => { } ); - const handleSubmit = async (body, actions, tokenType) => { + const handleSubmit = async (body, actions) => { trackUsageRef.current(isCreating ? 'willCreateToken' : 'willEditToken'); lockApp(); @@ -172,13 +172,13 @@ const ApiTokenCreateView = () => { } = isCreating ? await axiosInstance.post(`/admin/api-tokens`, { ...body, - 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) { @@ -218,47 +218,47 @@ const ApiTokenCreateView = () => { } }; - const hasAllActionsSelected = useMemo(() => { - const { data, selectedActions } = state; + // const hasAllActionsSelected = useMemo(() => { + // const { data, selectedActions } = state; - const areAllActionsSelected = data.allActionsIds.every((actionId) => - selectedActions.includes(actionId) - ); + // const areAllActionsSelected = data.allActionsIds.every((actionId) => + // selectedActions.includes(actionId) + // ); - return areAllActionsSelected; - }, [state]); + // return areAllActionsSelected; + // }, [state]); - const hasAllActionsNotSelected = useMemo(() => { - const { selectedActions } = state; + // const hasAllActionsNotSelected = useMemo(() => { + // const { selectedActions } = state; - const areAllActionsNotSelected = selectedActions.length === 0; + // const areAllActionsNotSelected = selectedActions.length === 0; - return areAllActionsNotSelected; - }, [state]); + // return areAllActionsNotSelected; + // }, [state]); - const hasReadOnlyActionsSelected = useMemo(() => { - const { data, selectedActions } = 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); - } + // const areAllActionsReadOnly = data.allActionsIds.every((actionId) => { + // if (actionId.includes('find') || actionId.includes('findOne')) { + // return selectedActions.includes(actionId); + // } - return !selectedActions.includes(actionId); - }); + // return !selectedActions.includes(actionId); + // }); - return areAllActionsReadOnly; - }, [state]); + // return areAllActionsReadOnly; + // }, [state]); - const tokenTypeValue = useMemo(() => { - if (hasAllActionsSelected && !hasReadOnlyActionsSelected) return 'full-access'; + // const tokenTypeValue = useMemo(() => { + // if (hasAllActionsSelected && !hasReadOnlyActionsSelected) return 'full-access'; - if (hasReadOnlyActionsSelected) return 'read-only'; + // if (hasReadOnlyActionsSelected) return 'read-only'; - if (hasAllActionsNotSelected) return null; + // if (hasAllActionsNotSelected) return null; - return 'custom'; - }, [hasAllActionsSelected, hasReadOnlyActionsSelected, hasAllActionsNotSelected]); + // return 'custom'; + // }, [hasAllActionsSelected, hasReadOnlyActionsSelected, hasAllActionsNotSelected]); const handleChangeCheckbox = ({ target: { value } }) => { dispatch({ @@ -331,9 +331,13 @@ const ApiTokenCreateView = () => { lifespan: apiToken?.lifespan, }} enableReinitialize - onSubmit={(body, actions) => handleSubmit(body, actions, tokenTypeValue)} + onSubmit={(body, actions) => handleSubmit(body, actions)} > {({ errors, handleChange, isSubmitting, values }) => { + if (state.selectedActions.length > 0 && !values?.type) { + values.type = 'custom'; + } + return (
{ id: 'Settings.apiTokens.form.type', defaultMessage: 'Token type', })} - value={tokenTypeValue} + value={values?.type} error={ errors.type ? formatMessage( @@ -554,7 +558,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..d460cbd556 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 @@ -676,8 +676,8 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot .c6 { color: #4945ff; - font-size: 0.875rem; - line-height: 1.43; + font-size: 0.75rem; + line-height: 1.33; } .c4 { @@ -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; } @@ -2622,8 +2632,8 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot .c6 { color: #4945ff; - font-size: 0.875rem; - line-height: 1.43; + font-size: 0.75rem; + line-height: 1.33; } .c4 { @@ -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 >