Longhorn-Developers · doprz · Oct 15, 2024 · Oct 15, 2024 · Oct 15, 2024 · Oct 15, 2024
diff --git a/.gitignore b/.gitignore
@@ -210,3 +210,4 @@ sketch
 # Custom rules (everything added below won't be overriden by 'Generate .gitignore File' if you use 'Update' option)
 package-lock.json
 storybook-static/
+package/
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,35 @@
+// (Thanks go to https://github.com/pnd280/complexity/blob/alpha/gulpfile.js)
+
+import fs from 'fs';
+import gulp from 'gulp';
+import gulpZip from 'gulp-zip';
+import { createRequire } from 'module';
+
+function zip() {
+    const require = createRequire(import.meta.url);
+    const manifest = require('./package.json');
+    const zipFileName = `${manifest.name.replaceAll(' ', '-')}-${manifest.version}.zip`;
+
+    return gulp.src('dist/**').pipe(gulpZip(zipFileName)).pipe(gulp.dest('package'));
+}
+
+// Temp fix for CSP on Chrome 130
+// Manually remove them because there is no option to disable use_dynamic_url on @crxjs/vite-plugin
+function forceDisableUseDynamicUrl(done) {
+    const require = createRequire(import.meta.url);
+    const manifest = require('./dist/manifest.json');
+
+    manifest.web_accessible_resources.forEach(resource => {
+        delete resource.use_dynamic_url;
+    });
+
+    if (!fs.existsSync('./dist/manifest.json')) {
+        return done();
+    }
+
+    fs.writeFileSync('./dist/manifest.json', JSON.stringify(manifest, null, 2));
+
+    done();
+}
+
+export { forceDisableUseDynamicUrl, zip };
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "ut-registration-plus",
     "displayName": "UT Registration Plus",
-    "version": "2.0.0-beta4",
+    "version": "2.0.0",
     "description": "UT Registration Plus is a Chrome extension that allows students to easily register for classes.",
     "private": true,
     "homepage": "https://github.com/Longhorn-Developers/UT-Registration-Plus",
@@ -10,6 +10,7 @@
         "dev": "vite",
         "build": "tsc && vite build",
         "build:watch": "NODE_ENV='development' vite build --mode development -w",
+        "zip": "pnpm build && pnpm gulp zip",
         "prettier": "prettier src --check",
         "prettier:fix": "prettier src --write",
         "lint": "eslint src --ext ts,tsx --report-unused-disable-directives",
@@ -74,6 +75,8 @@
         "@svgr/plugin-jsx": "^8.1.0",
         "@types/chrome": "^0.0.273",
         "@types/conventional-changelog": "^3.1.5",
+        "@types/gulp": "^4.0.17",
+        "@types/gulp-zip": "^4.0.4",
         "@types/node": "^22.7.5",
         "@types/prompts": "^2.4.9",
         "@types/react": "^18.3.11",
@@ -94,6 +97,7 @@
         "@vitejs/plugin-react-swc": "^3.7.1",
         "@vitest/coverage-v8": "^2.1.2",
         "@vitest/ui": "^2.1.2",
+        "chalk": "^5.3.0",
         "chromatic": "^11.12.5",
         "cssnano": "^7.0.6",
         "cssnano-preset-advanced": "^7.0.6",
@@ -115,6 +119,8 @@
         "eslint-plugin-react-refresh": "^0.4.12",
         "eslint-plugin-simple-import-sort": "^12.1.1",
         "eslint-plugin-storybook": "^0.9.0",
+        "gulp": "^5.0.0",
+        "gulp-zip": "^6.0.0",
         "path": "^0.12.7",
         "postcss": "^8.4.47",
         "prettier": "^3.3.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/pages/background/background.ts b/src/pages/background/background.ts
@@ -31,12 +31,10 @@ chrome.runtime.onInstalled.addListener(details => {
     }
 });
 
+// migration/login logic
 chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
     console.log(changeInfo);
     if (changeInfo.url === 'https://utdirect.utexas.edu/apps/registrar/course_schedule/utrp_login/') {
-        console.log('UTDirect detected');
-        // close the tab, open popup
-
         function openPopupAction() {
             chrome.tabs.onActivated.removeListener(openPopupAction);
             chrome.action.openPopup();

diff --git a/src/pages/options/index.html b/src/pages/options/index.html
@@ -7,7 +7,7 @@
         <title>UTRP Options</title>
     </head>
 
-    <body>
+    <body style="min-height: 100vh; height: 0; margin: 0">
         <noscript>You need to enable JavaScript to run this app.</noscript>
         <div id="root"></div>
 

diff --git a/src/views/components/PopupMain.tsx b/src/views/components/PopupMain.tsx
@@ -9,14 +9,12 @@ import List from '@views/components/common/List';
 import Text from '@views/components/common/Text/Text';
 import useSchedules, { getActiveSchedule, replaceSchedule, switchSchedule } from '@views/hooks/useSchedules';
 import { getUpdatedAtDateTimeString } from '@views/lib/getUpdatedAtDateTimeString';
-import clsx from 'clsx';
 import useKC_DABR_WASM from 'kc-dabr-wasm';
 import React, { useEffect, useState } from 'react';
 
 import AddSchedule from '~icons/material-symbols/add';
 import CalendarIcon from '~icons/material-symbols/calendar-month';
 import Feedback from '~icons/material-symbols/flag';
-import RefreshIcon from '~icons/material-symbols/refresh';
 import SettingsIcon from '~icons/material-symbols/settings';
 
 import { Button } from './common/Button';
@@ -182,9 +180,9 @@ export default function PopupMain(): JSX.Element {
                 {enableDataRefreshing && (
                     <div className='inline-flex items-center self-center gap-1'>
                         <Text variant='mini' className='text-ut-gray !font-normal'>
-                            DATA LAST UPDATED: {getUpdatedAtDateTimeString(activeSchedule.updatedAt)}
+                            LAST UPDATED: {getUpdatedAtDateTimeString(activeSchedule.updatedAt)}
                         </Text>
-                        <button
+                        {/* <button
                             className='h-4 w-4 bg-transparent p-0 btn'
                             onClick={() => {
                                 setIsRefreshing(true);
@@ -195,7 +193,7 @@ export default function PopupMain(): JSX.Element {
                                     'animate-spin': isRefreshing,
                                 })}
                             />
-                        </button>
+                        </button> */}
                     </div>
                 )}
             </div>

diff --git a/src/views/components/ReportIssueMain.tsx b/src/views/components/ReportIssueMain.tsx
@@ -6,7 +6,12 @@ import React, { useState } from 'react';
 import { Button } from './common/Button';
 import Text from './common/Text/Text';
 
-const ReportIssueMain: React.FC = () => {
+/**
+ * ReportIssueMain component renders a feedback form for users to submit their email and feedback.
+ *
+ * @returns The rendered component.
+ */
+export default function ReportIssueMain(): JSX.Element {
     const [email, setEmail] = useState('');
     const [feedback, setFeedback] = useState('');
     const [isSubmitted, setIsSubmitted] = useState(false);
@@ -112,6 +117,4 @@ const ReportIssueMain: React.FC = () => {
             </form>
         </div>
     );
-};
-
-export default ReportIssueMain;
+}
diff --git a/src/views/components/calendar/CalenderHeader.tsx b/src/views/components/calendar/CalenderHeader.tsx
@@ -11,7 +11,7 @@ import { openTabFromContentScript } from '@views/lib/openNewTabFromContentScript
 import React, { useEffect, useState } from 'react';
 
 import MenuIcon from '~icons/material-symbols/menu';
-import RefreshIcon from '~icons/material-symbols/refresh';
+// import RefreshIcon from '~icons/material-symbols/refresh';
 import SettingsIcon from '~icons/material-symbols/settings';
 
 /**
@@ -79,11 +79,11 @@ export default function CalendarHeader({ onSidebarToggle }: CalendarHeaderProps)
                 {enableDataRefreshing && (
                     <div className='flex items-center gap-1 screenshot:hidden'>
                         <Text variant='mini' className='text-nowrap text-ut-gray font-normal!'>
-                            DATA LAST UPDATED: {getUpdatedAtDateTimeString(activeSchedule.updatedAt)}
+                            LAST UPDATED: {getUpdatedAtDateTimeString(activeSchedule.updatedAt)}
                         </Text>
-                        <button className='inline-block h-4 w-4 bg-transparent p-0 btn'>
+                        {/* <button className='inline-block h-4 w-4 bg-transparent p-0 btn'>
                             <RefreshIcon className='h-4 w-4 animate-duration-800 text-ut-black' />
-                        </button>
+                        </button> */}
                     </div>
                 )}
             </div>

diff --git a/src/views/components/common/List.tsx b/src/views/components/common/List.tsx
@@ -79,6 +79,9 @@ function List<T>({ draggables, itemKey, children, onReordered, gap }: ListProps<
 
     useEffect(() => {
         setItems(wrap(draggables, itemKey));
+
+        // This is on purpose
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [draggables]);
 
     const onDragEnd: OnDragEndResponder = useCallback(
@@ -92,6 +95,9 @@ function List<T>({ draggables, itemKey, children, onReordered, gap }: ListProps<
             setItems(reordered);
             onReordered(reordered.map(item => item.content));
         },
+
+        // This is on purpose
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         [items]
     );
 

diff --git a/src/views/components/common/MigrationDialog.tsx b/src/views/components/common/MigrationDialog.tsx
@@ -39,6 +39,9 @@ function MigrationButtons({ close }: { close: () => void }): JSX.Element {
         };
 
         handleMigration();
+
+        // This is on purpose
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [processState]);
 
     return (
@@ -81,6 +84,15 @@ function MigrationButtons({ close }: { close: () => void }): JSX.Element {
     );
 }
 
+/**
+ * Custom hook that provides a function to show a migration dialog.
+ *
+ * The dialog prompts the user to migrate their saved schedules if there are any courses
+ * available to migrate. If there are no courses to migrate, it informs the user that
+ * migration has already been completed.
+ *
+ * @returns A function that, when called, checks for courses to migrate and shows the appropriate dialog.
+ */
 export function useMigrationDialog() {
     const showDialog = usePrompt();
 
@@ -114,6 +126,19 @@ export function useMigrationDialog() {
     };
 }
 
+/**
+ * MigrationDialog component.
+ *
+ * This component is responsible for checking if a migration has already been attempted
+ * and if there are any courses from UTRPv1 that need to be migrated. If migration is needed,
+ * it triggers the migration dialog.
+ *
+ * @returns An empty fragment.
+ *
+ * @remarks
+ * The component uses the `useMigrationDialog` hook to show the migration dialog and the
+ * `useEffect` hook to perform the migration check on component mount.
+ */
 export function MigrationDialog(): JSX.Element {
     const showMigrationDialog = useMigrationDialog();
 
@@ -126,6 +151,9 @@ export function MigrationDialog(): JSX.Element {
         };
 
         checkMigration();
+
+        // This is on purpose
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     // (not actually a useless fragment)

diff --git a/src/views/components/settings/Settings.tsx b/src/views/components/settings/Settings.tsx
@@ -6,7 +6,7 @@ import { initSettings, OptionsStore } from '@shared/storage/OptionsStore';
 import { Button } from '@views/components/common/Button';
 import { usePrompt } from '@views/components/common/DialogProvider/DialogProvider';
 import Divider from '@views/components/common/Divider';
-import { SmallLogo } from '@views/components/common/LogoIcon';
+import { LargeLogo } from '@views/components/common/LogoIcon';
 // import PopupCourseBlock from '@views/components/common/PopupCourseBlock';
 import SwitchButton from '@views/components/common/SwitchButton';
 import Text from '@views/components/common/Text/Text';
@@ -240,14 +240,14 @@ export default function Settings(): JSX.Element {
     }
 
     return (
-        <div className='min-w-xl bg-white'>
-            <header className='flex items-center justify-between border-b p-6'>
-                <div className='flex items-center'>
-                    <SmallLogo className='pr-4' />
-                    <Divider size='2rem' orientation='vertical' />
-                    <h1 className='pl-4 text-xl text-ut-burntorange font-bold'>UTRP SETTINGS & CREDITS PAGE</h1>
-                </div>
-                <div className='flex space-x-4'>
+        <div>
+            <header className='flex items-center gap-5 overflow-x-auto overflow-y-hidden border-b border-ut-offwhite px-7 py-4 md:overflow-x-hidden'>
+                <LargeLogo />
+                <Divider className='mx-2 self-center md:mx-4' size='2.5rem' orientation='vertical' />
+                <Text variant='h1' className='flex-1 text-ut-burntorange'>
+                    UTRP SETTINGS & CREDITS PAGE
+                </Text>
+                <div className='hidden flex-row items-center justify-end gap-6 screenshot:hidden lg:flex'>
                     <Button variant='single' color='theme-black' onClick={handleChangelogOnClick}>
                         <IconoirGitFork className='h-6 w-6 text-ut-gray' />
                         <Text variant='small' className='text-ut-gray font-normal'>
@@ -408,7 +408,7 @@ export default function Settings(): JSX.Element {
                                 <Preview>
                                     <div className='inline-flex items-center self-center gap-1'>
                                         <Text variant='small' className='text-ut-gray !font-normal'>
-                                            DATA LAST UPDATED: {getUpdatedAtDateTimeString(activeSchedule.updatedAt)}
+                                            LAST UPDATED: {getUpdatedAtDateTimeString(activeSchedule.updatedAt)}
                                         </Text>
                                     </div>
                                     <Text

diff --git a/src/views/contexts/DialogContext.ts b/src/views/contexts/DialogContext.ts
@@ -16,6 +16,9 @@ export interface DialogInfo {
     onClose?: () => void;
 }
 
+/**
+ * Options for configuring the behavior of a dialog.
+ */
 export interface DialogOptions {
     /**
      * Whether to show the dialog immediately.

diff --git a/src/views/contexts/SentryContext.tsx b/src/views/contexts/SentryContext.tsx
@@ -84,6 +84,9 @@ export default function SentryProvider({
             client.init();
         }
         return [scope, client];
+
+        // This is on purpose to only run once
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     return (

diff --git a/src/views/hooks/useChangelog.tsx b/src/views/hooks/useChangelog.tsx
@@ -5,6 +5,8 @@ import React from 'react';
 
 import MaterialSymbolsClose from '~icons/material-symbols/close';
 
+import { Button } from '../components/common/Button';
+
 /**
  * Custom hook that provides a function to display a changelog dialog.
  *
@@ -16,16 +18,13 @@ export default function useChangelog(): () => void {
     const handleOnClick = () => {
         showDialog(close => ({
             title: (
-                <div className='flex items-center justify-between p-4'>
+                <div className='sticky top-0 flex items-center justify-between bg-white p-4'>
                     <Text variant='h1' className='text-theme-black'>
                         Changelog
                     </Text>
-                    <button
-                        onClick={close}
-                        className='text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
-                    >
-                        <MaterialSymbolsClose className='text-2xl' />
-                    </button>
+                    <Button variant='single' onClick={close} color='theme-black' className='p-1 text-gray-700'>
+                        <MaterialSymbolsClose className='h-7 w-7' />
+                    </Button>
                 </div>
             ),
             description: <ChangelogPopup />,

diff --git a/tsconfig.json b/tsconfig.json
@@ -41,6 +41,7 @@
         "postcss.config.cjs",
         ".storybook",
         "unocss.config.ts",
+        "gulpfile.js",
         "@types"
     ]
 }