From 419cf80469236e68b1fea529f558dc2b9bbf38f0 Mon Sep 17 00:00:00 2001 From: Ken Sternberg <133134217+kensternberg-authentik@users.noreply.github.com> Date: Mon, 3 Mar 2025 12:11:24 -0800 Subject: [PATCH] web/admin: prefer using datefns over moment.js (#13143) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * web: Add InvalidationFlow to Radius Provider dialogues ## What - Bugfix: adds the InvalidationFlow to the Radius Provider dialogues - Repairs: `{"invalidation_flow":["This field is required."]}` message, which was *not* propagated to the Notification. - Nitpick: Pretties `?foo=${true}` expressions: `s/\?([^=]+)=\$\{true\}/\1/` ## Note Yes, I know I'm going to have to do more magic when we harmonize the forms, and no, I didn't add the Property Mappings to the wizard, and yes, I know I'm going to have pain with the *new* version of the wizard. But this is a serious bug; you can't make Radius servers with *either* of the current dialogues at the moment. * This (temporary) change is needed to prevent the unit tests from failing. \# What \# Why \# How \# Designs \# Test Steps \# Other Notes * Revert "This (temporary) change is needed to prevent the unit tests from failing." This reverts commit dddde09be571a639ecd041569dd3a282aab3f9be. * ## What Replaces `moment.js` with `date-fns` as a runtime dependency for Chart.js and other features requiring date manipulation libraries. `date-fns` (and `chartjs-adapter-date-fns`) provides a 1:1 compatible API with Moment.js, is significantly faster and smaller. Moment.js adds 74KB to our bundle; in constrast, using DateFns adds only 18KB. ## Why [Because ChartJS recommends it](https://github.com/chartjs/chartjs-adapter-moment#overview), and because DateFns are easier to import and use. It's worth noting that chartjs-adapter-date-fns was last updated three years ago, but chartjs-adapter-moment was last updated *four* years ago. Both can be considered stable at this point, so this cannot be considered an untested swap. ## Testing 1. In the *built* version of the product, assert that in the `./dist/admin/*` folder, no instance of `node_modules/moment` is included. `grep "node_modules/moment" ./dist/admin/*` is sufficient for this. On the other hand, searching for `date-fns` will get you entries in the maps: ``` // ... many lines of date-fns inclusion; this is near the end, to show the chartjs adapter is // also included. admin/chunk-TRZMFVHL.js:// node_modules/date-fns/startOfSecond.js admin/chunk-TRZMFVHL.js:// node_modules/date-fns/parseISO.js admin/chunk-TRZMFVHL.js:// node_modules/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.esm.js admin/chunk-TRZMFVHL.js: _id: "date-fns", admin/chunk-TRZMFVHL.js:chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.esm.js: ``` 2. Visually inspect and assert that the graphs in Dashboard➜Overview, User➜Statistics, and Directory➜Users➜A User are functioning unchanged. ## Documentation Changes Required None. No developer or user documentation changes are required. --------- Co-authored-by: Jens Langhammer --- web/package-lock.json | 25 ++++++++++++++++++------- web/package.json | 3 ++- web/src/elements/charts/Chart.ts | 2 +- 3 files changed, 21 insertions(+), 9 deletions(-) diff --git a/web/package-lock.json b/web/package-lock.json index da4ff85511..438a5becb3 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -37,11 +37,12 @@ "@webcomponents/webcomponentsjs": "^2.8.0", "base64-js": "^1.5.1", "chart.js": "^4.4.4", - "chartjs-adapter-moment": "^1.0.1", + "chartjs-adapter-date-fns": "^3.0.0", "codemirror": "^6.0.1", "construct-style-sheets-polyfill": "^3.1.0", "core-js": "^3.38.1", "country-flag-icons": "^1.5.13", + "date-fns": "^4.1.0", "dompurify": "^3.2.4", "fuse.js": "^7.0.0", "guacamole-common-js": "^1.5.0", @@ -9532,13 +9533,13 @@ "pnpm": ">=8" } }, - "node_modules/chartjs-adapter-moment": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/chartjs-adapter-moment/-/chartjs-adapter-moment-1.0.1.tgz", - "integrity": "sha512-Uz+nTX/GxocuqXpGylxK19YG4R3OSVf8326D+HwSTsNw1LgzyIGRo+Qujwro1wy6X+soNSnfj5t2vZ+r6EaDmA==", + "node_modules/chartjs-adapter-date-fns": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-3.0.0.tgz", + "integrity": "sha512-Rs3iEB3Q5pJ973J93OBTpnP7qoGwvq3nUnoMdtxO+9aoJof7UFcRbWcIDteXuYd1fgAvct/32T9qaLyLuZVwCg==", "peerDependencies": { - "chart.js": ">=3.0.0", - "moment": "^2.10.2" + "chart.js": ">=2.8.0", + "date-fns": ">=2.0.0" } }, "node_modules/cheerio": { @@ -10770,6 +10771,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/date-fns": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz", + "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/kossnocorp" + } + }, "node_modules/dayjs": { "version": "1.11.13", "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz", @@ -16580,6 +16590,7 @@ "version": "2.30.1", "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz", "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==", + "dev": true, "engines": { "node": "*" } diff --git a/web/package.json b/web/package.json index b893903b8b..e1e9daf713 100644 --- a/web/package.json +++ b/web/package.json @@ -25,11 +25,12 @@ "@webcomponents/webcomponentsjs": "^2.8.0", "base64-js": "^1.5.1", "chart.js": "^4.4.4", - "chartjs-adapter-moment": "^1.0.1", + "chartjs-adapter-date-fns": "^3.0.0", "codemirror": "^6.0.1", "construct-style-sheets-polyfill": "^3.1.0", "core-js": "^3.38.1", "country-flag-icons": "^1.5.13", + "date-fns": "^4.1.0", "dompurify": "^3.2.4", "fuse.js": "^7.0.0", "guacamole-common-js": "^1.5.0", diff --git a/web/src/elements/charts/Chart.ts b/web/src/elements/charts/Chart.ts index 4a12b376c0..ec36fba392 100644 --- a/web/src/elements/charts/Chart.ts +++ b/web/src/elements/charts/Chart.ts @@ -17,7 +17,7 @@ import { Legend, Tooltip } from "chart.js"; import { BarController, DoughnutController, LineController } from "chart.js"; import { ArcElement, BarElement } from "chart.js"; import { LinearScale, TimeScale } from "chart.js"; -import "chartjs-adapter-moment"; +import "chartjs-adapter-date-fns"; import { msg } from "@lit/localize"; import { CSSResult, TemplateResult, css, html } from "lit";