sanity-plugin-media 2.1.1 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-media",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "This version of `sanity-plugin-media` is for Sanity Studio V3.",
   "keywords": [
     "sanity",

package/src/components/DialogAssetEdit/index.tsx

@@ -6,6 +6,7 @@ import groq from 'groq'
 import React, {ReactNode, useCallback, useEffect, useRef, useState} from 'react'
 import {SubmitHandler, useForm} from 'react-hook-form'
 import {useDispatch} from 'react-redux'
+import {WithReferringDocuments, useDocumentStore} from 'sanity'
 import {assetFormSchema} from '../../formSchema'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import useVersionedClient from '../../hooks/useVersionedClient'
@@ -13,6 +14,7 @@ import {assetsActions, selectAssetById} from '../../modules/assets'
 import {dialogActions} from '../../modules/dialog'
 import {selectTags, selectTagSelectOptions, tagsActions} from '../../modules/tags'
 import getTagSelectOptions from '../../utils/getTagSelectOptions'
+import {getUniqueDocuments} from '../../utils/getUniqueDocuments'
 import imageDprUrl from '../../utils/imageDprUrl'
 import sanitizeFormData from '../../utils/sanitizeFormData'
 import {isFileAsset, isImageAsset} from '../../utils/typeGuards'
@@ -39,6 +41,8 @@ const DialogAssetEdit = (props: Props) => {
 
   const client = useVersionedClient()
 
+  const documentStore = useDocumentStore()
+
   const dispatch = useDispatch()
   const assetItem = useTypedSelector(state => selectAssetById(state, String(assetId))) // TODO: check casting
   const tags = useTypedSelector(selectTags)
@@ -238,110 +242,128 @@ const DialogAssetEdit = (props: Props) => {
       */}
       <Flex direction={['column-reverse', 'column-reverse', 'row-reverse']}>
         <Box flex={1} marginTop={[5, 5, 0]} padding={4}>
-          {/* Tabs */}
-          <TabList space={2}>
-            <Tab
-              aria-controls="details-panel"
-              disabled={formUpdating}
-              id="details-tab"
-              label="Details"
-              onClick={() => setTabSection('details')}
-              selected={tabSection === 'details'}
-              size={2}
-            />
-            <Tab
-              aria-controls="references-panel"
-              disabled={formUpdating}
-              id="references-tab"
-              label="References"
-              onClick={() => setTabSection('references')}
-              selected={tabSection === 'references'}
-              size={2}
-            />
-          </TabList>
-
-          {/* Form fields */}
-          <Box as="form" marginTop={4} onSubmit={handleSubmit(onSubmit)}>
-            {/* Deleted notification */}
-            {!assetItem && (
-              <Card marginBottom={3} padding={3} radius={2} shadow={1} tone="critical">
-                <Text size={1}>This file cannot be found – it may have been deleted.</Text>
-              </Card>
-            )}
-
-            {/* Hidden button to enable enter key submissions */}
-            <button style={{display: 'none'}} tabIndex={-1} type="submit" />
-
-            {/* Panel: details */}
-            <TabPanel
-              aria-labelledby="details"
-              hidden={tabSection !== 'details'}
-              id="details-panel"
-            >
-              <Stack space={3}>
-                {/* Tags */}
-                <FormFieldInputTags
-                  control={control}
-                  disabled={formUpdating}
-                  error={errors?.opt?.media?.tags?.message}
-                  label="Tags"
-                  name="opt.media.tags"
-                  onCreateTag={handleCreateTag}
-                  options={allTagOptions}
-                  placeholder="Select or create..."
-                  value={assetTagOptions}
-                />
-                {/* Filename */}
-                <FormFieldInputText
-                  {...register('originalFilename')}
-                  disabled={formUpdating}
-                  error={errors?.originalFilename?.message}
-                  label="Filename"
-                  name="originalFilename"
-                  value={currentAsset?.originalFilename}
-                />
-                {/* Title */}
-                <FormFieldInputText
-                  {...register('title')}
-                  disabled={formUpdating}
-                  error={errors?.title?.message}
-                  label="Title"
-                  name="title"
-                  value={currentAsset?.title}
-                />
-                {/* Alt text */}
-                <FormFieldInputText
-                  {...register('altText')}
-                  disabled={formUpdating}
-                  error={errors?.altText?.message}
-                  label="Alt Text"
-                  name="altText"
-                  value={currentAsset?.altText}
-                />
-                {/* Description */}
-                <FormFieldInputTextarea
-                  {...register('description')}
-                  disabled={formUpdating}
-                  error={errors?.description?.message}
-                  label="Description"
-                  name="description"
-                  rows={3}
-                  value={currentAsset?.description}
-                />
-              </Stack>
-            </TabPanel>
-
-            {/* Panel: References */}
-            <TabPanel
-              aria-labelledby="references"
-              hidden={tabSection !== 'references'}
-              id="references-panel"
-            >
-              <Box marginTop={5}>
-                {assetItem?.asset && <DocumentList assetId={assetItem?.asset._id} />}
-              </Box>
-            </TabPanel>
-          </Box>
+          <WithReferringDocuments documentStore={documentStore} id={assetItem.asset._id}>
+            {({isLoading, referringDocuments}) => {
+              const uniqueReferringDocuments = getUniqueDocuments(referringDocuments)
+              return (
+                <>
+                  {/* Tabs */}
+                  <TabList space={2}>
+                    <Tab
+                      aria-controls="details-panel"
+                      disabled={formUpdating}
+                      id="details-tab"
+                      label="Details"
+                      onClick={() => setTabSection('details')}
+                      selected={tabSection === 'details'}
+                      size={2}
+                    />
+                    <Tab
+                      aria-controls="references-panel"
+                      disabled={formUpdating}
+                      id="references-tab"
+                      label={`References${
+                        !isLoading && Array.isArray(uniqueReferringDocuments)
+                          ? ` (${uniqueReferringDocuments.length})`
+                          : ''
+                      }`}
+                      onClick={() => setTabSection('references')}
+                      selected={tabSection === 'references'}
+                      size={2}
+                    />
+                  </TabList>
+
+                  {/* Form fields */}
+                  <Box as="form" marginTop={4} onSubmit={handleSubmit(onSubmit)}>
+                    {/* Deleted notification */}
+                    {!assetItem && (
+                      <Card marginBottom={3} padding={3} radius={2} shadow={1} tone="critical">
+                        <Text size={1}>This file cannot be found – it may have been deleted.</Text>
+                      </Card>
+                    )}
+
+                    {/* Hidden button to enable enter key submissions */}
+                    <button style={{display: 'none'}} tabIndex={-1} type="submit" />
+
+                    {/* Panel: details */}
+                    <TabPanel
+                      aria-labelledby="details"
+                      hidden={tabSection !== 'details'}
+                      id="details-panel"
+                    >
+                      <Stack space={3}>
+                        {/* Tags */}
+                        <FormFieldInputTags
+                          control={control}
+                          disabled={formUpdating}
+                          error={errors?.opt?.media?.tags?.message}
+                          label="Tags"
+                          name="opt.media.tags"
+                          onCreateTag={handleCreateTag}
+                          options={allTagOptions}
+                          placeholder="Select or create..."
+                          value={assetTagOptions}
+                        />
+                        {/* Filename */}
+                        <FormFieldInputText
+                          {...register('originalFilename')}
+                          disabled={formUpdating}
+                          error={errors?.originalFilename?.message}
+                          label="Filename"
+                          name="originalFilename"
+                          value={currentAsset?.originalFilename}
+                        />
+                        {/* Title */}
+                        <FormFieldInputText
+                          {...register('title')}
+                          disabled={formUpdating}
+                          error={errors?.title?.message}
+                          label="Title"
+                          name="title"
+                          value={currentAsset?.title}
+                        />
+                        {/* Alt text */}
+                        <FormFieldInputText
+                          {...register('altText')}
+                          disabled={formUpdating}
+                          error={errors?.altText?.message}
+                          label="Alt Text"
+                          name="altText"
+                          value={currentAsset?.altText}
+                        />
+                        {/* Description */}
+                        <FormFieldInputTextarea
+                          {...register('description')}
+                          disabled={formUpdating}
+                          error={errors?.description?.message}
+                          label="Description"
+                          name="description"
+                          rows={3}
+                          value={currentAsset?.description}
+                        />
+                      </Stack>
+                    </TabPanel>
+
+                    {/* Panel: References */}
+                    <TabPanel
+                      aria-labelledby="references"
+                      hidden={tabSection !== 'references'}
+                      id="references-panel"
+                    >
+                      <Box marginTop={5}>
+                        {assetItem?.asset && (
+                          <DocumentList
+                            documents={uniqueReferringDocuments}
+                            isLoading={isLoading}
+                          />
+                        )}
+                      </Box>
+                    </TabPanel>
+                  </Box>
+                </>
+              )
+            }}
+          </WithReferringDocuments>
         </Box>
 
         <Box flex={1} padding={4}>

package/src/components/DocumentList/index.tsx

@@ -1,54 +1,37 @@
 import type {SanityDocument} from '@sanity/client'
 import {Box, Button, Card, Stack, Text} from '@sanity/ui'
 import React from 'react'
-import {Preview, SchemaType, useDocumentStore, useSchema, WithReferringDocuments} from 'sanity'
+import {Preview, SchemaType, useSchema} from 'sanity'
 import {useIntentLink} from 'sanity/router'
 
 type Props = {
-  assetId: string
+  documents: SanityDocument[]
+  isLoading: boolean
 }
 
-const DocumentList = (props: Props) => {
-  const {assetId} = props
-
-  const documentStore = useDocumentStore()
-
-  return (
-    <WithReferringDocuments documentStore={documentStore} id={assetId}>
-      {({isLoading, referringDocuments}) => (
-        <ReferringDocuments isLoading={isLoading} referringDocuments={referringDocuments} />
-      )}
-    </WithReferringDocuments>
-  )
-}
-
-const ReferringDocuments = (props: {isLoading: boolean; referringDocuments: SanityDocument[]}) => {
-  const {isLoading, referringDocuments} = props
-
+const DocumentList = ({documents, isLoading}: Props) => {
   const schema = useSchema()
 
-  const draftIds = referringDocuments.reduce(
-    (acc: string[], doc: SanityDocument) =>
-      doc._id.startsWith('drafts.') ? acc.concat(doc._id.slice(7)) : acc,
-    []
-  )
-
-  const filteredDocuments: SanityDocument[] = referringDocuments.filter(
-    (doc: SanityDocument) => !draftIds.includes(doc._id)
-  )
-
   if (isLoading) {
-    return <Text size={1}>Loading...</Text>
+    return (
+      <Text muted size={1}>
+        Loading...
+      </Text>
+    )
   }
 
-  if (filteredDocuments.length === 0) {
-    return <Text size={1}>No documents are referencing this asset</Text>
+  if (documents.length === 0) {
+    return (
+      <Text muted size={1}>
+        No documents are referencing this asset
+      </Text>
+    )
   }
 
   return (
     <Card flex={1} marginBottom={2} padding={2} radius={2} shadow={1}>
       <Stack space={2}>
-        {filteredDocuments?.map(doc => (
+        {documents?.map(doc => (
           <ReferringDocument doc={doc} key={doc._id} schemaType={schema.get(doc._type)} />
         ))}
       </Stack>

package/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>
   )

package/src/components/TableRowAsset/index.tsx

@@ -13,8 +13,9 @@ import {
 } from '@sanity/ui'
 import formatRelative from 'date-fns/formatRelative'
 import filesize from 'filesize'
-import React, {memo, MouseEvent, RefObject} from 'react'
+import React, {memo, MouseEvent, RefObject, useCallback, useEffect, useRef, useState} from 'react'
 import {useDispatch} from 'react-redux'
+import {WithReferringDocuments} from 'sanity'
 import styled, {css} from 'styled-components'
 import {GRID_TEMPLATE_COLUMNS} from '../../constants'
 import {useAssetSourceActions} from '../../contexts/AssetSourceDispatchContext'
@@ -27,6 +28,10 @@ import imageDprUrl from '../../utils/imageDprUrl'
 import {isFileAsset, isImageAsset} from '../../utils/typeGuards'
 import FileIcon from '../FileIcon'
 import Image from '../Image'
+import {getUniqueDocuments} from '../../utils/getUniqueDocuments'
+
+// Duration (ms) to wait before reference counts (and associated listeners) are rendered
+const REFERENCE_COUNT_VISIBILITY_DELAY = 750
 
 type Props = {
   id: string
@@ -68,13 +73,15 @@ const StyledWarningIcon = styled(WarningFilledIcon)(({theme}) => {
   }
 })
 
+// eslint-disable-next-line complexity
 const TableRowAsset = (props: Props) => {
   const {id, selected} = props
 
-  // Refs
   const shiftPressed: RefObject<boolean> = useKeyPress('shift')
 
-  // Redux
+  const [referenceCountVisible, setReferenceCountVisible] = useState(false)
+  const refCountVisibleTimeout = useRef<ReturnType<typeof window.setTimeout>>()
+
   const dispatch = useDispatch()
   const lastPicked = useTypedSelector(state => state.assets.lastPicked)
   const item = useTypedSelector(state => selectAssetById(state, id))
@@ -89,48 +96,61 @@ const TableRowAsset = (props: Props) => {
 
   const {onSelect} = useAssetSourceActions()
 
-  // Short circuit if no asset is available
-  if (!asset) {
-    return null
-  }
-
-  // Callbacks
-  const handleContextActionClick = (e: MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation()
+  const handleContextActionClick = useCallback(
+    (e: MouseEvent<HTMLDivElement>) => {
+      e.stopPropagation()
 
-    if (onSelect) {
-      dispatch(dialogActions.showAssetEdit({assetId: asset._id}))
-    } else if (shiftPressed.current && !picked) {
-      dispatch(assetsActions.pickRange({startId: lastPicked || asset._id, endId: asset._id}))
-    } else {
-      dispatch(assetsActions.pick({assetId: asset._id, picked: !picked}))
-    }
-  }
+      if (onSelect) {
+        dispatch(dialogActions.showAssetEdit({assetId: asset._id}))
+      } else if (shiftPressed.current && !picked) {
+        dispatch(assetsActions.pickRange({startId: lastPicked || asset._id, endId: asset._id}))
+      } else {
+        dispatch(assetsActions.pick({assetId: asset._id, picked: !picked}))
+      }
+    },
+    [asset._id, dispatch, lastPicked, onSelect, picked, shiftPressed]
+  )
 
-  const handleClick = (e: MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation()
+  const handleClick = useCallback(
+    (e: MouseEvent<HTMLDivElement>) => {
+      e.stopPropagation()
 
-    if (onSelect) {
-      onSelect([
-        {
-          kind: 'assetDocumentId',
-          value: asset._id
+      if (onSelect) {
+        onSelect([{kind: 'assetDocumentId', value: asset._id}])
+      } else if (shiftPressed.current) {
+        if (picked) {
+          dispatch(assetsActions.pick({assetId: asset._id, picked: !picked}))
+        } else {
+          dispatch(assetsActions.pickRange({startId: lastPicked || asset._id, endId: asset._id}))
         }
-      ])
-    } else if (shiftPressed.current) {
-      if (picked) {
-        dispatch(assetsActions.pick({assetId: asset._id, picked: !picked}))
       } else {
-        dispatch(assetsActions.pickRange({startId: lastPicked || asset._id, endId: asset._id}))
+        dispatch(dialogActions.showAssetEdit({assetId: asset._id}))
       }
-    } else {
-      dispatch(dialogActions.showAssetEdit({assetId: asset._id}))
-    }
-  }
+    },
+    [asset._id, dispatch, lastPicked, onSelect, picked, shiftPressed]
+  )
 
   const opacityCell = updating ? 0.5 : 1
   const opacityPreview = selected || updating ? 0.1 : 1
 
+  // Display reference count after an initial delay to prevent over-eager fetching
+  useEffect(() => {
+    refCountVisibleTimeout.current = setTimeout(
+      () => setReferenceCountVisible(true),
+      REFERENCE_COUNT_VISIBILITY_DELAY
+    )
+    return () => {
+      if (refCountVisibleTimeout.current) {
+        clearTimeout(refCountVisibleTimeout.current)
+      }
+    }
+  }, [])
+
+  // Short circuit if no asset is available
+  if (!asset) {
+    return null
+  }
+
   return (
     <ContainerGrid
       onClick={selected ? undefined : handleClick}
@@ -310,12 +330,39 @@ 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">
+          {referenceCountVisible ? (
+            <WithReferringDocuments id={id}>
+              {({isLoading, referringDocuments}) => {
+                const uniqueDocuments = getUniqueDocuments(referringDocuments)
+                return isLoading ? (
+                  <>-</>
+                ) : (
+                  <>{Array.isArray(uniqueDocuments) ? uniqueDocuments.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

package/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 4.75rem 2rem'
 }
 export const PANEL_HEIGHT = 32 // px
 export const TAG_DOCUMENT_NAME = 'media.tag'

package/src/utils/getUniqueDocuments.ts

@@ -0,0 +1,15 @@
+import {SanityDocument} from '@sanity/client'
+
+export function getUniqueDocuments(documents: SanityDocument[]): SanityDocument[] {
+  const draftIds = documents.reduce(
+    (acc: string[], doc: SanityDocument) =>
+      doc._id.startsWith('drafts.') ? acc.concat(doc._id.slice(7)) : acc,
+    []
+  )
+
+  const filteredDocuments: SanityDocument[] = documents.filter(
+    (doc: SanityDocument) => !draftIds.includes(doc._id)
+  )
+
+  return filteredDocuments
+}