Add tooltip to side nav items, disable delete and update when not the only user, add transitions to tooltips

packages/bbui/src/Button/Button.svelte

@@ -69,8 +69,8 @@
       </svg>
     </div>
   {/if}
-  {#if showTooltip && tooltip}
+  {#if tooltip}
-    <div class="tooltip">
+    <div class="tooltip" class:visible={showTooltip}>
       <Tooltip textWrapping={true} direction={"bottom"} text={tooltip} />
     </div>
   {/if}
@@ -98,7 +98,13 @@
     text-align: center;
     transform: translateX(-50%);
     left: 50%;
-    top: calc(100% - 3px);
+    top: 100%;
+    opacity: 0;
+    transition: opacity 130ms ease-out;
+    pointer-events: none;
+  }
+  .tooltip.visible {
+    opacity: 1;
   }
   .tooltip-icon {
     padding-left: var(--spacing-m);

packages/builder/src/components/portal/page/SideNavItem.svelte

@@ -1,32 +1,62 @@
 <script>
+  import { Tooltip } from "@budibase/bbui"
+
   export let text
   export let url
   export let active = false
+  export let disabled = false
+  export let tooltip = null
 </script>
 
-{#if url}
+<div class="side-nav-item">
-  <a on:click href={url} class:active>
+  {#if url}
+    <a class="text" on:click href={url} class:active class:disabled>
       {text || ""}
     </a>
-{:else}
+  {:else}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <span on:click class:active>
+    <div class="text" on:click class:active class:disabled>
       {text || ""}
-  </span>
+    </div>
-{/if}
+  {/if}
+  {#if tooltip}
+    <div class="tooltip">
+      <Tooltip textWrapping direction="right" text={tooltip} />
+    </div>
+  {/if}
+</div>
 
 <style>
-  a,
+  .side-nav-item {
-  span {
+    position: relative;
+  }
+  .text {
+    display: block;
     padding: var(--spacing-s) var(--spacing-m);
     color: var(--spectrum-global-color-gray-900);
     border-radius: 4px;
     transition: background 130ms ease-out;
   }
   .active,
-  span:hover,
+  .text:hover {
-  a:hover {
     background-color: var(--spectrum-global-color-gray-200);
     cursor: pointer;
   }
+  .disabled {
+    pointer-events: none;
+    color: var(--spectrum-global-color-gray-500) !important;
+  }
+  .tooltip {
+    position: absolute;
+    transform: translateY(-50%);
+    left: 100%;
+    top: 50%;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 130ms ease-out;
+    z-index: 100;
+  }
+  .side-nav-item:hover .tooltip {
+    opacity: 1;
+  }
 </style>

packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte

@@ -3,6 +3,7 @@
   import { Page, Layout } from "@budibase/bbui"
   import { url, isActive } from "@roxi/routify"
   import DeleteModal from "components/deploy/DeleteModal.svelte"
+  import { isOnlyUser } from "builderStore"
 
   let deleteModal
 </script>
@@ -49,6 +50,10 @@
               on:click={() => {
                 deleteModal.show()
               }}
+              disabled={!$isOnlyUser}
+              tooltip={$isOnlyUser
+                ? null
+                : "Unavailable - another user is editing this app"}
             />
           </div>
         </SideNav>
@@ -61,7 +66,7 @@
 <DeleteModal bind:this={deleteModal} />
 
 <style>
-  .delete-action :global(span) {
+  .delete-action :global(.text) {
     color: var(--spectrum-global-color-red-400);
   }
   .delete-action {

packages/builder/src/pages/builder/app/[application]/settings/version.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Layout, Heading, Body, Divider, Button } from "@budibase/bbui"
-  import { store } from "builderStore"
+  import { store, isOnlyUser } from "builderStore"
   import VersionModal from "components/deploy/VersionModal.svelte"
 
   let versionModal
@@ -22,7 +22,16 @@
       Updates can contain new features, performance improvements and bug fixes.
     </Body>
     <div>
-      <Button cta on:click={versionModal.show}>Update app</Button>
+      <Button
+        cta
+        on:click={versionModal.show}
+        disabled={!$isOnlyUser}
+        tooltip={$isOnlyUser
+          ? null
+          : "Unavailable - another user is editing this app"}
+      >
+        Update app
+      </Button>
     </div>
   {:else}
     <Body>
@@ -31,7 +40,15 @@
       You're running the latest!
     </Body>
     <div>
-      <Button secondary on:click={versionModal.show}>Revert app</Button>
+      <Button
+        secondary
+        on:click={versionModal.show}
+        tooltip={$isOnlyUser
+          ? null
+          : "Unavailable - another user is editing this app"}
+      >
+        Revert app
+      </Button>
     </div>
   {/if}
 </Layout>