Add tsx syntax to KeyValueView.tsx.

src/elements/ReactForm.tsx

@@ -2,7 +2,7 @@ import { Component, JSX, createRef } from "preact";
 
 export type FormProps = {
   onSubmit: (form: FormData) => unknown;
-  children?: JSX.Element|JSX.Element[];
+  children?: JSX.Element | JSX.Element[];
 };
 
 export class Form extends Component<FormProps, unknown> {
@@ -13,7 +13,7 @@ export class Form extends Component<FormProps, unknown> {
       <form
         onSubmit={(e: Event) => {
           e.preventDefault();
-          console.log(this.ref.current)
+          console.log(this.ref.current);
           this.props.onSubmit(new FormData(this.ref.current));
         }}
         ref={this.ref}

src/elements/ReactMargin.tsx

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

src/pages/Secrets/KeyValue/KeyValueNew.tsx

@@ -3,9 +3,9 @@ import { Margin } from "../../../elements/ReactMargin";
 import { Page } from "../../../types/Page";
 import { SecretTitleElement } from "../SecretTitleElement";
 import { createOrUpdateSecret } from "../../../api/kv/createOrUpdateSecret";
+import { render } from "preact";
 import { setErrorText } from "../../../pageUtils";
 import i18next from "i18next";
-import { render } from "preact";
 
 export class KeyValueNewPage extends Page {
   constructor() {
@@ -17,11 +17,9 @@ export class KeyValueNewPage extends Page {
   }
 
   async render(): Promise<void> {
-    render((
+    render(
       <div>
-        <Form onSubmit={
+        <Form onSubmit={async (formData) => await this.newKVSecretHandleForm(formData)}>
-          async (formData) => await this.newKVSecretHandleForm(formData)
-        }>
           <Margin>
             <input
               class="uk-input uk-form-width-medium"
@@ -35,8 +33,9 @@ export class KeyValueNewPage extends Page {
             {i18next.t("kv_new_create_btn")}
           </button>
         </Form>
-      </div>
+      </div>,
-    ), this.router.pageContentElement);
+      this.router.pageContentElement,
+    );
   }
 
   async newKVSecretHandleForm(formData: FormData): Promise<void> {

src/pages/Secrets/KeyValue/KeyValueView.ts

@@ -1,106 +0,0 @@
-import { DoesNotExistError } from "../../../types/internalErrors";
-import { Page } from "../../../types/Page";
-import { SecretTitleElement } from "../SecretTitleElement";
-import { getSecrets } from "../../../api/kv/getSecrets";
-import { makeElement } from "z-makeelement";
-import { setErrorText } from "../../../pageUtils";
-import i18next from "i18next";
-
-export class KeyValueViewPage extends Page {
-  constructor() {
-    super();
-  }
-  async goBack(): Promise<void> {
-    if (this.state.secretPath.length != 0) {
-      this.state.popSecretPath();
-      await this.router.changePage("KEY_VALUE_VIEW");
-    } else {
-      await this.router.changePage("SECRETS_HOME");
-    }
-  }
-  async render(): Promise<void> {
-    this.state.secretItem = "";
-
-    const kvViewPageContent = makeElement({ tag: "div" });
-    await this.router.setPageContent(kvViewPageContent);
-
-    if (this.state.secretMountType == "cubbyhole") {
-      kvViewPageContent.appendChild(
-        makeElement({
-          tag: "p",
-          text: i18next.t("kv_view_cubbyhole_text"),
-        }),
-      );
-    }
-
-    const newButton = makeElement({
-      tag: "button",
-      text: i18next.t("kv_view_new_btn"),
-      class: ["uk-button", "uk-button-primary", "uk-margin-bottom"],
-      onclick: async () => {
-        await this.router.changePage("KEY_VALUE_NEW_SECRET");
-      },
-    });
-    kvViewPageContent.appendChild(newButton);
-
-    try {
-      const res = await getSecrets(
-        this.state.baseMount,
-        this.state.secretMountType,
-        this.state.secretPath,
-      );
-
-      kvViewPageContent.appendChild(
-        makeElement({
-          tag: "ul",
-          class: ["uk-nav", "uk-nav-default"],
-          children: [
-            ...res.map((secret) => {
-              return makeElement({
-                tag: "li",
-                children: makeElement({
-                  tag: "a",
-                  text: secret,
-                  onclick: async () => {
-                    if (secret.endsWith("/")) {
-                      this.state.pushSecretPath(secret);
-                      await this.router.changePage("KEY_VALUE_VIEW");
-                    } else {
-                      this.state.secretItem = secret;
-                      await this.router.changePage("KEY_VALUE_SECRET");
-                    }
-                  },
-                }),
-              });
-            }),
-          ],
-        }),
-      );
-    } catch (e: unknown) {
-      const error = e as Error;
-      if (error == DoesNotExistError) {
-        // getSecrets also 404's on no keys so dont go all the way back.
-        if (this.state.secretPath.length != 0) {
-          return this.goBack();
-        } else {
-          kvViewPageContent.appendChild(
-            makeElement({
-              tag: "p",
-              text: i18next.t("kv_view_none_here_text"),
-            }),
-          );
-        }
-      } else {
-        setErrorText(error.message);
-      }
-    }
-  }
-
-  async getPageTitle(): Promise<Element | string> {
-    return await SecretTitleElement(this.router);
-  }
-
-  get name(): string {
-    return i18next.t("kv_view_title");
-  }
-}

src/pages/Secrets/KeyValue/KeyValueView.tsx

@@ -0,0 +1,99 @@
+import { DoesNotExistError } from "../../../types/internalErrors";
+import { Page } from "../../../types/Page";
+import { SecretTitleElement } from "../SecretTitleElement";
+import { getSecrets } from "../../../api/kv/getSecrets";
+import { render } from "preact";
+import { setErrorText } from "../../../pageUtils";
+import i18next from "i18next";
+
+export class KeyValueViewPage extends Page {
+  constructor() {
+    super();
+  }
+  async goBack(): Promise<void> {
+    if (this.state.secretPath.length != 0) {
+      this.state.popSecretPath();
+      await this.router.changePage("KEY_VALUE_VIEW");
+    } else {
+      await this.router.changePage("SECRETS_HOME");
+    }
+  }
+  async render(): Promise<void> {
+    this.state.secretItem = "";
+
+    render(
+      <>
+        <div id="buttonsBox">
+          <button
+            class="uk-button uk-button-primary uk-margin-bottom"
+            onClick={async () => {
+              await this.router.changePage("KEY_VALUE_NEW_SECRET");
+            }}
+          >
+            {i18next.t("kv_view_new_btn")}
+          </button>
+        </div>
+        {this.state.secretMountType == "cubbyhole" && <p>{i18next.t("kv_view_cubbyhole_text")}</p>}
+        <div id="secretsList" />
+      </>,
+      this.router.pageContentElement,
+    );
+
+    let res: string[];
+
+    try {
+      res = await getSecrets(
+        this.state.baseMount,
+        this.state.secretMountType,
+        this.state.secretPath,
+      );
+    } catch (e: unknown) {
+      const error = e as Error;
+      if (error == DoesNotExistError) {
+        // getSecrets also 404's on no keys so dont go all the way back.
+        if (this.state.secretPath.length != 0) {
+          return this.goBack();
+        } else {
+          render(
+            <p>{i18next.t("kv_view_none_here_text")}</p>,
+            document.querySelector("#secretsList"),
+          );
+        }
+      } else {
+        setErrorText(error.message);
+        return;
+      }
+    }
+
+    render(
+      <ul class="uk-nav uk-nav-default">
+        {...res.map((secret) => (
+          <li>
+            <a
+              onClick={async () => {
+                if (secret.endsWith("/")) {
+                  this.state.pushSecretPath(secret);
+                  await this.router.changePage("KEY_VALUE_VIEW");
+                } else {
+                  this.state.secretItem = secret;
+                  await this.router.changePage("KEY_VALUE_SECRET");
+                }
+              }}
+            >
+              {secret}
+            </a>
+          </li>
+        ))}
+      </ul>,
+      document.querySelector("#secretsList"),
+    );
+  }
+
+  async getPageTitle(): Promise<Element | string> {
+    return await SecretTitleElement(this.router);
+  }
+
+  get name(): string {
+    return i18next.t("kv_view_title");
+  }
+}