Dashboard Cards: Display 3 latest pages card #18337

AjeshRPai · 2023-04-28T11:37:27Z

Related Issue

Closes #18212

Description

This PR adds support for showing the Pages item in pages card.

Explanation of Changes

⊕ Adds the UI for pages item in Pages card in Light and Dark mode
⊕ The logic for showing the status icon and text according to the page status
⊕ The logic for showing Last modified or Scheduled time in pages card according to status
⊕ Adds unit tests in PagesCardBuilderTest.kt
⊘ Does not implement the click listener for the page items - will be taken up in a separate PR
⊘ Does not implement any tracking logic

📷 Screenshots

Pages card

Light Mode	Dark Mode

Scheduled relative time

👁️ Note the relative time in Scheduled Page item in Card

In Minutes	In Hours	In Days	In more than a week

Test

Prerequisite

◐ Toggle the dashboard_card_pages flag

Go to Me → App Settings → Debug settings
Scroll to the Features in development section
Tap on the item corresponding to the flag
Tap RESTART THE APP button

Card UI is as expected in the Project spec and Designs

Project spec - pe7hp4-gi-p2
Design p2 - pcdRpT-2bP-p2
Design ref Figma - YSMw2nbFAgPpjZLLbYvTfT-fi-310_3783

Go to app → Dashboard
✅ Verify that the Pages are shown with the correct title
- Long titles are truncated
- If no title is present for a page, then Untitiled is shown
✅ Verify that the correct icon and text are shown for the Page status
- Published, Draft and Scheduled
✅ Verify that the correct time is shown next to the status icon and text
- For Published and Draft page → the last modified time is shown
  - Modified date is Less than an hour → N minutes ago
  - Modified date is Less than a day but more than an hour → N Hours ago
  - Modified date is Less than a week → N Days ago
  - Modified date is More than 1 week → Date is shown
- For Scheduled Page → the relative Scheduled time is shown
  - Scheduled date is in Less than an hour → In N minutes
  - Scheduled date is Less than a day but more than an hour → In N hours
  - Scheduled date is Less than a week → In N Days
  - Scheduled date is More than 1 week → Date is shown

💡 Note: To test the relative time, modify or schedule a page and go to Settings on device and change the device time.

Verify the Unit tests

Code review the unit tests in PagesCardBuilderTest.kt pass, sufficient and doesn't miss any scenario

Regression Notes

Potential unintended areas of impact
Pages card is not shown as expected
What I did to test those areas of impact (or what existing automated tests I relied on)
Manual testing and Unit tests
What automated tests I added (or what prevented me from doing so)
N/A

PR submission checklist:

I have completed the Regression Notes.
I have considered adding accessibility improvements for my changes.
I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

UI Changes testing checklist:

Portrait and landscape orientations.
Light and dark modes.
Fonts: Larger, smaller and bold text.
High contrast.
Talkback.
Languages with large words or with letters/accents not frequently used in English.
Right-to-left languages. (Even if translation isn’t complete, formatting should still respect the right-to-left layout)
Large and small screen sizes. (Tablet and smaller phones)
Multi-tasking: Split screen and Pop-up view. (Android 10 or higher)

+ Adds: the logic to get the status text + Adds: the string resources for status text in pages card

+ Adds: the logic to get the status icon + Adds: the drawable resources for status icon in pages card * Refactors: the status icon to be nullable in case status is not identified

Updates: the status icon and text mapping of the pages card item with correct PagesCardContentType.kt

Updates: the logic of building the create page card with mapped page items instead of api response Updates: the params of create page card with footer click function instead of the entire params

Updates: the logic of creating the pages items from api response by filtering the supported status in pages card

wpmobilebot · 2023-04-28T11:53:05Z

📲 You can test the changes from this Pull Request in Jetpack by scanning the QR code below to install the corresponding build.

	App Name	Jetpack
	Flavor	Jalapeno
	Build Type	Debug
	Version	pr18337-ffbe3fe
	Commit	`ffbe3fe`
	Direct Download	`jetpack-prototype-build-pr18337-ffbe3fe.apk`

Note: Google Login is not supported on these builds.

wpmobilebot · 2023-04-28T11:53:36Z

📲 You can test the changes from this Pull Request in WordPress by scanning the QR code below to install the corresponding build.

	App Name	WordPress
	Flavor	Jalapeno
	Build Type	Debug
	Version	pr18337-ffbe3fe
	Commit	`ffbe3fe`
	Direct Download	`wordpress-prototype-build-pr18337-ffbe3fe.apk`

Note: Google Login is not supported on these builds.

Adds: the logic for getting the last edited or scheduled time using date or modified time depending on status Adds: the logic in PagesItemViewHolder to show the data

* Makes test statement shorter to fix lint errors + Adds mock for date time utils wrapper dependancy

zwarm · 2023-04-30T12:56:49Z

...ress/src/main/java/org/wordpress/android/ui/mysite/cards/dashboard/pages/PagesCardBuilder.kt

        }
    }

-    private fun createNewPageCardWithAddPageMessage(params: PagesCardBuilderParams): CreatNewPageItem {
+    private fun createNewPageCardWithAddPageMessage(onFooterLinkClick: () -> Unit): CreatNewPageItem {
        return CreatNewPageItem(
            label = UiString.UiStringRes(R.string.dashboard_pages_card_no_pages_create_page_button),


(early np - since this is a draft) but you could statically import the namespace and drop the UiString prefix.

Nice, Thanks. Done in 574b12e

zwarm · 2023-04-30T13:00:13Z

WordPress/src/main/res/layout/pages_item.xml

+        tools:text="@string/dashboard_card_page_item_status_published"
+        android:drawablePadding="@dimen/margin_medium"
+        app:layout_constraintStart_toStartOf="parent"
+        android:paddingStart="10dp"


np (again, a bit early) - just a reminder to use android:paddingHorizontal and android:paddingVertical. :)

Yup, Thanks for point it out. Done in b4269b0

zwarm · 2023-04-30T13:00:44Z

...ress/src/main/java/org/wordpress/android/ui/mysite/cards/dashboard/pages/PagesCardBuilder.kt

    }

-    private fun getCreatePageCard(params: PagesCardBuilderParams): CreatNewPageItem {
+    private fun getCreatePageCard(pages: List<PageContentItem>, onFooterLinkClick: () -> Unit): CreatNewPageItem {


Nice refactor ❤️

+ Adds: the logic to return relative time span for future dates in DateTimeUtilsWrapper.kt

- Removes: redundant UiString in all the usages

+ Adds: test for scheduled and published page relative time shown

* Updates: test statements by moving the common mock to setUpMocks function * Updates: Models used in tests with status identifier

- Removes: redundant MySiteCardAndItemBuilderParams in all the usages

- Removes: PagesCardBuilderParams in tests with helper function * Updates: the test statement to invoke BuilderParams generator function to only build with relevant model(Scheduled/Published/Drafts) instead of all the models

+ Adds: the list divider element to the xml for pages item in card * Updates: the padding attributes and margin attributes with paddingHorizontal, paddingVertical and marginHorizontal

* Implements: the light/dark text color for status and last modified text * Updates: the status icon color on light and dark mode

Adds: dimension values for pages item components Replaces: the hardcoded references with values from dimens.xml

zwarm

@AjeshRPai - All works as expected. Dark/light mode, dates + relative time (future and past). 👍

Once CI finishes I am going to merge. @osullivanchris - any UI issues you may find will be addressed in a separate PR - we want to keep development moving along. Thanks for understanding.

zwarm · 2023-05-01T15:23:16Z

WordPress/src/main/java/org/wordpress/android/util/DateTimeUtilsWrapper.kt

+    * Use getRelativeTimeSpanString function if the date is in the future.
+    * Time spans in future are formatted like "In 42 minutes | In 2 days".
+    * */
+    fun getRelativeTimeSpanString(date: Date): String {


osullivanchris · 2023-05-02T12:48:28Z

@zwarm @AjeshRPai this looks great 👍 3 small details (which are fine for another PR as mentioned)

The background for the label (draft/scheduled/published) seems to be using the color from the iOS design rather than the Android design. For Android I tried to use something existing, and took it from the Reader tags.
The text color of the secondary text (in 2 hours etc) isn't the same as the other cards. I think again it has grabbed a value from the iOS design. Can we use the same text color as the other cards (e.g. posts).
This one is per design, but think we should tweak it. The rows are optically off centre vertically. Could we move everything up by 2dp while keeping the row height? Might mean reducing top padding by 2dp, adding bottom padding by 2dp, or similar

AjeshRPai · 2023-05-02T12:55:51Z

Hey @osullivanchris

I will implement these changes in a separate PR by tomorrow. I have added the improvements you mentioned in this issue.

cc: @zwarm

AjeshRPai added 11 commits April 28, 2023 11:44

Adds: style for pages item title in pages card

79d8891

+ Adds:the logic to get the status text for pages item

bf0bfae

+ Adds: the logic to get the status text + Adds: the string resources for status text in pages card

+ Adds:the logic to get the status icon for pages item

2150760

+ Adds: the logic to get the status icon + Adds: the drawable resources for status icon in pages card * Refactors: the status icon to be nullable in case status is not identified

Fixes: the string value of PagesCardContentType

a5ee320

* Updates: the status mapping card builder

f067c12

Updates: the status icon and text mapping of the pages card item with correct PagesCardContentType.kt

Adds: test for published status check

da3a02a

+ Adds: test for page status - draft and scheduled

6138662

* Updates: the logic of building the create Page card

d25f87d

Updates: the logic of building the create page card with mapped page items instead of api response Updates: the params of create page card with footer click function instead of the entire params

Updates: the logic of mapping the pages items

225bed9

Updates: the logic of creating the pages items from api response by filtering the supported status in pages card

[WIP] Adds: logic for setting the status icon and text

7a53f65

Updates: function statement for readability

a176707

AjeshRPai added [Status] Not Ready for Review [Type] Task labels Apr 28, 2023

AjeshRPai added this to the 22.4 milestone Apr 28, 2023

AjeshRPai self-assigned this Apr 28, 2023

AjeshRPai changed the title ~~Display 3 latest pages card~~ Dashboard Cards: Display 3 latest pages card Apr 28, 2023

AjeshRPai added the My Site Dashboard label Apr 29, 2023

AjeshRPai added 6 commits April 30, 2023 00:21

Updates: text style for status and updates color of published icon

fae312a

Adds: text view for last edited time or scheduled time

1a6621c

Adds: long title in preview to check how long title behave

9d469bf

[WIP] + Adds: the logic for showing the last edited or scheduled time

e7bc21e

Adds: the logic for getting the last edited or scheduled time using date or modified time depending on status Adds: the logic in PagesItemViewHolder to show the data

+ Adds: Missing dependency for builder in test class

8702d9f

* Makes test statement shorter to fix lint errors + Adds mock for date time utils wrapper dependancy

* Updates: getLastEditedOrScheduledTime fun to make it readable

b4a3d6c

zwarm reviewed Apr 30, 2023

View reviewed changes

AjeshRPai added 2 commits May 1, 2023 10:48

+ Adds: UI string import statically for readability

574b12e

+ Adds: the logic to show scheduled date in relative time span

b3aaeea

+ Adds: the logic to return relative time span for future dates in DateTimeUtilsWrapper.kt

AjeshRPai added 11 commits May 1, 2023 11:51

- Removes: Unneeded UiString from the statement and import

6c04275

+ Adds: UI string import statically for readability

daf67c8

- Removes: redundant UiString in all the usages

+ Adds: test for relative time shown on card

45449c1

+ Adds: test for scheduled and published page relative time shown

* Updates: statements and models used in test class

6e648d5

* Updates: test statements by moving the common mock to setUpMocks function * Updates: Models used in tests with status identifier

+ Adds: PagesCardBuilderParams import statically for readability

ff7e61f

- Removes: redundant MySiteCardAndItemBuilderParams in all the usages

*[WIP] Updates: the xml for Pages item in pages card

b4269b0

+ Adds: the list divider element to the xml for pages item in card * Updates: the padding attributes and margin attributes with paddingHorizontal, paddingVertical and marginHorizontal

* Updates: the naming of icon resources used to show status of page

61b94fd

* Implements: the background for page status text view in light/dark

da70b14

* Implements: the colors for pages card components in light/dark

51dd6dd

* Implements: the light/dark text color for status and last modified text * Updates: the status icon color on light and dark mode

^ Replaces: hardcoded dimensions in pages_item with values from dimens

1113efc

Adds: dimension values for pages item components Replaces: the hardcoded references with values from dimens.xml

AjeshRPai added the [Status] Needs Design Review A designer needs to sign off on the implemented design. label May 1, 2023

AjeshRPai marked this pull request as ready for review May 1, 2023 12:02

AjeshRPai requested review from zwarm and osullivanchris May 1, 2023 12:02

AjeshRPai removed the [Status] Not Ready for Review label May 1, 2023

AjeshRPai and others added 2 commits May 1, 2023 17:46

* Fixes: Relative time not shown in minutes

2d7358c

Refactor: reduce the length of the data path

ffbe3fe

zwarm approved these changes May 1, 2023

View reviewed changes

zwarm removed the [Status] Needs Design Review A designer needs to sign off on the implemented design. label May 1, 2023

zwarm merged commit 5b9dc0a into trunk May 1, 2023

zwarm deleted the issue/18212-display-3-latest-pages-in-card branch May 1, 2023 17:49

AjeshRPai mentioned this pull request May 3, 2023

Dashboard Cards: Pages UI Tweaks #18359

Merged

12 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dashboard Cards: Display 3 latest pages card #18337

Dashboard Cards: Display 3 latest pages card #18337

AjeshRPai commented Apr 28, 2023 •

edited

Loading

wpmobilebot commented Apr 28, 2023 •

edited

Loading

wpmobilebot commented Apr 28, 2023 •

edited

Loading

zwarm Apr 30, 2023

AjeshRPai May 1, 2023

zwarm Apr 30, 2023

AjeshRPai May 1, 2023

zwarm Apr 30, 2023

zwarm left a comment

zwarm May 1, 2023

osullivanchris commented May 2, 2023

AjeshRPai commented May 2, 2023

Dashboard Cards: Display 3 latest pages card #18337

Dashboard Cards: Display 3 latest pages card #18337

Conversation

AjeshRPai commented Apr 28, 2023 • edited Loading

Related Issue

Description

Explanation of Changes

📷 Screenshots

Pages card

Scheduled relative time

Test

Prerequisite

Card UI is as expected in the Project spec and Designs

Verify the Unit tests

Regression Notes

wpmobilebot commented Apr 28, 2023 • edited Loading

wpmobilebot commented Apr 28, 2023 • edited Loading

zwarm Apr 30, 2023

Choose a reason for hiding this comment

AjeshRPai May 1, 2023

Choose a reason for hiding this comment

zwarm Apr 30, 2023

Choose a reason for hiding this comment

AjeshRPai May 1, 2023

Choose a reason for hiding this comment

zwarm Apr 30, 2023

Choose a reason for hiding this comment

zwarm left a comment

Choose a reason for hiding this comment

zwarm May 1, 2023

Choose a reason for hiding this comment

osullivanchris commented May 2, 2023

AjeshRPai commented May 2, 2023

AjeshRPai commented Apr 28, 2023 •

edited

Loading

wpmobilebot commented Apr 28, 2023 •

edited

Loading

wpmobilebot commented Apr 28, 2023 •

edited

Loading