Linter fixes

src/api/index.ts

@@ -27,12 +27,12 @@ import type {
   Action,
   ApiCtx,
   AppCtx,
+  AptibleAiCtx,
   AuthApiCtx,
   DeployApiCtx,
   HalEmbedded,
   MetricTunnelCtx,
   PortalCtx,
-  AptibleAiCtx,
 } from "@app/types";
 import * as Sentry from "@sentry/react";
 
@@ -43,7 +43,13 @@ export interface ThunkCtx<P = any, D = any>
   json: D | null;
 }
 
-type EndpointUrl = "auth" | "api" | "billing" | "metrictunnel" | "portal" | "aptibleai";
+type EndpointUrl =
+  | "auth"
+  | "api"
+  | "billing"
+  | "metrictunnel"
+  | "portal"
+  | "aptibleai";
 
 const log = createLog("fx");
 
@@ -374,7 +380,6 @@ portalApi.use(requestPortal);
 portalApi.use(tokenMdw);
 portalApi.use(mdw.fetch());
 
-
 export const aptibleAiApi = createApi<AptibleAiCtx>(
   createThunks({ supervisor: takeEvery }),
 );

src/app/router.tsx

@@ -151,13 +151,13 @@ import {
   VerifyEmailRequired,
 } from "@app/ui";
 import { DeploymentDetailLayout } from "@app/ui/layouts/deployment-detail-layout";
+import { AppDetailDiagnosticsPage } from "@app/ui/pages/app-detail-diagnostics";
 import { EnvironmentEndpointsPage } from "@app/ui/pages/environment-detail-endpoints";
 import { GithubIntegrationPage } from "@app/ui/pages/github-integration";
 import { SettingsProfilePage } from "@app/ui/pages/settings-profile";
 import { SourcesSetupPage } from "@app/ui/pages/sources-setup";
 import { type RouteObject, createBrowserRouter } from "react-router-dom";
 import { Tuna } from "./tuna";
-import { AppDetailDiagnosticsPage } from "@app/ui/pages/app-detail-diagnostics";
 
 const trackingPatch = (appRoute: RouteObject) => ({
   ...appRoute,

src/aptible-ai/index.ts

@@ -1,6 +1,5 @@
 import { aptibleAiApi } from "@app/api";
-import { Dashboard } from "@app/types";
-
+import type { Dashboard } from "@app/types";
 
 export const createDashboard = aptibleAiApi.post<{
   symptoms: string;
@@ -30,7 +29,6 @@ export const pollDashboard = aptibleAiApi.get<{
   yield* next();
 });
 
-
 export interface DashboardResponse {
   id: number;
 }
@@ -44,9 +42,7 @@ export const defaultDashboardResponse = (
   };
 };
 
-export const deserializeDashboard = (
-  payload: DashboardResponse,
-): Dashboard => {
+export const deserializeDashboard = (payload: DashboardResponse): Dashboard => {
   return {
     id: `${payload.id}`,
   };

src/deploy/app/index.ts

@@ -412,7 +412,9 @@ export const updateApp = api.put<UpdateApp>("/apps/:id", function* (ctx, next) {
   };
 });
 
-export const appToOption = (app: DeployApp): { key: string; label: string; value: string } => {
+export const appToOption = (
+  app: DeployApp,
+): { key: string; label: string; value: string } => {
   return {
     key: app.id,
     label: app.handle,

src/schema/factory.ts

@@ -913,9 +913,7 @@ export const defaultGithubIntegration = (
   };
 };
 
-export const defaultDashboard = (
-  s: Partial<Dashboard> = {},
-): Dashboard => {
+export const defaultDashboard = (s: Partial<Dashboard> = {}): Dashboard => {
   return {
     id: "",
     ...s,

src/ui/layouts/app-detail-layout.tsx

@@ -13,6 +13,7 @@ import {
 } from "@app/deploy";
 import { fetchDeploymentById, selectDeploymentById } from "@app/deployment";
 import { findLoaderComposite } from "@app/loaders";
+import { selectHasBetaFeatures } from "@app/organizations";
 import { useDispatch, useQuery, useSelector } from "@app/react";
 import {
   appActivityUrl,
@@ -30,6 +31,7 @@ import {
 } from "@app/routes";
 import { setResourceStats } from "@app/search";
 import { fetchSourceById, selectSourceById } from "@app/source";
+import { selectIsImpersonated } from "@app/token";
 import type { DeployApp } from "@app/types";
 import { useEffect, useMemo } from "react";
 import { Link, Outlet, useParams } from "react-router-dom";
@@ -49,8 +51,6 @@ import {
   type TabItem,
 } from "../shared";
 import { AppSidebarLayout } from "./app-sidebar-layout";
-import { selectHasBetaFeatures } from "@app/organizations";
-import { selectIsImpersonated } from "@app/token";
 
 export function AppHeader({
   app,
@@ -172,7 +172,8 @@ function AppPageHeader() {
   const crumbs = [
     { name: environment.handle, to: environmentAppsUrl(environment.id) },
   ];
-  const hasBetaFeatures = useSelector(selectHasBetaFeatures) || useSelector(selectIsImpersonated);
+  const hasBetaFeatures =
+    useSelector(selectHasBetaFeatures) || useSelector(selectIsImpersonated);
   const hasConfigAccess = useSelector((s) =>
     selectUserHasPerms(s, { envId: app.environmentId, scope: "read" }),
   );

src/ui/pages/app-detail-diagnostics.tsx

@@ -1,8 +1,8 @@
+import { selectAppById } from "@app/deploy";
+import { useSelector } from "@app/react";
 import { useParams } from "react-router";
 import { Banner, Box, Group, PermissionGate, tokens } from "../shared";
 import { DiagnosticsCreateForm } from "./diagnostics-create";
-import { selectAppById } from "@app/deploy";
-import { useSelector } from "@app/react";
 
 export function AppDetailDiagnosticsPage() {
   const { id = "" } = useParams();
@@ -15,8 +15,8 @@ export function AppDetailDiagnosticsPage() {
           <strong>New Feature:</strong> Use Aptible AI to diagnose production
           issues related to increased errors, latency or availability.
         </Banner>
-      <h3 className={tokens.type.h3}>Diagnostics</h3>
-      <Box>
+        <h3 className={tokens.type.h3}>Diagnostics</h3>
+        <Box>
           <DiagnosticsCreateForm appId={id} />
         </Box>
       </Group>

src/ui/pages/diagnostics-create.tsx

@@ -4,6 +4,9 @@ import {
   diagnosticsUrl,
 } from "@app/routes";
 import { DateTime } from "luxon";
+import { useEffect, useMemo, useState } from "react";
+import DatePicker from "react-datepicker";
+import { useDispatch, useLoader, useSelector } from "starfx/react";
 import { AppSidebarLayout } from "../layouts";
 import {
   Banner,
@@ -16,13 +19,10 @@ import {
   Tooltip,
 } from "../shared";
 import { AppSelect } from "../shared/select-apps";
-import { useEffect, useMemo, useState } from "react";
-import DatePicker from "react-datepicker";
-import { useDispatch, useLoader, useSelector } from "starfx/react";
 
 import "react-datepicker/dist/react-datepicker.css";
 import { createDashboard } from "@app/aptible-ai";
-import { schema, WebState } from "@app/schema";
+import { type WebState, schema } from "@app/schema";
 import { useNavigate } from "react-router-dom";
 
 export const DiagnosticsCreateForm = ({ appId }: { appId: string }) => {
@@ -43,7 +43,7 @@ export const DiagnosticsCreateForm = ({ appId }: { appId: string }) => {
   // invalid.
   const now = useMemo(
     () => DateTime.now().minus({ minutes: DateTime.local().offset }),
-    []
+    [],
   );
 
   const timePresets = [
@@ -60,7 +60,7 @@ export const DiagnosticsCreateForm = ({ appId }: { appId: string }) => {
   const [timePreset, setTimePreset] = useState(timePresets[2].value);
 
   const [startDate, setStartDate] = useState<DateTime>(
-    DateTime.fromISO(timePreset)
+    DateTime.fromISO(timePreset),
   );
   const onSelectStartDate = (date: Date) => {
     const dateTime = DateTime.fromJSDate(date);
@@ -100,7 +100,7 @@ export const DiagnosticsCreateForm = ({ appId }: { appId: string }) => {
       startDate !== null &&
       endDate !== null &&
       startDate < endDate,
-    [symptoms, appId, startDate, endDate]
+    [symptoms, appId, startDate, endDate],
   );
 
   // Submit the form.
@@ -111,7 +111,7 @@ export const DiagnosticsCreateForm = ({ appId }: { appId: string }) => {
     end: endDate.toUTC(0, { keepLocalTime: true }).toJSDate(),
   });
   const dashboardData = useSelector((s: WebState) =>
-    schema.cache.selectById(s, { id: submitAction.payload.key })
+    schema.cache.selectById(s, { id: submitAction.payload.key }),
   );
   const { isLoading } = useLoader(submitAction);
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {

src/ui/pages/diagnostics-detail.tsx

@@ -1,19 +1,19 @@
+import { selectAptibleAiUrl } from "@app/config";
+import { useSelector } from "@app/react";
 import { diagnosticsCreateUrl, diagnosticsDetailUrl } from "@app/routes";
-import { AppSidebarLayout } from "../layouts";
-import { Breadcrumbs, LoadingSpinner, Loading } from "../shared";
+import { selectAccessToken } from "@app/token";
 import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
+import { AppSidebarLayout } from "../layouts";
+import { Breadcrumbs, Loading, LoadingSpinner } from "../shared";
 import { Button } from "../shared/button";
-import { selectAptibleAiUrl } from "@app/config";
-import { useSelector } from "@app/react";
-import { selectAccessToken } from "@app/token";
 
 const loadingMessages = [
   "Consulting the tech support crystal ball...",
   "Teaching hamsters to debug code...",
   "Bribing the servers with virtual cookies...",
   "Performing diagnostic interpretive dance...",
-  "Teaching the AI to be less artificial and more intelligent..."
+  "Teaching the AI to be less artificial and more intelligent...",
 ];
 
 export const DiagnosticsDetailPage = () => {
@@ -79,7 +79,7 @@ export const DiagnosticsDetailPage = () => {
           },
           {
             name: `${id}`,
-            to: diagnosticsDetailUrl(`${id}`)
+            to: diagnosticsDetailUrl(`${id}`),
           },
         ]}
       />

src/ui/shared/loading.tsx

@@ -18,6 +18,8 @@ export const Loading = ({
 
 export const LoadingSpinner = () => (
   <svg
+    role="img"
+    aria-label="loading spinner"
     className="animate-spin h-[20px] w-[20px] text-gray-500"
     xmlns="http://www.w3.org/2000/svg"
     fill="none"

src/ui/shared/select-apps.tsx

@@ -1,8 +1,4 @@
-import {
-  appToOption,
-  fetchApps,
-  selectAppsByEnvId,
-} from "@app/deploy";
+import { appToOption, fetchApps, selectAppsByEnvId } from "@app/deploy";
 import { useQuery, useSelector } from "@app/react";
 import { EmptyResources, ErrorResources } from "./load-resources";
 import { Loading } from "./loading";