dashboard layout updates

web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/dashboards/[dashboardId]/file/loading.tsx

@@ -0,0 +1,5 @@
+import { FileIndeterminateLoader } from '@/components/features/FileIndeterminateLoader';
+
+export default function Loading() {
+  return <FileIndeterminateLoader />;
+}

web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/dashboards/[dashboardId]/file/page.tsx

@@ -0,0 +1,11 @@
+import { DashboardViewFileController } from '@/controllers/DashboardController/DashboardViewFileController';
+
+export default async function Page({
+  params
+}: {
+  params: Promise<{ dashboardId: string; chatId: string }>;
+}) {
+  const { dashboardId, chatId } = await params;
+
+  return <DashboardViewFileController dashboardId={dashboardId} chatId={chatId} />;
+}

web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/dashboards/[dashboardId]/layout.tsx

@@ -0,0 +1,13 @@
+import { DashboardLayout } from '@/layouts/DashboardLayout';
+
+export default async function Layout({
+  children,
+  params
+}: {
+  children: React.ReactNode;
+  params: Promise<{ dashboardId: string }>;
+}) {
+  const { dashboardId } = await params;
+
+  return <DashboardLayout dashboardId={dashboardId}>{children}</DashboardLayout>;
+}

web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/dashboards/[dashboardId]/page.tsx

@@ -1,14 +1,11 @@
-import { DashboardController } from '@/controllers/DashboardController';
+import { DashboardViewDashboardController } from '@/controllers/DashboardController/DashboardViewDashboardController';
-import { AppAssetCheckLayout } from '@/layouts/AppAssetCheckLayout';
 
-export default async function DashboardPage(props: { params: Promise<{ dashboardId: string }> }) {
+export default async function Page(props: {
+  params: Promise<{ dashboardId: string; chatId: string }>;
+}) {
   const params = await props.params;
 
-  const { dashboardId } = params;
+  const { dashboardId, chatId } = params;
 
-  return (
+  return <DashboardViewDashboardController dashboardId={dashboardId} chatId={chatId} />;
-    <AppAssetCheckLayout assetId={dashboardId} type="dashboard">
-      <DashboardController dashboardId={dashboardId} />
-    </AppAssetCheckLayout>
-  );
 }

web/src/app/app/(primary_layout)/(chat_experience)/dashboards/[dashboardId]/file/loading.tsx

@@ -0,0 +1,5 @@
+import { FileIndeterminateLoader } from '@/components/features/FileIndeterminateLoader';
+
+export default function Loading() {
+  return <FileIndeterminateLoader />;
+}

web/src/app/app/(primary_layout)/(chat_experience)/dashboards/[dashboardId]/file/page.tsx

@@ -0,0 +1,7 @@
+import { DashboardViewFileController } from '@/controllers/DashboardController/DashboardViewFileController';
+
+export default async function Page({ params }: { params: Promise<{ dashboardId: string }> }) {
+  const { dashboardId } = await params;
+
+  return <DashboardViewFileController dashboardId={dashboardId} chatId={undefined} />;
+}

web/src/app/app/(primary_layout)/(chat_experience)/dashboards/[dashboardId]/layout.tsx

@@ -0,0 +1,13 @@
+import { DashboardLayout } from '@/layouts/DashboardLayout';
+
+export default async function Layout({
+  children,
+  params
+}: {
+  children: React.ReactNode;
+  params: Promise<{ dashboardId: string }>;
+}) {
+  const { dashboardId } = await params;
+
+  return <DashboardLayout dashboardId={dashboardId}>{children}</DashboardLayout>;
+}

web/src/app/app/(primary_layout)/(chat_experience)/dashboards/[dashboardId]/page.tsx

@@ -1,14 +1,9 @@
-import { DashboardController } from '@/controllers/DashboardController';
+import { DashboardViewDashboardController } from '@/controllers/DashboardController/DashboardViewDashboardController';
-import { AppAssetCheckLayout } from '@/layouts/AppAssetCheckLayout';
 
 export default async function Page(props: { params: Promise<{ dashboardId: string }> }) {
   const params = await props.params;
 
   const { dashboardId } = params;
 
-  return (
+  return <DashboardViewDashboardController dashboardId={dashboardId} chatId={undefined} />;
-    <AppAssetCheckLayout assetId={dashboardId} type="dashboard">
-      <DashboardController dashboardId={dashboardId} />
-    </AppAssetCheckLayout>
-  );
 }

web/src/controllers/DashboardController/DashboardViewFileController/DashboardViewFileController.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useEffect } from 'react';
 import { CodeCard } from '@/components/ui/card';
 import { useMemoizedFn } from '@/hooks';

web/src/controllers/DashboardController/config.ts

@@ -2,7 +2,6 @@ import type { DashboardFileView } from '@/layouts/ChatLayout';
 import { DashboardViewDashboardController } from './DashboardViewDashboardController';
 import { DashboardViewFileController } from './DashboardViewFileController';
 import React from 'react';
-import dynamic from 'next/dynamic';
 
 export interface DashboardViewProps {
   dashboardId: string;

web/src/layouts/DashboardLayout/DashboardLayout.tsx

@@ -0,0 +1,16 @@
+'use server';
+
+import React from 'react';
+import { AppAssetCheckLayout } from '../AppAssetCheckLayout';
+import { DashboardLayoutContainer } from './DashboardLayoutContainer';
+
+export const DashboardLayout: React.FC<{ dashboardId: string; children: React.ReactNode }> = ({
+  dashboardId,
+  children
+}) => {
+  return (
+    <AppAssetCheckLayout assetId={dashboardId} type="dashboard">
+      <DashboardLayoutContainer dashboardId={dashboardId}>{children}</DashboardLayoutContainer>
+    </AppAssetCheckLayout>
+  );
+};

web/src/layouts/DashboardLayout/DashboardLayoutContainer.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { useGetDashboard } from '@/api/buster_rest/dashboards';
+import { AddToDashboardModal } from '@/components/features/modal/AddToDashboardModal';
+import { useDashboardContentStore } from '@/context/Dashboards';
+import { canEdit } from '@/lib/share';
+import React from 'react';
+
+export const DashboardLayoutContainer: React.FC<{
+  children: React.ReactNode;
+  dashboardId: string;
+}> = ({ children, dashboardId }) => {
+  const { data: permission } = useGetDashboard({ id: dashboardId }, (x) => x.permission);
+  const isEditor = canEdit(permission);
+
+  return (
+    <>
+      {children}
+      {isEditor && <MemoizedAddToDashboardModal dashboardId={dashboardId} />}
+    </>
+  );
+};
+
+const MemoizedAddToDashboardModal = React.memo(({ dashboardId }: { dashboardId: string }) => {
+  const { openAddContentModal, onCloseAddContentModal } = useDashboardContentStore();
+
+  return (
+    <AddToDashboardModal
+      open={openAddContentModal}
+      onClose={onCloseAddContentModal}
+      dashboardId={dashboardId}
+    />
+  );
+});
+
+MemoizedAddToDashboardModal.displayName = 'MemoizedAddToDashboardModal';

web/src/layouts/DashboardLayout/index.ts

@@ -0,0 +1 @@
+export * from './DashboardLayout';

web/src/routes/busterRoutes/busterAppRoutes.ts

@@ -69,6 +69,10 @@ export type BusterAppRoutesWithArgs = {
     route: BusterAppRoutes.APP_DASHBOARD_ID;
     dashboardId: string;
   };
+  [BusterAppRoutes.APP_DASHBOARD_ID_FILE]: {
+    route: BusterAppRoutes.APP_DASHBOARD_ID_FILE;
+    dashboardId: string;
+  };
   [BusterAppRoutes.APP_DATASETS]: { route: BusterAppRoutes.APP_DATASETS };
   [BusterAppRoutes.APP_TERMS]: { route: BusterAppRoutes.APP_TERMS };
   [BusterAppRoutes.APP_DATASETS_ID]: { route: BusterAppRoutes.APP_DATASETS_ID; datasetId: string };
@@ -148,6 +152,11 @@ export type BusterAppRoutesWithArgs = {
     chatId: string;
     dashboardId: string;
   };
+  [BusterAppRoutes.APP_CHAT_ID_DASHBOARD_ID_FILE]: {
+    route: BusterAppRoutes.APP_CHAT_ID_DASHBOARD_ID_FILE;
+    chatId: string;
+    dashboardId: string;
+  };
   [BusterAppRoutes.APP_CHAT_ID_DATASET_ID]: {
     route: BusterAppRoutes.APP_CHAT_ID_DATASET_ID;
     chatId: string;