web/admin: prefer using datefns over moment.js (#13143)
* 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 dddde09be5.
* ## 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 <jens@goauthentik.io>
			
			
This commit is contained in:
		
							
								
								
									
										25
									
								
								web/package-lock.json
									
									
									
										generated
									
									
									
								
							
							
						
						
									
										25
									
								
								web/package-lock.json
									
									
									
										generated
									
									
									
								
							@ -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": "*"
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
@ -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",
 | 
			
		||||
 | 
			
		||||
@ -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";
 | 
			
		||||
 | 
			
		||||
		Reference in New Issue
	
	Block a user