feat: [FC-0047] Improved Dashboard Level Navigation

[IvanStepanok]

Quick Preview

Screen.Recording.2024-05-10.at.16.18.16.mov

Drop down menu

They are enabled automatically when "Programs" is enabled in the configuration file.

Screen.Recording.2024-05-10.at.17.16.22.mov

Empty State

Horizontal Position

Screen.Recording.2024-05-10.at.16.47.06.mov

Feature enabled by default.

🚨 You should use key:

DASHBOARD:
       TYPE: "list"

to enable a list style Dashboard (old style)

API

Since the new APIs are not available in the master branch, please use the sandbox:

API_HOST_URL: 'https://axim-mobile.raccoongang.net'
OAUTH_CLIENT_ID: 'zP3vPz00c8fTRpYjNbVSlA1fxt9LnCxTM4JK1KQ0'

[openedx-webhooks]

Thanks for the pull request, @IvanStepanok! Please note that it may take us up to several weeks or months to complete a review and merge your PR.

Feel free to add as much of the following information to the ticket as you can:

• supporting documentation
• Open edX discussion forum threads
• timeline information ("this must be merged by XX date", and why that is)
• partner information ("this is a course on edx.org")
• any other information that can help Product understand the context for the PR

All technical communication about the code itself will be done via the GitHub pull request interface. As a reminder, our process documentation is here.

Please let us know once your PR is ready for our review and all tests are green.

[sdaitzman]

Hi @IvanStepanok, thanks for these changes. They look really good overall. I've noted all the minor visual issues I could find below. This is a huge usability/experience win regardless of these issues, so if any are difficult to resolve, most of them could be saved for a future cleanup.

iOS:

1. In light and dark mode, the Resume course quick action doesn’t need a border separating it from the other actions. Generally, the quick actions only need a separating border when they’re the same color and would otherwise be difficult to distinguish.
2. In dark mode, I think the View All Courses card may be a bit too dark/difficult to distinguish from the background. It should use the half dark color: Figma Link
3. In the All Courses view in light mode, the filter options currently use a light gray border color, and keep that border color when selected. They should use the accent color as their border, and have no border when selected.
4. Similarly, in dark mode, course filter options should have no border and should just change their background from Half Dark to Accent when selected.
5. When the Programs/Courses dropdown switcher is tapped, the dropdown icon should animate if possible (either fade or morph from one version to the other)

Android:

1. In the primary course card, the title should cut off with an ellipse at three lines
2. Some of the other iOS minor visual issues identified above may also apply, but I couldn’t see them in the video to be sure (e.g. the View All Courses card in dark mode)
3. When the Programs/Courses dropdown switcher is tapped, the dropdown icon should switch to its upside-down version, and animate if possible (either fade or morph from one version to the other)

Both iOS and Android:

1. Copy edits: “2 Past Due Assignment” should be “2 Past Due Assignments.”
2. The account settings gear in the top right should switch to the updated icon (this change is intended to make it clear on all dashboard-level tabs that the account settings icon is not a settings control for the specific feature on that tab, based on input from the Open edX Mobile Design Weekly group): Figma link
3. Selected dashboard-level tabs in dark mode should switch over to using the Dark Theme Accent Text color (#879FF5), not Accent, for adequate text/icon contrast (this could fall under a future cleanup)
4. Currently, the deep-link from some quick actions like upcoming assignments/resume course jump to the course home, pause a brief moment, then navigate into the content. If possible, it would be better to navigate directly to the content loading screen.

[IvanStepanok]

Hi @sdaitzman, and thanks for paying attention to the details! I appreciate it🙌

✅ 1. In light and dark mode, the Resume course quick action doesn’t need a border separating it from the other actions.
✅ 2. In dark mode, I think the View All Courses card may be a bit too dark/difficult to distinguish from the background.
✅ (2) The account settings gear in the top right should switch to the updated icon

✅ 3. In the All Courses view in light mode, the filter options currently use a light gray border color, and keep that border color when selected.
✅ 4. Similarly, in dark mode, course filter options should have no border and should just change their background from Half Dark to Accent when selected.

✅ 5. When the Programs/Courses dropdown switcher is tapped, the dropdown icon should animate

Simulator.Screen.Recording.-.iPhone.15.-.2024-05-13.at.23.55.13.mp4

⛔️(3) Selected dashboard-level tabs in dark mode should switch over to using the Dark Theme Accent Text color
Changing the AccentColor can affect other parts of the application. I think it will be better to make these changes in another round.
⛔️ (4) Currently, the deep-link from some quick actions like upcoming assignments/resume course jump to the course home.
In these cases, we need to preload the course structure to move forward. We can't skip this step:(

[sdaitzman]

Hey @IvanStepanok, thanks so much for these updates! This looks all good to me now, and we can hold (3) and (4) for future improvements

[moiz994]

referring to point 5 here.

@sdaitzman shouldn't the Course/Program switcher be animated in the reverse order?
It should be pointing down by default which indicates a dropdown and should be pointing up once opened?

[sdaitzman]

@moiz994 great catch, thank you! Yes, the Course/Program switcher dropdown icon should be flipped.

CC @IvanStepanok

[IvanStepanok]

@sdaitzman @moiz994
Done 🙌

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-05-15.at.12.05.04.mp4

[rnr]

@IvanStepanok Maybe we want to scroll through the menu a bit when opening via the "View Assignments" button to see the currently selected item?
@sdaitzman @moiz994 wdyt?

[rnr]

@sdaitzman @moiz994 @IvanStepanok Just a question - should these options be available for offline (if we know it won't load offline anyway)?

Screen.Recording.2024-05-15.at.17.54.41.mov

[sdaitzman]

@rnr thanks for checking about these options.

For the first question: yes, I think it makes sense to scroll the course header navigation to the active tab when jumping there.

For the second question, I think it depends on the plan for implementing offline course storage improvements. If those views are accessible offline in the future, the shortcuts to them should be as well.

I would lean slightly towards keeping the quick actions for now and showing a message like the "Slow or no internet connection" message that appears on the bottom of course home in that video until the content is available offline in the future. I'm curious what others think about this question though— can bring it up next mobile design weekly call if that would be helpful.

[saeedbashir]

Let’s move forward with this PR so we can continue developing the related features.

@volodymyr-chekyrta The PR isn't block because of this issue/requirements, I just needed documentation of this so that QA can update the test document.

[volodymyr-chekyrta]

Let’s move forward with this PR so we can continue developing the related features.

@volodymyr-chekyrta The PR isn't block because of this issue/requirements, I just needed documentation of this so that QA can update the test document.

I'll provide it asap

[saeedbashir]

@IvanStepanok I'm not sure why but the program webview is not loading with course dashboard view. I've used the v3 of enrollments so the enrollments screen is not loading (any how this can happen anytime).

I know programs are not available on your intances, what you can do is you can use any dummy URL for programs, e.g www.courses.edx.org and make sure it will display under the programs menu. Even the empty course screen is not hidden when switching to the program view.

Another issue is, when I use pull to refresh the programs view, it calls the enrollments API instead of reloading the programs webview. The program's webview is working fine in list view.

Screen.Recording.2024-05-24.at.10.38.29.PM.mov

[sdaitzman]

@IvanStepanok @volodymyr-chekyrta Is it documented that how a course will be moved to the primary course? I'm trying to figure it out but I'm not getting the logic. I tried by going through a course that isn't a primary course, and I've completed multiple components of that course, but still, the course wasn't moved to the primary course.
Sometimes the same approach works, and sometimes it doesn't.

@sdaitzman Is it possible for you to share details of the story https://youtrack.raccoongang.com/issue/AXM-506. I'm going through the content of a non-primary course and the completion API has been calling for multiple components, but still, I'm getting the old primary course in the enrollments.

cc @KyryloKireiev

Hi @saeedbashir, unfortunately I can't access that youtrack link. I think the intended design is that the most recent course where a user has completed blocks is highlighted in the primary course card on their dashboard.

[volodymyr-chekyrta]

Let’s move forward with this PR so we can continue developing the related features.

@volodymyr-chekyrta The PR isn't block because of this issue/requirements, I just needed documentation of this so that QA can update the test document.

@saeedbashir, please find the feature documentation below

Dashboard Level Navigation: Primary course
This feature allows the mobile application to display user course enrollments, prioritizing the most relevant course information.
The application shows a primary course card, secondary course cards, and provides an option to view all courses.
This feature ensures users can easily access and manage their current course progress.

User Story
As a user of the mobile application,
I want to see my most relevant course enrollment details prioritized,
so that I can quickly access and manage my current course progress efficiently.

Acceptance Criteria:

1. Empty State:
   • When I have no course enrollments, the screen should show an empty state, indicating that there are no courses to display.
2. Primary and Secondary Cards:
   • When I open the Learn screen, I should see a Primary card, a Secondary card (if applicable), and a “View All” button for easy navigation.
3. Primary Card Information:
   • The Primary card should display the following information to help me quickly understand my current course status:
   • Organization name
   • Course title
   • Course date
   • Information about any past due assignments
   • Details of the next due assignment
4. Secondary Card Restrictions:
   • If any course has access issues, I should see a lock icon indicating restricted access.
5. Navigation to All Courses:
   • By clicking the “View All” button, I should be redirected to the All Courses screen where I can see a list of all my courses with filters(categories All courses | In progress | Completed | Expired) and a search button.
6. All Courses Page Details:
   • On the All Courses page, each course entry should display:
   • My progress in the course
   • The course date
   • The course title
   • A lock icon if there are any access restrictions
7. Offline Access:
   • I should be able to access the screen with the primary course information even when I am offline, ensuring continuity in tracking my course progress.

[saeedbashir]

7. Offline Access:
• I should be able to access the screen with the primary course information even when I am offline, ensuring continuity in tracking my course progress.

@volodymyr-chekyrta Is offline support also part of this PR. I'm asking this because it's not working.

[volodymyr-chekyrta]

7. Offline Access:
   • I should be able to access the screen with the primary course information even when I am offline, ensuring continuity in tracking my course progress.

@volodymyr-chekyrta Is offline support also part of this PR. I'm asking this because it's not working.

@saeedbashir, Yes, according to the documentation, the primary course screen should be cached.

@IvanStepanok could you double-check what happened with caching?

[IvanStepanok]

@saeedbashir, @volodymyr-chekyrta,

I've made changes to handle the offline access issue by ensuring that the CoreData model is updated correctly. The main changes include:

Clearing Old Data: Before saving new enrollments, all existing data in the CoreData model is deleted. This approach avoids potential migration issues and ensures data consistency.
Saving New Data: The new data is then saved into CoreData.
These changes should help in caching the primary course screen correctly, allowing access to the course information even when offline.

It's worth considering applying a similar approach to other parts of the project that interact with CoreData to ensure overall data consistency and integrity. We should review the rest of the project to identify and address any similar issues.

[saeedbashir]

@IvanStepanok Great! the offline mode is now working. Now the last item remaining in this PR is #434 (comment) after that we will be good to merge this PR.

[IvanStepanok]

@IvanStepanok I'm not sure why but the program webview is not loading with course dashboard view. I've used the v3 of enrollments so the enrollments screen is not loading (any how this can happen anytime).

I know programs are not available on your intances, what you can do is you can use any dummy URL for programs, e.g www.courses.edx.org and make sure it will display under the programs menu. Even the empty course screen is not hidden when switching to the program view.

Another issue is, when I use pull to refresh the programs view, it calls the enrollments API instead of reloading the programs webview. The program's webview is working fine in list view.

Screen.Recording.2024-05-24.at.10.38.29.PM.mov

As an example, I try to add a base URL for Programs. They run the redirect flow, but if we comment out the block about redirecting, the programs view loads fine. Please check it on your side.🙌

[saeedbashir]

@IvanStepanok I tried to capture the behaviour in the following screen recording for both case (new user with no enrollments and a user with enrollments). Please have a look, and if something isn't clear, we can connect on Slack.

screen_recording.mov

[saeedbashir]

LGTM 👍

[openedx-webhooks]

@IvanStepanok 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future.