Add live data split view tutorial

CHANGELOG.md

@@ -11,6 +11,8 @@ For details about compatibility between different releases, see the **Commitment
 
 ### Added
 
+- Add live data split view tutorial to the Console.
+
 ### Changed
 
 ### Deprecated

pkg/identityserver/bunstore/user_store.go

@@ -607,7 +607,7 @@ func (s *userStore) updateUserModel( //nolint:gocyclo
 		case "console_preferences.sort_by":
 			updateConsolePreferences = true
 			consolePreferences.SortBy = pb.ConsolePreferences.GetSortBy()
-		case "console_preferences.tutorials":
+		case "console_preferences.tutorials.seen":
 			updateConsolePreferences = true
 			consolePreferences.Tutorials = pb.ConsolePreferences.GetTutorials()
 		case "universal_rights":

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

@@ -0,0 +1,77 @@
+// Copyright © 2024 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, useState } from 'react'
+import { defineMessages } from 'react-intl'
+import PropTypes from 'prop-types'
+import { IconX } from '@tabler/icons-react'
+
+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 [show, setShow] = useState(true)
+
+  const handleTryIt = useCallback(() => {
+    setIsOpen(true)
+    setTutorialSeen()
+  }, [setIsOpen, setTutorialSeen])
+
+  const handleClose = useCallback(() => {
+    setShow(false)
+  }, [])
+
+  return (
+    show &&
+    !seen && (
+      <div className={style.container}>
+        <Button className={style.closeButton} icon={IconX} onClick={handleClose} />
+        <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} primary className={style.button} onClick={setTutorialSeen} />
+          <Button message={m.tryIt} onClick={handleTryIt} secondary 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,46 @@
+// Copyright © 2024 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.l
+  border-radius: $br.m
+  margin: 0 0 $cs.s 0
+  width: 21rem
+
+.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.xs
+
+  .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,27 @@
 
 .open-button
   position: fixed
-  right: 0
-  bottom: 0
+  right: $cs.s
+  bottom: $cs.s
   padding: $cs.xxs
   width: fit-content
 
+.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.m
+  border-radius: $br.xl3
+  color: var(--c-text-neutral-min)
+  background-color: var(--c-bg-neutral-heavy)
+  border: 1px solid transparent
+
+  &:hover
+    background-color: var(--c-bg-neutral-heavy-hover)

pkg/webui/console/containers/event-split-frame/index.js

@@ -14,31 +14,58 @@
 
 import React, { useContext, useCallback, useRef, useEffect } from 'react'
 import DOM from 'react-dom'
-import { IconLayoutBottombarExpand } from '@tabler/icons-react'
-import { defineMessages } from 'react-intl'
+import { useDispatch, useSelector } from 'react-redux'
 
 import Button from '@ttn-lw/components/button'
+import { IconChevronUp } from '@ttn-lw/components/icon'
+
+import RequireRequest from '@ttn-lw/lib/components/require-request'
+
+import LiveDataTutorial from '@console/components/live-data-tutorial'
 
 import PropTypes from '@ttn-lw/lib/prop-types'
+import attachPromise from '@ttn-lw/lib/store/actions/attach-promise'
+import sharedMessages from '@ttn-lw/lib/shared-messages'
+
+import { getUser } from '@console/store/actions/users'
+import { updateUser } from '@console/store/actions/user'
+
+import { selectUserId } from '@console/store/selectors/logout'
+import { selectUserById } from '@console/store/selectors/users'
+import { selectConsolePreferences } from '@console/store/selectors/user-preferences'
 
 import EventSplitFrameContext from './context'
 
 import style from './event-split-frame.styl'
 
-const m = defineMessages({
-  expandEventPanel: 'Expand live data overlay',
-})
-
 const EventSplitFrameInner = ({ children }) => {
   const { isOpen, height, isActive, setHeight, setIsMounted, setIsOpen } =
     useContext(EventSplitFrameContext)
   const ref = useRef()
+  const dispatch = useDispatch()
+  const userId = useSelector(selectUserId)
+  const user = useSelector(state => selectUserById(state, userId))
+  const consolePreferences = useSelector(state => selectConsolePreferences(state))
+  const tutorials = consolePreferences.tutorials?.seen || []
+  const seen = tutorials.includes('TUTORIAL_LIVE_DATA_SPLIT_VIEW')
 
   useEffect(() => {
     setIsMounted(true)
     return () => setIsMounted(false)
   }, [setIsMounted])
 
+  const setTutorialSeen = useCallback(async () => {
+    const patch = {
+      console_preferences: {
+        tutorials: {
+          seen: [...tutorials, 'TUTORIAL_LIVE_DATA_SPLIT_VIEW'],
+        },
+      },
+    }
+
+    await dispatch(attachPromise(updateUser({ id: user.ids.user_id, patch })))
+  }, [dispatch, tutorials, user.ids.user_id])
+
   // Handle the dragging of the handler to resize the frame.
   const handleDragStart = useCallback(
     e => {
@@ -79,13 +106,12 @@ const EventSplitFrameInner = ({ children }) => {
       )}
       {isActive && !isOpen && (
         <div className={style.openButton}>
+          <LiveDataTutorial setIsOpen={setIsOpen} setTutorialSeen={setTutorialSeen} seen={seen} />
           <Button
-            icon={IconLayoutBottombarExpand}
-            tooltip={m.expandEventPanel}
-            tooltipPlacement="left"
+            icon={IconChevronUp}
+            className={style.liveDataButton}
             onClick={() => setIsOpen(true)}
-            secondary
-            small
+            message={sharedMessages.liveData}
           />
         </div>
       )}
@@ -97,7 +123,15 @@ EventSplitFrameInner.propTypes = {
   children: PropTypes.node.isRequired,
 }
 
-const EventSplitFrame = props =>
-  DOM.createPortal(<EventSplitFrameInner {...props} />, document.getElementById('split-frame'))
+const EventSplitFrame = props => {
+  const userId = useSelector(selectUserId)
+
+  return DOM.createPortal(
+    <RequireRequest requestAction={getUser(userId, ['console_preferences'])}>
+      <EventSplitFrameInner {...props} />
+    </RequireRequest>,
+    document.getElementById('split-frame'),
+  )
+}
 
 export default EventSplitFrame

pkg/webui/console/store/reducers/user-preferences.js

@@ -22,6 +22,8 @@ import {
 } from '@console/store/actions/user-preferences'
 import { APPLY_PERSISTED_STATE_SUCCESS, GET_USER_ME_SUCCESS } from '@console/store/actions/user'
 
+import { UPDATE_USER, UPDATE_USER_SUCCESS } from '../actions/users'
+
 const initialState = {
   bookmarks: {
     bookmarks: [],
@@ -109,6 +111,7 @@ const userPreferences = (state = initialState, { type, payload }) => {
         },
       }
     case GET_USER_ME_SUCCESS:
+    case UPDATE_USER_SUCCESS:
       return {
         ...state,
         consolePreferences: {

pkg/webui/locales/en.json

@@ -163,6 +163,10 @@
   "console.components.gateway-api-keys-modal.index.downloadLns": "Download LNS key",
   "console.components.gateway-api-keys-modal.index.downloadCups": "Download CUPS key",
   "console.components.gateway-visibility-form.index.saveDefaultGatewayVisibility": "Save default gateway visibility",
+  "console.components.live-data-tutorial.index.liveDataSplitView": "Live data split view",
+  "console.components.live-data-tutorial.index.liveDataSplitViewDescription": "Debug, make changes while keeping an eye on live data from everywhere with split view.",
+  "console.components.live-data-tutorial.index.gotIt": "Got it",
+  "console.components.live-data-tutorial.index.tryIt": "Try it",
   "console.components.location-form.index.deleteAllLocations": "Delete all location data",
   "console.components.location-form.index.deleteFailure": "An error occurred and the location could not be deleted",
   "console.components.location-form.index.deleteLocation": "Remove location data",
@@ -539,7 +543,6 @@
   "console.containers.email-notifications-form.index.unsubscribeDescription": "You will continue to receive notifications in the console.",
   "console.containers.email-notifications-form.index.discardChanges": "Discard changes",
   "console.containers.email-notifications-form.index.updateEmailPreferences": "Updated email preferences",
-  "console.containers.event-split-frame.index.expandEventPanel": "Expand live data overlay",
   "console.containers.freq-plans-select.utils.warning": "Frequency plans unavailable",
   "console.containers.freq-plans-select.utils.none": "Do not set a frequency plan",
   "console.containers.freq-plans-select.utils.selectFrequencyPlan": "Select a frequency plan...",

pkg/webui/locales/ja.json

@@ -163,6 +163,10 @@
   "console.components.gateway-api-keys-modal.index.downloadLns": "LNSキーをダウンロード",
   "console.components.gateway-api-keys-modal.index.downloadCups": "CUPSキーをダウンロード",
   "console.components.gateway-visibility-form.index.saveDefaultGatewayVisibility": "デフォルトゲートウェイの可視性を保存",
+  "console.components.live-data-tutorial.index.liveDataSplitView": "",
+  "console.components.live-data-tutorial.index.liveDataSplitViewDescription": "",
+  "console.components.live-data-tutorial.index.gotIt": "",
+  "console.components.live-data-tutorial.index.tryIt": "",
   "console.components.location-form.index.deleteAllLocations": "",
   "console.components.location-form.index.deleteFailure": "",
   "console.components.location-form.index.deleteLocation": "",
@@ -539,7 +543,6 @@
   "console.containers.email-notifications-form.index.unsubscribeDescription": "",
   "console.containers.email-notifications-form.index.discardChanges": "",
   "console.containers.email-notifications-form.index.updateEmailPreferences": "",
-  "console.containers.event-split-frame.index.expandEventPanel": "",
   "console.containers.freq-plans-select.utils.warning": "",
   "console.containers.freq-plans-select.utils.none": "",
   "console.containers.freq-plans-select.utils.selectFrequencyPlan": "",

pkg/webui/styles/variables/tokens.styl

@@ -40,6 +40,7 @@ $tokens = {
       'bg-neutral-semibold': $c.neutral-700,
       'bg-neutral-bold': $c.neutral-800,
       'bg-neutral-heavy': $c.neutral-900, // Background for navigation element items when active.
+      'bg-neutral-heavy-hover': $c.neutral-1050, // Background for navigation element items when active on hover.
 
       // Brand