feat: course-catalog-injected-popup (#98)

* some work

* some work on course popup

update the stories and create the header component

* use chip component in header

* complete CourseHeaderAndActions Component

added course buttons, using proper subcomponents now.

* Change test course to 314

* Add rmp callback

* some unocss updates

* add course button onclick handlers

* add todo for calendar button

* Rename CoursePopup

Old one to "Old", remove "2" from new one

* description stuff done

* Modify story to use proper course info

* Add Grade Distribution Stuff

* Minor tweaks

change style in header

* Add TODO

replace current grade colors with a tailwind palette

* Fix syllabi url

Remove unused variable and unnecessary args to url

* Bunch of renaming

* Kinda complete the handlers

* change grade distribution colors to match updated figma

* change from reducer pattern to state variables, remove chartData from state

* add additional story

* disabled add when course is not open

* use array fill

* Some changes with the instructor names

* trying to get the CES stuff to work

* CES button is working

* remove a todo

* add actual color for dminus

* fix description, start no distribution state

* post merge fixes

* small fixes

* fix: import as type

* fix: some better typescript stuff i think

* fix: manifest.ts

* fix: pr feedback

* Apply suggestions from code review

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx

@@ -22,7 +22,6 @@ const DataStatus = {
     NOT_FOUND: 'NOT_FOUND',
     ERROR: 'ERROR',
 } as const;
-
 type DataStatusType = (typeof DataStatus)[keyof typeof DataStatus];
 
 const GRADE_COLORS = {
@@ -61,7 +60,7 @@ const GradeDistribution: React.FC<GradeDistributionProps> = ({ course }) => {
                 color: GRADE_COLORS[grade as LetterGrade],
             }));
         }
-        return [];
+        return Array(12).fill(0);
     }, [distributions, semester, status]);
 
     React.useEffect(() => {
@@ -137,8 +136,21 @@ const GradeDistribution: React.FC<GradeDistributionProps> = ({ course }) => {
 
     return (
         <div className='pb-[25px] pt-[12px]'>
+            {/* TODO (achadaga): again would be nice to have an updated spinner */}
             {status === DataStatus.LOADING && <Spinner />}
-            {status === DataStatus.NOT_FOUND && <Text variant='p'>No grade distribution data found</Text>}
+            {status === DataStatus.NOT_FOUND && (
+                <HighchartsReact
+                    ref={ref}
+                    highcharts={Highcharts}
+                    options={{
+                        ...chartOptions,
+                        title: {
+                            text: `There is currently no grade distribution data for ${course.department} ${course.number}`,
+                        },
+                        tooltip: { enabled: false },
+                    }}
+                />
+            )}
             {status === DataStatus.ERROR && <Text variant='p'>Error fetching grade distribution data</Text>}
             {status === DataStatus.FOUND && (
                 <>