Skip to content

feat: migrating widgets to patternfly/widgetized-dashboard#273

Merged
karelhala merged 5 commits into
RedHatInsights:masterfrom
Jakub007d:paternfly-widgetized
Mar 2, 2026
Merged

feat: migrating widgets to patternfly/widgetized-dashboard#273
karelhala merged 5 commits into
RedHatInsights:masterfrom
Jakub007d:paternfly-widgetized

Conversation

@Jakub007d
Copy link
Copy Markdown
Contributor

@Jakub007d Jakub007d commented Feb 16, 2026 •
edited
Loading

Description

  • Migrating the widgets to use Paternfly widgetized dashboard.
  • Removing the GridTile.tsx as it is no longer needed as the functionality is handled in Paternfly widgetized dashboard.
  • Mapping was added to convert Scalprum WidgetMapping to PatternFly WidgetMapping
  • Changes were also made in widgetized dashboard to allow the custom classes to be passed to widget card in
    feat: adding customization parameter patternfly/widgetized-dashboard#16
  • As now the Paternfly widgetized dashboard is used for rendering the widgets the resizables corners now have a bit different look let me know if it is ok or if I should try to change it

RHCLOUD-45227

Screenshots

Before:

Snímka obrazovky 2026-02-16 o 11 52 13

After:

Snímka obrazovky 2026-02-16 o 11 53 14

Checklist ☑️

  • PR only fixes one issue or story
  • Change reviewed for extraneous code
  • UI best practices adhered to
  • Commits squashed and meaningfully named
  • All PR checks pass locally (build, lint, test, E2E)

  • (Optional) QE: Needs QE attention (OUIA changed, perceived impact to tests, no test coverage)
  • (Optional) QE: Has been mentioned
  • (Optional) UX: Needs UX attention (end user UX modified, missing designs)
  • (Optional) UX: Has been mentioned

@Jakub007d Jakub007d requested a review from a team as a code owner February 16, 2026 10:54
@Jakub007d Jakub007d force-pushed the paternfly-widgetized branch from 8c1f994 to 5c58939 Compare February 16, 2026 11:10
@karelhala
Copy link
Copy Markdown
Contributor

karelhala commented Feb 16, 2026

@Jakub007d Looks like you have a local npm link:

Local Dependency Path in package-lock.json

  Location: package-lock.json:4094-4097

  "node_modules/@patternfly/widgetized-dashboard": {
    "resolved": "../pat/widgetized-dashboard/packages/module",
    "link": true
  }

karelhala
karelhala reviewed Feb 16, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@karelhala karelhala left a comment

Choose a reason for hiding this comment

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

Looking good, can we also add some unit tests?

Comment thread src/Components/DnDLayout/GridTile.tsx Outdated
Copy link
Copy Markdown
Contributor

@karelhala karelhala Feb 16, 2026

Choose a reason for hiding this comment

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

Can we also remove GridTile.scss?

Comment thread src/Components/DnDLayout/GridLayout.tsx
import { useEffect, useMemo, useRef, useState } from 'react';
import { isWidgetType } from '../Widgets/widgetTypes';
import { useAtom, useAtomValue, useSetAtom } from 'jotai';
import { currentDropInItemAtom } from '../../state/currentDropInItemAtom';
Copy link
Copy Markdown
Contributor

@karelhala karelhala Feb 16, 2026

Choose a reason for hiding this comment

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

We should also remove this atom currentDropInItemAtom

Copy link
Copy Markdown
Contributor Author

@Jakub007d Jakub007d Feb 26, 2026

Choose a reason for hiding this comment

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

Atom is needed as i later noticed when removing it the drop on functionality broke

@Hyperkid123
Copy link
Copy Markdown
Contributor

Hyperkid123 commented Feb 16, 2026

Just FYI, a new pre-release was added that upgrades RGL to v2. WE may want to include that in this work. To check for potential API changes, we may have to bridge/migrate

@Jakub007d
Copy link
Copy Markdown
Contributor Author

Jakub007d commented Feb 16, 2026

Thanks for feedback i have just noticed it I will try to fix everything

@Jakub007d Jakub007d marked this pull request as draft February 26, 2026 14:37
@Jakub007d Jakub007d marked this pull request as ready for review February 26, 2026 14:55
@Jakub007d Jakub007d requested a review from karelhala February 26, 2026 15:02
karelhala
karelhala approved these changes Mar 2, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@karelhala karelhala left a comment

Choose a reason for hiding this comment

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

Looking good! Both code and visual, just two small things. But once these are addressed we can merge it!

Comment thread src/Components/DnDLayout/ConvertWidgetMapping.tsx Outdated
},
renderWidget: (_widgetId: string) => (
<ScalprumComponent
fallback={<Skeleton style={{ borderRadius: 0 }} shape="square" width="100%" height="100%" />}
Copy link
Copy Markdown
Contributor

@karelhala karelhala Mar 2, 2026

Choose a reason for hiding this comment

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

Do we need the style over here? If so, can we move it to scss file?

Copy link
Copy Markdown
Contributor Author

@Jakub007d Jakub007d Mar 2, 2026

Choose a reason for hiding this comment

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

Yes it is needed because the basic patternfly Skeleton has rounded edges. I put the style into the scss file

Comment thread src/Components/DnDLayout/GridLayout.tsx Outdated
onlyResolvesLast: true,
});

const getResizeHandle = (resizeHandleAxis: string, ref: React.Ref<HTMLElement>) => (
Copy link
Copy Markdown
Contributor

@karelhala karelhala Mar 2, 2026

Choose a reason for hiding this comment

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

Can we change this ref as HTMLDivElement so we don't have to cast it on line 64?

Copy link
Copy Markdown
Contributor Author

@Jakub007d Jakub007d Mar 2, 2026

Choose a reason for hiding this comment

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

Changed

@Jakub007d Jakub007d force-pushed the paternfly-widgetized branch from 7019f43 to ca66bb0 Compare March 2, 2026 13:47
@Jakub007d Jakub007d force-pushed the paternfly-widgetized branch from ca66bb0 to fec5c24 Compare March 2, 2026 13:59
@karelhala karelhala merged commit 2478c01 into RedHatInsights:master Mar 2, 2026
5 checks passed
@florkbr florkbr mentioned this pull request Mar 23, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@karelhala karelhala karelhala approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@Jakub007d @karelhala @Hyperkid123