Upstream: Fix image permissions & various small frontend issues

backend/images/tests.py

@@ -22,3 +22,46 @@ def test_wrong_file_extension(self):
             res = self.post('/api/image/upload/', {
                 'file': f,
             }, status_code=400)
+
+
+class TestRemoveImage(ComsolTest):
+    filename = None
+
+    def mySetUp(self):
+        # Upload an image as user 0
+        self.user = self.loginUsers[0]
+        with open("static/test_uploadrm.svg", "rb") as f:
+            res = self.post(
+                "/api/image/upload/",
+                {
+                    "file": f,
+                },
+            )
+
+        self.get(f"/api/image/get/{res['filename']}/", as_json=False, status_code=200)
+
+        self.filename = res["filename"]
+
+    def test_cannot_remove_non_owned_image(self):
+        # If different non-admin user, shouldn't be able to remove image
+        self.user = self.loginUsers[1]
+        self.user["admin"] = False
+
+        self.post(f"/api/image/remove/{self.filename}/", {}, status_code=403)
+        self.get(f"/api/image/get/{self.filename}/", as_json=False, status_code=200)
+
+    def test_can_delete_owned_image(self):
+        # If same user, should be able to remove image
+        self.user = self.loginUsers[0]
+        self.user["admin"] = False
+
+        self.post(f"/api/image/remove/{self.filename}/", {}, status_code=200)
+        self.get(f"/api/image/get/{self.filename}/", as_json=False, status_code=404)
+
+    def test_admin_can_delete_non_owned_image(self):
+        # If admin, should be able to delete other people's images too
+        self.user = self.loginUsers[1]
+        self.user["admin"] = True
+
+        self.post(f"/api/image/remove/{self.filename}/", {}, status_code=200)
+        self.get(f"/api/image/get/{self.filename}/", as_json=False, status_code=404)

backend/images/views.py

@@ -33,6 +33,10 @@ def upload_image(request):
 @auth_check.require_login
 def remove_image(request, filename):
     image = get_object_or_404(Image, filename=filename)
+
+    if not (image.owner == request.user or auth_check.has_admin_rights(request)):
+        return response.not_allowed()
+
     s3_util.delete_file(settings.COMSOL_IMAGE_DIR, filename)
     image.delete()
     return response.success()

frontend/src/api/hooks.ts

@@ -219,7 +219,9 @@ export const loadMetaCategories = async () => {
     .value as MetaCategory[];
 };
 export const useMetaCategories = () => {
-  const { error, loading, data, mutate } = useRequest(loadMetaCategories);
+  const { error, loading, data, mutate } = useRequest(loadMetaCategories, {
+    cacheKey: "listmetacategories",
+  });
   return [error, loading, data, mutate] as const;
 };
 export const loadList = async (slug: string) => {
@@ -477,6 +479,7 @@ export const loadDocuments = async (categorySlug: string) => {
 export const useDocuments = (categorySlug: string) => {
   const { data } = useRequest(() => loadDocuments(categorySlug), {
     cacheKey: `documents-${categorySlug}`,
+    refreshDeps: [categorySlug],
   });
   return [data] as const;
 };

frontend/src/components/Navbar/BottomHeader.module.css

@@ -6,12 +6,12 @@
   height: 3.5rem;
   box-sizing: border-box;
   border-bottom: 2px solid var(--mantine-color-gray-2);
+  color: var(--mantine-color-anchor);
   background: var(--mantine-color-body);
   position: fixed;
   top: 0;
   width: 100%;
   z-index: var(--mantine-z-index-app);
-  /* box-shadow: var(--mantine-shadow-xs); */
 
   /* Add a margin left equal to the width of the scorllbar, so the navbar doesn't
   shift around depending on page length. A similar style is applied to the body.*/
@@ -38,11 +38,7 @@
 .title {
   display: flex;
   text-decoration: none;
-  color: rgba(51, 51, 51, 1);
   font-weight: 400;
   font-size: 1.25rem;
-
-  @mixin dark {
-    color: rgba(255, 255, 255, 0.8);
-  }
+  color: inherit; /* don't try to apply default mantine link styles */
 }

frontend/src/components/Navbar/ExternalNav.module.css

@@ -1,13 +1,19 @@
 .navItem {
-  padding-left: 0rem;
-  padding-right: 0rem;
+  padding-left: 0;
+  padding-right: 0;
   text-align: right;
   display: initial;
   cursor: pointer;
   font-size: 1.125rem;
   line-height: 1.75rem;
   text-transform: uppercase;
+  white-space: nowrap;
   font-weight: 500;
+  /* don't use mantine-color-anchor (applied to all Anchor elements) but instead
+   * use any color set by parent. This is a fix for text becoming black on light
+   * mode even on dark background
+   */
+  color: inherit;
 
   @media (max-width: $mantine-breakpoint-md) {
     text-align: left;

frontend/src/components/Navbar/ExternalNav.tsx

@@ -46,8 +46,8 @@ const ExternalNavElement: React.FC<Props> = ({
             component="div"
             size="lg"
             className={clsx(classes.navItem, classes.link, textClassName)}
+            display="flex"
             style={{
-              display: "flex",
               padding: 0,
               cursor: "pointer",
             }}

frontend/src/components/Navbar/MobileHeader.module.css

@@ -1,13 +1,16 @@
 .navbar {
   min-height: 3.5rem;
-  color: var(--mantine-color-text);
+  color: var(--mantine-color-anchor);
   width: 100%;
   box-sizing: border-box;
   border-bottom: 2px solid var(--mantine-color-gray-2);
+  @mixin dark {
+    border-bottom: 2px solid var(--mantine-color-dark-6);
+  }
 }
 
 .navItem {
-  color: var(--mantine-color-text);
+  color: var(--mantine-color-anchor);
 }
 
 .logoLine {

frontend/src/components/Navbar/QuickSearch/QuickSearchBox.tsx

@@ -387,6 +387,7 @@ export const QuickSearchBox: React.FC = () => {
                 type="categories"
                 results={categoryResults}
                 currentSelection={currentSelection}
+                onClick={close}
               />
               {!searchResults.loading && searchResults.error && (
                 <Text c="dimmed" mx="auto">
@@ -397,21 +398,25 @@ export const QuickSearchBox: React.FC = () => {
                 type="examNames"
                 results={networkResults.examNames}
                 currentSelection={currentSelection}
+                onClick={close}
               />
               <QuickSearchResults
                 type="examPages"
                 results={networkResults.examPages}
                 currentSelection={currentSelection}
+                onClick={close}
               />
               <QuickSearchResults
                 type="answers"
                 results={networkResults.answers}
                 currentSelection={currentSelection}
+                onClick={close}
               />
               <QuickSearchResults
                 type="comments"
                 results={networkResults.comments}
                 currentSelection={currentSelection}
+                onClick={close}
               />
               <Divider variant="dashed" label="More" labelPosition="left" />
               <QuickSearchResult

frontend/src/components/Navbar/QuickSearch/QuickSearchResults.tsx

@@ -25,6 +25,7 @@ type QuickSeachResultsProps = {
       | undefined;
     index: number;
   };
+  onClick: () => void;
 } & (
   | {
       type: "categories";
@@ -61,6 +62,7 @@ export const QuickSearchResults = ({
   type,
   results,
   currentSelection,
+  onClick,
 }: QuickSeachResultsProps) => {
   // Memoize the expensive rendering of result content so we don't try to
   // re-render the content if only the current selection index changes
@@ -166,7 +168,7 @@ export const QuickSearchResults = ({
                 isSelected={isSelected}
                 key={key}
                 link={link}
-                onClick={close}
+                onClick={onClick}
               >
                 {element}
               </QuickSearchResult>
@@ -189,7 +191,7 @@ export const QuickSearchResults = ({
                 isSelected={isSelected}
                 key={key}
                 link={link}
-                onClick={close}
+                onClick={onClick}
               >
                 {element}
               </QuickSearchResult>
@@ -212,7 +214,7 @@ export const QuickSearchResults = ({
                 isSelected={isSelected}
                 key={key}
                 link={link}
-                onClick={close}
+                onClick={onClick}
               >
                 {element}
               </QuickSearchResult>
@@ -235,7 +237,7 @@ export const QuickSearchResults = ({
                 isSelected={isSelected}
                 key={key}
                 link={link}
-                onClick={close}
+                onClick={onClick}
               >
                 {element}
               </QuickSearchResult>
@@ -258,7 +260,7 @@ export const QuickSearchResults = ({
                 isSelected={isSelected}
                 key={key}
                 link={link}
-                onClick={close}
+                onClick={onClick}
               >
                 {element}
               </QuickSearchResult>
@@ -268,5 +270,5 @@ export const QuickSearchResults = ({
       );
 
     return <></>;
-  }, [results.length, type, contents, currentSelection]);
+  }, [results.length, type, contents, currentSelection, onClick]);
 };

frontend/src/components/markdown-text.tsx

@@ -1,4 +1,4 @@
-import ReactMarkdown, { Components, defaultUrlTransform }  from "react-markdown";
+import ReactMarkdown, { Components, defaultUrlTransform } from "react-markdown";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import rehypeKatex from "rehype-katex";
@@ -163,7 +163,12 @@ const errorMessage = (
   </Alert>
 );
 
-const MarkdownText: React.FC<Props> = ({ value, highlight_matches, localLinkBase, ignoreHtml }) => {
+const MarkdownText: React.FC<Props> = ({
+  value,
+  highlight_matches,
+  localLinkBase,
+  ignoreHtml,
+}) => {
   // Make sure we don't generate a RegExp with empty text, as that will match
   // everything (including the empty string) and can cause mayhem with
   // highlighting.