FEATURE: Render human readable dimensions in usages

Flowpack · Feb 9, 2023 · 08d81bb · 08d81bb
1 parent 0425af5
commit 08d81bb
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 3 deletions.
diff --git a/Classes/Service/UsageDetailsService.php b/Classes/Service/UsageDetailsService.php
@@ -120,6 +120,12 @@ class UsageDetailsService
      */
     protected $packageManager;
 
+    /**
+     * @Flow\InjectConfiguration(path="contentDimensions", package="Neos.ContentRepository")
+     * @var array
+     */
+    protected $contentDimensionsConfiguration;
+
     private $accessibleWorkspaces = [];
 
     public function resolveUsagesForAsset(AssetInterface $asset): array
@@ -176,7 +182,7 @@ protected function getNodePropertiesUsageMetadataSchema(): array
             [
                 'name' => 'contentDimensions',
                 'label' => 'Content Dimensions',
-                'type' => 'TEXT',
+                'type' => 'JSON',
             ],
             [
                 'name' => 'lastModified',
@@ -222,14 +228,27 @@ protected function getNodePropertiesUsageDetails(AssetUsageInNodeProperties $usa
                 ],
                 [
                     'name' => 'contentDimensions',
-                    'value' => json_encode(array_values($node->getDimensions())),
+                    'value' => json_encode($this->resolveDimensionValuesForNode($node)),
                 ],
             ];
         }
 
         return new AssetUsageDetails($label, $url, $metadata);
     }
 
+    protected function resolveDimensionValuesForNode(NodeInterface $node): array
+    {
+        $dimensionValues = [];
+        foreach ($node->getDimensions() as $dimensionName => $dimensionValuesForName) {
+            $dimensionValues[$this->contentDimensionsConfiguration[$dimensionName]['label'] ?? $dimensionName] = array_map(function (
+                $dimensionValue
+            ) use ($dimensionName) {
+                return $this->contentDimensionsConfiguration[$dimensionName]['presets'][$dimensionValue]['label'] ?? $dimensionValue;
+            }, $dimensionValuesForName);
+        }
+        return $dimensionValues;
+    }
+
     protected function getNodeFrom(AssetUsageInNodeProperties $assetUsage): ?NodeInterface
     {
         $context = $this->_contextFactory->create(

diff --git a/Resources/Private/GraphQL/schema.root.graphql b/Resources/Private/GraphQL/schema.root.graphql
@@ -355,6 +355,7 @@ enum UsageDetailsMetadataType {
     DATE
     DATETIME
     URL
+    JSON
 }
 
 """

diff --git a/Resources/Private/JavaScript/asset-usage/src/components/AssetUsageSection.tsx b/Resources/Private/JavaScript/asset-usage/src/components/AssetUsageSection.tsx
@@ -16,12 +16,14 @@ const useStyles = createUseMediaUiStyles((theme: MediaUiTheme) => ({
     usageTable: {
         width: '100%',
         marginTop: theme.spacing.full,
+        lineHeight: 1.5,
         '& th': {
             fontWeight: 'bold',
             textAlign: 'left',
         },
         '& td, & th': {
             padding: theme.spacing.quarter,
+            verticalAlign: 'baseline',
             '&:first-child': {
                 paddingLeft: 0,
             },
@@ -38,13 +40,45 @@ const useStyles = createUseMediaUiStyles((theme: MediaUiTheme) => ({
                 textDecoration: 'underline',
             },
         },
+        '& li': {
+            listStyleType: 'disc',
+            '& ul': {
+                paddingLeft: '1rem',
+                '& li': {
+                    display: 'list-item',
+                },
+            },
+        },
     },
 }));
 
 interface AssetUsageSectionProps {
     usageDetailsGroup: UsageDetailsGroup;
 }
 
+// Recursive function to render an object as a nested list
+function renderObject(data: Record<string, any>) {
+    return Array.isArray(data) ? (
+        <ul>
+            {data.map((item, index) => (
+                <li key={index}>{renderObject(item)}</li>
+            ))}
+        </ul>
+    ) : typeof data === 'object' ? (
+        <ul>
+            {Object.keys(data).map((key) => (
+                <li key={key}>
+                    <strong>{key}:</strong> {renderObject(data[key])}
+                </li>
+            ))}
+        </ul>
+    ) : typeof data === 'string' ? (
+        data
+    ) : (
+        JSON.stringify(data)
+    );
+}
+
 const AssetUsageSection: React.FC<AssetUsageSectionProps> = ({ usageDetailsGroup }: AssetUsageSectionProps) => {
     const classes = useStyles();
     const { translate } = useIntl();
@@ -81,6 +115,8 @@ const AssetUsageSection: React.FC<AssetUsageSectionProps> = ({ usageDetailsGroup
                                                 <a href={usage.value} target="_blank" rel="noreferrer">
                                                     {name}
                                                 </a>
+                                            ) : type == 'JSON' ? (
+                                                renderObject(JSON.parse(usage.value))
                                             ) : (
                                                 usage.value
                                             )}

diff --git a/Resources/Private/JavaScript/asset-usage/src/components/AssetUsagesModal.tsx b/Resources/Private/JavaScript/asset-usage/src/components/AssetUsagesModal.tsx
@@ -4,7 +4,7 @@ import { useRecoilState } from 'recoil';
 
 import { Button, Dialog } from '@neos-project/react-ui-components';
 
-import { useIntl, createUseMediaUiStyles, MediaUiTheme } from '@media-ui/core/src';
+import { useIntl, createUseMediaUiStyles, MediaUiTheme } from '@media-ui/core';
 import { useSelectedAsset } from '@media-ui/core/src/hooks';
 
 import assetUsageDetailsModalState from '../state/assetUsageDetailsModalState';

diff --git a/Resources/Private/JavaScript/asset-usage/src/interfaces/UsageDetails.ts b/Resources/Private/JavaScript/asset-usage/src/interfaces/UsageDetails.ts
@@ -5,6 +5,7 @@ export enum UsageDetailsMetadataType {
     DATE = 'DATE',
     DATETIME = 'DATETIME',
     URL = 'URL',
+    JSON = 'JSON',
 }
 
 export interface UsageDetailsMetadataSchema {

diff --git a/Resources/Private/JavaScript/core/package.json b/Resources/Private/JavaScript/core/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "license": "GNU GPLv3",
   "private": true,
+  "main": "src/index.ts",
   "dependencies": {
     "matcher": "^5.0.0",
     "pubsub-js": "^1.9.3"
-Original file line number
+Diff line change
@@ Expand Up / @@ -355,6 +355,7 @@ enum UsageDetailsMetadataType { @@
         DATE
         DATETIME
         URL
+        JSON
     }
     """
@@ Expand Down @@