Add icons to relations box (#809)

CERT-Polska · May 8, 2023 · 1156677 · 1156677
1 parent ca23750
commit 1156677
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/mwdb/web/src/components/ShowObject/Views/RelationsBox.jsx b/mwdb/web/src/components/ShowObject/Views/RelationsBox.jsx
@@ -2,7 +2,13 @@ import React, { useState, useContext } from "react";
 import { Link } from "react-router-dom";
 import Pagination from "react-js-pagination";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
+import {
+    faFile,
+    faTable,
+    faScroll,
+    faPlus,
+    faTrash,
+} from "@fortawesome/free-solid-svg-icons";
 import { toast } from "react-toastify";
 
 import { APIContext } from "@mwdb-web/commons/api";
@@ -217,6 +223,7 @@ function RelationsBox(props) {
     return (
         <div className="card card-default">
             <div className="card-header">
+                {props.icon && <FontAwesomeIcon icon={props.icon} size="1x" />}
                 {props.header || "Relations"}
                 {!api.remote ? (
                     <Link
@@ -297,6 +304,7 @@ function TypedRelationsBox(props) {
             <div>
                 <RelationsBox
                     header={`${props.header}: ${typedRelationsCount}`}
+                    icon={props.icon}
                     updateRelationsActivePage={() =>
                         updateActivePage(
                             activePage,
@@ -334,18 +342,21 @@ export default function MultiRelationsBox() {
             <TypedRelationsBox
                 header="Related samples"
                 type="file"
+                icon={faFile}
                 itemsCountPerPage={itemsCountPerPage}
                 {...{ parents, children }}
             />
             <TypedRelationsBox
                 header="Related configs"
                 type="static_config"
+                icon={faTable}
                 itemsCountPerPage={itemsCountPerPage}
                 {...{ parents, children }}
             />
             <TypedRelationsBox
                 header="Related blobs"
                 type="text_blob"
+                icon={faScroll}
                 itemsCountPerPage={itemsCountPerPage}
                 {...{ parents, children }}
             />

diff --git a/mwdb/web/src/styles/index.css b/mwdb/web/src/styles/index.css
@@ -385,6 +385,7 @@ table.table.share-table thead th {
 
 /* Navigation icons */
 .nav-item svg,
+.card-header svg,
 .detailed-view-header svg {
     margin-right: 6pt;
 }