add tokens tour help (#1102)

bihealth · Aug 24, 2023 · 648cb72 · 648cb72
1 parent 0b7fde6
commit 648cb72
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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 %}