From d66d3efdfa6e532033b3e83ca814a5eeaebc7f1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcin=20S=C4=85gol?= <kontakt@soee.pl>
Date: Sun, 5 Nov 2023 12:54:37 +0100
Subject: [PATCH] [TASK] Render asset usage counter inside inspector action
 buttons

---
 .../components/AssetUsageSection.module.css   | 16 +++++++--------
 .../AssetUsagesToggleButton.module.css        |  3 +++
 .../components/AssetUsagesToggleButton.tsx    | 20 ++++++++++++++++---
 3 files changed, 27 insertions(+), 12 deletions(-)
 create mode 100644 Resources/Private/JavaScript/asset-usage/src/components/AssetUsagesToggleButton.module.css

diff --git a/Resources/Private/JavaScript/asset-usage/src/components/AssetUsageSection.module.css b/Resources/Private/JavaScript/asset-usage/src/components/AssetUsageSection.module.css
index 2ac309ed9..9a822ac06 100644
--- a/Resources/Private/JavaScript/asset-usage/src/components/AssetUsageSection.module.css
+++ b/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 */
diff --git a/Resources/Private/JavaScript/asset-usage/src/components/AssetUsagesToggleButton.module.css b/Resources/Private/JavaScript/asset-usage/src/components/AssetUsagesToggleButton.module.css
new file mode 100644
index 000000000..e30eb40d9
--- /dev/null
+++ b/Resources/Private/JavaScript/asset-usage/src/components/AssetUsagesToggleButton.module.css
@@ -0,0 +1,3 @@
+.assetUsageBadge {
+    color: var(--theme-blue);
+}
diff --git a/Resources/Private/JavaScript/asset-usage/src/components/AssetUsagesToggleButton.tsx b/Resources/Private/JavaScript/asset-usage/src/components/AssetUsagesToggleButton.tsx
index b7c7a7d28..70005532d 100644
--- a/Resources/Private/JavaScript/asset-usage/src/components/AssetUsagesToggleButton.tsx
+++ b/Resources/Private/JavaScript/asset-usage/src/components/AssetUsagesToggleButton.tsx
@@ -1,21 +1,27 @@
 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();
 
     return (
         <Button
-            disabled={isInUse === false}
+            disabled={asset.isInUse === false}
             size="regular"
             style={assetUsagesModalOpen ? 'brand' : 'lighter'}
             hoverStyle="brand"
@@ -23,6 +29,14 @@ const AssetUsagesToggleButton: React.FC = () => {
         >
             <Icon icon="link" />
             {translate('assetUsageList.toggle', 'Show usages')}
+            {assetUsageDetails?.[0]?.usages ? (
+                <Badge
+                    label={assetUsageDetails[0].usages.length}
+                    className={classes.assetUsageBadge}
+                />
+            ) : (
+                <></>
+            )}
         </Button>
     );
 };