app content layout

web/src/app/app/chats/_ChatsListContainer/ChatListContainer.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState } from 'react';
-import { AppContent } from '../../../../components/ui/layouts/AppContentPage';
+import { AppContentPage } from '../../../../components/ui/layouts/AppContentPage';
 import { useAppLayoutContextSelector } from '@/context/BusterAppLayout';
 import { useMemoizedFn, useMount } from 'ahooks';
 import { useBusterChatListByFilter } from '@/context/Chats';
@@ -31,14 +31,14 @@ export const ChatListContainer: React.FC<{
   return (
     <div className={`${className} flex h-full flex-col`}>
       <ChatListHeader />
-      <AppContent>
+      <AppContentPage>
         <ChatItemsContainer
           chats={list}
           loading={!isFetched}
           openNewMetricModal={onToggleChatsModal}
           className="flex-col overflow-hidden"
         />
-      </AppContent>
+      </AppContentPage>
     </div>
   );
 };

web/src/app/app/datasets/[datasetId]/_DatasetsLayout/DatasetsLayout.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { AppContent } from '@/components/ui/layouts/AppContentPage';
+import { AppContentPage } from '@/components/ui/layouts/AppContentPage';
 import { DatasetsIndividualHeader } from './DatasetsIndividualHeader';
 import { DatasetPageProvider } from './DatasetPageContext';
 
@@ -12,7 +12,7 @@ export const DatasetPageLayout: React.FC<{ children: React.ReactNode; datasetId:
   return (
     <DatasetPageProvider datasetId={datasetId}>
       <DatasetsIndividualHeader />
-      <AppContent>{children}</AppContent>
+      <AppContentPage>{children}</AppContentPage>
     </DatasetPageProvider>
   );
 };

web/src/controllers/CollectionListController/CollectionsListContent.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useMemo, useState } from 'react';
-import { AppContent } from '@/components/ui';
+import { AppContentPage } from '@/components/ui/layouts';
 import { Avatar } from '@/components/ui/avatar';
 import { formatDate, makeHumanReadble } from '@/lib';
 import { BusterRoutes, createBusterRoute } from '@/routes';
@@ -32,13 +32,13 @@ export const CollectionsListContent: React.FC<{
 
   return (
     <>
-      <AppContent>
+      <AppContentPage>
         <CollectionList
           collectionsList={collectionsList}
           setOpenNewCollectionModal={setOpenNewCollectionModal}
           loadedCollections={isCollectionListFetched}
         />
-      </AppContent>
+      </AppContentPage>
 
       <NewCollectionModal
         open={openNewCollectionModal}

web/src/controllers/DashboardListController/DashboardListContent.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useMemo, useState } from 'react';
-import { AppContent } from '@/components/ui/layouts/AppContentPage';
+import { AppContentPage } from '@/components/ui/layouts/AppContentPage';
 import { useBusterDashboardContextSelector } from '@/context/Dashboards';
 import { Avatar } from '@/components/ui/avatar';
 import { formatDate } from '@/lib';
@@ -81,36 +81,34 @@ export const DashboardListContent: React.FC<{
   });
 
   return (
-    <>
-      <AppContent>
-        <div className={`${className} relative flex h-full flex-col items-center`}>
-          <BusterList
-            rows={rows}
-            columns={columns}
-            selectedRowKeys={selectedDashboardIds}
-            onSelectChange={setSelectedDashboardIds}
-            emptyState={
-              !loading ? (
-                <ListEmptyStateWithButton
-                  title={`You don’t have any dashboards yet.`}
-                  buttonText="New dashboard"
-                  description={`You don’t have any dashboards. As soon as you do, they will start to  appear here.`}
-                  onClick={onClickEmptyState}
-                  loading={isCreatingDashboard}
-                />
-              ) : (
-                <></>
-              )
-            }
-          />
+    <AppContentPage>
+      <div className={`${className} relative flex h-full flex-col items-center`}>
+        <BusterList
+          rows={rows}
+          columns={columns}
+          selectedRowKeys={selectedDashboardIds}
+          onSelectChange={setSelectedDashboardIds}
+          emptyState={
+            !loading ? (
+              <ListEmptyStateWithButton
+                title={`You don’t have any dashboards yet.`}
+                buttonText="New dashboard"
+                description={`You don’t have any dashboards. As soon as you do, they will start to  appear here.`}
+                onClick={onClickEmptyState}
+                loading={isCreatingDashboard}
+              />
+            ) : (
+              <></>
+            )
+          }
+        />
 
-          <DashboardSelectedOptionPopup
-            selectedRowKeys={selectedDashboardIds}
-            onSelectChange={setSelectedDashboardIds}
-            hasSelected={selectedDashboardIds.length > 0}
-          />
-        </div>
-      </AppContent>
-    </>
+        <DashboardSelectedOptionPopup
+          selectedRowKeys={selectedDashboardIds}
+          onSelectChange={setSelectedDashboardIds}
+          hasSelected={selectedDashboardIds.length > 0}
+        />
+      </div>
+    </AppContentPage>
   );
 };

web/src/controllers/DatasetsListController/DatasetListContent.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState, useMemo } from 'react';
-import { AppContent } from '@/components/ui/layouts/AppContentPage';
+import { AppContentPage } from '@/components/ui/layouts/AppContentPage';
 import { Avatar } from '@/components/ui/avatar';
 import { formatDate } from '@/lib';
 import { BusterList, BusterListColumn, BusterListRow } from '@/components/ui/list';
@@ -78,7 +78,7 @@ export const DatasetListContent: React.FC<{
 
   return (
     <>
-      <AppContent>
+      <AppContentPage>
         <BusterList
           columns={columns}
           rows={rows}
@@ -103,7 +103,7 @@ export const DatasetListContent: React.FC<{
           selectedRowKeys={selectedRowKeys}
           onSelectChange={setSelectedRowKeys}
         />
-      </AppContent>
+      </AppContentPage>
     </>
   );
 });

web/src/controllers/MetricListContainer/MetricListContainer.tsx

@@ -7,7 +7,7 @@ import { VerificationStatus } from '@/api/asset_interfaces';
 import { useBusterMetricListByFilter } from '@/context/Metrics';
 import { MetricListHeader } from './MetricListHeader';
 import { MetricItemsContainer } from './MetricItemsContainer';
-import { AppContent } from '@/components/ui';
+import { AppContentPage } from '@/components/ui';
 
 export const MetricListContainer: React.FC<{
   className?: string;
@@ -32,7 +32,7 @@ export const MetricListContainer: React.FC<{
   return (
     <div className={`${className} flex h-full flex-col`}>
       <MetricListHeader type={type} filters={filters} onSetFilters={onSetFilters} />
-      <AppContent>
+      <AppContentPage>
         <MetricItemsContainer
           type={type}
           metrics={metricList || []}
@@ -40,7 +40,7 @@ export const MetricListContainer: React.FC<{
           openNewMetricModal={onToggleChatsModal}
           className="flex-col overflow-hidden"
         />
-      </AppContent>
+      </AppContentPage>
     </div>
   );
 };

web/src/controllers/TermIndividualController/TermIndividualContent.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useEffect, useMemo, useState } from 'react';
-import { AppContent } from '@/components/ui/layouts/AppContentPage';
+import { AppContentPage } from '@/components/ui/layouts/AppContentPage';
 import { useBusterTermsIndividualContextSelector, useBusterTermsIndividual } from '@/context/Terms';
 import { Dropdown, Input } from 'antd';
 import { useDebounceFn } from 'ahooks';
@@ -70,7 +70,7 @@ export const TermIndividualContent: React.FC<{
   }, [selectedTerm?.name, selectedTerm?.definition]);
 
   return (
-    <AppContent className="overflow-auto p-8">
+    <AppContentPage className="overflow-auto p-8">
       {loadingSelectedTerm ? (
         <SkeletonLoader />
       ) : (
@@ -149,7 +149,7 @@ export const TermIndividualContent: React.FC<{
           </div>
         </div>
       )}
-    </AppContent>
+    </AppContentPage>
   );
 };
 

web/src/controllers/TermIndividualController/TermIndividualController.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { TermIndividualHeader } from './TermIndividualHeader';
-import { AppContentHeader, AppContent, AppSplitter } from '@/components/ui/layouts';
+import { AppContentHeader, AppContentPage, AppSplitter } from '@/components/ui/layouts';
 import { TermIndividualHeaderSider } from './TermIndividualHeaderSider';
 import { TermIndividualContentSider } from './TermIndividualContentSider';
 import { useBusterTermsListContextSelector } from '@/context/Terms';
@@ -33,9 +33,9 @@ export const TermIndividualController: React.FC<{
           <AppContentHeader>
             <TermIndividualHeaderSider />
           </AppContentHeader>
-          <AppContent>
+          <AppContentPage>
             <TermIndividualContentSider termId={termId} />
-          </AppContent>
+          </AppContentPage>
         </>
       }
     />

web/src/controllers/TermsListController/TermsListContent.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useMemo, useState } from 'react';
-import { AppContent } from '@/components/ui/layouts/AppContentPage';
+import { AppContentPage } from '@/components/ui/layouts/AppContentPage';
 import { Avatar } from '@/components/ui/avatar';
 import { formatDate } from '@/lib';
 import {
@@ -68,7 +68,7 @@ export const TermsListContent: React.FC<{
   });
 
   return (
-    <AppContent>
+    <AppContentPage>
       <BusterList
         rows={rows}
         columns={columns}
@@ -92,6 +92,6 @@ export const TermsListContent: React.FC<{
         selectedRowKeys={selectedTermIds}
         onSelectChange={setSelectedTermIds}
       />
-    </AppContent>
+    </AppContentPage>
   );
 };