Make Builder App Section Navigation Tabs Anchors (#13626)

* wip * linting * add dedicated anchor handler for safety * fixes * fixes * fix meta key clicks * lint * lint
Budibase · May 21, 2024 · c394826 · c394826
1 parent e269f91
commit c394826
Show file tree

Hide file tree

Showing 3 changed files with 422 additions and 37 deletions.
diff --git a/packages/bbui/src/Tabs/Tab.svelte b/packages/bbui/src/Tabs/Tab.svelte
@@ -1,11 +1,14 @@
 <script>
-  import { getContext, onDestroy } from "svelte"
+  import { getContext, onDestroy, createEventDispatcher } from "svelte"
   import Portal from "svelte-portal"
 
   export let title
   export let icon = ""
   export let id
+  export let href = "#"
+  export let link = false
 
+  const dispatch = createEventDispatcher()
   let selected = getContext("tab")
   let observer
   let ref
@@ -26,6 +29,18 @@
     }
   }
 
+  const onAnchorClick = e => {
+    if (e.metaKey || e.shiftKey || e.altKey || e.ctrlKey) return
+
+    e.preventDefault()
+    $selected = {
+      ...$selected,
+      title,
+      info: ref.getBoundingClientRect(),
+    }
+    dispatch("click")
+  }
+
   const onClick = () => {
     $selected = {
       ...$selected,
@@ -51,31 +66,56 @@
   onDestroy(stopObserving)
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<div
-  {id}
-  bind:this={ref}
-  on:click={onClick}
-  on:click
-  class="spectrum-Tabs-item"
-  class:is-selected={isSelected}
-  class:emphasized={isSelected && $selected.emphasized}
-  tabindex="0"
->
-  {#if icon}
-    <svg
-      class="spectrum-Icon spectrum-Icon--sizeM"
-      focusable="false"
-      aria-hidden="true"
-      aria-label="Folder"
-    >
-      <use xlink:href="#spectrum-icon-18-{icon}" />
-    </svg>
-  {/if}
-  <span class="spectrum-Tabs-itemLabel">{title}</span>
-</div>
+{#if link}
+  <a
+    {href}
+    {id}
+    bind:this={ref}
+    on:click={onAnchorClick}
+    class="spectrum-Tabs-item link"
+    class:is-selected={isSelected}
+    class:emphasized={isSelected && $selected.emphasized}
+    tabindex="0"
+  >
+    {#if icon}
+      <svg
+        class="spectrum-Icon spectrum-Icon--sizeM"
+        focusable="false"
+        aria-hidden="true"
+        aria-label="Folder"
+      >
+        <use xlink:href="#spectrum-icon-18-{icon}" />
+      </svg>
+    {/if}
+    <span class="spectrum-Tabs-itemLabel">{title}</span>
+  </a>
+{:else}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+  <div
+    {id}
+    bind:this={ref}
+    on:click={onClick}
+    on:click
+    class="spectrum-Tabs-item"
+    class:is-selected={isSelected}
+    class:emphasized={isSelected && $selected.emphasized}
+    tabindex="0"
+  >
+    {#if icon}
+      <svg
+        class="spectrum-Icon spectrum-Icon--sizeM"
+        focusable="false"
+        aria-hidden="true"
+        aria-label="Folder"
+      >
+        <use xlink:href="#spectrum-icon-18-{icon}" />
+      </svg>
+    {/if}
+    <span class="spectrum-Tabs-itemLabel">{title}</span>
+  </div>
+{/if}
 
 {#if isSelected}
   <Portal target=".spectrum-Tabs-content-{$selected.id}">
@@ -94,4 +134,7 @@
   .spectrum-Tabs-item:hover {
     color: var(--spectrum-global-color-gray-900);
   }
+  .link {
+    user-select: none;
+  }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@@ -21,7 +21,7 @@
   } from "@budibase/bbui"
   import AppActions from "components/deploy/AppActions.svelte"
   import { API } from "api"
-  import { isActive, goto, layout, redirect } from "@roxi/routify"
+  import { isActive, url, goto, layout, redirect } from "@roxi/routify"
   import { capitalise } from "helpers"
   import { onMount, onDestroy } from "svelte"
   import VerificationPromptBanner from "components/common/VerificationPromptBanner.svelte"
@@ -69,7 +69,7 @@
   // e.g. if one of your screens is selected on front end, then
   // you browse to backend, when you click frontend, you will be
   // brought back to the same screen.
-  const topItemNavigate = path => () => {
+  const topItemNavigate = path => {
     const activeTopNav = $layout.children.find(c => $isActive(c.path))
     if (activeTopNav) {
       builderStore.setPreviousTopNavPath(
@@ -136,21 +136,18 @@
   <div class="top-nav">
     {#if $appStore.initialised}
       <div class="topleftnav">
-        <span class="back-to-apps">
-          <Icon
-            size="S"
-            hoverable
-            name="BackAndroid"
-            on:click={() => $goto("../../portal/apps")}
-          />
-        </span>
+        <a href={$url("../../portal/apps")} class="linkWrapper back-to-apps">
+          <Icon size="S" hoverable name="BackAndroid" />
+        </a>
         <Tabs {selected} size="M">
           {#each $layout.children as { path, title }}
             <TourWrap stepKeys={[`builder-${title}-section`]}>
               <Tab
+                link
+                href={$url(path)}
                 quiet
                 selected={$isActive(path)}
-                on:click={topItemNavigate(path)}
+                on:click={() => topItemNavigate(path)}
                 title={capitalise(title)}
                 id={`builder-${title}-tab`}
               />
@@ -201,6 +198,11 @@
 <EnterpriseBasicTrialModal />
 
 <style>
+  .linkWrapper {
+    text-decoration: none;
+    color: inherit;
+  }
+
   .back-to-apps {
     display: contents;
   }