work on a few things idk

src/ui/elements/CopyableBox.tsx

@@ -5,6 +5,7 @@ import { addClipboardNotifications } from "../../utils/clipboardNotifs";
 import ClipboardJS from "clipboard";
 import FileSaver from "file-saver";
 import i18next from "i18next";
+import { InlineButtonBox } from "./InlineButtonBox";
 
 export type CopyableBoxProps = {
   title: string;
@@ -34,7 +35,7 @@ export class CopyableBox extends Component<CopyableBoxProps> {
           <h2>{this.props.title}</h2>
         </div>
         <CodeBlock code={this.props.contentString} />
-        <p>
+        <InlineButtonBox>
           <Button
             text={i18next.t("copy_box_download_btn")}
             color="primary"
@@ -49,7 +50,7 @@ export class CopyableBox extends Component<CopyableBoxProps> {
           {this.props.goBack && (
             <Button text={i18next.t("common_back")} color="secondary" onClick={this.props.goBack} />
           )}
-        </p>
+        </InlineButtonBox>
       </div>
     );
   }

src/ui/elements/InlineButtonBox.tsx

@@ -0,0 +1,9 @@
+import { JSX } from "preact";
+
+export type InlineButtonBoxProps = {
+    children?: JSX.Element | JSX.Element[];
+};
+
+export function InlineButtonBox(props: InlineButtonBoxProps): JSX.Element {
+    return <div>{props.children}</div>;
+}

src/ui/pages/Access/Auth/userpass/UserPassUserView.tsx

@@ -9,6 +9,7 @@ import { sendErrorNotification } from "../../../../elements/ErrorMessage";
 import { toStr } from "../../../../../utils";
 import { userPassUserDeleteURL, userPassUserEditURL } from "../../../pageLinks";
 import i18next from "i18next";
+import { InlineButtonBox } from "../../../../elements/InlineButtonBox";
 
 export class UserPassUserView extends Component<DefaultPageProps, { user_data: UserType }> {
   async componentDidMount() {
@@ -36,7 +37,7 @@ export class UserPassUserView extends Component<DefaultPageProps, { user_data: U
         <PageTitle title={i18next.t("userpass_user_view_title")} />
 
         <div>
-          <p>
+          <InlineButtonBox>
             <Button
               text={i18next.t("common_delete")}
               color="danger"
@@ -47,7 +48,7 @@ export class UserPassUserView extends Component<DefaultPageProps, { user_data: U
               color="primary"
               route={userPassUserEditURL(baseMount, user)}
             />
-          </p>
+          </InlineButtonBox>
 
           <br />
 

src/ui/pages/Policies/PoliciesHome.tsx

@@ -7,6 +7,7 @@ import { policyNewURL, policyViewURL } from "../pageLinks";
 import { route } from "preact-router";
 import { sendErrorNotification } from "../../elements/ErrorMessage";
 import i18next from "i18next";
+import { InlineButtonBox } from "../../elements/InlineButtonBox";
 
 export class PoliciesHome extends Component<DefaultPageProps, { policies: string[] }> {
   async componentDidMount() {
@@ -32,9 +33,9 @@ export class PoliciesHome extends Component<DefaultPageProps, { policies: string
       <>
         <PageTitle title={i18next.t("policies_home_title")} />
         <div>
-          <p>
+          <InlineButtonBox>
             <Button text={i18next.t("common_new")} color="primary" route={policyNewURL()} />
-          </p>
+          </InlineButtonBox>
 
           <Margin>
             <ul class="uk-nav uk-nav-default">

src/ui/pages/Policies/PolicyView.tsx

@@ -7,6 +7,7 @@ import { PageTitle } from "../../elements/PageTitle";
 import { policyDeleteURL, policyEditURL } from "../pageLinks";
 import { sendErrorNotification } from "../../elements/ErrorMessage";
 import i18next from "i18next";
+import { InlineButtonBox } from "../../elements/InlineButtonBox";
 
 export class PolicyView extends Component<
   DefaultPageProps,
@@ -32,7 +33,7 @@ export class PolicyView extends Component<
       <>
         <PageTitle title={i18next.t("policy_view_title", { policy: this.state.policyName })} />
         <div>
-          <p>
+          <InlineButtonBox>
             <Button
               text={i18next.t("common_edit")}
               color="primary"
@@ -45,7 +46,7 @@ export class PolicyView extends Component<
                 route={policyDeleteURL(this.state.policyName)}
               />
             )}
-          </p>
+          </InlineButtonBox>
 
           <Margin>
             <CodeBlock language="hcl" code={this.state.policy} />

src/ui/pages/Secrets/KeyValue/KeyValueList.tsx

@@ -10,6 +10,7 @@ import { delSecretsEngineURL, kvListURL, kvNewURL, kvViewURL } from "../../pageL
 import { route } from "preact-router";
 import { sendErrorNotification } from "../../../elements/ErrorMessage";
 import i18next from "i18next";
+import { InlineButtonBox } from "../../../elements/InlineButtonBox";
 
 export type KVKeysListProps = DefaultPageProps & {
   baseMount: string;
@@ -190,7 +191,7 @@ export class KeyValueList extends Component<DefaultPageProps, KeyValueListState>
           secretPath={secretPath}
           item={this.props.matches["item"]}
         />
-        <p>
+        <InlineButtonBox>
           {this.state.pathCaps.includes("create") && (
             <Button
               text={i18next.t("kv_view_new_btn")}
@@ -205,7 +206,7 @@ export class KeyValueList extends Component<DefaultPageProps, KeyValueListState>
               route={delSecretsEngineURL(baseMount)}
             />
           )}
-        </p>
+        </InlineButtonBox>
         {this.state.mountType == "cubbyhole" && <p>{i18next.t("kv_view_cubbyhole_text")}</p>}
         <KVKeysList
           settings={this.props.settings}

src/ui/pages/Secrets/SecretsHome.tsx

@@ -6,6 +6,7 @@ import { PageTitle } from "../../elements/PageTitle";
 import { sendErrorNotification } from "../../elements/ErrorMessage";
 import { sortedObjectMap } from "../../../utils";
 import i18next from "i18next";
+import { InlineButtonBox } from "../../elements/InlineButtonBox";
 
 const supportedMountTypes = ["kv", "totp", "transit", "cubbyhole"];
 
@@ -79,18 +80,16 @@ export class Secrets extends Component<DefaultPageProps, SecretsState> {
         <>
           <PageTitle title={i18next.t("secrets_home_page_title")} />
           <div>
-            <div>
+            <InlineButtonBox>
-              <p>
+              {this.state.capabilities.includes("sudo") &&
-                {this.state.capabilities.includes("sudo") &&
+                this.state.capabilities.includes("create") && (
-                  this.state.capabilities.includes("create") && (
+                  <Button
-                    <Button
+                    text={i18next.t("secrets_home_new_secrets_engine_button")}
-                      text={i18next.t("secrets_home_new_secrets_engine_button")}
+                    color="primary"
-                      color="primary"
+                    route={"/secrets/new_secrets_engine"}
-                      route={"/secrets/new_secrets_engine"}
+                  />
-                    />
+                )}
-                  )}
+            </InlineButtonBox>
-              </p>
-            </div>
             <div class="uk-margin-top">
               <ul class="uk-nav uk-nav-default">
                 {Array.from(this.state.mountsMap).map((args: [string, MountType]) => {

src/ui/pages/Secrets/TOTP/TOTPList.tsx

@@ -17,6 +17,7 @@ import {
 import { removeDoubleSlash } from "../../../../utils";
 import { sendErrorNotification } from "../../../elements/ErrorMessage";
 import i18next from "i18next";
+import { InlineButtonBox } from "../../../elements/InlineButtonBox";
 
 type TOTPGridItemProps = DefaultPageProps & {
   baseMount: string;
@@ -206,7 +207,7 @@ export class TOTPList extends Component<DefaultPageProps, TOTPListState> {
       <>
         <SecretTitleElement type="totp" baseMount={baseMount} />
         <div>
-          <p>
+          <InlineButtonBox>
             {totpCaps.includes("create") && (
               <Button
                 text={i18next.t("common_new")}
@@ -228,7 +229,7 @@ export class TOTPList extends Component<DefaultPageProps, TOTPListState> {
                 route={delSecretsEngineURL(baseMount)}
               />
             )}
-          </p>
+          </InlineButtonBox>
           <div>
             <TOTPListView {...this.props} totpItems={this.state.totpItems} />
           </div>

src/ui/pages/Secrets/Transit/TransitList.tsx

@@ -7,6 +7,7 @@ import { delSecretsEngineURL, transitNewSecretURL, transitViewSecretURL } from "
 import { route } from "preact-router";
 import { sendErrorNotification } from "../../../elements/ErrorMessage";
 import i18next from "i18next";
+import { InlineButtonBox } from "../../../elements/InlineButtonBox";
 
 type TransitViewListState = {
   contentLoaded: boolean;
@@ -96,7 +97,7 @@ export class TransitList extends Component<DefaultPageProps, { caps: Capabilitie
       <>
         <SecretTitleElement type="transit" baseMount={baseMount} />
 
-        <p>
+        <InlineButtonBox>
           {transitCaps.includes("create") && (
             <Button
               text={i18next.t("common_new")}
@@ -111,7 +112,7 @@ export class TransitList extends Component<DefaultPageProps, { caps: Capabilitie
               route={delSecretsEngineURL(baseMount)}
             />
           )}
-        </p>
+        </InlineButtonBox>
         <TransitViewListItem
           settings={this.props.settings}
           api={this.props.api}

src/ui/pages/Settings/KVLoadExportSettings.tsx

@@ -0,0 +1,9 @@
+import { Component } from "preact";
+import { DefaultPageProps } from "../../../types/DefaultPageProps";
+
+export class KVLoadExportSettings extends Component<DefaultPageProps> {
+    render() {
+        // TODO: Do This
+        return <></>;
+    }
+}

src/ui/pages/Settings/Settings.tsx

@@ -6,6 +6,7 @@ import { KeyValueSettings } from "./KeyValue/KeyValueSettings";
 import { PageTitle } from "../../elements/PageTitle";
 import UIkit from "uikit";
 import i18next from "i18next";
+import { KVLoadExportSettings } from "./KVLoadExportSettings";
 
 export function settingsSavedNotification() {
   UIkit.notification(i18next.t("settings_saved_notification"), {
@@ -22,6 +23,7 @@ export class Settings extends Component<DefaultPageProps> {
         <Grid size={GridSizes.NORMAL}>
           <GeneralSettings {...this.props} />
           <KeyValueSettings {...this.props} />
+          {/*<KVLoadExportSettings {...this.props} />*/}
         </Grid>
       </>
     );