Migrate reports

Author: lasseklovstad

app/.server/db/report.ts

@@ -1,7 +1,7 @@
 import { desc, eq, sql } from "drizzle-orm";
 
 import { db } from "db/config.server";
-import { gataReport, oldReportFiles } from "db/schema";
+import { gataReport, oldReportFiles, cloudinaryImage, reportFiles } from "db/schema";
 import { ReportType } from "~/types/GataReport.type";
 import type { ReportSchema } from "~/utils/formSchema";
 
@@ -111,3 +111,35 @@ export const updateReportContent = async (reportId: string, content: string, log
       })
       .where(eq(gataReport.id, reportId));
 };
+
+export const getAllReportsWithOldFiles = async () => {
+   const reports = await db
+      .select({
+         id: gataReport.id,
+         content: gataReport.content,
+      })
+      .from(gataReport);
+
+   const reportsWithFiles = await Promise.all(
+      reports.map(async (report) => {
+         const files = await db.select().from(oldReportFiles).where(eq(oldReportFiles.reportId, report.id));
+         return { ...report, oldFiles: files };
+      })
+   );
+
+   return reportsWithFiles.filter((report) => report.oldFiles.length > 0);
+};
+
+export const batchInsertCloudImages = async (images: Array<typeof cloudinaryImage.$inferInsert>) => {
+   if (images.length === 0) return;
+   await db.insert(cloudinaryImage).values(images);
+};
+
+export const batchInsertReportFiles = async (reportFileRecords: Array<{ reportId: string; fileId: string }>) => {
+   if (reportFileRecords.length === 0) return;
+   await db.insert(reportFiles).values(reportFileRecords);
+};
+
+export const updateReportContentOnly = async (reportId: string, content: string) => {
+   await db.update(gataReport).set({ content }).where(eq(gataReport.id, reportId));
+};

app/routes/report.tsx

@@ -1,12 +1,13 @@
-import { Plus } from "lucide-react";
-import { Link, Outlet } from "react-router";
+import { Plus, Upload } from "lucide-react";
+import { Form, Link, Outlet, useNavigation } from "react-router";
 
 import { getReportsSimple } from "~/.server/db/report";
 import { PageLayout } from "~/components/PageLayout";
 import { ButtonResponsive } from "~/components/ui/button";
 import { Typography } from "~/components/ui/typography";
 import { ReportType } from "~/types/GataReport.type";
 import { getRequiredUser } from "~/utils/auth.server";
+import { migrateAllReportFilesToBlob } from "~/utils/migrateReportFiles.server";
 import { isAdmin } from "~/utils/roleUtils";
 
 import type { Route } from "./+types/report";
@@ -21,7 +22,36 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
    return { reports, loggedInUser };
 };
 
-export default function ReportPage({ loaderData: { loggedInUser, reports } }: Route.ComponentProps) {
+export const action = async ({ request }: Route.ActionArgs) => {
+   await getRequiredUser(request);
+
+   const formData = await request.formData();
+   const intent = formData.get("intent");
+
+   if (intent === "migrateAllFiles") {
+      try {
+         const progress = await migrateAllReportFilesToBlob();
+         return {
+            success: true,
+            message: `Migration complete: ${progress.successful} reports migrated successfully, ${progress.failed} failed. Total files: ${progress.totalFiles}`,
+            progress,
+         };
+      } catch (error) {
+         console.error("Migration error:", error);
+         return {
+            success: false,
+            message: error instanceof Error ? error.message : "Migration failed with unknown error",
+         };
+      }
+   }
+
+   return { success: false, message: "Unknown intent" };
+};
+
+export default function ReportPage({ loaderData: { loggedInUser, reports }, actionData }: Route.ComponentProps) {
+   const navigation = useNavigation();
+   const isMigrating = navigation.state === "submitting" && navigation.formData?.get("intent") === "migrateAllFiles";
+
    return (
       <PageLayout>
          <div className="flex justify-between items-center">
@@ -30,6 +60,42 @@ export default function ReportPage({ loaderData: { loggedInUser, reports } }: Ro
             </Typography>
             {isAdmin(loggedInUser) && <ButtonResponsive as={Link} to="new" label="Opprett" icon={<Plus />} />}
          </div>
+
+         {/* Migration Section */}
+         <div className="my-4 p-4 bg-gray-50 rounded-lg border border-gray-200">
+            <Typography variant="h3" className="mb-2">
+               Admin: File Migration
+            </Typography>
+            <Typography className="text-sm text-gray-600 mb-3">
+               Migrate all report files from Cloudinary and oldReportFiles to Azure Blob Storage. This will update all
+               content references to point directly to Azure URLs.
+            </Typography>
+            <Form method="post">
+               <input type="hidden" name="intent" value="migrateAllFiles" />
+               <ButtonResponsive
+                  as="button"
+                  type="submit"
+                  label={isMigrating ? "Migrating..." : "Migrate All Files to Azure"}
+                  icon={<Upload />}
+                  disabled={isMigrating}
+               />
+            </Form>
+            {actionData && (
+               <div
+                  className={`mt-3 p-3 rounded ${
+                     actionData.success ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"
+                  }`}
+               >
+                  <Typography className="font-semibold">{actionData.message}</Typography>
+                  {actionData.progress && (
+                     <Typography className="text-sm mt-1">
+                        Reports processed: {actionData.progress.completed} / {actionData.progress.totalReports}
+                     </Typography>
+                  )}
+               </div>
+            )}
+         </div>
+
          <ul aria-labelledby="report-page-title" className="divide-y my-4">
             {reports.map((report) => {
                return (