additional params updates

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/index.js

@@ -18,7 +18,9 @@ const AdditionalParams  = ({ item = {}, request, updateAuth, collection }) => {
     additionalParameters = {}
   } = oAuth;
 
-  const [activeTab, setActiveTab] = useState(grantType == 'authorization_code' ? 'authorization' : 'token');
+  const [activeTab, setActiveTab] = useState(
+    (grantType == 'authorization_code' || grantType == 'implicit') ? 'authorization' : 'token'
+  );
 
   const isEmptyParam = (param) => {
     return !param.name.trim() && !param.value.trim();
@@ -138,6 +140,29 @@ const AdditionalParams  = ({ item = {}, request, updateAuth, collection }) => {
   // Add a class to the Add Parameter button if it's disabled
   const addButtonDisabled = hasEmptyRow();
 
+  // Define available tabs for each grant type
+  const getAvailableTabs = (grantType) => {
+    const tabConfig = {
+      'authorization_code': ['authorization', 'token', 'refresh'],
+      'implicit': ['authorization'],
+      'password': ['token', 'refresh'],
+      'client_credentials': ['token', 'refresh']
+    };
+    return tabConfig[grantType] || ['token', 'refresh'];
+  };
+
+  const availableTabs = getAvailableTabs(grantType);
+
+  const renderTab = (tabKey, tabLabel) => (
+    <div 
+      key={tabKey}
+      className={`tab ${activeTab === tabKey ? 'active' : ''}`} 
+      onClick={() => setActiveTab(tabKey)}
+    >
+      {tabLabel}
+    </div>
+  );
+
   return (
     <StyledWrapper className="mt-4">
       <div className="flex items-center gap-2.5 mb-3">
@@ -150,9 +175,9 @@ const AdditionalParams  = ({ item = {}, request, updateAuth, collection }) => {
       </div>
       
       <div className="tabs flex w-full gap-2 my-2">
-        {grantType == 'authorization_code' && <div className={`tab ${activeTab == 'authorization' ? 'active': ''}`} onClick={e => setActiveTab('authorization')}>Authorization</div>}
-        <div className={`tab ${activeTab == 'token' ? 'active': ''}`} onClick={e => setActiveTab('token')}>Token</div>
-        <div className={`tab ${activeTab == 'refresh' ? 'active': ''}`} onClick={e => setActiveTab('refresh')}>Refresh</div>
+        {availableTabs.includes('authorization') && renderTab('authorization', 'Authorization')}
+        {availableTabs.includes('token') && renderTab('token', 'Token')}
+        {availableTabs.includes('refresh') && renderTab('refresh', 'Refresh')}
       </div>
       <Table
         headers={[
@@ -286,5 +311,8 @@ const sendInOptionsMap = {
   'client_credentials': {
     'token': ['headers', 'queryparams', 'body'],
     'refresh': ['headers', 'queryparams', 'body']
+  },
+  'implicit': {
+    'authorization': ['headers', 'queryparams']
   }
 }

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/index.js

@@ -1,16 +1,15 @@
-import React, { useRef, forwardRef, useState, useMemo } from 'react';
+import React, { useRef, forwardRef, useMemo } from 'react';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
-import { IconCaretDown, IconLoader2, IconSettings, IconKey, IconHelp, IconAdjustmentsHorizontal } from '@tabler/icons';
+import { IconCaretDown, IconSettings, IconKey, IconHelp, IconAdjustmentsHorizontal } from '@tabler/icons';
 import Dropdown from 'components/Dropdown';
 import SingleLineEditor from 'components/SingleLineEditor';
-import { clearOauth2Cache, fetchOauth2Credentials } from 'providers/ReduxStore/slices/collections/actions';
 import Wrapper from './StyledWrapper';
 import { inputsConfig } from './inputsConfig';
-import toast from 'react-hot-toast';
 import Oauth2TokenViewer from '../Oauth2TokenViewer/index';
-import { cloneDeep } from 'lodash';
+import Oauth2ActionButtons from '../Oauth2ActionButtons/index';
+import AdditionalParams from '../AdditionalParams/index';
 import { getAllVariables } from 'utils/collections/index';
 import { interpolate } from '@usebruno/common';
 
@@ -19,7 +18,6 @@ const OAuth2Implicit = ({ save, item = {}, request, handleRun, updateAuth, colle
   const { storedTheme } = useTheme();
   const dropdownTippyRef = useRef();
   const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
-  const [fetchingToken, toggleFetchingToken] = useState(false);
 
   const oAuth = get(request, 'auth.oauth2', {});
   const {
@@ -49,38 +47,6 @@ const OAuth2Implicit = ({ save, item = {}, request, handleRun, updateAuth, colle
     );
   });
 
-  const handleFetchOauth2Credentials = async () => {
-    let requestCopy = cloneDeep(request);
-    requestCopy.oauth2 = requestCopy?.auth.oauth2;
-    requestCopy.headers = {};
-    toggleFetchingToken(true);
-    try {
-      const result = await dispatch(fetchOauth2Credentials({
-        itemUid: item.uid,
-        request: requestCopy,
-        collection,
-        folderUid: folder?.uid || null,
-        forceGetToken: true
-      }));
-
-      toggleFetchingToken(false);
-
-      // Check if the result contains error or if access_token is missing
-      if (result?.error || !result?.access_token) {
-        const errorMessage = result?.error || 'No access token received from authorization server';
-        toast.error(errorMessage);
-        return;
-      }
-
-      toast.success('Token fetched successfully!');
-    }
-    catch (error) {
-      console.error(error);
-      toggleFetchingToken(false);
-      toast.error(error?.message || 'An error occurred while fetching token!');
-    }
-  }
-
   const handleSave = () => { save(); };
 
   const handleChange = (key, value) => {
@@ -111,16 +77,6 @@ const OAuth2Implicit = ({ save, item = {}, request, handleRun, updateAuth, colle
     handleChange('autoFetchToken', e.target.checked);
   };
 
-  const handleClearCache = (e) => {
-    dispatch(clearOauth2Cache({ collectionUid: collection?.uid, url: interpolatedAuthUrl, credentialsId }))
-      .then(() => {
-        toast.success('Cleared cache successfully');
-      })
-      .catch((err) => {
-        toast.error(err.message);
-      });
-  };
-
   return (
     <Wrapper className="mt-2 flex w-full gap-4 flex-col">
       <Oauth2TokenViewer handleRun={handleRun} collection={collection} item={item} url={authorizationUrl} credentialsId={credentialsId} />
@@ -262,18 +218,13 @@ const OAuth2Implicit = ({ save, item = {}, request, handleRun, updateAuth, colle
         </div>
       </div>
 
-      <div className="flex flex-row gap-4 mt-4">
-        <button
-          onClick={handleFetchOauth2Credentials}
-          className={`submit btn btn-sm btn-secondary w-fit flex flex-row`}
-          disabled={fetchingToken}
-        >
-          Get Access Token{fetchingToken ? <IconLoader2 className="animate-spin ml-2" size={18} strokeWidth={1.5} /> : ""}
-        </button>
-        <button onClick={handleClearCache} className="submit btn btn-sm btn-secondary w-fit">
-          Clear Cache
-        </button>
-      </div>
+      <AdditionalParams 
+        item={item} 
+        request={request} 
+        collection={collection} 
+        updateAuth={updateAuth} 
+      />
+      <Oauth2ActionButtons item={item} request={request} collection={collection} url={interpolatedAuthUrl} credentialsId={credentialsId} />
     </Wrapper>
   );
 };

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2ActionButtons/index.js

@@ -99,12 +99,22 @@ const Oauth2ActionButtons = ({ item, request, collection, url: accessTokenUrl, c
 
   return (
     <div className="flex flex-row gap-4 mt-4">
-      <button onClick={handleFetchOauth2Credentials} className={`submit btn btn-sm btn-secondary w-fit flex flex-row`}>
+      <button 
+        onClick={handleFetchOauth2Credentials} 
+        className={`submit btn btn-sm btn-secondary w-fit flex flex-row`}
+        disabled={fetchingToken || refreshingToken}
+      >
         Get Access Token{fetchingToken? <IconLoader2 className="animate-spin ml-2" size={18} strokeWidth={1.5} /> : ""}
       </button>
-      {creds?.refresh_token ? <button onClick={handleRefreshAccessToken} className={`submit btn btn-sm btn-secondary w-fit flex flex-row`}>
-        Refresh Token{refreshingToken? <IconLoader2 className="animate-spin ml-2" size={18} strokeWidth={1.5} /> : ""}
-      </button> : null}
+      {creds?.refresh_token ? 
+        <button 
+          onClick={handleRefreshAccessToken}
+          className={`submit btn btn-sm btn-secondary w-fit flex flex-row`}
+          disabled={fetchingToken || refreshingToken}
+        >
+          Refresh Token{refreshingToken? <IconLoader2 className="animate-spin ml-2" size={18} strokeWidth={1.5} /> : ""}
+        </button> 
+      : null}
       <button onClick={handleClearCache} className="submit btn btn-sm btn-secondary w-fit">
         Clear Cache
       </button>