feat: create component under collection

Author: navinkarkera

src/editors/EditorContainer.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useParams } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
 import { getConfig } from '@edx/frontend-platform';
 
 import EditorPage from './EditorPage';
@@ -8,9 +8,9 @@ interface Props {
   /** Course ID or Library ID */
   learningContextId: string;
   /** Event handler for when user cancels out of the editor page */
-  onClose?: () => void;
+  onClose?: (prevPath?: string) => void;
   /** Event handler called after when user saves their changes using an editor */
-  afterSave?: () => (newData: Record<string, any>) => void;
+  afterSave?: (prevPath?: string) => (newData: Record<string, any>) => void;
 }
 
 const EditorContainer: React.FC<Props> = ({
@@ -19,6 +19,8 @@ const EditorContainer: React.FC<Props> = ({
   afterSave,
 }) => {
   const { blockType, blockId } = useParams();
+  const location = useLocation();
+
   if (blockType === undefined || blockId === undefined) {
     // istanbul ignore next - This shouldn't be possible; it's just here to satisfy the type checker.
     return <div>Error: missing URL parameters</div>;
@@ -41,8 +43,8 @@ const EditorContainer: React.FC<Props> = ({
         blockId={blockId}
         studioEndpointUrl={getConfig().STUDIO_BASE_URL}
         lmsEndpointUrl={getConfig().LMS_BASE_URL}
-        onClose={onClose}
-        returnFunction={afterSave}
+        onClose={onClose ? () => onClose(location.state?.from) : undefined}
+        returnFunction={afterSave ? () => afterSave(location.state?.from) : undefined}
       />
     </div>
   );

src/library-authoring/LibraryLayout.tsx

@@ -25,9 +25,14 @@ const LibraryLayout = () => {
   }
 
   const navigate = useNavigate();
-  const goBack = React.useCallback(() => {
-    // Go back to the library
-    navigate(`/library/${libraryId}`);
+
+  const goBack = React.useCallback((prevPath?: string) => {
+    if (prevPath) {
+      // Redirects back to the previous route like collection page or library page
+      navigate(prevPath);
+    } else {
+      navigate(`/library/${libraryId}`);
+    }
     // The following function is called only if changes are saved:
     return ({ id: usageKey }) => {
       // invalidate any queries that involve this XBlock:

src/library-authoring/add-content/AddContentContainer.tsx

@@ -16,7 +16,7 @@ import {
   ContentPaste,
 } from '@openedx/paragon/icons';
 import { v4 as uuid4 } from 'uuid';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 
 import { ToastContext } from '../../generic/toast-context';
 import { useCopyToClipboard } from '../../generic/clipboard';
@@ -62,7 +62,9 @@ const AddContentButton = ({ contentType, onCreateContent } : AddContentButtonPro
 const AddContentContainer = () => {
   const intl = useIntl();
   const navigate = useNavigate();
-  const { libraryId } = useParams();
+  const location = useLocation();
+  const currentPath = location.pathname;
+  const { libraryId, collectionId } = useParams();
   const createBlockMutation = useCreateLibraryBlock();
   const pasteClipboardMutation = useLibraryPasteClipboard();
   const { showToast } = useContext(ToastContext);
@@ -147,10 +149,13 @@ const AddContentContainer = () => {
           libraryId,
           blockType,
           definitionId: `${uuid4()}`,
+          collectionId,
         }).then((data) => {
           const editUrl = getEditUrl(data.id);
           if (editUrl) {
-            navigate(editUrl);
+            // Pass currentPath in state so that we can come back to
+            // current page on save or cancel
+            navigate(editUrl, { state: { from: currentPath } });
           } else {
             // We can't start editing this right away so just show a toast message:
             showToast(intl.formatMessage(messages.successCreateMessage));
@@ -168,7 +173,7 @@ const AddContentContainer = () => {
 
   return (
     <Stack direction="vertical">
-      <AddContentButton contentType={collectionButtonData} onCreateContent={onCreateContent} />
+      {!collectionId && <AddContentButton contentType={collectionButtonData} onCreateContent={onCreateContent} />}
       <hr className="w-100 bg-gray-500" />
       {contentTypes.map((contentType) => (
         <AddContentButton

src/library-authoring/data/api.ts

@@ -134,6 +134,7 @@ export interface CreateBlockDataRequest {
   libraryId: string;
   blockType: string;
   definitionId: string;
+  collectionId?: string;
 }
 
 export interface LibraryBlockMetadata {
@@ -197,13 +198,15 @@ export async function createLibraryBlock({
   libraryId,
   blockType,
   definitionId,
+  collectionId,
 }: CreateBlockDataRequest): Promise<LibraryBlockMetadata> {
   const client = getAuthenticatedHttpClient();
   const { data } = await client.post(
     getCreateLibraryBlockUrl(libraryId),
     {
       block_type: blockType,
       definition_id: definitionId,
+      collection_key: collectionId,
     },
   );
   return camelCaseObject(data);

src/library-authoring/data/apiHooks.ts

@@ -128,7 +128,7 @@ export const useCreateLibraryBlock = () => {
     mutationFn: createLibraryBlock,
     onSettled: (_data, _error, variables) => {
       queryClient.invalidateQueries({ queryKey: libraryAuthoringQueryKeys.contentLibrary(variables.libraryId) });
-      queryClient.invalidateQueries({ queryKey: ['content_search'] });
+      queryClient.invalidateQueries({ predicate: (query) => libraryQueryPredicate(query, variables.libraryId) });
     },
   });
 };