Add PolicyView page.

src/PageState.ts

@@ -92,6 +92,13 @@ export class PageState {
     localStorage.setItem("secretMountType", value);
   }
 
+  get policyItem(): string {
+    return localStorage.getItem("policyItem") || "";
+  }
+  set policyItem(value: string) {
+    localStorage.setItem("policyItem", value);
+  }
+
   get authPath(): string {
     return localStorage.getItem("authPath") || "";
   }

src/allPages.ts

@@ -22,6 +22,7 @@ import { NewTransitEnginePage } from "./pages/Secrets/NewEngines/NewTransitEngin
 import { NewTransitKeyPage } from "./pages/Secrets/Transit/NewTransitKey";
 import { Page } from "./types/Page";
 import { PoliciesHomePage } from "./pages/Policies/PoliciesHome";
+import { PolicyViewPage } from "./pages/Policies/PolicyView";
 import { PwGenPage } from "./pages/PwGen";
 import { SecretsHomePage } from "./pages/Secrets/SecretsHome";
 import { SetLanguagePage } from "./pages/SetLanguage";
@@ -56,6 +57,7 @@ export const allPages: pagesList = {
   PW_GEN: new PwGenPage(),
 
   POLICIES_HOME: new PoliciesHomePage(),
+  POLICY_VIEW: new PolicyViewPage(),
 
   ACCESS_HOME: new AccessHomePage(),
 

src/api/sys/getPolicy.ts

@@ -0,0 +1,10 @@
+import { appendAPIURL, getHeaders } from "../apiUtils";
+
+export async function getPolicy(name: string): Promise<string> {
+  const request = new Request(appendAPIURL("/v1/sys/policies/acl/" + name), {
+    headers: getHeaders(),
+  });
+  const response = await fetch(request);
+  const data = (await response.json()) as { data: { policy: string } };
+  return data.data.policy;
+}

src/elements/CodeBlock.tsx

@@ -0,0 +1,22 @@
+import { JSX } from "preact";
+import Prism from "prismjs";
+
+export type CodeBlockProps = {
+  language: string;
+  code: string;
+};
+
+export function CodeBlock(props: CodeBlockProps): JSX.Element {
+  const highlightedCode = Prism.highlight(
+    props.code,
+    Prism.languages[props.language],
+    props.language,
+  );
+
+  return (
+    <pre
+      class="code-block language-json line-numbers"
+      dangerouslySetInnerHTML={{ __html: highlightedCode }}
+    />
+  );
+}

src/main.tsx

@@ -13,6 +13,7 @@ UIkit.use(Icons);
 import Prism from "prismjs";
 // Don't Sort These!
 import "prismjs/components/prism-json";
+import "prismjs/components/prism-hcl";
 
 Prism.highlightAll();
 /* eslint-enable */

src/pages/Policies/PoliciesHome.tsx

@@ -34,7 +34,14 @@ export class PoliciesHomePage extends Page {
           <ul class="uk-nav uk-nav-default">
             {policies.map((policy: string) => (
               <li>
-                <a onClick={notImplemented}>{policy}</a>
+                <a
+                  onClick={async () => {
+                    this.state.policyItem = policy;
+                    await this.router.changePage("POLICY_VIEW");
+                  }}
+                >
+                  {policy}
+                </a>
               </li>
             ))}
           </ul>

src/pages/Policies/PolicyView.tsx

@@ -0,0 +1,48 @@
+import { CodeBlock } from "../../elements/CodeBlock";
+import { Margin } from "../../elements/Margin";
+import { Page } from "../../types/Page";
+import { getPolicy } from "../../api/sys/getPolicy";
+import { notImplemented, prePageChecks } from "../../pageUtils";
+import { render } from "preact";
+import i18next from "i18next";
+
+export class PolicyViewPage extends Page {
+  constructor() {
+    super();
+  }
+  async goBack(): Promise<void> {
+    await this.router.changePage("POLICIES_HOME");
+  }
+  async render(): Promise<void> {
+    await this.router.setPageContent("");
+    if (!(await prePageChecks(this.router))) return;
+
+    const policy = await getPolicy(this.state.policyItem);
+
+    render(
+      <div>
+        <p>
+          <button class="uk-button uk-button-primary" onClick={notImplemented}>
+            {i18next.t("policy_view_edit_btn")}
+          </button>
+          {this.state.policyItem !== "default" && (
+            <button class="uk-button uk-button-danger" onClick={notImplemented}>
+              {i18next.t("policy_view_delete_btn")}
+            </button>
+          )}
+        </p>
+
+        <Margin>
+          <CodeBlock language="hcl" code={policy} />
+        </Margin>
+      </div>,
+      this.router.pageContentElement,
+    );
+  }
+
+  get name(): string {
+    return i18next.t("policy_view_title", {
+      policy: this.state.policyItem,
+    });
+  }
+}

src/pages/Secrets/KeyValue/KeyValueSecret.tsx

@@ -1,3 +1,4 @@
+import { CodeBlock } from "../../../elements/CodeBlock";
 import { Component, JSX, render } from "preact";
 import { CopyableInputBox } from "../../../elements/CopyableInputBox";
 import { Grid, GridSizes } from "../../../elements/Grid";
@@ -7,7 +8,6 @@ import { getCapabilities } from "../../../api/sys/getCapabilities";
 import { getSecret } from "../../../api/kv/getSecret";
 import { sortedObjectMap } from "../../../utils";
 import { undeleteSecret } from "../../../api/kv/undeleteSecret";
-import Prism from "prismjs";
 import i18next from "i18next";
 
 export type KVSecretViewProps = {
@@ -25,13 +25,7 @@ export class KVSecretVew extends Component<KVSecretViewProps, unknown> {
 
     if (isMultiLevelJSON) {
       const jsonText = JSON.stringify(Object.fromEntries(secretsMap), null, 4);
-      const highlightedJson = Prism.highlight(jsonText, Prism.languages.json, "json");
-      return (
-        <pre
-          class="code-block language-json line-numbers"
-          dangerouslySetInnerHTML={{ __html: highlightedJson }}
-        />
-      );
+      return <CodeBlock language="json" code={jsonText} />;
     } else {
       return (
         <>

src/translations/en.js

@@ -292,4 +292,9 @@ module.exports = {
   // Policies Home
   policies_home_title: "Policies",
   policies_home_new_btn: "New",
+
+  // Policy View
+  policy_view_title: "Policy View ({{policy}})",
+  policy_view_edit_btn: "Edit",
+  policy_view_delete_btn: "Delete",
 };