From 648cb7288786fac55316927ea53d9e9090d85156 Mon Sep 17 00:00:00 2001
From: Mikko Nieminen <mikko.nieminen@bih-charite.de>
Date: Thu, 24 Aug 2023 14:34:22 +0200
Subject: [PATCH] add tokens tour help (#1102)

---
 timeline/templates/timeline/timeline.html     |  1 -
 tokens/templates/tokens/_token_dropdown.html  | 11 +++++
 tokens/templates/tokens/_token_item.html      |  2 +-
 .../templates/tokens/_token_item_buttons.html | 11 -----
 .../tokens/token_confirm_delete.html          |  2 +-
 tokens/templates/tokens/token_create.html     |  1 +
 .../tokens/token_create_success.html          |  1 +
 tokens/templates/tokens/token_list.html       | 47 +++++++++++++++++--
 8 files changed, 59 insertions(+), 17 deletions(-)
 create mode 100644 tokens/templates/tokens/_token_dropdown.html
 delete mode 100644 tokens/templates/tokens/_token_item_buttons.html

diff --git a/timeline/templates/timeline/timeline.html b/timeline/templates/timeline/timeline.html
index b73d5603..dd27190b 100644
--- a/timeline/templates/timeline/timeline.html
+++ b/timeline/templates/timeline/timeline.html
@@ -88,5 +88,4 @@ <h3>
       });
   </script>
   {% include 'timeline/_list_tour.html' %} {# Common tour help items #}
-
 {% endblock javascript %}
diff --git a/tokens/templates/tokens/_token_dropdown.html b/tokens/templates/tokens/_token_dropdown.html
new file mode 100644
index 00000000..39d2cd98
--- /dev/null
+++ b/tokens/templates/tokens/_token_dropdown.html
@@ -0,0 +1,11 @@
+<button class="btn btn-secondary dropdown-toggle sodar-list-dropdown
+               sodar-tk-item-dropdown"
+        type="button" data-toggle="dropdown" aria-expanded="false">
+  <i class="iconify" data-icon="mdi:cog"></i>
+</button>
+<div class="dropdown-menu dropdown-menu-right">
+  <a class="dropdown-item text-danger"
+     href="{% url 'tokens:delete' pk=item.pk %}">
+    <i class="iconify" data-icon="mdi:close-thick"></i> Delete Token
+  </a>
+</div>
diff --git a/tokens/templates/tokens/_token_item.html b/tokens/templates/tokens/_token_item.html
index 8f8f917c..e147317b 100644
--- a/tokens/templates/tokens/_token_item.html
+++ b/tokens/templates/tokens/_token_item.html
@@ -3,5 +3,5 @@
   <td class="text-nowrap">{{ item.created|date:'Y-m-d H:i' }}</td>
   <td class="text-nowrap">{{ token.expiry|date:'Y-m-d H:i'|default:'Never' }}</td>
   <td class="text-nowrap"><code>{{ item.token_key }}</code></td>
-  <td>{% include 'tokens/_token_item_buttons.html' %}</td>
+  <td class="text-right">{% include 'tokens/_token_dropdown.html' %}</td>
 </tr>
diff --git a/tokens/templates/tokens/_token_item_buttons.html b/tokens/templates/tokens/_token_item_buttons.html
deleted file mode 100644
index 98e39df7..00000000
--- a/tokens/templates/tokens/_token_item_buttons.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<div class="btn-group sodar-list-btn-group pull-right">
-  <button class="btn btn-secondary dropdown-toggle sodar-list-dropdown"
-      type="button" data-toggle="dropdown" aria-expanded="false">
-    <i class="iconify" data-icon="mdi:cog"></i>
-  </button>
-  <div class="dropdown-menu dropdown-menu-right">
-    <a class="dropdown-item text-danger" href="{% url 'tokens:delete' pk=item.pk %}">
-      <i class="iconify" data-icon="mdi:close-thick"></i> Delete Token
-    </a>
-  </div>
-</div>
diff --git a/tokens/templates/tokens/token_confirm_delete.html b/tokens/templates/tokens/token_confirm_delete.html
index f65cc2c9..661df83b 100644
--- a/tokens/templates/tokens/token_confirm_delete.html
+++ b/tokens/templates/tokens/token_confirm_delete.html
@@ -7,7 +7,7 @@
 {% block projectroles %}
 
 <div class="container-fluid sodar-subtitle-container">
-  <h2>Confirm Deletion of API Token &quot;{{ object.token_key }}&quot;</h2>
+  <h2>Confirm Deletion of API Token "{{ object.token_key }}"</h2>
 </div>
 
 <div class="container-fluid sodar-page-container">
diff --git a/tokens/templates/tokens/token_create.html b/tokens/templates/tokens/token_create.html
index 290d633f..58a6679b 100644
--- a/tokens/templates/tokens/token_create.html
+++ b/tokens/templates/tokens/token_create.html
@@ -7,6 +7,7 @@
 {% endblock title %}
 
 {% block projectroles %}
+
 <div class="container-fluid sodar-subtitle-container">
   <h2>Create API Token</h2>
 </div>
diff --git a/tokens/templates/tokens/token_create_success.html b/tokens/templates/tokens/token_create_success.html
index 30bbff31..db1ad54d 100644
--- a/tokens/templates/tokens/token_create_success.html
+++ b/tokens/templates/tokens/token_create_success.html
@@ -5,6 +5,7 @@
 {% endblock title %}
 
 {% block projectroles %}
+
 <div class="container-fluid sodar-subtitle-container">
   <h2>API Token Created</h2>
 </div>
diff --git a/tokens/templates/tokens/token_list.html b/tokens/templates/tokens/token_list.html
index 448d66cf..33ab2062 100644
--- a/tokens/templates/tokens/token_list.html
+++ b/tokens/templates/tokens/token_list.html
@@ -11,7 +11,6 @@
     table#sodar-tk-list-table tbody tr td:first-child {
       width: 60px !important;
     }
-
     @media screen and (max-width: 650px) {
       table#sodar-tk-list-table thead tr th:nth-child(2),
       table#sodar-tk-list-table tbody tr td:nth-child(2) {
@@ -25,7 +24,7 @@
 
 <div class="row sodar-subtitle-container bg-white sticky-top">
   <h2><i class="iconify" data-icon="mdi:key-chain-variant"></i> API Tokens</h2>
-  <a role="button" class="btn btn-primary ml-auto"
+  <a role="button" class="btn btn-primary ml-auto" id="sodar-tk-create-btn"
      href="{% url 'tokens:create' %}">
     <i class="iconify" data-icon="mdi:plus-thick"></i> Create Token
   </a>
@@ -34,7 +33,8 @@ <h2><i class="iconify" data-icon="mdi:key-chain-variant"></i> API Tokens</h2>
 <div class="container-fluid sodar-page-container">
   <div class="card" id="sodar-tk-token-list">
     <div class="card-body p-0">
-      <table class="table table-striped sodar-card-table" id="sodar-tk-list-table">
+      <table class="table table-striped sodar-card-table"
+             id="sodar-tk-table">
         <thead>
           <tr>
             <th class="text-right">#</th>
@@ -62,3 +62,44 @@ <h2><i class="iconify" data-icon="mdi:key-chain-variant"></i> API Tokens</h2>
 </div>
 
 {% endblock projectroles %}
+
+{% block javascript %}
+  {{ block.super }}
+  <!-- Tour content -->
+  <script type="text/javascript">
+      tourEnabled = true;
+      tour.addStep('tokens', {
+          title: 'API Tokens App',
+          text: 'In this application you can create and manage API tokens to ' +
+                'be used with the REST API endpoints of the site. Tokens are ' +
+                'user specific and may have an expiry date.',
+          advanceOn: '.docs-link click',
+          showCancelLink: true
+      });
+      tour.addStep('token_create', {
+          title: 'Create Token',
+          text: 'To create a new API token, click on this button and follow ' +
+                'the instructions in the displayed forms.',
+          attachTo: '#sodar-tk-create-btn left',
+          advanceOn: '.docs-link click',
+          showCancelLink: true
+      });
+      tour.addStep('token_list', {
+          title: 'Token List',
+          text: 'Tokens assigned to you can be seen in this list.',
+          attachTo: '#sodar-tk-table top',
+          advanceOn: '.docs-link click',
+          showCancelLink: true
+      });
+      if ($('.sodar-tk-item-dropdown').length) {
+          tour.addStep('token_dropdown', {
+              title: 'Token Dropdown',
+              text: 'Through this dropdown you can delete the corresponding ' +
+                    'token.',
+              attachTo: '.sodar-tk-item-dropdown left',
+              advanceOn: '.docs-link click',
+              showCancelLink: true
+          });
+      }
+  </script>
+{% endblock javascript %}