Merge branch 'Simon-Initiative:master' into master

assets/src/hooks/slider_scroll.ts

@@ -52,7 +52,8 @@ export const SliderScroll = {
         sliderLeftButton?.classList.add('flex');
       }
 
-      if (slider.scrollLeft >= slider.scrollWidth - slider.clientWidth) {
+      // we add 5 to the scrollLeft value to avoid the sliderRightButton to get visible even when scrolling is at the end
+      if (slider.scrollLeft + 5 >= slider.scrollWidth - slider.clientWidth) {
         sliderRightButton?.classList.add('hidden');
         sliderRightButton?.classList.remove('flex');
       } else {

assets/src/phoenix/app.ts

@@ -169,6 +169,22 @@ window.addEventListener('phx:js-exec', ({ detail }: any) => {
   });
 });
 
+window.addEventListener('mouseover', (e: any) => {
+  // if the event's target has the xphx-mouseover attribute,
+  // execute the commands on that element
+  if (e.target.matches('[xphx-mouseover]')) {
+    liveSocket.execJS(e.target, e.target.getAttribute('xphx-mouseover'));
+  }
+});
+
+window.addEventListener('mouseout', (e: any) => {
+  // if the event's target has the xphx-mouseout attribute,
+  // execute the commands on that element
+  if (e.target.matches('[xphx-mouseout]')) {
+    liveSocket.execJS(e.target, e.target.getAttribute('xphx-mouseout'));
+  }
+});
+
 declare global {
   interface Window {
     liveSocket: typeof liveSocket;

lib/oli_web/components/common.ex

@@ -603,7 +603,7 @@ defmodule OliWeb.Components.Common do
     <div class="flex flex-row items-center mx-auto" role={@role}>
       <div class="flex justify-center w-full">
         <div
-          class={"rounded-[60px] bg-gray-200 #{@height} dark:bg-[rgba(170,170,170,0.20)]"}
+          class={"rounded-[60px] bg-gray-600/20 #{@height} dark:bg-white/20"}
           style={"width: #{@width}"}
         >
           <div

lib/oli_web/live/experiments/experiments_live.ex

@@ -64,6 +64,11 @@ defmodule OliWeb.Experiments.ExperimentsView do
           source={:experiments}
         />
       <% end %>
+
+      <div :if={@is_upgrade_enabled} class="flex gap-4">
+        <.button class="btn btn-md btn-primary mt-2">Download Segment JSON</.button>
+        <.button class="btn btn-md btn-primary mt-2">Download Experiment JSON</.button>
+      </div>
     </div>
     """
   end

test/oli_web/live/delivery/student/learn_live_test.exs

@@ -166,7 +166,8 @@ defmodule OliWeb.Delivery.Student.ContentLiveTest do
     page_7_revision =
       insert(:revision,
         resource_type_id: ResourceType.get_id_by_type("page"),
-        title: "Page 7"
+        title: "Page 7",
+        duration_minutes: 12
       )
 
     page_8_revision =
@@ -307,7 +308,9 @@ defmodule OliWeb.Delivery.Student.ContentLiveTest do
         children: [module_1_revision.resource_id, module_2_revision.resource_id],
         title: "Introduction",
         poster_image: "some_image_url",
-        intro_video: "youtube.com/watch?v=123456789ab"
+        intro_video: "youtube.com/watch?v=123456789ab",
+        # this duration corresponds to the intro video
+        duration_minutes: 23
       })
 
     unit_2_revision =
@@ -813,6 +816,140 @@ defmodule OliWeb.Delivery.Student.ContentLiveTest do
              )
     end
 
+    test "can see card top label for intro videos, graded pages, practice pages and modules", %{
+      conn: conn,
+      section: section,
+      unit_1: unit_1,
+      page_7: practice_page,
+      page_8: graded_page,
+      module_1: module_1
+    } do
+      {:ok, view, _html} = live(conn, Utils.learn_live_path(section.slug))
+
+      assert has_element?(
+               view,
+               ~s{div[id="intro_card_#{unit_1.resource_id}"] span[role="card top label"]},
+               "INTRO"
+             )
+
+      assert has_element?(
+               view,
+               ~s{div[id="page_#{practice_page.resource_id}"] span[role="card top label"]},
+               "PAGE"
+             )
+
+      assert has_element?(
+               view,
+               ~s{div[id="page_#{graded_page.resource_id}"] span[role="card top label"]},
+               "PAGE"
+             )
+
+      assert has_element?(
+               view,
+               ~s{div[id="module_#{module_1.resource_id}"] span[role="card top label"]},
+               "MODULE 1"
+             )
+    end
+
+    test "can see not completed card badge for intro videos, graded pages, practice pages and modules",
+         %{
+           conn: conn,
+           section: section,
+           unit_1: unit_1,
+           page_7: practice_page,
+           page_8: graded_page,
+           module_1: module_1
+         } do
+      {:ok, view, _html} = live(conn, Utils.learn_live_path(section.slug))
+
+      assert has_element?(
+               view,
+               ~s{div[id="intro_card_#{unit_1.resource_id}"] div[role="card badge"]},
+               "23 min"
+             )
+
+      assert has_element?(
+               view,
+               ~s{div[id="page_#{practice_page.resource_id}"] div[role="card badge"]},
+               "12 min"
+             )
+
+      assert has_element?(
+               view,
+               ~s{div[id="page_#{graded_page.resource_id}"] div[role="card badge"]},
+               "? min"
+             )
+
+      assert has_element?(
+               view,
+               ~s{div[id="module_#{module_1.resource_id}"] div[role="card badge"]},
+               "2 pages · 25m"
+             )
+    end
+
+    test "can see completed card badge for intro videos, graded pages, practice pages and modules",
+         %{
+           conn: conn,
+           section: section,
+           user: user,
+           unit_1: unit_1,
+           page_1: page_1,
+           page_2: page_2,
+           page_7: practice_page,
+           page_8: graded_page,
+           module_1: module_1,
+           mcq_1: mcq_1,
+           project: project,
+           publication: publication
+         } do
+      # complete all pages
+      [page_1, page_2, practice_page, graded_page]
+      |> Enum.each(fn page ->
+        set_progress(section.id, page.resource_id, user.id, 1.0, page)
+
+        set_activity_attempt(
+          page,
+          mcq_1,
+          user,
+          section,
+          project.id,
+          publication.id,
+          "id_for_option_a",
+          true
+        )
+      end)
+
+      {:ok, view, _html} = live(conn, Utils.learn_live_path(section.slug))
+
+      # play unit 1 intro video
+      view
+      |> element(~s{div[id="intro_card_#{unit_1.resource_id}"]})
+      |> render_click()
+
+      # revisit the page since the video is mark as seen in an async way
+      {:ok, view, _html} = live(conn, Utils.learn_live_path(section.slug))
+
+      assert has_element?(
+               view,
+               ~s{div[id="intro_card_#{unit_1.resource_id}"] div[role="card badge"] div[role="check icon"]}
+             )
+
+      assert has_element?(
+               view,
+               ~s{div[id="page_#{practice_page.resource_id}"] div[role="card badge"] div[role="check icon"]}
+             )
+
+      assert has_element?(
+               view,
+               ~s{div[id="page_#{graded_page.resource_id}"] div[role="card badge"] div[role="check icon"]}
+             )
+
+      assert has_element?(
+               view,
+               ~s{div[id="module_#{module_1.resource_id}"] div[role="card badge"] div[role="check icon"]}
+             )
+    end
+
     test "can expand a module card to view its details (header with title and due date, intro content and page details)",
          %{
            conn: conn,
@@ -1406,16 +1543,14 @@ defmodule OliWeb.Delivery.Student.ContentLiveTest do
              |> render() =~ "style=\"width: 100%\""
     end
 
-    test "can see icon that identifies practice pages at level 2 of hierarchy (and can navigate to them)",
+    test "can navigate to pages at level 2 of hierarchy (rendered as cards)",
          %{
            conn: conn,
            section: section,
            page_7: page_7
          } do
       {:ok, view, _html} = live(conn, Utils.learn_live_path(section.slug))
 
-      assert has_element?(view, ~s{div[role="unit_3"] div[role="card_7"] div[role="page icon"]})
-
       # click on page 7 card to navigate to that page
       view
       |> element(~s{div[role="unit_3"] div[role="card_7"]})
@@ -1436,19 +1571,14 @@ defmodule OliWeb.Delivery.Student.ContentLiveTest do
       )
     end
 
-    test "can see icon that identifies graded pages at level 2 of hierarchy (and can navigate to them)",
+    test "can navigate to graded pages at level 2 of hierarchy (rendered as cards)",
          %{
            conn: conn,
            section: section,
            page_8: page_8
          } do
       {:ok, view, _html} = live(conn, Utils.learn_live_path(section.slug))
 
-      assert has_element?(
-               view,
-               ~s{div[role="unit_3"] div[role="card_8"] div[role="graded page icon"]}
-             )
-
       # click on page 8 card to navigate to that page
       view
       |> element(~s{div[role="unit_3"] div[role="card_8"]})
@@ -1469,13 +1599,12 @@ defmodule OliWeb.Delivery.Student.ContentLiveTest do
       )
     end
 
-    test "progress bar is not rendered when there is no progress",
+    test "progress bar is rendered EVEN when there is no progress",
          %{conn: conn, section: section} do
       {:ok, view, _html} = live(conn, Utils.learn_live_path(section.slug))
 
-      # no progress yet, so progress bar is not rendered
-      refute has_element?(view, ~s{div[role="unit_1"] div[role="card_1_progress"]})
-      refute has_element?(view, ~s{div[role="unit_3"] div[role="card_1_progress"]})
+      assert has_element?(view, ~s{div[role="unit_1"] div[role="card 1 progress"]})
+      assert has_element?(view, ~s{div[role="unit_3"] div[role="card 8 progress"]})
     end
 
     test "can see card progress bar for modules at level 2 of hierarchy, and even for pages at level 2",

test/oli_web/live/experiments_live_test.exs

@@ -157,6 +157,15 @@ defmodule OliWeb.ExperimentsLiveTest do
       |> step(:test_has_button_show_delete_option_2_modal, :refute)
       |> step(:test_has_new_option_link, :refute)
     end
+
+    test "hide/show download buttons when checkbox is checked/unchecked", %{view: view} do
+      {view, %{}}
+      |> step(:test_has_button_download_segment_json, :refute)
+      |> step(:test_has_button_download_experiment_json, :refute)
+      |> step(:click_on_checkbox)
+      |> step(:test_has_button_download_segment_json)
+      |> step(:test_has_button_download_experiment_json)
+    end
   end
 
   defp evaluate_assertion(to_evaluate, assert_or_refute) do
@@ -168,6 +177,30 @@ defmodule OliWeb.ExperimentsLiveTest do
 
   defp step(_view_and_ctx, _operation, assert_or_refute \\ :assert)
 
+  defp step({view, ctx}, :test_has_button_download_experiment_json, assert_or_refute) do
+    to_evaluate =
+      view
+      |> render()
+      |> Floki.find("button:fl-contains('Download Experiment JSON')")
+      |> Floki.text() =~ "Download Experiment JSON"
+
+    evaluate_assertion(to_evaluate, assert_or_refute)
+
+    {view, ctx}
+  end
+
+  defp step({view, ctx}, :test_has_button_download_segment_json, assert_or_refute) do
+    to_evaluate =
+      view
+      |> render()
+      |> Floki.find("button:fl-contains('Download Segment JSON')")
+      |> Floki.text() =~ "Download Segment JSON"
+
+    evaluate_assertion(to_evaluate, assert_or_refute)
+
+    {view, ctx}
+  end
+
   defp step({view, ctx}, :test_has_alternatives_group, assert_or_refute) do
     to_evaluate = has_element?(view, ".alternatives-group", "Decision Point")
     evaluate_assertion(to_evaluate, assert_or_refute)