Display users table as its own option at the very top of the datasource list

packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte

@@ -12,8 +12,10 @@
     customQueryText,
   } from "helpers/data/utils"
   import IntegrationIcon from "./IntegrationIcon.svelte"
+  import { TableNames } from "constants"
 
   let openDataSources = []
+
   $: enrichedDataSources = enrichDatasources(
     $datasources,
     $params,
@@ -71,6 +73,13 @@
     $goto(`./datasource/${datasource._id}`)
   }
 
+  const selectTable = tableId => {
+    tables.select(tableId)
+    if (!$isActive("./table/:tableId")) {
+      $goto(`./table/${tableId}`)
+    }
+  }
+
   function closeNode(datasource) {
     openDataSources = openDataSources.filter(id => datasource._id !== id)
   }
@@ -151,9 +160,16 @@
 
 {#if $database?._id}
   <div class="hierarchy-items-container">
+    <NavItem
+      icon="UserGroup"
+      text="Users"
+      selected={$isActive("./table/:tableId") &&
+        $tables.selected?._id === TableNames.USERS}
+      on:click={() => selectTable(TableNames.USERS)}
+    />
     {#each enrichedDataSources as datasource, idx}
       <NavItem
-        border={idx > 0}
+        border
         text={datasource.name}
         opened={datasource.open}
         selected={$isActive("./datasource") && datasource.selected}
@@ -174,7 +190,7 @@
       </NavItem>
 
       {#if datasource.open}
-        <TableNavigator sourceId={datasource._id} />
+        <TableNavigator sourceId={datasource._id} {selectTable} />
         {#each $queries.list.filter(query => query.datasourceId === datasource._id) as query}
           <NavItem
             indentLevel={1}

packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte

@@ -10,17 +10,13 @@
     a.name?.toLowerCase() > b.name?.toLowerCase() ? 1 : -1
 
   export let sourceId
+  export let selectTable
 
   $: sortedTables = $tables.list
-    .filter(table => table.sourceId === sourceId)
+    .filter(
+      table => table.sourceId === sourceId && table._id !== TableNames.USERS
+    )
     .sort(alphabetical)
-
-  const selectTable = tableId => {
-    tables.select(tableId)
-    if (!$isActive("./table/:tableId")) {
-      $goto(`./table/${tableId}`)
-    }
-  }
 </script>
 
 {#if $database?._id}

packages/builder/src/pages/builder/app/[application]/data/datasource/bb_internal/index.svelte

@@ -6,12 +6,15 @@
   import { goto } from "@roxi/routify"
   import { onMount } from "svelte"
   import { BUDIBASE_INTERNAL_DB_ID } from "constants/backend"
+  import { TableNames } from "constants"
 
   let modal
 
   $: internalTablesBySourceId = $tables.list.filter(
     table =>
-      table.type !== "external" && table.sourceId === BUDIBASE_INTERNAL_DB_ID
+      table.type !== "external" &&
+      table.sourceId === BUDIBASE_INTERNAL_DB_ID &&
+      table._id !== TableNames.USERS
   )
 
   onMount(() => {