feat/(#1003): oauth2 support - styling fixes, code cleanup (#1674)

* feat/(#1003):  oauth2 support - styling fixes, code cleanup (#1674)
---------
Co-authored-by: lohit-1 <lohit@usebruno.com>

packages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/index.js

@@ -11,7 +11,7 @@ const BearerAuth = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const bearerToken = get(collection, 'root.request.auth.bearer.token');
+  const bearerToken = get(collection, 'root.request.auth.bearer.token', '');
 
   const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 

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

@@ -75,19 +75,19 @@ const AuthMode = ({ item, collection }) => {
             className="dropdown-item"
             onClick={() => {
               dropdownTippyRef?.current?.hide();
-              onModeChange('inherit');
+              onModeChange('oauth2');
             }}
           >
-            Inherit
+            OAuth 2.0
           </div>
           <div
             className="dropdown-item"
             onClick={() => {
               dropdownTippyRef?.current?.hide();
-              onModeChange('oauth2');
+              onModeChange('inherit');
             }}
           >
-            OAuth 2.0
+            Inherit
           </div>
           <div
             className="dropdown-item"

packages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/StyledWrapper.js

@@ -6,6 +6,7 @@ const Wrapper = styled.div`
   }
 
   .single-line-editor-wrapper {
+    max-width: 400px;
     padding: 0.15rem 0.4rem;
     border-radius: 3px;
     border: solid 1px ${(props) => props.theme.input.border};

packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/StyledWrapper.js

@@ -6,6 +6,7 @@ const Wrapper = styled.div`
   }
 
   .single-line-editor-wrapper {
+    max-width: 400px;
     padding: 0.15rem 0.4rem;
     border-radius: 3px;
     border: solid 1px ${(props) => props.theme.input.border};

packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/StyledWrapper.js

@@ -6,6 +6,7 @@ const Wrapper = styled.div`
   }
 
   .single-line-editor-wrapper {
+    max-width: 400px;
     padding: 0.15rem 0.4rem;
     border-radius: 3px;
     border: solid 1px ${(props) => props.theme.input.border};

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

@@ -12,8 +12,8 @@ const BearerAuth = ({ item, collection }) => {
   const { storedTheme } = useTheme();
 
   const bearerToken = item.draft
-    ? get(item, 'draft.request.auth.bearer.token')
+    ? get(item, 'draft.request.auth.bearer.token', '')
-    : get(item, 'request.auth.bearer.token');
+    : get(item, 'request.auth.bearer.token', '');
 
   const handleRun = () => dispatch(sendRequest(item, collection.uid));
   const handleSave = () => dispatch(saveRequest(item.uid, collection.uid));

packages/bruno-app/src/components/RequestPane/Auth/DigestAuth/StyledWrapper.js

@@ -6,6 +6,7 @@ const Wrapper = styled.div`
   }
 
   .single-line-editor-wrapper {
+    max-width: 400px;
     padding: 0.15rem 0.4rem;
     border-radius: 3px;
     border: solid 1px ${(props) => props.theme.input.border};

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.js

@@ -5,6 +5,7 @@ const Wrapper = styled.div`
     font-size: 0.8125rem;
   }
   .single-line-editor-wrapper {
+    max-width: 400px;
     padding: 0.15rem 0.4rem;
     border-radius: 3px;
     border: solid 1px ${(props) => props.theme.input.border};

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

@@ -40,7 +40,7 @@ const OAuth2AuthorizationCode = ({ item, collection }) => {
       {inputsConfig.map((input) => {
         const { key, label } = input;
         return (
-          <div className="flex flex-col w-full gap-1">
+          <div className="flex flex-col w-full gap-1" key={`input-${key}`}>
             <label className="block font-medium">{label}</label>
             <div className="single-line-editor-wrapper">
               <SingleLineEditor

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.js

@@ -5,6 +5,7 @@ const Wrapper = styled.div`
     font-size: 0.8125rem;
   }
   .single-line-editor-wrapper {
+    max-width: 400px;
     padding: 0.15rem 0.4rem;
     border-radius: 3px;
     border: solid 1px ${(props) => props.theme.input.border};

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.js

@@ -10,24 +10,24 @@ const Wrapper = styled.div`
     background-color: ${(props) => props.theme.input.bg};
 
     .dropdown {
-      width: 100%;
+      width: fit-content;
 
       div[data-tippy-root] {
-        width: 100%;
+        width: fit-content;
       }
       .tippy-box {
-        width: 100%;
+        width: fit-content;
         max-width: none !important;
 
         .tippy-content: {
-          width: 100%;
+          width: fit-content;
           max-width: none !important;
         }
       }
     }
 
     .grant-type-label {
-      width: 100%;
+      width: fit-content;
       color: ${(props) => props.theme.colors.text.yellow};
       justify-content: space-between;
       padding: 0 0.5rem;

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

@@ -6,6 +6,7 @@ import StyledWrapper from './StyledWrapper';
 import { IconCaretDown } from '@tabler/icons';
 import { updateAuth } from 'providers/ReduxStore/slices/collections';
 import { humanizeGrantType } from 'utils/collections';
+import { useEffect } from 'react';
 
 const GrantTypeSelector = ({ item, collection }) => {
   const dispatch = useDispatch();
@@ -35,10 +36,26 @@ const GrantTypeSelector = ({ item, collection }) => {
     );
   };
 
+  useEffect(() => {
+    // initalize redux state with a default oauth2 auth type
+    // authorization_code - default option
+    !oAuth?.grantType &&
+      dispatch(
+        updateAuth({
+          mode: 'oauth2',
+          collectionUid: collection.uid,
+          itemUid: item.uid,
+          content: {
+            grantType: 'authorization_code'
+          }
+        })
+      );
+  }, [oAuth]);
+
   return (
     <StyledWrapper>
       <label className="block font-medium mb-2">Grant Type</label>
-      <div className="inline-flex items-center cursor-pointer grant-type-mode-selector w-full">
+      <div className="inline-flex items-center cursor-pointer grant-type-mode-selector w-fit">
         <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
           <div
             className="dropdown-item"

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Ropc/StyledWrapper.js

@@ -5,6 +5,7 @@ const Wrapper = styled.div`
     font-size: 0.8125rem;
   }
   .single-line-editor-wrapper {
+    max-width: 400px;
     padding: 0.15rem 0.4rem;
     border-radius: 3px;
     border: solid 1px ${(props) => props.theme.input.border};

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

@@ -5,6 +5,7 @@ const Wrapper = styled.div`
     font-size: 0.8125rem;
   }
   .single-line-editor-wrapper {
+    max-width: 400px;
     padding: 0.15rem 0.4rem;
     border-radius: 3px;
     border: solid 1px ${(props) => props.theme.input.border};

packages/bruno-lang/v1/src/utils.js

@@ -9,7 +9,7 @@ const safeParseJson = (json) => {
 
 const indentString = (str) => {
   if (!str || !str.length) {
-    return str;
+    return str || '';
   }
 
   return str
@@ -20,7 +20,7 @@ const indentString = (str) => {
 
 const outdentString = (str) => {
   if (!str || !str.length) {
-    return str;
+    return str || '';
   }
 
   return str

packages/bruno-lang/v2/src/jsonToBru.js

@@ -89,12 +89,12 @@ const jsonToBru = (json) => {
 
   if (auth && auth.awsv4) {
     bru += `auth:awsv4 {
-${indentString(`accessKeyId: ${auth.awsv4.accessKeyId}`)}
+${indentString(`accessKeyId: ${auth?.awsv4?.accessKeyId || ''}`)}
-${indentString(`secretAccessKey: ${auth.awsv4.secretAccessKey}`)}
+${indentString(`secretAccessKey: ${auth?.awsv4?.secretAccessKey || ''}`)}
-${indentString(`sessionToken: ${auth.awsv4.sessionToken}`)}
+${indentString(`sessionToken: ${auth?.awsv4?.sessionToken || ''}`)}
-${indentString(`service: ${auth.awsv4.service}`)}
+${indentString(`service: ${auth?.awsv4?.service || ''}`)}
-${indentString(`region: ${auth.awsv4.region}`)}
+${indentString(`region: ${auth?.awsv4?.region || ''}`)}
-${indentString(`profileName: ${auth.awsv4.profileName}`)}
+${indentString(`profileName: ${auth?.awsv4?.profileName || ''}`)}
 }
 
 `;
@@ -102,8 +102,8 @@ ${indentString(`profileName: ${auth.awsv4.profileName}`)}
 
   if (auth && auth.basic) {
     bru += `auth:basic {
-${indentString(`username: ${auth.basic.username}`)}
+${indentString(`username: ${auth?.basic?.username || ''}`)}
-${indentString(`password: ${auth.basic.password}`)}
+${indentString(`password: ${auth?.basic?.password || ''}`)}
 }
 
 `;
@@ -111,7 +111,7 @@ ${indentString(`password: ${auth.basic.password}`)}
 
   if (auth && auth.bearer) {
     bru += `auth:bearer {
-${indentString(`token: ${auth.bearer.token}`)}
+${indentString(`token: ${auth?.bearer?.token || ''}`)}
 }
 
 `;
@@ -119,8 +119,8 @@ ${indentString(`token: ${auth.bearer.token}`)}
 
   if (auth && auth.digest) {
     bru += `auth:digest {
-${indentString(`username: ${auth.digest.username}`)}
+${indentString(`username: ${auth?.digest?.username || ''}`)}
-${indentString(`password: ${auth.digest.password}`)}
+${indentString(`password: ${auth?.digest?.password || ''}`)}
 }
 
 `;
@@ -131,8 +131,8 @@ ${indentString(`password: ${auth.digest.password}`)}
       case 'password':
         bru += `auth:oauth2 {
 ${indentString(`grant_type: password`)}
-${indentString(`username: ${auth.oauth2.username}`)}
+${indentString(`username: ${auth?.oauth2?.username || ''}`)}
-${indentString(`password: ${auth.oauth2.password}`)}
+${indentString(`password: ${auth?.oauth2?.password || ''}`)}
 }
 
 `;
@@ -140,12 +140,12 @@ ${indentString(`password: ${auth.oauth2.password}`)}
       case 'authorization_code':
         bru += `auth:oauth2 {
 ${indentString(`grant_type: authorization_code`)}
-${indentString(`callback_url: ${auth.oauth2.callbackUrl}`)}
+${indentString(`callback_url: ${auth?.oauth2?.callbackUrl || ''}`)}
-${indentString(`authorization_url: ${auth.oauth2.authorizationUrl}`)}
+${indentString(`authorization_url: ${auth?.oauth2?.authorizationUrl || ''}`)}
-${indentString(`access_token_url: ${auth.oauth2.accessTokenUrl}`)}
+${indentString(`access_token_url: ${auth?.oauth2?.accessTokenUrl || ''}`)}
-${indentString(`client_id: ${auth.oauth2.clientId}`)}
+${indentString(`client_id: ${auth?.oauth2?.clientId || ''}`)}
-${indentString(`client_secret: ${auth.oauth2.clientSecret}`)}
+${indentString(`client_secret: ${auth?.oauth2?.clientSecret || ''}`)}
-${indentString(`scope: ${auth.oauth2.scope}`)}
+${indentString(`scope: ${auth?.oauth2?.scope || ''}`)}
 }
 
 `;
@@ -153,8 +153,8 @@ ${indentString(`scope: ${auth.oauth2.scope}`)}
       case 'client_credentials':
         bru += `auth:oauth2 {
 ${indentString(`grant_type: client_credentials`)}
-${indentString(`client_id: ${auth.oauth2.clientId}`)}
+${indentString(`client_id: ${auth?.oauth2?.clientId || ''}`)}
-${indentString(`client_secret: ${auth.oauth2.clientSecret}`)}
+${indentString(`client_secret: ${auth?.oauth2?.clientSecret || ''}`)}
 }
 
 `;
@@ -368,3 +368,5 @@ ${indentString(docs)}
 };
 
 module.exports = jsonToBru;
+
+// alternative to writing the below code to avoif undefined

packages/bruno-schema/src/collections/index.js

@@ -168,7 +168,9 @@ const oauth2Schema = Yup.object({
   .strict();
 
 const authSchema = Yup.object({
-  mode: Yup.string().oneOf(['inherit', 'none', 'awsv4', 'basic', 'bearer', 'digest', 'oauth2']).required('mode is required'),
+  mode: Yup.string()
+    .oneOf(['inherit', 'none', 'awsv4', 'basic', 'bearer', 'digest', 'oauth2'])
+    .required('mode is required'),
   awsv4: authAwsV4Schema.nullable(),
   basic: authBasicSchema.nullable(),
   bearer: authBearerSchema.nullable(),