From d6aca5cf1d065ac2e96ad0193c6af529a4c3b815 Mon Sep 17 00:00:00 2001
From: Julian Jelfs <julian.jelfs@gmail.com>
Date: Mon, 11 Nov 2024 11:17:07 +0000
Subject: [PATCH] finally fix problem with access gate builder (#6782)

---
 frontend/app/src/components/home/Home.svelte  |  2 +-
 .../home/access/AccessGateBuilder.svelte      | 58 +++++++++++--------
 .../components/home/addgroup/NewGroup.svelte  |  1 -
 3 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/frontend/app/src/components/home/Home.svelte b/frontend/app/src/components/home/Home.svelte
index eeb9bb01ae..7eb14e0b59 100644
--- a/frontend/app/src/components/home/Home.svelte
+++ b/frontend/app/src/components/home/Home.svelte
@@ -1061,7 +1061,7 @@
                     blobUrl: chat.blobUrl,
                     blobData: chat.blobData,
                 },
-                gateConfig: chat.gateConfig,
+                gateConfig: { ...chat.gateConfig },
                 level,
                 membership: chat.membership,
                 eventsTTL: chat.eventsTTL,
diff --git a/frontend/app/src/components/home/access/AccessGateBuilder.svelte b/frontend/app/src/components/home/access/AccessGateBuilder.svelte
index 3319f16166..22935c8801 100644
--- a/frontend/app/src/components/home/access/AccessGateBuilder.svelte
+++ b/frontend/app/src/components/home/access/AccessGateBuilder.svelte
@@ -38,37 +38,47 @@
 
     const MAX_GATES = 5;
 
-    export let gateConfig: AccessGateConfig;
-    export let editable: boolean;
-    export let level: Level;
-    export let valid: boolean;
+    interface Props {
+        gateConfig: AccessGateConfig;
+        editable: boolean;
+        level: Level;
+        valid: boolean;
+    }
 
-    let gateValidity: boolean[] = [];
-    let selectedGateIndex: number | undefined = undefined;
-    let gateBindings: GateBinding[] = getGateBindings(level);
-    let evaluationIntervalValid: boolean;
+    let { gateConfig = $bindable(), editable, level, valid = $bindable() }: Props = $props();
 
-    $: nsLedgers = new Set(Object.values($nervousSystemLookup).map((d) => d.ledgerCanisterId));
-    $: neuronGateBindings = getNeuronGateBindings($nervousSystemLookup);
-    $: paymentGateBindings = getPaymentGateBindings($cryptoLookup, nsLedgers);
-    $: balanceGateBindings = getBalanceGateBindings($cryptoLookup);
-    $: canAdd = isLeafGate(gateConfig.gate) || gateConfig.gate.gates.length < MAX_GATES;
-    $: title = !editable ? i18nKey("access.readonlyTitle") : i18nKey("access.title");
+    let gateValidity: boolean[] = $state([]);
+    let selectedGateIndex: number | undefined = $state(undefined);
+    let gateBindings: GateBinding[] = getGateBindings(level);
+    let evaluationIntervalValid = $state(true);
+    let nsLedgers = $derived(
+        new Set(Object.values($nervousSystemLookup).map((d) => d.ledgerCanisterId)),
+    );
+    let neuronGateBindings = $derived(getNeuronGateBindings($nervousSystemLookup));
+    let paymentGateBindings = $derived(getPaymentGateBindings($cryptoLookup, nsLedgers));
+    let balanceGateBindings = $derived(getBalanceGateBindings($cryptoLookup));
+    let canAdd = $derived(isLeafGate(gateConfig.gate) || gateConfig.gate.gates.length < MAX_GATES);
+    let title = $derived(!editable ? i18nKey("access.readonlyTitle") : i18nKey("access.title"));
 
-    $: {
-        valid =
+    $effect(() => {
+        const isValid =
             gateValidity.every((v) => v) &&
             (gateConfig.expiry !== undefined ? !editable || evaluationIntervalValid : true);
-    }
+
+        if (isValid !== valid) {
+            valid = isValid;
+        }
+    });
 
     function addLeaf() {
         const newGate: AccessGate = { kind: "no_gate" };
         if (gateConfig.gate.kind === "composite_gate") {
             gateConfig.gate.gates.push(newGate);
         } else {
+            const oldGate = { ...gateConfig.gate };
             gateConfig.gate = {
                 kind: "composite_gate",
-                gates: [gateConfig.gate, newGate],
+                gates: [oldGate, newGate],
                 operator: "and",
             };
         }
@@ -109,7 +119,7 @@
         <div slot="header">
             <Translatable resourceKey={title} />
         </div>
-        <div class="body access-gate-builder" slot="body">
+        <div slot="body" class="body access-gate-builder">
             {#if isLeafGate(gateConfig.gate)}
                 <LeafGateBuilder
                     {gateBindings}
@@ -127,16 +137,16 @@
                         transition={false}
                         open={selectedGateIndex === i}
                         on:opened={() => (selectedGateIndex = i)}>
-                        <div class="sub-header" slot="titleSlot" class:invalid={!gateValidity[i]}>
+                        <div slot="titleSlot" class="sub-header" class:invalid={!gateValidity[i]}>
                             <AccessGateIcon
                                 {level}
                                 showNoGate
                                 gateConfig={{ expiry: undefined, gate: subgate }} />
                             <Translatable resourceKey={getGateText(subgate)} />
                             {#if editable}
-                                <!-- svelte-ignore a11y-click-events-have-key-events -->
-                                <!-- svelte-ignore a11y-no-static-element-interactions -->
-                                <div on:click={() => deleteGate(i)} class="delete">
+                                <!-- svelte-ignore a11y_click_events_have_key_events -->
+                                <!-- svelte-ignore a11y_no_static_element_interactions -->
+                                <div onclick={() => deleteGate(i)} class="delete">
                                     <Delete
                                         viewBox={"0 -3 24 24"}
                                         size={$iconSize}
@@ -150,7 +160,7 @@
                             {paymentGateBindings}
                             {balanceGateBindings}
                             allowNone={false}
-                            bind:gate={subgate}
+                            bind:gate={gateConfig.gate.gates[i]}
                             {editable}
                             {level}
                             bind:valid={gateValidity[i]} />
diff --git a/frontend/app/src/components/home/addgroup/NewGroup.svelte b/frontend/app/src/components/home/addgroup/NewGroup.svelte
index 44fbfd2527..052338f68a 100644
--- a/frontend/app/src/components/home/addgroup/NewGroup.svelte
+++ b/frontend/app/src/components/home/addgroup/NewGroup.svelte
@@ -92,7 +92,6 @@
         messagesVisibleToNonMembersDirty;
     $: hideInviteUsers = candidateGroup.level === "channel" && candidateGroup.public;
     $: valid = detailsValid && visibilityValid && rulesValid;
-
     $: {
         if (candidateGroup.public) {
             candidateGroup.permissions.startVideoCall = "admin";