Repository: storybookjs/storybook
File: code/core/src/manager/components/sidebar/Sidebar.tsx (TypeScript)

Code before:
  const tagPresets = useMemo(
    () =>
      Object.entries(global.TAGS_OPTIONS ?? {}).reduce((acc, entry) => {
        const [tag, option] = entry;
        acc[tag] = option;
        return acc;
      }, {} as TagsOptions),
    []
  );

  return (
    <Container className="container sidebar-container" aria-label="Global">
      <ScrollArea vertical offset={3} scrollbarSize={6} scrollPadding="4rem">
        <Stack>
          <div>
            <Heading
              className="sidebar-header"
              menuHighlighted={menuHighlighted}
              menu={menu}
              skipLinkHref="#storybook-preview-wrapper"
              isLoading={isLoading}
              onMenuClick={onMenuClick}
            />
            {!isLoading &&
              global.CONFIG_TYPE === 'DEVELOPMENT' &&
              global.FEATURES?.checklistWidget && <ChecklistWidget />}
          </div>
          <Search
            dataset={dataset}
            enableShortcuts={enableShortcuts}
            searchBarContent={
              showCreateStoryButton && (
                <>
                  <CreateNewStoryButton
                    isMobile={isMobile}
                    onClick={() => {
                      setIsFileSearchModalOpen(true);
                    }}
                    ariaLabel="Create a new story"
                    variant="outline"
                    padding="small"
                  >
                    <PlusIcon />
                  </CreateNewStoryButton>
                  <CreateNewStoryFileModal
                    open={isFileSearchModalOpen}
                    onOpenChange={setIsFileSearchModalOpen}
                  />
                </>
              )
            }

Review comment (suggestion):
In what cases can `FEATURES` be undefined? If it is, should we still use the default value of `true` for checklistWidget?

How about
```suggestion
              global.FEATURES?.checklistWidget !== false && <ChecklistWidget />}
```

Code after:
  const tagPresets = useMemo(
    () =>
      Object.entries(global.TAGS_OPTIONS ?? {}).reduce((acc, entry) => {
        const [tag, option] = entry;
        acc[tag] = option;
        return acc;
      }, {} as TagsOptions),
    []
  );

  return (
    <Container className="container sidebar-container" aria-label="Global">
      <ScrollArea vertical offset={3} scrollbarSize={6} scrollPadding="4rem">
        <Stack>
          <div>
            <Heading
              className="sidebar-header"
              menuHighlighted={menuHighlighted}
              menu={menu}
              skipLinkHref="#storybook-preview-wrapper"
              isLoading={isLoading}
              onMenuClick={onMenuClick}
            />
            {!isLoading &&
              global.CONFIG_TYPE === 'DEVELOPMENT' &&
              global.FEATURES?.sidebarOnboardingChecklist !== false && <ChecklistWidget />}
          </div>
          <Search
            dataset={dataset}
            enableShortcuts={enableShortcuts}
            searchBarContent={
              showCreateStoryButton && (
                <>
                  <CreateNewStoryButton
                    isMobile={isMobile}
                    onClick={() => {
                      setIsFileSearchModalOpen(true);
                    }}
                    ariaLabel="Create a new story"
                    variant="outline"
                    padding="small"
                  >
                    <PlusIcon />
                  </CreateNewStoryButton>
                  <CreateNewStoryFileModal
                    open={isFileSearchModalOpen}
                    onOpenChange={setIsFileSearchModalOpen}
                  />
                </>
              )
            }