Add PolicyEdit page.

src/allPages.ts

@@ -23,6 +23,7 @@ import { NewTransitKeyPage } from "./pages/Secrets/Transit/NewTransitKey";
 import { Page } from "./types/Page";
 import { PoliciesHomePage } from "./pages/Policies/PoliciesHome";
 import { PolicyDeletePage } from "./pages/Policies/PolicyDelete";
+import { PolicyEditPage } from "./pages/Policies/PolicyEdit";
 import { PolicyNewPage } from "./pages/Policies/PolicyNew";
 import { PolicyViewPage } from "./pages/Policies/PolicyView";
 import { PwGenPage } from "./pages/PwGen";
@@ -61,6 +62,7 @@ export const allPages: pagesList = {
   POLICIES_HOME: new PoliciesHomePage(),
   POLICY_VIEW: new PolicyViewPage(),
   POLICY_NEW: new PolicyNewPage(),
+  POLICY_EDIT: new PolicyEditPage(),
   POLICY_DELETE: new PolicyDeletePage(),
 
   ACCESS_HOME: new AccessHomePage(),

src/pages/Policies/PolicyEdit.tsx

@@ -0,0 +1,115 @@
+import { CodeEditor } from "../../elements/CodeEditor";
+import { Component, JSX, render } from "preact";
+import { Margin } from "../../elements/Margin";
+import { MarginInline } from "../../elements/MarginInline";
+import { Page } from "../../types/Page";
+import { createOrUpdatePolicy } from "../../api/sys/policies/createOrUpdatePolicy";
+import { getPolicy } from "../../api/sys/policies/getPolicy";
+import { setErrorText } from "../../pageUtils";
+import i18next from "i18next";
+
+type PolicyEditorProps = {
+  page: Page;
+  policy_name: string;
+};
+
+type PolicyEditorState =
+  | {
+      dataLoaded: false;
+    }
+  | {
+      dataLoaded: true;
+      policyData: string;
+      code: string;
+    };
+
+export class PolicyEditor extends Component<PolicyEditorProps, PolicyEditorState> {
+  constructor() {
+    super();
+    this.state = {
+      dataLoaded: false,
+    };
+  }
+
+  async editorSave(): Promise<void> {
+    if (!this.state.dataLoaded) return;
+
+    try {
+      await createOrUpdatePolicy(this.props.policy_name, this.state.code);
+      await this.props.page.router.changePage("POLICY_VIEW");
+    } catch (e: unknown) {
+      const error = e as Error;
+      setErrorText(error.message);
+    }
+  }
+
+  onCodeUpdate(code: string): void {
+    this.setState({
+      code: code,
+    });
+  }
+
+  async loadData(): Promise<void> {
+    const policyData = await getPolicy(this.props.policy_name);
+    this.setState({
+      dataLoaded: true,
+      policyData: policyData,
+      code: policyData,
+    });
+    return;
+  }
+
+  componentDidMount(): void {
+    if (!this.state.dataLoaded) {
+      void this.loadData();
+    }
+  }
+
+  render(): JSX.Element {
+    if (!this.state.dataLoaded) {
+      return <p>{i18next.t("content_loading")}</p>;
+    }
+
+    return (
+      <div>
+        <p class="uk-text-danger" id="errorText" />
+        <Margin>
+          <CodeEditor
+            language="hcl"
+            tabSize={2}
+            code={this.state.policyData}
+            onUpdate={(code) => this.onCodeUpdate(code)}
+          />
+        </Margin>
+        <MarginInline>
+          <button class="uk-button uk-button-primary" onClick={() => this.editorSave()}>
+            {i18next.t("policy_edit_edit_btn")}
+          </button>
+        </MarginInline>
+      </div>
+    );
+  }
+}
+
+export class PolicyEditPage extends Page {
+  constructor() {
+    super();
+  }
+  async goBack(): Promise<void> {
+    await this.router.changePage("POLICY_VIEW");
+  }
+  async render(): Promise<void> {
+    render(
+      <div>
+        <PolicyEditor page={this} policy_name={this.state.policyItem} />
+      </div>,
+      this.router.pageContentElement,
+    );
+  }
+
+  get name(): string {
+    return i18next.t("policy_edit_title", {
+      policy: this.state.policyItem,
+    });
+  }
+}

src/pages/Policies/PolicyView.tsx

@@ -2,7 +2,7 @@ import { CodeBlock } from "../../elements/CodeBlock";
 import { Margin } from "../../elements/Margin";
 import { Page } from "../../types/Page";
 import { getPolicy } from "../../api/sys/policies/getPolicy";
-import { notImplemented, prePageChecks } from "../../pageUtils";
+import { prePageChecks } from "../../pageUtils";
 import { render } from "preact";
 import i18next from "i18next";
 
@@ -22,7 +22,12 @@ export class PolicyViewPage extends Page {
     render(
       <div>
         <p>
-          <button class="uk-button uk-button-primary" onClick={notImplemented}>
+          <button
+            class="uk-button uk-button-primary"
+            onClick={async () => {
+              await this.router.changePage("POLICY_EDIT");
+            }}
+          >
             {i18next.t("policy_view_edit_btn")}
           </button>
           {this.state.policyItem !== "default" && (

src/pages/Secrets/KeyValue/KeyValueSecretsEdit.tsx

@@ -84,7 +84,7 @@ export class KVEditor extends Component<KVEditProps, KVEditState> {
 
   render(): JSX.Element {
     if (!this.state.dataLoaded) {
-      return <p>{i18next.t("kv_sec_edit_loading")}</p>;
+      return <p>{i18next.t("content_loading")}</p>;
     }
 
     return (

src/translations/en.js

@@ -298,15 +298,18 @@ module.exports = {
   policy_view_edit_btn: "Edit",
   policy_view_delete_btn: "Delete",
 
-  // Policy Delete
-  policy_delete_title: "Delete Policy ({{policy}})",
-  policy_delete_text:
-    "Are you sure you want to delete this policy? It can't be reversed and there is a chance that all permissions will break.",
-  policy_delete_btn: "Delete Policy",
-
   // Policy New
   policy_new_title: "Create New Policy",
   policy_new_name_placeholder: "Policy Name",
   policy_new_create_btn: "Create",
   policy_new_already_exists: "This policy already exists.",
+
+  policy_edit_title: "Edit Policy ({{policy}})",
+  policy_edit_edit_btn: "Edit",
+
+  // Policy Delete
+  policy_delete_title: "Delete Policy ({{policy}})",
+  policy_delete_text:
+    "Are you sure you want to delete this policy? It can't be reversed and there is a chance that all permissions will break.",
+  policy_delete_btn: "Delete Policy",
 };