Skip to content

web: fix turnstile types after update#7854

Merged
BeryJu merged 7 commits intomainfrom
web/npm-update
Dec 13, 2023
Merged

web: fix turnstile types after update#7854
BeryJu merged 7 commits intomainfrom
web/npm-update

Conversation

@kensternberg-authentik
Copy link
Contributor

Details

After running 'npm update' on the dev tree, the build started to fail with these options and types no longer being set correctly in the source tree.

I have explicitly included the Turnstile object as a sub-component of Window, and modified the CaptchaStage to understand the TurnstileObject and TurnstileOptions, and the build now completes. As these are purely type-level changes, the functionality of the system is unchanged, and testing (by hand, sigh) indicates that the visible behavior is consistent with previous iterations.

Checklist

  • Local tests pass (ak test authentik/)
  • The code has been formatted (make lint-fix)

If an API change has been made

  • The API schema has been updated (make gen-build)

If changes to the frontend have been made

  • The code has been formatted (make web)
  • The translation files have been updated (make i18n-extract)

If applicable

  • The documentation has been updated
  • The documentation has been formatted (make website)

@netlify
Copy link

netlify bot commented Dec 11, 2023

Deploy Preview for authentik-storybook ready!

Name Link
🔨 Latest commit de1abfd
🔍 Latest deploy log https://app.netlify.com/sites/authentik-storybook/deploys/65789683e97a750007994fbc
😎 Deploy Preview https://deploy-preview-7854--authentik-storybook.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@@ -1,4 +1,5 @@
declare module "*.css";

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prettier should have had an opinion here! :-)

(window as unknown as TurnstileWindow).turnstile.render(container, {
sitekey: this.challenge.siteKey,
size: "invisible",
size: "invisible" as TurnstileOptions["size"],
Copy link
Contributor Author

@kensternberg-authentik kensternberg-authentik Dec 11, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@BeryJu Could you please affirm this? The as TurnstilesOptions["size"] clause was necessary here because "invisible" is not a valid setting according to the options in the provided type file. If invisible is valid because you've made it so, let me know and I'll add a comment to that effect.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think thats valid (at least not anymore), so we can probably remove it

@kensternberg-authentik kensternberg-authentik marked this pull request as ready for review December 11, 2023 17:47
@kensternberg-authentik kensternberg-authentik requested a review from a team as a code owner December 11, 2023 17:47
@netlify
Copy link

netlify bot commented Dec 11, 2023

Deploy Preview for authentik ready!

Name Link
🔨 Latest commit de1abfd
🔍 Latest deploy log https://app.netlify.com/sites/authentik/deploys/657896834e9adf0008fcfbb9
😎 Deploy Preview https://deploy-preview-7854--authentik.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 88 (🔴 down 7 from production)
Accessibility: 90 (no change from production)
Best Practices: 100 (no change from production)
SEO: 80 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

@codecov
Copy link

codecov bot commented Dec 11, 2023

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (f85ae17) 49.01% compared to head (de1abfd) 92.63%.
Report is 1 commits behind head on main.

Additional details and impacted files
@@             Coverage Diff             @@
##             main    #7854       +/-   ##
===========================================
+ Coverage   49.01%   92.63%   +43.61%     
===========================================
  Files         588      588               
  Lines       29200    29200               
===========================================
+ Hits        14313    27049    +12736     
+ Misses      14887     2151    -12736     
Flag Coverage Δ
e2e 50.65% <ø> (+3.29%) ⬆️
integration 25.91% <ø> (ø)
unit 89.70% <ø> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

kensternberg-authentik added a commit that referenced this pull request Dec 11, 2023
This commit follows the [patch for Turnstile](#7854) and
performs a similar operation for the Storybook build, which failed after the latest `npm audit` and
`npm update` passes.

[This patch to Vite](vitejs/vite#10762) fixes a problem with the Vite build
in that Vite could not resolve if a CSS import was strictly at the module level or if it was
necessary to include the imported CSS at the document level.  The fix is to hack a query, `?inline`,
to the end of the import string, to indicate that it's a module-only import.

The Storybook for Web Components build recommended by the Open Webcomponent Consortium is a
Storybook-Vite implementation.  The latest update fully deprecated undecorated CSS imports, and
Storybook broke, unable to reconcile the CSS imports.

This patch inlines the inlining of the CSS automatically for Storybook by using the Rollup
`modify()` plug-in which performs string substitutions on the source code before it's presented to
the compiler and bundler; it recognizes the strings that require inlining, those that match the
regex:

``` JavaScript
/^(import \w+ from .*\.css)";/
```

... and replaces them with a version ending in `.css?inline`.  Because the actual recognizer inside
`modify()` recognizes strings and not regular expressions, a script to build the strings has been
added to the `scripts` folder.

Just like locales, you will have to re-run and re-build `build-storybook-import-maps` script if you
add a new CSS file to the source tree.
Copy link
Member

@BeryJu BeryJu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As #7797 is still open, could you also lock pyright to the previous version as it's currently breaking CI

After running 'npm update' on the dev tree, the build started to
fail with these options and types no longer being set correctly in
the source tree.

I have explicitly included the Turnstile object as a sub-component
of Window, and modified the CaptchaStage to understand the
TurnstileObject and TurnstileOptions, and the build now completes.
After reading [this
guide](https://medium.com/@anjusha.khandavalli/decoding-commonly-used-symbols-in-package-json-file-e08f3939c9e4),
I've locked down the version of pyright to a specific and immovable
version until we can get a better read on how the Pyright upgrade
breaks things.
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
@BeryJu BeryJu merged commit f1b6793 into main Dec 13, 2023
@BeryJu BeryJu deleted the web/npm-update branch December 13, 2023 14:33
BeryJu pushed a commit that referenced this pull request Dec 18, 2023
This commit follows the [patch for Turnstile](#7854) and
performs a similar operation for the Storybook build, which failed after the latest `npm audit` and
`npm update` passes.

[This patch to Vite](vitejs/vite#10762) fixes a problem with the Vite build
in that Vite could not resolve if a CSS import was strictly at the module level or if it was
necessary to include the imported CSS at the document level.  The fix is to hack a query, `?inline`,
to the end of the import string, to indicate that it's a module-only import.

The Storybook for Web Components build recommended by the Open Webcomponent Consortium is a
Storybook-Vite implementation.  The latest update fully deprecated undecorated CSS imports, and
Storybook broke, unable to reconcile the CSS imports.

This patch inlines the inlining of the CSS automatically for Storybook by using the Rollup
`modify()` plug-in which performs string substitutions on the source code before it's presented to
the compiler and bundler; it recognizes the strings that require inlining, those that match the
regex:

``` JavaScript
/^(import \w+ from .*\.css)";/
```

... and replaces them with a version ending in `.css?inline`.  Because the actual recognizer inside
`modify()` recognizes strings and not regular expressions, a script to build the strings has been
added to the `scripts` folder.

Just like locales, you will have to re-run and re-build `build-storybook-import-maps` script if you
add a new CSS file to the source tree.
BeryJu pushed a commit that referenced this pull request Dec 18, 2023
* web: fix storybookbuild build after npm update

This commit follows the [patch for Turnstile](#7854) and
performs a similar operation for the Storybook build, which failed after the latest `npm audit` and
`npm update` passes.

[This patch to Vite](vitejs/vite#10762) fixes a problem with the Vite build
in that Vite could not resolve if a CSS import was strictly at the module level or if it was
necessary to include the imported CSS at the document level.  The fix is to hack a query, `?inline`,
to the end of the import string, to indicate that it's a module-only import.

The Storybook for Web Components build recommended by the Open Webcomponent Consortium is a
Storybook-Vite implementation.  The latest update fully deprecated undecorated CSS imports, and
Storybook broke, unable to reconcile the CSS imports.

This patch inlines the inlining of the CSS automatically for Storybook by using the Rollup
`modify()` plug-in which performs string substitutions on the source code before it's presented to
the compiler and bundler; it recognizes the strings that require inlining, those that match the
regex:

``` JavaScript
/^(import \w+ from .*\.css)";/
```

... and replaces them with a version ending in `.css?inline`.  Because the actual recognizer inside
`modify()` recognizes strings and not regular expressions, a script to build the strings has been
added to the `scripts` folder.

Just like locales, you will have to re-run and re-build `build-storybook-import-maps` script if you
add a new CSS file to the source tree.

* web: prettier had opinions

* web: apply eslint + sonarjs check to the scripts folder.

* Google recaptcha (aka Turnstile) doesn't understand the "invisible" setting; that's purely
an HCaptcha thing.

* web: removing the typecast means I no longer need the type.

* web: prettier is still having opinions, dammit.
kensternberg-authentik added a commit that referenced this pull request Jan 8, 2024
* main:
  web: dark/light theme fixes (#7872)
  web: replace 'description-list' with list of descriptions (#7392)
  web: expressing success (#7830)
  web: fix turnstile types after update (#7854)
  core: bump github.com/google/uuid from 1.4.0 to 1.5.0 (#7866)
  website: bump @types/react from 18.2.43 to 18.2.45 in /website (#7865)
  web: bump wdio-wait-for from 3.0.9 to 3.0.10 in /tests/wdio (#7867)
  website/blog: okta part two blog (#7863)
  web: bump lit-analyzer from 2.0.1 to 2.0.2 in /web (#7858)
  web: bump the babel group in /web with 4 updates (#7856)
  web: bump the eslint group in /web with 2 updates (#7857)
  web: bump rollup from 4.7.0 to 4.8.0 in /web (#7859)
  web: bump the eslint group in /tests/wdio with 2 updates (#7860)
  web: refactor the table renderer for legibility  (#7433)
  documentation: Improve explanation of `kubernetes_json_patches` (#7832)
  root: update security policy to include link to cure53 report (#7853)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants