Add doc validation (#532)

* add is_validated and is_active to content table

* Set up backend to make validation work

* add is archived

* Make card count get fetched when indexing is fetched

* Make contents refresh when cards are validated

* Fix typeerror

* Change wording of buttons

* fix ui issue where card select multiple was messing up UI since there were too many buttons on screen

* Address PR comment

* Fix admin app bug and changed container in workflow to node:20-bookworm

---------

Co-authored-by: Carlos Samey <carlossamey@gmail.com>

Author: ziakhan04

.github/workflows/retrieval-validation.yaml

@@ -17,7 +17,7 @@ permissions:
 jobs:
   validate:
     runs-on: ubuntu-22.04
-    container: node:20.7-bullseye
+    container: node:20-bookworm
 
     services:
       postgres:

.github/workflows/tests.yaml

@@ -15,7 +15,7 @@ env:
 jobs:
   alembic-tests:
     runs-on: ubuntu-22.04
-    container: node:20.7-bullseye
+    container: node:20-bookworm
     services:
       postgres:
         image: pgvector/pgvector:pg16
@@ -64,7 +64,7 @@ jobs:
           python -m pytest -m "not rails and alembic" tests/api/test_alembic_migrations.py
   unit-tests:
     runs-on: ubuntu-22.04
-    container: node:20.7-bullseye
+    container: node:20-bookworm
     services:
       postgres:
         image: pgvector/pgvector:pg16

admin_app/src/app/content/api.ts

@@ -49,6 +49,7 @@ const formatDate = (dateString: string) => {
     second: "2-digit",
   }).format(date);
 };
+
 const getContentList = async ({
   token,
   skip = 0,
@@ -81,6 +82,18 @@ const getContent = async (content_id: number, token: string) => {
   }
 };
 
+const useArchiveContentCard = (token: string) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (content_id: number) => archiveContent(content_id, token),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["unvalidatedCount"] });
+      queryClient.invalidateQueries({ queryKey: ["nextUnvalidatedCard"] });
+    },
+  });
+};
+
 const archiveContent = async (content_id: number, token: string) => {
   try {
     const response = await api.patch(
@@ -197,15 +210,17 @@ const deleteTag = async (tag_id: number, token: string) => {
   }
 };
 
-const useGetIndexingStatus = () => {
-  const { token } = useAuth();
+const useGetIndexingStatus = (token: string) => {
+  const queryClient = useQueryClient();
+
   return useQuery<IndexingStatusResponse>({
     queryKey: ["indexingStatus"],
     queryFn: async () => {
       try {
         const response = await api.get("/docmuncher/status/is_job_running", {
           headers: { Authorization: `Bearer ${token}` },
         });
+        queryClient.invalidateQueries({ queryKey: ["unvalidatedCount"] });
         return response.data;
       } catch (error) {
         const errorMessage = "Error fetching indexing status";
@@ -219,6 +234,70 @@ const useGetIndexingStatus = () => {
   });
 };
 
+const useGetUnvalidatedCardsCount = (token: string) => {
+  return useQuery({
+    queryKey: ["unvalidatedCount"],
+    queryFn: async () => {
+      try {
+        const response = await api.get("/content/unvalidated-count", {
+          headers: { Authorization: `Bearer ${token}` },
+        });
+        return response.data;
+      } catch (error) {
+        const errorMessage = "Error fetching unvalidated count";
+        handleApiError(error, errorMessage);
+        throw error;
+      }
+    },
+    enabled: !!token,
+  });
+};
+
+const useGetNextUnvalidatedCard = (token: string, isEnabled: boolean = false) => {
+  return useQuery({
+    queryKey: ["nextUnvalidatedCard"],
+    queryFn: async () => {
+      try {
+        const response = await api.get("/content/next-unvalidated", {
+          headers: { Authorization: `Bearer ${token}` },
+        });
+        return response.data;
+      } catch (error) {
+        const errorMessage = "Error fetching next unvalidated card";
+        handleApiError(error, errorMessage);
+        throw error;
+      }
+    },
+    enabled: !!token && isEnabled,
+  });
+};
+
+const useValidateContentCard = (token: string) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (content_id: number) => {
+      try {
+        const response = await api.patch(
+          `/content/validate/${content_id}`,
+          {},
+          {
+            headers: { Authorization: `Bearer ${token}` },
+          },
+        );
+        return response.data;
+      } catch (error) {
+        const errorMessage = "Error validating content card";
+        handleApiError(error, errorMessage);
+        throw error;
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["unvalidatedCount"] });
+      queryClient.invalidateQueries({ queryKey: ["nextUnvalidatedCard"] });
+    },
+  });
+};
+
 const usePostDocumentToIndex = (token: string) => {
   const queryClient = useQueryClient();
   return useMutation<DocumentUploadResponse, Error, { file: File }>({
@@ -292,4 +371,8 @@ export {
   useGetIndexingStatus,
   usePostDocumentToIndex,
   getDocIndexingStatusData,
+  useGetUnvalidatedCardsCount,
+  useGetNextUnvalidatedCard,
+  useValidateContentCard,
+  useArchiveContentCard,
 };

admin_app/src/app/content/components/ContentCard.tsx

@@ -203,6 +203,9 @@ const ContentCard = ({
         negative_votes={negative_votes}
         onClose={() => setOpenReadModal(false)}
         editAccess={editAccess}
+        setRefreshKey={function (value: React.SetStateAction<number>): void {
+          throw new Error("Function not implemented.");
+        }}
       />
       <ArchiveContentModal
         content_id={content_id}

admin_app/src/app/content/components/ContentModal.tsx

@@ -11,6 +11,7 @@ import Link from "next/link";
 import { Layout } from "@/components/Layout";
 import { Tag } from "@/app/content/page";
 import { CustomError } from "@/utils/api";
+import { useValidateContentCard, useArchiveContentCard } from "../api";
 
 const ContentViewModal = ({
   title,
@@ -23,20 +24,27 @@ const ContentViewModal = ({
   tags,
   open,
   onClose,
+  setRefreshKey,
   editAccess,
+  validation_mode = false,
 }: {
   title: string;
   text: string;
   content_id: number;
   display_number: number;
   last_modified: string;
-  tags: Tag[];
+  tags?: Tag[];
   positive_votes: number;
   negative_votes: number;
   open: boolean;
   onClose: () => void;
+  setRefreshKey?: React.Dispatch<React.SetStateAction<number>>;
   editAccess: boolean;
+  validation_mode?: boolean;
 }) => {
+  const token = typeof window !== "undefined" ? localStorage.getItem("token") : null;
+  const { mutate: validateCard } = useValidateContentCard(token!);
+  const { mutate: archiveContent } = useArchiveContentCard(token!);
   return (
     <Modal
       open={open as boolean}
@@ -124,16 +132,51 @@ const ContentViewModal = ({
               paddingInline: 1,
             }}
           >
-            <Button
-              variant="contained"
-              color="primary"
-              disabled={!editAccess}
-              component={Link}
-              href={`/content/edit?content_id=${content_id}`}
-              startIcon={<Edit />}
-            >
-              Edit
-            </Button>
+            {!validation_mode && (
+              <Button
+                variant="contained"
+                color="primary"
+                disabled={!editAccess}
+                component={Link}
+                href={`/content/edit?content_id=${content_id}`}
+                startIcon={<Edit />}
+              >
+                Edit
+              </Button>
+            )}
+            {validation_mode && (
+              <Layout.FlexBox
+                sx={{
+                  flexDirection: "row",
+                  gap: sizes.baseGap,
+                }}
+              >
+                <Button
+                  variant="contained"
+                  color="primary"
+                  disabled={!editAccess}
+                  onClick={() => {
+                    validateCard(content_id);
+                    setTimeout(() => {
+                      setRefreshKey?.((prev) => prev + 1);
+                    }, 500);
+                    setRefreshKey?.((prev) => prev + 1);
+                  }}
+                >
+                  Approve
+                </Button>
+                <Button
+                  variant="outlined"
+                  color="error"
+                  disabled={!editAccess}
+                  onClick={() => {
+                    archiveContent(content_id);
+                  }}
+                >
+                  Reject
+                </Button>
+              </Layout.FlexBox>
+            )}
             <Typography variant="body2" color={appColors.darkGrey}>
               Last modified{" "}
               {new Date(last_modified).toLocaleString(undefined, {