### What?
TypeScript says that it is possible to modify the tab of the default
view however, when you specify the path to the custom component, nothing
happens. I fixed it.
### How?
If a Component for the tab of the default view is defined in the config,
I return that Component instead of DocumentTab
### Example Configuration
config.ts
```ts
export const MenuGlobal: GlobalConfig = {
slug: menuSlug,
fields: [
{
name: 'globalText',
type: 'text',
},
],
admin: {
components: {
views: {
edit: {
api: {
tab: {
Component: './TestComponent.tsx',
},
},
},
},
},
},
}
```
./TestComponent.tsx
```tsx
const TestComponent = () => 'example'
export default TestComponent
```
### Before

### After

---------
Co-authored-by: Jacob Fletcher <jacobsfletch@gmail.com>
21 lines
463 B
TypeScript
21 lines
463 B
TypeScript
import type { DocumentTabServerProps } from 'payload'
|
|
|
|
import React from 'react'
|
|
|
|
import { CustomTabComponentClient } from './client.js'
|
|
import './index.scss'
|
|
|
|
type CustomTabComponentProps = {
|
|
label: string
|
|
} & DocumentTabServerProps
|
|
|
|
export function CustomTabComponent(props: CustomTabComponentProps) {
|
|
const { label, path } = props
|
|
|
|
return (
|
|
<li className="custom-doc-tab">
|
|
<CustomTabComponentClient label={label} path={path} />
|
|
</li>
|
|
)
|
|
}
|