[UI] New tag color for tags about command adventures (hedyorg#4329)

**Description** Adds a new type of tag both in the normal level page and also in the customization page, for this I did the following: 1. Adding a new type of object `SortedAdventure` which will serve as the object being passed to the templates. Therefore, not needing changes in the databse in we want to change aspects of the tabs. For this I changed the filename `types.py` to `frontend_types.py` and added a new file `server_types.py` for this type of data that doesn't need to be shared with the front-end, releveant since using HTMX prevents for handing data in the front-end anyway. 2. Added a set that has the Keywords Adventures so we know which types of adventures should have a different color. 3. Edited the templates for the tabs and the customize class page. 4. Fixed the flaky failing test in `customize_clas.cy.js` This is how the tab looks on the customize class page: ![image](https://github.com/hedyorg/hedy/assets/45865185/3d684fb9-67fe-4372-9fdd-7b3566434d2d) **Fixes hedyorg#4312** **How to test** You can visit the index page and also the customize class page!
marc-bouvier · Jun 6, 2023 · a970323 · a970323
1 parent af56cf4
commit a970323
Show file tree

Hide file tree

Showing 16 changed files with 217 additions and 114 deletions.
diff --git a/app.py b/app.py
@@ -33,7 +33,7 @@
 from safe_format import safe_format
 from config import config
 from website.flask_helpers import render_template, proper_tojson, JinjaCompatibleJsonProvider
-from hedy_content import (ADVENTURE_ORDER_PER_LEVEL, ALL_KEYWORD_LANGUAGES,
+from hedy_content import (ADVENTURE_ORDER_PER_LEVEL, KEYWORDS_ADVENTURES, ALL_KEYWORD_LANGUAGES,
                           ALL_LANGUAGES, COUNTRIES)
 
 from logging_config import LOGGING_CONFIG
@@ -45,7 +45,7 @@
 from website.auth import (current_user, is_admin, is_teacher,
                           login_user_from_token_cookie, requires_login, requires_login_redirect, requires_teacher)
 from website.log_fetcher import log_fetcher
-from website.types import Adventure, Program, ExtraStory, SaveInfo
+from website.frontend_types import Adventure, Program, ExtraStory, SaveInfo
 
 logConfig(LOGGING_CONFIG)
 logger = logging.getLogger(__name__)
@@ -142,6 +142,7 @@ def load_adventures_for_level(level):
                 example_code=adventure['levels'][level].get('example_code', ""),
                 extra_stories=extra_stories,
                 is_teacher_adventure=False,
+                is_command_adventure=short_name in KEYWORDS_ADVENTURES,
                 save_name=f'{default_save_name} {level}',
                 start_code=adventure['levels'][level].get('start_code', ""))
 
@@ -1175,6 +1176,7 @@ def index(level, program_id):
                 start_code=loaded_program.code,
                 save_name=loaded_program.name,
                 is_teacher_adventure=False,
+                is_command_adventure=loaded_program.adventure_name in KEYWORDS_ADVENTURES
             ))
 
     adventures_map = {a.short_name: a for a in adventures}

diff --git a/build-tools/heroku/tailwind/styles.css b/build-tools/heroku/tailwind/styles.css
@@ -460,6 +460,10 @@ body[dir='rtl'] .right-hand-shadow {
   @apply border-blue-300;
 }
 
+.command_tab {
+  @apply border-[#fdb2c5];
+}
+
 .active-bluebar-btn {
   @apply bg-blue-300;
   box-shadow: inset 0 2px 4px 0 rgb(0 0 10 / 0.3);

diff --git a/hedy_content.py b/hedy_content.py
@@ -25,29 +25,24 @@
 CUSTOM_LANGUAGE_TRANSLATIONS = {'kmr': 'Kurdî (Tirkiye)', 'tn': 'Setswana', 'tl': 'ᜆᜄᜎᜓᜄ᜔'}
 customize_babel_locale(CUSTOM_BABEL_LANGUAGES)
 
-ADVENTURE_NAMES = [
-    'default',
-    'parrot',
-    'years',
-    'fortune',
-    'haunted',
-    'restaurant',
-    'story',
-    'songs',
-    'turtle',
-    'dishes',
-    'dice',
-    'rock',
-    'calculator',
-    'piggybank',
-    'quizmaster',
-    'language',
-    'secret',
-    'tic',
-    'blackjack',
-    'next',
-    'end'
-]
+KEYWORDS_ADVENTURES = set([
+    'print_command',
+    'ask_command',
+    'is_command',
+    'sleep_command',
+    'random_command',
+    'add_remove_command',
+    'quotation_marks',
+    'if_command',
+    'in_command',
+    'maths',
+    'repeat_command',
+    'repeat_command_2',
+    'for_command',
+    'and_or_command',
+    'while_command',
+    'elif_command'
+])
 
 ADVENTURE_ORDER_PER_LEVEL = {
     1: [

diff --git a/static/css/generated.css b/static/css/generated.css
diff --git a/static/css/generated.full.css b/static/css/generated.full.css
@@ -15984,6 +15984,11 @@ code {
   border-color: rgb(56 178 172 / var(--tw-border-opacity));
 }
 
+.border-yellow-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(246 224 94 / var(--tw-border-opacity));
+}
+
 .border-gray-600 {
   --tw-border-opacity: 1;
   border-color: rgb(113 128 150 / var(--tw-border-opacity));
@@ -16137,11 +16142,6 @@ code {
   border-color: rgb(250 240 137 / var(--tw-border-opacity));
 }
 
-.border-yellow-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(246 224 94 / var(--tw-border-opacity));
-}
-
 .border-yellow-700 {
   --tw-border-opacity: 1;
   border-color: rgb(183 121 31 / var(--tw-border-opacity));
@@ -31094,6 +31094,12 @@ body[dir='rtl'] .right-hand-shadow {
   border-color: rgb(144 205 244 / var(--tw-border-opacity));
 }
 
+.command_tab {
+  --tw-border-opacity: 1;
+  border-color: rgb(253 178 197 / var(--tw-border-opacity));
+  /* border-color:  #fdb2c5 */
+}
+
 .active-bluebar-btn {
   --tw-bg-opacity: 1;
   background-color: rgb(144 205 244 / var(--tw-bg-opacity));

diff --git a/static/js/appbundle.js b/static/js/appbundle.js
diff --git a/static/js/appbundle.js.map b/static/js/appbundle.js.map
diff --git a/static/js/types.ts b/static/js/types.ts
@@ -8,6 +8,9 @@ export interface Adventure {
   /** The type of adventure */
   is_teacher_adventure: boolean;
 
+  /** Is this an adventure about a keyword? */
+  is_command_adventure: boolean;
+
   /** Markdown for the introductory paragraph */
   text?: string;
 

diff --git a/templates/customize-class.html b/templates/customize-class.html
@@ -34,6 +34,7 @@ <h3 class="px-4">{{_('select_adventures')}}</h3>
             </div>
             {{ render_partial('customize-class/hx-sortable-adventures.html',
                                customizations=customizations,
+                               adventures=adventures,
                                max_level=max_level,
                                adventure_names=adventure_names,
                                adventures_default_order=adventures_default_order,

diff --git a/templates/customize-class/hx-sortable-adventures.html b/templates/customize-class/hx-sortable-adventures.html
@@ -7,18 +7,16 @@
             hx-target="#adventure-dragger" 
             hx-include="[name='adventure']"
             hx-indicator="#indicator">
-                {% for adventure in customizations['sorted_adventures'][level|string] %}
-                    {% if adventure.name in adventure_names %}
-                        <div class="tab {% if adventure['from_teacher'] %}teacher_tab{% endif %} z-10 whitespace-nowrap flex items-center justify-left relative" data-cy="{{ adventure['name'] }}">
-                            <span class="absolute top-0.5 right-0.5 text-gray-600 hover:text-red-400 fa-regular fa-circle-xmark" data-cy="hide"
-                                  hx-post="/for-teachers/remove-adventure?adventure_id={{ adventure['name'] }}&level={{ level }}" 
-                                  hx-target="#adventure-dragger"
-                                  hx-indicator="#indicator"></span>
-                                {{ adventure_names[adventure['name']] }}
-                            {# Hidden input so we can send the adventures names in the request to the server #}
-                            <input type="hidden" value="{{ adventure['name'] }}" name="adventure">
-                        </div>
-                    {% endif %}
+                {% for adventure in adventures[level|int] %}
+                    <div class="tab {% if adventure.is_teacher_adventure %}teacher_tab{% elif adventure.is_command_adventure %}command_tab{% endif %} z-10 whitespace-nowrap flex items-center justify-left relative" data-cy="{{ adventure.short_name }}">
+                        <span class="absolute top-0.5 right-0.5 text-gray-600 hover:text-red-400 fa-regular fa-circle-xmark" data-cy="hide"
+                            hx-post="/for-teachers/remove-adventure?adventure_id={{ adventure.short_name }}&level={{ level }}" 
+                            hx-target="#adventure-dragger"
+                            hx-indicator="#indicator"></span>
+                            {{ adventure.long_name }}
+                        {# Hidden input so we can send the adventures names in the request to the server #}
+                        <input type="hidden" value="{{ adventure.short_name }}" name="adventure">
+                    </div>                    
                 {% endfor %}
         </div>
     </div>
@@ -30,12 +28,12 @@
             hx-indicator="#indicator">
         <option value="none" selected disabled>{{_('adventures')}}</option>
         {% for adventure in available_adventures[level|int] %}
-            <option value="{{ adventure['name'] }}"> 
-                {{ adventure_names[adventure['name']] }} 
+            <option value="{{ adventure.short_name }}"> 
+                {{ adventure.long_name }} 
             </option>
         {% endfor %}
     </select> 
     <button title="{{_('reset_adventures')}}" class="yellow-btn text-white mr-4 ml-6 place-self-center" hx-get="/for-teachers/restore-adventures-modal/level/{{ level }}" hx-target="#modal-target">
         {{_('reset_button')}}
     </button>
-</div>
+</div> 
diff --git a/templates/incl/adventure-tabs.html b/templates/incl/adventure-tabs.html
@@ -14,7 +14,13 @@
         <div class="overflow-x-auto overflow-y-hidden px-2 pt-2">
         <div class="flex flex-row w-min" id="adventures-buttons">
             {% for adventure in adventures %}
-                {{ adventure_tab(adventure.short_name, adventure.name, adventure.short_name == initial_tab, 'adventure' + loop.index|string, 'teacher_tab' if adventure.is_teacher_adventure else '') }}
+                {% if adventure.is_teacher_adventure %}
+                    {{ adventure_tab(adventure.short_name, adventure.name, adventure.short_name == initial_tab, 'adventure' + loop.index|string, 'teacher_tab') }}
+                {% elif adventure.is_command_adventure %}
+                    {{ adventure_tab(adventure.short_name, adventure.name, adventure.short_name == initial_tab, 'adventure' + loop.index|string, 'command_tab') }}
+                {% else %}
+                    {{ adventure_tab(adventure.short_name, adventure.name, adventure.short_name == initial_tab, 'adventure' + loop.index|string, '') }}                    
+                {% endif %}
             {% endfor %}
             <!-- Add the tab for the parsons problem (if it exists) -->
             {% if parsons %}

diff --git a/tests/cypress/e2e/for-teacher_page/customize_class_page/customize_class.cy.js b/tests/cypress/e2e/for-teacher_page/customize_class_page/customize_class.cy.js
@@ -72,7 +72,7 @@ describe('customize class page', () => {
 
     it('the quiz score holds the value typed to it', () => {
       // testing quiz score feature
-      cy.getBySel('quiz_input').type("50").should("have.value", "50");
+      cy.getBySel('quiz_input').clear().type("50").should("have.value", "50");
     });