Fix svelte keying of component settings blocks

packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte

@@ -50,7 +50,7 @@
     />
   {/if}
   {#if settings && settings.length > 0}
-    {#each settings as setting (`${componentInstance._id}-${setting.key}`)}
+    {#each settings as setting}
       {#if canRenderControl(setting)}
         <PropertyControl
           type={setting.type}

packages/builder/src/components/design/PropertiesPanel/ConditionalUISection.svelte

@@ -17,6 +17,8 @@
     store.actions.components.updateConditions(tempValue)
     drawer.hide()
   }
+
+  $: console.log(componentInstance?._id)
 </script>
 
 <DetailSummary
@@ -27,12 +29,10 @@
     <ActionButton on:click={openDrawer}>Configure conditions</ActionButton>
   </div>
 </DetailSummary>
-{#key componentInstance?._id}
+<Drawer bind:this={drawer} title="Conditions">
-  <Drawer bind:this={drawer} title="Conditions">
   <svelte:fragment slot="description">
     Show, hide and update components in response to conditions being met.
   </svelte:fragment>
-    <Button cta slot="buttons" on:click={save}>Save</Button>
+  <Button cta slot="buttons" on:click={() => save()}>Save</Button>
   <ConditionalUIDrawer slot="body" bind:conditions={tempValue} />
-  </Drawer>
+</Drawer>
-{/key}

packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte

@@ -16,11 +16,13 @@
 <Tabs selected="Settings" noPadding>
   <Tab title="Settings">
     <div class="container">
+      {#key componentInstance?._id}
         <ScreenSettingsSection {componentInstance} {componentDefinition} />
         <ComponentSettingsSection {componentInstance} {componentDefinition} />
         <DesignSection {componentInstance} {componentDefinition} />
         <CustomStylesSection {componentInstance} {componentDefinition} />
         <ConditionalUISection {componentInstance} {componentDefinition} />
+      {/key}
     </div>
   </Tab>
 </Tabs>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/ConditionalUIDrawer.svelte

@@ -1,12 +1,18 @@
 <script>
-  import { Button, Icon, DrawerContent, Layout, Select } from "@budibase/bbui"
+  import {
+    Button,
+    Body,
+    Icon,
+    DrawerContent,
+    Layout,
+    Select,
+  } from "@budibase/bbui"
   import { flip } from "svelte/animate"
   import { dndzone } from "svelte-dnd-action"
   import { generate } from "shortid"
-  import DrawerBindableInput from "../../../common/bindings/DrawerBindableInput.svelte"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
-  import ColorPicker from "./ColorPicker.svelte"
   import { OperatorOptions, getValidOperatorsForType } from "helpers/lucene"
-  import { getBindableProperties } from "../../../../builderStore/dataBinding"
+  import { getBindableProperties } from "builderStore/dataBinding"
   import { currentAsset, selectedComponent, store } from "builderStore"
   import { getComponentForSettingType } from "./componentSettings"
   import PropertyControl from "./PropertyControl.svelte"
@@ -15,16 +21,16 @@
 
   const flipDurationMs = 150
   const actionOptions = [
-    {
-      label: "Show component",
-      value: "show",
-    },
     {
       label: "Hide component",
       value: "hide",
     },
     {
-      label: "Update component setting",
+      label: "Show component",
+      value: "show",
+    },
+    {
+      label: "Update setting",
       value: "update",
     },
   ]
@@ -64,7 +70,8 @@
     conditions = [
       ...conditions,
       {
-        action: "show",
+        id: generate(),
+        action: "hide",
         operator: OperatorOptions.Equals.value,
       },
     ]
@@ -94,16 +101,22 @@
           on:consider={updateLinks}
         >
           {#each conditions as condition (condition.id)}
-            <div class="condition" animate:flip={{ duration: flipDurationMs }}>
+            <div
+              class="condition"
+              class:update={condition.action === "update"}
+              animate:flip={{ duration: flipDurationMs }}
+            >
+              <Icon name="DragHandle" size="XL" />
               <Select
+                draggable={false}
                 placeholder={null}
                 options={actionOptions}
                 bind:value={condition.action}
               />
               {#if condition.action === "update"}
                 <Select options={settings} bind:value={condition.setting} />
-                {#if getSettingDefinition(condition.setting)}
                 <div>TO</div>
+                {#if getSettingDefinition(condition.setting)}
                   <PropertyControl
                     type={getSettingDefinition(condition.setting).type}
                     control={getComponentForSetting(condition.setting)}
@@ -117,6 +130,8 @@
                         .placeholder,
                     }}
                   />
+                {:else}
+                  <Select disabled placeholder=" " />
                 {/if}
               {/if}
               <div>IF</div>
@@ -146,8 +161,10 @@
             </div>
           {/each}
         </div>
+      {:else}
+        <Body size="S">Add your first condition to get started.</Body>
       {/if}
-      <div class="button-container">
+      <div>
         <Button secondary icon="Add" on:click={addCondition}>
           Add condition
         </Button>
@@ -160,30 +177,27 @@
   .container {
     width: 100%;
     max-width: 1200px;
+    margin: 0 auto;
   }
   .conditions {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    gap: var(--spacing-s);
+    gap: var(--spacing-m);
   }
   .condition {
     gap: var(--spacing-l);
-    display: flex;
+    display: grid;
-    flex-direction: row;
-    justify-content: space-between;
     align-items: center;
+    grid-template-columns: auto 1fr auto 1fr 1fr 1fr auto;
     border-radius: var(--border-radius-s);
     transition: background-color ease-in-out 130ms;
   }
+  .condition.update {
+    grid-template-columns: auto 1fr 1fr auto 1fr auto 1fr 1fr 1fr auto;
+  }
   .condition:hover {
     background-color: var(--spectrum-global-color-gray-100);
   }
-  .condition > :global(.spectrum-Form-item) {
-    flex: 1 1 auto;
-    width: 0;
-  }
-  .button-container {
-  }
 </style>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/NavigationEditor/NavigationDrawer.svelte

@@ -90,7 +90,7 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    gap: var(--spacing-s);
+    gap: var(--spacing-m);
   }
   .link {
     gap: var(--spacing-l);

packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte

@@ -70,7 +70,7 @@
 </script>
 
 <div class="property-control" bind:this={anchor} data-cy={`setting-${key}`}>
-  {#if type !== "boolean"}
+  {#if type !== "boolean" && label}
     <div class="label">
       <Label>{label}</Label>
     </div>