Scenes: Updating to v6

[leventebalogh]

Note

This is PR in its current form is mostly for demonstration purposes, I would leave the final touches and the merging to the @grafana/observability-logs team (of course happy to help in case there are any questions or issues).

What changed?

This PR updates to use scenes v6.0.0.

Notes for the reviewers

Please keep in mind that the PR is still depending on the canary version, which should be updated before merged. There are also a few temporary @ts-ignore statements that needs to be fixed before merging.

[gtk-grafana]

This is currently breaking the entire app 😢

Seems to be getting thrown on this line on the third render:

const [isInitialized, setIsInitialized] = React.useState(false);

Error thrown in Grafana

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Error thrown when debugging:

TypeError: Cannot read properties of null (reading 'useState')
    at Object.useState (react.development.js:1622:1)
    at LogExplorationView (LogExplorationPage.tsx:19:45)
    at describeNativeComponentFrame (react-dom.development.js:1092:1)
    at describeFunctionComponentFrame (react-dom.development.js:1187:1)
    at describeFiber (react-dom.development.js:1266:1)
    at getStackByFiberInDevAndProd (react-dom.development.js:1285:1)
    at getCurrentFiberStackInDev (react-dom.development.js:1522:1)
    at push../node_modules/react/cjs/react.development.js.ReactDebugCurrentFrame.getStackAddendum (react.development.js:130:1)
    at printWarning (react.development.js:193:1)
    at error (react.development.js:183:1)

[leventebalogh]

Yeah, I know 😢

I am looking into it, will get back once I have found the root cause @gtk-grafana 👍 .

[leventebalogh]

Hey @gtk-grafana 👋 I have managed to make the app work locally after doing some more updates, and the tests pass as well now. (The PR is not ready, as there are still a few temporary @ts-ignore lines in there, but apart from those I think it's fine).

Please let me know if you encounter any issues. 🙏

[gtk-grafana]

@leventebalogh everything seems to work as expected, I removed the ts-ignores.
I do see a new error in the webpack output however:

WARNING in ../node_modules/react-router-dom-v5-compat/dist/index.js 1480:16-26
export 'useHistory' (imported as 'useHistory') was not found in 'react-router-dom' (possible exports: AbortedDeferredError, Await, BrowserRouter, Form, HashRouter, Link, MemoryRouter, NavLink, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, ScrollRestoration, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_ErrorResponseImpl, UNSAFE_FetchersContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_ViewTransitionContext, UNSAFE_useRouteId, UNSAFE_useScrollRestoration, createBrowserRouter, createHashRouter, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, createSearchParams, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, renderMatches, replace, resolvePath, unstable_HistoryRouter, unstable_usePrompt, useActionData, useAsyncError, useAsyncValue, useBeforeUnload, useBlocker, useFetcher, useFetchers, useFormAction, useHref, useInRouterContext, useLinkClickHandler, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, useSearchParams, useSubmit, useViewTransitionState)
 @ ../node_modules/@grafana/ui/dist/esm/components/Link/Link.js 3:0-60 8:29-35
 @ ../node_modules/@grafana/ui/dist/esm/index.js 171:0-49 171:0-49
 @ ./Components/Table/ColumnSelection/LogsTableActiveFields.tsx 56:0-41 93:18-27
 @ ./Components/Table/ColumnSelection/LogsTableMultiSelect.tsx 4:0-95 50:52-73
 @ ./Components/Table/ColumnSelection/ColumnSelectionDrawerWrap.tsx 57:0-93 192:42-62
 @ ./Components/Table/Table.tsx 93:0-121 145:26-42 287:41-66
 @ ./Components/Table/TableWrap.tsx 5:0-47 90:41-46
 @ ./Components/Table/TableProvider.tsx 2:0-55 18:41-50
 @ ./Components/ServiceScene/LogsTableScene.tsx 16:0-55 88:54-67
 @ ./Components/ServiceScene/LogsListScene.tsx 55:0-50 187:30-44
 @ ./Components/ServiceScene/LogOptionsScene.tsx 34:0-48 66:48-61
 @ ./services/datasource.ts 97:0-119 291:26-54 291:60-90
 @ ./module.tsx 38:45-74

Deleting node_modules and re-installing doesn't seem to fix.