Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add toggle button for split tunneling #5554

Closed
wants to merge 2 commits into from
Closed

Add toggle button for split tunneling #5554

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8e9b221
Add test for split tunneling view model and update the other tests
MaryamShaghaghi Dec 6, 2023
a5aa6fb
Add toggle button for split tunneling
MaryamShaghaghi Dec 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 37 additions & 21 deletions .../src/androidTest/kotlin/net/mullvad/mullvadvpn/compose/screen/SplitTunnelingScreenTest.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import io.mockk.verify
import net.mullvad.mullvadvpn.applist.AppData
import net.mullvad.mullvadvpn.applist.ApplicationsIconManager
import net.mullvad.mullvadvpn.compose.setContentWithTheme
import net.mullvad.mullvadvpn.compose.state.AppListState
import net.mullvad.mullvadvpn.compose.state.SplitTunnelingUiState
import org.junit.After
import org.junit.Before
Expand Down Expand Up @@ -49,7 +50,7 @@ class SplitTunnelingScreenTest {
fun testLoadingState() {
// Arrange
composeTestRule.setContentWithTheme {
SplitTunnelingScreen(uiState = SplitTunnelingUiState.Loading)
SplitTunnelingScreen(uiState = SplitTunnelingUiState())
}

// Assert
Expand All @@ -72,10 +73,13 @@ class SplitTunnelingScreenTest {
composeTestRule.setContentWithTheme {
SplitTunnelingScreen(
uiState =
SplitTunnelingUiState.ShowAppList(
excludedApps = listOf(excludedApp),
includedApps = listOf(includedApp),
showSystemApps = false
SplitTunnelingUiState(
appListState =
AppListState.ShowAppList(
excludedApps = listOf(excludedApp),
includedApps = listOf(includedApp),
showSystemApps = false
)
)
)
}
Expand All @@ -100,10 +104,13 @@ class SplitTunnelingScreenTest {
composeTestRule.setContentWithTheme {
SplitTunnelingScreen(
uiState =
SplitTunnelingUiState.ShowAppList(
excludedApps = emptyList(),
includedApps = listOf(includedApp),
showSystemApps = false
SplitTunnelingUiState(
appListState =
AppListState.ShowAppList(
excludedApps = emptyList(),
includedApps = listOf(includedApp),
showSystemApps = false
)
)
)
}
Expand Down Expand Up @@ -131,10 +138,13 @@ class SplitTunnelingScreenTest {
composeTestRule.setContentWithTheme {
SplitTunnelingScreen(
uiState =
SplitTunnelingUiState.ShowAppList(
excludedApps = listOf(excludedApp),
includedApps = listOf(includedApp),
showSystemApps = false
SplitTunnelingUiState(
appListState =
AppListState.ShowAppList(
excludedApps = listOf(excludedApp),
includedApps = listOf(includedApp),
showSystemApps = false
)
),
onExcludeAppClick = mockedClickHandler
)
Expand All @@ -158,10 +168,13 @@ class SplitTunnelingScreenTest {
composeTestRule.setContentWithTheme {
SplitTunnelingScreen(
uiState =
SplitTunnelingUiState.ShowAppList(
excludedApps = listOf(excludedApp),
includedApps = listOf(includedApp),
showSystemApps = false
SplitTunnelingUiState(
appListState =
AppListState.ShowAppList(
excludedApps = listOf(excludedApp),
includedApps = listOf(includedApp),
showSystemApps = false
)
),
onIncludeAppClick = mockedClickHandler
)
Expand All @@ -185,10 +198,13 @@ class SplitTunnelingScreenTest {
composeTestRule.setContentWithTheme {
SplitTunnelingScreen(
uiState =
SplitTunnelingUiState.ShowAppList(
excludedApps = listOf(excludedApp),
includedApps = listOf(includedApp),
showSystemApps = false
SplitTunnelingUiState(
appListState =
AppListState.ShowAppList(
excludedApps = listOf(excludedApp),
includedApps = listOf(includedApp),
showSystemApps = false
)
),
onShowSystemAppsClick = mockedClickHandler
)
Expand Down
39 changes: 39 additions & 0 deletions android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scaffolding.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,45 @@ fun ScaffoldWithMediumTopBar(
)
}

@Composable
@OptIn(ExperimentalMaterial3Api::class)
fun ScaffoldWithLargeTopBarAndToggleButton(
appBarTitle: String,
modifier: Modifier = Modifier,
navigationIcon: @Composable () -> Unit = {},
actions: @Composable RowScope.() -> Unit = {},
switch: @Composable () -> Unit = {},
lazyListState: LazyListState = rememberLazyListState(),
scrollbarColor: Color = MaterialTheme.colorScheme.onBackground.copy(alpha = AlphaScrollbar),
content: @Composable (modifier: Modifier, lazyListState: LazyListState) -> Unit
) {

val appBarState = rememberTopAppBarState()
val canScroll = lazyListState.canScrollForward || lazyListState.canScrollBackward
val scrollBehavior =
TopAppBarDefaults.exitUntilCollapsedScrollBehavior(appBarState, canScroll = { canScroll })
Scaffold(
modifier = modifier.fillMaxSize().nestedScroll(scrollBehavior.nestedScrollConnection),
topBar = {
MullvadLargeTopBarWithToggleButton(
title = appBarTitle,
navigationIcon = navigationIcon,
switch = switch,
actions = actions,
scrollBehavior = scrollBehavior
)
},
content = {
content(
Modifier.fillMaxSize()
.padding(it)
.drawVerticalScrollbar(state = lazyListState, color = scrollbarColor),
lazyListState
)
}
)
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ScaffoldWithMediumTopBar(
Expand Down
40 changes: 40 additions & 0 deletions android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/TopBar.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import androidx.compose.foundation.layout.size
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.LargeTopAppBar
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.MediumTopAppBar
import androidx.compose.material3.Surface
Expand Down Expand Up @@ -224,6 +225,45 @@ fun MullvadMediumTopBar(
)
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MullvadLargeTopBarWithToggleButton(
title: String,
navigationIcon: @Composable () -> Unit = {},
actions: @Composable RowScope.() -> Unit = {},
switch: @Composable () -> Unit = {},
scrollBehavior: TopAppBarScrollBehavior? = null
) {
LargeTopAppBar(
title = {
Row(
modifier = Modifier.padding(end = Dimens.mediumPadding),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.Top
) {
Text(
text = title,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
modifier = Modifier.weight(1f)
)

if (scrollBehavior?.state?.collapsedFraction == 0f) {
switch()
}
}
},
navigationIcon = navigationIcon,
scrollBehavior = scrollBehavior,
colors =
TopAppBarDefaults.mediumTopAppBarColors(
containerColor = MaterialTheme.colorScheme.background,
actionIconContentColor = MaterialTheme.colorScheme.onPrimary.copy(AlphaTopBar)
),
actions = actions
)
}

@Preview
@Composable
private fun PreviewMullvadTopBarWithLongDeviceName() {
Expand Down
89 changes: 51 additions & 38 deletions android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SplitTunnelingScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,14 @@ import net.mullvad.mullvadvpn.compose.cell.BaseCell
import net.mullvad.mullvadvpn.compose.cell.HeaderSwitchComposeCell
import net.mullvad.mullvadvpn.compose.cell.SplitTunnelingCell
import net.mullvad.mullvadvpn.compose.component.MullvadCircularProgressIndicatorLarge
import net.mullvad.mullvadvpn.compose.component.MullvadSwitch
import net.mullvad.mullvadvpn.compose.component.NavigateBackIconButton
import net.mullvad.mullvadvpn.compose.component.ScaffoldWithMediumTopBar
import net.mullvad.mullvadvpn.compose.component.ScaffoldWithLargeTopBarAndToggleButton
import net.mullvad.mullvadvpn.compose.constant.CommonContentKey
import net.mullvad.mullvadvpn.compose.constant.ContentType
import net.mullvad.mullvadvpn.compose.constant.SplitTunnelingContentKey
import net.mullvad.mullvadvpn.compose.extensions.itemWithDivider
import net.mullvad.mullvadvpn.compose.state.AppListState
import net.mullvad.mullvadvpn.compose.state.SplitTunnelingUiState
import net.mullvad.mullvadvpn.lib.theme.AppTheme
import net.mullvad.mullvadvpn.lib.theme.Dimens
Expand All @@ -41,29 +43,32 @@ private fun PreviewSplitTunnelingScreen() {
AppTheme {
SplitTunnelingScreen(
uiState =
SplitTunnelingUiState.ShowAppList(
excludedApps =
listOf(
AppData(
packageName = "my.package.a",
name = "TitleA",
iconRes = R.drawable.icon_alert,
),
AppData(
packageName = "my.package.b",
name = "TitleB",
iconRes = R.drawable.icon_chevron,
)
),
includedApps =
listOf(
AppData(
packageName = "my.package.c",
name = "TitleC",
iconRes = R.drawable.icon_alert
)
),
showSystemApps = true
SplitTunnelingUiState(
appListState =
AppListState.ShowAppList(
excludedApps =
listOf(
AppData(
packageName = "my.package.a",
name = "TitleA",
iconRes = R.drawable.icon_alert
),
AppData(
packageName = "my.package.b",
name = "TitleB",
iconRes = R.drawable.icon_chevron
)
),
includedApps =
listOf(
AppData(
packageName = "my.package.c",
name = "TitleC",
iconRes = R.drawable.icon_alert
)
),
showSystemApps = true
)
)
)
}
Expand All @@ -72,18 +77,25 @@ private fun PreviewSplitTunnelingScreen() {
@Composable
@OptIn(ExperimentalFoundationApi::class)
fun SplitTunnelingScreen(
uiState: SplitTunnelingUiState = SplitTunnelingUiState.Loading,
uiState: SplitTunnelingUiState = SplitTunnelingUiState(),
onShowSplitTunneling: (Boolean) -> Unit = {},
onShowSystemAppsClick: (show: Boolean) -> Unit = {},
onExcludeAppClick: (packageName: String) -> Unit = {},
onIncludeAppClick: (packageName: String) -> Unit = {},
onBackClick: () -> Unit = {},
onResolveIcon: (String) -> Bitmap? = { null },
onResolveIcon: (String) -> Bitmap? = { null }
) {
val focusManager = LocalFocusManager.current

ScaffoldWithMediumTopBar(
ScaffoldWithLargeTopBarAndToggleButton(
modifier = Modifier.fillMaxSize(),
appBarTitle = stringResource(id = R.string.split_tunneling),
switch = {
MullvadSwitch(
checked = uiState.checked,
onCheckedChange = { newValue -> onShowSplitTunneling(newValue) }
)
},
navigationIcon = { NavigateBackIconButton(onBackClick) }
) { modifier, lazyListState ->
LazyColumn(
Expand All @@ -105,14 +117,14 @@ fun SplitTunnelingScreen(
)
}
}
when (uiState) {
SplitTunnelingUiState.Loading -> {
when (val appList = uiState.appListState) {
AppListState.Loading -> {
item(key = CommonContentKey.PROGRESS, contentType = ContentType.PROGRESS) {
MullvadCircularProgressIndicatorLarge()
}
}
is SplitTunnelingUiState.ShowAppList -> {
if (uiState.excludedApps.isNotEmpty()) {
is AppListState.ShowAppList -> {
if (appList.excludedApps.isNotEmpty()) {
itemWithDivider(
key = SplitTunnelingContentKey.EXCLUDED_APPLICATIONS,
contentType = ContentType.HEADER
Expand All @@ -126,11 +138,11 @@ fun SplitTunnelingScreen(
)
},
bodyView = {},
background = MaterialTheme.colorScheme.primary,
background = MaterialTheme.colorScheme.primary
)
}
itemsIndexed(
items = uiState.excludedApps,
items = appList.excludedApps,
key = { _, listItem -> listItem.packageName },
contentType = { _, _ -> ContentType.ITEM }
) { index, listItem ->
Expand All @@ -143,7 +155,7 @@ fun SplitTunnelingScreen(
) {
// Move focus down unless the clicked item was the last in this
// section.
if (index < uiState.excludedApps.size - 1) {
if (index < appList.excludedApps.size - 1) {
focusManager.moveFocus(FocusDirection.Down)
} else {
focusManager.moveFocus(FocusDirection.Up)
Expand All @@ -166,7 +178,7 @@ fun SplitTunnelingScreen(
) {
HeaderSwitchComposeCell(
title = stringResource(id = R.string.show_system_apps),
isToggled = uiState.showSystemApps,
isToggled = appList.showSystemApps,
onCellClicked = { newValue -> onShowSystemAppsClick(newValue) },
modifier = Modifier.animateItemPlacement()
)
Expand All @@ -185,11 +197,11 @@ fun SplitTunnelingScreen(
)
},
bodyView = {},
background = MaterialTheme.colorScheme.primary,
background = MaterialTheme.colorScheme.primary
)
}
itemsIndexed(
items = uiState.includedApps,
items = appList.includedApps,
key = { _, listItem -> listItem.packageName },
contentType = { _, _ -> ContentType.ITEM }
) { index, listItem ->
Expand All @@ -202,7 +214,7 @@ fun SplitTunnelingScreen(
) {
// Move focus down unless the clicked item was the last in this
// section.
if (index < uiState.includedApps.size - 1) {
if (index < appList.includedApps.size - 1) {
focusManager.moveFocus(FocusDirection.Down)
} else {
focusManager.moveFocus(FocusDirection.Up)
Expand All @@ -212,6 +224,7 @@ fun SplitTunnelingScreen(
}
}
}
AppListState.Disabled -> {}
}
}
}
Expand Down
Loading