Add frontend autoformatting and set CI to require formatted code for all languages (#6052)

# Description of Changes
Changes the strategy for autoformatting to reject PRs if they are not
formatted correctly instead of allowing them to merge and then spawning
a new PR to fix the formatting. The old strategy just caused more work
for us because we'd have to manually approve the followup PR and get it
merged, which required 2 reviewers so in practice it rarely got done and
just meant everyone's PRs ended up containing reformatting for unrelated
files, which makes code review unnecessarily difficult. If the PR's code
is not formatted correctly after this PR, a comment will be added
automatically to tell the author how to run the formatter script to fix
their code so it can go in.

This also enables autoformatting for the frontend code, using Prettier.
I've enabled it for pretty much everything in the frontend folder, other
than 3rd party files and files it doesn't make sense for. I also
excluded Markdown because it sounds likely to be more annoying to have
to autoformat the Markdown in the frontend folder but nowhere else. Open
to changing this though if people disagree.

> [!note]
> 
> Advice to reviewers: The first commit contains all of the actual logic
I've introduced (CI changes, Prettier config, etc.)
> The second commit is just the reformatting of the entire frontend
folder.
> The first commit needs proper review, the second one just give it a
spot-check that it's doing what you'd expect.

frontend/src/proprietary/components/shared/config/configSections/AdminUsageSection.tsx

@@ -1,59 +1,59 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { Stack, Group, Text, Button, SegmentedControl, Loader, Alert, Card } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import usageAnalyticsService, { EndpointStatisticsResponse } from '@app/services/usageAnalyticsService';
-import UsageAnalyticsChart from '@app/components/shared/config/configSections/usage/UsageAnalyticsChart';
-import UsageAnalyticsTable from '@app/components/shared/config/configSections/usage/UsageAnalyticsTable';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { useLoginRequired } from '@app/hooks/useLoginRequired';
-import LoginRequiredBanner from '@app/components/shared/config/LoginRequiredBanner';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
-import EnterpriseRequiredBanner from '@app/components/shared/config/EnterpriseRequiredBanner';
+import React, { useState, useEffect, useCallback } from "react";
+import { Stack, Group, Text, Button, SegmentedControl, Loader, Alert, Card } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import usageAnalyticsService, { EndpointStatisticsResponse } from "@app/services/usageAnalyticsService";
+import UsageAnalyticsChart from "@app/components/shared/config/configSections/usage/UsageAnalyticsChart";
+import UsageAnalyticsTable from "@app/components/shared/config/configSections/usage/UsageAnalyticsTable";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { useLoginRequired } from "@app/hooks/useLoginRequired";
+import LoginRequiredBanner from "@app/components/shared/config/LoginRequiredBanner";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+import EnterpriseRequiredBanner from "@app/components/shared/config/EnterpriseRequiredBanner";
 
 const AdminUsageSection: React.FC = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const { loginEnabled } = useLoginRequired();
   const { config } = useAppConfig();
-  const licenseType = config?.license ?? 'NORMAL';
-  const hasEnterpriseLicense = licenseType === 'ENTERPRISE';
+  const licenseType = config?.license ?? "NORMAL";
+  const hasEnterpriseLicense = licenseType === "ENTERPRISE";
   const showDemoData = !loginEnabled || !hasEnterpriseLicense;
   const [data, setData] = useState<EndpointStatisticsResponse | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [displayMode, setDisplayMode] = useState<'top10' | 'top20' | 'all'>('top10');
-  const [dataType, setDataType] = useState<'all' | 'api' | 'ui'>('api');
+  const [displayMode, setDisplayMode] = useState<"top10" | "top20" | "all">("top10");
+  const [dataType, setDataType] = useState<"all" | "api" | "ui">("api");
 
   const buildDemoUsageData = useCallback((): EndpointStatisticsResponse => {
     const totalVisits = 15847;
     const allEndpoints = [
-      { endpoint: 'merge-pdfs', visits: 3245, percentage: (3245 / totalVisits) * 100 },
-      { endpoint: 'compress-pdf', visits: 2891, percentage: (2891 / totalVisits) * 100 },
-      { endpoint: 'pdf-to-img', visits: 2156, percentage: (2156 / totalVisits) * 100 },
-      { endpoint: 'split-pdf', visits: 1834, percentage: (1834 / totalVisits) * 100 },
-      { endpoint: 'rotate-pdf', visits: 1523, percentage: (1523 / totalVisits) * 100 },
-      { endpoint: 'ocr-pdf', visits: 1287, percentage: (1287 / totalVisits) * 100 },
-      { endpoint: 'add-watermark', visits: 945, percentage: (945 / totalVisits) * 100 },
-      { endpoint: 'extract-images', visits: 782, percentage: (782 / totalVisits) * 100 },
-      { endpoint: 'add-password', visits: 621, percentage: (621 / totalVisits) * 100 },
-      { endpoint: 'html-to-pdf', visits: 563, percentage: (563 / totalVisits) * 100 },
-      { endpoint: 'remove-password', visits: 487, percentage: (487 / totalVisits) * 100 },
-      { endpoint: 'pdf-to-pdfa', visits: 423, percentage: (423 / totalVisits) * 100 },
-      { endpoint: 'extract-pdf-metadata', visits: 356, percentage: (356 / totalVisits) * 100 },
-      { endpoint: 'add-page-numbers', visits: 298, percentage: (298 / totalVisits) * 100 },
-      { endpoint: 'crop', visits: 245, percentage: (245 / totalVisits) * 100 },
-      { endpoint: 'flatten', visits: 187, percentage: (187 / totalVisits) * 100 },
-      { endpoint: 'sanitize-pdf', visits: 134, percentage: (134 / totalVisits) * 100 },
-      { endpoint: 'auto-split-pdf', visits: 98, percentage: (98 / totalVisits) * 100 },
-      { endpoint: 'scale-pages', visits: 76, percentage: (76 / totalVisits) * 100 },
-      { endpoint: 'compare-pdfs', visits: 42, percentage: (42 / totalVisits) * 100 },
+      { endpoint: "merge-pdfs", visits: 3245, percentage: (3245 / totalVisits) * 100 },
+      { endpoint: "compress-pdf", visits: 2891, percentage: (2891 / totalVisits) * 100 },
+      { endpoint: "pdf-to-img", visits: 2156, percentage: (2156 / totalVisits) * 100 },
+      { endpoint: "split-pdf", visits: 1834, percentage: (1834 / totalVisits) * 100 },
+      { endpoint: "rotate-pdf", visits: 1523, percentage: (1523 / totalVisits) * 100 },
+      { endpoint: "ocr-pdf", visits: 1287, percentage: (1287 / totalVisits) * 100 },
+      { endpoint: "add-watermark", visits: 945, percentage: (945 / totalVisits) * 100 },
+      { endpoint: "extract-images", visits: 782, percentage: (782 / totalVisits) * 100 },
+      { endpoint: "add-password", visits: 621, percentage: (621 / totalVisits) * 100 },
+      { endpoint: "html-to-pdf", visits: 563, percentage: (563 / totalVisits) * 100 },
+      { endpoint: "remove-password", visits: 487, percentage: (487 / totalVisits) * 100 },
+      { endpoint: "pdf-to-pdfa", visits: 423, percentage: (423 / totalVisits) * 100 },
+      { endpoint: "extract-pdf-metadata", visits: 356, percentage: (356 / totalVisits) * 100 },
+      { endpoint: "add-page-numbers", visits: 298, percentage: (298 / totalVisits) * 100 },
+      { endpoint: "crop", visits: 245, percentage: (245 / totalVisits) * 100 },
+      { endpoint: "flatten", visits: 187, percentage: (187 / totalVisits) * 100 },
+      { endpoint: "sanitize-pdf", visits: 134, percentage: (134 / totalVisits) * 100 },
+      { endpoint: "auto-split-pdf", visits: 98, percentage: (98 / totalVisits) * 100 },
+      { endpoint: "scale-pages", visits: 76, percentage: (76 / totalVisits) * 100 },
+      { endpoint: "compare-pdfs", visits: 42, percentage: (42 / totalVisits) * 100 },
     ];
 
     let filteredEndpoints = allEndpoints;
-    if (displayMode === 'top10') {
+    if (displayMode === "top10") {
       filteredEndpoints = allEndpoints.slice(0, 10);
-    } else if (displayMode === 'top20') {
+    } else if (displayMode === "top20") {
       filteredEndpoints = allEndpoints.slice(0, 20);
     }
 
@@ -69,12 +69,12 @@ const AdminUsageSection: React.FC = () => {
       setLoading(true);
       setError(null);
 
-      const limit = displayMode === 'all' ? undefined : displayMode === 'top10' ? 10 : 20;
+      const limit = displayMode === "all" ? undefined : displayMode === "top10" ? 10 : 20;
       const response = await usageAnalyticsService.getEndpointStatistics(limit, dataType);
 
       setData(response);
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load usage statistics');
+      setError(err instanceof Error ? err.message : "Failed to load usage statistics");
     } finally {
       setLoading(false);
     }
@@ -103,14 +103,14 @@ const AdminUsageSection: React.FC = () => {
 
   const getDisplayModeLabel = () => {
     switch (displayMode) {
-      case 'top10':
-        return t('usage.showing.top10', 'Top 10');
-      case 'top20':
-        return t('usage.showing.top20', 'Top 20');
-      case 'all':
-        return t('usage.showing.all', 'All');
+      case "top10":
+        return t("usage.showing.top10", "Top 10");
+      case "top20":
+        return t("usage.showing.top20", "Top 20");
+      case "all":
+        return t("usage.showing.all", "All");
       default:
-        return '';
+        return "";
     }
   };
 
@@ -120,7 +120,7 @@ const AdminUsageSection: React.FC = () => {
   // Early returns for loading/error states
   if (actualLoading) {
     return (
-      <div style={{ display: 'flex', justifyContent: 'center', padding: '2rem' }}>
+      <div style={{ display: "flex", justifyContent: "center", padding: "2rem" }}>
         <Loader size="lg" />
       </div>
     );
@@ -128,7 +128,7 @@ const AdminUsageSection: React.FC = () => {
 
   if (error) {
     return (
-      <Alert color="red" title={t('usage.error', 'Error loading usage statistics')}>
+      <Alert color="red" title={t("usage.error", "Error loading usage statistics")}>
         {error}
       </Alert>
     );
@@ -136,14 +136,14 @@ const AdminUsageSection: React.FC = () => {
 
   if (!data) {
     return (
-      <Alert color="yellow" title={t('usage.noData', 'No data available')}>
-        {t('usage.noDataMessage', 'No usage statistics are currently available.')}
+      <Alert color="yellow" title={t("usage.noData", "No data available")}>
+        {t("usage.noDataMessage", "No usage statistics are currently available.")}
       </Alert>
     );
   }
 
   const endpoints = (data?.endpoints ?? []).map((endpoint) => ({
-    endpoint: endpoint.endpoint ?? t('usage.table.unknownEndpoint', 'Unknown endpoint'),
+    endpoint: endpoint.endpoint ?? t("usage.table.unknownEndpoint", "Unknown endpoint"),
     visits: Number.isFinite(endpoint.visits) ? Math.max(0, endpoint.visits) : 0,
     percentage: Number.isFinite(endpoint.percentage) ? Math.max(0, endpoint.percentage) : 0,
   }));
@@ -154,56 +154,50 @@ const AdminUsageSection: React.FC = () => {
   }));
 
   const displayedVisits = endpoints.reduce((sum, e) => sum + e.visits, 0);
-  const totalVisits = Number.isFinite(data?.totalVisits)
-    ? Math.max(0, data?.totalVisits ?? 0)
-    : displayedVisits;
-  const totalEndpoints = Number.isFinite(data?.totalEndpoints)
-    ? Math.max(0, data?.totalEndpoints ?? 0)
-    : endpoints.length;
+  const totalVisits = Number.isFinite(data?.totalVisits) ? Math.max(0, data?.totalVisits ?? 0) : displayedVisits;
+  const totalEndpoints = Number.isFinite(data?.totalEndpoints) ? Math.max(0, data?.totalEndpoints ?? 0) : endpoints.length;
 
-  const displayedPercentage = totalVisits > 0
-    ? ((displayedVisits / (totalVisits || 1)) * 100).toFixed(1)
-    : '0';
+  const displayedPercentage = totalVisits > 0 ? ((displayedVisits / (totalVisits || 1)) * 100).toFixed(1) : "0";
 
   return (
     <Stack gap="lg">
       <LoginRequiredBanner show={!loginEnabled} />
       <EnterpriseRequiredBanner
         show={!hasEnterpriseLicense}
-        featureName={t('settings.licensingAnalytics.usageAnalytics', 'Usage Analytics')}
+        featureName={t("settings.licensingAnalytics.usageAnalytics", "Usage Analytics")}
       />
 
       {/* Info banner about usage analytics and audit relationship */}
       {loginEnabled && hasEnterpriseLicense && (
         <Alert
           icon={<LocalIcon icon="info" width="1.2rem" height="1.2rem" />}
-          title={t('usage.aboutUsageAnalytics', 'About Usage Analytics')}
+          title={t("usage.aboutUsageAnalytics", "About Usage Analytics")}
           color="cyan"
           variant="light"
         >
           <Stack gap="xs">
             <Text size="sm">
               {t(
-                'usage.usageAnalyticsExplanation',
-                'Usage analytics track endpoint requests and tool usage patterns. Combined with the Audit Logging dashboard, you get complete visibility into system activity, performance, and security events.'
+                "usage.usageAnalyticsExplanation",
+                "Usage analytics track endpoint requests and tool usage patterns. Combined with the Audit Logging dashboard, you get complete visibility into system activity, performance, and security events.",
               )}
             </Text>
             <Group gap="sm">
               <Button
                 variant="light"
                 size="xs"
-                onClick={() => navigate('/settings/adminSecurity')}
+                onClick={() => navigate("/settings/adminSecurity")}
                 rightSection={<LocalIcon icon="arrow-forward" width="0.9rem" height="0.9rem" />}
               >
-                {t('usage.configureSettings', 'Configure Analytics Settings')}
+                {t("usage.configureSettings", "Configure Analytics Settings")}
               </Button>
               <Button
                 variant="light"
                 size="xs"
-                onClick={() => navigate('/settings/adminSecurity#auditLogging')}
+                onClick={() => navigate("/settings/adminSecurity#auditLogging")}
                 rightSection={<LocalIcon icon="arrow-forward" width="0.9rem" height="0.9rem" />}
               >
-                {t('usage.viewAuditLogs', 'View Audit Logs')}
+                {t("usage.viewAuditLogs", "View Audit Logs")}
               </Button>
             </Group>
           </Stack>
@@ -217,20 +211,20 @@ const AdminUsageSection: React.FC = () => {
             <Group>
               <SegmentedControl
                 value={displayMode}
-                onChange={(value) => setDisplayMode(value as 'top10' | 'top20' | 'all')}
+                onChange={(value) => setDisplayMode(value as "top10" | "top20" | "all")}
                 disabled={showDemoData}
                 data={[
                   {
-                    value: 'top10',
-                    label: t('usage.controls.top10', 'Top 10'),
+                    value: "top10",
+                    label: t("usage.controls.top10", "Top 10"),
                   },
                   {
-                    value: 'top20',
-                    label: t('usage.controls.top20', 'Top 20'),
+                    value: "top20",
+                    label: t("usage.controls.top20", "Top 20"),
                   },
                   {
-                    value: 'all',
-                    label: t('usage.controls.all', 'All'),
+                    value: "all",
+                    label: t("usage.controls.all", "All"),
                   },
                 ]}
               />
@@ -241,41 +235,41 @@ const AdminUsageSection: React.FC = () => {
                 loading={loading}
                 disabled={showDemoData}
               >
-                {t('usage.controls.refresh', 'Refresh')}
+                {t("usage.controls.refresh", "Refresh")}
               </Button>
             </Group>
           </Group>
 
           <Group>
             <Text size="sm" fw={500}>
-              {t('usage.controls.dataTypeLabel', 'Data Type:')}
+              {t("usage.controls.dataTypeLabel", "Data Type:")}
             </Text>
             <SegmentedControl
               value={dataType}
-              onChange={(value) => setDataType(value as 'all' | 'api' | 'ui')}
+              onChange={(value) => setDataType(value as "all" | "api" | "ui")}
               disabled={showDemoData}
               data={[
                 {
-                  value: 'all',
-                  label: t('usage.controls.dataType.all', 'All'),
+                  value: "all",
+                  label: t("usage.controls.dataType.all", "All"),
                 },
                 {
-                  value: 'api',
-                  label: t('usage.controls.dataType.api', 'API'),
+                  value: "api",
+                  label: t("usage.controls.dataType.api", "API"),
                 },
                 {
-                  value: 'ui',
-                  label: t('usage.controls.dataType.ui', 'UI'),
+                  value: "ui",
+                  label: t("usage.controls.dataType.ui", "UI"),
                 },
               ]}
             />
           </Group>
 
           {/* Statistics Summary */}
-          <Group gap="xl" style={{ flexWrap: 'wrap' }}>
+          <Group gap="xl" style={{ flexWrap: "wrap" }}>
             <div>
               <Text size="sm" c="dimmed">
-                {t('usage.stats.totalEndpoints', 'Total Endpoints')}
+                {t("usage.stats.totalEndpoints", "Total Endpoints")}
               </Text>
               <Text size="lg" fw={600}>
                 {totalEndpoints}
@@ -283,7 +277,7 @@ const AdminUsageSection: React.FC = () => {
             </div>
             <div>
               <Text size="sm" c="dimmed">
-                {t('usage.stats.totalVisits', 'Total Visits')}
+                {t("usage.stats.totalVisits", "Total Visits")}
               </Text>
               <Text size="lg" fw={600}>
                 {totalVisits.toLocaleString()}
@@ -291,7 +285,7 @@ const AdminUsageSection: React.FC = () => {
             </div>
             <div>
               <Text size="sm" c="dimmed">
-                {t('usage.stats.showing', 'Showing')}
+                {t("usage.stats.showing", "Showing")}
               </Text>
               <Text size="lg" fw={600}>
                 {getDisplayModeLabel()}
@@ -299,7 +293,7 @@ const AdminUsageSection: React.FC = () => {
             </div>
             <div>
               <Text size="sm" c="dimmed">
-                {t('usage.stats.selectedVisits', 'Selected Visits')}
+                {t("usage.stats.selectedVisits", "Selected Visits")}
               </Text>
               <Text size="lg" fw={600}>
                 {displayedVisits.toLocaleString()} ({displayedPercentage}%)