diff --git a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/index.js b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/index.js index e29fe7fc0..474e44717 100644 --- a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/index.js +++ b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/index.js @@ -9,7 +9,7 @@ import OAuth2PasswordCredentials from 'components/RequestPane/Auth/OAuth2/Passwo import OAuth2ClientCredentials from 'components/RequestPane/Auth/OAuth2/ClientCredentials/index'; import GrantTypeSelector from 'components/RequestPane/Auth/OAuth2/GrantTypeSelector/index'; -const grantTypeComponentMap = (collection) => { +const GrantTypeComponentMap = ({collection }) => { const dispatch = useDispatch(); const save = () => { @@ -41,7 +41,7 @@ const OAuth2 = ({ collection }) => { return ( - {grantTypeComponentMap(collection)} + ); }; diff --git a/packages/bruno-app/src/components/FolderSettings/Auth/index.js b/packages/bruno-app/src/components/FolderSettings/Auth/index.js index 4ef704cd7..e465d174d 100644 --- a/packages/bruno-app/src/components/FolderSettings/Auth/index.js +++ b/packages/bruno-app/src/components/FolderSettings/Auth/index.js @@ -10,7 +10,7 @@ import OAuth2ClientCredentials from 'components/RequestPane/Auth/OAuth2/ClientCr import GrantTypeSelector from 'components/RequestPane/Auth/OAuth2/GrantTypeSelector/index'; import AuthMode from '../AuthMode'; -const grantTypeComponentMap = (collection, folder) => { +const GrantTypeComponentMap = ({ collection, folder }) => { const dispatch = useDispatch(); const save = () => { @@ -52,7 +52,7 @@ const Auth = ({ collection, folder }) => { collection={collection} folder={folder} /> - {grantTypeComponentMap(collection, folder)} + ); } diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js index bae6e4a0d..40f74c713 100644 --- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js +++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js @@ -1,4 +1,4 @@ -import React, { useRef, forwardRef, useState, useEffect } from 'react'; +import React, { useRef, forwardRef, useState, useEffect, useMemo } from 'react'; import get from 'lodash/get'; import { useTheme } from 'providers/Theme'; import { useDispatch } from 'react-redux'; @@ -11,7 +11,9 @@ import { inputsConfig } from './inputsConfig'; import toast from 'react-hot-toast'; import Oauth2TokenViewer from '../Oauth2TokenViewer/index'; import { cloneDeep, find } from 'lodash'; -import { interpolateStringUsingCollectionAndItem } from 'utils/collections/index'; +import { getAllVariables } from 'utils/collections/index'; +import brunoCommon from '@usebruno/common'; +const { interpolate } = brunoCommon; const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAuth, collection, folder }) => { const dispatch = useDispatch(); @@ -37,13 +39,20 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu tokenPlacement, tokenHeaderPrefix, tokenQueryKey, - refreshUrl, + refreshTokenUrl, autoRefreshToken, autoFetchToken } = oAuth; - const refreshUrlAvailable = refreshUrl?.trim() !== ''; - const isAutoRefreshDisabled = !refreshUrlAvailable; + const { uid: collectionUid } = collection; + + const interpolatedAccessTokenUrl = useMemo(() => { + const variables = getAllVariables(collection, item); + return interpolate(accessTokenUrl, variables); + }, [collection, item, accessTokenUrl]); + + const refreshTokenUrlAvailable = refreshTokenUrl?.trim() !== ''; + const isAutoRefreshDisabled = !refreshTokenUrlAvailable; const TokenPlacementIcon = forwardRef((props, ref) => { @@ -127,7 +136,7 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu tokenPlacement, tokenHeaderPrefix, tokenQueryKey, - refreshUrl, + refreshTokenUrl, autoRefreshToken, autoFetchToken, [key]: value, @@ -164,7 +173,6 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu }; const handleClearCache = (e) => { - const interpolatedAccessTokenUrl = interpolateStringUsingCollectionAndItem({ collection, item, string: accessTokenUrl }); dispatch(clearOauth2Cache({ collectionUid: collection?.uid, url: interpolatedAccessTokenUrl, credentialsId })) .then(() => { toast.success('cleared cache successfully'); @@ -174,9 +182,7 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu }); }; - const { uid: collectionUid } = collection; - const interpolatedUrl = interpolateStringUsingCollectionAndItem({ collection, item, string: accessTokenUrl }); - const credentialsData = find(collection?.oauth2Credentials, creds => creds?.url == interpolatedUrl && creds?.collectionUid == collectionUid && creds?.credentialsId == credentialsId); + const credentialsData = find(collection?.oauth2Credentials, creds => creds?.url == interpolatedAccessTokenUrl && creds?.collectionUid == collectionUid && creds?.credentialsId == credentialsId); const creds = credentialsData?.credentials || {}; useEffect(() => { @@ -339,10 +345,10 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
handleChange("refreshUrl", val)} + onChange={(val) => handleChange("refreshTokenUrl", val)} collection={collection} item={item} /> diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.js index 431ea2839..16df7ca7c 100644 --- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.js +++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.js @@ -11,7 +11,9 @@ import Dropdown from 'components/Dropdown'; import Oauth2TokenViewer from '../Oauth2TokenViewer/index'; import toast from 'react-hot-toast'; import { cloneDeep } from 'lodash'; -import { interpolateStringUsingCollectionAndItem } from 'utils/collections/index'; +import { getAllVariables } from 'utils/collections/index'; +import brunoCommon from '@usebruno/common'; +const { interpolate } = brunoCommon; const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAuth, collection }) => { const dispatch = useDispatch(); @@ -33,13 +35,18 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu tokenPlacement, tokenHeaderPrefix, tokenQueryKey, - refreshUrl, + refreshTokenUrl, autoRefreshToken, autoFetchToken } = oAuth; - const refreshUrlAvailable = refreshUrl?.trim() !== ''; - const isAutoRefreshDisabled = !refreshUrlAvailable; + const interpolatedAccessTokenUrl = useMemo(() => { + const variables = getAllVariables(collection, item); + return interpolate(accessTokenUrl, variables); + }, [collection, item, accessTokenUrl]); + + const refreshTokenUrlAvailable = refreshTokenUrl?.trim() !== ''; + const isAutoRefreshDisabled = !refreshTokenUrlAvailable; const handleFetchOauth2Credentials = async () => { let requestCopy = cloneDeep(request); @@ -113,7 +120,7 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu tokenPlacement, tokenHeaderPrefix, tokenQueryKey, - refreshUrl, + refreshTokenUrl, autoRefreshToken, autoFetchToken, [key]: value @@ -123,7 +130,6 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu }; const handleClearCache = (e) => { - const interpolatedAccessTokenUrl = interpolateStringUsingCollectionAndItem({ collection, item, string: accessTokenUrl }); dispatch(clearOauth2Cache({ collectionUid: collection?.uid, url: interpolatedAccessTokenUrl, credentialsId })) .then(() => { toast.success('cleared cache successfully'); @@ -279,10 +285,10 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
handleChange("refreshUrl", val)} + onChange={(val) => handleChange("refreshTokenUrl", val)} collection={collection} item={item} /> diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/CredentialsPreview/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/CredentialsPreview/StyledWrapper.js deleted file mode 100644 index a1f84cfe6..000000000 --- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/CredentialsPreview/StyledWrapper.js +++ /dev/null @@ -1,17 +0,0 @@ -import styled from 'styled-components'; - -const Wrapper = styled.div` - label { - display: block; - font-size: 0.8125rem; - } - - textarea { - height: fit-content; - max-width: 400px; - border: solid 1px ${(props) => props.theme.input.border}; - background-color: ${(props) => props.theme.input.bg}; - } -`; - -export default Wrapper; diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/CredentialsPreview/index.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/CredentialsPreview/index.js deleted file mode 100644 index 7734affd4..000000000 --- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/CredentialsPreview/index.js +++ /dev/null @@ -1,80 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { readOauth2CachedCredentials } from 'utils/network'; -import { sendCollectionOauth2Request, sendRequest, clearOauth2Cache } from 'providers/ReduxStore/slices/collections/actions'; -import toast from 'react-hot-toast'; -import { useDispatch } from 'react-redux'; -import StyledWrapper from './StyledWrapper'; - -const CredentialsPreview = ({ item, collection }) => { - const oauth2CredentialsAreaRef = React.createRef(); - const [oauth2Credentials, setOauth2Credentials] = useState({}); - - const dispatch = useDispatch(); - useEffect(() => { - oauth2CredentialsAreaRef.current.value = oauth2Credentials; - readOauth2CachedCredentials(collection.uid).then((credentials) => setOauth2Credentials(credentials)); - }, [oauth2CredentialsAreaRef]); - - const handleRun = async () => { - if (item) { - dispatch(sendRequest(item, collection.uid)); - } else { - dispatch(sendCollectionOauth2Request(collection.uid)); - } - }; - - const handleClearCache = (e) => { - dispatch(clearOauth2Cache({ collectionUid: collection?.uid, url: '' })) - .then(() => { - readOauth2CachedCredentials(collection.uid).then((credentials) => { - setOauth2Credentials(credentials); - toast.success('Cleared cache successfully'); - }); - }) - .catch((err) => { - toast.error(err.message); - }); - }; - - const sortedFields = () => { - const tokens = {}; - const extras = {}; - Object.entries(oauth2Credentials).forEach(([key, value]) => { - if (key.endsWith('_token')) { - tokens[key] = value; - } else { - extras[key] = value; - } - }); - return { ...tokens, ...extras }; - }; - - return ( - -
- {Object.entries(oauth2Credentials).length > 0 ? ( - <> - -
- Cached OAuth2 Credentials - {Object.entries(sortedFields()).map(([field, value]) => ( -
- -