make non-action links use href instead of onClick

package.json

@@ -2,54 +2,54 @@
   "name": "vaultui",
   "version": "latest", 
   "devDependencies": {
-    "@babel/core": "^7.17.5",
-    "@babel/eslint-parser": "^7.17.0",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-proposal-decorators": "^7.17.2",
-    "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
-    "@babel/plugin-syntax-import-assertions": "^7.16.7",
-    "@babel/plugin-transform-runtime": "^7.17.0",
-    "@babel/preset-env": "^7.16.11",
+    "@babel/core": "^7.18.13",
+    "@babel/eslint-parser": "^7.18.9",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-decorators": "^7.18.10",
+    "@babel/plugin-proposal-object-rest-spread": "^7.18.9",
+    "@babel/plugin-syntax-import-assertions": "^7.18.6",
+    "@babel/plugin-transform-runtime": "^7.18.10",
+    "@babel/preset-env": "^7.18.10",
     "@types/file-saver": "^2.0.5",
     "@types/js-yaml": "^4.0.5",
     "@types/prismjs": "^1.26.0",
-    "@types/uikit": "^3.3.2",
-    "@typescript-eslint/eslint-plugin": "^5.13.0",
-    "@typescript-eslint/parser": "^5.13.0",
-    "babel-loader": "^8.2.3",
-    "css-loader": "^6.6.0",
-    "css-minimizer-webpack-plugin": "^3.4.1",
-    "eslint": "^8.10.0",
+    "@types/uikit": "^3.14.0",
+    "@typescript-eslint/eslint-plugin": "^5.35.1",
+    "@typescript-eslint/parser": "^5.35.1",
+    "babel-loader": "^8.2.5",
+    "css-loader": "^6.7.1",
+    "css-minimizer-webpack-plugin": "^4.0.0",
+    "eslint": "^8.23.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-sort-imports-es6-autofix": "^0.6.0",
     "git-revision-webpack-plugin": "^5.0.0",
     "html-webpack-plugin": "^5.5.0",
     "node-sass": "^7.0.1",
-    "prettier": "^2.5.1",
+    "prettier": "^2.7.1",
     "raw-loader": "^4.0.2",
-    "sass-loader": "^12.6.0",
-    "ts-loader": "^9.2.7",
-    "typescript": "^4.6.2",
-    "webpack": "^5.69.1",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.7.4"
+    "sass-loader": "^13.0.2",
+    "ts-loader": "^9.3.1",
+    "typescript": "^4.8.2",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.10.0"
   },
   "dependencies": {
-    "clipboard": "^2.0.10",
-    "codejar": "^3.5.0",
-    "core-js": "^3.21.1",
-    "date-fns": "^2.28.0",
+    "clipboard": "^2.0.11",
+    "codejar": "^3.6.0",
+    "core-js": "^3.25.0",
+    "date-fns": "^2.29.2",
     "file-saver": "^2.0.5",
-    "i18next": "^21.6.13",
+    "i18next": "^21.9.1",
     "js-yaml": "^4.1.0",
-    "json5": "^2.2.0",
+    "json5": "^2.2.1",
     "normalize.css": "^8.0.1",
-    "preact": "^10.6.6",
-    "preact-router": "^4.0.1",
-    "prismjs": "^1.27.0",
+    "preact": "^10.10.6",
+    "preact-router": "^4.1.0",
+    "prismjs": "^1.29.0",
     "qr-scanner": "^1.4.1",
-    "uikit": "^3.11.1"
+    "uikit": "^3.15.5"
   }
 }

src/settings/Settings.ts

@@ -60,7 +60,7 @@ export class Settings {
       kvViewDefaultLanguage: this.kvViewDefaultLanguage,
       kvViewIndent: this.kvViewIndent,
       kvHideKeyValues: this.kvHideKeyValues,
-    }
+    };
   }
 
   loadSettings(settings: Partial<SettingsData>) {

src/ui/elements/Button.tsx

@@ -1,5 +1,4 @@
 import { JSX, RefObject } from "preact";
-import { route } from "preact-router";
 
 export type ButtonProps = {
   color: "primary" | "danger" | "secondary";
@@ -15,17 +14,9 @@ export function Button(props: ButtonProps): JSX.Element {
   const classes = "uk-button " + ("uk-button-" + props.color);
   if (props.route) {
     return (
-      <button
-        {...props}
-        ref={props.buttonRef}
-        class={classes}
-        onClick={() => {
-          route(props.route);
-        }}
-        type={props.type}
-      >
+      <a class={classes} href={props.route} type={props.type}>
         {props.text}
-      </button>
+      </a>
     );
   } else {
     return (

src/ui/elements/CopyableBox.tsx

@@ -1,11 +1,11 @@
 import { Button } from "./Button";
 import { CodeBlock } from "./CodeBlock";
 import { Component, JSX, createRef } from "preact";
+import { InlineButtonBox } from "./InlineButtonBox";
 import { addClipboardNotifications } from "../../utils/clipboardNotifs";
 import ClipboardJS from "clipboard";
 import FileSaver from "file-saver";
 import i18next from "i18next";
-import { InlineButtonBox } from "./InlineButtonBox";
 
 export type CopyableBoxProps = {
   title: string;

src/ui/elements/InlineButtonBox.tsx

@@ -1,9 +1,9 @@
 import { JSX } from "preact";
 
 export type InlineButtonBoxProps = {
-    children?: JSX.Element | JSX.Element[];
+  children?: JSX.Element | JSX.Element[];
 };
 
 export function InlineButtonBox(props: InlineButtonBoxProps): JSX.Element {
-    return <div>{props.children}</div>;
+  return <div>{props.children}</div>;
 }

src/ui/elements/NavBar.tsx

@@ -34,13 +34,7 @@ export function NavBar(): JSX.Element {
       <div class="uk-navbar-right">
         <ul class="uk-navbar-nav">
           <li>
-            <a
-              onClick={async () => {
-                route("/me", true);
-              }}
-            >
-              {i18next.t("me_btn")}
-            </a>
+            <a href="/me">{i18next.t("me_btn")}</a>
           </li>
         </ul>
       </div>

src/ui/elements/Tile.tsx

@@ -1,4 +1,5 @@
 import { Component, JSX } from "preact";
+import { notImplementedNotification } from "./ErrorMessage";
 
 export type TileParams = {
   disabled?: boolean;
@@ -7,7 +8,8 @@ export type TileParams = {
   description: string;
   icon?: string;
   iconText?: string;
-  onclick: () => void;
+  href?: string;
+  notImplemented?: boolean;
 };
 
 export class Tile extends Component<TileParams, unknown> {
@@ -33,9 +35,15 @@ export class Tile extends Component<TileParams, unknown> {
 
     if (this.props.disabled == true) {
       return <p>{tileInner}</p>;
+    } else if (this.props.notImplemented == true) {
+      return (
+        <a class="uk-link-heading" onClick={async () => notImplementedNotification()}>
+          {tileInner}
+        </a>
+      );
     } else {
       return (
-        <a class="uk-link-heading" onClick={this.props.onclick}>
+        <a class="uk-link-heading" href={this.props.href}>
           {tileInner}
         </a>
       );

src/ui/pages/Access/AccessHome.tsx

@@ -3,8 +3,6 @@ import { DefaultPageProps } from "../../../types/DefaultPageProps";
 import { Grid, GridSizes } from "../../elements/Grid";
 import { PageTitle } from "../../elements/PageTitle";
 import { Tile } from "../../elements/Tile";
-import { notImplementedNotification } from "../../elements/ErrorMessage";
-import { route } from "preact-router";
 import i18next from "i18next";
 
 export class AccessHomePage extends Component<DefaultPageProps> {
@@ -17,25 +15,25 @@ export class AccessHomePage extends Component<DefaultPageProps> {
             title={i18next.t("access_auth_methods_title")}
             description={i18next.t("access_auth_methods_description")}
             icon="sign-in"
-            onclick={async () => route("/access/auth")}
+            href="/access/auth"
           />
           <Tile
             title={i18next.t("access_entities_title")}
             description={i18next.t("access_entities_description")}
             icon="user"
-            onclick={async () => notImplementedNotification()}
+            notImplemented={true}
           />
           <Tile
             title={i18next.t("access_groups_title")}
             description={i18next.t("access_groups_description")}
             icon="users"
-            onclick={async () => notImplementedNotification()}
+            notImplemented={true}
           />
           <Tile
             title={i18next.t("access_leases_title")}
             description={i18next.t("access_leases_description")}
             icon="unlock"
-            onclick={async () => notImplementedNotification()}
+            notImplemented={true}
           />
         </Grid>
       </>

src/ui/pages/Access/Auth/AuthHome.tsx

@@ -6,7 +6,6 @@ import { PageTitle } from "../../../elements/PageTitle";
 import { authViewConfigURL, userPassUserListURL } from "../../pageLinks";
 import { notImplementedNotification, sendErrorNotification } from "../../../elements/ErrorMessage";
 import { objectToMap } from "../../../../utils";
-import { route } from "preact-router";
 import i18next from "i18next";
 
 export type AuthListElementProps = {
@@ -17,26 +16,17 @@ export type AuthListElementProps = {
 export function AuthListElement(props: AuthListElementProps): JSX.Element {
   const isViewable = ["userpass"].includes(props.method.type);
 
-  const onViewClick = (props: AuthListElementProps) => {
-    if (props.method.type == "userpass") {
-      route(userPassUserListURL(props.path));
-    }
-  };
+  let link = "";
+  if (props.method.type == "userpass") {
+    link = userPassUserListURL(props.path);
+  }
 
   return (
     <div class="uk-padding-small uk-background-secondary">
       <span class="uk-h4 uk-margin-bottom">{props.path}</span>
       <span class="uk-text-muted">{` (${props.method.accessor})`}</span>
       <div class="uk-margin-top">
-        {isViewable && (
-          <Button
-            text={i18next.t("common_view")}
-            color="primary"
-            onClick={() => {
-              onViewClick(props);
-            }}
-          />
-        )}
+        {isViewable && <Button text={i18next.t("common_view")} color="primary" route={link} />}
         <Button
           text={i18next.t("auth_home_view_config")}
           color="primary"

src/ui/pages/Access/Auth/userpass/UserPassUserView.tsx

@@ -2,6 +2,7 @@ import { Button } from "../../../../elements/Button";
 import { Component } from "preact";
 import { DefaultPageProps } from "../../../../../types/DefaultPageProps";
 import { HeaderAndContent } from "../../../../elements/HeaderAndContent";
+import { InlineButtonBox } from "../../../../elements/InlineButtonBox";
 import { Margin } from "../../../../elements/Margin";
 import { PageTitle } from "../../../../elements/PageTitle";
 import { UserType } from "../../../../../api/types/user";
@@ -9,7 +10,6 @@ import { sendErrorNotification } from "../../../../elements/ErrorMessage";
 import { toStr } from "../../../../../utils";
 import { userPassUserDeleteURL, userPassUserEditURL } from "../../../pageLinks";
 import i18next from "i18next";
-import { InlineButtonBox } from "../../../../elements/InlineButtonBox";
 
 export class UserPassUserView extends Component<DefaultPageProps, { user_data: UserType }> {
   async componentDidMount() {

src/ui/pages/Access/Auth/userpass/UserPassUsersList.tsx

@@ -3,7 +3,6 @@ import { Component } from "preact";
 import { DefaultPageProps } from "../../../../../types/DefaultPageProps";
 import { Margin } from "../../../../elements/Margin";
 import { PageTitle } from "../../../../elements/PageTitle";
-import { route } from "preact-router";
 import { sendErrorNotification } from "../../../../elements/ErrorMessage";
 import { userPassUserNewURL, userPassUserViewURL } from "../../../pageLinks";
 import i18next from "i18next";
@@ -40,13 +39,7 @@ export class UserPassUsersList extends Component<DefaultPageProps, { users: stri
           <ul>
             {...this.state.users.map((user) => (
               <li>
-                <a
-                  onClick={async () => {
-                    route(userPassUserViewURL(baseMount, user));
-                  }}
-                >
-                  {user}
-                </a>
+                <a href={userPassUserViewURL(baseMount, user)}>{user}</a>
               </li>
             ))}
           </ul>

src/ui/pages/Home.tsx

@@ -84,27 +84,21 @@ export class Home extends Component<DefaultPageProps, HomeState> {
                   title={i18next.t("home_secrets_title")}
                   description={i18next.t("home_secrets_description")}
                   icon="file-edit"
-                  onclick={async () => {
-                    route("/secrets");
-                  }}
+                  href="/secrets"
                 />
                 <Tile
                   title={i18next.t("home_access_title")}
                   description={i18next.t("home_access_description")}
                   icon="users"
                   disabled={!this.state.authCaps.includes("read")}
-                  onclick={async () => {
-                    route("/access");
-                  }}
+                  href="/access"
                 />
                 <Tile
                   title={i18next.t("home_policies_title")}
                   description={i18next.t("home_policies_description")}
                   icon="pencil"
                   disabled={!this.state.policiesCaps.includes("read")}
-                  onclick={async () => {
-                    route("/policies");
-                  }}
+                  href="/policies"
                 />
               </Grid>
             </Margin>

src/ui/pages/Policies/PoliciesHome.tsx

@@ -1,13 +1,12 @@
 import { Button } from "../../elements/Button";
 import { Component } from "preact";
 import { DefaultPageProps } from "../../../types/DefaultPageProps";
+import { InlineButtonBox } from "../../elements/InlineButtonBox";
 import { Margin } from "../../elements/Margin";
 import { PageTitle } from "../../elements/PageTitle";
 import { policyNewURL, policyViewURL } from "../pageLinks";
-import { route } from "preact-router";
 import { sendErrorNotification } from "../../elements/ErrorMessage";
 import i18next from "i18next";
-import { InlineButtonBox } from "../../elements/InlineButtonBox";
 
 export class PoliciesHome extends Component<DefaultPageProps, { policies: string[] }> {
   async componentDidMount() {
@@ -41,13 +40,7 @@ export class PoliciesHome extends Component<DefaultPageProps, { policies: string
             <ul class="uk-nav uk-nav-default">
               {this.state.policies.map((policyName: string) => (
                 <li>
-                  <a
-                    onClick={async () => {
-                      route(policyViewURL(policyName));
-                    }}
-                  >
-                    {policyName}
-                  </a>
+                  <a href={policyViewURL(policyName)}>{policyName}</a>
                 </li>
               ))}
             </ul>

src/ui/pages/Policies/PolicyView.tsx

@@ -2,12 +2,12 @@ import { Button } from "../../elements/Button";
 import { CodeBlock } from "../../elements/CodeBlock";
 import { Component } from "preact";
 import { DefaultPageProps } from "../../../types/DefaultPageProps";
+import { InlineButtonBox } from "../../elements/InlineButtonBox";
 import { Margin } from "../../elements/Margin";
 import { PageTitle } from "../../elements/PageTitle";
 import { policyDeleteURL, policyEditURL } from "../pageLinks";
 import { sendErrorNotification } from "../../elements/ErrorMessage";
 import i18next from "i18next";
-import { InlineButtonBox } from "../../elements/InlineButtonBox";
 
 export class PolicyView extends Component<
   DefaultPageProps,

src/ui/pages/Secrets/KeyValue/KeyValueEdit.tsx

@@ -14,10 +14,10 @@ import {
   toPrismCode,
 } from "../../../../utils/dataInterchange";
 import { combineKVPath, splitKVPath } from "./kvPathUtils";
+import { kvViewURL } from "../../pageLinks";
+import { route } from "preact-router";
 import { sortedObjectMap } from "../../../../utils";
 import i18next from "i18next";
-import { route } from "preact-router";
-import { kvViewURL } from "../../pageLinks";
 
 export type KVEditProps = DefaultPageProps & {
   baseMount: string;

src/ui/pages/Secrets/KeyValue/KeyValueList.tsx

@@ -2,15 +2,14 @@ import { Button } from "../../../elements/Button";
 import { Component, JSX, createRef } from "preact";
 import { DefaultPageProps } from "../../../../types/DefaultPageProps";
 import { DoesNotExistError } from "../../../../types/internalErrors";
+import { InlineButtonBox } from "../../../elements/InlineButtonBox";
 import { Margin } from "../../../elements/Margin";
 import { SecretTitleElement } from "../SecretTitleElement";
 import { TextInput } from "../../../elements/forms/TextInput";
 import { combineKVPath, splitKVPath } from "./kvPathUtils";
 import { delSecretsEngineURL, kvListURL, kvNewURL, kvViewURL } from "../../pageLinks";
-import { route } from "preact-router";
 import { sendErrorNotification } from "../../../elements/ErrorMessage";
 import i18next from "i18next";
-import { InlineButtonBox } from "../../../elements/InlineButtonBox";
 
 export type KVKeysListProps = DefaultPageProps & {
   baseMount: string;
@@ -24,22 +23,21 @@ type KVKeysListState = {
 };
 
 function SecretsList(baseMount: string, secretPath: string[], secrets: string[]): JSX.Element[] {
-  return secrets.map((secret) => (
-    <li>
-      <a
-        onClick={async () => {
-          const combined = combineKVPath(secretPath, secret);
-          if (secret.endsWith("/")) {
-            route(kvListURL(baseMount, [...combined.secretPath, combined.secretItem]));
-          } else {
-            route(kvViewURL(baseMount, combined.secretPath, combined.secretItem));
-          }
-        }}
-      >
-        {secret}
-      </a>
-    </li>
-  ));
+  return secrets.map((secret) => {
+    let link = "";
+    const combined = combineKVPath(secretPath, secret);
+    if (secret.endsWith("/")) {
+      link = kvListURL(baseMount, [...combined.secretPath, combined.secretItem]);
+    } else {
+      link = kvViewURL(baseMount, combined.secretPath, combined.secretItem);
+    }
+
+    return (
+      <li>
+        <a href={link}>{secret}</a>
+      </li>
+    );
+  });
 }
 
 export class KVKeysList extends Component<KVKeysListProps, KVKeysListState> {

src/ui/pages/Secrets/KeyValue/KeyValueVersions.tsx

@@ -3,7 +3,6 @@ import { DefaultPageProps } from "../../../../types/DefaultPageProps";
 import { SecretTitleElement } from "../SecretTitleElement";
 import { kvViewURL } from "../../pageLinks";
 import { objectToMap } from "../../../../utils";
-import { route } from "preact-router";
 import { sendErrorNotification } from "../../../elements/ErrorMessage";
 import { splitKVPath } from "./kvPathUtils";
 
@@ -42,13 +41,7 @@ export class KeyValueVersions extends Component<DefaultPageProps, { versions: st
         <ul class="uk-nav uk-nav-default">
           {this.state.versions.map((ver) => (
             <li>
-              <a
-                onClick={async () => {
-                  route(kvViewURL(baseMount, secretPath, secretItem, ver));
-                }}
-              >
-                {`v${ver}`}
-              </a>
+              <a href={kvViewURL(baseMount, secretPath, secretItem, ver)}>{`v${ver}`}</a>
             </li>
           ))}
         </ul>

src/ui/pages/Secrets/KeyValue/KeyValueView.tsx

@@ -240,7 +240,7 @@ export class KeyValueView extends Component<DefaultPageProps, KeyValueViewState>
                     this.state.secretItem,
                     this.state.secretVersion,
                   );
-                  // Is there a better way to force refresh of a Component?
+                  // TODO: Is there a better way to force refresh of a Component?
                   this.setState({});
                   await this.componentDidMount();
                 }}

src/ui/pages/Secrets/NewSecretsEngine.tsx

@@ -3,7 +3,6 @@ import { DefaultPageProps } from "../../../types/DefaultPageProps";
 import { Grid, GridSizes } from "../../elements/Grid";
 import { PageTitle } from "../../elements/PageTitle";
 import { Tile } from "../../elements/Tile";
-import { route } from "preact-router";
 import i18next from "i18next";
 
 export class NewSecretsEngine extends Component<DefaultPageProps> {
@@ -15,23 +14,17 @@ export class NewSecretsEngine extends Component<DefaultPageProps> {
           <Tile
             title={i18next.t("new_secrets_engine_kv_title")}
             description={i18next.t("new_secrets_engine_kv_description")}
-            onclick={async () => {
-              route("/secrets/new_secrets_engine/kv");
-            }}
+            href="/secrets/new_secrets_engine/kv"
           />
           <Tile
             title={i18next.t("new_secrets_engine_totp_title")}
             description={i18next.t("new_secrets_engine_totp_description")}
-            onclick={async () => {
-              route("/secrets/new_secrets_engine/totp");
-            }}
+            href="/secrets/new_secrets_engine/totp"
           />
           <Tile
             title={i18next.t("new_secrets_engine_transit_title")}
             description={i18next.t("new_secrets_engine_transit_description")}
-            onclick={async () => {
-              route("/secrets/new_secrets_engine/transit");
-            }}
+            href="/secrets/new_secrets_engine/transit"
           />
         </Grid>
       </>

src/ui/pages/Secrets/SecretTitleElement.tsx

@@ -1,6 +1,5 @@
 import { JSX } from "preact/jsx-runtime";
 import { kvListURL, kvViewURL, transitViewSecretURL } from "../pageLinks";
-import { route } from "preact-router";
 
 type SecretTitleElementProps = {
   type: string;
@@ -20,12 +19,7 @@ export function SecretTitleElement(props: SecretTitleElementProps): JSX.Element
   return (
     <h3 class="uk-card-title" id="pageTitle">
       <div>
-        <a
-          test-data="secrets-title-first-slash"
-          onClick={async () => {
-            route("/secrets");
-          }}
-        >
+        <a test-data="secrets-title-first-slash" href="/secrets">
           {"/ "}
         </a>
 
@@ -37,16 +31,12 @@ export function SecretTitleElement(props: SecretTitleElementProps): JSX.Element
           // Sometimes we pass a extra / in urls
           // just ignore this.
           if (secretPath.length < 1) return;
+          if (type != "kv") return;
 
           return (
             <a
               test-data="secrets-title-secretPath"
-              onClick={async () => {
-                if (type == "kv") {
-                  const secretPath = secretPaths.slice(0, index + 1);
-                  route(kvListURL(baseMount, secretPath));
-                }
-              }}
+              href={kvListURL(baseMount, secretPaths.slice(0, index + 1))}
             >
               {secretPath + "/" + " "}
             </a>
@@ -55,23 +45,18 @@ export function SecretTitleElement(props: SecretTitleElementProps): JSX.Element
 
         {item.length != 0 &&
           (() => {
-            if (["kv", "transit"].includes(type)) {
-              return (
-                <a
-                  onClick={() => {
-                    if (type == "kv") {
-                      route(kvViewURL(baseMount, secretPath, item));
-                    } else if (type == "transit") {
-                      route(transitViewSecretURL(baseMount, item));
-                    }
-                  }}
-                >
-                  {item}
-                </a>
-              );
-            } else {
+            if (!["kv", "transit"].includes(type)) {
               return <span>{item}</span>;
             }
+
+            let link = "";
+            if (type == "kv") {
+              link = kvViewURL(baseMount, secretPath, item);
+            } else if (type == "transit") {
+              link = transitViewSecretURL(baseMount, item);
+            }
+
+            return <a href={link}>{item}</a>;
           })()}
 
         {suffix.length != 0 && <span>{suffix}</span>}

src/ui/pages/Secrets/SecretsHome.tsx

@@ -1,12 +1,12 @@
 import { Button } from "../../elements/Button";
 import { Component, JSX } from "preact";
 import { DefaultPageProps } from "../../../types/DefaultPageProps";
+import { InlineButtonBox } from "../../elements/InlineButtonBox";
 import { MountType } from "../../../api/types/mount";
 import { PageTitle } from "../../elements/PageTitle";
 import { sendErrorNotification } from "../../elements/ErrorMessage";
 import { sortedObjectMap } from "../../../utils";
 import i18next from "i18next";
-import { InlineButtonBox } from "../../elements/InlineButtonBox";
 
 const supportedMountTypes = ["kv", "totp", "transit", "cubbyhole"];
 
@@ -91,7 +91,7 @@ export class Secrets extends Component<DefaultPageProps, SecretsState> {
                 )}
             </InlineButtonBox>
             <div class="uk-margin-top">
-              <ul class="uk-nav uk-nav-default">
+              <ul class="uk-nav">
                 {Array.from(this.state.mountsMap).map((args: [string, MountType]) => {
                   const baseMount = args[0];
                   const mount = args[1];

src/ui/pages/Secrets/TOTP/TOTPList.tsx

@@ -4,7 +4,7 @@ import { Component, JSX, createRef } from "preact";
 import { CopyableInputBox } from "../../../elements/CopyableInputBox";
 import { DefaultPageProps } from "../../../../types/DefaultPageProps";
 import { Grid, GridSizes } from "../../../elements/Grid";
-import { Margin } from "../../../elements/Margin";
+import { InlineButtonBox } from "../../../elements/InlineButtonBox";
 import { MarginInline } from "../../../elements/MarginInline";
 import { SecretTitleElement } from "../SecretTitleElement";
 import { TextInput } from "../../../elements/forms/TextInput";
@@ -17,7 +17,6 @@ import {
 import { removeDoubleSlash } from "../../../../utils";
 import { sendErrorNotification } from "../../../elements/ErrorMessage";
 import i18next from "i18next";
-import { InlineButtonBox } from "../../../elements/InlineButtonBox";
 
 type TOTPGridItemProps = DefaultPageProps & {
   baseMount: string;
@@ -106,18 +105,21 @@ export class TOTPListView extends Component<TOTPListViewProps, TOTPListViewState
 
     return (
       <>
-        <Margin>
-          <TextInput
-            inputRef={this.searchBarRef}
-            name="path"
-            placeholder={i18next.t("totp_list_search_input_text")}
-            onInput={async () => {
-              this.setState({
-                searchQuery: this.searchBarRef.current.value,
-              });
-            }}
-          />
-        </Margin>
+        <br />
+
+        <TextInput
+          inputRef={this.searchBarRef}
+          name="path"
+          placeholder={i18next.t("totp_list_search_input_text")}
+          onInput={async () => {
+            this.setState({
+              searchQuery: this.searchBarRef.current.value,
+            });
+          }}
+        />
+
+        <br />
+        <br />
 
         {this.props.totpItems.map((totpItem) => {
           if (this.state.searchQuery.length > 0) {

src/ui/pages/Secrets/Transit/TransitList.tsx

@@ -2,12 +2,11 @@ import { Button } from "../../../elements/Button";
 import { CapabilitiesType } from "../../../../api/types/capabilities";
 import { Component, JSX } from "preact";
 import { DefaultPageProps } from "../../../../types/DefaultPageProps";
+import { InlineButtonBox } from "../../../elements/InlineButtonBox";
 import { SecretTitleElement } from "../SecretTitleElement";
 import { delSecretsEngineURL, transitNewSecretURL, transitViewSecretURL } from "../../pageLinks";
-import { route } from "preact-router";
 import { sendErrorNotification } from "../../../elements/ErrorMessage";
 import i18next from "i18next";
-import { InlineButtonBox } from "../../../elements/InlineButtonBox";
 
 type TransitViewListState = {
   contentLoaded: boolean;
@@ -58,13 +57,7 @@ export class TransitViewListItem extends Component<
       <ul class="uk-nav uk-nav-default">
         {...this.state.transitKeysList.map((key) => (
           <li>
-            <a
-              onClick={async () => {
-                route(transitViewSecretURL(this.props.baseMount, key));
-              }}
-            >
-              {key}
-            </a>
+            <a href={transitViewSecretURL(this.props.baseMount, key)}>{key}</a>
           </li>
         ))}
       </ul>

src/ui/pages/Secrets/Transit/TransitView.tsx

@@ -4,7 +4,6 @@ import { Grid, GridSizes } from "../../../elements/Grid";
 import { SecretTitleElement } from "../SecretTitleElement";
 import { Tile } from "../../../elements/Tile";
 import { TransitKeyType } from "../../../../api/types/transit";
-import { route } from "preact-router";
 import { sendErrorNotification } from "../../../elements/ErrorMessage";
 import {
   transitDecryptSecretURL,
@@ -43,7 +42,7 @@ export class TransitView extends Component<DefaultPageProps, { transitKey: Trans
               description={i18next.t("transit_view_encrypt_description")}
               icon="lock"
               iconText={i18next.t("transit_view_encrypt_icon_text")}
-              onclick={async () => route(transitEncryptSecretURL(baseMount, secretItem))}
+              href={transitEncryptSecretURL(baseMount, secretItem)}
             />
           )}
           {transitKey.supports_decryption && (
@@ -52,7 +51,7 @@ export class TransitView extends Component<DefaultPageProps, { transitKey: Trans
               description={i18next.t("transit_view_decrypt_description")}
               icon="mail"
               iconText={i18next.t("transit_view_decrypt_icon_text")}
-              onclick={() => route(transitDecryptSecretURL(baseMount, secretItem))}
+              href={transitDecryptSecretURL(baseMount, secretItem)}
             />
           )}
           {transitKey.supports_decryption && (
@@ -61,7 +60,7 @@ export class TransitView extends Component<DefaultPageProps, { transitKey: Trans
               description={i18next.t("transit_view_rewrap_description")}
               icon="code"
               iconText={i18next.t("transit_view_rewrap_icon_text")}
-              onclick={async () => route(transitRewrapSecretURL(baseMount, secretItem))}
+              href={transitRewrapSecretURL(baseMount, secretItem)}
             />
           )}
         </Grid>

src/ui/pages/Settings/KVLoadExportSettings.tsx

@@ -2,8 +2,8 @@ import { Component } from "preact";
 import { DefaultPageProps } from "../../../types/DefaultPageProps";
 
 export class KVLoadExportSettings extends Component<DefaultPageProps> {
-    render() {
-        // TODO: Do This
-        return <></>;
-    }
+  render() {
+    // TODO: Do This
+    return <></>;
+  }
 }

src/ui/pages/Settings/Settings.tsx

@@ -6,7 +6,6 @@ import { KeyValueSettings } from "./KeyValue/KeyValueSettings";
 import { PageTitle } from "../../elements/PageTitle";
 import UIkit from "uikit";
 import i18next from "i18next";
-import { KVLoadExportSettings } from "./KVLoadExportSettings";
 
 export function settingsSavedNotification() {
   UIkit.notification(i18next.t("settings_saved_notification"), {