Redesign the OAUTH callback page #13127

MrFlashAccount · 2025-05-20T11:13:21Z

Pull Request Description

Closes: https://github.com/enso-org/cloud-v2/issues/1874

This PR is based on the https://github.com/enso-org/cloud-v2/pull/1969 and shall be merged (and tested) in sync

Important Notes

Checklist

Please ensure that the following checklist has been satisfied before submitting the PR:

The documentation has been updated, if necessary.
Screenshots/screencasts have been attached, if there are any visual changes. For interactive or animated visual changes, a screencast is preferred.
All code follows the
Scala,
Java,
TypeScript,
and
Rust
style guides. In case you are using a language not listed above, follow the Rust style guide.
Unit tests have been written where possible.
If meaningful changes were made to logic or tests affecting Enso Cloud integration in the libraries,
or the Snowflake database integration, a run of the Extra Tests has been scheduled.
- If applicable, it is suggested to paste a link to a successful run of the Extra Tests.

farmaazon · 2025-05-20T11:30:06Z

app/gui/src/beforeMain.ts

 import * as detect from 'enso-common/src/detect'
+import './config'


I think config is run in script HTML tag, so should not be needed anywhere?

Agree, I initially added it because for some reason I had $config is not defined error. But it seems like it's gone

@farmaazon on the second thought removing isn't a good option either 🤔 https://github.com/enso-org/enso/actions/runs/15136617435/job/42549797182?pr=13127#step:12:299

So I always assumed that the separate <script> tag is needed for bazel. Calling @Frizi in to confirm.

As an alternative (if indeed needed), we could just add import as first in the test file.

subscribing to this thread because i also need a hacky workaround for this in one of my PRs:

https://github.com/enso-org/enso/pull/13130/files?w=1#diff-11c61cfd4d9ee97e82ff2eeb497f4d02f56c6e93211d104610f6f528ad681ba0R55-R60

enso/app/gui/src/ReactRoot.tsx

Lines 55 to 60 in dd2a8d3

const setFeatureFlag = useSetFeatureFlag()

useMount(() => {

if (typeof window !== 'undefined' && window.overrideFeatureFlags === undefined) {

setFeatureFlag('enableLocalBackend', $config.CLOUD_BUILD !== 'true')

}

})

So I always assumed that the separate <script> tag is needed for bazel. Calling @Frizi in to confirm.

It's correct, I'm voting for including the config in setups for tests/storybook. @farmaazon @Frizi @somebody1234 WDYT?

The split of config into a separate script is intentional for future work, though right now it is NOT being used in the build process. The intention is to eventually do a post-build config value replacing to guarantee that testing and production builds are exact same, and config is literally the only difference between them. We have a script that does it (envReplacer.mjs), but it is currently disabled to keep our build process simple while we still have legacy rust pipeline going. I would however like to keep the config script a separate chunk. All typing issues should be fixed purely on typescript level, since the variable is supposed to be treated as a global $config exposed on window before any other application code runs.

So as I understand, there is no problem in importing them for tests and storybooks, as those won't have any config replaced as a build step.

somebody1234 · 2025-05-21T08:06:35Z

app/gui/src/dashboard/hooks/searchParamsStateHooks.ts

@@ -13,7 +13,7 @@ import * as lazyMemo from '#/hooks/useLazyMemoHooks'
 import * as safeJsonParse from '#/utilities/safeJsonParse'
 import { useRouterInReact } from '$/providers/react'
 import { type RouteLocationOptions } from 'vue-router'
-import { ZodSchema, type z } from 'zod'
+import { type z } from 'zod'


import { type } -> import type {}? same with the import from vue-router above

somebody1234 · 2025-05-21T08:08:44Z

app/gui/src/dashboard/pages/dashboard/Drive/DriveBar/DriveBarToolbar.tsx

@@ -78,6 +80,16 @@ export function DriveBarToolbar(props: DriveBarToolbarProps) {
  const { isOffline } = useOffline()
  const canDownload = useCanDownload()

+  const [credentialsModalOpen, setCredentialsModalOpen] = useSearchParamsState(
+    'credentialsModal_open',


stylistic nit: maybe consider credentialsModal.open as key if that is valid

somebody1234

CR ✅

app/gui/src/dashboard/appUtils.tsx

github-actions · 2025-05-23T10:40:17Z

✨ GUI Checks Results

Summary

🧹 Prettier: ✅ Passed
🧰 GUI Checks: ❌ Failed
📚 Storybook: ✅ Deployed

⚠️ Action Required: Please review the failed checks and fix them before merging.

See individual check results for more details.

ℹ️ Chromatic Tests Skipped

Chromatic visual regression tests were skipped for this PR.

To run the tests and deploy Storybook, add the CI: Run Chromatic label to this PR.

Note: We skip tests by default to optimize CI costs. Only run them when your UI changes are ready for review.

🎭 Playwright Test Results

Summary

⏳ Duration: 0m 34s
✅ Passed: 0 tests
🔴 Failed: 0 tests
⚠️ Flaky: 0 tests

📥 Download Detailed Report

✅ All tests passed! Your changes look good.

👮 Lint GUI Results

Check Results

🧠 Typecheck: ❌ Failed
🧹 Lint: ❌ Failed
🧪 Unit Tests: ✅ Passed

ESLint

15 Error(s):

`app/gui/src/dashboard/data/serviceCredentials/utilities.ts` line `14`

Start Line: 14
End Line: 14
Message: Unexpected any value in conditional. An explicit comparison or type conversion is required.
From: [@typescript-eslint/strict-boolean-expressions]

`app/gui/src/dashboard/data/serviceCredentials/utilities.ts` line `14`

Start Line: 14
End Line: 14
Message: Unsafe call of a(n) error type typed value.
From: [@typescript-eslint/no-unsafe-call]

`app/gui/src/dashboard/data/serviceCredentials/utilities.ts` line `14`

Start Line: 14
End Line: 14
Message: Unsafe member access .endsWith on an error typed value.
From: [@typescript-eslint/no-unsafe-member-access]

`app/gui/src/dashboard/pages/OAuthCallback.tsx` line `32`

Start Line: 32
End Line: 32
Message: Unsafe assignment of an error typed value.
From: [@typescript-eslint/no-unsafe-assignment]

`app/gui/src/dashboard/pages/OAuthCallback.tsx` line `32`

Start Line: 32
End Line: 32
Message: Unsafe call of a(n) error type typed value.
From: [@typescript-eslint/no-unsafe-call]

`app/gui/src/dashboard/pages/OAuthCallback.tsx` line `43`

Start Line: 43
End Line: 43
Message: Unsafe assignment of an error typed value.
From: [@typescript-eslint/no-unsafe-assignment]

`app/gui/src/dashboard/pages/OAuthCallback.tsx` line `43`

Start Line: 43
End Line: 43
Message: Unsafe call of a(n) error type typed value.
From: [@typescript-eslint/no-unsafe-call]

`app/gui/src/dashboard/pages/OAuthCallback.tsx` line `43`

Start Line: 43
End Line: 43
Message: Unsafe member access .get on an error typed value.
From: [@typescript-eslint/no-unsafe-member-access]

`app/gui/src/dashboard/pages/OAuthCallback.tsx` line `44`

Start Line: 44
End Line: 44
Message: Unsafe assignment of an error typed value.
From: [@typescript-eslint/no-unsafe-assignment]

`app/gui/src/dashboard/pages/OAuthCallback.tsx` line `44`

Start Line: 44
End Line: 44
Message: Unsafe call of a(n) error type typed value.
From: [@typescript-eslint/no-unsafe-call]

`app/gui/src/dashboard/pages/OAuthCallback.tsx` line `44`

Start Line: 44
End Line: 44
Message: Unsafe member access .get on an error typed value.
From: [@typescript-eslint/no-unsafe-member-access]

`app/gui/src/dashboard/pages/OAuthCallback.tsx` line `45`

Start Line: 45
End Line: 45
Message: Unsafe assignment of an error typed value.
From: [@typescript-eslint/no-unsafe-assignment]

`app/gui/src/dashboard/pages/OAuthCallback.tsx` line `45`

Start Line: 45
End Line: 45
Message: Unsafe call of a(n) error type typed value.
From: [@typescript-eslint/no-unsafe-call]

`app/gui/src/dashboard/pages/OAuthCallback.tsx` line `45`

Start Line: 45
End Line: 45
Message: Unsafe member access .get on an error typed value.
From: [@typescript-eslint/no-unsafe-member-access]

`app/gui/src/dashboard/pages/OAuthCallback.tsx` line `87`

Start Line: 87
End Line: 87
Message: Unsafe assignment of an error typed value.
From: [@typescript-eslint/no-unsafe-assignment]

PabloBuchu · 2025-05-26T12:05:22Z

Are we able to add button "retry authentication"?

somebody1234 · 2025-06-04T07:49:14Z

@PabloBuchu re: retry authentication, i guess we should leave it for another PR

@radeusgd would probably be the most appropriate to answer which steps it would involve specifically (i can handle implementation, just not familiar enough with the credential stuff to know how difficult it will be to allow for that)

radeusgd · 2025-06-06T19:36:03Z

@PabloBuchu re: retry authentication, i guess we should leave it for another PR

@radeusgd would probably be the most appropriate to answer which steps it would involve specifically (i can handle implementation, just not familiar enough with the credential stuff to know how difficult it will be to allow for that)

Even for successful authentication we wanted to have a refresh button to refresh expired credentials, so yeah that would be useful. I think it depends on how we want to do this. If we are fine with reading the secret data on client side (which feels a bit unsafe but tbh nothing stopping us from calling the s3cr3tz endpoint, the same is done in Libraries just a bit hidden in Java), then we can read the information that was stored from the filled-in form and re-run the logic for generating a (fresh) link for the redirect - then we can use the same logic that is used when creating a new token. For failed auth nothing more should be needed as the backend will handle the rest. For refreshing a successful token we also need to mark it as being refreshed - otherwise the backend would reject a new request (let's call it replay attack protection).

If we are not okay with reading the metadata stored in secret payload for refreshing the credential in the client, we'd probably need to move the logic for generating the URL onto the backend and modify both the create and refresh/retry endpoints to relate on that.

Please let me know if this clarifies or some further clarifications are needed.

MrFlashAccount requested review from PabloBuchu, indiv0, somebody1234, Frizi, farmaazon, vitvakatu, kazcw and AdRiley as code owners May 20, 2025 11:13

MrFlashAccount self-assigned this May 20, 2025

MrFlashAccount force-pushed the wip/sergeigarin/improve-credentials-page branch from 3a2d343 to e24c457 Compare May 20, 2025 11:20

farmaazon reviewed May 20, 2025

View reviewed changes

somebody1234 reviewed May 21, 2025

View reviewed changes

somebody1234 approved these changes May 21, 2025

View reviewed changes

MrFlashAccount added CI: Keep up to date Automatically update this PR to the latest develop. CI: No changelog needed Do not require a changelog entry for this PR. g-dashboard labels May 21, 2025

PabloBuchu reviewed May 22, 2025

View reviewed changes

app/gui/src/dashboard/appUtils.tsx Outdated Show resolved Hide resolved

MrFlashAccount force-pushed the wip/sergeigarin/improve-credentials-page branch 2 times, most recently from b685ff2 to 0741de7 Compare May 23, 2025 10:39

MrFlashAccount force-pushed the wip/sergeigarin/improve-credentials-page branch from 4d9eb82 to c324a02 Compare May 26, 2025 08:13

MrFlashAccount removed the CI: Keep up to date Automatically update this PR to the latest develop. label May 26, 2025

Improve the credentials page

c099e39

MrFlashAccount force-pushed the wip/sergeigarin/improve-credentials-page branch from f82d93a to c099e39 Compare May 29, 2025 09:12

Merge branch 'develop' into wip/sergeigarin/improve-credentials-page

a7e3649

[dashboard] Fix errors

a98dce5

PabloBuchu and others added 4 commits June 13, 2025 14:15

Fix redirect

80acac2

Fix type errors

519e4fc

Merge branch 'develop' into wip/sergeigarin/improve-credentials-page

a3be61c

Merge branch 'develop' into wip/sergeigarin/improve-credentials-page

2d92a8a

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Redesign the OAUTH callback page #13127

Redesign the OAUTH callback page #13127

MrFlashAccount commented May 20, 2025 •

edited

Loading

Uh oh!

farmaazon May 20, 2025

Uh oh!

MrFlashAccount May 20, 2025

Uh oh!

MrFlashAccount May 20, 2025 •

edited

Loading

Uh oh!

farmaazon May 21, 2025

Uh oh!

somebody1234 May 21, 2025

Uh oh!

MrFlashAccount May 21, 2025

Uh oh!

Frizi May 26, 2025

Uh oh!

farmaazon May 26, 2025

Uh oh!

somebody1234 May 21, 2025

Uh oh!

somebody1234 May 21, 2025

Uh oh!

somebody1234 left a comment

Uh oh!

Uh oh!

github-actions bot commented May 23, 2025 •

edited

Loading

Uh oh!

PabloBuchu commented May 26, 2025

Uh oh!

somebody1234 commented Jun 4, 2025 •

edited

Loading

Uh oh!

radeusgd commented Jun 6, 2025

Uh oh!

Uh oh!

		import * as detect from 'enso-common/src/detect'
		import './config'

	const setFeatureFlag = useSetFeatureFlag()
	useMount(() => {
	if (typeof window !== 'undefined' && window.overrideFeatureFlags === undefined) {
	setFeatureFlag('enableLocalBackend', $config.CLOUD_BUILD !== 'true')
	}
	})

Redesign the OAUTH callback page #13127

Are you sure you want to change the base?

Redesign the OAUTH callback page #13127

Conversation

MrFlashAccount commented May 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull Request Description

Important Notes

Checklist

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MrFlashAccount May 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

somebody1234 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented May 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✨ GUI Checks Results

Summary

ℹ️ Chromatic Tests Skipped

🎭 Playwright Test Results

Summary

👮 Lint GUI Results

Check Results

ESLint

15 Error(s):

Uh oh!

PabloBuchu commented May 26, 2025

Uh oh!

somebody1234 commented Jun 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

radeusgd commented Jun 6, 2025

Uh oh!

Uh oh!

MrFlashAccount commented May 20, 2025 •

edited

Loading

MrFlashAccount May 20, 2025 •

edited

Loading

github-actions bot commented May 23, 2025 •

edited

Loading

somebody1234 commented Jun 4, 2025 •

edited

Loading