document-internationalization icon indicating copy to clipboard operation
document-internationalization copied to clipboard

Expand documentation for `withTranslationMaintenance`

Open apennell opened this issue 2 years ago • 2 comments

The documentation for withTranslationMaintenance only says to set that key to true in the document-internationalization.json config, but that alone didn't make the translation maintenance tab show for in my studio. I do have a custom desk structure but I tried a lot of things, including removing my custom desk structure entirely, to get it to show and never saw it.

When I added import * as Structure from '@sanity/document-internationalization/lib/structure'; to my desk structure and Structure.getMaintenanceListItem().serialize() to the exported S.list.items([]), then it finally showed. If this is the correct way to implement it, please add that to the documentation as I only found that by literally searching all of GitHub for withTranslationsMaintenance 😆

If that shouldn't be necessary and it should work right out the box just by updating the key in the config... what might I be doing wrong, and is there something else we can put in the documentation to help future users correctly configure it from the start?

Thank you!

apennell avatar Jun 24 '22 23:06 apennell

Update 😁

I finally realized that I missed the part of the Desk Structure documentation that says you need to import the structure from document-internationalization. I already had my desk structure built and it was much more robust than the quick examples, so I must have skipped over it? But then after missing that, I did my own totally manual implementation where I filtered the document lists manually to only list the English versions of a given document type.

Given that, I'm amending my previous issue report to be:

  1. Take my mistake overlooking the desk structure part of the docs as an example of a user experience and do with that what you will 😄 Perhaps it's worth expanding a bit on the fact that it is a change from your existing custom structure, or at least also include import S from '@sanity/desk-tool/structure-builder'; so it's clear that both are being used.
  2. I looked at the example as well as the source code and I don't see a way to keep my custom desk structure (especially the custom order with dividers). Is this possible? If so, a more robust example showing that would be great.
  3. I still think it would be good to update the Translation Maintenance docs to mention that it gets added to the desk structure through the addition of the use of Structure from this plugin, as long as you you're applying Structure.getFilteredDocumentTypeListItems, and that you need to add Structure.getMaintenanceListItem().serialize(), to the list yourself if you're providing your own manual list.

apennell avatar Jun 24 '22 23:06 apennell

  • I looked at the example as well as the source code and I don't see a way to keep my custom desk structure (especially the custom order with dividers). Is this possible? If so, a more robust example showing that would be great.

Assuming this didn't change since sanity-plugin-intl-input, you can add the Maintenance tab in a couple different ways (not sure if there is any real difference between them so it might be better for you to try and decide which one works best for you).

// deskStructure.js
import S from '@sanity/desk-tool/structure-builder'
import * as Structure from 'sanity-plugin-intl-input/lib/structure'

export default () => {
  const items = Structure.getFilteredDocumentTypeListItems()
  const getLocalizedPosts = (type) => items.find((item) => [type].includes(item.spec.id)).getChild()

  return S.list().title('Content').items([
    S.listItem().title('Blog Articles').icon(RiArticleLine).child(getLocalizedPosts('blogPost')),
    S.listItem().title('Blog Authors').icon(RiUserLine).child(getLocalizedPosts('blogAuthor')),
    S.listItem().title('Blog Tags').icon(RiPriceTagLine).child(getLocalizedPosts('blogTag')),

    S.divider(),

    // NOTE: This one is the default list item imported from the package
    Structure.getMaintenanceListItem(),
    // NOTE: This one allows you to customize both title and icon
    // items[0].title('Translation Manager').icon(RiTranslate),
  ])
}

Please note you'll have to import Structure from the new official package instead of intl-input. I would assume everything else to still work the same.

Hope this helps solve your issue.

EDIT: Check #67 for another example.

hacknug avatar Sep 21 '22 09:09 hacknug