Tidy up

reconmap · Nov 18, 2024 · 090eecd · 090eecd
1 parent 6d84bf3
commit 090eecd
Show file tree

Hide file tree

Showing 21 changed files with 189 additions and 140 deletions.
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@reconmap/app",
-  "version": "0.9.203",
+  "version": "1.0.0",
   "type": "module",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.6.0",

diff --git a/...s/app/src/components/commands/Details.jsx → ...omponents/commands/CommandDetailsPage.jsx b/...s/app/src/components/commands/Details.jsx → ...omponents/commands/CommandDetailsPage.jsx
@@ -6,24 +6,27 @@ import EmptyField from "components/ui/EmptyField";
 import ExternalLink from "components/ui/ExternalLink";
 import Tags from "components/ui/Tags";
 import TimestampsSection from "components/ui/TimestampsSection";
+import Title from "components/ui/Title";
 import LinkButton from "components/ui/buttons/Link";
 import UserLink from "components/users/Link";
 import CommandUsage from "models/CommandUsage";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import ReactMarkdown from "react-markdown";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import secureApiFetch from "services/api";
-import useDelete from "../../hooks/useDelete";
-import useFetch from "../../hooks/useFetch";
-import Breadcrumb from "../ui/Breadcrumb";
-import Loading from "../ui/Loading";
-import Title from "../ui/Title";
-import DeleteButton from "../ui/buttons/Delete";
-import CommandInstructions from "./Instructions";
-import CommandOutputs from "./Outputs";
-import CommandUsageForm from "./UsageForm";
-
-const CommandDetails = () => {
+import useDelete from "../../hooks/useDelete.js";
+import useFetch from "../../hooks/useFetch.js";
+import Breadcrumb from "../ui/Breadcrumb.jsx";
+import Loading from "../ui/Loading.jsx";
+import DeleteButton from "../ui/buttons/Delete.jsx";
+import CommandInstructions from "./Instructions.jsx";
+import CommandOutputs from "./Outputs.jsx";
+import CommandUsageForm from "./UsageForm.jsx";
+
+const CommandDetailsPage = () => {
+    const [t] = useTranslation();
+
     const { commandId } = useParams();
     const navigate = useNavigate();
 
@@ -82,24 +85,24 @@ const CommandDetails = () => {
             </div>
             <article>
                 <div>
-                    <Title type="Command" title={command.name} />
+                    <Title type={t("Command")} title={command.name} />
                     <Tags values={command.tags} />
                 </div>
 
                 <NativeTabs
-                    labels={["Details", "Usages", "Run instructions", "Command outputs", "Terminal"]}
+                    labels={[t("Details"), t("Usages"), "Run instructions", "Command outputs", "Terminal"]}
                     tabIndex={tabIndex}
                     tabIndexSetter={tabIndexSetter}
                 />
 
                 <div>
                     <div>
                         {0 === tabIndex && (
-                            <div>
+                            <div className="content">
                                 <div className="grid grid-two">
                                     <div>
                                         <dl>
-                                            <dt>Description</dt>
+                                            <dt>{t("Description")}</dt>
                                             <dd>
                                                 {command.description ? (
                                                     <ReactMarkdown>{command.description}</ReactMarkdown>
@@ -132,7 +135,7 @@ const CommandDetails = () => {
                                     </div>
 
                                     <div>
-                                        <h4>Relations</h4>
+                                        <h4>{t("Relations")}</h4>
                                         <dl>
                                             <dt>Created by</dt>
                                             <dd>
@@ -206,4 +209,4 @@ const CommandDetails = () => {
     );
 };
 
-export default CommandDetails;
+export default CommandDetailsPage;
diff --git a/packages/app/src/components/commands/Form.jsx b/packages/app/src/components/commands/Form.jsx
@@ -1,8 +1,12 @@
+import LabelledField from "components/form/LabelledField";
 import NativeInput from "components/form/NativeInput";
 import MarkdownEditor from "components/ui/forms/MarkdownEditor";
+import { useTranslation } from "react-i18next";
 import PrimaryButton from "../ui/buttons/Primary";
 
 const CommandForm = ({ isEditForm = false, onFormSubmit, command, commandSetter: setCommand }) => {
+    const [t] = useTranslation();
+
     const onFormChange = (ev) => {
         const target = ev.target;
         let name = target.name;
@@ -17,42 +21,50 @@ const CommandForm = ({ isEditForm = false, onFormSubmit, command, commandSetter:
         <form onSubmit={onFormSubmit}>
             <fieldset>
                 <legend>Basic information</legend>
-                <label>
-                    Name
-                    <NativeInput
-                        type="text"
-                        name="name"
-                        onChange={onFormChange}
-                        value={command.name || ""}
-                        required
-                        autoFocus
-                    />
-                </label>
-                <label>
-                    Description
-                    <MarkdownEditor
-                        name="description"
-                        onChange={onFormChange}
-                        value={command.description || ""}
-                        required
-                    />
-                </label>
-                <label>
-                    Tags
-                    <NativeInput
-                        type="text"
-                        name="tags"
-                        onChange={onFormChange}
-                        value={command.tags ? JSON.parse(command.tags).join(",") : ""}
-                    />
-                </label>
+                <LabelledField
+                    label={t("Name")}
+                    control={
+                        <NativeInput
+                            type="text"
+                            name="name"
+                            onChange={onFormChange}
+                            defaultValue={command.name || ""}
+                            required
+                            autoFocus
+                        />
+                    }
+                />
+
+                <LabelledField
+                    label={t("Description")}
+                    control={
+                        <MarkdownEditor
+                            name="description"
+                            onChange={onFormChange}
+                            defaultValue={command.description || ""}
+                            required
+                        />
+                    }
+                />
+
+                <LabelledField
+                    label={t("Tags")}
+                    control={
+                        <NativeInput
+                            type="text"
+                            name="tags"
+                            onChange={onFormChange}
+                            defaultValue={command.tags ? JSON.parse(command.tags).join(",") : ""}
+                        />
+                    }
+                />
                 <label>
                     More information URL
                     <NativeInput
                         type="url"
                         name="more_info_url"
                         onChange={onFormChange}
-                        value={command.more_info_url || ""}
+                        defaultValue={command.more_info_url || ""}
                     />
                 </label>
             </fieldset>

diff --git a/packages/app/src/components/commands/Instructions.jsx b/packages/app/src/components/commands/Instructions.jsx
@@ -1,5 +1,6 @@
 import NativeButton from "components/form/NativeButton";
 import NativeInput from "components/form/NativeInput";
+import NativeSelect from "components/form/NativeSelect.jsx";
 import DeleteIconButton from "components/ui/buttons/DeleteIconButton";
 import CommandTerminal from "components/ui/CommandTerminal";
 import ExternalLink from "components/ui/ExternalLink";
@@ -35,12 +36,14 @@ const CommandInstructions = ({ command, task = null }) => {
 
     return (
         <>
-            <select onChange={(ev) => onUsageChange(ev)}>
+            <NativeSelect onChange={(ev) => onUsageChange(ev)}>
                 <option value="0">(select)</option>
                 {commandUsages.map((usage) => (
-                    <option value={usage.id}>{usage.name}</option>
+                    <option key={usage.id} value={usage.id}>
+                        {usage.name}
+                    </option>
                 ))}
-            </select>
+            </NativeSelect>
 
             {usage !== null && (
                 <>

diff --git a/packages/app/src/components/commands/Routes.jsx b/packages/app/src/components/commands/Routes.jsx
@@ -1,14 +1,14 @@
 import LibraryLayout from "components/LibraryLayout";
 import { Route } from "react-router-dom";
 import AddCommandPage from "./Add";
+import CommandDetailsPage from "./CommandDetailsPage";
 import CommandsListPage from "./CommandsListPage";
-import CommandDetails from "./Details";
 import EditCommandPage from "./Edit";
 
 const CommandsRoutes = [
     <Route path="/commands" element={<LibraryLayout />}>
         <Route index element={<CommandsListPage />} />,
-        <Route path=":commandId" element={<CommandDetails />} />,
+        <Route path=":commandId" element={<CommandDetailsPage />} />,
         <Route path=":commandId/edit" element={<EditCommandPage />} />,
         <Route path="add" element={<AddCommandPage />} />,
     </Route>,

diff --git a/packages/app/src/components/commands/Table.jsx b/packages/app/src/components/commands/Table.jsx
@@ -3,15 +3,18 @@ import DeleteIconButton from "components/ui/buttons/DeleteIconButton";
 import LinkButton from "components/ui/buttons/Link";
 import LoadingTableRow from "components/ui/tables/LoadingTableRow";
 import NoResultsTableRow from "components/ui/tables/NoResultsTableRow";
+import { useTranslation } from "react-i18next";
 import CommandBadge from "./Badge";
 
 const CommandsTable = ({ commands, onDeleteCallback = null }) => {
+    const [t] = useTranslation();
+
     return (
         <table className="table is-fullwidth">
             <thead>
                 <tr>
-                    <th style={{ width: "190px" }}>Name</th>
-                    <th className="only-desktop">Description</th>
+                    <th style={{ width: "190px" }}>{t("Name")}</th>
+                    <th className="only-desktop">{t("Description")}</th>
                     <th>Output parser</th>
                     <th>&nbsp;</th>
                 </tr>

diff --git a/packages/app/src/components/commands/UsageForm.jsx b/packages/app/src/components/commands/UsageForm.jsx
@@ -1,11 +1,14 @@
+import LabelledField from "components/form/LabelledField";
 import NativeInput from "components/form/NativeInput";
 import NativeSelect from "components/form/NativeSelect";
-import Loading from "components/ui/Loading";
 import MarkdownEditor from "components/ui/forms/MarkdownEditor";
 import useFetch from "hooks/useFetch";
+import { useTranslation } from "react-i18next";
 import PrimaryButton from "../ui/buttons/Primary";
 
 const CommandUsageForm = ({ isEditForm = false, onFormSubmit, command, commandSetter: setCommand }) => {
+    const [t] = useTranslation();
+
     const onFormChange = (ev) => {
         const target = ev.target;
         let name = target.name;
@@ -28,8 +31,6 @@ const CommandUsageForm = ({ isEditForm = false, onFormSubmit, command, commandSe
 
     const [parsers] = useFetch("/commands/output-parsers");
 
-    if (!parsers) return <Loading />;
-
     return (
         <form onSubmit={onFormSubmit}>
             <fieldset>
@@ -87,10 +88,17 @@ const CommandUsageForm = ({ isEditForm = false, onFormSubmit, command, commandSe
                     />
                 </label>
 
-                <label>
-                    Command line arguments
-                    <NativeInput type="text" name="arguments" onChange={onFormChange} value={command.arguments || ""} />
-                </label>
+                <LabelledField
+                    label={t("Command line arguments")}
+                    control={
+                        <NativeInput
+                            type="text"
+                            name="arguments"
+                            onChange={onFormChange}
+                            value={command.arguments || ""}
+                        />
+                    }
+                />
 
                 <label>
                     Output capture
@@ -123,11 +131,12 @@ const CommandUsageForm = ({ isEditForm = false, onFormSubmit, command, commandSe
                         Output parser
                         <NativeSelect name="output_parser" onChange={onFormChange} value={command.output_parser || ""}>
                             <option value="">(none)</option>
-                            {parsers.map((parser) => (
-                                <option key={`parser_${parser.code}`} value={parser.code}>
-                                    {parser.name}
-                                </option>
-                            ))}
+                            {parsers &&
+                                parsers.map((parser) => (
+                                    <option key={`parser_${parser.code}`} value={parser.code}>
+                                        {parser.name}
+                                    </option>
+                                ))}
                         </NativeSelect>
                     </label>
                 )}

diff --git a/packages/app/src/components/layout/Header.jsx b/packages/app/src/components/layout/Header.jsx
@@ -41,14 +41,14 @@ const MenuLinks = [
         items: [
             { name: t("User manual"), url: UserManualUrl, external: true },
             { name: t("API docs"), url: `${Configuration.getDefaultApiUrl()}/docs/`, external: true },
-            { name: t("Support info"), url: "/support" },
             { name: t("System health"), url: "/system/health" },
+            { name: t("System usage"), url: "/system/usage" },
             null,
             { name: t("Audit log"), url: "/auditlog" },
             { name: t("Licenses"), url: "/licenses" },
             { name: t("Integrations"), url: "/system/integrations" },
-            { name: t("System usage"), url: "/system/usage" },
             null,
+            { name: t("Support info"), url: "/support" },
             { name: t("Log issue"), url: ServerIssuesUrl, external: true },
         ],
     },

diff --git a/packages/app/src/components/notifications/List.jsx b/packages/app/src/components/notifications/List.jsx
@@ -1,10 +1,10 @@
+import NativeButton from "components/form/NativeButton.js";
 import NativeButtonGroup from "components/form/NativeButtonGroup";
 import RelativeDateFormatter from "components/ui/RelativeDateFormatter";
 import Title from "components/ui/Title";
 import DeleteIconButton from "components/ui/buttons/DeleteIconButton";
 import LoadingTableRow from "components/ui/tables/LoadingTableRow";
 import NoResultsTableRow from "components/ui/tables/NoResultsTableRow";
-import useDocumentTitle from "hooks/useDocumentTitle";
 import secureApiFetch from "services/api";
 import useDelete from "../../hooks/useDelete";
 import useFetch from "../../hooks/useFetch";
@@ -24,14 +24,12 @@ const NotificationsList = () => {
 
     const deleteNotification = useDelete("/notifications/", fetchNotifications);
 
-    useDocumentTitle("Notifications");
-
     return (
         <>
             <div className="heading">
                 <Breadcrumb />
             </div>
-            <Title title="Notifications" icon={<faBell />} />
+            <Title title="Notifications" />
 
             <table className="table is-fullwidth">
                 <thead>
@@ -60,9 +58,9 @@ const NotificationsList = () => {
                                 <td>
                                     <NativeButtonGroup>
                                         {notification.status === "unread" && (
-                                            <Button onClick={() => markNotificationAsRead(notification)}>
+                                            <NativeButton onClick={() => markNotificationAsRead(notification)}>
                                                 Mark as read
-                                            </Button>
+                                            </NativeButton>
                                         )}
                                         <DeleteIconButton onClick={() => deleteNotification(notification.id)} />
                                     </NativeButtonGroup>

diff --git a/packages/app/src/components/notifications/NotificationsBadge.jsx b/packages/app/src/components/notifications/NotificationsBadge.jsx
@@ -1,5 +1,6 @@
 import NativeButton from "components/form/NativeButton";
 import CssIcon from "components/ui/CssIcon";
+import Tag from "components/ui/Tag";
 import { useWebsocketMessage } from "contexts/WebsocketContext";
 import useFetch from "hooks/useFetch";
 import useToggle from "hooks/useToggle";

diff --git a/packages/app/src/components/search/Routes.jsx b/packages/app/src/components/search/Routes.jsx
@@ -1,10 +1,10 @@
 import { Route } from "react-router-dom";
 import AdvancedSearch from "./AdvancedSearch";
-import SearchResults from "./Results";
+import SearchResultsPage from "./SearchResultsPage";
 import SearchUrls from "./SearchUrls";
 
 const SearchRoutes = [
-    <Route path={SearchUrls.KeywordsSearch} element={<SearchResults />} />,
+    <Route path={SearchUrls.KeywordsSearch} element={<SearchResultsPage />} />,
     <Route path={SearchUrls.AdvancedSearch} element={<AdvancedSearch />} />,
 ];