Skip to content

Enable/disable submit button on checkbox click#13957

Merged
zwarm merged 2 commits intodevelopfrom
issue/disable-submit-on-nothing-checked
Feb 4, 2021
Merged

Enable/disable submit button on checkbox click#13957
zwarm merged 2 commits intodevelopfrom
issue/disable-submit-on-nothing-checked

Conversation

@zwarm
Copy link
Copy Markdown
Contributor

@zwarm zwarm commented Feb 3, 2021

Parent #13328 & 13329

This PR addresses the following comment
"On unchecking all checkbox items on the "Details" screen, we might want to disable action button."
By ..

  1. Disabling the details action button when no items are selected
  2. Enabling the action button when at least 1 checkbox is selected

This behavior now mimics Calypso.

To Test

  • Launch the app
  • Ensure BackupDownload and Restore feature flags are enabled

  • Navigate to ActivityLog
  • Tap More menu on an item
  • Select "Download backup" option
  • On the details view, uncheck all the checkboxes
  • The "Create downloadable file" button should toggle to disabled
  • Check a checkbox
  • The "Create downloadable file" button should toggle to enabled

  • Navigate to ActivityLog
  • Tap More menu on an item
  • Select "restore to this point" option
  • On the details view, uncheck all the checkboxes
  • The "Restore Site" button should toggle to disabled
  • Check a checkbox
  • The "Restore Site" button should toggle to enabled

PR submission checklist:

  • I have considered adding unit tests where possible.
  • 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.

@zwarm zwarm added this to the 16.7 milestone Feb 3, 2021
@zwarm zwarm requested review from a team and malinajirka and removed request for a team February 3, 2021 22:16
@peril-wordpress-mobile
Copy link
Copy Markdown

peril-wordpress-mobile bot commented Feb 3, 2021

You can trigger optional UI/connected tests for these changes by visiting CircleCI here.

@peril-wordpress-mobile
Copy link
Copy Markdown

peril-wordpress-mobile bot commented Feb 3, 2021

You can test the changes on this Pull Request by downloading the APK here.

@malinajirka malinajirka self-assigned this Feb 4, 2021
Copy link
Copy Markdown
Contributor

@malinajirka malinajirka left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @zwarm! I've tested the app and it works as expected. I've left some suggestions, but they are not blocking this PR.

P.S. The changes are not unit tested - I know that the whole class is not unit tested yet, but adding at least tests for the introduced logic might be worth it. Wdyt?

}
}
_uiState.postValue(details.copy(items = updatedList))
_uiState.value?.let {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Idea: We might want to consider using (_uiState.value as? DetailsState)?.let {...} instead of force casting the state in _uiState.postValue((it as DetailsState).copy(items = updatedItems)). Wdyt?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed in 14d3a34

uiState: BackupDownloadUiState,
itemType: JetpackAvailableItemType
): List<JetpackListItemState> {
var checkedCount = 0
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 This code took me a while to understand. We might want to consider separating the "change state" logic and "count" logic. Perhaps something like this might work:

        val updateListItems = uiState.items.map { state ->
                if (state is CheckboxState && state.availableItemType == itemType) {
                    state.copy(checked = !state.checked)
                } else {
                    state
                }
        }
        val atLeastOneChecked = updateListItems.filterIsInstance<CheckboxState>().find { it.checked } != null
        return updateDetailsActionButtonState(updateListItems, enableActionButton = atLeastOneChecked)

Wdyt?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice upgrade. In commit 14d3a34

enableActionButton: Boolean
): List<JetpackListItemState> {
return details.map { state ->
if (state.type == PRIMARY_ACTION_BUTTON) {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❓ Is this equivalent to if (state is ActionButtonState && !state.isSecondary) ? If it is, I think it might be safer to use this approach, wdyt? ( or could we perhaps drop the "isSecondary" check completely?)

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if (state is ActionButtonState) is sufficient ... in this case I can be opinionated because there is only 1 button on the details view. Updated in 14d3a34

Copy link
Copy Markdown
Contributor Author

@zwarm zwarm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P.S. The changes are not unit tested - I know that the whole class is not unit tested yet, but adding at least tests for the introduced logic might be worth it. Wdyt?

Yes, unit testing is going to be my focus today ... with the builders at the top of the list.
@malinajirka Thanks for the review. :)

@zwarm zwarm merged commit 216024e into develop Feb 4, 2021
@zwarm zwarm deleted the issue/disable-submit-on-nothing-checked branch February 4, 2021 14:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants