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>
2024-11-07 08:34:15 +01:00 · 2024-02-27 21:12:34 +05:30 · 2024-02-27 21:12:34 +05:30 · 01360d1522
commit 01360d1522
parent 6729d718cf
17 changed files with 67 additions and 38 deletions
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/index.js
+++ b/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));

--- a/packages/bruno-app/src/components/RequestPane/Auth/AuthMode/index.js
+++ b/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"
--- a/packages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/StyledWrapper.js
+++ b/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};
--- a/packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/StyledWrapper.js
+++ b/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};
--- a/packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/StyledWrapper.js
+++ b/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};
--- a/packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/index.js
+++ b/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, 'request.auth.bearer.token');
+    ? get(item, 'draft.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));
--- a/packages/bruno-app/src/components/RequestPane/Auth/DigestAuth/StyledWrapper.js
+++ b/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};
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.js
+++ b/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};
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js
+++ b/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
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.js
+++ b/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};
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.js
+++ b/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;
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/index.js
+++ b/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"
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Ropc/StyledWrapper.js
+++ b/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};
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/StyledWrapper.js
+++ b/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};
--- a/packages/bruno-lang/v1/src/utils.js
+++ b/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
--- a/packages/bruno-lang/v2/src/jsonToBru.js
+++ b/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(`secretAccessKey: ${auth.awsv4.secretAccessKey}`)}
-${indentString(`sessionToken: ${auth.awsv4.sessionToken}`)}
-${indentString(`service: ${auth.awsv4.service}`)}
-${indentString(`region: ${auth.awsv4.region}`)}
-${indentString(`profileName: ${auth.awsv4.profileName}`)}
+${indentString(`accessKeyId: ${auth?.awsv4?.accessKeyId || ''}`)}
+${indentString(`secretAccessKey: ${auth?.awsv4?.secretAccessKey || ''}`)}
+${indentString(`sessionToken: ${auth?.awsv4?.sessionToken || ''}`)}
+${indentString(`service: ${auth?.awsv4?.service || ''}`)}
+${indentString(`region: ${auth?.awsv4?.region || ''}`)}
+${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(`password: ${auth.basic.password}`)}
+${indentString(`username: ${auth?.basic?.username || ''}`)}
+${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(`password: ${auth.digest.password}`)}
+${indentString(`username: ${auth?.digest?.username || ''}`)}
+${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(`password: ${auth.oauth2.password}`)}
+${indentString(`username: ${auth?.oauth2?.username || ''}`)}
+${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(`authorization_url: ${auth.oauth2.authorizationUrl}`)}
-${indentString(`access_token_url: ${auth.oauth2.accessTokenUrl}`)}
-${indentString(`client_id: ${auth.oauth2.clientId}`)}
-${indentString(`client_secret: ${auth.oauth2.clientSecret}`)}
-${indentString(`scope: ${auth.oauth2.scope}`)}
+${indentString(`callback_url: ${auth?.oauth2?.callbackUrl || ''}`)}
+${indentString(`authorization_url: ${auth?.oauth2?.authorizationUrl || ''}`)}
+${indentString(`access_token_url: ${auth?.oauth2?.accessTokenUrl || ''}`)}
+${indentString(`client_id: ${auth?.oauth2?.clientId || ''}`)}
+${indentString(`client_secret: ${auth?.oauth2?.clientSecret || ''}`)}
+${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_secret: ${auth.oauth2.clientSecret}`)}
+${indentString(`client_id: ${auth?.oauth2?.clientId || ''}`)}
+${indentString(`client_secret: ${auth?.oauth2?.clientSecret || ''}`)}
 }

 `;
@ -368,3 +368,5 @@ ${indentString(docs)}
 };

 module.exports = jsonToBru;
+
+// alternative to writing the below code to avoif undefined
--- a/packages/bruno-schema/src/collections/index.js
+++ b/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(),