[TASK] Render asset usage counter inside inspector action buttons

Author: soee

Resources/Private/JavaScript/asset-usage/src/components/AssetUsageSection.module.css

@@ -9,6 +9,8 @@
     width: 100%;
     margin-top: var(--theme-spacing-Full);
     line-height: 1.5;
+    border-collapse: separate;
+    border-spacing: 0;
 }
 
 .usageTable th {
@@ -18,17 +20,13 @@
 
 .usageTable td,
 .usageTable th {
-    padding: var(--theme-spacing-Quarter);
+    padding: 0 var(--theme-spacing-Half);
+    height: var(--theme-unit);
 }
 
-.usageTable td:first-child,
-.usageTable th:first-child {
-    padding-left: 0;
-}
-
-.usageTable td:last-child,
-.usageTable th:last-child {
-    padding-right: 0;
+.usageTable td {
+    border-top: 1px solid var(--theme-colors-ContrastDarker);
+    background-color: var(--theme-colors-ContrastNeutral);
 }
 
 /* This is for specificity; otherwise `.neos.neos-module a` would override this link style in the backend module */

Resources/Private/JavaScript/asset-usage/src/components/AssetUsagesToggleButton.module.css

@@ -0,0 +1,3 @@
+.assetUsageBadge {
+    color: var(--theme-blue);
+}

Resources/Private/JavaScript/asset-usage/src/components/AssetUsagesToggleButton.tsx

@@ -1,28 +1,43 @@
 import React from 'react';
 import { useRecoilState } from 'recoil';
 
-import { Button, Icon } from '@neos-project/react-ui-components';
+import { Badge, Button, Icon } from '@neos-project/react-ui-components';
 
 import { useIntl } from '@media-ui/core';
 import { useSelectedAsset } from '@media-ui/core/src/hooks';
 
 import assetUsageDetailsModalState from '../state/assetUsageDetailsModalState';
+import useAssetUsagesQuery from '@media-ui/feature-asset-usage/src/hooks/useAssetUsages';
+
+import classes from './AssetUsagesToggleButton.module.css';
 
 const AssetUsagesToggleButton: React.FC = () => {
-    const { isInUse } = useSelectedAsset();
+    const asset = useSelectedAsset();
+    const { assetUsageDetails, loading } = useAssetUsagesQuery(
+        asset ? { assetId: asset.id, assetSourceId: asset.assetSource.id } : null
+    );
     const [assetUsagesModalOpen, setAssetUsagesModalOpen] = useRecoilState(assetUsageDetailsModalState);
     const { translate } = useIntl();
+    const badgeTheme = { badge: 'primary'}
 
     return (
         <Button
-            disabled={isInUse === false}
+            disabled={asset.isInUse === false}
             size="regular"
             style={assetUsagesModalOpen ? 'brand' : 'lighter'}
             hoverStyle="brand"
             onClick={() => setAssetUsagesModalOpen(true)}
         >
             <Icon icon="link" />
             {translate('assetUsageList.toggle', 'Show usages')}
+            {assetUsageDetails?.[0]?.usages ? (
+                <Badge
+                    label={assetUsageDetails[0].usages.length}
+                    className={classes.assetUsageBadge}
+                />
+            ) : (
+                <></>
+            )}
         </Button>
     );
 };