Fix tests

santiagolizardo · santiagolizardo · commit 715f99d97e1d · 2024-11-07T22:29:30.000Z
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -1 +1,13 @@
-{ "extends": [] }
+{
+  "extends": "stylelint-config-recommended",
+  "rules": {
+    "property-no-unknown": [
+        true,
+        {
+            "ignoreProperties": [
+                "composes"
+            ]
+        }
+    ]
+  }
+}
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark">
+<html lang="en" data-theme="dark" class="has-navbar-fixed-top">
 
 <head>
     <meta charset="utf-8" />
@@ -13,7 +13,7 @@
     <script src="/environment.js"></script>
 </head>
 
-<body class="has-navbar-fixed-top">
+<body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <script type="module" src="/src/index.tsx"></script>
diff --git a/src/components/badges/UserRoleBadge.jsx b/src/components/badges/UserRoleBadge.jsx
@@ -1,15 +1,14 @@
-const UserRoleBadge = ({ role }) => {
-    const roles = {
-        administrator: "red",
-        superuser: "blue",
-        user: "green",
-        client: "yellow",
-    };
+const roles = {
+    administrator: "red",
+    superuser: "blue",
+    user: "green",
+    client: "yellow",
+};
 
+const UserRoleBadge = ({ role }) => {
     const color = roles.hasOwnProperty(role) ? roles[role] : "yellow";
 
     const styles = {
-        padding: `var(--paddingBox, .3rem .8rem)`,
         borderRadius: "var(--borderRadius, 3px)",
     };
 
diff --git a/src/components/documents/Preview.css b/src/components/documents/Preview.css
@@ -1,8 +1,8 @@
 
 .document-preview {
+    margin: 0 auto;
     margin-top: 40px;
     width: 80%;
-    margin: 0 auto;
     background-color: white;
     padding: 3% 4%;
     border-radius: 5px;
diff --git a/src/components/form/NativeSelect.module.css b/src/components/form/NativeSelect.module.css
diff --git a/src/components/layout/Header.css b/src/components/layout/Header.css
diff --git a/src/components/layout/SidemenuLayout.jsx b/src/components/layout/SidemenuLayout.jsx
@@ -2,8 +2,8 @@ import { Link } from "react-router-dom";
 
 const SidemenuLayout = ({ children, links }) => {
     return (
-        <div className="columns" style={{ marginTop: 40 }}>
-            <div className="column is-one-fifth">
+        <div className="columns">
+            <div className="column is-1">
                 <aside className="menu">
                     {links.map((item) => {
                         if (item.type === "label") {
diff --git a/src/components/layout/dashboard/DashboardLayout.jsx b/src/components/layout/dashboard/DashboardLayout.jsx
@@ -6,11 +6,9 @@ const DashboardLayout = () => {
     return (
         <>
             <Header />
-            <main role="main">
-                <div id="content">
-                    <Outlet />
-                </div>
-            </main>
+            <div>
+                <Outlet />
+            </div>
             <KeyboardShortcuts />
         </>
     );
diff --git a/src/components/layout/dashboard/DashboardPanels.jsx b/src/components/layout/dashboard/DashboardPanels.jsx
@@ -80,7 +80,7 @@ const DashboardPanels = () => {
     if (dashboardConfig === null) return <Loading />;
 
     return (
-        <section>
+        <div>
             <Title type="Home" title="Dashboard" icon={<IconChartBar />} />
             <div>
                 <NativeTabs labels={["View", "Configure"]} tabIndex={tabIndex} tabIndexSetter={tabIndexSetter} />
@@ -127,7 +127,7 @@ const DashboardPanels = () => {
                     </div>
                 )}
             </div>
-        </section>
+        </div>
     );
 };
 
diff --git a/src/components/tasks/Details.jsx b/src/components/tasks/Details.jsx
@@ -143,7 +143,7 @@ const TaskDetails = () => {
 
                     <div>
                         <NativeTabs
-                            labels={["Details", command ?? "Command instructions", "Attachments"]}
+                            labels={["Details", null !== command ? "Command instructions" : null, "Attachments"]}
                             tabIndex={tabIndex}
                             tabIndexSetter={tabIndexSetter}
                         />
@@ -231,12 +231,12 @@ const TaskDetails = () => {
                                     </div>
                                 </div>
                             )}
-                            {null !== command && (
+                            {null !== command && 1 === tabIndex && (
                                 <div>
                                     <CommandInstructions command={command} task={task} />
                                 </div>
                             )}
-                            {1 === tabIndex && (
+                            {(null !== command ? 2 : 1) === tabIndex && (
                                 <div>
                                     <AttachmentsDropzone
                                         parentType={parentType}
diff --git a/src/components/ui/NoResults.jsx b/src/components/ui/NoResults.jsx
@@ -1,8 +1,10 @@
-import { IconExclamationCircle } from './Icons';
+import { IconExclamationCircle } from "./Icons";
 
 export default function NoResults() {
-    return <figure className="NoResults message__container">
-        <IconExclamationCircle />
-        No results
-    </figure>
+    return (
+        <figure className="" style={{ display: "flex", alignItems: "center", gap: "1rem", justifyContent: "center" }}>
+            <IconExclamationCircle />
+            No results
+        </figure>
+    );
 }
diff --git a/src/components/ui/ShellCommand.css b/src/components/ui/ShellCommand.css
@@ -1,6 +1,5 @@
 code {
     display: block;
-    padding: var(--paddingBox);
     border-left: var(--borderWidth) solid var(--primary-color);
     font-family: monospace;
     white-space: pre-line;
@@ -14,7 +13,6 @@ code {
         bottom: 0;
         height: min-content;
         right: 5px;
-        padding: var(--space-xs);
         opacity: .3;
 
         &:hover {
diff --git a/src/components/ui/Title.jsx b/src/components/ui/Title.jsx
@@ -11,8 +11,6 @@ const Title = ({ type, title, icon }) => {
             alignItems: "center",
             justifyContent: "center",
             marginRight: "var(--padding)",
-            width: "var(--iconSizeLarge)",
-            height: "var(--iconSizeLarge)",
         },
     };
     return (
diff --git a/src/components/ui/buttons/DeleteIconButton.jsx b/src/components/ui/buttons/DeleteIconButton.jsx
@@ -6,6 +6,7 @@ import styles from "./DeleteIconButton.module.css";
 const DeleteIconButton = (props) => (
     <NativeButton className={`button ${styles.native} is-danger`} onClick={props.onClick} {...props}>
         <FontAwesomeIcon icon={faTrashCan} />
+        &nbsp;
     </NativeButton>
 );
 
diff --git a/src/components/ui/tables/NoResultsTableRow.jsx b/src/components/ui/tables/NoResultsTableRow.jsx
@@ -1,9 +1,13 @@
 import NoResults from "../NoResults";
 
 const NoResultsTableRow = ({ numColumns }) => {
-    return <tr>
-        <td colSpan={numColumns} style={{ padding: '20px' }}><NoResults /></td>
-    </tr>
-}
+    return (
+        <tr>
+            <td colSpan={numColumns}>
+                <NoResults />
+            </td>
+        </tr>
+    );
+};
 
 export default NoResultsTableRow;
diff --git a/src/components/ui/toast.tsx b/src/components/ui/toast.tsx
@@ -1,4 +1,4 @@
-import toast from "react-hot-toast";
+import { toast } from "react-hot-toast";
 
 export function actionCompletedToast(description: string) {
     toast.success(
@@ -9,7 +9,6 @@ export function actionCompletedToast(description: string) {
         {
             duration: 4000,
             position: "bottom-right",
-            isClosable: true,
         },
     );
 }
@@ -20,6 +19,5 @@ export function errorToast(description: string) {
         {description}
     </div>, {
         position: "bottom-right",
-        isClosable: false,
     });
 }
diff --git a/src/components/users/Profile.jsx b/src/components/users/Profile.jsx
@@ -87,7 +87,7 @@ const UserProfile = () => {
                 <div>
                     {0 === tabIndex && (
                         <div>
-                            <div className="grid grid-two">
+                            <div className="grid grid-two content">
                                 <div>
                                     <h4>Properties</h4>
                                     <dl>
diff --git a/src/components/vulnerabilities/templates/List.jsx b/src/components/vulnerabilities/templates/List.jsx
@@ -105,14 +105,14 @@ const VulnerabilityTemplatesList = () => {
                                         />
                                     </td>
                                     <td>
+                                        <LinkButton href={`/vulnerabilities/${template.id}/edit`}>Edit</LinkButton>
                                         <PrimaryButton
                                             onClick={(ev) => cloneVulnerability(ev, template.id)}
                                             key={template.id}
                                             title="Clone"
                                         >
                                             Clone and edit
                                         </PrimaryButton>
-                                        <LinkButton href={`/vulnerabilities/${template.id}/edit`}>Edit</LinkButton>
                                         <DeleteIconButton onClick={(ev) => deleteTemplate(ev, template.id)} />
                                     </td>
                                 </tr>
diff --git a/src/styles/main.css b/src/styles/main.css
@@ -3,25 +3,17 @@
 :root {
     /*spacing*/
     --space: 0.9rem;
-    --space-xs: 0.1rem;
 
     --margin: calc(var(--space) / 2);
     --padding: var(--space);
-    --paddingBox: calc(var(--space) / 2) var(--space);
     --paddingBadge: calc(var(--space) / 3) calc(var(--space) / 2);
-    --marginBox: calc(var(--space) / 2) 0;
     --borderRadius: calc(var(--space) / 3);
-
-    /*icons*/
-    --iconSize: 32px;
-    --iconSizeLarge: 48px;
 }
 
 body {
-    font-size: 14px;
+    padding: 1rem;
 }
 
-
 .heading {
     display: flex;
     justify-content: space-between;
@@ -43,14 +35,3 @@ h4 {
         flex-shrink: 0;
     }
 }
-
-.message__container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    opacity: .4;
-    gap: var(--padding);
-}

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import toast from "react-hot-toast";`
	`1`	`+import { toast } from "react-hot-toast";`
`2`	`2`
`3`	`3`	`export function actionCompletedToast(description: string) {`
`4`	`4`	`toast.success(`
`@@ -9,7 +9,6 @@ export function actionCompletedToast(description: string) {`
`9`	`9`	`{`
`10`	`10`	`duration: 4000,`
`11`	`11`	`position: "bottom-right",`
`12`		`- isClosable: true,`
`13`	`12`	`},`
`14`	`13`	`);`
`15`	`14`	`}`
`@@ -20,6 +19,5 @@ export function errorToast(description: string) {`
`20`	`19`	`{description}`
`21`	`20`	`</div>, {`
`22`	`21`	`position: "bottom-right",`
`23`		`- isClosable: false,`
`24`	`22`	`});`
`25`	`23`	`}`