Creating a custom Addon bug - Added panel content blocks the Canvas and Docs tabs.

[jeremytenjo]

Describe the bug
I am building a Storybook Addon where I add content to a new Tab called Source.

The bug is that the content of the Source tab show up on the Canvas and Docs Tabs.

It only happens with content added after calling an API in a useEffect function.

In the demo you can see that the Open in Github button only appears in the Source Tab as expected but the File tree that is rendered after the api is called, blocks the Canvas and Docs tabs content.

import { addons, types } from '@storybook/addons'

import SourceTab  from '../SourceTab'

const ADDON_ID = 'myaddon_source'
const PANEL_ID = `${ADDON_ID}/source`

addons.register(ADDON_ID, () => {
  addons.add(PANEL_ID, {
    type: types.TAB,
    title: 'Source',
    //👇 Checks the current route for the story
    route: ({ storyId, refId }) =>
      refId ? `/mytab/${refId}_${storyId}` : `/mytab/${storyId}`,
    //👇 Shows the Tab UI element in mytab view mode
    match: ({ viewMode }) => {
      return viewMode === 'mytab'
    },
    render: () => <SourceTab />,
  })
})

SourceTab.js

import getGithubFiles from '../../../../src/data/github/getGithubFiles'
import FileTree from '../../../../src/dataDisplay/FileTree'

import * as S from './styles'

export default function SourceTab() {
  const [storyFiles, setStoryFiles] = useState([])

  const fetchStorySource = async () => {
    const githubFolderUrl = 'lib/src/dataDisplay/Avatar'

    const files = await getGithubFiles({
      owner: 'jeremytenjo',
      repo: 'tenjo-apps',
      path: githubFolderUrl,
    })
    setStoryFiles(files)
  }

  useEffect(() => {
    fetchStorySource()
  }, [])

  return (
    <S.Wrapper>
      <a
        href='https://github.com/jeremytenjo/tenjo-apps/tree/master/lib/src/dataDisplay/Avatar'
        target='_blank'
        rel='noreferrer'
      >
        Open in Github
      </a>


      <FileTree>
        {storyFiles.map((file) => (
          <Fragment key={file.sha}>
            {file.type === 'file' && <FileTree.File name={file.name} />}
            {file.type === 'dir' && <FileTree.Folder name={file.name} />}
          </Fragment>
        ))}
      </FileTree>
    </S.Wrapper>
  )
}

Help is much appreciated. Thanks!

[shilman]

I believe the render method takes an active property. Can you try that? Something like:

 render: ({ active, key }) => { if(active) { ... } },

[jeremytenjo]

I tried render: ({ active }) => { console.log(active) return <Ui /> },

but active returns undefined

[jeremytenjo]

Nevermind I was looking at the wrong addon type. I get the active property when rendering a tab addon.

Thanks!

[shilman]

Glad you got it sorted! 💯