adding breadcrumbs

src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignmentHeader.tsx

@@ -1,7 +1,6 @@
-import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
+import { BreadCrumbs } from "@/components/BreadCrumbs";
 import { UpdateAssignmentName } from "./UpdateAssignmentName";
-import { getCourseUrl } from "@/services/urlUtils";
-import Link from "next/link";
+import { RightSingleChevron } from "@/components/icons/RightSingleChevron";
 
 export default function EditAssignmentHeader({
   moduleName,
@@ -10,22 +9,21 @@ export default function EditAssignmentHeader({
   assignmentName: string;
   moduleName: string;
 }) {
-  const { courseName } = useCourseContext();
   return (
-    <div className="py-1 flex flex-row justify-start gap-3">
-      <Link
-        className="btn"
-        href={getCourseUrl(courseName)}
-        shallow={true}
-        prefetch={true}
-      >
-        {courseName}
-      </Link>
-      <UpdateAssignmentName
-        assignmentName={assignmentName}
-        moduleName={moduleName}
-      />
-      <div className="my-auto">{assignmentName}</div>
+    <div className="py-1 flex flex-row justify-between">
+      <div className="flex flex-row">
+        <BreadCrumbs />
+        <span className="text-slate-500 cursor-default select-none my-auto">
+          <RightSingleChevron />
+        </span>
+        <div className="my-auto px-3">{assignmentName}</div>
+      </div>
+      <div  className="px-1">
+        <UpdateAssignmentName
+          assignmentName={assignmentName}
+          moduleName={moduleName}
+        />
+      </div>
     </div>
   );
 }

src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/UpdateAssignmentName.tsx

@@ -40,8 +40,7 @@ export function UpdateAssignmentName({
               if (name === assignmentName) closeModal();
 
               setIsLoading(true); // page refresh resets flag
-              try{
-
+              try {
                 await updateAssignment.mutateAsync({
                   assignment: assignment,
                   moduleName,
@@ -50,17 +49,28 @@ export function UpdateAssignmentName({
                   previousAssignmentName: assignmentName,
                   courseName,
                 });
-                
+
                 // update url (will trigger reload...)
                 router.replace(
                   getModuleItemUrl(courseName, moduleName, "assignment", name),
                   {}
                 );
-              }finally {
+              } finally {
                 setIsLoading(false);
               }
             }}
           >
+            <div
+              className="
+                text-yellow-300 
+                bg-yellow-950/30 
+                border-2 
+                rounded-lg 
+                border-yellow-800 
+                p-1 text-sm mb-2"
+            >
+              Warning: does not rename in Canvas
+            </div>
             <TextInput
               value={name}
               setValue={setName}