Merge pull request #14314 from strapi/api-token-v2/sync-token-type-and-permissions

Synchronize the token type selector with the permissions in the request

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 (
               <Form>
                 <HeaderLayout
@@ -531,7 +499,7 @@ const ApiTokenCreateView = () => {
                                 id: 'Settings.apiTokens.form.type',
                                 defaultMessage: 'Token type',
                               })}
-                              value={tokenTypeValue}
+                              value={values?.type}
                               error={
                                 errors.type
                                   ? formatMessage(
@@ -572,7 +540,13 @@ const ApiTokenCreateView = () => {
                         </Grid>
                       </Stack>
                     </Box>
-                    <Permissions disabled={!canEditInputs} />
+                    <Permissions
+                      disabled={
+                        !canEditInputs ||
+                        values?.type === 'read-only' ||
+                        values?.type === 'full-access'
+                      }
+                    />
                   </Stack>
                 </ContentLayout>
               </Form>

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"
                               >
                                 <span
-                                  class="c63"
+                                  class="c69"
                                   id="select-12-content"
                                 >
-                                  Select
+                                  Read-only
                                 </span>
                               </div>
                             </div>
@@ -3563,7 +3573,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                             >
                               <button
                                 aria-hidden="true"
-                                class="c64 c65 c69"
+                                class="c64 c65 c70"
                                 tabindex="-1"
                                 type="button"
                               >
@@ -3593,16 +3603,16 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
             </div>
           </div>
           <div
-            class="c70 c71"
-          >
-            <div
-              class="c72"
+            class="c71 c72"
           >
             <div
               class="c73"
             >
               <div
-                  class="c21 c74"
+                class="c74"
+              >
+                <div
+                  class="c21 c75"
                   spacing="2"
                 >
                   <h2
@@ -3617,19 +3627,19 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                   </p>
                 </div>
                 <div
-                  class="c75"
+                  class="c76"
                 >
                   <div
                     aria-disabled="false"
-                    class="c76 c77"
+                    class="c77 c78"
                     data-strapi-expanded="false"
                   >
                     <div
-                      class="c78 c79 c80 c81"
+                      class="c79 c80 c81 c82"
                       cursor=""
                     >
                       <div
-                        class="c78 c82 c83 c84"
+                        class="c79 c83 c84 c85"
                         spacing="3"
                       >
                         <button
@@ -3637,15 +3647,15 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                           aria-disabled="false"
                           aria-expanded="false"
                           aria-labelledby="accordion-label-accordion-7"
-                          class="c78 c85 c83 c86 c87"
+                          class="c79 c86 c84 c87 c88"
                           data-strapi-accordion-toggle="true"
                           type="button"
                         >
                           <span
-                            class="c88 c89"
+                            class="c89 c90"
                           >
                             <span
-                              class="c88 sc-OVzLa c90"
+                              class="c89 sc-OVzLa c91"
                               id="accordion-label-accordion-7"
                             >
                               Address
@@ -3653,19 +3663,19 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                           </span>
                         </button>
                         <div
-                          class="c78 c83 c84"
+                          class="c79 c84 c85"
                           spacing="3"
                         >
                           <span
                             aria-hidden="true"
-                            class="c78 c91 c92"
+                            class="c79 c92 c93"
                             cursor="pointer"
                             data-strapi-dropdown="true"
                             height="2rem"
                             width="2rem"
                           >
                             <svg
-                              class="c93 c94"
+                              class="c94 c95"
                               fill="none"
                               height="1em"
                               viewBox="0 0 14 8"
@@ -3686,15 +3696,15 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                   </div>
                   <div
                     aria-disabled="false"
-                    class="c76 c95"
+                    class="c77 c96"
                     data-strapi-expanded="false"
                   >
                     <div
-                      class="c78 c96 c80 c81"
+                      class="c79 c97 c81 c82"
                       cursor=""
                     >
                       <div
-                        class="c78 c82 c83 c84"
+                        class="c79 c83 c84 c85"
                         spacing="3"
                       >
                         <button
@@ -3702,15 +3712,15 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                           aria-disabled="false"
                           aria-expanded="false"
                           aria-labelledby="accordion-label-accordion-8"
-                          class="c78 c85 c83 c86 c87"
+                          class="c79 c86 c84 c87 c88"
                           data-strapi-accordion-toggle="true"
                           type="button"
                         >
                           <span
-                            class="c88 c89"
+                            class="c89 c90"
                           >
                             <span
-                              class="c88 sc-OVzLa c90"
+                              class="c89 sc-OVzLa c91"
                               id="accordion-label-accordion-8"
                             >
                               Category
@@ -3718,19 +3728,19 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                           </span>
                         </button>
                         <div
-                          class="c78 c83 c84"
+                          class="c79 c84 c85"
                           spacing="3"
                         >
                           <span
                             aria-hidden="true"
-                            class="c78 c91 c92"
+                            class="c79 c92 c93"
                             cursor="pointer"
                             data-strapi-dropdown="true"
                             height="2rem"
                             width="2rem"
                           >
                             <svg
-                              class="c93 c94"
+                              class="c94 c95"
                               fill="none"
                               height="1em"
                               viewBox="0 0 14 8"
@@ -3753,14 +3763,14 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
               </div>
             </div>
             <div
-              class="c97"
+              class="c98"
             >
               <div
-                class="c98"
+                class="c99"
                 style="min-height: 100%;"
               >
                 <div
-                  class="c21 c74"
+                  class="c21 c75"
                   spacing="2"
                 >
                   <h3
@@ -3782,7 +3792,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
     </form>
   </main>
   <div
-    class="c99"
+    class="c100"
   >
     <p
       aria-live="polite"

yarn.lock

@@ -17822,6 +17822,8 @@ path-case@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/path-case/-/path-case-2.1.1.tgz#94b8037c372d3fe2906e465bb45e25d226e8eea5"
   integrity sha1-lLgDfDctP+KQbkZbtF4l0ibo7qU=
+  dependencies:
+    no-case "^2.2.0"
 
 path-dirname@^1.0.0:
   version "1.0.2"