diff --git a/web/src/app/embed/dashboards/[dashboardId]/layout.tsx b/web/src/app/embed/dashboards/[dashboardId]/layout.tsx new file mode 100644 index 000000000..15c05bbe5 --- /dev/null +++ b/web/src/app/embed/dashboards/[dashboardId]/layout.tsx @@ -0,0 +1,15 @@ +import { AppAssetCheckLayout } from '@/layouts/AppAssetCheckLayout'; + +export default async function EmbedMetricsLayout({ + children, + params: { dashboardId } +}: { + children: React.ReactNode; + params: { dashboardId: string }; +}) { + return ( + + {children} + + ); +} diff --git a/web/src/app/embed/dashboards/[dashboardId]/page.tsx b/web/src/app/embed/dashboards/[dashboardId]/page.tsx index f02ead15e..561dac4a4 100644 --- a/web/src/app/embed/dashboards/[dashboardId]/page.tsx +++ b/web/src/app/embed/dashboards/[dashboardId]/page.tsx @@ -1,7 +1,11 @@ -export default function EmbedDashboardsPage({ - params: { dashboardId } -}: { - params: { dashboardId: string }; +import { DashboardController } from '@/controllers/DashboardController'; + +export default async function EmbedDashboardsPage(props: { + params: Promise<{ dashboardId: string }>; }) { - return
EmbedDashboardsPage {dashboardId}
; + const params = await props.params; + + const { dashboardId } = params; + + return ; } diff --git a/web/src/app/embed/metrics/[metricId]/layout.tsx b/web/src/app/embed/metrics/[metricId]/layout.tsx index 0bcc024a7..f07877075 100644 --- a/web/src/app/embed/metrics/[metricId]/layout.tsx +++ b/web/src/app/embed/metrics/[metricId]/layout.tsx @@ -2,11 +2,13 @@ import { AppAssetCheckLayout } from '@/layouts/AppAssetCheckLayout'; export default async function EmbedMetricsLayout({ children, - params: { metricId } + params }: { children: React.ReactNode; - params: { metricId: string }; + params: Promise<{ metricId: string }>; }) { + const { metricId } = await params; + return ( {children} diff --git a/web/src/components/ui/charts/interfaces/chartComponentInterfaces.ts b/web/src/components/ui/charts/interfaces/chartComponentInterfaces.ts index e9d8d9e75..e5fec7187 100644 --- a/web/src/components/ui/charts/interfaces/chartComponentInterfaces.ts +++ b/web/src/components/ui/charts/interfaces/chartComponentInterfaces.ts @@ -40,7 +40,6 @@ export interface BusterChartRenderComponentProps | 'metricValueLabel' | 'id' | 'bordered' - | 'editable' | 'groupByMethod' | 'error' | 'pieChartAxis' diff --git a/web/src/components/ui/grid/BusterResizeColumns.tsx b/web/src/components/ui/grid/BusterResizeColumns.tsx index 4eb7faa49..4eddd7006 100644 --- a/web/src/components/ui/grid/BusterResizeColumns.tsx +++ b/web/src/components/ui/grid/BusterResizeColumns.tsx @@ -15,7 +15,7 @@ type ContainerProps = { items: ResizeableGridDragItem[]; index: number; columnSizes: number[] | undefined; - allowEdit?: boolean; + readOnly?: boolean; onRowLayoutChange: (layout: number[], rowId: string) => void; fluid?: boolean; }; @@ -25,15 +25,15 @@ export const BusterResizeColumns: React.FC = ({ onRowLayoutChange = () => {}, index: rowIndex, columnSizes, - allowEdit = true, + readOnly = true, items = [], fluid = true }) => { const { setNodeRef, isOver, active, over } = useSortable({ id: rowId, - disabled: !allowEdit + disabled: readOnly }); - const mouse = useMouse({ moveThrottleMs: 50, disabled: !allowEdit || !over }); + const mouse = useMouse({ moveThrottleMs: 50, disabled: readOnly || !over }); const [isDragginResizeColumn, setIsDraggingResizeColumn] = useState(null); const columnMarkerColumnIndex = useMemo( () => (typeof isDragginResizeColumn === 'number' ? isDragginResizeColumn + 1 : null), @@ -97,6 +97,7 @@ export const BusterResizeColumns: React.FC = ({ }, [activeDragId, items, active?.id]); const memoizedStyle = useMemo(() => { + console.log(isOver); return { backgroundColor: isOver ? 'rgba(0, 0, 0, 0.25)' : undefined }; @@ -128,7 +129,7 @@ export const BusterResizeColumns: React.FC = ({ const sashRender = useMemoizedFn((index: number, active: boolean) => { return ( = ({ autoSizeId="resize-column" split="vertical" sizes={sizes} - allowResize={allowEdit && canResize} + allowResize={!readOnly && canResize} onDragStart={onDragStart} onDragEnd={onDragEnd} sashRender={sashRender} @@ -176,7 +177,7 @@ export const BusterResizeColumns: React.FC = ({ !!over && insertPosition(item.id, index, mouse.clientX) === Position.Before } /> - + {item.children} void; -}> = ({ allowEdit = true, rows, className, onRowLayoutChange }) => { +}> = ({ readOnly = false, rows, className, onRowLayoutChange }) => { const ref = useRef(null); const [isDraggingResizeId, setIsDraggingResizeId] = useState(null); const [sizes, setSizes] = useState(rows.map((r) => r.rowHeight ?? MIN_ROW_HEIGHT)); @@ -69,7 +69,7 @@ export const BusterResizeRows: React.FC<{ active={false} setIsDraggingResizeId={setIsDraggingResizeId} onResize={handleResize} - allowEdit={allowEdit} + readOnly={readOnly} /> {rows.map((row, index) => ( @@ -83,7 +83,7 @@ export const BusterResizeRows: React.FC<{ rowId={row.id} items={row.items} index={index} - allowEdit={allowEdit} + readOnly={readOnly} columnSizes={row.columnSizes} onRowLayoutChange={onRowLayoutChangePreflight} /> @@ -95,13 +95,13 @@ export const BusterResizeRows: React.FC<{ active={isDraggingResizeId === index} setIsDraggingResizeId={setIsDraggingResizeId} onResize={handleResize} - allowEdit={allowEdit} + readOnly={readOnly} hideDropzone={index === rows.length - 1} /> ))} - {allowEdit && } + {!readOnly && } ); }; @@ -112,15 +112,15 @@ const ResizeRowHandle: React.FC<{ sizes: number[]; setIsDraggingResizeId: (index: number | null) => void; onResize: (index: number, size: number) => void; - allowEdit: boolean; + readOnly: boolean; active: boolean; top?: boolean; //if true we will not use dragging, just dropzone hideDropzone?: boolean; }> = React.memo( - ({ hideDropzone, top, id, active, allowEdit, setIsDraggingResizeId, index, sizes, onResize }) => { + ({ hideDropzone, top, id, active, readOnly, setIsDraggingResizeId, index, sizes, onResize }) => { const { setNodeRef, isOver, over } = useDroppable({ id: `${NEW_ROW_ID}_${id}}`, - disabled: !allowEdit, + disabled: readOnly, data: { id } }); const showDropzone = !!over?.id && !hideDropzone; @@ -158,14 +158,14 @@ const ResizeRowHandle: React.FC<{ }; }, [top]); - const showActive = (active || isDropzoneActive) && allowEdit; + const showActive = (active || isDropzoneActive) && !readOnly; return (
void; onEndDrag?: (d: { id: string }) => void; overlayComponent?: React.ReactNode; - allowEdit?: boolean; + readOnly?: boolean; }> = ({ - allowEdit = true, + readOnly = true, className = '', overlayComponent, rows: serverRows, @@ -57,6 +57,8 @@ export const BusterResizeableGrid: React.FC<{ const [rows, setRows] = useState(serverRows); const styleRef = useRef(undefined); + console.log(serverRows); + const onRowLayoutChangePreflight = useMemoizedFn((newLayout: BusterResizeableGridRow[]) => { const filteredRows = newRowPreflight(newLayout); @@ -335,12 +337,12 @@ export const BusterResizeableGrid: React.FC<{
- {allowEdit && ( + {!readOnly && ( + modifiers={[useSnapToCenter ? snapCenterToCursor : adjustTranslate]}> {activeId && ( { if (!userData.data?.user) { const { session: anonSession } = await signInWithAnonymousUser(); return { - user: anonSession?.user, + user: anonSession?.user || null, accessToken: anonSession?.access_token, refreshToken: anonSession?.refresh_token, expiresAt: anonSession?.expires_at diff --git a/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardContentController.tsx b/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardContentController.tsx index dfba11265..6998b636f 100644 --- a/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardContentController.tsx +++ b/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardContentController.tsx @@ -20,7 +20,7 @@ const DEFAULT_EMPTY_METRICS: Record = {}; const DEFAULT_EMPTY_CONFIG: DashboardConfig = {}; export const DashboardContentController: React.FC<{ - allowEdit?: boolean; + readOnly?: boolean; metrics: BusterDashboardResponse['metrics'] | undefined; dashboard: BusterDashboardResponse['dashboard'] | undefined; onUpdateDashboardConfig: ReturnType['mutateAsync']; @@ -29,7 +29,7 @@ export const DashboardContentController: React.FC<{ ({ onOpenAddContentModal, dashboard, - allowEdit, + readOnly = false, metrics = DEFAULT_EMPTY_METRICS, onUpdateDashboardConfig }) => { @@ -79,7 +79,7 @@ export const DashboardContentController: React.FC<{ key={item.id} metricId={item.id} dashboardId={dashboard!.id} - allowEdit={allowEdit} + readOnly={readOnly} numberOfMetrics={numberOfMetrics} /> ) @@ -87,7 +87,7 @@ export const DashboardContentController: React.FC<{ }) }; }); - }, [rows]); + }, [rows, readOnly, dashboard?.id]); const onDragEnd = useMemoizedFn(() => { setDraggingId(null); @@ -109,7 +109,7 @@ export const DashboardContentController: React.FC<{ = ({ - allowEdit, + readOnly, dashboardId, className = '', metricId, @@ -74,10 +74,8 @@ const DashboardMetricItemBase: React.FC<{ return ( - + className={`metric-item flex h-full w-full flex-col overflow-auto ${className}`}> + @@ -105,7 +103,7 @@ const DashboardMetricItemBase: React.FC<{ animate={!isDragOverlay && animate} animateLegend={false} columnMetadata={metricData?.data_metadata?.column_metadata} - editable={allowEdit} //this is really only to resize the columns of a table + readOnly={true} {...chartOptions} /> )} diff --git a/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/MetricTitle.tsx b/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/MetricTitle.tsx index 027aaac4e..90f4f5aa3 100644 --- a/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/MetricTitle.tsx +++ b/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/MetricTitle.tsx @@ -17,11 +17,11 @@ export const MetricTitle: React.FC<{ isDragOverlay: boolean; metricId: string; dashboardId: string; - allowEdit?: boolean; + readOnly?: boolean; }> = React.memo( ({ metricId, - allowEdit = true, + readOnly = true, dashboardId, title, description, @@ -43,6 +43,8 @@ export const MetricTitle: React.FC<{ }; }, [title, useEllipsis]); + console.log(readOnly, isDragOverlay); + return (
- {isDragOverlay || !allowEdit ? ( + {isDragOverlay || readOnly ? ( <> ) : (