feat(tickets): add a basic (barren) React tickets list page

app/Platform/Controllers/TicketController.php

@@ -9,8 +9,11 @@
 use App\Models\Achievement;
 use App\Models\Ticket;
 use App\Platform\Actions\BuildTicketCreationDataAction;
+use App\Platform\Actions\BuildTicketListAction;
+use App\Platform\Data\TicketListPagePropsData;
+use App\Platform\Enums\TicketListScope;
+use App\Platform\Requests\TicketListRequest;
 use App\Support\Concerns\HandlesResources;
-use Illuminate\Contracts\View\View;
 use Illuminate\Http\Request;
 use Inertia\Inertia;
 use Inertia\Response as InertiaResponse;
@@ -25,12 +28,21 @@ public function resourceName(): string
         return 'ticket';
     }
 
-    public function index(): View
+    public function index(TicketListRequest $request): InertiaResponse
     {
-        $this->authorize('viewAny', $this->resourceClass());
+        $this->authorize('viewAny', Ticket::class);
 
-        return view('resource.index')
-            ->with('resource', $this->resourceName());
+        $action = new BuildTicketListAction();
+        $result = $action->execute(TicketListScope::All, null, $request);
+
+        $props = new TicketListPagePropsData(
+            scope: TicketListScope::All,
+            paginatedTickets: $result['paginatedTickets'],
+            stateCounts: $result['stateCounts'],
+            availableFilters: $action->getAvailableFilters(TicketListScope::All),
+        );
+
+        return Inertia::render('tickets', $props);
     }
 
     /*

app/Platform/Data/TicketListPagePropsData.php

@@ -0,0 +1,32 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Platform\Data;
+
+use App\Data\PaginatedData;
+use App\Data\UserData;
+use App\Platform\Enums\TicketListScope;
+use Spatie\LaravelData\Data;
+use Spatie\TypeScriptTransformer\Attributes\LiteralTypeScriptType;
+use Spatie\TypeScriptTransformer\Attributes\TypeScript;
+
+#[TypeScript('TicketListPageProps')]
+class TicketListPagePropsData extends Data
+{
+    /**
+     * @param TicketListFilterData[] $availableFilters
+     */
+    public function __construct(
+        public TicketListScope $scope,
+        #[LiteralTypeScriptType('App.Data.PaginatedData<App.Platform.Data.TicketListEntry>')]
+        public PaginatedData $paginatedTickets,
+        public TicketListStateCountsData $stateCounts,
+        #[LiteralTypeScriptType('App.Platform.Data.TicketListFilter[]')]
+        public array $availableFilters,
+        public ?GameData $game = null,
+        public ?AchievementData $achievement = null,
+        public ?UserData $user = null,
+    ) {
+    }
+}

app/Platform/RouteServiceProvider.php

@@ -183,6 +183,8 @@ protected function mapWebRoutes(): void
                 Route::middleware(['inertia'])->group(function () {
                     Route::get('achievement/{achievement}/report-issue', [ReportAchievementIssueController::class, 'index'])->name('achievement.report-issue');
                     Route::get('achievement/{achievement}/tickets/create', [TicketController::class, 'create'])->name('achievement.tickets.create');
+
+                    Route::get('tickets2', [TicketController::class, 'index'])->name('tickets2.index');
                 });
             });
         });

lang/en_US.json

@@ -1532,5 +1532,18 @@
     "Update the application name and redirect URI.": "Update the application name and redirect URI.",
     "https://example.com/oauth/callback": "https://example.com/oauth/callback",
     "View the people you follow and the people who follow you": "View the people you follow and the people who follow you",
-    "View your personal game lists, such as Want to Play and Want to Develop": "View your personal game lists, such as Want to Play and Want to Develop"
+    "View your personal game lists, such as Want to Play and Want to Develop": "View your personal game lists, such as Want to Play and Want to Develop",
+    "Ticket Manager": "Ticket Manager",
+    "(LB) {{title}}": "(LB) {{title}}",
+    "No tickets match these filters.": "No tickets match these filters.",
+    "Deleted user": "Deleted user",
+    "Closed": "Closed",
+    "Open": "Open",
+    "Quarantined": "Quarantined",
+    "Request": "Request",
+    "Resolved": "Resolved",
+    "ID": "ID",
+    "Issue with": "Issue with",
+    "Reporter": "Reporter",
+    "Age": "Age"
 }

resources/js/features/tickets/components/+index/TicketIndexRoot.test.tsx

@@ -0,0 +1,115 @@
+import { render, screen } from '@/test';
+import {
+  createPaginatedData,
+  createTicketListEntry,
+  createTicketListStateCounts,
+  createUser,
+} from '@/test/factories';
+
+import { TicketIndexRoot } from './TicketIndexRoot';
+
+describe('Component: TicketIndexRoot', () => {
+  it('renders without crashing', () => {
+    // ARRANGE
+    const { container } = render<App.Platform.Data.TicketListPageProps>(<TicketIndexRoot />, {
+      pageProps: {
+        scope: 'all',
+        paginatedTickets: createPaginatedData([createTicketListEntry()], {
+          currentPage: 1,
+          lastPage: 1,
+          perPage: 50,
+          total: 1,
+        }),
+        stateCounts: createTicketListStateCounts(),
+        availableFilters: [{ kind: 'type', values: ['0', '1', '2'] }],
+      },
+    });
+
+    // ASSERT
+    expect(container).toBeTruthy();
+    expect(screen.getByTestId('ticket-list')).toBeVisible();
+
+    expect(screen.getByRole('heading', { level: 1, name: 'Ticket Manager' })).toBeVisible();
+  });
+
+  it('renders every default column and one row per ticket from the page props', () => {
+    // ARRANGE
+    const tickets = [
+      createTicketListEntry({
+        id: 1001,
+        state: 'open',
+        ticketableTitle: 'First Blood',
+        author: createUser({ displayName: 'Dev' }),
+        reporter: createUser({ displayName: 'Scott' }),
+      }),
+      createTicketListEntry({ id: 1002, ticketableTitle: 'Second Wind', state: 'quarantined' }),
+    ];
+
+    render<App.Platform.Data.TicketListPageProps>(<TicketIndexRoot />, {
+      pageProps: {
+        scope: 'all',
+        paginatedTickets: createPaginatedData(tickets, {
+          currentPage: 1,
+          lastPage: 1,
+          perPage: 50,
+          total: tickets.length,
+        }),
+        stateCounts: createTicketListStateCounts(),
+        availableFilters: [{ kind: 'type', values: ['0', '1', '2'] }],
+      },
+    });
+
+    // ASSERT
+    expect(screen.getAllByRole('columnheader').map((header) => header.textContent)).toEqual([
+      'ID',
+      'Issue with',
+      'Game',
+      'Developer',
+      'Reporter',
+      'Age',
+    ]);
+
+    expect(screen.getAllByRole('row')).toHaveLength(3);
+
+    expect(screen.getByRole('link', { name: 'Ticket #1001' })).toHaveAttribute(
+      'href',
+      expect.stringContaining('ticket.show'),
+    );
+    expect(screen.getByRole('link', { name: 'Ticket #1002' })).toBeVisible();
+
+    expect(screen.getByRole('link', { name: 'First Blood' })).toHaveAttribute(
+      'href',
+      expect.stringContaining('achievement.show'),
+    );
+    expect(screen.getByRole('link', { name: 'Second Wind' })).toBeVisible();
+
+    expect(screen.getByRole('link', { name: /dev/i })).toHaveAttribute(
+      'href',
+      expect.stringContaining('user.show'),
+    );
+    expect(screen.getByRole('link', { name: /scott/i })).toBeVisible();
+
+    expect(screen.getByRole('img', { name: 'Quarantined' })).toBeVisible();
+  });
+
+  it('given the page has no tickets, shows the empty state instead of a table', () => {
+    // ARRANGE
+    render<App.Platform.Data.TicketListPageProps>(<TicketIndexRoot />, {
+      pageProps: {
+        scope: 'all',
+        paginatedTickets: createPaginatedData([], {
+          currentPage: 1,
+          lastPage: 1,
+          perPage: 50,
+          total: 0,
+        }),
+        stateCounts: createTicketListStateCounts(),
+        availableFilters: [{ kind: 'type', values: ['0', '1', '2'] }],
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByText('No tickets match these filters.')).toBeVisible();
+    expect(screen.queryByRole('table')).not.toBeInTheDocument();
+  });
+});

resources/js/features/tickets/components/+index/TicketIndexRoot.tsx

@@ -0,0 +1,31 @@
+import type { FC } from 'react';
+
+import { usePageProps } from '@/common/hooks/usePageProps';
+
+import { useTicketListColumnDefinitions } from '../../hooks/useTicketListColumnDefinitions';
+import { TICKET_LIST_COLUMN_IDS } from '../../utils/ticketListColumnIds';
+import { TicketListEmptyState } from '../TicketListEmptyState';
+import { TicketListHeading } from '../TicketListHeading';
+import { TicketListTable } from '../TicketListTable';
+
+// temporary - selectable columns will arrive in a future commit
+const columnVisibility = Object.fromEntries(TICKET_LIST_COLUMN_IDS.map((id) => [id, true]));
+
+export const TicketIndexRoot: FC = () => {
+  const { paginatedTickets } = usePageProps<App.Platform.Data.TicketListPageProps>();
+
+  const columnDefinitions = useTicketListColumnDefinitions();
+
+  return (
+    <div data-testid="ticket-list" className="flex flex-col gap-4">
+      <TicketListHeading />
+
+      <TicketListTable
+        columnDefinitions={columnDefinitions}
+        columnVisibility={columnVisibility}
+        emptyStateNode={<TicketListEmptyState />}
+        paginatedTickets={paginatedTickets}
+      />
+    </div>
+  );
+};

resources/js/features/tickets/components/+index/index.ts

@@ -0,0 +1 @@
+export * from './TicketIndexRoot';

resources/js/features/tickets/components/TicketListEmptyState/TicketListEmptyState.test.tsx

@@ -0,0 +1,21 @@
+import { render, screen } from '@/test';
+
+import { TicketListEmptyState } from './TicketListEmptyState';
+
+describe('Component: TicketListEmptyState', () => {
+  it('renders without crashing', () => {
+    // ARRANGE
+    const { container } = render(<TicketListEmptyState />);
+
+    // ASSERT
+    expect(container).toBeTruthy();
+  });
+
+  it('shows the empty copy', () => {
+    // ARRANGE
+    render(<TicketListEmptyState />);
+
+    // ASSERT
+    expect(screen.getByText('No tickets match these filters.')).toBeVisible();
+  });
+});

resources/js/features/tickets/components/TicketListEmptyState/TicketListEmptyState.tsx

@@ -0,0 +1,12 @@
+import type { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const TicketListEmptyState: FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <p className="py-[0.4em] pb-[1.2em] text-neutral-400 light:text-neutral-600">
+      {t('No tickets match these filters.')}
+    </p>
+  );
+};

resources/js/features/tickets/components/TicketListEmptyState/index.ts

@@ -0,0 +1 @@
+export * from './TicketListEmptyState';

resources/js/features/tickets/components/TicketListHeading/TicketListHeading.test.tsx

@@ -0,0 +1,25 @@
+import { render, screen } from '@/test';
+
+import { TicketListHeading } from './TicketListHeading';
+
+describe('Component: TicketListHeading', () => {
+  it('renders without crashing', () => {
+    // ARRANGE
+    const { container } = render<App.Platform.Data.TicketListPageProps>(<TicketListHeading />, {
+      pageProps: { scope: 'all' },
+    });
+
+    // ASSERT
+    expect(container).toBeTruthy();
+  });
+
+  it('shows the Ticket Manager heading copy', () => {
+    // ARRANGE
+    render<App.Platform.Data.TicketListPageProps>(<TicketListHeading />, {
+      pageProps: { scope: 'all' },
+    });
+
+    // ASSERT
+    expect(screen.getByRole('heading', { level: 1, name: /ticket manager/i })).toBeVisible();
+  });
+});

resources/js/features/tickets/components/TicketListHeading/TicketListHeading.tsx

@@ -0,0 +1,12 @@
+import type { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const TicketListHeading: FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="mb-1 flex w-full">
+      <h1 className="text-h3 w-full sm:text-[2.0em]!">{t('Ticket Manager')}</h1>
+    </div>
+  );
+};

resources/js/features/tickets/components/TicketListHeading/index.ts

@@ -0,0 +1 @@
+export * from './TicketListHeading';