User metadata on one line

catalog/app/containers/Bucket/PackageList/PackageList.tsx

@@ -224,20 +224,30 @@ interface RevisionMetaProps {
 
 function RevisionMeta({ revision }: RevisionMetaProps) {
   const classes = useRevisionMetaStyles()
+  const { preferences } = BucketPreferences.use()
   return (
     <div className={classes.root}>
       {!!revision.message && <div className={classes.section}>{revision.message}</div>}
       {!!revision.userMeta && (
         <div className={classes.section}>
-          {Object.entries(revision.userMeta).map(([name, value]) => (
-            /* @ts-expect-error */
+          {preferences?.ui.packageDescription.userMetaMultiline ? (
+            Object.entries(revision.userMeta).map(([name, value]) => (
+              // @ts-expect-error
+              <JsonDisplay
+                className={cx({ [classes.sectionWithToggle]: typeof value === 'object' })}
+                key={`user-meta-section-${name}`}
+                name={name}
+                value={value}
+              />
+            ))
+          ) : (
+            // @ts-expect-error
             <JsonDisplay
-              className={cx({ [classes.sectionWithToggle]: typeof value === 'object' })}
-              key={`user-meta-section-${name}`}
-              name={name}
-              value={value}
+              className={classes.sectionWithToggle}
+              name="User metadata"
+              value={revision.userMeta}
             />
-          ))}
+          )}
         </div>
       )}
     </div>
@@ -259,9 +269,9 @@ function usePackageDescription(
 ): BucketPreferences.PackagePreferences | null {
   const { preferences } = BucketPreferences.use()
   return React.useMemo(() => {
-    if (!preferences?.ui.package_description) return null
+    if (!preferences?.ui.packageDescription.packages) return null
     return (
-      Object.entries(preferences?.ui.package_description)
+      Object.entries(preferences?.ui.packageDescription.packages)
         .reverse() // The last found config wins
         .find(([nameRegex]) => new RegExp(nameRegex).test(name))?.[1] || {}
     )

catalog/app/utils/BucketPreferences/BucketPreferences.spec.ts

@@ -30,10 +30,13 @@ const expectedDefaults = {
       packages: true,
       queries: true,
     },
-    package_description: {
-      '.*': {
-        message: true,
+    packageDescription: {
+      packages: {
+        '.*': {
+          message: true,
+        },
       },
+      userMetaMultiline: false,
     },
     sourceBuckets: {
       list: [],

catalog/app/utils/BucketPreferences/BucketPreferences.ts

@@ -56,9 +56,13 @@ export interface PackagePreferences {
   userMeta?: ReadonlyArray<string>
 }
 type PackagesListPreferencesInput = Record<string, PackagePreferencesInput>
-type PackagesListPreferences = Record<string, PackagePreferences>
+interface PackagesListPreferences {
+  packages: Record<string, PackagePreferences>
+  userMetaMultiline: boolean
+}
 
 type DefaultSourceBucketInput = string
+type PackageDescriptionMultiline = boolean
 type SourceBucketsInput = Record<string, null>
 
 export interface AthenaPreferencesInput {
@@ -77,6 +81,7 @@ interface UiPreferencesInput {
   defaultSourceBucket?: DefaultSourceBucketInput
   nav?: Partial<NavPreferences>
   package_description?: PackagesListPreferencesInput
+  package_description_multiline?: PackageDescriptionMultiline
   sourceBuckets?: SourceBucketsInput
 }
 
@@ -94,7 +99,7 @@ interface UiPreferences {
   athena: AthenaPreferences
   blocks: BlocksPreferences
   nav: NavPreferences
-  package_description: PackagesListPreferences
+  packageDescription: PackagesListPreferences
   sourceBuckets: SourceBuckets
 }
 
@@ -132,10 +137,13 @@ const defaultPreferences: BucketPreferences = {
       packages: true,
       queries: true,
     },
-    package_description: {
-      '.*': {
-        message: true,
+    packageDescription: {
+      packages: {
+        '.*': {
+          message: true,
+        },
       },
+      userMetaMultiline: false,
     },
     sourceBuckets: {
       getDefault: () => '',
@@ -186,16 +194,25 @@ function parseBlocks(blocks?: BlocksPreferencesInput): BlocksPreferences {
   }
 }
 
-function parsePackages(packages?: PackagesListPreferencesInput): PackagesListPreferences {
+function parsePackages(
+  packages?: PackagesListPreferencesInput,
+  userMetaMultiline: boolean = false,
+): PackagesListPreferences {
   return Object.entries(packages || {}).reduce(
-    (memo, [name, { message, user_meta }]) => ({
-      ...memo,
-      [name]: {
-        message,
-        userMeta: user_meta,
-      },
-    }),
-    defaultPreferences.ui.package_description,
+    (memo, [name, { message, user_meta }]) =>
+      R.assocPath(
+        ['packages', name],
+        {
+          message,
+          userMeta: user_meta,
+        },
+        memo,
+      ),
+    {
+      packages: defaultPreferences.ui.packageDescription.packages,
+      userMetaMultiline:
+        userMetaMultiline || defaultPreferences.ui.packageDescription.userMetaMultiline,
+    },
   )
 }
 
@@ -232,7 +249,10 @@ export function extendDefaults(
       ...R.mergeDeepRight(defaultPreferences.ui, data?.ui || {}),
       athena: parseAthena(data?.ui?.athena),
       blocks: parseBlocks(data?.ui?.blocks),
-      package_description: parsePackages(data?.ui?.package_description),
+      packageDescription: parsePackages(
+        data?.ui?.package_description,
+        data?.ui?.package_description_multiline,
+      ),
       sourceBuckets: parseSourceBuckets(
         sentry,
         data?.ui?.sourceBuckets,

docs/CHANGELOG.md

@@ -27,6 +27,7 @@ Entries inside each section should be ordered by type:
 * [Changed] Show collapsed values in JSON viewer ([#3249](https://github.com/quiltdata/quilt/pull/3249))
 * [Changed] Rename "Metadata" to "User metadata" ([#3255](https://github.com/quiltdata/quilt/pull/3255))
 * [Changed] Show selective metadata for packages as JSON ([#3259](https://github.com/quiltdata/quilt/pull/3259))
+* [Changed] Show selective metadata on one line and optionaly on multiple lines ([#3284](https://github.com/quiltdata/quilt/pull/3284))
 
 # 5.1.0 - 2022-12-09
 ## Python API

docs/Catalog/Preferences.md

@@ -33,6 +33,7 @@ ui:
   package_description:
     .*:
       message: True
+  package_description_multiline: False
 ```
 
 ### Properties
@@ -62,6 +63,7 @@ that is selected by default; if it doesn't match any bucket then it's ignored
 that maps package handle regular expressions
 or literals to JSONPath expressions of fields to show from package metadata
 in the package list view.
+* `ui.package_description_multiline: True` - expands package metadata's root key/values
 * `ui.athena.defaultWorkgroup` - default workgroup to select on the Athena page
 
 #### `ui.sourceBuckets` example