Skip to content

Commit

Permalink
fix: re-enable references tab panel
Browse files Browse the repository at this point in the history
  • Loading branch information
robinpyon committed Oct 6, 2022
1 parent 100f3eb commit ac698b3
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 102 deletions.
7 changes: 0 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -98,13 +98,6 @@ export default createConfig({

## Known issues

<details>
<summary>(V3) Where has the references tab gone?</summary>

- This will be enabled in a future version!

</details>

<details>
<summary>There isn't a way to edit asset fields directly from the desk (without opening the plugin)</summary>

Expand Down
15 changes: 4 additions & 11 deletions src/components/DialogAssetEdit/index.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import {yupResolver} from '@hookform/resolvers/yup'
import {useClient} from 'sanity'
import type {MutationEvent} from '@sanity/client'
import {Box, Button, Card, Flex, Stack, TabPanel, Text} from '@sanity/ui'
import {Box, Button, Card, Flex, Stack, Tab, TabList, TabPanel, Text} from '@sanity/ui'
import {Asset, DialogAssetEditProps, ReactSelectOption} from '@types'
import groq from 'groq'
import React, {ReactNode, useEffect, useRef, useState} from 'react'
import {useForm} from 'react-hook-form'
import {useDispatch} from 'react-redux'
import {useClient} from 'sanity'
import * as yup from 'yup'
import useTypedSelector from '../../hooks/useTypedSelector'
import {assetsActions, selectAssetById} from '../../modules/assets'
Expand All @@ -18,7 +18,7 @@ import sanitizeFormData from '../../utils/sanitizeFormData'
import {isFileAsset, isImageAsset} from '../../utils/typeGuards'
import AssetMetadata from '../AssetMetadata'
import Dialog from '../Dialog'
// import DocumentList from '../DocumentList'
import DocumentList from '../DocumentList'
import FileAssetPreview from '../FileAssetPreview'
import FormFieldInputFilename from '../FormFieldInputFilename'
import FormFieldInputTags from '../FormFieldInputTags'
Expand Down Expand Up @@ -62,10 +62,7 @@ const DialogAssetEdit = (props: Props) => {
// State
// - Generate a snapshot of the current asset
const [assetSnapshot, setAssetSnapshot] = useState(assetItem?.asset)
const [
tabSection
// setTabSection
] = useState<'details' | 'references'>('details')
const [tabSection, setTabSection] = useState<'details' | 'references'>('details')

const currentAsset = assetItem ? assetItem?.asset : assetSnapshot
const allTagOptions = getTagSelectOptions(tags)
Expand Down Expand Up @@ -273,7 +270,6 @@ 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"
Expand All @@ -294,7 +290,6 @@ const DialogAssetEdit = (props: Props) => {
size={2}
/>
</TabList>
*/}

{/* Form fields */}
<Box as="form" marginTop={4} onSubmit={handleSubmit(onSubmit)}>
Expand Down Expand Up @@ -369,7 +364,6 @@ const DialogAssetEdit = (props: Props) => {
</TabPanel>

{/* Panel: References */}
{/*
<TabPanel
aria-labelledby="references"
hidden={tabSection !== 'references'}
Expand All @@ -379,7 +373,6 @@ const DialogAssetEdit = (props: Props) => {
{assetItem?.asset && <DocumentList assetId={assetItem?.asset._id} />}
</Box>
</TabPanel>
*/}
</Box>
</Box>

Expand Down
143 changes: 59 additions & 84 deletions src/components/DocumentList/index.tsx
Original file line number Diff line number Diff line change
@@ -1,107 +1,82 @@
/*
import type {SanityDocument} from '@sanity/client'
import {Box, Card, Text} from '@sanity/ui'
import {IntentLink} from 'part:sanity/router'
import Preview from 'part:sanity/preview'
import schema from 'part:sanity/schema'
import {WithReferringDocuments} from 'part:sanity/with-referring-documents'
import {Box, Button, Card, Stack, Text} from '@sanity/ui'
import React from 'react'
import styled from 'styled-components'
import {useIntentLink, useSchema} from 'sanity'
import {SanityPreview, useDocumentStore, WithReferringDocuments} from 'sanity/_unstable'

type Props = {
assetId: string
}

// Brute force styles on all of Sanity's preview components.
// TODO: Consider using a custom preview component that is able to resolve custom titles
// (and potentially subtitles) defined at the document schema level. Or anything to ensure
// that future upstream changes to Sanity's preview components don't break anything here.
const Container = styled(Box)`
* {
color: ${props => props.theme.sanity.color.base.fg};
}
a {
text-decoration: none;
}
h2 {
font-size: ${props => props.theme.sanity.fonts.text.sizes[1]};
}
`
const DocumentList = (props: Props) => {
const {assetId} = props

const renderChild = (renderProps: {isLoading: boolean; referringDocuments: SanityDocument}) => {
const {isLoading, referringDocuments} = renderProps
const documentStore = useDocumentStore()

const draftIds = referringDocuments.reduce(
(acc: string[], doc: SanityDocument) =>
doc._id.startsWith('drafts.') ? acc.concat(doc._id.slice(7)) : acc,
[]
)
return (
<WithReferringDocuments documentStore={documentStore} id={assetId}>
{({isLoading, referringDocuments}) => (
<ReferringDocuments isLoading={isLoading} referringDocuments={referringDocuments} />
)}
</WithReferringDocuments>
)
}

const filteredDocuments: SanityDocument[] = referringDocuments.filter(
(doc: SanityDocument) => !draftIds.includes(doc._id)
)
const ReferringDocuments = (props: {isLoading: boolean; referringDocuments: SanityDocument[]}) => {
const {isLoading, referringDocuments} = props

if (isLoading) {
return <Text size={1}>Loading...</Text>
}
const schema = useSchema()

if (filteredDocuments.length === 0) {
return <Text size={1}>No documents are referencing this asset</Text>
}
const draftIds = referringDocuments.reduce(
(acc: string[], doc: SanityDocument) =>
doc._id.startsWith('drafts.') ? acc.concat(doc._id.slice(7)) : acc,
[]
)

return filteredDocuments?.map(doc => {
const schemaType = schema.get(doc._type)
const filteredDocuments: SanityDocument[] = referringDocuments.filter(
(doc: SanityDocument) => !draftIds.includes(doc._id)
)

return (
<Card
key={doc._id}
marginBottom={2}
padding={2}
radius={2}
shadow={1}
style={{overflow: 'hidden'}}
>
<Box>
{schemaType ? (
<IntentLink intent="edit" params={{id: doc._id}} key={doc._id}>
<Preview layout="default" value={doc} type={schemaType} />
</IntentLink>
) : (
<Box padding={2}>
<Text size={1}>
A document of the unknown type <em>{doc._type}</em>
</Text>
</Box>
)}
</Box>
</Card>
)
})
if (isLoading) {
return <Text size={1}>Loading...</Text>
}

if (filteredDocuments.length === 0) {
return <Text size={1}>No documents are referencing this asset</Text>
}

return (
<Container>
<WithReferringDocuments id={assetId}>{renderChild}</WithReferringDocuments>
</Container>
<Card flex={1} marginBottom={2} padding={2} radius={2} shadow={1}>
<Stack space={2}>
{filteredDocuments?.map(doc => {
const schemaType = schema.get(doc._type)

const {onClick} = useIntentLink({
intent: 'edit',
params: {id: doc._id}
})

return schemaType ? (
<Button
key={doc._id}
mode="bleed"
onClick={onClick}
padding={2}
style={{width: '100%'}}
>
<SanityPreview layout="default" schemaType={schemaType} value={doc} />
</Button>
) : (
<Box padding={2}>
<Text size={1}>
A document of the unknown type <em>{doc._type}</em>
</Text>
</Box>
)
})}
</Stack>
</Card>
)
}
*/

import React from 'react'
import {Text} from '@sanity/ui'

type Props = {
assetId: string
}

const DocumentList = (props: Props) => {
const {assetId} = props
return <Text>Document list for Asset with ID {assetId} should go here</Text>
}

export default DocumentList

0 comments on commit ac698b3

Please sign in to comment.