Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: collections page [FC-0062] #1281

Merged
Merged
Changes from 1 commit
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fix: lint issues
navinkarkera committed Sep 20, 2024
commit 1b3754c0faa8ff5b5556656e6cf48d5887599ed7
2 changes: 1 addition & 1 deletion src/library-authoring/LibraryAuthoringPage.scss
Original file line number Diff line number Diff line change
@@ -23,5 +23,5 @@

// Reduce breadcrumb bottom margin
ol.list-inline {
margin-bottom: 0rem;
margin-bottom: 0;
}
2 changes: 1 addition & 1 deletion src/library-authoring/LibraryAuthoringPage.tsx
Original file line number Diff line number Diff line change
@@ -168,7 +168,7 @@ const LibraryAuthoringPage = () => {
<Container size="xl" className="px-4 mt-4 mb-5 library-authoring-page">
<SearchContextProvider
extraFilter={`context_key = "${libraryId}"`}
fetchCollections={true}
fetchCollections
>
<SubHeader
title={<SubHeaderTitle title={libraryData.title} canEditLibrary={libraryData.canEditLibrary} />}
2 changes: 1 addition & 1 deletion src/library-authoring/LibraryRecentlyModified.tsx
Original file line number Diff line number Diff line change
@@ -81,7 +81,7 @@ const LibraryRecentlyModified: React.FC<{ libraryId: string }> = ({ libraryId })
<SearchContextProvider
extraFilter={`context_key = "${libraryId}"`}
overrideSearchSortOrder={SearchSortOption.RECENTLY_MODIFIED}
fetchCollections={true}
fetchCollections
>
<RecentlyModified libraryId={libraryId} />
</SearchContextProvider>
12 changes: 5 additions & 7 deletions src/library-authoring/collections/CollectionInfoHeader.tsx
Original file line number Diff line number Diff line change
@@ -4,12 +4,10 @@ interface CollectionInfoHeaderProps {
collection?: Collection;
}

const CollectionInfoHeader = ({ collection } : CollectionInfoHeaderProps) => {
return (
<div className="d-flex flex-wrap">
{collection?.title}
</div>
);
};
const CollectionInfoHeader = ({ collection } : CollectionInfoHeaderProps) => (
<div className="d-flex flex-wrap">
{collection?.title}
</div>
);

export default CollectionInfoHeader;
Original file line number Diff line number Diff line change
@@ -11,13 +11,15 @@ const LibraryCollectionComponents = ({ libraryId }: { libraryId: string }) => {
const { openAddContentSidebar } = useContext(LibraryContext);

if (componentCount === 0) {
return isFiltered ?
<NoSearchResults infoText={messages.noSearchResultsInCollection} />
: <NoComponents
infoText={messages.noComponentsInCollection}
addBtnText={messages.addComponentsInCollection}
handleBtnClick={openAddContentSidebar}
/>;
return isFiltered
? <NoSearchResults infoText={messages.noSearchResultsInCollection} />
: (
<NoComponents
infoText={messages.noComponentsInCollection}
addBtnText={messages.addComponentsInCollection}
handleBtnClick={openAddContentSidebar}
/>
);
}

return (
14 changes: 8 additions & 6 deletions src/library-authoring/collections/LibraryCollectionPage.tsx
Original file line number Diff line number Diff line change
@@ -131,7 +131,7 @@ const LibraryCollectionPage = () => {
// Adding empty breadcrumb to add the last `>` spacer.
{
label: '',
to: ``,
to: '',
},
];

@@ -151,11 +151,13 @@ const LibraryCollectionPage = () => {
fetchCollections={false}
Copy link
Contributor

@pomegranited pomegranited Sep 19, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't quite understand why we need this flag if we have to add useCollection to fetch the collection anyway?

I would have thought that those extraFilters you're sending to SearchContextProvider would ensure that the first result in the collection query (multisearch number 3) is the Collection we want to show here.

Ah sorry.. the second filter is collections.key=collectionId, and for this to work we'd need block_id = collectionId.. I guess it could be an "OR" statement, but I'm not sure that complexity is worth it here.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@pomegranited useCollection gets collection data from API while this flag controls fetching of all collections based on search. We only want to fetch blocks under this collection which is why we have update the extraFilter. As I mentioned in the comment above, there seems to be some issue with fetching single document from meilisearch.

But I do like the idea of using block_id field which is currently set to collection.key but adding content_key i.e. library.key into the filter we can get an individual document. If you agree, I can update it and remove the need to calling collections api to fetch single collection data.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh yes please -- it would be better if we could use meilisearch's data instead of hitting the backend, since we're doing that everywhere else.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@pomegranited Done. Had to include block_id to filterable attributes in edx-platform and update search manager to override queries.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Noted, and thanks for making that change @navinkarkera . We just need to remember to run reindex_search on the tagging sandbox when we deploy this change for testing.

>
<SubHeader
title={<SubHeaderTitle
title={collectionData.title}
canEditLibrary={libraryData.canEditLibrary}
infoClickHandler={openCollectionInfoSidebar}
/>}
title={(
<SubHeaderTitle
title={collectionData.title}
canEditLibrary={libraryData.canEditLibrary}
infoClickHandler={openCollectionInfoSidebar}
/>
)}
breadcrumbs={(
<Breadcrumb
ariaLabel={intl.formatMessage(messages.breadcrumbsAriaLabel)}
2 changes: 1 addition & 1 deletion src/library-authoring/collections/LibraryCollections.tsx
Original file line number Diff line number Diff line change
@@ -40,7 +40,7 @@ const LibraryCollections = ({ variant }: LibraryCollectionsProps) => {
variant === 'full',
);

if (totalCollectionHits === 1) {
if (totalCollectionHits === 0) {
return isFiltered ?
<NoSearchResults infoText={messages.noSearchResultsCollections} />
: <NoComponents
1 change: 0 additions & 1 deletion src/library-authoring/data/api.ts
Original file line number Diff line number Diff line change
@@ -320,4 +320,3 @@ export async function getCollection(libraryId: string, collectionId: string): Pr
const { data } = await getAuthenticatedHttpClient().get(getLibraryCollectionApiUrl(libraryId, collectionId));
return camelCaseObject(data);
}

1 change: 0 additions & 1 deletion src/library-authoring/data/apiHooks.ts
Original file line number Diff line number Diff line change
@@ -283,4 +283,3 @@ export const useCollection = (libraryId: string | undefined, collectionId: strin
enabled: collectionId !== undefined && libraryId !== undefined,
})
);

2 changes: 1 addition & 1 deletion src/search-manager/SearchKeywordsField.tsx
Original file line number Diff line number Diff line change
@@ -23,7 +23,7 @@ const SearchKeywordsField: React.FC<{ className?: string, placeholder?: string }
<SearchField.Input
autoFocus
placeholder={props.placeholder ? props.placeholder : intl.formatMessage(
messages.inputPlaceholder
messages.inputPlaceholder,
)}
/>
<SearchField.ClearButton />
9 changes: 6 additions & 3 deletions src/search-manager/data/api.ts
Original file line number Diff line number Diff line change
@@ -269,14 +269,17 @@ export async function fetchSearchResults({
}
navinkarkera marked this conversation as resolved.
Show resolved Hide resolved

const { results } = await client.multiSearch(({ queries }));
const componentHitLength = results[0].hits.length;
const collectionHitLength = fetchCollections ? results[2].hits.length : 0;
return {
hits: results[0].hits.map(formatSearchHit) as ContentHit[],
totalHits: results[0].totalHits ?? results[0].estimatedTotalHits ?? results[0].hits.length,
totalHits: results[0].totalHits ?? results[0].estimatedTotalHits ?? componentHitLength,
blockTypes: results[1].facetDistribution?.block_type ?? {},
problemTypes: results[1].facetDistribution?.['content.problem_types'] ?? {},
nextOffset: results[0].hits.length === limit || (fetchCollections && results[2].hits.length === limit) ? offset + limit : undefined,
nextOffset: componentHitLength === limit || collectionHitLength === limit ? offset + limit : undefined,
collectionHits: fetchCollections ? results[2].hits.map(formatSearchHit) as CollectionHit[] : [],
totalCollectionHits: fetchCollections ? results[2].totalHits ?? results[2].estimatedTotalHits ?? results[2].hits.length: 0,
totalCollectionHits: fetchCollections
? results[2].totalHits ?? results[2].estimatedTotalHits ?? collectionHitLength : 0,
};
}

2 changes: 1 addition & 1 deletion src/search-manager/data/apiHooks.ts
Original file line number Diff line number Diff line change
@@ -262,4 +262,4 @@ export const useGetSingleDocument = ({ client, indexName, id }: {
return fetchDocumentById({ client, indexName, id });
},
})
)
);