Skip to content
Snippets Groups Projects
Unverified Commit ad8126e6 authored by Ryan Laurie's avatar Ryan Laurie Committed by GitHub
Browse files

add error boundaries to collections (#30587)

parent 622ee635
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/src/metabase/collections/containers/CollectionContent.jsx
+ 116
− 108
View file @ ad8126e6
......@@ -15,6 +15,7 @@ import { getIsBookmarked } from "metabase/collections/selectors";
import { getSetting } from "metabase/selectors/settings";
import { getIsNavbarOpen, openNavbar } from "metabase/redux/app";
import ErrorBoundary from "metabase/ErrorBoundary";
import BulkActions from "metabase/collections/components/BulkActions";
import CollectionEmptyState from "metabase/collections/components/CollectionEmptyState";
import Header from "metabase/collections/containers/CollectionHeader";
......@@ -235,116 +236,123 @@ function CollectionContent({
<CollectionRoot {...rootProps}>
{canUpload && <UploadOverlay isDragActive={isDragActive} />}
<CollectionMain>
<Header
collection={collection}
isAdmin={isAdmin}
isBookmarked={isBookmarked}
isPersonalCollectionChild={isPersonalCollectionChild(
collection,
collectionList,
)}
onCreateBookmark={handleCreateBookmark}
onDeleteBookmark={handleDeleteBookmark}
canUpload={canUpload}
/>
<PinnedItemOverview
databases={databases}
bookmarks={bookmarks}
createBookmark={createBookmark}
deleteBookmark={deleteBookmark}
items={pinnedItems}
collection={collection}
metadata={metadata}
onMove={handleMove}
onCopy={handleCopy}
onToggleSelected={toggleItem}
/>
<Search.ListLoader
query={unpinnedQuery}
loadingAndErrorWrapper={false}
keepListWhileLoading
wrapped
>
{({
list: unpinnedItems = [],
metadata = {},
loading: loadingUnpinnedItems,
}) => {
const hasPagination = metadata.total > PAGE_SIZE;
const unselected = [...pinnedItems, ...unpinnedItems].filter(
item => !getIsSelected(item),
);
const hasUnselected = unselected.length > 0;
const handleSelectAll = () => {
toggleAll(unselected);
};
const loading = loadingPinnedItems || loadingUnpinnedItems;
const isEmpty =
!loading && !hasPinnedItems && unpinnedItems.length === 0;
if (isEmpty && !loadingUnpinnedItems) {
<ErrorBoundary>
<Header
collection={collection}
isAdmin={isAdmin}
isBookmarked={isBookmarked}
isPersonalCollectionChild={isPersonalCollectionChild(
collection,
collectionList,
)}
onCreateBookmark={handleCreateBookmark}
onDeleteBookmark={handleDeleteBookmark}
canUpload={canUpload}
/>
</ErrorBoundary>
<ErrorBoundary>
<PinnedItemOverview
databases={databases}
bookmarks={bookmarks}
createBookmark={createBookmark}
deleteBookmark={deleteBookmark}
items={pinnedItems}
collection={collection}
metadata={metadata}
onMove={handleMove}
onCopy={handleCopy}
onToggleSelected={toggleItem}
/>
</ErrorBoundary>
<ErrorBoundary>
<Search.ListLoader
query={unpinnedQuery}
loadingAndErrorWrapper={false}
keepListWhileLoading
wrapped
>
{({
list: unpinnedItems = [],
metadata = {},
loading: loadingUnpinnedItems,
}) => {
const hasPagination = metadata.total > PAGE_SIZE;
const unselected = [
...pinnedItems,
...unpinnedItems,
].filter(item => !getIsSelected(item));
const hasUnselected = unselected.length > 0;
const handleSelectAll = () => {
toggleAll(unselected);
};
const loading = loadingPinnedItems || loadingUnpinnedItems;
const isEmpty =
!loading && !hasPinnedItems && unpinnedItems.length === 0;
if (isEmpty && !loadingUnpinnedItems) {
return (
<CollectionEmptyContent>
<CollectionEmptyState collectionId={collectionId} />
</CollectionEmptyContent>
);
}
return (
<CollectionEmptyContent>
<CollectionEmptyState collectionId={collectionId} />
</CollectionEmptyContent>
<CollectionTable data-testid="collection-table">
<ItemsTable
databases={databases}
bookmarks={bookmarks}
createBookmark={createBookmark}
deleteBookmark={deleteBookmark}
items={unpinnedItems}
collection={collection}
sortingOptions={unpinnedItemsSorting}
onSortingOptionsChange={
handleUnpinnedItemsSortingChange
}
selectedItems={selected}
hasUnselected={hasUnselected}
getIsSelected={getIsSelected}
onToggleSelected={toggleItem}
onDrop={clear}
onMove={handleMove}
onCopy={handleCopy}
onSelectAll={handleSelectAll}
onSelectNone={clear}
/>
<div className="flex justify-end my3">
{hasPagination && (
<PaginationControls
showTotal
page={page}
pageSize={PAGE_SIZE}
total={metadata.total}
itemsLength={unpinnedItems.length}
onNextPage={handleNextPage}
onPreviousPage={handlePreviousPage}
/>
)}
</div>
<BulkActions
selected={selected}
collection={collection}
onArchive={handleBulkArchive}
onMoveStart={handleBulkMoveStart}
onMove={handleBulkMove}
onCloseModal={handleCloseModal}
onCopy={clear}
selectedItems={selectedItems}
selectedAction={selectedAction}
isNavbarOpen={isNavbarOpen}
/>
</CollectionTable>
);
}
return (
<CollectionTable data-testid="collection-table">
<ItemsTable
databases={databases}
bookmarks={bookmarks}
createBookmark={createBookmark}
deleteBookmark={deleteBookmark}
items={unpinnedItems}
collection={collection}
sortingOptions={unpinnedItemsSorting}
onSortingOptionsChange={
handleUnpinnedItemsSortingChange
}
selectedItems={selected}
hasUnselected={hasUnselected}
getIsSelected={getIsSelected}
onToggleSelected={toggleItem}
onDrop={clear}
onMove={handleMove}
onCopy={handleCopy}
onSelectAll={handleSelectAll}
onSelectNone={clear}
/>
<div className="flex justify-end my3">
{hasPagination && (
<PaginationControls
showTotal
page={page}
pageSize={PAGE_SIZE}
total={metadata.total}
itemsLength={unpinnedItems.length}
onNextPage={handleNextPage}
onPreviousPage={handlePreviousPage}
/>
)}
</div>
<BulkActions
selected={selected}
collection={collection}
onArchive={handleBulkArchive}
onMoveStart={handleBulkMoveStart}
onMove={handleBulkMove}
onCloseModal={handleCloseModal}
onCopy={clear}
selectedItems={selectedItems}
selectedAction={selectedAction}
isNavbarOpen={isNavbarOpen}
/>
</CollectionTable>
);
}}
</Search.ListLoader>
}}
</Search.ListLoader>
</ErrorBoundary>
</CollectionMain>
<ItemsDragLayer
selectedItems={selected}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment