Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

app content layout

This commit is contained in:
Nate Kelley 2025-02-27 20:36:35 -07:00
parent 910cbf3638
commit 03ccfae614
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
9 changed files with 52 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/app/app/chats/_ChatsListContainer/ChatListContainer.tsx
View File

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

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

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

6
web/src/controllers/CollectionListController/CollectionsListContent.tsx
View File

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

60
web/src/controllers/DashboardListController/DashboardListContent.tsx
View File

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

6
web/src/controllers/DatasetsListController/DatasetListContent.tsx
View File

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

6
web/src/controllers/MetricListContainer/MetricListContainer.tsx
View File

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

6
web/src/controllers/TermIndividualController/TermIndividualContent.tsx
View File

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

6
web/src/controllers/TermIndividualController/TermIndividualController.tsx
View File

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

6
web/src/controllers/TermsListController/TermsListContent.tsx
View File

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