simplify instance creation

1 files changed, 37 insertions, 4 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/admin/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/admin/create/CreatePage.tsx
index a28992a2f..6a94109a0 100644
--- a/packages/merchant-backoffice-ui/src/paths/admin/create/CreatePage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/admin/create/CreatePage.tsx
@@ -25,7 +25,7 @@ import {
   createRFC8959AccessTokenPlain,
 } from "@gnu-taler/taler-util";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
-import { h, VNode } from "preact";
+import { VNode, h } from "preact";
 import { useState } from "preact/hooks";
 import { AsyncButton } from "../../../components/exception/AsyncButton.js";
 import {
@@ -34,6 +34,7 @@ import {
 } from "../../../components/form/FormProvider.js";
 import { DefaultInstanceFormFields } from "../../../components/instance/DefaultInstanceFormFields.js";
 import { SetTokenNewInstanceModal } from "../../../components/modal/index.js";
+import { usePreference } from "../../../hooks/preference.js";
 import { INSTANCE_ID_REGEX } from "../../../utils/constants.js";
 import { undefinedIfEmpty } from "../../../utils/table.js";
 
@@ -64,13 +65,13 @@ function with_defaults(id?: string): Partial<Entity> {
 }
 
 export function CreatePage({ onCreate, onBack, forceId }: Props): VNode {
+  const [pref, updatePref] = usePreference();
+  const { i18n } = useTranslationContext();
   const [value, valueHandler] = useState(with_defaults(forceId));
   const [isTokenSet, updateIsTokenSet] = useState<boolean>(false);
   const [isTokenDialogActive, updateIsTokenDialogActive] =
     useState<boolean>(false);
 
-  const { i18n } = useTranslationContext();
-
   const errors: FormErrors<Entity> = {
     id: !value.id
       ? i18n.str`required`
@@ -186,6 +187,34 @@ export function CreatePage({ onCreate, onBack, forceId }: Props): VNode {
       </div>
 
       <section class="section is-main-section">
+        <div class="tabs is-toggle is-fullwidth is-small">
+          <ul>
+            <li
+              class={!pref.advanceInstanceMode ? "is-active" : ""}
+              onClick={() => {
+                updatePref("advanceInstanceMode", false);
+              }}
+            >
+              <a>
+                <span>
+                  <i18n.Translate>Simple</i18n.Translate>
+                </span>
+              </a>
+            </li>
+            <li
+              class={pref.advanceInstanceMode ? "is-active" : ""}
+              onClick={() => {
+                updatePref("advanceInstanceMode", true);
+              }}
+            >
+              <a>
+                <span>
+                  <i18n.Translate>Advanced</i18n.Translate>
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>{" "}
         <div class="columns">
           <div class="column" />
           <div class="column is-four-fifths">
@@ -194,7 +223,11 @@ export function CreatePage({ onCreate, onBack, forceId }: Props): VNode {
               object={value}
               valueHandler={valueHandler}
             >
-              <DefaultInstanceFormFields readonlyId={!!forceId} showId={true} />
+              <DefaultInstanceFormFields
+                readonlyId={!!forceId}
+                showId={true}
+                showLessFields={!pref.advanceInstanceMode}
+              />
             </FormProvider>
 
             <div class="level">