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

feat: Always show Pro token input #980

Merged
merged 5 commits into from
Nov 27, 2024
Merged

feat: Always show Pro token input #980

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5f115dd
Show token input field by default and adjust decorations
ashuntu Nov 25, 2024
c94da67
Adjust tests for always visible token input
ashuntu Nov 25, 2024
b65dea5
Fix end to end and integration tests
ashuntu Nov 26, 2024
e4737a2
Convert custom colors to Yaru colors
ashuntu Nov 26, 2024
a9c1fd8
Use YaruColors instead of colorScheme
ashuntu Nov 26, 2024
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
8 changes: 1 addition & 7 deletions gui/packages/ubuntupro/end_to_end/end_to_end_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import 'package:stack_trace/stack_trace.dart' as stack_trace;
import 'package:ubuntupro/core/environment.dart';
import 'package:ubuntupro/main.dart' as app;
import 'package:ubuntupro/pages/subscribe_now/subscribe_now_page.dart';
import 'package:ubuntupro/pages/subscribe_now/subscribe_now_widgets.dart';
import 'package:ubuntupro/pages/subscription_status/subscription_status_page.dart';

import '../test/utils/l10n_tester.dart';
Expand Down Expand Up @@ -63,11 +62,6 @@ Future<void> testManualTokenInput(WidgetTester tester) async {
// The "subscribe now page" is only shown if the GUI communicates with the background agent.
var l10n = tester.l10n<SubscribeNowPage>();

// expands the collapsed input field group
final toggle = find.byIcon(ProTokenInputField.expandIcon);
await tester.tap(toggle);
await tester.pumpAndSettle();

// finds the pro token from the environment
final goodToken = Environment()[proTokenEnv];
expect(
Expand All @@ -82,7 +76,7 @@ Future<void> testManualTokenInput(WidgetTester tester) async {
await tester.pumpAndSettle();

// submits the input.
final button = find.text(l10n.confirm);
final button = find.text(l10n.attach);
await tester.tap(button);
await tester.pumpAndSettle();

Expand Down
13 changes: 2 additions & 11 deletions gui/packages/ubuntupro/integration_test/ubuntu_pro_for_wsl_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import 'package:ubuntupro/main.dart' as app;
import 'package:ubuntupro/pages/landscape/landscape_page.dart';
import 'package:ubuntupro/pages/startup/startup_page.dart';
import 'package:ubuntupro/pages/subscribe_now/subscribe_now_page.dart';
import 'package:ubuntupro/pages/subscribe_now/subscribe_now_widgets.dart';
import 'package:ubuntupro/pages/subscription_status/subscription_status_page.dart';
import 'package:yaru/widgets.dart';
import 'package:yaru_test/yaru_test.dart';
Expand Down Expand Up @@ -118,18 +117,14 @@ void main() {

// The "subscribe now page" is only shown if the GUI communicates with the background agent.
var l10n = tester.l10n<SubscribeNowPage>();
// expands the collapsed input field group
final toggle = find.byIcon(ProTokenInputField.expandIcon);
await tester.tap(toggle);
await tester.pumpAndSettle();

// enters a good token value
final inputField = find.byType(TextField);
await tester.enterText(inputField, 'CJd8MMN8wXSWsv7wJT8c8dDK');
await tester.pump();

// submits the input.
final button = find.text(l10n.confirm);
final button = find.text(l10n.attach);
await tester.tap(button);
await tester.pumpAndSettle();

Expand Down Expand Up @@ -166,18 +161,14 @@ void main() {

// The "subscribe now page" is only shown if the GUI communicates with the background agent.
var l10n = tester.l10n<SubscribeNowPage>();
// expands the collapsed input field group
final toggle = find.byIcon(ProTokenInputField.expandIcon);
await tester.tap(toggle);
await tester.pumpAndSettle();

// enters a good token value
final inputField = find.byType(TextField);
await tester.enterText(inputField, 'CJd8MMN8wXSWsv7wJT8c8dDK');
await tester.pump();

// submits the input.
final button = find.text(l10n.confirm);
final button = find.text(l10n.attach);
await tester.tap(button);
await tester.pumpAndSettle();

Expand Down
4 changes: 4 additions & 0 deletions gui/packages/ubuntupro/lib/constants.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import 'package:flutter/material.dart';

/// The name of the file where the Agent's drop its service connection information.
const kAddrFileName = '.ubuntupro/.address';

Expand All @@ -12,3 +14,5 @@ const kVersion = String.fromEnvironment(
'UP4W_FULL_VERSION',
defaultValue: 'Dev',
);

const kConfirmColor = Color(0xFF0E8420);
ashuntu marked this conversation as resolved.
Show resolved Hide resolved
5 changes: 3 additions & 2 deletions gui/packages/ubuntupro/lib/l10n/app_en.arb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
{
"appTitle": "Ubuntu Pro for WSL",
"tokenErrorEmpty": "Token cannot be empty",
"tokenErrorInvalid": "Token invalid",
"tokenErrorInvalid": "Invalid token",
"tokenValid": "Valid token",
"tokenInputTitle": "Already have a token?",
"tokenInputHint": "Paste your Ubuntu Pro token here",
"confirm": "Confirm",
"attach": "Attach",
"applyProToken": "Apply Pro Token",
"applyingProToken": "Applying token {token}",
"@applyingProToken": {
Expand Down
124 changes: 81 additions & 43 deletions gui/packages/ubuntupro/lib/pages/subscribe_now/subscribe_now_widgets.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:yaru/yaru.dart';
import '../../constants.dart';
import '../../core/either_value_notifier.dart';
import '../../core/pro_token.dart';

Expand Down Expand Up @@ -61,58 +62,95 @@ class _ProTokenInputFieldState extends State<ProTokenInputField> {
final lang = AppLocalizations.of(context);
final theme = Theme.of(context);

return YaruExpandable(
header: Text(
lang.tokenInputTitle,
style:
theme.textTheme.bodyMedium!.copyWith(fontWeight: FontWeight.w100),
),
expandIcon: Icon(
ProTokenInputField.expandIcon,
color: theme.textTheme.bodyMedium!.color,
),
isExpanded: widget.isExpanded,
child: ValueListenableBuilder(
valueListenable: _token,
builder: (context, _, __) => Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: TextField(
inputFormatters: [
// This ignores all sorts of (Unicode) whitespaces (not only at the ends).
FilteringTextInputFormatter.deny(RegExp(r'\s')),
],
autofocus: false,
controller: _controller,
decoration: InputDecoration(
hintText: lang.tokenInputHint,
errorText: _token.errorOrNull?.localize(lang),
counterText: '',
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
lang.tokenInputTitle,
style:
theme.textTheme.bodyMedium!.copyWith(fontWeight: FontWeight.w100),
),
const SizedBox(
height: 8,
),
ValueListenableBuilder(
valueListenable: _token,
builder: (context, _, __) => Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: TextField(
inputFormatters: [
// This ignores all sorts of (Unicode) whitespaces (not only at the ends).
FilteringTextInputFormatter.deny(RegExp(r'\s')),
],
autofocus: false,
controller: _controller,
decoration: InputDecoration(
hintText: lang.tokenInputHint,
error: _token.errorOrNull?.localize(lang) != null
? Padding(
padding: const EdgeInsets.only(top: 4),
child: Row(
children: [
const Icon(
Icons.cancel,
color: Colors.red,
CarlosNihelton marked this conversation as resolved.
Show resolved Hide resolved
size: 16.0,
),
const SizedBox(width: 4),
Text(
_token.errorOrNull!.localize(lang)!,
style: theme.textTheme.bodySmall!
.copyWith(color: Colors.redAccent),
CarlosNihelton marked this conversation as resolved.
Show resolved Hide resolved
),
],
),
)
: null,
helper: _token.valueOrNull != null
? Padding(
padding: const EdgeInsets.only(top: 4),
child: Row(
children: [
const Icon(
Icons.check_circle,
color: kConfirmColor,
CarlosNihelton marked this conversation as resolved.
Show resolved Hide resolved
size: 16.0,
),
const SizedBox(width: 4),
Text(
lang.tokenValid,
style: theme.textTheme.bodySmall!
.copyWith(color: Colors.green),
CarlosNihelton marked this conversation as resolved.
Show resolved Hide resolved
),
],
),
)
: null,
),
onChanged: _token.update,
onSubmitted: _onSubmitted,
),
onChanged: _token.update,
onSubmitted: _onSubmitted,
),
),
const SizedBox(
width: 8.0,
),
ElevatedButton(
onPressed: canSubmit ? _handleApplyButton : null,
child: Text(lang.confirm),
),
],
const SizedBox(
width: 8.0,
),
ElevatedButton(
onPressed: canSubmit ? _handleApplyButton : null,
child: Text(lang.attach),
),
],
),
),
),
],
);
}
}

/// A value-notifier for the [ProToken] with validation.
/// Since we don't want to start the UI with an error due the text field being
/// empty, this stores a nullable [ProToken] object
class ProTokenValue extends EitherValueNotifier<TokenError, ProToken?> {
ProTokenValue() : super.ok(null);
ProTokenValue() : super.err(TokenError.empty);

String? get token => valueOrNull?.value;

Expand Down
5 changes: 3 additions & 2 deletions gui/packages/ubuntupro/lib/pages/subscription_status/subscription_status_widgets.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:url_launcher/url_launcher_string.dart';
import 'package:yaru/yaru.dart';
import '../../constants.dart';
import '../widgets/page_widgets.dart';

/// A page content widget built on top of the Dark styled landing page showing the current user active subscription
Expand Down Expand Up @@ -47,7 +48,7 @@ class SubscriptionStatus extends StatelessWidget {
Container(
padding: const EdgeInsets.all(16.0),
decoration: BoxDecoration(
border: Border.all(color: const Color(0xFF0E8420), width: 1.0),
border: Border.all(color: kConfirmColor, width: 1.0),
color: const Color(0xFFE6F8E8),
borderRadius: const BorderRadius.all(Radius.circular(4.0)),
),
Expand All @@ -57,7 +58,7 @@ class SubscriptionStatus extends StatelessWidget {
children: [
const Icon(
Icons.check_circle_outline_outlined,
color: Color(0xFF0E8420),
color: kConfirmColor,
size: 24.0,
),
const SizedBox(width: 8.0),
Expand Down
46 changes: 20 additions & 26 deletions gui/packages/ubuntupro/test/pages/subcribe_now/subscribe_now_widgets_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,25 +46,6 @@ void main() {
});

group('pro token input', () {
testWidgets('collapsed by default', (tester) async {
final app = MaterialApp(
home: Scaffold(
body: ProTokenInputField(
onApply: (_) {},
),
),
localizationsDelegates: AppLocalizations.localizationsDelegates,
);

await tester.pumpWidget(app);
expect(find.byType(TextField).hitTestable(), findsNothing);

final toggle = find.byType(IconButton);
await tester.tap(toggle);
await tester.pumpAndSettle();
expect(find.byType(TextField).hitTestable(), findsOneWidget);
});

group('basic flow', () {
final theApp = buildApp(onApply: (_) {}, isExpanded: true);
testWidgets('starts with no error', (tester) async {
Expand Down Expand Up @@ -93,8 +74,11 @@ void main() {
await tester.enterText(inputField, token);
await tester.pump();

final input = tester.firstWidget<TextField>(inputField);
expect(input.decoration!.errorText, equals(lang.tokenErrorInvalid));
final errorText = find.descendant(
of: inputField,
matching: find.text(lang.tokenErrorInvalid),
);
expect(errorText, findsOne);

final button =
tester.firstWidget<ElevatedButton>(find.byType(ElevatedButton));
Expand All @@ -112,8 +96,11 @@ void main() {
await tester.enterText(inputField, tks.invalidTokens[0]);
await tester.pump();

var input = tester.firstWidget<TextField>(inputField);
expect(input.decoration!.errorText, equals(lang.tokenErrorInvalid));
final errorText = find.descendant(
of: inputField,
matching: find.text(lang.tokenErrorInvalid),
);
expect(errorText, findsOne);

final button =
tester.firstWidget<ElevatedButton>(find.byType(ElevatedButton));
Expand All @@ -122,20 +109,27 @@ void main() {
// ...except when we delete the content we should have no more errors
await tester.enterText(inputField, '');
await tester.pump();
input = tester.firstWidget<TextField>(inputField);
expect(input.decoration!.errorText, isNull);
final input = tester.firstWidget<TextField>(inputField);
expect(input.decoration!.error, isNull);
expect(button.enabled, isFalse);
});

testWidgets('good token', (tester) async {
await tester.pumpWidget(theApp);
final inputField = find.byType(TextField);
final context = tester.element(inputField);
final lang = AppLocalizations.of(context);

await tester.enterText(inputField, tks.good);
await tester.pump();

final input = tester.firstWidget<TextField>(inputField);
expect(input.decoration!.errorText, isNull);
expect(input.decoration!.error, isNull);
final validText = find.descendant(
of: inputField,
matching: find.text(lang.tokenValid),
);
expect(validText, findsOne);

final button =
tester.firstWidget<ElevatedButton>(find.byType(ElevatedButton));
Expand Down
Loading