Upgrade to vue js3 by hcvdwerf · Pull Request #231 · FAIRDataTeam/FAIRDataPoint-client

hcvdwerf · 2026-01-22T12:53:06Z

Main reason
Security vulnerability fixes with modernization: upgrade to latest Vue.js, enable strict TypeScript, and update styling approach.

What changed

Security-related dependency updates and fixes.
Vue.js updated to the latest version.
TypeScript strict mode enabled with necessary code adjustments.
Styling pipeline updated (CSS ordering / build approach) to stabilize theme overrides.

Notes

Build and lint pass.
Docker runtime config improved for API URL and styling rebuild behavior.

…RDataTeam#198) * add isOptionalBlankNode to fieldUtils * use isOptionalBlankNode in FormRenderer.isList this is ugly, but is the least invasive way to do it we could rename isList to something more fitting * do not add default fields in case of optional blank node * simplify condition for createDefaultValueArray by using isOptionalBlankNode

…ditor (FAIRDataTeam#209) * rename `isOptionalBlankNode` to `isOptionalNode` * check for `sh:NodeShape` instead of `dash:BlankNodeEditor` in `isOptionalNode`

kburger

The font in the rdf preview when creating new metadata is not a monospaced font.
The issued/modified date(time)picker is not showing the the stylized widget, date selection does work.
when creating a dataset and setting a theme to http://example.com, the viewer does not show the url in the list.
~~in advanced search, the sparql query is not syntax-highlighted~~ (not the case in the vue2 version either)

dennisvang · 2026-01-22T15:56:48Z

Thanks for the PR, but

So many changes in a single commit, out of the blue.

I'm not sure how we're supposed to review this...

UPDATE:

It turns out the bulk of the changed lines is due to package-lock.json: +5,556 / -22,123 out of +9,429 / -25,517 total
This leaves +3873 / -3394 relevant changes, which may be a little less daunting, but it is still far from reasonable for what is basically a single commit.

To put things in perspective: the total project is approx. 14110 lines in 171 files

hcvdwerf · 2026-01-22T19:04:52Z

Thanks for the PR, but
So many changes in a single commit, out of the blue.
I'm not sure how we're supposed to review this...

Thanks for the feedback. fair point about “out of the blue.” This started as security (required by hospitals) work and then expanded into follow‑ups (Vue 3, TS strictness, styling update, not maintained packages, Docker/runtime config to make it work, and upstream backports). I should’ve communicated earlier.
I agree the PR is too large to review as‑is. Let me know if you have a preferred split.

hcvdwerf · 2026-01-22T19:40:25Z

The font in the rdf preview when creating new metadata is not a monospaced font.

The issued/modified date(time)picker is not showing the the stylized widget, date selection does work. Not bootstrap anymore

when creating a dataset and setting a theme to http://example.com, the viewer does not show the url in the list. Which list? I see it in the top list view

~~in advanced search, the sparql query is not syntax-highlighted~~ (not the case in the vue2 version either) Changed

first and last modified. Theme I see in the list. datepicker was first bootstrap. now I think VueJs one

SeanBerrieHRI · 2026-02-06T10:16:41Z

src/api/apiKeys/index.ts

  },

-  postApiKey(apiKey) {
+  postApiKey(apiKey: Record<string, unknown>) {


Not 100% sure but for postApiKey i think the parameters should be empty, based on no values being passed on from the index.vue postApiKey: https://github.com/Health-RI/FAIRDataPoint-client/blob/a713836b54920c753492fcff1637f7726aaf51e3/src/views/ApiKeys/index.vue#L88

SeanBerrieHRI · 2026-02-06T12:12:48Z

src/api/repository/index.ts

  },

-  getChildren(_id, child, page) {
+  getChildren(_id: string | number, child: string, page: number) {


ID should be any type (line 74: https://github.com/Health-RI/FAIRDataPoint-client/blob/a713836b54920c753492fcff1637f7726aaf51e3/src/components/ItemList/index.vue#L118)

SeanBerrieHRI · 2026-02-06T12:24:16Z

src/api/repository/index.ts

  },

-  put(_id, data) {
+  put(_id: string | number, data: string) {


I think this is an entity and entityId is a string, but not 100% sure better to double check. (line 26: https://github.com/Health-RI/FAIRDataPoint-client/blob/a713836b54920c753492fcff1637f7726aaf51e3/src/entity/EntityConfig.ts)

SeanBerrieHRI · 2026-02-06T12:28:07Z

src/api/reset/index.ts


 export default {
-  postReset(reset) {
+  postReset(reset: Record<string, unknown>) {


Could you use the Reset object here from?: https://github.com/Health-RI/FAIRDataPoint-client/blob/a713836b54920c753492fcff1637f7726aaf51e3/src/views/ResetToDefaults/index.vue#L103 (line 84)

SeanBerrieHRI · 2026-02-06T13:05:50Z

src/api/builder.ts

    },

-    getChildren(id, child, page) {
+    getChildren(id: string | number, child: string, page: number) {


Also here id should be any

SeanBerrieHRI · 2026-02-12T10:29:58Z

src/scss/app/_form.scss

+        background: $color-light;
        margin: 0;
        padding: 0;
        max-height: 250px;


also these CSS changed don't have much to do with Vue3 migration i think, maybe change back to normal ?

SeanBerrieHRI · 2026-02-12T12:21:12Z

src/utils/metadata.ts

  const conformsTo = graph.findAll(DCT('conformsTo'))
  if (conformsTo.length > 0) {
    const data = conformsTo.map((uri) => {
+      const uriString = typeof uri === 'string' ? uri : _.get(uri, 'value', '')


figure out what type uri is so that you can remove this line

const uriString = typeof uri === 'string' ? uri : _.get(uri, 'value', '')

SeanBerrieHRI · 2026-02-12T12:21:27Z

src/utils/metadata.ts

  if (!path) return null

+  const pathValue = typeof path === 'string' ? path : _.get(path, 'value')
+  if (!pathValue) {


figure out what type pathValue is so that you can remove this line

const pathValue = typeof path === 'string' ? path : _.get(path, 'value')

SeanBerrieHRI · 2026-02-12T12:21:48Z

src/utils/metadata.ts


-function field(label, input, extra = {}) {
+function field(label: string, input: unknown, extra: Record<string, unknown> = {}) {
  if (typeof input !== 'object') {


figure out what type input is so that you can remove this line

if (typeof input !== 'object') {

SeanBerrieHRI · 2026-02-12T13:06:36Z

src/views/MyMetadata/ItemTree.vue

    Avatar,
-    // eslint-disable-next-line no-use-before-define
-    ItemTree,
    MembershipBadge,


double check if ItemTree was removed correcty or it should be kept in here

SeanBerrieHRI

I prioritized maintaining the original logic and structure. I intentionally ignored "nice-to-have" refactors or stylistic changes that weren't strictly required for Vue3 migrtation. This minimizes the risk of introducing behavioral regressions during the upgrade.

Hans-christian and others added 3 commits January 22, 2026 12:51

Upgrade to VueJs3

0688070

Backport: Detect optional nodes using nodeShape instead of BlankNodeE…

65b1618

…ditor (FAIRDataTeam#209) * rename `isOptionalBlankNode` to `isOptionalNode` * check for `sh:NodeShape` instead of `dash:BlankNodeEditor` in `isOptionalNode`

kburger reviewed Jan 22, 2026

View reviewed changes

fix tsc command

f89ae09

dennisvang added the generated Contains AI generated code, a.k.a. Vibe coding label Jan 22, 2026

dennisvang mentioned this pull request Jan 22, 2026

Add CONTRIBUTING.md with guidelines for contributors #232

Merged

applied review comments and fix lint errors

34596c3

SeanBerrieHRI suggested changes Feb 12, 2026

View reviewed changes

Hans-christian added 4 commits February 12, 2026 20:56

Applied review comments

276569c

Applied review comment part 2

cb947c2

Cherry pick fix of host

241aa72

fix index.html

fb97994

SeanBerrieHRI approved these changes Feb 16, 2026

View reviewed changes

Conversation

hcvdwerf commented Jan 22, 2026

Uh oh!

kburger left a comment

Choose a reason for hiding this comment

Uh oh!

dennisvang commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hcvdwerf commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hcvdwerf commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SeanBerrieHRI left a comment • 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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

dennisvang commented Jan 22, 2026 •

edited

Loading

hcvdwerf commented Jan 22, 2026 •

edited

Loading

hcvdwerf commented Jan 22, 2026 •

edited

Loading

SeanBerrieHRI left a comment •

edited

Loading