Feature/communit snapshots page

backend/apps/owasp/graphql/queries/snapshot.py

@@ -15,7 +15,7 @@ class SnapshotQuery(BaseQuery):
         key=graphene.String(required=True),
     )
 
-    recent_snapshots = graphene.List(
+    snapshots = graphene.List(
         SnapshotNode,
         limit=graphene.Int(default_value=8),
     )
@@ -27,6 +27,6 @@ def resolve_snapshot(root, info, key):
         except Snapshot.DoesNotExist:
             return None
 
-    def resolve_recent_snapshots(root, info, limit):
+    def resolve_snapshots(root, info, limit):
         """Resolve recent snapshots."""
         return Snapshot.objects.order_by("-created_at")[:limit]

frontend/__tests__/unit/pages/Snapshots.test.tsx

@@ -0,0 +1,109 @@
+import { useQuery } from '@apollo/client'
+import { render, screen, waitFor, fireEvent } from '@testing-library/react'
+import { mockSnapshotDetailsData } from '@unit/data/mockSnapshotData'
+import { useNavigate } from 'react-router-dom'
+import { toaster } from 'components/ui/toaster'
+import Snapshots from 'pages/Snapshots'
+
+jest.mock('@apollo/client', () => ({
+  ...jest.requireActual('@apollo/client'),
+  useQuery: jest.fn(),
+}))
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: jest.fn(),
+}))
+
+jest.mock('components/ui/toaster', () => ({
+  toaster: {
+    create: jest.fn(),
+    __esModule: true,
+    default: jest.fn(),
+  },
+}))
+
+describe('Snapshots Component', () => {
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  test('renders loading spinner initially', async () => {
+    // Mocking the return value of useQuery
+    ;(useQuery as jest.Mock).mockReturnValue({ data: null, loading: true, error: null })
+    render(<Snapshots />)
+
+    expect(screen.getByRole('status')).toBeInTheDocument()
+  })
+
+  test('renders snapshots after data is loaded', async () => {
+    // Mocking the return value with snapshot data
+    ;(useQuery as jest.Mock).mockReturnValue({
+      data: { snapshots: mockSnapshotDetailsData },
+      loading: false,
+      error: null,
+    })
+    render(<Snapshots />)
+
+    await waitFor(() => {
+      expect(screen.getByText('Snapshot 1')).toBeInTheDocument()
+      expect(screen.getByText('Snapshot 2')).toBeInTheDocument()
+    })
+  })
+
+  test('displays error message on GraphQL error', async () => {
+    // Mocking the return value with an error
+    (useQuery as jest.Mock).mockReturnValue({ data: null, loading: false, error: new Error('GraphQL Error') });
+    render(<Snapshots />);
+
+    await waitFor(() => {
+      expect(toaster).toHaveBeenCalledWith(
+        expect.objectContaining({ title: 'GraphQL Request Failed' })
+      );
+    });
+  });
+
+  test('navigates to snapshot details on button click', async () => {
+    const navigateMock = jest.fn();
+    (useNavigate as jest.Mock)(navigateMock);
+    // Mocking the return value with snapshot data
+    (useQuery as jest.Mock).mockReturnValue({ data: { snapshots: mockSnapshotDetailsData }, loading: false, error: null });
+    render(<Snapshots />);
+
+    await waitFor(() => {
+      const viewButtons = screen.getAllByText('View Details');
+      expect(viewButtons).toHaveLength(2);
+      fireEvent.click(viewButtons[0]);
+    });
+
+    expect(navigateMock).toHaveBeenCalledWith('/community/snapshots/1');
+  });
+
+  test('displays "No Snapshots found" when there are no snapshots', async () => {
+    // Mocking the return value with no snapshot data
+    ;(useQuery as jest.Mock).mockReturnValue({
+      data: { snapshots: [] },
+      loading: false,
+      error: null,
+    })
+    render(<Snapshots />)
+
+    await waitFor(() => {
+      expect(screen.getByText('No Snapshots found')).toBeInTheDocument()
+    })
+  })
+
+  test('displays fallback snapshot title if snapshot title is missing', async () => {
+    // Mocking the return value with a snapshot that has no title
+    ;(useQuery as jest.Mock).mockReturnValue({
+      data: { snapshots: [{ id: '1', title: '', createdAt: '2021-01-01' }] },
+      loading: false,
+      error: null,
+    })
+    render(<Snapshots />)
+
+    await waitFor(() => {
+      expect(screen.getByText('Untitled Snapshot')).toBeInTheDocument()
+    })
+  })
+})

frontend/src/App.tsx

@@ -11,6 +11,7 @@ import {
   SnapshotDetailsPage,
   UserDetailsPage,
   UsersPage,
+  Snapshots,
 } from 'pages'
 import { useEffect } from 'react'
 import { Routes, Route, useLocation } from 'react-router-dom'
@@ -47,6 +48,7 @@ function App() {
         <Route path="/chapters/:chapterKey" element={<ChapterDetailsPage />}></Route>
         <Route path="/community/snapshots/:id" element={<SnapshotDetailsPage />}></Route>
         <Route path="/community/users" element={<UsersPage />}></Route>
+        <Route path="/community/snapshots" element={<Snapshots />}></Route>
         <Route path="/community/users/:userKey" element={<UserDetailsPage />}></Route>
         <Route path="*" element={<ErrorDisplay {...ERROR_CONFIGS['404']} />} />
       </Routes>

frontend/src/api/queries/snapshotQueries.ts

@@ -55,3 +55,14 @@ export const GET_SNAPSHOT_DETAILS = gql`
     }
   }
 `
+
+export const GET_COMMUNITY_SNAPSHOTS = gql`
+  query GetCommunitySnapshots {
+    snapshots(limit: 24) {
+      key
+      title
+      startAt
+      endAt
+    }
+  }
+`

frontend/src/components/Header.tsx

@@ -56,19 +56,48 @@ export default function Header() {
         {/* Desktop Header Links */}
         <div className="hidden flex-1 justify-between rounded-lg pl-6 font-medium md:block">
           <div className="flex justify-start pl-6">
-            {headerLinks.map((link, i) => (
-              <NavLink
-                key={i}
-                to={link.href}
-                className={cn(
-                  'navlink px-3 py-2 text-slate-700 hover:text-slate-800 dark:text-slate-300 dark:hover:text-slate-200',
-                  location.pathname === link.href && 'font-bold text-blue-800 dark:text-white'
-                )}
-                aria-current="page"
-              >
-                {link.text}
-              </NavLink>
-            ))}
+            {headerLinks.map((link) => {
+              return link.submenu ? (
+                <div
+                  key={link.text}
+                  className={cn(
+                    'dropdown navlink group px-3 py-2 text-slate-700 hover:text-slate-800 dark:text-slate-300 dark:hover:text-slate-200',
+                    link.submenu.map((sub) => sub.href).includes(location.pathname) &&
+                      'font-bold text-blue-800 dark:text-white'
+                  )}
+                >
+                  {link.text}
+                  <div className="dropdown-menu group-hover:visible group-hover:opacity-100">
+                    {link.submenu.map((sub) => (
+                      <NavLink
+                        key={link.text}
+                        to={sub.href}
+                        className={cn(
+                          'navlink px-3 py-2 text-slate-700 hover:text-slate-800 dark:text-slate-300 dark:hover:text-slate-200',
+                          location.pathname === sub.href &&
+                            'font-bold text-blue-800 dark:text-white'
+                        )}
+                        aria-current="page"
+                      >
+                        {sub.text}
+                      </NavLink>
+                    ))}
+                  </div>
+                </div>
+              ) : (
+                <NavLink
+                  key={link.text}
+                  to={link.href}
+                  className={cn(
+                    'navlink px-3 py-2 text-slate-700 hover:text-slate-800 dark:text-slate-300 dark:hover:text-slate-200',
+                    location.pathname === link.href && 'font-bold text-blue-800 dark:text-white'
+                  )}
+                  aria-current="page"
+                >
+                  {link.text}
+                </NavLink>
+              )
+            })}
           </div>
         </div>
         <div className="flex items-center justify-normal space-x-4">
@@ -137,20 +166,44 @@ export default function Header() {
                         </div>
                       </div>
                     </NavLink>
-                    {headerLinks.map((link, i) => (
-                      <NavLink
-                        key={i}
-                        to={link.href}
-                        className={cn(
-                          'navlink block px-3 py-2 text-slate-700 hover:text-slate-800 dark:text-slate-300 dark:hover:text-slate-200',
-                          location.pathname === link.href &&
-                            'font-bold text-blue-800 dark:text-white'
-                        )}
-                        onClick={toggleMobileMenu}
-                      >
-                        {link.text}
-                      </NavLink>
-                    ))}
+                    {headerLinks.map((link) =>
+                      link.submenu ? (
+                        <div key={link.text} className="flex flex-col">
+                          <div className="block px-3 py-2 font-medium text-slate-700 dark:text-slate-300">
+                            {link.text}
+                          </div>
+                          <div className="ml-4">
+                            {link.submenu.map((sub) => (
+                              <NavLink
+                                key={link.text}
+                                to={sub.href}
+                                className={cn(
+                                  'navlink block px-3 py-2 text-slate-700 hover:text-slate-800 dark:text-slate-300 dark:hover:text-slate-200',
+                                  location.pathname === sub.href &&
+                                    'font-bold text-blue-800 dark:text-white'
+                                )}
+                                onClick={toggleMobileMenu}
+                              >
+                                {sub.text}
+                              </NavLink>
+                            ))}
+                          </div>
+                        </div>
+                      ) : (
+                        <NavLink
+                          key={link.text}
+                          to={link.href}
+                          className={cn(
+                            'navlink block px-3 py-2 text-slate-700 hover:text-slate-800 dark:text-slate-300 dark:hover:text-slate-200',
+                            location.pathname === link.href &&
+                              'font-bold text-blue-800 dark:text-white'
+                          )}
+                          onClick={toggleMobileMenu}
+                        >
+                          {link.text}
+                        </NavLink>
+                      )
+                    )}
                   </div>
 
                   <div className="flex flex-col gap-y-2">

frontend/src/components/SnapshotCard.tsx

@@ -0,0 +1,39 @@
+import { Button } from '@chakra-ui/react'
+import { faChevronRight, faCalendar } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { SnapshotCardProps } from 'types/card'
+import { formatDate } from 'utils/dateFormatter'
+
+const SnapshotCard = ({ title, button, startAt, endAt }: SnapshotCardProps) => {
+  return (
+    <Button
+      onClick={button.onclick}
+      className="group flex h-40 w-full flex-col items-center rounded-lg bg-white p-6 text-left shadow-lg transition-transform duration-500 hover:scale-105 hover:shadow-xl dark:bg-gray-800 dark:shadow-gray-900/30"
+    >
+      <div className="text-center">
+        <h3 className="max-w-[250px] text-balance text-lg font-semibold text-gray-900 group-hover:text-blue-500 dark:text-white sm:text-xl">
+          <p>{title}</p>
+        </h3>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-2 text-gray-600 dark:text-gray-300">
+        <div className="flex items-center">
+          <FontAwesomeIcon icon={faCalendar} className="mr-1 h-4 w-4" />
+          <span>
+            {formatDate(startAt)} - {formatDate(endAt)}
+          </span>
+        </div>
+      </div>
+
+      <div className="mt-auto inline-flex items-center text-sm font-medium text-blue-500 dark:text-blue-400">
+        View Snapshot
+        <FontAwesomeIcon
+          icon={faChevronRight}
+          className="ml-2 h-4 w-4 transform transition-transform group-hover:translate-x-1"
+        />
+      </div>
+    </Button>
+  )
+}
+
+export default SnapshotCard

frontend/src/index.css

@@ -118,6 +118,22 @@ a {
   color: inherit;
 }
 
+/* Dropdown container */
+.dropdown {
+  @apply relative;
+}
+
+.dropdown-menu {
+  @apply absolute left-0 top-full mt-2 w-48 rounded-lg bg-white p-3 shadow-lg dark:bg-gray-800;
+  @apply opacity-0 invisible transition-all duration-200 ease-in-out;
+  @apply flex flex-col space-y-2; /* Stack items vertically */
+}
+
+.dropdown:hover .dropdown-menu {
+  @apply opacity-100 visible;
+}
+
+
 @keyframes fadeIn {
   from {
     opacity: 0;