From 8c4deb1811c5ef11d650dc8cf50e8c24beeee1bb Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martinmckeaveney@gmail.com>
Date: Wed, 1 Mar 2023 22:51:52 +0000
Subject: [PATCH 1/2] small UX updates to improve user addition and perceived
 loading of builder

---
 .../src/components/deploy/VersionModal.svelte |   2 +-
 .../_components/BuilderSidePanel.svelte       |  11 ++
 .../builder/app/[application]/_layout.svelte  | 153 +++++++++---------
 3 files changed, 87 insertions(+), 79 deletions(-)

diff --git a/packages/builder/src/components/deploy/VersionModal.svelte b/packages/builder/src/components/deploy/VersionModal.svelte
index 23d9fd83a0..ca6e4d09e3 100644
--- a/packages/builder/src/components/deploy/VersionModal.svelte
+++ b/packages/builder/src/components/deploy/VersionModal.svelte
@@ -24,7 +24,7 @@
   let updateModal
 
   $: appId = $store.appId
-  $: updateAvailable = clientPackage.version !== $store.version
+  $: updateAvailable = clientPackage.version && $store.version && clientPackage.version !== $store.version
   $: revertAvailable = $store.revertableVersion != null
 
   const refreshAppPackage = async () => {
diff --git a/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte b/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte
index a38751f5d4..e342b706b3 100644
--- a/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte
@@ -25,6 +25,7 @@
   let rendered = false
   let inviting = false
   let searchFocus = false
+  let userSearchInput
 
   let appInvites = []
   let filteredInvites = []
@@ -346,8 +347,15 @@
 
   onMount(() => {
     rendered = true
+    searchFocus = true
   })
 
+  function handleKeyDown(evt) {
+    if (evt.key === "Enter" && queryIsEmail && !inviting) {
+      onInviteUser()
+    }
+  }
+
   const userTitle = user => {
     if (user.admin?.global) {
       return "Admin"
@@ -370,6 +378,8 @@
   }
 </script>
 
+<svelte:window on:keydown={handleKeyDown} />
+
 <div
   id="builder-side-panel-container"
   class:open={$store.builderSidePanel}
@@ -403,6 +413,7 @@
         autocomplete="off"
         disabled={inviting}
         value={query}
+        autofocus
         on:input={e => {
           query = e.target.value.trim()
         }}
diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index a4b4982fca..fe5edae1a4 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@@ -120,89 +120,86 @@
   })
 </script>
 
-{#await promise}
-  <!-- This should probably be some kind of loading state? -->
-  <div class="loading" />
-{:then _}
-  <TourPopover />
+<TourPopover />
 
-  {#if $store.builderSidePanel}
-    <BuilderSidePanel />
-  {/if}
+{#if $store.builderSidePanel}
+  <BuilderSidePanel />
+{/if}
 
-  <div class="root">
-    <div class="top-nav">
-      <div class="topleftnav">
-        <ActionMenu>
-          <div slot="control">
-            <Icon size="M" hoverable name="ShowMenu" />
-          </div>
-          <MenuItem on:click={() => $goto("../../portal/apps")}>
-            Exit to portal
-          </MenuItem>
-          <MenuItem
-            on:click={() => $goto(`../../portal/overview/${application}`)}
-          >
-            Overview
-          </MenuItem>
-          <MenuItem
-            on:click={() =>
-              $goto(`../../portal/overview/${application}/access`)}
-          >
-            Access
-          </MenuItem>
-          <MenuItem
-            on:click={() =>
-              $goto(`../../portal/overview/${application}/automation-history`)}
-          >
-            Automation history
-          </MenuItem>
-          <MenuItem
-            on:click={() =>
-              $goto(`../../portal/overview/${application}/backups`)}
-          >
-            Backups
-          </MenuItem>
+<div class="root">
+  <div class="top-nav">
+    <div class="topleftnav">
+      <ActionMenu>
+        <div slot="control">
+          <Icon size="M" hoverable name="ShowMenu" />
+        </div>
+        <MenuItem on:click={() => $goto("../../portal/apps")}>
+          Exit to portal
+        </MenuItem>
+        <MenuItem
+          on:click={() => $goto(`../../portal/overview/${application}`)}
+        >
+          Overview
+        </MenuItem>
+        <MenuItem
+          on:click={() => $goto(`../../portal/overview/${application}/access`)}
+        >
+          Access
+        </MenuItem>
+        <MenuItem
+          on:click={() =>
+            $goto(`../../portal/overview/${application}/automation-history`)}
+        >
+          Automation history
+        </MenuItem>
+        <MenuItem
+          on:click={() => $goto(`../../portal/overview/${application}/backups`)}
+        >
+          Backups
+        </MenuItem>
 
-          <MenuItem
-            on:click={() =>
-              $goto(`../../portal/overview/${application}/name-and-url`)}
-          >
-            Name and URL
-          </MenuItem>
-          <MenuItem
-            on:click={() =>
-              $goto(`../../portal/overview/${application}/version`)}
-          >
-            Version
-          </MenuItem>
-        </ActionMenu>
-        <Heading size="XS">{$store.name || "App"}</Heading>
-      </div>
-      <div class="topcenternav">
-        <Tabs {selected} size="M">
-          {#each $layout.children as { path, title }}
-            <TourWrap tourStepKey={`builder-${title}-section`}>
-              <Tab
-                quiet
-                selected={$isActive(path)}
-                on:click={topItemNavigate(path)}
-                title={capitalise(title)}
-                id={`builder-${title}-tab`}
-              />
-            </TourWrap>
-          {/each}
-        </Tabs>
-      </div>
-      <div class="toprightnav">
-        <AppActions {application} />
-      </div>
+        <MenuItem
+          on:click={() =>
+            $goto(`../../portal/overview/${application}/name-and-url`)}
+        >
+          Name and URL
+        </MenuItem>
+        <MenuItem
+          on:click={() => $goto(`../../portal/overview/${application}/version`)}
+        >
+          Version
+        </MenuItem>
+      </ActionMenu>
+      <Heading size="XS">{$store.name}</Heading>
+    </div>
+    <div class="topcenternav">
+      <Tabs {selected} size="M">
+        {#each $layout.children as { path, title }}
+          <TourWrap tourStepKey={`builder-${title}-section`}>
+            <Tab
+              quiet
+              selected={$isActive(path)}
+              on:click={topItemNavigate(path)}
+              title={capitalise(title)}
+              id={`builder-${title}-tab`}
+            />
+          </TourWrap>
+        {/each}
+      </Tabs>
+    </div>
+    <div class="toprightnav">
+      <AppActions {application} />
     </div>
-    <slot />
   </div>
-{:catch error}
-  <p>Something went wrong: {error.message}</p>
-{/await}
+  {#await promise}
+    <!-- This should probably be some kind of loading state? -->
+    <div class="loading" />
+  {:then _}
+    <slot />
+  {:catch error}
+    <p>Something went wrong: {error.message}</p>
+  {/await}
+</div>
 
 <style>
   .loading {

From 286c5c31570a23a07503c888c5f3e56756cc1901 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martinmckeaveney@gmail.com>
Date: Wed, 1 Mar 2023 23:05:17 +0000
Subject: [PATCH 2/2] lint

---
 packages/builder/src/components/deploy/VersionModal.svelte   | 5 ++++-
 .../app/[application]/_components/BuilderSidePanel.svelte    | 1 -
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/deploy/VersionModal.svelte b/packages/builder/src/components/deploy/VersionModal.svelte
index ca6e4d09e3..f357cc7820 100644
--- a/packages/builder/src/components/deploy/VersionModal.svelte
+++ b/packages/builder/src/components/deploy/VersionModal.svelte
@@ -24,7 +24,10 @@
   let updateModal
 
   $: appId = $store.appId
-  $: updateAvailable = clientPackage.version && $store.version && clientPackage.version !== $store.version
+  $: updateAvailable =
+    clientPackage.version &&
+    $store.version &&
+    clientPackage.version !== $store.version
   $: revertAvailable = $store.revertableVersion != null
 
   const refreshAppPackage = async () => {
diff --git a/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte b/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte
index e342b706b3..a28489eb91 100644
--- a/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte
@@ -25,7 +25,6 @@
   let rendered = false
   let inviting = false
   let searchFocus = false
-  let userSearchInput
 
   let appInvites = []
   let filteredInvites = []