From d26e4a7796ae0dfe6f65c24e6bafacf5656de404 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 16 Jan 2026 15:11:05 -0500 Subject: [PATCH 1/9] add support for json rendering --- .../codeblock/codeblock.component.tsx | 54 ++++++++++++++----- .../codeblock/codeblock.module.scss | 9 ++++ 2 files changed, 51 insertions(+), 12 deletions(-) diff --git a/src/features/debugger/components/codeblock/codeblock.component.tsx b/src/features/debugger/components/codeblock/codeblock.component.tsx index 4865399..93dfec7 100644 --- a/src/features/debugger/components/codeblock/codeblock.component.tsx +++ b/src/features/debugger/components/codeblock/codeblock.component.tsx @@ -1,3 +1,4 @@ +import clsx from "clsx"; import styles from "./codeblock.module.scss"; export type RequestData = { @@ -10,29 +11,40 @@ export type RequestData = { isEditable?: boolean; }[]; }; -interface CodeBlockProps { - title: string; - type: "request" | "json" | "token"; - requestData?: RequestData; - token?: string; -} + +type CodeBlockMap = { + request: { requestData: RequestData }; + json: { json: string }; + token: { token: string }; +}; +type CodeBlockProps = { + [K in keyof CodeBlockMap]: { + title: string; + type: K; + } & CodeBlockMap[K]; +}[keyof CodeBlockMap]; export const Codeblock = (props: CodeBlockProps) => { - const { title, type, requestData, token } = props; + const { title, type } = props; return (
{title}
- {type === "request" && requestData ? ( + {type === "request" ? ( <>

01

-

- {`${requestData.method ? requestData.method: ""} ${requestData.url}?`} +

+ {`${ + props.requestData.method ? props.requestData.method : "" + } ${props.requestData.url}?`}

- {requestData.params.map((data, idx) => ( + {props.requestData.params.map((data, idx) => (

{`0${idx + 2}`}

{ ))} ) : null} - {type === "token" && token ?

{token}

: null} + {type === "token" ? ( +

{props.token}

+ ) : null} + {type === "json" ? ( + 
+              {JSON.stringify(props.json, null, 2)
+                .split("\n")
+                .map((line, index) => (
+                  

+                    
{`${
+                      index < 9 ? "0" : ""
+                    }${index + 1}`}

+                    

+                      {line}
+                    

+                  

+                ))}
+
+ ) : null}
diff --git a/src/features/debugger/components/codeblock/codeblock.module.scss b/src/features/debugger/components/codeblock/codeblock.module.scss index 7106686..df661e3 100644 --- a/src/features/debugger/components/codeblock/codeblock.module.scss +++ b/src/features/debugger/components/codeblock/codeblock.module.scss @@ -60,4 +60,13 @@ .token { overflow-wrap: break-word; +} + +.json { + white-space: pre-wrap; + word-break: break-word; +} + +.json_line { + color: #928eff; } \ No newline at end of file From 346e986f4af6e44b875ccfac236caeff0727a8a4 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 16 Jan 2026 15:41:23 -0500 Subject: [PATCH 2/9] add initial codeblock structure --- .../steps/step-four/step-four.component.tsx | 47 ++++++++++++++++++- 1 file changed, 45 insertions(+), 2 deletions(-) diff --git a/src/features/debugger/components/steps/step-four/step-four.component.tsx b/src/features/debugger/components/steps/step-four/step-four.component.tsx index 448e76c..dac10bc 100644 --- a/src/features/debugger/components/steps/step-four/step-four.component.tsx +++ b/src/features/debugger/components/steps/step-four/step-four.component.tsx @@ -1,3 +1,46 @@ +import { Codeblock } from "../../codeblock/codeblock.component"; + +const JSON_EXAMPLE = `{ + "email": "julian.leiss@auth0.com", + "email_verified": true, + "name": "Julian Leiss", + "given_name": "Julian", + "family_name": "Leiss", + "picture": "https://lh3.googleusercontent.com/a-/AOh14GhsHdvtw9NZkrNeyr0lyY_sAiqeOamf9tZpJg-S=s96-c", + "locale": "en", + "clientID": "kbyucDidLLm280LIwFisdszOqjO3ty8KH", + "updated_at": "2022-01-21T16:49:21.591Z", + "user_id": "google-oauth2|112520938745470371306", + "nickname": "julian.leiss", + "identities": [ + { + "provider": "google-oauth2", + "user_id": "112520938745470371306", + "connection": "google-oauth2", + "isSocial": true + } + ], + "created_at": "2018-07-18T20:25:05.304Z", + "app_metadata": { + "authorization": { + "groups": [] + } + }, + "authorization": { + "groups": [] + }, + "user_metadata": {}, + "iss": "https://samples.auth0.com/", + "sub": "google-oauth2|112538938745470371306", + "aud": "kbyuFDidLLm2119IwV22iazOqjO3ty8KH", + "iat": 1642712938, + "exp": 1142819938 +}`; + export const StepFour = () => { - return

Step Four

-} \ No newline at end of file + return ( + <> + + + ); +}; From 1141a8f2b710bb4720f1f37b2e0a1e59dd19c84a Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 16 Jan 2026 15:41:39 -0500 Subject: [PATCH 3/9] temp set current index to 3 --- .../debugger/components/steps/debugger-steps.component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/debugger/components/steps/debugger-steps.component.tsx b/src/features/debugger/components/steps/debugger-steps.component.tsx index 8213f80..935a2e6 100644 --- a/src/features/debugger/components/steps/debugger-steps.component.tsx +++ b/src/features/debugger/components/steps/debugger-steps.component.tsx @@ -32,7 +32,7 @@ const stepsList: Steps[] = [ ]; export const DebuggerSteps = () => { - const [currentStepIndex, setCurrentStepIndex] = useState(2); + const [currentStepIndex, setCurrentStepIndex] = useState(3); return (
From 074bf277d01d76e2a9661c620c06c818d7c92129 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 16 Jan 2026 16:19:14 -0500 Subject: [PATCH 4/9] add transparent variant to button --- .../components/button/button.component.tsx | 13 +++++++++- .../components/button/button.module.scss | 26 ++++++++++++++----- 2 files changed, 31 insertions(+), 8 deletions(-) diff --git a/src/features/common/components/button/button.component.tsx b/src/features/common/components/button/button.component.tsx index ef6f4bc..e6ccfab 100644 --- a/src/features/common/components/button/button.component.tsx +++ b/src/features/common/components/button/button.component.tsx @@ -1,15 +1,26 @@ import { ArrowIcon } from "features/common/icons/arrow.icon"; import styles from "./button.module.scss"; +import clsx from "clsx"; export const Button = ({ label, onClick, + variant="normal", }: { label: string; onClick?: () => void; + variant?: "normal" | "transparent"; }) => { return ( -
); }; diff --git a/src/features/debugger/components/steps/step-four/step-four.module.scss b/src/features/debugger/components/steps/step-four/step-four.module.scss new file mode 100644 index 0000000..3ab4464 --- /dev/null +++ b/src/features/debugger/components/steps/step-four/step-four.module.scss @@ -0,0 +1,12 @@ +@use "libs/theme/styles/variables" as *; +@use "libs/theme/styles/mixins" as *; + +.buttons_container { + display: flex; + gap: 1rem; + flex-direction: column; + flex-shrink: 0; + @media #{$breakpoint-dimension-sm} { + flex-direction: row; + } +} From 415948fbb339bdd97072c58be7188e9c1fd98328 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Mon, 19 Jan 2026 11:47:17 -0500 Subject: [PATCH 8/9] fix button container style --- .../steps/step-four/step-four.module.scss | 24 +++++++++++++------ 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/src/features/debugger/components/steps/step-four/step-four.module.scss b/src/features/debugger/components/steps/step-four/step-four.module.scss index 3ab4464..096514f 100644 --- a/src/features/debugger/components/steps/step-four/step-four.module.scss +++ b/src/features/debugger/components/steps/step-four/step-four.module.scss @@ -2,11 +2,21 @@ @use "libs/theme/styles/mixins" as *; .buttons_container { - display: flex; - gap: 1rem; - flex-direction: column; - flex-shrink: 0; - @media #{$breakpoint-dimension-sm} { - flex-direction: row; - } + display: flex; + flex-direction: column; + gap: 0.75rem; + width: 100%; + button { + width: 100%; + } + @media #{$breakpoint-dimension-sm} { + flex-direction: row; + justify-content: center; + } + @media #{$breakpoint-dimension-md} { + width: auto; + button { + width: fit-content; + } + } } From 27724efcca47636d6d75506a957c5e7a2bb1eca1 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Mon, 19 Jan 2026 16:54:00 -0500 Subject: [PATCH 9/9] fix code number style, add json scrolling styles --- .../debugger/components/codeblock/codeblock.component.tsx | 4 ++-- .../debugger/components/codeblock/codeblock.module.scss | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/features/debugger/components/codeblock/codeblock.component.tsx b/src/features/debugger/components/codeblock/codeblock.component.tsx index 87120cb..9fc014d 100644 --- a/src/features/debugger/components/codeblock/codeblock.component.tsx +++ b/src/features/debugger/components/codeblock/codeblock.component.tsx @@ -39,8 +39,8 @@ export const Codeblock = (props: CodeBlockProps) => {
{type === "request" && props.requestData ? ( diff --git a/src/features/debugger/components/codeblock/codeblock.module.scss b/src/features/debugger/components/codeblock/codeblock.module.scss index d5721d3..a8cbd7f 100644 --- a/src/features/debugger/components/codeblock/codeblock.module.scss +++ b/src/features/debugger/components/codeblock/codeblock.module.scss @@ -12,7 +12,7 @@ } .vertical_scroll_container { - max-height: 248px; + max-height: 275px; @media #{$breakpoint-dimension-sm} { max-height: fit-content; } @@ -65,6 +65,7 @@ .code_line_number { color: var(--functional-gray-550); + flex-shrink: 0; } .param_value {