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,7 +8,7 @@ interface Props {
   /** Course ID or Library ID */
   learningContextId: string;
   /** Event handler sometimes called 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
    * and sometimes called when user cancels the editor, instead of onClose.
@@ -17,7 +17,7 @@ interface Props {
    * TODO: clean this up so there are separate onCancel and onSave callbacks,
    * and they are used consistently instead of this mess.
    */
-  returnFunction?: () => (newData: Record<string, any> | undefined) => void;
+  returnFunction?: (prevPath?: string) => (newData: Record<string, any> | undefined) => void;
 }
 
 const EditorContainer: React.FC<Props> = ({
@@ -26,6 +26,8 @@ const EditorContainer: React.FC<Props> = ({
   returnFunction,
 }) => {
   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>;
@@ -38,8 +40,8 @@ const EditorContainer: React.FC<Props> = ({
         blockId={blockId}
         studioEndpointUrl={getConfig().STUDIO_BASE_URL}
         lmsEndpointUrl={getConfig().LMS_BASE_URL}
-        onClose={onClose}
-        returnFunction={returnFunction}
+        onClose={onClose ? () => onClose(location.state?.from) : undefined}
+        returnFunction={returnFunction ? () => returnFunction(location.state?.from) : undefined}
       />
     </div>
   );

src/library-authoring/LibraryLayout.tsx

@@ -25,14 +25,20 @@ 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 {
+      // Go back to the library
+      navigate(`/library/${libraryId}`);
+    }
   }, []);
-  const returnFunction = React.useCallback(() => {
+
+  const returnFunction = React.useCallback((prevPath?: string) => {
     // When changes are cancelled, either onClose (goBack) or this returnFunction will be called.
     // When changes are saved, this returnFunction is called.
-    goBack();
+    goBack(prevPath);
     return (args) => {
       if (args === undefined) {
         return; // Do nothing - the user cancelled the changes

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) });
     },
   });
 };