UI: refactor use widget wrapper (#1395)

* UI: refactor use widget wrapper

* commit UI assets

src/evidently/ui/assets/index.html

@@ -11,7 +11,7 @@
       content="Evidently - ML Monitoring Demo. Hosted example to monitor the performance of a demand forecasting model on a toy dataset."
     />
     <title>Evidently - ML Monitoring Demo</title>
-    <script type="module" crossorigin src="/static/js/index-D461mMJX.js"></script>
+    <script type="module" crossorigin src="/static/js/index-Bk_zDyHx.js"></script>
     <link rel="modulepreload" crossorigin href="/static/js/vendor-C2GWNUp2.js">
     <link rel="stylesheet" crossorigin href="/static/css/index-CJbKDbyR.css">
   </head>

ui/packages/evidently-ui-lib/src/components/DashboardContent.tsx

@@ -4,17 +4,13 @@ import { WidgetRenderer } from '~/widgets/WidgetRenderer'
 
 export interface DashboardContentProps {
   widgets: WidgetInfo[]
-  ItemWrapper?: ({ id, children }: { id: string; children: React.ReactNode }) => React.ReactNode
 }
 
-export const DashboardContentWidgets: FunctionComponent<DashboardContentProps> = ({
-  widgets,
-  ItemWrapper
-}) => (
+export const DashboardContentWidgets: FunctionComponent<DashboardContentProps> = ({ widgets }) => (
   <>
     {widgets.length > 0 &&
       widgets.map((wi, idx) => (
-        <React.Fragment key={wi.id}>{WidgetRenderer(`wi_${idx}`, wi, ItemWrapper)}</React.Fragment>
+        <React.Fragment key={wi.id}>{WidgetRenderer(`wi_${idx}`, wi)}</React.Fragment>
       ))}
   </>
 )

ui/packages/evidently-ui-lib/src/components/DashboardWidgets.tsx

@@ -3,11 +3,9 @@ import type { WidgetInfo } from '~/api'
 import { DashboardContentWidgets } from '~/components/DashboardContent'
 
 export const DashboardWidgets = ({
-  widgets,
-  ItemWrapper
+  widgets
 }: {
   widgets: WidgetInfo[]
-  ItemWrapper?: ({ id, children }: { id: string; children: React.ReactNode }) => React.ReactNode
 }) => {
   if (widgets.length === 0) {
     return (
@@ -20,7 +18,7 @@ export const DashboardWidgets = ({
   return (
     <>
       <Grid container spacing={3} direction='row' alignItems='stretch'>
-        <DashboardContentWidgets widgets={widgets} ItemWrapper={ItemWrapper} />
+        <DashboardContentWidgets widgets={widgets} />
       </Grid>
     </>
   )

ui/packages/evidently-ui-lib/src/contexts/WidgetWrapper.tsx

@@ -0,0 +1,13 @@
+import React, { useContext } from 'react'
+
+export type WidgetWrapper = {
+  WidgetWrapper: ({ id, children }: { id: string; children: React.ReactNode }) => JSX.Element
+}
+
+const EmptyWidgetWrapper: WidgetWrapper['WidgetWrapper'] = ({ children }) => <>{children}</>
+
+export const widgetWrapperContext = React.createContext<WidgetWrapper>({
+  WidgetWrapper: EmptyWidgetWrapper
+})
+
+export const useWidgetWrapper = () => useContext(widgetWrapperContext)