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

DRAMATIC CHANGE TO LAYOUT

This commit is contained in:
Nate Kelley 2025-03-24 12:31:52 -06:00
parent d305e72b5a
commit 9149b0cfaa
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
7 changed files with 107 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/ui/layouts/AppPageLayout.tsx
View File

@ -32,7 +32,7 @@ export const AppPageLayout: React.FC<
return (
<div
className={cn(
'flex h-full w-full flex-col overflow-hidden',
'app-page-layout flex h-full w-full flex-col overflow-hidden',
scrollable && 'overflow-y-auto',
className
)}>

2
web/src/components/ui/layouts/AppPageLayoutContent.tsx
View File

@ -11,6 +11,8 @@ export const AppPageLayoutContent: React.FC<
const Selector = scrollable ? ScrollArea : 'main';
const ChildSelector = scrollable ? 'main' : React.Fragment;
console.log('scrollable', scrollable);
return (
<Selector className={cn('bg-page-background app-content h-full max-h-[100%] p-0', className)}>
<ChildSelector>{children}</ChildSelector>

2
web/src/controllers/CollectionListController/CollectionListController.tsx
View File

@ -18,6 +18,8 @@ export const CollectionListController: React.FC = () => {
return (
<AppPageLayout
className="swagswagswag"
scrollable={false}
header={
<CollectionListHeader
setOpenNewCollectionModal={setOpenNewCollectionModal}

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

@ -36,13 +36,11 @@ export const CollectionsListContent: React.FC<{
return (
<>
<AppPageLayoutContent>
<CollectionList
collectionsList={collectionsList}
setOpenNewCollectionModal={setOpenNewCollectionModal}
loadedCollections={isCollectionListFetched}
/>
</AppPageLayoutContent>
<CollectionList
collectionsList={collectionsList}
setOpenNewCollectionModal={setOpenNewCollectionModal}
loadedCollections={isCollectionListFetched}
/>
<NewCollectionModal
open={openNewCollectionModal}

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

@ -78,34 +78,32 @@ export const DatasetListContent: React.FC<{
return (
<>
<AppPageLayoutContent>
<BusterList
columns={columns}
rows={rows}
selectedRowKeys={selectedRowKeys}
onSelectChange={setSelectedRowKeys}
emptyState={useMemo(
() =>
!isFetchedDatasets ? (
<></>
) : (
<ListEmptyStateWithButton
isAdmin={isAdmin}
title="You don't have any datasets yet."
buttonText="New dataset"
description="Datasets help you organize your data. Datasets will appear here when you create them."
onClick={onClickEmptyState}
/>
),
[isFetchedDatasets, isAdmin, onClickEmptyState]
)}
/>
<BusterList
columns={columns}
rows={rows}
selectedRowKeys={selectedRowKeys}
onSelectChange={setSelectedRowKeys}
emptyState={useMemo(
() =>
!isFetchedDatasets ? (
<></>
) : (
<ListEmptyStateWithButton
isAdmin={isAdmin}
title="You don't have any datasets yet."
buttonText="New dataset"
description="Datasets help you organize your data. Datasets will appear here when you create them."
onClick={onClickEmptyState}
/>
),
[isFetchedDatasets, isAdmin, onClickEmptyState]
)}
/>
<DatasetSelectedOptionPopup
selectedRowKeys={selectedRowKeys}
onSelectChange={setSelectedRowKeys}
/>
</AppPageLayoutContent>
<DatasetSelectedOptionPopup
selectedRowKeys={selectedRowKeys}
onSelectChange={setSelectedRowKeys}
/>
</>
);
});

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

@ -64,92 +64,84 @@ export const TermIndividualContent: React.FC<{
}, [term?.name, term?.definition]);
return (
<AppPageLayoutContent className="overflow-auto p-8">
{loadingSelectedTerm ? (
<SkeletonLoader />
) : (
<div className="flex flex-col">
<div className="flex justify-between space-x-3">
<div className="mb-5 flex flex-col space-y-0.5">
<div className={'overflow-hidden'}>
<EditableTitle
onEdit={setEditingTermName}
onChange={(v) => {
onSetTermName(v);
}}
level={4}>
{termName}
</EditableTitle>
</div>
<div>
<Text variant="secondary">
Last updated:{' '}
{formatDate({
date: term?.updated_at!,
format: 'lll'
})}
</Text>
</div>
<>
<div className="flex flex-col">
<div className="flex justify-between space-x-3">
<div className="mb-5 flex flex-col space-y-0.5">
<div className={'overflow-hidden'}>
<EditableTitle
onEdit={setEditingTermName}
onChange={(v) => {
onSetTermName(v);
}}
level={4}>
{termName}
</EditableTitle>
</div>
<div>
<MoreDropdown termId={termId} />
<Text variant="secondary">
Last updated:{' '}
{formatDate({
date: term?.updated_at!,
format: 'lll'
})}
</Text>
</div>
</div>
<div className="flex flex-col space-y-4">
<ItemContainer title="Definition">
<div className={'overflow-hidden'}>
<InputTextArea
key={term?.id || 'default'}
defaultValue={term?.definition || termDefinition}
autoResize={{ minRows: 3, maxRows: 20 }}
placeholder={'Enter definition...'}
onBlur={(e) => {
onSetTermDefinition(e.target.value);
}}
variant="ghost"
/>
</div>
</ItemContainer>
<ItemContainer
title={
<div className="flex w-full items-center justify-between space-x-2">
<Text>SQL Snippet</Text>
<div className="cursor-pointer">
<CircleQuestion />
</div>
</div>
}>
<div className="relative h-full w-full" style={{ height: sqlHeight }}>
<AppCodeEditor
style={{ minHeight: sqlHeight }}
defaultValue={termSQL}
onChangeEditorHeight={(v) => {
setSqlHeight(clamp(v, 300, 800));
}}
onChange={(v) => {
onSetTermSQL.run(v);
}}
monacoEditorOptions={{
scrollbar: {
alwaysConsumeMouseWheel: false
}
}}
/>
</div>
</ItemContainer>
<div>
<MoreDropdown termId={termId} />
</div>
</div>
)}
</AppPageLayoutContent>
);
};
const SkeletonLoader: React.FC = () => {
return <div className="p-4">{/* <Skeleton /> */}</div>;
<div className="flex flex-col space-y-4">
<ItemContainer title="Definition">
<div className={'overflow-hidden'}>
<InputTextArea
key={term?.id || 'default'}
defaultValue={term?.definition || termDefinition}
autoResize={{ minRows: 3, maxRows: 20 }}
placeholder={'Enter definition...'}
onBlur={(e) => {
onSetTermDefinition(e.target.value);
}}
variant="ghost"
/>
</div>
</ItemContainer>
<ItemContainer
title={
<div className="flex w-full items-center justify-between space-x-2">
<Text>SQL Snippet</Text>
<div className="cursor-pointer">
<CircleQuestion />
</div>
</div>
}>
<div className="relative h-full w-full" style={{ height: sqlHeight }}>
<AppCodeEditor
style={{ minHeight: sqlHeight }}
defaultValue={termSQL}
onChangeEditorHeight={(v) => {
setSqlHeight(clamp(v, 300, 800));
}}
onChange={(v) => {
onSetTermSQL.run(v);
}}
monacoEditorOptions={{
scrollbar: {
alwaysConsumeMouseWheel: false
}
}}
/>
</div>
</ItemContainer>
</div>
</div>
</>
);
};
const MoreDropdown: React.FC<{ termId: string }> = ({ termId }) => {

4
web/src/controllers/TermsListController/TermsListController.tsx
View File

@ -66,7 +66,7 @@ export const TermsListController: React.FC<{
});
return (
<AppPageLayoutContent>
<>
<BusterList
rows={rows}
columns={columns}
@ -90,7 +90,7 @@ export const TermsListController: React.FC<{
selectedRowKeys={selectedTermIds}
onSelectChange={setSelectedTermIds}
/>
</AppPageLayoutContent>
</>
);
});