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 ( return (
<div <div
className={cn( 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', scrollable && 'overflow-y-auto',
className 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 Selector = scrollable ? ScrollArea : 'main';
const ChildSelector = scrollable ? 'main' : React.Fragment; const ChildSelector = scrollable ? 'main' : React.Fragment;
console.log('scrollable', scrollable);
return ( return (
<Selector className={cn('bg-page-background app-content h-full max-h-[100%] p-0', className)}> <Selector className={cn('bg-page-background app-content h-full max-h-[100%] p-0', className)}>
<ChildSelector>{children}</ChildSelector> <ChildSelector>{children}</ChildSelector>

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

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

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

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

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

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

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

@ -64,92 +64,84 @@ export const TermIndividualContent: React.FC<{
}, [term?.name, term?.definition]); }, [term?.name, term?.definition]);
return ( return (
<AppPageLayoutContent className="overflow-auto p-8"> <>
{loadingSelectedTerm ? ( <div className="flex flex-col">
<SkeletonLoader /> <div className="flex justify-between space-x-3">
) : ( <div className="mb-5 flex flex-col space-y-0.5">
<div className="flex flex-col"> <div className={'overflow-hidden'}>
<div className="flex justify-between space-x-3"> <EditableTitle
<div className="mb-5 flex flex-col space-y-0.5"> onEdit={setEditingTermName}
<div className={'overflow-hidden'}> onChange={(v) => {
<EditableTitle onSetTermName(v);
onEdit={setEditingTermName} }}
onChange={(v) => { level={4}>
onSetTermName(v); {termName}
}} </EditableTitle>
level={4}>
{termName}
</EditableTitle>
</div>
<div>
<Text variant="secondary">
Last updated:{' '}
{formatDate({
date: term?.updated_at!,
format: 'lll'
})}
</Text>
</div>
</div> </div>
<div> <div>
<MoreDropdown termId={termId} /> <Text variant="secondary">
Last updated:{' '}
{formatDate({
date: term?.updated_at!,
format: 'lll'
})}
</Text>
</div> </div>
</div> </div>
<div className="flex flex-col space-y-4"> <div>
<ItemContainer title="Definition"> <MoreDropdown termId={termId} />
<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>
</div> </div>
)}
</AppPageLayoutContent>
);
};
const SkeletonLoader: React.FC = () => { <div className="flex flex-col space-y-4">
return <div className="p-4">{/* <Skeleton /> */}</div>; <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 }) => { 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 ( return (
<AppPageLayoutContent> <>
<BusterList <BusterList
rows={rows} rows={rows}
columns={columns} columns={columns}
@ -90,7 +90,7 @@ export const TermsListController: React.FC<{
selectedRowKeys={selectedTermIds} selectedRowKeys={selectedTermIds}
onSelectChange={setSelectedTermIds} onSelectChange={setSelectedTermIds}
/> />
</AppPageLayoutContent> </>
); );
}); });