feat: add reference count to asset list

sanity-io · Jul 5, 2023 · 1605a00 · 1605a00
1 parent a4397c7
commit 1605a00
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 3 deletions.
diff --git a/src/components/TableHeader/index.tsx b/src/components/TableHeader/index.tsx
@@ -93,6 +93,7 @@ const TableHeader = () => {
       <TableHeaderItem field="mimeType" title="MIME type" />
       <TableHeaderItem field="size" title="Size" />
       <TableHeaderItem field="_updatedAt" title="Last updated" />
+      <TableHeaderItem title="References" />
       <TableHeaderItem />
     </Grid>
   )

diff --git a/src/components/TableRowAsset/index.tsx b/src/components/TableRowAsset/index.tsx
@@ -1,5 +1,5 @@
 import {hues} from '@sanity/color'
-import {CheckmarkCircleIcon, EditIcon, WarningFilledIcon} from '@sanity/icons'
+import {CheckmarkCircleIcon, EditIcon, WarningFilledIcon, SpinnerIcon} from '@sanity/icons'
 import {
   Box,
   Checkbox,
@@ -27,6 +27,7 @@ import imageDprUrl from '../../utils/imageDprUrl'
 import {isFileAsset, isImageAsset} from '../../utils/typeGuards'
 import FileIcon from '../FileIcon'
 import Image from '../Image'
+import {WithReferringDocuments} from 'sanity'
 
 type Props = {
   id: string
@@ -310,12 +311,34 @@ const TableRowAsset = (props: Props) => {
         </Text>
       </Box>
 
+      {/* References */}
+      <Box
+        style={{
+          display: mediaIndex < 3 ? 'none' : 'block',
+          gridColumn: 8,
+          gridRow: 'auto',
+          opacity: opacityCell
+        }}
+      >
+        <Text muted size={1} style={{lineHeight: '2em'}} textOverflow="ellipsis">
+          <WithReferringDocuments id={id}>
+            {({isLoading, referringDocuments}) =>
+              isLoading ? (
+                <SpinnerIcon />
+              ) : (
+                <>{Array.isArray(referringDocuments) ? referringDocuments.length : 0}</>
+              )
+            }
+          </WithReferringDocuments>
+        </Text>
+      </Box>
+
       {/* Error */}
       <Flex
         align="center"
         justify="center"
         style={{
-          gridColumn: mediaIndex < 3 ? 4 : 8,
+          gridColumn: mediaIndex < 3 ? 4 : 9,
           gridRowStart: '1',
           gridRowEnd: mediaIndex < 3 ? 'span 5' : 'auto',
           opacity: opacityCell

diff --git a/src/constants.ts b/src/constants.ts
@@ -67,7 +67,7 @@ export const FACETS: (SearchFacetDivider | SearchFacetGroup | SearchFacetInputPr
 
 export const GRID_TEMPLATE_COLUMNS = {
   SMALL: '3rem 100px auto 1.5rem',
-  LARGE: '3rem 100px auto 5.5rem 5.5rem 3.5rem 8.5rem 2rem'
+  LARGE: '3rem 100px auto 5.5rem 5.5rem 3.5rem 8.5rem 5rem 2rem'
 }
 export const PANEL_HEIGHT = 32 // px
 export const TAG_DOCUMENT_NAME = 'media.tag'