uhawaii-system-its-ti-iam · JorWo · Oct 17, 2024 · Sep 19, 2024
diff --git a/ui/package.json b/ui/package.json
@@ -13,6 +13,7 @@
         "test:watch": "jest --watch"
     },
     "dependencies": {
+        "@fortawesome/free-regular-svg-icons": "^6.6.0",
         "@fortawesome/free-solid-svg-icons": "^6.6.0",
         "@fortawesome/react-fontawesome": "^0.2.2",
         "@hookform/resolvers": "^3.3.4",

diff --git a/ui/src/app/(home)/_components/after-login.tsx b/ui/src/app/(home)/_components/after-login.tsx
@@ -1,6 +1,6 @@
 import Role from '@/access/role';
-import Image from 'next/image';
-import { KeyRound } from 'lucide-react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {faKey, faIdCard, faWrench, faUser} from '@fortawesome/free-solid-svg-icons';
 import Link from 'next/link';
 import { Button } from '@/components/ui/button';
 import { getNumberOfGroupings, getNumberOfMemberships } from '@/lib/fetchers';
@@ -26,40 +26,34 @@ const AfterLogin = async () => {
                 'Manage the list of Administrators for this service.' +
                 ' Search for and manage any grouping on behalf of the owner.',
             href: '/admin',
-            icon: {
-                alt: 'key-solid',
-                src: '/uhgroupings/key-solid.svg',
-                width: 48,
-                height: 48
-            },
-            role: Role.ADMIN
+            icon: faKey,
+            width: 48,
+            height: 48,
+            role: Role.ADMIN,
+            ariaLabel: 'key'
         },
         {
             title: 'Memberships',
             description: 'View and manage my memberships. Search for new groupings to join as a member.',
             href: '/memberships',
-            icon: {
-                src: '/uhgroupings/id-card-solid.svg',
-                alt: 'id-card',
-                width: 54,
-                height: 48
-            },
+            icon: faIdCard,
+            width: 54,
+            height: 48,
             number: numberOfMemberships,
-            role: Role.UH
+            role: Role.UH,
+            ariaLabel: 'id-card'
         },
         {
             title: 'Groupings',
             description:
                 'Review members, manage Include and Exclude lists, ' + 'configure preferences, and export members.',
             href: '/groupings',
-            icon: {
-                alt: 'wrench-solid',
-                src: '/uhgroupings/wrench-solid.svg',
-                width: 48,
-                height: 48
-            },
+            icon: faWrench,
+            width: 48,
+            height: 48,
             number: numberOfGroupings,
-            role: Role.OWNER
+            role: Role.OWNER,
+            ariaLabel: 'wrench'
         }
     ];
 
@@ -73,12 +67,12 @@ const AfterLogin = async () => {
                                 className="flex justify-center items-center rounded-full
                             h-[100px] w-[100px] bg-white mx-auto relative lg:ml-0"
                             >
-                                <Image src="/uhgroupings/user-solid.svg" alt="user-solid" width={56} height={64} />
+                                <FontAwesomeIcon className="w-14 h-16" aria-label="user" icon={faUser} />
                                 <div
                                     className="bg-blue-background rounded-full flex justify-center
                                     items-center h-[30px] w-[30px] absolute left-3 bottom-0 ml-16"
                                 >
-                                    <KeyRound className="fill-white stroke-none p-0.5" aria-label="key-round" />
+                                    <FontAwesomeIcon className="text-white stroke-none p-0.5" aria-label="key-round" icon={faKey} />
                                 </div>
                             </div>
                         </div>
@@ -104,13 +98,7 @@ const AfterLogin = async () => {
                         <div key={index} className="flex flex-col justify-between">
                             <div>
                                 <div className="flex items-center mb-1">
-                                    <Image
-                                        alt={pageInfoItem.icon.alt}
-                                        src={pageInfoItem.icon.src}
-                                        width={pageInfoItem.icon.width}
-                                        height={pageInfoItem.icon.height}
-                                        className={`mr-5 mb-4 max-w-${pageInfoItem.icon.width} h-auto`}
-                                    />
+                                    <FontAwesomeIcon icon={pageInfoItem.icon} style={{ width: `${pageInfoItem.width}px`, height: `${pageInfoItem.height}px` }} className="mr-5 mb-4 max-w-${pageInfoItem.icon.width} h-auto" aria-label={pageInfoItem.ariaLabel} />
                                     {pageInfoItem.number !== null && (
                                         <span className="text-[2.5rem] text-text-color">{pageInfoItem.number}</span>
                                     )}

diff --git a/ui/src/app/(home)/_components/before-login.tsx b/ui/src/app/(home)/_components/before-login.tsx
@@ -1,5 +1,6 @@
 import { Button } from '@/components/ui/button';
-import { ArrowRight } from 'lucide-react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
 import UHGroupingsInfo from '@/components/uh-groupings-info';
 
 const BeforeLogin = () => (
@@ -9,7 +10,7 @@ const BeforeLogin = () => (
             <div className="text-center">
                 <a href="https://uhawaii.atlassian.net/wiki/spaces/UHIAM/pages/13403213/UH+Groupings">
                     <Button size="lg" variant="default">
-                            Learn More <ArrowRight className="ml-1"/>
+                            Learn More <FontAwesomeIcon className="ml-1" icon={faArrowRight} />
                     </Button>
                 </a>
             </div>

diff --git a/ui/src/components/layout/navbar/login-button.tsx b/ui/src/components/layout/navbar/login-button.tsx
@@ -4,7 +4,9 @@ import { Button } from '@/components/ui/button';
 import Role from '@/access/role';
 import User from '@/access/user';
 import { login, logout } from '@/access/authentication';
-import { LogInIcon, LogOutIcon } from 'lucide-react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSignInAlt, faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
+
 
 const LoginButton = ({ 
     currentUser 
@@ -16,14 +18,14 @@ const LoginButton = ({
             <Button 
                 variant="default" 
                 onClick={() => login()}>
-                Login <LogInIcon className="ml-1" />
+                Login <FontAwesomeIcon className="ml-1" icon={faSignInAlt} />
             </Button>
         ) : (
             <Button 
                 variant="outline" 
                 onClick={() => logout()}>
                 Logout&nbsp;
-                <span className="sm:inline hidden">({currentUser.uid})</span> <LogOutIcon className="ml-1" />
+                <span className="sm:inline hidden">({currentUser.uid})</span> <FontAwesomeIcon className="ml-1" icon={faSignOutAlt} />
             </Button>
         )}
     </> 

diff --git a/ui/src/components/table/groupings-table.tsx b/ui/src/components/table/groupings-table.tsx
@@ -17,12 +17,13 @@ import PaginationBar from '@/components/table/table-element/pagination-bar';
 import GlobalFilter from '@/components/table/table-element/global-filter';
 import SortArrow from '@/components/table/table-element/sort-arrow';
 import { useState } from 'react';
-import { SquarePen } from 'lucide-react';
 import GroupingPathCell from '@/components/table/table-element/grouping-path-cell';
 import Link from 'next/link';
 import { useLocalStorage } from 'usehooks-ts';
 import { GroupingPath } from '@/lib/types';
 import TooltipOnTruncate from '@/components/table/table-element/tooltip-on-truncate';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEdit } from '@fortawesome/free-regular-svg-icons';
 
 const pageSize = parseInt(process.env.NEXT_PUBLIC_PAGE_SIZE as string);
 
@@ -97,11 +98,7 @@ const GroupingsTable = ({ groupingPaths }: { groupingPaths: GroupingPath[] }) =>
                                             {cell.column.id === 'name' && (
                                                 <Link href={`/groupings/${cell.row.getValue('path')}`}>
                                                     <div className="flex">
-                                                        <SquarePen
-                                                            size="1.25em"
-                                                            className="text-text-primary"
-                                                            data-testid={'square-pen-icon'}
-                                                        />
+                                                        <FontAwesomeIcon className="text-text-primary" data-testid={'edit-icon'} icon={faEdit} />
                                                         <div className="pl-2">
                                                             {flexRender(cell.column.columnDef.cell, cell.getContext())}
                                                         </div>

diff --git a/ui/src/components/table/table-element/column-settings.tsx b/ui/src/components/table/table-element/column-settings.tsx
@@ -11,7 +11,7 @@ import {
     DropdownMenuItem
 } from '@/components/ui/dropdown-menu';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faSliders } from '@fortawesome/free-solid-svg-icons';
+import { faSlidersH } from '@fortawesome/free-solid-svg-icons';
 import { Table } from '@tanstack/table-core';
 import { GroupingPath } from '@/lib/types';
 
@@ -25,7 +25,7 @@ const ColumnSettings = ({ table }: { table: Table<GroupingPath> }) => {
                         className="border border-gray-300 hover:bg-transparent"
                         aria-label="column-settings-button"
                     >
-                        <FontAwesomeIcon icon={faSliders} className="w-5 h-5 text-text-color" />
+                        <FontAwesomeIcon icon={faSlidersH} className="w-5 h-5 text-text-color" />
                     </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end" className="hidden sm:block">

diff --git a/ui/src/components/table/table-element/grouping-path-cell.tsx b/ui/src/components/table/table-element/grouping-path-cell.tsx
@@ -1,8 +1,9 @@
-import { ClipboardIcon } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { useState } from 'react';
 import TooltipOnTruncate from '@/components/table/table-element/tooltip-on-truncate';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faClipboard } from '@fortawesome/free-regular-svg-icons';
 
 const GroupingPathCell = ({ path }: { path: string }) => {
     const [tooltipContent, setTooltipContent] = useState('copy');
@@ -42,10 +43,7 @@ const GroupingPathCell = ({ path }: { path: string }) => {
                              justify-center hover:bg-green-blue h-6 p-2 transition ease-in-out duration-150"
                             data-testid="clipboard-button"
                         >
-                            <ClipboardIcon
-                                className="group-hover:text-white h-4 w-4 text-gray-600"
-                                data-testid="clipboard-icon"
-                            />
+                            <FontAwesomeIcon className="group-hover:text-white h-4 w-4 text-gray-600" data-testid="clipboard-icon" icon={faClipboard} />
                         </button>
                     </TooltipTrigger>
                     <TooltipContent>

diff --git a/ui/tests/app/(home)/_components/after-login.test.tsx b/ui/tests/app/(home)/_components/after-login.test.tsx
@@ -30,15 +30,15 @@ describe('AfterLogin', () => {
     };
 
     const expectWelcome = (User: User, role: string) => {
-        expect(screen.getByAltText('user-solid')).toHaveAttribute('src', '/uhgroupings/user-solid.svg');
+        expect(screen.getByLabelText('user')).toBeInTheDocument();
         expect(screen.getByLabelText('key-round')).toBeInTheDocument();
         expect(screen.getByTestId('welcome-message')).toHaveTextContent(`Welcome, ${User.firstName}!`);
         expect(screen.getByTestId('role')).toHaveTextContent(`Role: ${role}`);
     };
 
     const expectAdministration = (isAdmin: boolean) => {
         if (isAdmin) {
-            expect(screen.getByRole('img', { name: 'key-solid' })).toHaveAttribute('src', '/uhgroupings/key-solid.svg');
+            expect(screen.getByLabelText('key')).toBeInTheDocument();
             expect(screen.getByRole('heading', { name: 'Admin' })).toBeInTheDocument();
             expect(
                 screen.getByText(
@@ -49,7 +49,7 @@ describe('AfterLogin', () => {
             expect(screen.getByRole('link', { name: 'Admin' })).toHaveAttribute('href', '/admin');
             expect(screen.getByRole('button', { name: 'Admin' })).toBeInTheDocument();
         } else {
-            expect(screen.queryByRole('img', { name: 'key-solid' })).not.toBeInTheDocument();
+            expect(screen.queryByLabelText('key')).not.toBeInTheDocument();
             expect(screen.queryByRole('heading', { name: 'Admin' })).not.toBeInTheDocument();
             expect(
                 screen.queryByText(
@@ -63,7 +63,7 @@ describe('AfterLogin', () => {
     };
 
     const expectMemberships = () => {
-        expect(screen.getByRole('img', { name: 'id-card' })).toHaveAttribute('src', '/uhgroupings/id-card-solid.svg');
+        expect(screen.getByLabelText('id-card')).toBeInTheDocument();
         expect(screen.getByText(numberOfMemberships)).toBeInTheDocument();
         expect(screen.getByRole('heading', { name: 'Memberships' })).toBeInTheDocument();
         expect(
@@ -75,10 +75,7 @@ describe('AfterLogin', () => {
 
     const expectGroupings = (isAdmin: boolean, isOwner: boolean) => {
         if (isAdmin || isOwner) {
-            expect(screen.getByRole('img', { name: 'wrench-solid' })).toHaveAttribute(
-                'src',
-                '/uhgroupings/wrench-solid.svg'
-            );
+            expect(screen.getByLabelText('wrench')).toBeInTheDocument();
             expect(screen.getByText(numberOfGroupings)).toBeInTheDocument();
             expect(screen.getByRole('heading', { name: 'Groupings' })).toBeInTheDocument();
             expect(
@@ -89,7 +86,7 @@ describe('AfterLogin', () => {
             expect(screen.getByRole('link', { name: 'Groupings' })).toHaveAttribute('href', '/groupings');
             expect(screen.getByRole('button', { name: 'Groupings' })).toBeInTheDocument();
         } else {
-            expect(screen.queryByRole('img', { name: 'wrench-solid' })).not.toBeInTheDocument();
+            expect(screen.queryByLabelText('wrench')).not.toBeInTheDocument();
             expect(screen.queryByText(numberOfGroupings)).not.toBeInTheDocument();
             expect(screen.queryByRole('heading', { name: 'Groupings' })).not.toBeInTheDocument();
             expect(

diff --git a/ui/tests/components/table/groupings-table.test.tsx b/ui/tests/components/table/groupings-table.test.tsx
@@ -30,7 +30,7 @@ describe('GroupingsTable', () => {
 
         const firstPageGroupings = mockData.slice(0, pageSize);
         firstPageGroupings.forEach((group) => {
-            expect(screen.getAllByTestId('square-pen-icon')[0]).toBeInTheDocument();
+            expect(screen.getAllByTestId('edit-icon')[0]).toBeInTheDocument();
             expect(screen.getByText(group.name)).toBeInTheDocument();
             expect(screen.getByText(group.description)).toBeInTheDocument();
             expect(screen.queryByDisplayValue(group.path)).not.toBeInTheDocument();