Also update other labels.

Author: isoos

app/lib/frontend/templates/package_misc.dart

@@ -200,6 +200,7 @@ d.Node replacedByLink(String replacedBy) {
 /// Renders the labeled scores widget (the score values in a compact layout).
 d.Node labeledScoresNodeFromPackageView(PackageView view, {String? version}) {
   return labeledScoresNode(
+    package: view.name,
     pkgScorePageUrl: urls.pkgScoreUrl(view.name, version: version),
     likeCount: view.likes,
     grantedPubPoints: view.grantedPubPoints,

app/lib/frontend/templates/views/pkg/labeled_scores.dart

@@ -7,11 +7,15 @@ import 'package:_pub_shared/format/number_format.dart';
 import '../../../dom/dom.dart' as d;
 
 d.Node labeledScoresNode({
+  required String package,
   required String pkgScorePageUrl,
   required int likeCount,
   required int? grantedPubPoints,
   required int? thirtyDaysDownloads,
 }) {
+  final formattedLikes = compactFormat(likeCount);
+  final formattedDownloads =
+      thirtyDaysDownloads == null ? null : compactFormat(thirtyDaysDownloads);
   return d.a(
     classes: ['packages-scores'],
     href: pkgScorePageUrl,
@@ -20,9 +24,10 @@ d.Node labeledScoresNode({
         classes: ['packages-score', 'packages-score-like'],
         child: _labeledScore(
             'likes',
-            '${compactFormat(likeCount).value}'
-                '${compactFormat(likeCount).suffix}',
+            // keep in-sync with pkg/web_app/lib/src/likes.dart
+            '${formattedLikes.value}${formattedLikes.suffix}',
             sign: ''),
+        attributes: {'data-package': package},
       ),
       d.div(
         classes: ['packages-score', 'packages-score-health'],
@@ -35,9 +40,8 @@ d.Node labeledScoresNode({
         classes: ['packages-score', 'packages-score-downloads'],
         child: _labeledScore(
           'downloads',
-          thirtyDaysDownloads != null
-              ? '${compactFormat(thirtyDaysDownloads).value}'
-                  '${compactFormat(thirtyDaysDownloads).suffix}'
+          formattedDownloads != null
+              ? '${formattedDownloads.value}${formattedDownloads.suffix}'
               : null,
           sign: '',
         ),

app/lib/frontend/templates/views/pkg/score_tab.dart

@@ -318,11 +318,13 @@ d.Node _likeKeyFigureNode(int? likeCount) {
       label: 'likes',
     );
   }
+  final formatted = compactFormat(likeCount);
+  // keep in-sync with pkg/web_app/lib/src/likes.dart
   return _keyFigureNode(
-    value: '${compactFormat(likeCount).value}'
-        '${compactFormat(likeCount).suffix}',
+    value: '${formatted.value}${formatted.suffix}',
     supplemental: '',
     label: 'likes',
+    classes: ['score-key-figure--likes'],
   );
 }
 
@@ -367,9 +369,10 @@ d.Node _keyFigureNode({
   required String value,
   required String supplemental,
   required String label,
+  List<String>? classes,
 }) {
   return d.div(
-    classes: ['score-key-figure'],
+    classes: ['score-key-figure', ...?classes],
     children: [
       d.div(
         classes: ['score-key-figure-title'],

pkg/pub_integration/test/like_test.dart

@@ -40,27 +40,37 @@ void main() {
       final user = await fakeTestScenario.createTestUser(email: '[email protected]');
 
       await user.withBrowserPage((page) async {
-        Future<String> getCountLabel() async {
-          final label = await page.$('.like-button-and-label--count');
-          return await label.textContent();
+        Future<List<String>> getCountLabels() async {
+          final buttonLabel = await page.$('.like-button-and-label--count');
+          final viewLabel =
+              await page.$('.packages-score-like .packages-score-value-number');
+          final keyScoreLabel = await page
+              .$OrNull('.score-key-figure--likes .score-key-figure-value');
+          return [
+            await buttonLabel.textContent(),
+            await viewLabel.textContent(),
+            (await keyScoreLabel?.textContent()) ?? '',
+          ];
         }
 
         await page.gotoOrigin('/packages/test_pkg');
-        expect(await getCountLabel(), '0');
+        expect(await getCountLabels(), ['0', '0', '']);
 
         await page.click('.like-button-and-label--button');
         await Future.delayed(Duration(seconds: 1));
-        expect(await getCountLabel(), '1');
+        expect(await getCountLabels(), ['1', '1', '']);
 
-        await page.gotoOrigin('/packages/test_pkg');
-        expect(await getCountLabel(), '1');
+        // displaying all three
+        await page.gotoOrigin('/packages/test_pkg/score');
+        expect(await getCountLabels(), ['1', '1', '1']);
 
         await page.click('.like-button-and-label--button');
         await Future.delayed(Duration(seconds: 1));
 
-        expect(await getCountLabel(), '0');
+        // checking it on the main package page too
+        expect(await getCountLabels(), ['0', '0', '0']);
         await page.gotoOrigin('/packages/test_pkg');
-        expect(await getCountLabel(), '0');
+        expect(await getCountLabels(), ['0', '0', '']);
       });
     });
   });

pkg/web_app/lib/src/likes.dart

@@ -63,10 +63,26 @@ void setupLikes() {
 
     var likesDelta = 0;
 
-    // keep in-sync with app/lib/frontend/templates/views/pkg/liked_package_list.dart
-    String likesString() {
+    void updateLabels() {
       final likesCount = originalCount + likesDelta;
-      return formatWithSuffix(likesCount);
+      // keep in-sync with app/lib/frontend/templates/views/pkg/liked_package_list.dart
+      countLabel.innerText = formatWithSuffix(likesCount);
+
+      // keep in-sync with app/lib/frontend/templates/views/pkg/labeled_scores.dart
+      final formatted = compactFormat(likesCount);
+      final labeledScoreLikeString = '${formatted.value}${formatted.suffix}';
+      final labeledLikes = querySelectorAll('.packages-score-like')
+          .where((e) => e.dataset['package'] == package)
+          .toList();
+      for (final labeledLike in labeledLikes) {
+        labeledLike.querySelector('.packages-score-value-number')?.text =
+            labeledScoreLikeString;
+      }
+
+      // keep in-sync with app/lib/frontend/templates/views/pkg/score_tab.dart
+      querySelector('.score-key-figure--likes')
+          ?.querySelector('.score-key-figure-value')
+          ?.text = labeledScoreLikeString;
     }
 
     final iconButtonToggle = MDCIconButtonToggle(likeButton);
@@ -87,12 +103,12 @@ void setupLikes() {
       if (iconButtonToggle.on ?? false) {
         // The button has shifted to on.
         likesDelta++;
-        countLabel.innerText = likesString();
+        updateLabels();
         _enqueue(() => api_client.client.likePackage(package));
       } else {
         // The button has shifted to off.
         likesDelta--;
-        countLabel.innerText = likesString();
+        updateLabels();
         _enqueue(() => api_client.client.unlikePackage(package));
       }
     });