Add testing sidebars (removes playground) (#402)

* Standardise line-lengths on template .env files
* add mypy and ruff cache folders to `make clean`
* Add QA sidebar and update api call
* Format AI response to also show sources
* Remove unused code and make send button deactive if no question
* Make max cards per page dynamic to prevent page scroll
* Fix card sizes + grid column behaviour when sidebar is open
* Add functioning UD sidebar
* Update navbar options
* Remove playground code
* Update docs
* Fix UD Fab positioning and disable New button while saving a rule
* Move content components out of root components folder
* Make UD rules scrollable

Author: amiraliemami

Makefile

@@ -10,6 +10,8 @@ clean:
 	find . -type f -name "*.py[co]" -delete
 	find . -type d -name "__pycache__" -delete
 	find . -type d -name ".pytest_cache" -exec rm -rf {} +
+	find . -type d -name ".mypy_cache" -exec rm -rf {} +
+	find . -type d -name ".ruff_cache" -exec rm -rf {} +
 
 # Note: Run `make fresh-env psycopg2-binary=true` to manually replace psycopg with psycopg2-binary
 fresh-env :

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

@@ -1,13 +1,10 @@
-import {
-  ContentViewModal,
-  ArchiveContentModal,
-} from "@/components/ContentModal";
+import { ContentViewModal, ArchiveContentModal } from "./ContentModal";
 import { appColors, appStyles, sizes } from "@/utils";
 import { Delete, Edit } from "@mui/icons-material";
 import { Box, Button, Card, Chip, IconButton, Typography } from "@mui/material";
 import Link from "next/link";
 import React from "react";
-import { Layout } from "./Layout";
+import { Layout } from "../../../components/Layout";
 import { Tag } from "@/app/content/page";
 
 const ContentCard = ({
@@ -36,8 +33,7 @@ const ContentCard = ({
   editAccess: boolean;
 }) => {
   const [openReadModal, setOpenReadModal] = React.useState<boolean>(false);
-  const [openArchiveModal, setOpenArchiveModal] =
-    React.useState<boolean>(false);
+  const [openArchiveModal, setOpenArchiveModal] = React.useState<boolean>(false);
 
   return (
     <>
@@ -51,16 +47,13 @@ const ContentCard = ({
             display: "flex",
             flexDirection: "column",
             justifyContent: "space-between",
+            maxHeight: "250px",
           },
           appStyles.hoverShadow,
           appStyles.shadow,
         ]}
       >
-        <Layout.FlexBox
-          flexDirection="row"
-          justifyContent="end"
-          sx={{ width: "98%" }}
-        >
+        <Layout.FlexBox flexDirection="row" justifyContent="end" sx={{ width: "98%" }}>
           {tags && tags.length > 0 && (
             <Box display="flex" flexDirection="row" alignItems="center">
               <Chip
@@ -83,27 +76,26 @@ const ContentCard = ({
               )}
             </Box>
           )}
+          {/* else just a space */}
+          {!tags || tags.length === 0 ? <Box height={"22px"} /> : null}
         </Layout.FlexBox>
         <Typography variant="h6" noWrap={true}>
           {title}
         </Typography>
         <Typography
           variant="body2"
           color={appColors.darkGrey}
-          sx={appStyles.threeLineEllipsis}
+          sx={appStyles.twoLineEllipsis}
         >
           {text}
         </Typography>
         <Layout.Spacer multiplier={0.5} />
         <Typography variant="body2" color={appColors.darkGrey}>
-          Last updated{" "}
+          Last updated:{" "}
           {new Date(last_modified).toLocaleString(undefined, {
             day: "numeric",
-            month: "numeric",
+            month: "short",
             year: "numeric",
-            hour: "numeric",
-            minute: "numeric",
-            hour12: true,
           })}
         </Typography>
         <Layout.Spacer multiplier={0.75} />

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

@@ -1,22 +1,13 @@
 import { appColors, sizes } from "@/utils";
 import { Close, Delete, Edit, ThumbDown, ThumbUp } from "@mui/icons-material";
-import {
-  Box,
-  Button,
-  Chip,
-  Fade,
-  IconButton,
-  Modal,
-  Typography,
-} from "@mui/material";
+import { Box, Button, Chip, Fade, IconButton, Modal, Typography } from "@mui/material";
 import Dialog from "@mui/material/Dialog";
 import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
 import DialogContentText from "@mui/material/DialogContentText";
 import DialogTitle from "@mui/material/DialogTitle";
 import Link from "next/link";
-import LanguageButtonBar from "./LanguageButtonBar";
-import { Layout } from "./Layout";
+import { Layout } from "@/components/Layout";
 import { Tag } from "@/app/content/page";
 
 const ContentViewModal = ({
@@ -62,10 +53,7 @@ const ContentViewModal = ({
             p: sizes.doubleBaseGap,
           }}
         >
-          <Layout.FlexBox
-            flexDirection={"row"}
-            justifyContent={"space-between"}
-          >
+          <Layout.FlexBox flexDirection={"row"} justifyContent={"space-between"}>
             <Typography variant="h5">Content #{content_id}</Typography>
             <IconButton onClick={onClose}>
               <Close />
@@ -98,7 +86,6 @@ const ContentViewModal = ({
             </Layout.FlexBox>
           )}
           <Layout.Spacer multiplier={0.5} />
-          {/* <LanguageButtonBar expandable={false} /> */}
           <Layout.FlexBox
             flexDirection={"column"}
             sx={{
@@ -111,10 +98,7 @@ const ContentViewModal = ({
               borderRadius: 3,
             }}
           >
-            <Typography
-              variant="subtitle1"
-              sx={{ marginBottom: sizes.baseGap }}
-            >
+            <Typography variant="subtitle1" sx={{ marginBottom: sizes.baseGap }}>
               {title}
             </Typography>
             <Typography
@@ -149,10 +133,7 @@ const ContentViewModal = ({
               </Button>
               <Layout.Spacer horizontal multiplier={1} />
             </Layout.FlexBox>
-            <Layout.FlexBox
-              flexDirection={"row"}
-              justifyContent={"space-between"}
-            >
+            <Layout.FlexBox flexDirection={"row"} justifyContent={"space-between"}>
               <Typography variant="body2" color={appColors.darkGrey}>
                 Last modified{" "}
                 {new Date(last_modified).toLocaleString(undefined, {

admin_app/src/components/DownloadModal.tsx renamed to admin_app/src/app/content/components/DownloadModal.tsx

@@ -12,7 +12,7 @@ import { useAuth } from "@/utils/auth";
 import Papa from "papaparse";
 import { useState } from "react";
 import { LoadingButton } from "@mui/lab";
-import { Content } from "../app/content/edit/page";
+import { Content } from "../edit/page";
 
 const MAX_CARDS_TO_FETCH = 200;
 
@@ -60,13 +60,10 @@ const DownloadModal = ({
     // fetch all tags (to be able to map tag IDs to tag names)
     const tags_json = await apiCalls.getTagList(token!);
     const tag_list = Object.values<Tag>(tags_json);
-    const tag_dict = tag_list.reduce(
-      (acc: Record<string, string>, tag: Tag) => {
-        acc[tag.tag_id] = tag.tag_name;
-        return acc;
-      },
-      {},
-    );
+    const tag_dict = tag_list.reduce((acc: Record<string, string>, tag: Tag) => {
+      acc[tag.tag_id] = tag.tag_name;
+      return acc;
+    }, {});
     // convert fetched contents to list of json objects
     const list_json_contents = Object.values(raw_json_contents);
     // Convert to ContentDownload structure with tag names and metadata as string
@@ -116,13 +113,16 @@ const DownloadModal = ({
       }
       const csv = Papa.unparse(list_json_content_download);
       const now = new Date();
-      const timestamp = `${now.getFullYear()}_${String(
-        now.getMonth() + 1,
-      ).padStart(2, "0")}_${String(now.getDate()).padStart(2, "0")}_${String(
-        now.getHours(),
-      ).padStart(2, "0")}${String(now.getMinutes()).padStart(2, "0")}${String(
-        now.getSeconds(),
-      ).padStart(2, "0")}`;
+      const timestamp = `${now.getFullYear()}_${String(now.getMonth() + 1).padStart(
+        2,
+        "0",
+      )}_${String(now.getDate()).padStart(2, "0")}_${String(now.getHours()).padStart(
+        2,
+        "0",
+      )}${String(now.getMinutes()).padStart(2, "0")}${String(now.getSeconds()).padStart(
+        2,
+        "0",
+      )}`;
       const filename = `content_${timestamp}.csv`;
       downloadCSV(csv, filename);
     } catch (error) {

admin_app/src/components/ImportModal.tsx renamed to admin_app/src/app/content/components/ImportModal.tsx

@@ -13,21 +13,15 @@ import { apiCalls } from "@/utils/api";
 import { useAuth } from "@/utils/auth";
 import { LoadingButton } from "@mui/lab";
 import NoteAddIcon from "@mui/icons-material/NoteAdd";
-import { Layout } from "./Layout";
+import { Layout } from "@/components/Layout";
 import { appColors, sizes } from "@/utils";
 
 interface CustomError {
   type: string;
   description: string;
 }
 
-const ImportModal = ({
-  open,
-  onClose,
-}: {
-  open: boolean;
-  onClose: () => void;
-}) => {
+const ImportModal = ({ open, onClose }: { open: boolean; onClose: () => void }) => {
   const { token, accessLevel } = useAuth();
   const [loading, setLoading] = useState(false);
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
@@ -55,10 +49,7 @@ const ImportModal = ({
       // add artifical delay to show loading spinner (for UX)
       await new Promise((resolve) => setTimeout(resolve, 500));
       try {
-        const response = await apiCalls.bulkUploadContents(
-          selectedFile,
-          token!,
-        );
+        const response = await apiCalls.bulkUploadContents(selectedFile, token!);
         if (response.status === 200) {
           setImportSuccess(true);
           setSelectedFile(null);
@@ -113,8 +104,7 @@ const ImportModal = ({
       <DialogContent>
         <DialogContentText id="alert-dialog-description">
           <p>
-            You can use this feature to import new contents from a CSV file into
-            AAQ.
+            You can use this feature to import new contents from a CSV file into AAQ.
           </p>
           <p>
             The CSV file should have the following columns:
@@ -158,11 +148,7 @@ const ImportModal = ({
             onChange={handleFileChange}
           />
           <label htmlFor="choose-file">
-            <Button
-              variant="outlined"
-              component="span"
-              startIcon={<NoteAddIcon />}
-            >
+            <Button variant="outlined" component="span" startIcon={<NoteAddIcon />}>
               Attach File
             </Button>
           </label>

admin_app/src/components/PageNavigation.tsx renamed to admin_app/src/app/content/components/PageNavigation.tsx

@@ -7,13 +7,13 @@ import React from "react";
 interface PageNavigationProps {
   page: number;
   setPage: React.Dispatch<React.SetStateAction<number>>;
-  max_pages: number;
+  maxPages: number;
 }
 
 export const PageNavigation: React.FC<PageNavigationProps> = ({
   page,
   setPage,
-  max_pages,
+  maxPages,
 }) => {
   return (
     <Layout.FlexBox
@@ -32,17 +32,17 @@ export const PageNavigation: React.FC<PageNavigationProps> = ({
       </IconButton>
       <Layout.Spacer horizontal multiplier={0.5} />
       <Typography variant="subtitle2">
-        {max_pages === 0 ? 0 : page} of {max_pages}
+        {maxPages === 0 ? 0 : page} of {maxPages}
       </Typography>
       <Layout.Spacer horizontal multiplier={0.5} />
       <IconButton
         onClick={() => {
-          page < max_pages && setPage(page + 1);
+          page < maxPages && setPage(page + 1);
         }}
-        disabled={page >= max_pages}
+        disabled={page >= maxPages}
         sx={{ borderRadius: "50%", height: "30px", width: "30px" }}
       >
-        <ChevronRight color={page < max_pages ? "primary" : "disabled"} />
+        <ChevronRight color={page < maxPages ? "primary" : "disabled"} />
       </IconButton>
     </Layout.FlexBox>
   );

admin_app/src/components/SearchBar.tsx renamed to admin_app/src/app/content/components/SearchBar.tsx

@@ -9,10 +9,7 @@ export interface SearchBarProps {
   setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
 }
 
-export const SearchBar: React.FC<SearchBarProps> = ({
-  searchTerm,
-  setSearchTerm,
-}) => {
+export const SearchBar: React.FC<SearchBarProps> = ({ searchTerm, setSearchTerm }) => {
   return (
     <Layout.FlexBox alignItems="center" sx={{ width: "100%" }}>
       <TextField