Foldable sections on package and publisher admin UI

dart-lang · Sep 20, 2024 · db8f2fa · db8f2fa
1 parent e78fa9d
commit db8f2fa
Show file tree

Hide file tree

Showing 9 changed files with 927 additions and 839 deletions.
diff --git a/app/lib/frontend/templates/_utils.dart b/app/lib/frontend/templates/_utils.dart
@@ -5,6 +5,7 @@
 import '../../package/models.dart' show PackageVersionAsset;
 import '../../shared/markdown.dart';
 import '../dom/dom.dart' as d;
+import '../static_files.dart';
 
 /// Renders a file content (e.g. markdown, dart source file) into HTML.
 d.Node renderFile(
@@ -44,3 +45,35 @@ d.Node _renderDartCode(String text) =>
 
 d.Node _renderPlainText(String text) =>
     d.div(classes: ['highlight'], child: d.pre(text: text));
+
+d.Node foldableSection({
+  required d.Node title,
+  required Iterable<d.Node> children,
+  Iterable<String>? buttonDivClasses,
+}) {
+  return d.div(
+    classes: ['foldable-section', 'foldable'],
+    children: [
+      d.div(
+        classes: ['foldable-button', ...?buttonDivClasses],
+        children: [
+          d.img(
+            classes: ['foldable-icon'],
+            image: d.Image(
+              src: staticUrls
+                  .getAssetUrl('/static/img/foldable-section-icon.svg'),
+              alt: 'trigger folding of the section',
+              width: 13,
+              height: 6,
+            ),
+          ),
+          title,
+        ],
+      ),
+      d.div(
+        classes: ['foldable-content'],
+        children: children,
+      ),
+    ],
+  );
+}
diff --git a/app/lib/frontend/templates/report.dart b/app/lib/frontend/templates/report.dart
@@ -2,12 +2,11 @@
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
-import 'package:pub_dev/frontend/static_files.dart';
-
 import '../../account/models.dart';
 import '../../admin/models.dart';
 import '../dom/dom.dart' as d;
 import '../dom/material.dart' as material;
+import '_utils.dart';
 import 'layout.dart';
 
 const _subjectKindLabels = {
@@ -93,15 +92,15 @@ Iterable<d.Node> _report(
     d.p(text: ''),
     // illegal content
     if (subject.isPackage)
-      _foldableSection(
+      foldableSection(
         title: d.text('I believe the package contains illegal content.'),
         children: [
           d.markdown('Please report illegal content through the '
               '[illegal content reporting form here]($lcpsDeepLink).')
         ],
       )
     else if (subject.isPublisher)
-      _foldableSection(
+      foldableSection(
         title: d.text('I believe the publisher contains illegal content.'),
         children: [
           d.markdown('Please report illegal content through the '
@@ -111,7 +110,7 @@ Iterable<d.Node> _report(
 
     // contact
     if (subject.isPackage)
-      _foldableSection(
+      foldableSection(
         title: d.text(
             'I have found a bug in the package / I need help using the package.'),
         children: [
@@ -131,7 +130,7 @@ Iterable<d.Node> _report(
         ],
       )
     else if (subject.isPublisher)
-      _foldableSection(
+      foldableSection(
         title: d.text('I want to contact the publisher.'),
         children: [
           d.markdown('Please consult the publisher page: '
@@ -143,7 +142,7 @@ Iterable<d.Node> _report(
       ),
 
     // direct report
-    _foldableSection(
+    foldableSection(
       buttonDivClasses: ['report-page-direct-report'],
       title: d.text('I believe the $kindLabel violates pub.dev/policy.'),
       children: [
@@ -176,7 +175,7 @@ Iterable<d.Node> _report(
     ),
 
     // problem with pub.dev
-    _foldableSection(
+    foldableSection(
       title: d.text('I have a problem with the pub.dev website.'),
       children: [
         d.markdown('Security vulnerabilities may be reported through '
@@ -234,35 +233,3 @@ Iterable<d.Node> _appeal(
     ),
   ];
 }
-
-d.Node _foldableSection({
-  required d.Node title,
-  required Iterable<d.Node> children,
-  Iterable<String>? buttonDivClasses,
-}) {
-  return d.div(
-    classes: ['foldable-section', 'foldable'],
-    children: [
-      d.div(
-        classes: ['foldable-button', ...?buttonDivClasses],
-        children: [
-          d.img(
-            classes: ['foldable-icon'],
-            image: d.Image(
-              src: staticUrls
-                  .getAssetUrl('/static/img/foldable-section-icon.svg'),
-              alt: 'trigger folding of the section',
-              width: 13,
-              height: 6,
-            ),
-          ),
-          title,
-        ],
-      ),
-      d.div(
-        classes: ['foldable-content'],
-        children: children,
-      ),
-    ],
-  );
-}