Maintenance: Inform Users about the Keyboard Shortcuts Change.

app/assets/javascripts/app/controllers/_dashboard/first_steps_clues.coffee → app/assets/javascripts/app/controllers/clues/base.coffee

@@ -1,48 +1,4 @@
-class App.FirstStepsClues extends App.Controller
-  clues: [
-    {
-      container: '.js-dashboardMenuItem'
-      headline: __('Dashboard')
-      text: __('Here you see a quick overview of your and other agents\' performance.')
-      actions: [
-        'hover'
-      ]
-    }
-    {
-      container: '.search-holder'
-      headline: __('Search')
-      text: __('Here you can search for tickets, customers, and organizations. Use the asterisk §*§ to find anything, e.g. §smi*§ or §rosent*l§. You also can use ||quotation marks|| for searching phrases: §"some phrase"§.')
-      actions: []
-    }
-    {
-      container: '.user-menu .add'
-      headline: __('Create')
-      text: __('Here you can create new tickets, customers and organizations (depending on your configured permissions).')
-      actions: [
-        'hover .navigation',
-        'hover .user-menu .add'
-      ]
-    }
-    {
-      container: '.user-menu .user .dropdown-menu'
-      headline: __('Personal Settings')
-      text: __('Here you can sign out, change the frontend language, and see your last viewed items.')
-      actions: [
-        'hover .navigation',
-        'click .user-menu .user .js-action',
-        'hover .user-menu .user'
-      ]
-    }
-    {
-      container: '.js-overviewsMenuItem'
-      headline: __('Overviews')
-      text: __('Here you find your ticket overviews for open, assigned, and escalated tickets.')
-      actions: [
-        'hover'
-      ]
-    }
-  ]
-
+class App.CluesBase extends App.Controller
   elements:
     '.js-positionOrigin': 'modalWindow'
     '.js-backdrop':       'backdrop'
@@ -120,7 +76,7 @@ class App.FirstStepsClues extends App.Controller
 
   render: =>
     @el.addClass('modal modal--clue')
-    @html App.view('dashboard/first_steps_clues')
+    @html App.view('clues/clues_modal')
     @backdrop.velocity
       properties:
         opacity: [1, 0]
@@ -144,7 +100,7 @@ class App.FirstStepsClues extends App.Controller
       x: boundingBox.left + boundingBox.width/2
       y: boundingBox.top + boundingBox.height/2
 
-    @modalWindow.html App.view('dashboard/first_steps_clues_content')
+    @modalWindow.html App.view('clues/clues_content')
       headline: clue.headline
       text: clue.text
       position: @position

app/assets/javascripts/app/controllers/clues/first_steps_clues.coffee

@@ -0,0 +1,44 @@
+class App.FirstStepsClues extends App.CluesBase
+  clues: [
+    {
+      container: '.js-dashboardMenuItem'
+      headline: __('Dashboard')
+      text: __('Here you see a quick overview of your and other agents\' performance.')
+      actions: [
+        'hover'
+      ]
+    }
+    {
+      container: '.search-holder'
+      headline: __('Search')
+      text: __('Here you can search for tickets, customers, and organizations. Use the asterisk §*§ to find anything, e.g. §smi*§ or §rosent*l§. You also can use ||quotation marks|| for searching phrases: §"some phrase"§.')
+      actions: []
+    }
+    {
+      container: '.user-menu .add'
+      headline: __('Create')
+      text: __('Here you can create new tickets, customers and organizations (depending on your configured permissions).')
+      actions: [
+        'hover .navigation',
+        'hover .user-menu .add'
+      ]
+    }
+    {
+      container: '.user-menu .user .dropdown-menu'
+      headline: __('Personal Settings')
+      text: __('Here you can sign out, change the frontend language, and see your last viewed items.')
+      actions: [
+        'hover .navigation',
+        'click .user-menu .user .js-action',
+        'hover .user-menu .user'
+      ]
+    }
+    {
+      container: '.js-overviewsMenuItem'
+      headline: __('Overviews')
+      text: __('Here you find your ticket overviews for open, assigned, and escalated tickets.')
+      actions: [
+        'hover'
+      ]
+    }
+  ]

app/assets/javascripts/app/controllers/clues/keyboard_shortcuts_clues.coffee

@@ -0,0 +1,13 @@
+class App.KeyboardShortcutsClues extends App.CluesBase
+  clues: [
+    {
+      container: '.user-menu .user .dropdown-menu a[href="#keyboard_shortcuts"]'
+      headline: __('New Keyboard Shortcuts')
+      text: __('You can open the Keyboard Shortcuts dialog here and view the new and improved layout, or revert to the old one if you prefer it.')
+      actions: [
+        'hover .navigation',
+        'click .user-menu .user .js-action',
+        'hover .user-menu .user a[href="#keyboard_shortcuts"]',
+      ]
+    }
+  ]

app/assets/javascripts/app/controllers/dashboard.coffee

@@ -51,13 +51,33 @@ class App.Dashboard extends App.Controller
     return if @Config.get('switch_back_to_possible')
     preferences = @Session.get('preferences')
     @clueAccess = false
-    return if preferences['intro']
+
+    # If and only if the initial clue has been already completed by the user, show the one about new keyboard shortcuts.
+    if preferences['intro']
+      return if preferences['keyboard_shortcuts_clues']
+
+      new App.KeyboardShortcutsClues(
+        appEl: @appEl
+        onComplete: =>
+          App.Ajax.request(
+            id:          'preferences'
+            type:        'PUT'
+            url:         "#{@apiPath}/users/preferences"
+            data:        JSON.stringify(keyboard_shortcuts_clues: true)
+            processData: true
+          )
+      )
+
+      return
+
     @clues()
 
   clues: (e) =>
     @clueAccess = false
     if e
       e.preventDefault()
+
+    # Initial clue has its own controller, so it can be triggered via a route change later.
     @navigate '#clues'
 
   active: (state) =>

app/assets/javascripts/app/controllers/clues.coffee → app/assets/javascripts/app/controllers/first_steps_clues.coffee

@@ -1,4 +1,4 @@
-class Clues extends App.Controller
+class FirstStepsClues extends App.Controller
   constructor: ->
     super
     @navupdate '#', true
@@ -12,10 +12,16 @@ class Clues extends App.Controller
           id:          'preferences'
           type:        'PUT'
           url:         "#{@apiPath}/users/preferences"
-          data:        JSON.stringify(intro: true)
+
+          # Initial clue is special in that sense that once completed,
+          #   it will prevent further clues from being shown to the same user.
+          data: JSON.stringify(
+            intro: true
+            keyboard_shortcuts_clues: true
+          )
           processData: true
         )
         @navigate '#'
     )
 
-App.Config.set('clues', Clues, 'Routes')
+App.Config.set('clues', FirstStepsClues, 'Routes')

app/assets/javascripts/app/views/dashboard/first_steps_clues_content.jst.eco → app/assets/javascripts/app/views/clues/clues_content.jst.eco

@@ -6,13 +6,15 @@
   <div class="modal-header"><%- @T(@headline) %></div>
   <div class="modal-body"><%- @T(@text) %></div>
   <div class="modal-controls">
+    <% if @max > 1: %>
     <div class="modal-control">
       <div class="<% if @position is 0: %>is-disabled <% end %>btn btn--text js-previous"><%- @T( 'Previous' ) %></div>
     </div>
     <div class="modal-control clue-count"><%= @position+1 %>/<%= @max %></div>
+    <% end %>
     <div class="modal-control">
       <% if @position+1 is @max: %>
-        <div class="btn btn--text js-next"><%- @T( 'Finish' ) %></div>
+        <div class="btn btn--text js-next"><% if @max > 1: %><%- @T('Finish') %><% else: %><%- @T('Got it!') %><% end %></div>
       <% else: %>
         <div class="btn btn--text js-next"><%- @T( 'Next' ) %></div>
       <% end %>

app/assets/stylesheets/zammad.scss

@@ -3067,6 +3067,11 @@ input.has-error {
     .btn.is-disabled {
       color: var(--text-normal);
     }
+
+    &:only-child {
+      @include ltr(margin-left, auto);
+      @include rtl(margin-right, auto);
+    }
   }
 
   .modal-header {
@@ -4550,7 +4555,7 @@ footer {
     left: 0;
     width: $mobileNavigationWidth;
     height: 100%;
-    z-index: 999;
+    z-index: 499;
 
     &:empty {
       display: none !important;
@@ -9410,6 +9415,12 @@ li.list-item-none {
   display: block;
 }
 
+.dropdown-menu > li > a.is-hovered {
+  color: var(--text-inverted);
+  text-decoration: none;
+  background-color: var(--background-secondary-hover);
+}
+
 .dropdown-menu .badge--text {
   @include bidi-style(padding-left, 10px, padding-right, 0);
 }

i18n/zammad.pot

@@ -3392,8 +3392,8 @@ msgstr ""
 msgid "Country"
 msgstr ""
 
-#: app/assets/javascripts/app/controllers/_dashboard/first_steps_clues.coffee:19
 #: app/assets/javascripts/app/controllers/_profile/token_access.coffee:81
+#: app/assets/javascripts/app/controllers/clues/first_steps_clues.coffee:19
 #: app/assets/javascripts/app/controllers/knowledge_base/add_form.coffee:14
 #: app/assets/javascripts/app/models/group.coffee:45
 #: app/assets/javascripts/app/views/agent_ticket_create.jst.eco:56
@@ -3772,8 +3772,8 @@ msgstr ""
 msgid "Dark Mode"
 msgstr ""
 
-#: app/assets/javascripts/app/controllers/_dashboard/first_steps_clues.coffee:5
 #: app/assets/javascripts/app/controllers/_plugin/keyboard_shortcuts.coffee:125
+#: app/assets/javascripts/app/controllers/clues/first_steps_clues.coffee:5
 #: app/assets/javascripts/app/controllers/dashboard.coffee:28
 #: app/assets/javascripts/app/controllers/package.coffee:42
 #: app/frontend/apps/desktop/pages/dashboard/routes.ts:8
@@ -6266,7 +6266,7 @@ msgid "Fingerprint"
 msgstr ""
 
 #: app/assets/javascripts/app/controllers/_channel/whatsapp.coffee:251
-#: app/assets/javascripts/app/views/dashboard/first_steps_clues_content.jst.eco:15
+#: app/assets/javascripts/app/views/clues/clues_content.jst.eco:17
 #: app/assets/javascripts/app/views/getting_started/email_pre_configured.jst.eco:17
 #: app/frontend/apps/desktop/pages/guided-setup/views/GuidedSetupManual/GuidedSetupManualChannelEmailPreConfigured.vue:79
 msgid "Finish"
@@ -6762,6 +6762,10 @@ msgstr ""
 msgid "Google Client Secret"
 msgstr ""
 
+#: app/assets/javascripts/app/views/clues/clues_content.jst.eco:17
+msgid "Got it!"
+msgstr ""
+
 #: app/assets/javascripts/app/controllers/ticket_zoom/highlighter.coffee:16
 msgid "Green"
 msgstr ""
@@ -7011,7 +7015,7 @@ msgstr ""
 msgid "Here you can add further links to your public FAQ page, which will be displayed either in the header or footer."
 msgstr ""
 
-#: app/assets/javascripts/app/controllers/_dashboard/first_steps_clues.coffee:20
+#: app/assets/javascripts/app/controllers/clues/first_steps_clues.coffee:20
 msgid "Here you can create new tickets, customers and organizations (depending on your configured permissions)."
 msgstr ""
 
@@ -7023,7 +7027,7 @@ msgstr ""
 msgid "Here you can override any translation string for a more customized look and feel. Both recognized system and custom strings are supported, simply add a new translation in order to identify the source string and provide its new translation for the target language."
 msgstr ""
 
-#: app/assets/javascripts/app/controllers/_dashboard/first_steps_clues.coffee:14
+#: app/assets/javascripts/app/controllers/clues/first_steps_clues.coffee:14
 msgid "Here you can search for tickets, customers, and organizations. Use the asterisk §*§ to find anything, e.g. §smi*§ or §rosent*l§. You also can use ||quotation marks|| for searching phrases: §\"some phrase\"§."
 msgstr ""
 
@@ -7031,7 +7035,7 @@ msgstr ""
 msgid "Here you can set up and manage two-factor authentication methods for your Zammad account."
 msgstr ""
 
-#: app/assets/javascripts/app/controllers/_dashboard/first_steps_clues.coffee:29
+#: app/assets/javascripts/app/controllers/clues/first_steps_clues.coffee:29
 msgid "Here you can sign out, change the frontend language, and see your last viewed items."
 msgstr ""
 
@@ -7039,11 +7043,11 @@ msgstr ""
 msgid "Here you define which authorization has access to the attribute."
 msgstr ""
 
-#: app/assets/javascripts/app/controllers/_dashboard/first_steps_clues.coffee:39
+#: app/assets/javascripts/app/controllers/clues/first_steps_clues.coffee:39
 msgid "Here you find your ticket overviews for open, assigned, and escalated tickets."
 msgstr ""
 
-#: app/assets/javascripts/app/controllers/_dashboard/first_steps_clues.coffee:6
+#: app/assets/javascripts/app/controllers/clues/first_steps_clues.coffee:6
 msgid "Here you see a quick overview of your and other agents' performance."
 msgstr ""
 
@@ -9424,6 +9428,10 @@ msgstr ""
 msgid "New Group"
 msgstr ""
 
+#: app/assets/javascripts/app/controllers/clues/keyboard_shortcuts_clues.coffee:5
+msgid "New Keyboard Shortcuts"
+msgstr ""
+
 #: app/assets/javascripts/app/controllers/macro.coffee:22
 msgid "New Macro"
 msgstr ""
@@ -9567,7 +9575,7 @@ msgstr ""
 #: app/assets/javascripts/app/controllers/webhook.coffee:124
 #: app/assets/javascripts/app/controllers/widget/two_factor_configuration/modal/password_check.coffee:2
 #: app/assets/javascripts/app/controllers/widget/two_factor_configuration/modal/security_keys.coffee:106
-#: app/assets/javascripts/app/views/dashboard/first_steps_clues_content.jst.eco:17
+#: app/assets/javascripts/app/views/clues/clues_content.jst.eco:19
 #: app/assets/javascripts/app/views/getting_started/base.jst.eco:31
 #: app/assets/javascripts/app/views/import/otrs.jst.eco:17
 #: app/frontend/apps/desktop/components/TwoFactor/TwoFactorConfiguration/TwoFactorConfigurationPasswordCheck.vue:57
@@ -10558,9 +10566,9 @@ msgstr ""
 msgid "Overview bulk mask"
 msgstr ""
 
-#: app/assets/javascripts/app/controllers/_dashboard/first_steps_clues.coffee:38
 #: app/assets/javascripts/app/controllers/_plugin/keyboard_shortcuts.coffee:136
 #: app/assets/javascripts/app/controllers/_profile/overviews.coffee:79
+#: app/assets/javascripts/app/controllers/clues/first_steps_clues.coffee:38
 #: app/assets/javascripts/app/controllers/overview.coffee:3
 #: app/assets/javascripts/app/controllers/ticket_overview.coffee:258
 #: app/frontend/apps/desktop/pages/personal-setting/views/PersonalSetting/plugins/ticketOverviews.ts:6
@@ -10815,7 +10823,7 @@ msgstr ""
 msgid "Personal Access Tokens"
 msgstr ""
 
-#: app/assets/javascripts/app/controllers/_dashboard/first_steps_clues.coffee:28
+#: app/assets/javascripts/app/controllers/clues/first_steps_clues.coffee:28
 msgid "Personal Settings"
 msgstr ""
 
@@ -11136,7 +11144,7 @@ msgstr ""
 msgid "Preview owner tickets"
 msgstr ""
 
-#: app/assets/javascripts/app/views/dashboard/first_steps_clues_content.jst.eco:10
+#: app/assets/javascripts/app/views/clues/clues_content.jst.eco:11
 #: app/frontend/shared/form/i18n/locales.ts:70
 msgid "Previous"
 msgstr ""
@@ -12165,8 +12173,8 @@ msgstr ""
 msgid "Scroll down to see new messages"
 msgstr ""
 
-#: app/assets/javascripts/app/controllers/_dashboard/first_steps_clues.coffee:13
 #: app/assets/javascripts/app/controllers/_plugin/keyboard_shortcuts.coffee:147
+#: app/assets/javascripts/app/controllers/clues/first_steps_clues.coffee:13
 #: app/assets/javascripts/app/controllers/knowledge_base/agent_controller.coffee:201
 #: app/assets/javascripts/app/views/integration/idoit_object_selector.jst.eco:3
 #: app/assets/javascripts/app/views/knowledge_base/search_field_widget.jst.eco:1
@@ -17372,6 +17380,10 @@ msgstr ""
 msgid "You can no longer see the user."
 msgstr ""
 
+#: app/assets/javascripts/app/controllers/clues/keyboard_shortcuts_clues.coffee:6
+msgid "You can open the Keyboard Shortcuts dialog here and view the new and improved layout, or revert to the old one if you prefer it."
+msgstr ""
+
 #: app/assets/javascripts/app/models/knowledge_base.coffee:282
 msgid "You can provide different versions of your knowledge base for different locales. Add a language below, then select it in the Knowledge Base Editor to add your translations."
 msgstr ""

spec/factories/user.rb

@@ -3,7 +3,7 @@
 FactoryBot.define do
   factory :user do
     transient do
-      intro_clues { true }
+      hide_clues  { true }
       slug        { "#{firstname}.#{lastname}".parameterize }
     end
 
@@ -18,10 +18,11 @@ FactoryBot.define do
     created_by_id    { 1 }
 
     callback(:after_stub, :before_create) do |object, context|
-      next if !context.intro_clues
+      next if !context.hide_clues
 
       object.preferences ||= {}
-      object.preferences[:intro] = true
+      object.preferences[:intro]                    = true
+      object.preferences[:keyboard_shortcuts_clues] = true
     end
 
     factory :customer do