feat: add deb management links (#1870)

Adds links to https://documentation.ubuntu.com/server/tutorial/managing-software/#installing-deb-packages to the 'Manage' and debian package pages ([figma](https://www.figma.com/design/c4noYODoMPFNn04gsJVJLE/App-Center?node-id=1860-4258&t=siVMXxKcEuzG0RHB-1)) ![Screenshot From 2024-12-02 12-57-43](https://github.com/user-attachments/assets/ae2f2a4f-ac5a-4c0d-98bf-06831cd6574e) ![Screenshot From 2024-12-02 12-57-33](https://github.com/user-attachments/assets/1948c64a-382b-426c-aae4-67505b5f18f4) ![Screenshot From 2024-12-02 12-55-55](https://github.com/user-attachments/assets/784527dd-0816-4732-8739-a079b2121b57) UDENG-3383
ubuntu · Dec 3, 2024 · 7ac0a1b · 7ac0a1b
2 parents 6c6a0d9 + d27047a
commit 7ac0a1b
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 7 deletions.
diff --git a/packages/app_center/lib/constants.dart b/packages/app_center/lib/constants.dart
@@ -21,3 +21,9 @@ const kSearchFieldIconConstraints = BoxConstraints(
 );
 const kSearchFieldContentPadding = EdgeInsets.all(12);
 const kSearchFieldPrefixIcon = Icon(YaruIcons.search, size: 16);
+
+// URLs
+const localDebInfoUrl =
+    'https://ubuntu.com/server/docs/third-party-repository-usage';
+const debManageDocsUrl =
+    'https://documentation.ubuntu.com/server/tutorial/managing-software/#installing-deb-packages';
diff --git a/packages/app_center/lib/deb/deb_page.dart b/packages/app_center/lib/deb/deb_page.dart
@@ -238,6 +238,7 @@ class _Header extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context);
     return Column(
       children: [
         const SizedBox(height: kPagePadding),
@@ -259,9 +260,18 @@ class _Header extends StatelessWidget {
           ],
         ),
         const SizedBox(height: kPagePadding),
-        Align(
-          alignment: AlignmentDirectional.centerStart,
-          child: _DebActionButtons(debModel: debModel),
+        Row(
+          children: [
+            _DebActionButtons(debModel: debModel),
+            const SizedBox(width: 32),
+            Html(
+              shrinkWrap: true,
+              data:
+                  '<a href="$debManageDocsUrl">${l10n.debPageDocumentationLinkLabel} &gt;</a>',
+              style: {'body': Style(margin: Margins.zero)},
+              onLinkTap: (url, attributes, element) => launchUrlString(url!),
+            ),
+          ],
         ),
         const SizedBox(height: 42),
         const Divider(),

diff --git a/packages/app_center/lib/deb/local_deb_page.dart b/packages/app_center/lib/deb/local_deb_page.dart
@@ -13,9 +13,6 @@ import 'package:ubuntu_widgets/ubuntu_widgets.dart';
 import 'package:url_launcher/url_launcher_string.dart';
 import 'package:yaru/yaru.dart';
 
-const localDebInfoUrl =
-    'https://ubuntu.com/server/docs/third-party-repository-usage';
-
 class LocalDebPage extends ConsumerWidget {
   const LocalDebPage({required this.path, super.key});
 
@@ -221,7 +218,19 @@ class _Header extends StatelessWidget {
           ),
         ),
         const SizedBox(height: kPagePadding),
-        _LocalDebActionButtons(debData: debData),
+        Row(
+          children: [
+            _LocalDebActionButtons(debData: debData),
+            const SizedBox(width: 32),
+            Html(
+              shrinkWrap: true,
+              data:
+                  '<a href="$debManageDocsUrl">${l10n.debPageDocumentationLinkLabel} &gt;</a>',
+              style: {'body': Style(margin: Margins.zero)},
+              onLinkTap: (url, attributes, element) => launchUrlString(url!),
+            ),
+          ],
+        ),
         const SizedBox(height: kPagePadding),
         const Divider(),
       ],

diff --git a/packages/app_center/lib/manage/manage_page.dart b/packages/app_center/lib/manage/manage_page.dart
@@ -8,8 +8,10 @@ import 'package:app_center/manage/updates_model.dart';
 import 'package:app_center/snapd/currently_installing_model.dart';
 import 'package:app_center/snapd/snapd.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_html/flutter_html.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:ubuntu_widgets/ubuntu_widgets.dart';
+import 'package:url_launcher/url_launcher_string.dart';
 import 'package:yaru/yaru.dart';
 
 class ManagePage extends ConsumerWidget {
@@ -62,6 +64,20 @@ class ManagePage extends ConsumerWidget {
                 l10n.managePageDebUpdatesMessage,
                 style: textTheme.titleMedium,
               ),
+              Html(
+                shrinkWrap: true,
+                data:
+                    '<a href="$debManageDocsUrl">${l10n.managePageDocumentationLinkLabel}</a>',
+                style: {
+                  'body': Style(
+                    margin: Margins.zero,
+                    fontSize: FontSize(textTheme.titleMedium!.fontSize!),
+                    fontWeight: textTheme.titleMedium!.fontWeight,
+                    lineHeight: LineHeight(textTheme.titleMedium!.height),
+                  ),
+                },
+                onLinkTap: (url, attributes, element) => launchUrlString(url!),
+              ),
               _SelfUpdateInfoBox(),
               Builder(
                 builder: (context) {

diff --git a/packages/app_center/lib/src/l10n/app_en.arb b/packages/app_center/lib/src/l10n/app_en.arb
@@ -114,6 +114,7 @@
             }
         }
     },
+    "managePageDocumentationLinkLabel": "Learn how to manage Debian packages in the documentation.",
     "productivityPageLabel": "Productivity",
     "developmentPageLabel": "Development",
     "gamesPageLabel": "Games",
@@ -283,6 +284,7 @@
     "snapReportPrivacyAgreementAndLabel": "and ",
     "snapReportPrivacyAgreementPrivacyPolicy": "Privacy Policy",
     "debPageErrorNoPackageInfo": "No package information found",
+    "debPageDocumentationLinkLabel": "Learn about managing Debian packages",
     "externalResources": "Additional resources",
     "externalResourcesButtonLabel": "Discover more",
     "allGamesButtonLabel": "All games",

diff --git a/packages/app_center/test/manage_page_test.dart b/packages/app_center/test/manage_page_test.dart
@@ -131,6 +131,15 @@ void main() {
 
     await tester.pumpAndSettle();
     final testTile = find.snapTile('Test Snap');
+
+    // Use the top-level scrollbar to ensure the tiles are visible before testing them.
+    final scrollable = find.byType(Scrollable).first;
+
+    await tester.scrollUntilVisible(
+      testTile,
+      kMinInteractiveDimension / 2,
+      scrollable: scrollable,
+    );
     expect(testTile, findsOneWidget);
     expect(
       find.descendant(of: testTile, matching: find.text('1.0')),
@@ -142,6 +151,11 @@ void main() {
     );
 
     final testTile2 = find.snapTile('Another Test Snap');
+    await tester.scrollUntilVisible(
+      testTile2,
+      kMinInteractiveDimension / 2,
+      scrollable: scrollable,
+    );
     expect(testTile2, findsOneWidget);
     expect(
       find.descendant(of: testTile2, matching: find.text('1.5')),
@@ -195,8 +209,22 @@ void main() {
         )
         .hitTestable();
 
+    // Use the top-level scrollbar to ensure the buttons are visible before testing them.
+    final scrollable = find.byType(Scrollable).first;
+
+    await tester.scrollUntilVisible(
+      openButton,
+      kMinInteractiveDimension / 2,
+      scrollable: scrollable,
+    );
     expect(openButton, findsOneWidget);
     expect(openButton, isEnabled);
+
+    await tester.scrollUntilVisible(
+      openButton2,
+      kMinInteractiveDimension / 2,
+      scrollable: scrollable,
+    );
     expect(openButton2, findsOneWidget);
     expect(openButton2, isDisabled);