Update mithril types

ui/change-password-component.ts

@@ -17,17 +17,23 @@
  * along with GenieACS.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { VnodeDOM, ClosureComponent, Component } from "mithril";
+import { VnodeDOM, ClosureComponent } from "mithril";
 import * as notifications from "./notifications";
 import { changePassword } from "./store";
 import { m } from "./components";
 
-const component: ClosureComponent = (): Component => {
+interface Attrs {
+  noAuth?: boolean;
+  username?: string;
+  onPasswordChange: () => void;
+}
+
+const component: ClosureComponent<Attrs> = () => {
   return {
     view: (vnode) => {
-      const onPasswordChange = vnode.attrs["onPasswordChange"];
-      const enforceAuth = !vnode.attrs["noAuth"];
-      const username = vnode.attrs["username"];
+      const onPasswordChange = vnode.attrs.onPasswordChange;
+      const enforceAuth = !vnode.attrs.noAuth;
+      const username = vnode.attrs.username;
 
       if (username) vnode.state["username"] = username;
 

ui/code-editor-component.ts

@@ -17,44 +17,54 @@
  * along with GenieACS.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { ClosureComponent, Component } from "mithril";
+import { Editor } from "codemirror";
+import { ClosureComponent } from "mithril";
 import { m } from "./components";
 import { codeMirror } from "./dynamic-loader";
 
-const component: ClosureComponent = (): Component => {
+interface Attrs {
+  id: string;
+  value: string;
+  mode: string;
+  readOnly?: boolean;
+  focus?: boolean;
+  onSubmit?: (dom: Element) => void;
+  onChange?: (value: string) => void;
+  onReady?: (editor: Editor) => void;
+}
+
+const component: ClosureComponent<Attrs> = () => {
   return {
     view: (vnode) => {
       return m("textarea", {
-        name: vnode.attrs["id"],
-        value: vnode.attrs["value"],
+        name: vnode.attrs.id,
+        value: vnode.attrs.value,
         oncreate: (_vnode) => {
           const editor = codeMirror.fromTextArea(
             _vnode.dom as HTMLTextAreaElement,
             {
-              mode: vnode.attrs["mode"],
+              mode: vnode.attrs.mode,
               lineNumbers: true,
-              readOnly: vnode.attrs["readOnly"],
+              readOnly: vnode.attrs.readOnly,
               extraKeys: {
                 "Ctrl-Enter": () => {
-                  if (vnode.attrs["onSubmit"])
-                    vnode.attrs["onSubmit"](_vnode.dom);
+                  if (vnode.attrs.onSubmit) vnode.attrs.onSubmit(_vnode.dom);
                 },
                 "Cmd-Enter": () => {
-                  if (vnode.attrs["onSubmit"])
-                    vnode.attrs["onSubmit"](_vnode.dom);
+                  if (vnode.attrs.onSubmit) vnode.attrs.onSubmit(_vnode.dom);
                 },
               },
             }
           );
 
-          if (vnode.attrs["onChange"]) {
+          if (vnode.attrs.onChange) {
             editor.on("change", (e) => {
-              vnode.attrs["onChange"](e.getValue());
+              vnode.attrs.onChange(e.getValue());
             });
           }
 
-          if (vnode.attrs["focus"]) editor.focus();
-          if (vnode.attrs["onReady"]) vnode.attrs["onReady"](editor);
+          if (vnode.attrs.focus) editor.focus();
+          if (vnode.attrs.onReady) vnode.attrs.onReady(editor);
         },
       });
     },

ui/components.ts

@@ -22,7 +22,7 @@ import m, {
   Attributes,
   Children,
   ComponentTypes,
-  Lifecycle,
+  CommonAttributes,
   ClosureComponent,
   Vnode,
 } from "mithril";
@@ -81,7 +81,7 @@ interface MC extends Static {
     <Attrs, State>(
       ctx: Attributes,
       component: ComponentTypes<Attrs, State>,
-      attributes: Attrs & Lifecycle<Attrs, State> & { key?: string | number },
+      attributes: Attrs & CommonAttributes<Attrs, State>,
       ...args: Children[]
     ): Vnode<Attrs, State>;
   };

ui/config-page.ts

@@ -154,7 +154,7 @@ function renderTable(confsResponse, searchString): Children {
               {
                 base: conf,
                 actionHandler: (action, object) => {
-                  return new Promise((resolve) => {
+                  return new Promise<void>((resolve) => {
                     putActionHandler(action, object, false)
                       .then((errors) => {
                         const ErrorList = errors ? Object.values(errors) : [];
@@ -164,11 +164,11 @@ function renderTable(confsResponse, searchString): Children {
                         } else {
                           overlay.close(cb);
                         }
-                        resolve(null);
+                        resolve();
                       })
                       .catch((err) => {
                         notifications.push("error", err.message);
-                        resolve(null);
+                        resolve();
                       });
                   });
                 },
@@ -322,7 +322,7 @@ export const component: ClosureComponent = (): Component => {
                     uiConfigComponent,
                     Object.assign(
                       {
-                        onUpdate: (errs: string[]) => {
+                        onUpdate: (errs: Record<string, string>) => {
                           const errors = errs ? Object.values(errs) : [];
                           if (errors.length) {
                             for (const err of errors)

ui/put-form-component.ts

@@ -17,7 +17,7 @@
  * along with GenieACS.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { VnodeDOM, ClosureComponent, Component, Children } from "mithril";
+import { VnodeDOM, ClosureComponent, Children } from "mithril";
 import { m } from "./components";
 import codeEditorComponent from "./code-editor-component";
 import { getDatalistId } from "./datalist";
@@ -175,13 +175,25 @@ function createField(current, attr, focus): Children {
   });
 }
 
-const component: ClosureComponent = (): Component => {
+interface Attrs {
+  base?: Record<string, any>;
+  actionHandler: (action: string, object: any) => Promise<void>;
+  resource: string;
+  attributes: {
+    id: string;
+    label: string;
+    type?: string;
+    options?: string[];
+  }[];
+}
+
+const component: ClosureComponent<Attrs> = () => {
   return {
     view: (vnode) => {
-      const actionHandler = vnode.attrs["actionHandler"];
-      const attributes = vnode.attrs["attributes"];
-      const resource = vnode.attrs["resource"];
-      const base = vnode.attrs["base"] || {};
+      const actionHandler = vnode.attrs.actionHandler;
+      const attributes = vnode.attrs.attributes;
+      const resource = vnode.attrs.resource;
+      const base = vnode.attrs.base || {};
       if (!vnode.state["current"]) {
         vnode.state["current"] = {
           isNew: !base["_id"],
@@ -226,7 +238,7 @@ const component: ClosureComponent = (): Component => {
               onclick: (e) => {
                 e.redraw = false;
                 e.target.disabled = true;
-                actionHandler("delete", current.object).then(() => {
+                actionHandler("delete", current.object).finally(() => {
                   e.target.disabled = false;
                 });
               },
@@ -255,7 +267,7 @@ const component: ClosureComponent = (): Component => {
               // e.target.onsubmit = null;
               (submit.dom as HTMLFormElement).disabled = true;
               // submit.dom.textContent = "Loading ...";
-              actionHandler("save", current.object).then(() => {
+              actionHandler("save", current.object).finally(() => {
                 // submit.dom.textContent = "Save";
                 // e.target.onsubmit = onsubmit;
                 (submit.dom as HTMLFormElement).disabled = false;

ui/ui-config-component.ts

@@ -17,7 +17,7 @@
  * along with GenieACS.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { ClosureComponent, Component } from "mithril";
+import { ClosureComponent } from "mithril";
 import { m } from "./components";
 import * as store from "./store";
 import { yaml } from "./dynamic-loader";
@@ -86,12 +86,20 @@ function putActionHandler(prefix: string[], dataYaml: string): Promise<any> {
   });
 }
 
-const component: ClosureComponent = (): Component => {
+interface Attrs {
+  prefix: string;
+  name: string;
+  data: { _id: string; value: string }[];
+  onUpdate: (errs: Record<string, string>) => void;
+  onError: (err: Error) => void;
+}
+
+const component: ClosureComponent<Attrs> = () => {
   return {
     view: (vnode) => {
-      const prefix = vnode.attrs["prefix"].split(".");
-      const name = vnode.attrs["name"];
-      const data = vnode.attrs["data"];
+      const prefix = vnode.attrs.prefix.split(".");
+      const name = vnode.attrs.name;
+      const data = vnode.attrs.data;
 
       if (prefix[prefix.length - 1] === "") prefix.pop();
 
@@ -135,8 +143,8 @@ const component: ClosureComponent = (): Component => {
                 vnode.state["updatedYaml"] = yamlString;
 
               putActionHandler(prefix, vnode.state["updatedYaml"])
-                .then(vnode.attrs["onUpdate"])
-                .catch(vnode.attrs["onError"]);
+                .then(vnode.attrs.onUpdate)
+                .catch(vnode.attrs.onError);
             },
           },
           [code, m(".actions-bar", [submit])]