Merge branch 'develop' into #1476-ZoeyGuo-credits

Author: Peyton-McKee

src/frontend/src/pages/CreateChangeRequestPage/CreateChangeRequestView.tsx

@@ -36,6 +36,7 @@ import NERFailButton from '../../components/NERFailButton';
 import NERSuccessButton from '../../components/NERSuccessButton';
 import { wbsNamePipe } from '../../utils/pipes';
 import PageLayout from '../../components/PageLayout';
+import { wbsNumComparator } from 'shared/src/validate-wbs';
 
 interface CreateChangeRequestViewProps {
   wbsNum: string;
@@ -103,6 +104,7 @@ const CreateChangeRequestsView: React.FC<CreateChangeRequestViewProps> = ({
   if (isError) return <ErrorPage message={error?.message} />;
 
   const projectOptions: { label: string; id: string }[] = [];
+
   const wbsDropdownOptions: { label: string; id: string }[] = [];
 
   projects.forEach((project: Project) => {
@@ -122,6 +124,8 @@ const CreateChangeRequestsView: React.FC<CreateChangeRequestViewProps> = ({
     });
   });
 
+  wbsDropdownOptions.sort((wbsNum1, wbsNum2) => wbsNumComparator(wbsNum1.id, wbsNum2.id));
+
   const wbsAutocompleteOnChange = (
     _event: React.SyntheticEvent<Element, Event>,
     value: { label: string; id: string } | null

src/frontend/src/pages/CreditsPage/CreditsPage.tsx

@@ -39,6 +39,7 @@ const CreditsPage: React.FC = () => {
     { name: 'Zack Roth', color: '#4a6741', sx: { px: 1, backgroundColor: '#E8D8CC', borderRadius: 2 } },
     { name: 'Megan Liu', color: '#3d609e' },
     { name: 'Peyton McKee', color: '#6a3941' },
+    { name: 'Tucker Gwertzman', color: '#25e6e2' },
     { name: 'Ryan Howe', color: '#3cce20' },
     { name: 'Ethan Szeto', color: '#404040' },
     { name: 'Adarsh Jayaram', color: '#ff0000' },
@@ -87,6 +88,7 @@ const CreditsPage: React.FC = () => {
     { name: 'Daniel Yu', color: '#bdc0c7' },
     { name: 'Jake Wu-Chen', color: '#bdc0c7' },
     { name: 'William Seward', color: '#e53774' },
+    { name: 'Quinn Louie', color: '#3281a8' },
     { name: 'Liu von Engelbrechten', color: '#2969f2' },
     {
       name: 'Zach Norman',
@@ -114,6 +116,7 @@ const CreditsPage: React.FC = () => {
     { name: 'Benjamin Zhu', color: '#ccccff' },
     { name: 'Stephanie Xu', color: '#ffcd42' },
     { name: 'Hareg Aderie', color: '#34b46c' },
+    { name: 'Motto Sereeyothin', color: '#000000' },
     { name: 'Raymond Tsai', color: '#66cdaa' },
     { name: 'Arinjay Singh', color: '#7bb5dc' },
     { name: 'Aarav Shyamkumar', color: '#FF0000' },
@@ -130,10 +133,15 @@ const CreditsPage: React.FC = () => {
       }
     },
     { name: 'Kevin Polackal', color: '#800080' },
+    { name: 'Sindhu Balamurugan', color: '#c170fa' },
     { name: 'Lily Shiomitsu', color: '#008080' },
     { name: 'Kevin Yang', color: '#0000FF' },
     { name: 'Qihong Wu', color: '#87CEEB' },
-    { name: 'Zoey Guo', color: '#E34949' }
+    { name: 'Zoey Guo', color: '#E34949' },
+    { name: 'Neel Raut', color: '#023665' },
+    { name: 'Qihong Wu', color: '#87CEEB' },
+    { name: 'Megan Lai', color: '#52B2BF' },
+    { name: 'Eric Sun', color: '#FCCAED' }
   ];
 
   const snark = ['Add your name!', "Shouldn't you do it yourself?", 'Seriously', 'go', 'do', 'it'];

src/frontend/src/pages/SettingsPage/UserSecureSettings/UserSecureSettings.tsx

@@ -11,7 +11,7 @@ import PageBlock from '../../../layouts/PageBlock';
 import ErrorPage from '../../ErrorPage';
 import NERSuccessButton from '../../../components/NERSuccessButton';
 import NERFailButton from '../../../components/NERFailButton';
-import { Grid, IconButton } from '@mui/material';
+import { Grid, IconButton, Box } from '@mui/material';
 import { useToast } from '../../../hooks/toasts.hooks';
 import UserSecureSettingsView from './UserSecureSettingsView';
 import UserSecureSettingsEdit from './UserSecureSettingsEdit';
@@ -71,12 +71,17 @@ const UserSecureSettings: React.FC<SecureSettingsProps> = ({ currentSettings })
             <EditIcon fontSize="small" />
           </IconButton>
         ) : (
-          <div className="d-flex flex-row">
+          <Box
+            className="d-flex flex-row"
+            sx={{
+              display: { xs: 'none', sm: 'flex' }
+            }}
+          >
             <NERFailButton onClick={() => setEdit(false)}>Cancel</NERFailButton>
             <NERSuccessButton sx={{ ml: 2 }} type="submit" form="update-user-settings">
               Save
             </NERSuccessButton>
-          </div>
+          </Box>
         )
       }
     >
@@ -87,6 +92,19 @@ const UserSecureSettings: React.FC<SecureSettingsProps> = ({ currentSettings })
           <UserSecureSettingsEdit currentSettings={currentSettings} onSubmit={handleConfirm} />
         )}
       </Grid>
+      {edit && (
+        <Box
+          sx={{
+            display: { xs: 'flex', sm: 'none' },
+            marginTop: '20px'
+          }}
+        >
+          <NERFailButton onClick={() => setEdit(false)}>Cancel</NERFailButton>
+          <NERSuccessButton sx={{ ml: 2 }} type="submit" form="update-user-settings">
+            Save
+          </NERSuccessButton>
+        </Box>
+      )}
     </PageBlock>
   );
 };

src/frontend/src/pages/SettingsPage/UserSettings/UserSettings.tsx

@@ -14,7 +14,7 @@ import UserSettingsEdit from './UserSettingsEdit';
 import UserSettingsView from './UserSettingsView';
 import NERSuccessButton from '../../../components/NERSuccessButton';
 import NERFailButton from '../../../components/NERFailButton';
-import { Grid, IconButton } from '@mui/material';
+import { Grid, IconButton, Box } from '@mui/material';
 import { useToast } from '../../../hooks/toasts.hooks';
 
 interface UserSettingsProps {
@@ -63,12 +63,16 @@ const UserSettings: React.FC<UserSettingsProps> = ({ currentSettings }) => {
             <EditIcon fontSize="small" />
           </IconButton>
         ) : (
-          <div className="d-flex flex-row">
+          <Box
+            sx={{
+              display: { xs: 'none', sm: 'flex' }
+            }}
+          >
             <NERFailButton onClick={() => setEdit(false)}>Cancel</NERFailButton>
             <NERSuccessButton sx={{ ml: 2 }} type="submit" form="update-user-settings">
               Save
             </NERSuccessButton>
-          </div>
+          </Box>
         )
       }
     >
@@ -79,6 +83,20 @@ const UserSettings: React.FC<UserSettingsProps> = ({ currentSettings }) => {
           <UserSettingsEdit currentSettings={currentSettings} onSubmit={handleConfirm} />
         )}
       </Grid>
+      {edit && (
+        <Box
+          className="d-flex flex-col"
+          sx={{
+            display: { xs: 'flex', sm: 'none' },
+            marginTop: '20px'
+          }}
+        >
+          <NERFailButton onClick={() => setEdit(false)}>Cancel</NERFailButton>
+          <NERSuccessButton sx={{ ml: 2 }} type="submit" form="update-user-settings">
+            Save
+          </NERSuccessButton>
+        </Box>
+      )}
     </PageBlock>
   );
 };

src/frontend/src/tests/pages/SettingsPage/UserSettings/UserSettings.test.tsx

@@ -97,6 +97,6 @@ describe('user settings component', () => {
     mockUserSettingsHook(false, false, exampleUserSettingsLight);
     renderComponent();
     fireEvent.click(screen.getByRole('button'));
-    expect(screen.queryAllByRole('button').map((e) => e.innerHTML)).toStrictEqual(['Cancel', 'Save']);
+    expect(screen.queryAllByRole('button').map((e) => e.innerHTML)).toStrictEqual(['Cancel', 'Save', 'Cancel', 'Save']);
   });
 });

src/frontend/src/tests/utils/validate-wbs.test.ts

@@ -0,0 +1,12 @@
+import { wbsNumComparator } from 'shared';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('wbsNumComparator', () => {
+  it('should correctly compare two WBS Numbers', () => {
+    expect(wbsNumComparator('1.1.3', '1.3.4')).toBe(-1);
+    expect(wbsNumComparator('1.2.1', '1.2.1')).toBe(0);
+    expect(wbsNumComparator('1.3.4', '1.1.3')).toBe(1);
+    expect(wbsNumComparator('2.3.4', '1.1.3')).toBe(1);
+    expect(wbsNumComparator('1.3.4', '2.1.3')).toBe(-1);
+  });
+});

src/shared/src/validate-wbs.ts

@@ -5,6 +5,27 @@
 
 import { WbsNumber } from './types/project-types';
 
+/**
+ * Compares two wbs numbers in ascending order
+ *
+ * @param wbsNum1 WBS number to compare
+ * @param wbsNum2 WBS number to compare
+ */
+export const wbsNumComparator = (wbsNum1: string, wbsNum2: string) => {
+  const wbsParts1 = wbsNum1.split('.').map(Number);
+  const wbsParts2 = wbsNum2.split('.').map(Number);
+
+  for (let i = 0; i < wbsParts1.length; i++) {
+    if (wbsParts1[i] < wbsParts2[i]) {
+      return -1;
+    } else if (wbsParts1[i] > wbsParts2[i]) {
+      return 1;
+    }
+  }
+
+  return 0;
+};
+
 /**
  * Ensure the provided wbsNum is a valid Work Breakdown Structure Number
  *