replace axiosInstance with getFetchClient inside the users-permissions

[simotae14]

What does it do?

Replace every instance of axiosInstance with the new useFetchClient and getFetchClient in the users-permissions plugin

We have already implemented the new constructs useFetchClient and getFetchClient in this PR

Now we need to replace every place where we use axiosInstance with the new constructs, test the possible regression errors and still provide the old implementation of the axiosInstance into the helper plugin with a message of the removal in v5

Why is it needed?

Inside the Strapi project we have a lot of different implementations of the same code to use axios and its axiosInstance. In this branch we replace axiosInstance in the users-permissions plugin

How to test it?

You need to use the new construct inside every axiosInstance call and check the possible regression errors

List of the API calls in the Admin where we use the new construct and how to test them:
Here you can see a list of API calls changed with the instructions to test them:

• Roles ListPage fetchData GET, http://localhost:1337/users-permissions/roles from the Admin click on “Settings“, under the “GENERAL“ section, then click on “Roles“ under “USERS & PERMISSIONS PLUGIN“ it will trigger the api call, as you can see in these screenshots Roles ListPage deleteData DELETE, ex: http://localhost:1337/users-permissions/roles/7 from the Admin click on “Settings“, under the “GENERAL“ section, then click on “Roles“ under “USERS & PERMISSIONS PLUGIN“ and select an entry, click on the Trash icon and confirm your choice in the popup, it will trigger the api call, as you can see in these screenshots https://www.loom.com/i/c6cb1a95aa374e6a865bc282e447d093 https://www.loom.com/i/c1f25fb181fa4e5ba7852189e002dd26 https://www.loom.com/i/dff45d0955f84bfeac5a58baea1d0132 https://www.loom.com/i/b459e17d873f469aab6df421244cb036 https://www.loom.com/i/88b4dd800187473ca45d968b63f25ba4

• hooks useFetchRole GET, ex: http://localhost:1337/users-permissions/roles/1 from the Admin click on “Settings“, under the “GENERAL“ section, then click on “Roles“ under “USERS & PERMISSIONS PLUGIN“ and select an entry, open the entry, it will trigger the api call, as you can see in these screenshots https://www.loom.com/i/c6cb1a95aa374e6a865bc282e447d093 https://www.loom.com/i/c1f25fb181fa4e5ba7852189e002dd26 https://www.loom.com/i/63525a2d10d24463a429253e2ffd28b6 https://www.loom.com/i/219bf77b721f4233810fec35235ceb0d https://www.loom.com/i/e0b09cdf24404e8ab8f5eafc81209a27 https://www.loom.com/i/5c0823780f0f48188661b8118a8699d8 https://www.loom.com/i/5cb0b4caaa544652a8e6e5ef5b77ec15 https://www.loom.com/i/b699cd440bbe491daf23dc75a1fa4090

• hooks usePlugins GET http://localhost:1337/users-permissions/permissions and http://localhost:1337/users-permissions/routes from the Admin click on “Settings“, under the “GENERAL“ section, then click on “Roles“ under “USERS & PERMISSIONS PLUGIN“ and select an entry, open the entry, it will trigger the api calls, as you can see in these screenshots https://www.loom.com/i/c6cb1a95aa374e6a865bc282e447d093 https://www.loom.com/i/c1f25fb181fa4e5ba7852189e002dd26 https://www.loom.com/i/63525a2d10d24463a429253e2ffd28b6 https://www.loom.com/i/e09612f0b6c94abc90aaf9d1076c939e https://www.loom.com/i/00fd09f62f044c8a94ad603a2dd5ab7a https://www.loom.com/i/df345e733aec49f6b32edbfb8ec04f3a

• AdvancedSettings fetchData GET http://localhost:1337/users-permissions/advanced from the Admin click on “Settings“, under the “GENERAL“ section, then click on “Advanced Settings“ under “USERS & PERMISSIONS PLUGIN“, it will trigger the api calls, as you can see in these screenshots https://www.loom.com/i/c6cb1a95aa374e6a865bc282e447d093 https://www.loom.com/i/c1f25fb181fa4e5ba7852189e002dd26 https://www.loom.com/i/63525a2d10d24463a429253e2ffd28b6 https://www.loom.com/i/e09612f0b6c94abc90aaf9d1076c939e https://www.loom.com/i/caf653368cd34ec78f7b9750633f428f https://www.loom.com/i/1f92a1b133674c3d80f35f01174ac945 https://www.loom.com/i/b841689d0f884d65bd1b372bd2bb5c8b https://www.loom.com/i/0686bfd27ee740f682fb904ba74b21bc

• AdvancedSettings putData PUT http://localhost:1337/users-permissions/advanced from the Admin click on “Settings“, under the “GENERAL“ section, then click on “Advanced Settings“ under “USERS & PERMISSIONS PLUGIN“, on this page click the Save button, it will trigger the api calls, as you can see in these screenshots https://www.loom.com/i/97699efc070c44f78704d6fd02fef0b3 https://www.loom.com/i/558bde143f48462094ecd155636773af https://www.loom.com/i/e8307cca1e8f43828446adcef5b2bda7 https://www.loom.com/i/786f67dbaa5b4d3b82cfe9a0691876bb https://www.loom.com/i/8b8db877ef604ebb93ed4f46e95e6562

• EmailTemplates fetchData GET http://localhost:1337/users-permissions/email-templates from the Admin click on “Settings“, under the “GENERAL“ section, then click on “Email Templates“ under “USERS & PERMISSIONS PLUGIN“, it will trigger the api calls, as you can see in these screenshots https://www.loom.com/i/25a9686f431e4ab58d9963c2b608e187 https://www.loom.com/i/b6a56758ceaa4f3d8b42294f267879aa https://www.loom.com/i/2f8dc8c97b1c408f88e765dafbb0832b https://www.loom.com/i/cf83fc44da2244e79fd89b031f2636c0 https://www.loom.com/i/ba10d60275e0405ca341df83a29fbab9 https://www.loom.com/i/692ee6c112fa46b59df479b7db724783

• EmailTemplates putEmailTemplate PUT http://localhost:1337/users-permissions/email-templates from the Admin click on “Settings“, under the “GENERAL“ section, then click on “Email Templates“ under “USERS & PERMISSIONS PLUGIN“, edit one of the two entries, save the form, it will trigger the api calls, as you can see in these screenshots https://www.loom.com/i/25a9686f431e4ab58d9963c2b608e187 https://www.loom.com/i/b6a56758ceaa4f3d8b42294f267879aa https://www.loom.com/i/2f8dc8c97b1c408f88e765dafbb0832b https://www.loom.com/i/7401aa52a8ad4a74acef34b8d59bddc7 https://www.loom.com/i/1327c48a49e449b9946601c5bae03a7b https://www.loom.com/i/518dd88a0d2b424d823e4f76bad2c533 https://www.loom.com/i/d257485f2e2543c5ad9dbe73bbcf7f09 https://www.loom.com/i/02fb9f3a85384d19ac5242b09b6502d7 https://www.loom.com/i/2c467bf113244778b8b8c980caa59dd5

• Providers fetchData GET http://localhost:1337/users-permissions/providers from the Admin click on “Settings“, under the “GENERAL“ section, then click on “Providers“ under “USERS & PERMISSIONS PLUGIN“, it will trigger the api calls, as you can see in these screenshots https://www.loom.com/i/9860eb2628d74b01b25b43c3405acc20 https://www.loom.com/i/e79efb84abc3456d948fbd17c45411e6 https://www.loom.com/i/ccf8aaaa560943758cbf21528cefaf59 https://www.loom.com/i/643fd650b9574a299a1f600b1684ccbf https://www.loom.com/i/0efec6bfa9ed4ce7a3ca4c1e0a0d2544 https://www.loom.com/i/aad388bf155f468ab680d587cea689e3

• Providers putProvider PUT http://localhost:1337/users-permissions/providers from the Admin click on “Settings“, under the “GENERAL“ section, then click on “Providers“ under “USERS & PERMISSIONS PLUGIN“, edit one of the entries, save the form, it will trigger the api call, as you can see in these screenshots https://www.loom.com/i/9860eb2628d74b01b25b43c3405acc20 https://www.loom.com/i/e79efb84abc3456d948fbd17c45411e6 https://www.loom.com/i/ccf8aaaa560943758cbf21528cefaf59 https://www.loom.com/i/9a350b7a53f843359019b0a371fdc90c https://www.loom.com/i/329f446dc5d6461881968d142c5044dd https://www.loom.com/i/1b6fa06dec014e59a51b35b6e4692e00 https://www.loom.com/i/2602b1e606304675ac442d1a6737a807 https://www.loom.com/i/dda083374beb4bd79be4b4837dfd6702 https://www.loom.com/i/d2f9310dcf124ca5948d1ff23099207c

• Roles createRole POST ex: http://localhost:1337/users-permissions/roles from the Admin click on “Settings“, under the “GENERAL“ section, then click on “Roles“ under “USERS & PERMISSIONS PLUGIN“, create one entry clicking on “Add new Role” and “Save“, it will trigger the api call, as you can see in these screenshots https://www.loom.com/i/1db1b2cd837f48d7b32cd8ea8cd22fde https://www.loom.com/i/4473dbc8bd7d482f99b43fe4b45e504b https://www.loom.com/i/66d371048edd467e85e6b6838d6bc7e2 https://www.loom.com/i/338bef0c13c74f519f1e760334b357dc https://www.loom.com/i/307d627e74c04bcb89b28f84f791bb60 https://www.loom.com/i/cd6a023440204fe9b8aa37847436b2d8 https://www.loom.com/i/d6102fa9dbf74f8aae17465c46451f7a https://www.loom.com/i/f60c880bc86b4deaad5e9503d3baee27 https://www.loom.com/i/5353f62f5cd2460c9252171c6423ac58

• Roles editRole PUT ex: http://localhost:1337/users-permissions/roles/11 from the Admin click on “Settings“, under the “GENERAL“ section, then click on “Roles“ under “USERS & PERMISSIONS PLUGIN“, select one entry and open it, modify one field and save, it will trigger the api call, as you can see in these screenshots https://www.loom.com/i/1db1b2cd837f48d7b32cd8ea8cd22fde https://www.loom.com/i/4473dbc8bd7d482f99b43fe4b45e504b https://www.loom.com/i/66d371048edd467e85e6b6838d6bc7e2 https://www.loom.com/i/b7312f115626467dbce4c8a3a7027cb4 https://www.loom.com/i/75475353ff6d4ba19ae4bab26f19f8bd https://www.loom.com/i/170ca88cff05410ea295d3a61b7f34bb https://www.loom.com/i/ff187d877c814528b008094850913b14 https://www.loom.com/i/16ba7bedc7b742c59dd3d7e1d166cd8b https://www.loom.com/i/efb916f6230c4dde9b6b1fea8b8cff65

[codecov]

Codecov Report

Base: 58.60% // Head: 58.60% // Increases project coverage by +0.00% 🎉

Coverage data is based on head (e3bc1cd) compared to base (15247d1).
Patch coverage: 70.58% of modified lines in pull request are covered.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #15350   +/-   ##
=======================================
  Coverage   58.60%   58.60%           
=======================================
  Files        1508     1507    -1     
  Lines       38702    38696    -6     
  Branches     7463     7462    -1     
=======================================
- Hits        22682    22679    -3     
+ Misses      13698    13696    -2     
+ Partials     2322     2321    -1     

Flag	Coverage Δ
back	47.33% <ø> (ø)
front	66.12% <70.58%> (+<0.01%)	⬆️
unit_back	47.33% <ø> (ø)
unit_front	66.12% <70.58%> (+<0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...plugins/users-permissions/admin/src/utils/index.js	100.00% <ø> (ø)
...missions/admin/src/pages/Roles/CreatePage/index.js	74.07% <50.00%> (ø)
...ermissions/admin/src/pages/Roles/EditPage/index.js	80.35% <50.00%> (ø)
...ions/admin/src/pages/AdvancedSettings/utils/api.js	77.77% <66.66%> (-5.56%)	⬇️
...ssions/admin/src/pages/EmailTemplates/utils/api.js	77.77% <66.66%> (-5.56%)	⬇️
...permissions/admin/src/pages/Providers/utils/api.js	54.54% <66.66%> (+4.54%)	⬆️
...ssions/admin/src/pages/Roles/ListPage/utils/api.js	50.00% <66.66%> (+4.54%)	⬆️
...-permissions/admin/src/hooks/useFetchRole/index.js	74.07% <100.00%> (ø)
...rs-permissions/admin/src/hooks/usePlugins/index.js	82.14% <100.00%> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[remidej]

I haven't tested all the files but the changes look good to me.

There's just one thing that's not clear to me. If I understand correctly:

• we use useFetchClient in React components or custom hooks
• we use getFetchClient in "non-react" functions, so everywhere else

But couldn't we use getFetchClient everywhere, and not need useFetchClient? Since it's a plain function it should work in both React and non-react functions. Does useFetchClient have a performance benefit over getFetchClient?

[joshuaellis]

I haven't tested all the files but the changes look good to me.
There's just one thing that's not clear to me. If I understand correctly:
we use useFetchClient in React components or custom hooks
we use getFetchClient in "non-react" functions, so everywhere else
But couldn't we use getFetchClient everywhere, and not need useFetchClient? Since it's a plain function it should work in both React and non-react functions. Does useFetchClient have a performance benefit over getFetchClient?

@remidej fair question. The hook manages lifecycle stuff so for example if the component is unmounted then the AbortController will cancel the request :) this is the main difference and imo an important helper.

[gu-stav]

Yeah good question: I'd argue we should avoid getFetchClient whenever it is possible and not at all when a request is triggered by a react component. Long term this would allow us to work on more high-level hooks that compose e.g. useFetchClient and add e.g. error handling ... to it.

[gu-stav]

Almost done ✨ One axiosInstance down.

[gu-stav]

Looks good to me! I haven't tested it functionally though. Good work! 🚀

[joshuaellis]

⭐ solid

The base branch was changed.