Add tsx syntax to KeyValueSecret.
This commit is contained in:
Kitteh
parent
0309dac899
commit
e4d749cce0
46
src/elements/ReactCopyableInputBox.tsx
Normal file
46
src/elements/ReactCopyableInputBox.tsx
Normal file
|
|
@ -0,0 +1,46 @@
|
||||||
|
import { Component, JSX, createRef } from "preact";
|
||||||
|
import { MarginInline } from "./ReactMarginInline";
|
||||||
|
import { addClipboardNotifications } from "../pageUtils";
|
||||||
|
import ClipboardJS from "clipboard";
|
||||||
|
import i18next from "i18next";
|
||||||
|
|
||||||
|
export type CopyableInputBoxProps = {
|
||||||
|
text: string;
|
||||||
|
copyable?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export class CopyableInputBox extends Component<CopyableInputBoxProps, unknown> {
|
||||||
|
copyIconRef = createRef();
|
||||||
|
inputBoxRef = createRef();
|
||||||
|
|
||||||
|
componentDidMount(): void {
|
||||||
|
const clipboard = new ClipboardJS(this.copyIconRef.current);
|
||||||
|
addClipboardNotifications(clipboard, 600);
|
||||||
|
}
|
||||||
|
|
||||||
|
render(): JSX.Element {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<MarginInline>
|
||||||
|
{this.props.copyable && (
|
||||||
|
<a
|
||||||
|
ref={this.copyIconRef}
|
||||||
|
class="uk-form-icon"
|
||||||
|
uk-icon="icon: copy"
|
||||||
|
role="img"
|
||||||
|
data-clipboard-text={this.props.text}
|
||||||
|
aria-label={i18next.t("copy_input_box_copy_icon_text")}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<input
|
||||||
|
ref={this.inputBoxRef}
|
||||||
|
class="uk-input uk-input-copyable"
|
||||||
|
type="text"
|
||||||
|
value={this.props.text}
|
||||||
|
readonly
|
||||||
|
/>
|
||||||
|
</MarginInline>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
13
src/elements/ReactMarginInline.tsx
Normal file
13
src/elements/ReactMarginInline.tsx
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
import { JSX } from "preact";
|
||||||
|
|
||||||
|
export type MarginInlineProps = {
|
||||||
|
children?: JSX.Element | JSX.Element[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export function MarginInline(props: MarginInlineProps): JSX.Element {
|
||||||
|
return (
|
||||||
|
<div class="uk-margin">
|
||||||
|
<div class="uk-inline">{props.children}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,186 +0,0 @@
|
||||||
import { CopyableInputBox } from "../../../elements/CopyableInputBox";
|
|
||||||
import { Page } from "../../../types/Page";
|
|
||||||
import { SecretTitleElement } from "../SecretTitleElement";
|
|
||||||
import { getCapabilities } from "../../../api/sys/getCapabilities";
|
|
||||||
import { getSecret } from "../../../api/kv/getSecret";
|
|
||||||
import { makeElement } from "z-makeelement";
|
|
||||||
import { sortedObjectMap } from "../../../utils";
|
|
||||||
import { undeleteSecret } from "../../../api/kv/undeleteSecret";
|
|
||||||
import Prism from "prismjs";
|
|
||||||
import i18next from "i18next";
|
|
||||||
|
|
||||||
export class KeyValueSecretPage extends Page {
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
}
|
|
||||||
async goBack(): Promise<void> {
|
|
||||||
if (this.state.secretVersion != null) {
|
|
||||||
this.state.secretVersion = null;
|
|
||||||
await this.router.changePage("KEY_VALUE_VERSIONS");
|
|
||||||
} else {
|
|
||||||
this.state.secretItem = "";
|
|
||||||
await this.router.changePage("KEY_VALUE_VIEW");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
async render(): Promise<void> {
|
|
||||||
await this.router.setPageContent(
|
|
||||||
makeElement({
|
|
||||||
tag: "div",
|
|
||||||
children: [
|
|
||||||
makeElement({
|
|
||||||
tag: "p",
|
|
||||||
id: "buttonsBlock",
|
|
||||||
}),
|
|
||||||
makeElement({
|
|
||||||
tag: "p",
|
|
||||||
text: i18next.t("kv_secret_loading"),
|
|
||||||
id: "loadingText",
|
|
||||||
}),
|
|
||||||
makeElement({
|
|
||||||
tag: "div",
|
|
||||||
id: "kvList",
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
||||||
const buttonsBlock = document.querySelector("#buttonsBlock");
|
|
||||||
const kvList = document.querySelector("#kvList");
|
|
||||||
let isSecretNestedJson = false;
|
|
||||||
const caps = await getCapabilities(
|
|
||||||
this.state.baseMount,
|
|
||||||
this.state.secretPath,
|
|
||||||
this.state.secretItem,
|
|
||||||
);
|
|
||||||
if (caps.includes("delete")) {
|
|
||||||
let deleteButtonText = i18next.t("kv_secret_delete_btn");
|
|
||||||
if (this.state.secretMountType == "kv-v2" && this.state.secretVersion == null) {
|
|
||||||
deleteButtonText = i18next.t("kv_secret_delete_all_btn");
|
|
||||||
} else if (this.state.secretMountType == "kv-v2" && this.state.secretVersion != null) {
|
|
||||||
deleteButtonText = i18next.t("kv_secret_delete_version_btn", {
|
|
||||||
version: this.state.secretVersion,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
buttonsBlock.appendChild(
|
|
||||||
makeElement({
|
|
||||||
tag: "button",
|
|
||||||
id: "deleteButton",
|
|
||||||
class: ["uk-button", "uk-button-danger"],
|
|
||||||
onclick: async () => {
|
|
||||||
await this.router.changePage("KEY_VALUE_DELETE");
|
|
||||||
},
|
|
||||||
text: deleteButtonText,
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (caps.includes("update")) {
|
|
||||||
if (this.state.secretVersion == null) {
|
|
||||||
buttonsBlock.appendChild(
|
|
||||||
makeElement({
|
|
||||||
tag: "button",
|
|
||||||
id: "editButton",
|
|
||||||
class: ["uk-button", "uk-margin", "uk-button-primary"],
|
|
||||||
onclick: async () => {
|
|
||||||
await this.router.changePage("KEY_VALUE_SECRET_EDIT");
|
|
||||||
},
|
|
||||||
text: i18next.t("kv_secret_edit_btn"),
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (this.state.secretMountType == "kv-v2") {
|
|
||||||
buttonsBlock.appendChild(
|
|
||||||
makeElement({
|
|
||||||
tag: "button",
|
|
||||||
id: "versionsButton",
|
|
||||||
class: ["uk-button", "uk-button-secondary"],
|
|
||||||
onclick: async () => {
|
|
||||||
await this.router.changePage("KEY_VALUE_VERSIONS");
|
|
||||||
},
|
|
||||||
text: i18next.t("kv_secret_versions_btn"),
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const secretInfo = await getSecret(
|
|
||||||
this.state.baseMount,
|
|
||||||
this.state.secretMountType,
|
|
||||||
this.state.secretPath,
|
|
||||||
this.state.secretItem,
|
|
||||||
this.state.secretVersion,
|
|
||||||
);
|
|
||||||
|
|
||||||
if (secretInfo == null && this.state.secretMountType == "kv-v2") {
|
|
||||||
document.querySelector("#buttonsBlock").remove();
|
|
||||||
document.getElementById("loadingText").remove();
|
|
||||||
|
|
||||||
kvList.appendChild(
|
|
||||||
makeElement({
|
|
||||||
tag: "p",
|
|
||||||
text: i18next.t("kv_secret_deleted_text"),
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
||||||
kvList.appendChild(
|
|
||||||
makeElement({
|
|
||||||
tag: "button",
|
|
||||||
text: i18next.t("kv_secret_restore_btn"),
|
|
||||||
id: "restoreButton",
|
|
||||||
class: ["uk-button", "uk-button-primary"],
|
|
||||||
onclick: async () => {
|
|
||||||
await undeleteSecret(
|
|
||||||
this.state.baseMount,
|
|
||||||
this.state.secretPath,
|
|
||||||
this.state.secretItem,
|
|
||||||
this.state.secretVersion,
|
|
||||||
);
|
|
||||||
await this.router.refresh();
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const secretsMap = sortedObjectMap(secretInfo);
|
|
||||||
|
|
||||||
for (const value of secretsMap.values()) {
|
|
||||||
if (typeof value == "object") isSecretNestedJson = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isSecretNestedJson) {
|
|
||||||
const jsonText = JSON.stringify(
|
|
||||||
sortedObjectMap(secretsMap as unknown as Record<string, unknown>),
|
|
||||||
null,
|
|
||||||
4,
|
|
||||||
);
|
|
||||||
kvList.appendChild(
|
|
||||||
makeElement({
|
|
||||||
tag: "pre",
|
|
||||||
class: ["code-block", "language-json", "line-numbers"],
|
|
||||||
html: Prism.highlight(jsonText, Prism.languages.json, "json"),
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
secretsMap.forEach((value: string, key: string) => {
|
|
||||||
const kvListElement = this.makeKVListElement(key, value);
|
|
||||||
kvList.appendChild(kvListElement);
|
|
||||||
}, this);
|
|
||||||
}
|
|
||||||
document.getElementById("loadingText").remove();
|
|
||||||
}
|
|
||||||
makeKVListElement(key: string, value: string): HTMLElement {
|
|
||||||
return makeElement({
|
|
||||||
tag: "div",
|
|
||||||
class: ["uk-grid", "uk-grid-small", "uk-text-left"],
|
|
||||||
children: [CopyableInputBox(key), CopyableInputBox(value)],
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async getPageTitle(): Promise<Element | string> {
|
|
||||||
return await SecretTitleElement(this.router);
|
|
||||||
}
|
|
||||||
|
|
||||||
get name(): string {
|
|
||||||
return i18next.t("kv_secret_title");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
172
src/pages/Secrets/KeyValue/KeyValueSecret.tsx
Normal file
172
src/pages/Secrets/KeyValue/KeyValueSecret.tsx
Normal file
|
|
@ -0,0 +1,172 @@
|
||||||
|
import { CopyableInputBox } from "../../../elements/ReactCopyableInputBox";
|
||||||
|
import { Page } from "../../../types/Page";
|
||||||
|
import { SecretTitleElement } from "../SecretTitleElement";
|
||||||
|
import { getCapabilities } from "../../../api/sys/getCapabilities";
|
||||||
|
import { getSecret } from "../../../api/kv/getSecret";
|
||||||
|
import { render } from "preact";
|
||||||
|
import { sortedObjectMap } from "../../../utils";
|
||||||
|
import { undeleteSecret } from "../../../api/kv/undeleteSecret";
|
||||||
|
import Prism from "prismjs";
|
||||||
|
import i18next from "i18next";
|
||||||
|
|
||||||
|
export class KeyValueSecretPage extends Page {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
async goBack(): Promise<void> {
|
||||||
|
if (this.state.secretVersion != null) {
|
||||||
|
this.state.secretVersion = null;
|
||||||
|
await this.router.changePage("KEY_VALUE_VERSIONS");
|
||||||
|
} else {
|
||||||
|
this.state.secretItem = "";
|
||||||
|
await this.router.changePage("KEY_VALUE_VIEW");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
async render(): Promise<void> {
|
||||||
|
const caps = await getCapabilities(
|
||||||
|
this.state.baseMount,
|
||||||
|
this.state.secretPath,
|
||||||
|
this.state.secretItem,
|
||||||
|
);
|
||||||
|
render(
|
||||||
|
<div>
|
||||||
|
<p id="buttonsBlock">
|
||||||
|
{
|
||||||
|
// Delete Button
|
||||||
|
caps.includes("delete") && (
|
||||||
|
<button
|
||||||
|
class="uk-button uk-button-danger"
|
||||||
|
onClick={async () => {
|
||||||
|
await this.router.changePage("KEY_VALUE_DELETE");
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{((): string => {
|
||||||
|
let deleteButtonText = i18next.t("kv_secret_delete_btn");
|
||||||
|
if (this.state.secretMountType == "kv-v2" && this.state.secretVersion == null) {
|
||||||
|
deleteButtonText = i18next.t("kv_secret_delete_all_btn");
|
||||||
|
} else if (
|
||||||
|
this.state.secretMountType == "kv-v2" &&
|
||||||
|
this.state.secretVersion != null
|
||||||
|
) {
|
||||||
|
deleteButtonText = i18next.t("kv_secret_delete_version_btn", {
|
||||||
|
version: this.state.secretVersion,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return deleteButtonText;
|
||||||
|
})()}
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
{caps.includes("update") && this.state.secretVersion == null && (
|
||||||
|
<button
|
||||||
|
class="uk-button uk-button-primary"
|
||||||
|
onClick={async () => {
|
||||||
|
await this.router.changePage("KEY_VALUE_SECRET_EDIT");
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{i18next.t("kv_secret_edit_btn")}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{this.state.secretMountType == "kv-v2" && (
|
||||||
|
<button
|
||||||
|
class="uk-button uk-button-secondary"
|
||||||
|
onClick={async () => {
|
||||||
|
await this.router.changePage("KEY_VALUE_VERSIONS");
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{i18next.t("kv_secret_versions_btn")}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
<p id="loadingText">{i18next.t("kv_secret_loading")}</p>
|
||||||
|
<div id="kvList"></div>
|
||||||
|
</div>,
|
||||||
|
this.router.pageContentElement,
|
||||||
|
);
|
||||||
|
|
||||||
|
const kvList = document.querySelector("#kvList");
|
||||||
|
let isSecretNestedJson = false;
|
||||||
|
|
||||||
|
const secretInfo = await getSecret(
|
||||||
|
this.state.baseMount,
|
||||||
|
this.state.secretMountType,
|
||||||
|
this.state.secretPath,
|
||||||
|
this.state.secretItem,
|
||||||
|
this.state.secretVersion,
|
||||||
|
);
|
||||||
|
|
||||||
|
// On kv-v2, secrets can be deleted temporarily with the ability to restore
|
||||||
|
if (secretInfo == null && this.state.secretMountType == "kv-v2") {
|
||||||
|
try {
|
||||||
|
document.querySelector("#buttonsBlock").remove();
|
||||||
|
document.getElementById("loadingText").remove();
|
||||||
|
} catch (_) {
|
||||||
|
// Do Nothing
|
||||||
|
}
|
||||||
|
render(
|
||||||
|
<>
|
||||||
|
<p>{i18next.t("kv_secret_deleted_text")}</p>
|
||||||
|
<button
|
||||||
|
class="uk-button uk-button-primary"
|
||||||
|
onClick={async () => {
|
||||||
|
await undeleteSecret(
|
||||||
|
this.state.baseMount,
|
||||||
|
this.state.secretPath,
|
||||||
|
this.state.secretItem,
|
||||||
|
this.state.secretVersion,
|
||||||
|
);
|
||||||
|
await this.router.refresh();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{i18next.t("kv_secret_restore_btn")}
|
||||||
|
</button>
|
||||||
|
</>,
|
||||||
|
kvList,
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const secretsMap = sortedObjectMap(secretInfo);
|
||||||
|
|
||||||
|
for (const value of secretsMap.values()) {
|
||||||
|
if (typeof value == "object") isSecretNestedJson = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isSecretNestedJson) {
|
||||||
|
const jsonText = JSON.stringify(
|
||||||
|
sortedObjectMap(secretsMap as unknown as Record<string, unknown>),
|
||||||
|
null,
|
||||||
|
4,
|
||||||
|
);
|
||||||
|
const highlightedJson = Prism.highlight(jsonText, Prism.languages.json, "json");
|
||||||
|
render(
|
||||||
|
<pre
|
||||||
|
class="code-block language-json line-numbers"
|
||||||
|
dangerouslySetInnerHTML={{ __html: highlightedJson }}
|
||||||
|
/>,
|
||||||
|
kvList,
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
render(
|
||||||
|
<>
|
||||||
|
{Array.from(secretsMap).map((data: [string, string]) => (
|
||||||
|
<div class="uk-grid uk-grid-small uk-text-left" uk-grid>
|
||||||
|
<CopyableInputBox text={data[0]} copyable />
|
||||||
|
<CopyableInputBox text={data[1]} copyable />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</>,
|
||||||
|
kvList,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
document.getElementById("loadingText").remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
async getPageTitle(): Promise<Element | string> {
|
||||||
|
return await SecretTitleElement(this.router);
|
||||||
|
}
|
||||||
|
|
||||||
|
get name(): string {
|
||||||
|
return i18next.t("kv_secret_title");
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue