Skip to content

Commit 4d9f6dd

Browse files
amiraliemamiamiraliemami
authored
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
1 parent 3d83433 commit 4d9f6dd

33 files changed

+1254
-1258
lines changed

‎Makefile‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ clean:
1010
find . -type f -name "*.py[co]" -delete
1111
find . -type d -name "__pycache__" -delete
1212
find . -type d -name ".pytest_cache" -exec rm -rf {} +
13+
find . -type d -name ".mypy_cache" -exec rm -rf {} +
14+
find . -type d -name ".ruff_cache" -exec rm -rf {} +
1315

1416
# Note: Run `make fresh-env psycopg2-binary=true` to manually replace psycopg with psycopg2-binary
1517
fresh-env :

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

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
1-
import {
2-
ContentViewModal,
3-
ArchiveContentModal,
4-
} from "@/components/ContentModal";
1+
import { ContentViewModal, ArchiveContentModal } from "./ContentModal";
52
import { appColors, appStyles, sizes } from "@/utils";
63
import { Delete, Edit } from "@mui/icons-material";
74
import { Box, Button, Card, Chip, IconButton, Typography } from "@mui/material";
85
import Link from "next/link";
96
import React from "react";
10-
import { Layout } from "./Layout";
7+
import { Layout } from "../../../components/Layout";
118
import { Tag } from "@/app/content/page";
129

1310
const ContentCard = ({
@@ -36,8 +33,7 @@ const ContentCard = ({
3633
editAccess: boolean;
3734
}) => {
3835
const [openReadModal, setOpenReadModal] = React.useState<boolean>(false);
39-
const [openArchiveModal, setOpenArchiveModal] =
40-
React.useState<boolean>(false);
36+
const [openArchiveModal, setOpenArchiveModal] = React.useState<boolean>(false);
4137

4238
return (
4339
<>
@@ -51,16 +47,13 @@ const ContentCard = ({
5147
display: "flex",
5248
flexDirection: "column",
5349
justifyContent: "space-between",
50+
maxHeight: "250px",
5451
},
5552
appStyles.hoverShadow,
5653
appStyles.shadow,
5754
]}
5855
>
59-
<Layout.FlexBox
60-
flexDirection="row"
61-
justifyContent="end"
62-
sx={{ width: "98%" }}
63-
>
56+
<Layout.FlexBox flexDirection="row" justifyContent="end" sx={{ width: "98%" }}>
6457
{tags && tags.length > 0 && (
6558
<Box display="flex" flexDirection="row" alignItems="center">
6659
<Chip
@@ -83,27 +76,26 @@ const ContentCard = ({
8376
)}
8477
</Box>
8578
)}
79+
{/* else just a space */}
80+
{!tags || tags.length === 0 ? <Box height={"22px"} /> : null}
8681
</Layout.FlexBox>
8782
<Typography variant="h6" noWrap={true}>
8883
{title}
8984
</Typography>
9085
<Typography
9186
variant="body2"
9287
color={appColors.darkGrey}
93-
sx={appStyles.threeLineEllipsis}
88+
sx={appStyles.twoLineEllipsis}
9489
>
9590
{text}
9691
</Typography>
9792
<Layout.Spacer multiplier={0.5} />
9893
<Typography variant="body2" color={appColors.darkGrey}>
99-
Last updated{" "}
94+
Last updated:{" "}
10095
{new Date(last_modified).toLocaleString(undefined, {
10196
day: "numeric",
102-
month: "numeric",
97+
month: "short",
10398
year: "numeric",
104-
hour: "numeric",
105-
minute: "numeric",
106-
hour12: true,
10799
})}
108100
</Typography>
109101
<Layout.Spacer multiplier={0.75} />

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

Lines changed: 5 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,13 @@
11
import { appColors, sizes } from "@/utils";
22
import { Close, Delete, Edit, ThumbDown, ThumbUp } from "@mui/icons-material";
3-
import {
4-
Box,
5-
Button,
6-
Chip,
7-
Fade,
8-
IconButton,
9-
Modal,
10-
Typography,
11-
} from "@mui/material";
3+
import { Box, Button, Chip, Fade, IconButton, Modal, Typography } from "@mui/material";
124
import Dialog from "@mui/material/Dialog";
135
import DialogActions from "@mui/material/DialogActions";
146
import DialogContent from "@mui/material/DialogContent";
157
import DialogContentText from "@mui/material/DialogContentText";
168
import DialogTitle from "@mui/material/DialogTitle";
179
import Link from "next/link";
18-
import LanguageButtonBar from "./LanguageButtonBar";
19-
import { Layout } from "./Layout";
10+
import { Layout } from "@/components/Layout";
2011
import { Tag } from "@/app/content/page";
2112

2213
const ContentViewModal = ({
@@ -62,10 +53,7 @@ const ContentViewModal = ({
6253
p: sizes.doubleBaseGap,
6354
}}
6455
>
65-
<Layout.FlexBox
66-
flexDirection={"row"}
67-
justifyContent={"space-between"}
68-
>
56+
<Layout.FlexBox flexDirection={"row"} justifyContent={"space-between"}>
6957
<Typography variant="h5">Content #{content_id}</Typography>
7058
<IconButton onClick={onClose}>
7159
<Close />
@@ -98,7 +86,6 @@ const ContentViewModal = ({
9886
</Layout.FlexBox>
9987
)}
10088
<Layout.Spacer multiplier={0.5} />
101-
{/* <LanguageButtonBar expandable={false} /> */}
10289
<Layout.FlexBox
10390
flexDirection={"column"}
10491
sx={{
@@ -111,10 +98,7 @@ const ContentViewModal = ({
11198
borderRadius: 3,
11299
}}
113100
>
114-
<Typography
115-
variant="subtitle1"
116-
sx={{ marginBottom: sizes.baseGap }}
117-
>
101+
<Typography variant="subtitle1" sx={{ marginBottom: sizes.baseGap }}>
118102
{title}
119103
</Typography>
120104
<Typography
@@ -149,10 +133,7 @@ const ContentViewModal = ({
149133
</Button>
150134
<Layout.Spacer horizontal multiplier={1} />
151135
</Layout.FlexBox>
152-
<Layout.FlexBox
153-
flexDirection={"row"}
154-
justifyContent={"space-between"}
155-
>
136+
<Layout.FlexBox flexDirection={"row"} justifyContent={"space-between"}>
156137
<Typography variant="body2" color={appColors.darkGrey}>
157138
Last modified{" "}
158139
{new Date(last_modified).toLocaleString(undefined, {

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

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { useAuth } from "@/utils/auth";
1212
import Papa from "papaparse";
1313
import { useState } from "react";
1414
import { LoadingButton } from "@mui/lab";
15-
import { Content } from "../app/content/edit/page";
15+
import { Content } from "../edit/page";
1616

1717
const MAX_CARDS_TO_FETCH = 200;
1818

@@ -60,13 +60,10 @@ const DownloadModal = ({
6060
// fetch all tags (to be able to map tag IDs to tag names)
6161
const tags_json = await apiCalls.getTagList(token!);
6262
const tag_list = Object.values<Tag>(tags_json);
63-
const tag_dict = tag_list.reduce(
64-
(acc: Record<string, string>, tag: Tag) => {
65-
acc[tag.tag_id] = tag.tag_name;
66-
return acc;
67-
},
68-
{},
69-
);
63+
const tag_dict = tag_list.reduce((acc: Record<string, string>, tag: Tag) => {
64+
acc[tag.tag_id] = tag.tag_name;
65+
return acc;
66+
}, {});
7067
// convert fetched contents to list of json objects
7168
const list_json_contents = Object.values(raw_json_contents);
7269
// Convert to ContentDownload structure with tag names and metadata as string
@@ -116,13 +113,16 @@ const DownloadModal = ({
116113
}
117114
const csv = Papa.unparse(list_json_content_download);
118115
const now = new Date();
119-
const timestamp = `${now.getFullYear()}_${String(
120-
now.getMonth() + 1,
121-
).padStart(2, "0")}_${String(now.getDate()).padStart(2, "0")}_${String(
122-
now.getHours(),
123-
).padStart(2, "0")}${String(now.getMinutes()).padStart(2, "0")}${String(
124-
now.getSeconds(),
125-
).padStart(2, "0")}`;
116+
const timestamp = `${now.getFullYear()}_${String(now.getMonth() + 1).padStart(
117+
2,
118+
"0",
119+
)}_${String(now.getDate()).padStart(2, "0")}_${String(now.getHours()).padStart(
120+
2,
121+
"0",
122+
)}${String(now.getMinutes()).padStart(2, "0")}${String(now.getSeconds()).padStart(
123+
2,
124+
"0",
125+
)}`;
126126
const filename = `content_${timestamp}.csv`;
127127
downloadCSV(csv, filename);
128128
} catch (error) {

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

Lines changed: 5 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -13,21 +13,15 @@ import { apiCalls } from "@/utils/api";
1313
import { useAuth } from "@/utils/auth";
1414
import { LoadingButton } from "@mui/lab";
1515
import NoteAddIcon from "@mui/icons-material/NoteAdd";
16-
import { Layout } from "./Layout";
16+
import { Layout } from "@/components/Layout";
1717
import { appColors, sizes } from "@/utils";
1818

1919
interface CustomError {
2020
type: string;
2121
description: string;
2222
}
2323

24-
const ImportModal = ({
25-
open,
26-
onClose,
27-
}: {
28-
open: boolean;
29-
onClose: () => void;
30-
}) => {
24+
const ImportModal = ({ open, onClose }: { open: boolean; onClose: () => void }) => {
3125
const { token, accessLevel } = useAuth();
3226
const [loading, setLoading] = useState(false);
3327
const [selectedFile, setSelectedFile] = useState<File | null>(null);
@@ -55,10 +49,7 @@ const ImportModal = ({
5549
// add artifical delay to show loading spinner (for UX)
5650
await new Promise((resolve) => setTimeout(resolve, 500));
5751
try {
58-
const response = await apiCalls.bulkUploadContents(
59-
selectedFile,
60-
token!,
61-
);
52+
const response = await apiCalls.bulkUploadContents(selectedFile, token!);
6253
if (response.status === 200) {
6354
setImportSuccess(true);
6455
setSelectedFile(null);
@@ -113,8 +104,7 @@ const ImportModal = ({
113104
<DialogContent>
114105
<DialogContentText id="alert-dialog-description">
115106
<p>
116-
You can use this feature to import new contents from a CSV file into
117-
AAQ.
107+
You can use this feature to import new contents from a CSV file into AAQ.
118108
</p>
119109
<p>
120110
The CSV file should have the following columns:
@@ -158,11 +148,7 @@ const ImportModal = ({
158148
onChange={handleFileChange}
159149
/>
160150
<label htmlFor="choose-file">
161-
<Button
162-
variant="outlined"
163-
component="span"
164-
startIcon={<NoteAddIcon />}
165-
>
151+
<Button variant="outlined" component="span" startIcon={<NoteAddIcon />}>
166152
Attach File
167153
</Button>
168154
</label>

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ import React from "react";
77
interface PageNavigationProps {
88
page: number;
99
setPage: React.Dispatch<React.SetStateAction<number>>;
10-
max_pages: number;
10+
maxPages: number;
1111
}
1212

1313
export const PageNavigation: React.FC<PageNavigationProps> = ({
1414
page,
1515
setPage,
16-
max_pages,
16+
maxPages,
1717
}) => {
1818
return (
1919
<Layout.FlexBox
@@ -32,17 +32,17 @@ export const PageNavigation: React.FC<PageNavigationProps> = ({
3232
</IconButton>
3333
<Layout.Spacer horizontal multiplier={0.5} />
3434
<Typography variant="subtitle2">
35-
{max_pages === 0 ? 0 : page} of {max_pages}
35+
{maxPages === 0 ? 0 : page} of {maxPages}
3636
</Typography>
3737
<Layout.Spacer horizontal multiplier={0.5} />
3838
<IconButton
3939
onClick={() => {
40-
page < max_pages && setPage(page + 1);
40+
page < maxPages && setPage(page + 1);
4141
}}
42-
disabled={page >= max_pages}
42+
disabled={page >= maxPages}
4343
sx={{ borderRadius: "50%", height: "30px", width: "30px" }}
4444
>
45-
<ChevronRight color={page < max_pages ? "primary" : "disabled"} />
45+
<ChevronRight color={page < maxPages ? "primary" : "disabled"} />
4646
</IconButton>
4747
</Layout.FlexBox>
4848
);

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,7 @@ export interface SearchBarProps {
99
setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
1010
}
1111

12-
export const SearchBar: React.FC<SearchBarProps> = ({
13-
searchTerm,
14-
setSearchTerm,
15-
}) => {
12+
export const SearchBar: React.FC<SearchBarProps> = ({ searchTerm, setSearchTerm }) => {
1613
return (
1714
<Layout.FlexBox alignItems="center" sx={{ width: "100%" }}>
1815
<TextField

0 commit comments

Comments
 (0)