Skip to content

feat(tools): migrates ShowSearchObjectModal to React 19 #1983

Merged
andypf merged 4 commits into
masterfrom
hoda-react19-universal-search
May 11, 2026
Merged

feat(tools): migrates ShowSearchObjectModal to React 19 #1983
andypf merged 4 commits into
masterfrom
hoda-react19-universal-search

Conversation

@hodanoori
Copy link
Copy Markdown
Contributor

@hodanoori hodanoori commented Mar 27, 2026

Summary

Migrates ShowSearchObjectModal in the universal search plugin from a legacy React class component to a modern functional component with TypeScript, as part of the React 19 migration epic (#1774). The component renders a modal with tabbed content for a searched object and is now fully typed, free of deprecated
lifecycle methods, and covered by Vitest tests.

Changes Made

  • Deleted show.jsx — replaced entirely by the TypeScript implementation
  • Added show.tsx — functional component using useState/useEffect hooks:
    • componentDidMount replaced with useEffect(() => {}, []) for the initial item fetch
    • UNSAFE_componentWillReceiveProps replaced with useEffect([item]) to reset loading state when the item arrives
    • hide + restoreUrl merged into a single close function
    • TypeScript interfaces defined for Item, AggregatesState, Match, History, and ShowSearchObjectModalProps
    • declare global { var policy } added to handle the Rails-injected policy global
    • Spinner and JsonViewer sourced from @cloudoperators/juno-ui-components; Modal, Button, Tabs, Tab kept from react-bootstrap (Juno Modal requires AppShellProvider which is not present in the tools plugin)
  • Added show.test.tsx — comprehensive Vitest test suite covering:
    • Initial rendering and modal visibility
    • Loading state: spinner shown, load called on mount, cleared on item arrival
    • Error state: error message shown on rejected load
    • All conditional tabs based on cached_object_type and policy.isAllowed
    • Active tab from ?tab= query param and userRoles→data reset for domain items
    • Footer links rendered when helpers return values
    • Close behaviour: history.replace and history.goBack navigation
  • Updated app/javascript/react-bootstrap.d.ts — added Tabs and Tab type declarations

Related Issues

Screenshots (if applicable)

7ECFBEBD-1CEF-434C-BAE1-00D9AA4451B9

Checklist

  • I have performed a self-review of my code.
  • I have commented my code, particularly in hard-to-understand areas.
  • I have added tests that prove my fix is effective or that my feature works.
  • New and existing unit tests pass locally with my changes.
  • I have made corresponding changes to the documentation (if applicable).
  • My changes generate no new warnings or errors.

@hodanoori hodanoori self-assigned this Mar 31, 2026
@andypf andypf merged commit de025cd into master May 11, 2026
12 checks passed
@andypf andypf deleted the hoda-react19-universal-search branch May 11, 2026 14:09
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.

[Task](universal-search): Migrate tools/universal_search/search/components/show.jsx

3 participants