From b7af3e75fafd8ca788ac9e1272fc5840a207f14d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 25 Feb 2022 13:26:11 +0000
Subject: [PATCH] Fix route choice when using devtools role preview and fix
 devtools role ID not being passed down in context

---
 packages/client/src/components/ClientApp.svelte  | 16 +++++++++++++++-
 .../context/UserBindingsProvider.svelte          |  8 ++++++--
 .../src/components/devtools/DevTools.svelte      |  2 +-
 .../devtools/DevToolsComponentTab.svelte         |  1 +
 4 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 5d9225420f..4a77795d3b 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -58,8 +58,22 @@
       if ($authStore) {
         // There is a logged in user, so handle them
         if ($screenStore.screens.length) {
+          let firstRoute
+
+          // If using devtools, find the first screen matching our role
+          if ($devToolsStore.role) {
+            firstRoute =
+              $screenStore.screens.filter(
+                screen => screen.routing?.roleId === $devToolsStore.role
+              )[0]?.routing?.route || "/"
+          }
+
+          // Otherwise just use the fist route
+          else {
+            firstRoute = $screenStore.screens[0]?.routing?.route ?? "/"
+          }
+
           // Screens exist so navigate back to the home screen
-          const firstRoute = $screenStore.screens[0].routing?.route ?? "/"
           routeStore.actions.navigate(firstRoute)
         } else {
           // No screens likely means the user has no permissions to view this app
diff --git a/packages/client/src/components/context/UserBindingsProvider.svelte b/packages/client/src/components/context/UserBindingsProvider.svelte
index e788d80dc4..f7605122ae 100644
--- a/packages/client/src/components/context/UserBindingsProvider.svelte
+++ b/packages/client/src/components/context/UserBindingsProvider.svelte
@@ -1,6 +1,6 @@
 <script>
   import Provider from "./Provider.svelte"
-  import { authStore } from "stores"
+  import { authStore, devToolsStore } from "stores"
   import { ActionTypes } from "constants"
   import { Constants } from "@budibase/frontend-core"
 
@@ -17,6 +17,10 @@
   ]
 </script>
 
-<Provider key="user" data={$authStore} {actions}>
+<Provider
+  key="user"
+  data={{ ...$authStore, roleId: $devToolsStore.role || $authStore?.roleId }}
+  {actions}
+>
   <slot />
 </Provider>
diff --git a/packages/client/src/components/devtools/DevTools.svelte b/packages/client/src/components/devtools/DevTools.svelte
index cf21f16503..4bb332da2f 100644
--- a/packages/client/src/components/devtools/DevTools.svelte
+++ b/packages/client/src/components/devtools/DevTools.svelte
@@ -41,7 +41,7 @@
 
 <style>
   .devtools {
-    background: var(--spectrum-alias-background-color-secondary);
+    background: var(--spectrum-alias-background-color-primary);
     flex: 0 0 320px;
     border-left: 1px solid var(--spectrum-global-color-gray-300);
     overflow: auto;
diff --git a/packages/client/src/components/devtools/DevToolsComponentTab.svelte b/packages/client/src/components/devtools/DevToolsComponentTab.svelte
index 94628b6516..4bd68ecf98 100644
--- a/packages/client/src/components/devtools/DevToolsComponentTab.svelte
+++ b/packages/client/src/components/devtools/DevToolsComponentTab.svelte
@@ -40,6 +40,7 @@
         value={$componentStore.selectedComponentDefinition?.name}
       />
       <DevToolsStat
+        copyable
         label="Component ID"
         value={$componentStore.selectedComponent?._id}
       />