Add live data split view tutorial

CHANGELOG.md

@@ -13,6 +13,7 @@ For details about compatibility between different releases, see the **Commitment
 
 - Add recvTime field to the decodeUplink input in payload formatters
 - Add the latest battery percentage of the end device in the `ApplicationUplink` message.
+- Add live data split view tutorial to the Console.
 
 ### Changed
 

api/ttn/lorawan/v3/user.proto

@@ -192,6 +192,10 @@ message UserConsolePreferences {
   SortBy sort_by = 3;
 
   message Tutorials {
+    option (thethings.flags.message) = {
+      select: true,
+      set: true
+    };
     repeated Tutorial seen = 1 [(validate.rules).repeated = {
       unique: true,
       items: {

cypress/support/commands.js

@@ -126,6 +126,14 @@ Cypress.Commands.add('getAccessToken', callback => {
   callback(accessToken)
 })
 
+Cypress.Commands.add('setAllTutorialSeen', user => {
+  const tutorialNames = ['TUTORIAL_LIVE_DATA_SPLIT_VIEW']
+  cy.task(
+    'execSql',
+    `UPDATE users SET console_preferences = '{"dashboard_layouts":{},"sort_by":{},"tutorials":{"seen":[${tutorialNames.map(name => `"${name}"`).join(',')}]}}'::jsonb::text::bytea WHERE primary_email_address = '${user.primary_email_address}';`,
+  )
+})
+
 // Helper function to create a new user programmatically.
 Cypress.Commands.add('createUser', user => {
   const baseUrl = Cypress.config('baseUrl')
@@ -147,6 +155,8 @@ Cypress.Commands.add('createUser', user => {
     })
   })
 
+  // Set all tutorials as seen.
+  cy.setAllTutorialSeen(user)
   // Reset cookies and local storage to avoid csrf and session state inconsistencies within tests.
   cy.clearCookies()
   cy.clearLocalStorage()

pkg/identityserver/bunstore/user_store.go

@@ -493,7 +493,11 @@ func (s *userStore) updateUserModel( //nolint:gocyclo
 ) (err error) {
 	columns := store.FieldMask{"updated_at"}
 
-	consolePreferences := &ttnpb.UserConsolePreferences{}
+	consolePreferences := &ttnpb.UserConsolePreferences{
+		DashboardLayouts: &ttnpb.UserConsolePreferences_DashboardLayouts{},
+		SortBy:           &ttnpb.UserConsolePreferences_SortBy{},
+		Tutorials:        &ttnpb.UserConsolePreferences_Tutorials{},
+	}
 	updateConsolePreferences := false
 
 	if ttnpb.HasAnyField(ttnpb.TopLevelFields(fieldMask), "console_preferences") && len(model.ConsolePreferences) > 0 {
@@ -610,6 +614,9 @@ func (s *userStore) updateUserModel( //nolint:gocyclo
 		case "console_preferences.tutorials":
 			updateConsolePreferences = true
 			consolePreferences.Tutorials = pb.ConsolePreferences.GetTutorials()
+		case "console_preferences.tutorials.seen":
+			updateConsolePreferences = true
+			consolePreferences.Tutorials.Seen = pb.ConsolePreferences.Tutorials.GetSeen()
 		case "universal_rights":
 			model.UniversalRights = convertIntSlice[ttnpb.Right, int](pb.UniversalRights)
 			columns = append(columns, "universal_rights")

pkg/webui/console/components/live-data-tutorial/index.js

@@ -0,0 +1,69 @@
+// Copyright © 2025 The Things Network Foundation, The Things Industries B.V.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React, { useCallback } from 'react'
+import { defineMessages } from 'react-intl'
+import PropTypes from 'prop-types'
+
+import splitViewIllustration from '@assets/misc/split-view-illustration.png'
+
+import Button from '@ttn-lw/components/button'
+
+import Message from '@ttn-lw/lib/components/message'
+
+import style from './live-data-tutorial.styl'
+
+const m = defineMessages({
+  liveDataSplitView: 'Live data split view',
+  liveDataSplitViewDescription:
+    'Debug, make changes while keeping an eye on live data from everywhere with split view.',
+  gotIt: 'Got it',
+  tryIt: 'Try it',
+})
+
+const LiveDataTutorial = props => {
+  const { setIsOpen, seen, setTutorialSeen } = props
+
+  const handleTryIt = useCallback(() => {
+    setIsOpen(true)
+    setTutorialSeen()
+  }, [setIsOpen, setTutorialSeen])
+
+  return (
+    !seen && (
+      <div className={style.container}>
+        <Message component="h3" content={m.liveDataSplitView} className={style.title} />
+        <Message
+          component="p"
+          content={m.liveDataSplitViewDescription}
+          className={style.subtitle}
+        />
+        <img className={style.image} src={splitViewIllustration} alt="live-data-split-view" />
+        <div className={style.buttonGroup}>
+          <Button message={m.gotIt} secondary className={style.button} onClick={setTutorialSeen} />
+          <Button message={m.tryIt} primary onClick={handleTryIt} className={style.button} />
+        </div>
+      </div>
+    )
+  )
+}
+
+LiveDataTutorial.propTypes = {
+  seen: PropTypes.bool.isRequired,
+  setIsOpen: PropTypes.func.isRequired,
+  setTutorialSeen: PropTypes.func.isRequired,
+}
+LiveDataTutorial.defaultProps = {}
+
+export default LiveDataTutorial

pkg/webui/console/components/live-data-tutorial/live-data-tutorial.styl

@@ -0,0 +1,47 @@
+// Copyright © 2025 The Things Network Foundation, The Things Industries B.V.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+.container
+  background-color: var(--c-bg-neutral-heavy)
+  color: var(--c-text-neutral-min)
+  padding: $cs.m $cs.l $cs.l $cs.l
+  border-radius: $br.xxl
+  margin: 0 0 $cs.s 0
+  width: 21rem
+  box-shadow: var(--shadow-box-modal-normal)
+
+.title
+  margin: 0
+  font-size: $fs.m
+
+.subtitle
+  font-size: $fs.s
+  margin: $cs.xs 0 $cs.m 0
+
+.image
+  width: 100%
+
+.buttonGroup
+  display: flex
+  justify-content: space-between
+  gap: $cs.m
+  margin-top: $cs.m
+
+  .button
+    flex: 1
+
+.closeButton
+  position: absolute
+  top: $cs.m
+  right: $cs.m

pkg/webui/console/containers/event-split-frame/event-split-frame.styl

@@ -51,8 +51,31 @@
 
 .open-button
   position: fixed
-  right: 0
-  bottom: 0
+  right: $cs.s
+  bottom: $cs.s
   padding: $cs.xxs
   width: fit-content
+  display: flex
+  flex-direction: column
+  align-items: flex-end
+
+.live-data-button
+  position: relative
+  display: inline-flex
+  transition: 80ms background ease-in-out, 80ms color ease-in-out, 80ms border-color ease-in-out, 80ms box-shadow ease-in-out
+  outline: 0
+  cursor: pointer
+  justify-content: center
+  align-items: center
+  gap: $cs.xxs
+  height: $ls.m
+  text-decoration: none
+  padding: 0 $cs.l 0 $cs.m
+  border-radius: $br.xl3
+  color: var(--c-text-neutral-min)
+  background-color: var(--c-bg-neutral-heavy)
+  border: 1px solid transparent
+  box-shadow: var(--shadow-box-button-bold)
 
+  &:hover
+    background-color: var(--c-bg-neutral-heavy-hover)