From 91ba14a749fa5bf71d69e5b7d58c58854d123ce2 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 10 Jul 2023 11:58:16 +0200
Subject: [PATCH 1/9] Add UI for notification toggle and link sharing to 'Whats
 New'

---
 code/lib/core-events/src/index.ts             |   2 +
 code/lib/manager-api/src/modules/whatsnew.ts  |   5 +
 code/ui/manager/src/globals/exports.ts        |   1 +
 code/ui/manager/src/settings/whats_new.tsx    | 107 ++++++++++++++++--
 .../src/settings/whats_new_footer.stories.tsx |  22 ++++
 5 files changed, 130 insertions(+), 7 deletions(-)
 create mode 100644 code/ui/manager/src/settings/whats_new_footer.stories.tsx

diff --git a/code/lib/core-events/src/index.ts b/code/lib/core-events/src/index.ts
index 64a452dc11f2..ce13b5385ca8 100644
--- a/code/lib/core-events/src/index.ts
+++ b/code/lib/core-events/src/index.ts
@@ -68,6 +68,7 @@ enum events {
   REQUEST_WHATS_NEW_DATA = 'requestWhatsNewData',
   RESULT_WHATS_NEW_DATA = 'resultWhatsNewData',
   SET_WHATS_NEW_CACHE = 'setWhatsNewCache',
+  TOGGLE_WHATS_NEW_NOTIFICATIONS = 'toggleWhatsNewNotifications',
 }
 
 // Enables: `import Events from ...`
@@ -118,6 +119,7 @@ export const {
   REQUEST_WHATS_NEW_DATA,
   RESULT_WHATS_NEW_DATA,
   SET_WHATS_NEW_CACHE,
+  TOGGLE_WHATS_NEW_NOTIFICATIONS,
 } = events;
 
 // Used to break out of the current render without showing a redbox
diff --git a/code/lib/manager-api/src/modules/whatsnew.ts b/code/lib/manager-api/src/modules/whatsnew.ts
index b970d0e96bac..9633c4f73dd3 100644
--- a/code/lib/manager-api/src/modules/whatsnew.ts
+++ b/code/lib/manager-api/src/modules/whatsnew.ts
@@ -4,6 +4,7 @@ import {
   REQUEST_WHATS_NEW_DATA,
   RESULT_WHATS_NEW_DATA,
   SET_WHATS_NEW_CACHE,
+  TOGGLE_WHATS_NEW_NOTIFICATIONS,
 } from '@storybook/core-events';
 import type { ModuleFn } from '../index';
 
@@ -14,6 +15,7 @@ export type SubState = {
 export type SubAPI = {
   isWhatsNewUnread(): boolean;
   whatsNewHasBeenRead(): void;
+  toggleWhatsNewNotifications(): void;
 };
 
 const WHATS_NEW_NOTIFICATION_ID = 'whats-new';
@@ -39,6 +41,9 @@ export const init: ModuleFn = ({ fullAPI, store }) => {
         fullAPI.clearNotification(WHATS_NEW_NOTIFICATION_ID);
       }
     },
+    toggleWhatsNewNotifications() {
+      fullAPI.emit(TOGGLE_WHATS_NEW_NOTIFICATIONS);
+    },
   };
 
   function getLatestWhatsNewPost(): Promise<WhatsNewData> {
diff --git a/code/ui/manager/src/globals/exports.ts b/code/ui/manager/src/globals/exports.ts
index 473867f750c0..43b7c50f5191 100644
--- a/code/ui/manager/src/globals/exports.ts
+++ b/code/ui/manager/src/globals/exports.ts
@@ -163,6 +163,7 @@ export default {
     'STORY_SPECIFIED',
     'STORY_THREW_EXCEPTION',
     'STORY_UNCHANGED',
+    'TOGGLE_WHATS_NEW_NOTIFICATIONS',
     'UPDATE_GLOBALS',
     'UPDATE_QUERY_PARAMS',
     'UPDATE_STORY_ARGS',
diff --git a/code/ui/manager/src/settings/whats_new.tsx b/code/ui/manager/src/settings/whats_new.tsx
index 4f0b5072259e..1dbadd82608a 100644
--- a/code/ui/manager/src/settings/whats_new.tsx
+++ b/code/ui/manager/src/settings/whats_new.tsx
@@ -1,8 +1,9 @@
-import type { FC, ComponentProps } from 'react';
-import React, { useEffect, useState, Fragment } from 'react';
-import { styled } from '@storybook/theming';
-import { Icons, Loader } from '@storybook/components';
+import type { ComponentProps, FC } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
+import { styled, useTheme } from '@storybook/theming';
+import { IconButton, Icons, Loader } from '@storybook/components';
 import { useStorybookApi } from '@storybook/manager-api';
+import { global } from '@storybook/global';
 
 const Centered = styled.div({
   top: '50%',
@@ -26,6 +27,74 @@ const Message = styled.div(({ theme }) => ({
   lineHeight: `16px`,
 }));
 
+const Container = styled.div(({ theme }) => ({
+  position: 'absolute',
+  width: '100%',
+  bottom: '40px',
+  background: theme.background.bar,
+  fontSize: `13px`,
+  borderTop: '1px solid',
+  borderColor: theme.appBorderColor,
+  padding: '8px 12px',
+  display: 'flex',
+  justifyContent: 'space-between',
+}));
+
+const ToggleNotificationButton = styled(IconButton)(({ theme }) => ({
+  fontWeight: theme.typography.weight.regular,
+  color: theme.color.mediumdark,
+  margin: 0,
+}));
+
+const CopyButton = styled(IconButton)(() => ({
+  margin: 0,
+  padding: 0,
+  borderRadius: 0,
+}));
+
+export const WhatsNewFooter = ({
+  isNotificationsDisabled,
+  onToggleNotifications,
+  onCopyLink,
+}: {
+  isNotificationsDisabled: boolean;
+  onToggleNotifications?: () => void;
+  onCopyLink?: () => void;
+}) => {
+  const theme = useTheme();
+  const [copyText, setCopyText] = useState('Copy Link');
+  const copyLink = () => {
+    onCopyLink();
+    setCopyText('Copied!');
+    setTimeout(() => setCopyText('Copy Link'), 4000);
+  };
+
+  return (
+    <Container>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+        <Icons icon="heart" color={theme.color.mediumdark} />
+        <div>Share this with your team.</div>
+        <CopyButton onClick={copyLink} small>
+          {copyText}
+        </CopyButton>
+      </div>
+      <ToggleNotificationButton onClick={onToggleNotifications}>
+        {isNotificationsDisabled ? (
+          <>
+            <Icons icon="eye" />
+            &nbsp;Show notifications
+          </>
+        ) : (
+          <>
+            <Icons icon="eyeclose" />
+            &nbsp;Hide notifications
+          </>
+        )}
+      </ToggleNotificationButton>
+    </Container>
+  );
+};
+
 const Iframe = styled.iframe<{ isLoaded: boolean }>(
   {
     position: 'absolute',
@@ -37,7 +106,7 @@ const Iframe = styled.iframe<{ isLoaded: boolean }>(
     margin: 0,
     padding: 0,
     width: '100%',
-    height: 'calc(100% - 40px)',
+    height: 'calc(100% - 80px)',
   },
   ({ isLoaded }) => ({ visibility: isLoaded ? 'visible' : 'hidden' })
 );
@@ -72,15 +141,31 @@ export interface WhatsNewProps {
   isLoaded: boolean;
   onLoad: () => void;
   url?: string;
+  onCopyLink?: () => void;
+  onToggleNotifications?: () => void;
 }
 
-const PureWhatsNewScreen: FC<WhatsNewProps> = ({ didHitMaxWaitTime, isLoaded, onLoad, url }) => (
+const PureWhatsNewScreen: FC<WhatsNewProps> = ({
+  didHitMaxWaitTime,
+  isLoaded,
+  onLoad,
+  url,
+  onCopyLink,
+  onToggleNotifications,
+}) => (
   <Fragment>
     {!isLoaded && !didHitMaxWaitTime && <WhatsNewLoader />}
     {didHitMaxWaitTime ? (
       <MaxWaitTimeMessaging />
     ) : (
-      <Iframe isLoaded={isLoaded} onLoad={onLoad} src={url} title={`What's new?`} />
+      <>
+        <Iframe isLoaded={isLoaded} onLoad={onLoad} src={url} title={`What's new?`} />
+        <WhatsNewFooter
+          isNotificationsDisabled
+          onToggleNotifications={onToggleNotifications}
+          onCopyLink={onCopyLink}
+        />
+      </>
     )}
   </Fragment>
 );
@@ -108,6 +193,14 @@ const WhatsNewScreen: FC<Omit<WhatsNewProps, 'isLoaded' | 'onLoad' | 'didHitMaxW
         setLoaded(true);
       }}
       url={url}
+      onCopyLink={() => {
+        navigator.clipboard.writeText(url);
+      }}
+      onToggleNotifications={() => {
+        if (global.confirm('All update notifications will no longer be shown. Are you sure?')) {
+          api.toggleWhatsNewNotifications();
+        }
+      }}
     />
   );
 };
diff --git a/code/ui/manager/src/settings/whats_new_footer.stories.tsx b/code/ui/manager/src/settings/whats_new_footer.stories.tsx
new file mode 100644
index 000000000000..f36187b37d78
--- /dev/null
+++ b/code/ui/manager/src/settings/whats_new_footer.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { WhatsNewFooter } from './whats_new';
+
+const meta = {
+  component: WhatsNewFooter,
+} satisfies Meta<typeof WhatsNewFooter>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    isNotificationsDisabled: false,
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/ur4kydUbRqdDyfoZWzdiIw/Storybook-app?type=design&node-id=9562-117308&mode=design&t=dJUhQrYPI3PCqPg2-4',
+    },
+  },
+};

From 3a953165da9ad0bb940164cc043c9438fafb7c37 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 10 Jul 2023 14:55:50 +0200
Subject: [PATCH 2/9] Move feature toggle to core config

---
 code/builders/builder-manager/src/index.ts           |  4 ++++
 code/builders/builder-manager/src/utils/data.ts      |  2 ++
 code/builders/builder-manager/src/utils/template.ts  | 11 ++++++++++-
 code/lib/core-server/src/presets/common-preset.ts    | 12 +++++++++++-
 code/lib/manager-api/src/modules/whatsnew.ts         |  2 +-
 code/lib/manager-api/src/typings.d.ts                |  4 ++++
 code/lib/types/src/modules/core-common.ts            | 10 +++++-----
 .../manager/src/components/sidebar/Menu.stories.tsx  |  6 +++---
 code/ui/manager/src/containers/menu.tsx              |  2 +-
 code/ui/manager/src/containers/sidebar.tsx           |  3 ++-
 code/ui/manager/src/settings/whats_new.tsx           |  9 ++++++---
 code/ui/manager/src/typings.d.ts                     |  5 +++++
 12 files changed, 54 insertions(+), 16 deletions(-)

diff --git a/code/builders/builder-manager/src/index.ts b/code/builders/builder-manager/src/index.ts
index e2bdf248be82..227390808af8 100644
--- a/code/builders/builder-manager/src/index.ts
+++ b/code/builders/builder-manager/src/index.ts
@@ -140,6 +140,7 @@ const starter: StarterFunction = async function* starterGeneratorFn({
     title,
     logLevel,
     docsOptions,
+    managerGlobals,
   } = await getData(options);
 
   yield;
@@ -177,6 +178,7 @@ const starter: StarterFunction = async function* starterGeneratorFn({
     refs,
     logLevel,
     docsOptions,
+    managerGlobals,
     options
   );
 
@@ -224,6 +226,7 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime,
     title,
     logLevel,
     docsOptions,
+    managerGlobals,
   } = await getData(options);
   yield;
 
@@ -264,6 +267,7 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime,
     refs,
     logLevel,
     docsOptions,
+    managerGlobals,
     options
   );
 
diff --git a/code/builders/builder-manager/src/utils/data.ts b/code/builders/builder-manager/src/utils/data.ts
index 5e315c92e9f8..d2f7e038e16b 100644
--- a/code/builders/builder-manager/src/utils/data.ts
+++ b/code/builders/builder-manager/src/utils/data.ts
@@ -16,6 +16,7 @@ export const getData = async (options: Options) => {
   const docsOptions = options.presets.apply<DocsOptions>('docs', {});
   const template = readTemplate('template.ejs');
   const customHead = options.presets.apply<string>('managerHead');
+  const managerGlobals = options.presets.apply('managerGlobals', {});
 
   // we await these, because crucially if these fail, we want to bail out asap
   const [instance, config] = await Promise.all([
@@ -35,5 +36,6 @@ export const getData = async (options: Options) => {
     config,
     logLevel,
     favicon,
+    managerGlobals,
   };
 };
diff --git a/code/builders/builder-manager/src/utils/template.ts b/code/builders/builder-manager/src/utils/template.ts
index 64fb626869b3..1afa2ac12360 100644
--- a/code/builders/builder-manager/src/utils/template.ts
+++ b/code/builders/builder-manager/src/utils/template.ts
@@ -3,7 +3,7 @@ import fs from 'fs-extra';
 
 import { render } from 'ejs';
 
-import type { DocsOptions, Options, Ref } from '@storybook/types';
+import type { CoreConfig, DocsOptions, Options, Ref } from '@storybook/types';
 
 export const getTemplatePath = async (template: string) => {
   return join(
@@ -34,10 +34,12 @@ export const renderHTML = async (
   refs: Promise<Record<string, Ref>>,
   logLevel: Promise<string>,
   docsOptions: Promise<DocsOptions>,
+  managerGlobals: Promise<CoreConfig>,
   { versionCheck, previewUrl, configType }: Options
 ) => {
   const titleRef = await title;
   const templateRef = await template;
+  const managerGlobalsRef = await managerGlobals;
 
   return render(templateRef, {
     title: titleRef ? `${titleRef} - Storybook` : 'Storybook',
@@ -52,6 +54,13 @@ export const renderHTML = async (
       // These two need to be double stringified because the UI expects a string
       VERSIONCHECK: JSON.stringify(JSON.stringify(versionCheck), null, 2),
       PREVIEW_URL: JSON.stringify(previewUrl, null, 2), // global preview URL
+      ...Object.entries(managerGlobalsRef).reduce(
+        (acc, [key, value]) => ({
+          ...acc,
+          [key]: JSON.stringify(value, null, 2),
+        }),
+        {}
+      ),
     },
     head: (await customHead) || '',
   });
diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts
index 79439587cb32..69237a2f169c 100644
--- a/code/lib/core-server/src/presets/common-preset.ts
+++ b/code/lib/core-server/src/presets/common-preset.ts
@@ -188,7 +188,6 @@ export const features = async (
   storyStoreV7: true,
   argTypeTargetsV7: true,
   legacyDecoratorFileOrder: false,
-  whatsNewNotifications: false,
 });
 
 export const storyIndexers = async (indexers?: StoryIndexer[]) => {
@@ -230,6 +229,17 @@ export const docs = (
   docsMode,
 });
 
+export const managerGlobals = async (existing: Record<string, unknown>, options: Options) => {
+  const coreConfig = await options.presets.apply('core');
+  const { disableWhatsNewNotifications = false } = coreConfig ?? {};
+  return {
+    ...existing,
+    SB_CORE_CONFIG: {
+      disableWhatsNewNotifications,
+    },
+  };
+};
+
 export const managerHead = async (_: any, options: Options) => {
   const location = join(options.configDir, 'manager-head.html');
   if (await pathExists(location)) {
diff --git a/code/lib/manager-api/src/modules/whatsnew.ts b/code/lib/manager-api/src/modules/whatsnew.ts
index 9633c4f73dd3..3bbec84c465e 100644
--- a/code/lib/manager-api/src/modules/whatsnew.ts
+++ b/code/lib/manager-api/src/modules/whatsnew.ts
@@ -68,7 +68,7 @@ export const init: ModuleFn = ({ fullAPI, store }) => {
     const isNewStoryBookUser = fullAPI.getUrlState().path.includes('onboarding');
 
     if (
-      global.FEATURES.whatsNewNotifications &&
+      !global.SB_CORE_CONFIG.disableWhatsNewNotifications &&
       !isNewStoryBookUser &&
       whatsNewData.status === 'SUCCESS' &&
       whatsNewData.showNotification
diff --git a/code/lib/manager-api/src/typings.d.ts b/code/lib/manager-api/src/typings.d.ts
index 1d0d8d33ff0e..9511efd62bf6 100644
--- a/code/lib/manager-api/src/typings.d.ts
+++ b/code/lib/manager-api/src/typings.d.ts
@@ -3,6 +3,10 @@ declare var __STORYBOOK_ADDONS_MANAGER: any;
 
 declare var CONFIG_TYPE: string;
 declare var FEATURES: import('@storybook/types').StorybookConfig['features'];
+declare var SB_CORE_CONFIG: Pick<
+  import('@storybook/types').StorybookConfig['core'],
+  'disableWhatsNewNotifications'
+>;
 declare var REFS: any;
 declare var VERSIONCHECK: any;
 declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;
diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts
index ff5141f5238a..24f4d8c8f9ce 100644
--- a/code/lib/types/src/modules/core-common.ts
+++ b/code/lib/types/src/modules/core-common.ts
@@ -38,6 +38,11 @@ export interface CoreConfig {
    * @see https://storybook.js.org/telemetry
    */
   disableTelemetry?: boolean;
+
+  /**
+   * Disables notifications for Storybook updates.
+   */
+  disableWhatsNewNotifications?: boolean;
   /**
    * Enable crash reports to be sent to Storybook telemetry
    * @see https://storybook.js.org/telemetry
@@ -305,11 +310,6 @@ export interface StorybookConfig {
      * Apply decorators from preview.js before decorators from addons or frameworks
      */
     legacyDecoratorFileOrder?: boolean;
-
-    /**
-     * Show a notification anytime a What's new? post is published in the Storybook blog.
-     */
-    whatsNewNotifications?: boolean;
   };
 
   /**
diff --git a/code/ui/manager/src/components/sidebar/Menu.stories.tsx b/code/ui/manager/src/components/sidebar/Menu.stories.tsx
index acf071da57ce..22e6b2eace9a 100644
--- a/code/ui/manager/src/components/sidebar/Menu.stories.tsx
+++ b/code/ui/manager/src/components/sidebar/Menu.stories.tsx
@@ -1,11 +1,11 @@
+import type { ComponentProps } from 'react';
 import React from 'react';
 import { expect } from '@storybook/jest';
 import type { Meta, StoryObj } from '@storybook/react';
-import type { ComponentProps } from 'react';
 
 import { TooltipLinkList } from '@storybook/components';
 import { styled } from '@storybook/theming';
-import { within, userEvent, screen } from '@storybook/testing-library';
+import { screen, userEvent, within } from '@storybook/testing-library';
 import type { State } from '@storybook/manager-api';
 import { SidebarMenu, ToolbarMenu } from './Menu';
 import { useMenu } from '../../containers/menu';
@@ -46,7 +46,7 @@ const DoubleThemeRenderingHack = styled.div({
 
 export const Expanded: Story = {
   render: () => {
-    window.FEATURES.whatsNewNotifications = true;
+    window.SB_CORE_CONFIG.disableWhatsNewNotifications = false;
     const menu = useMenu(
       { whatsNewData: { status: 'SUCCESS' } } as State,
       {
diff --git a/code/ui/manager/src/containers/menu.tsx b/code/ui/manager/src/containers/menu.tsx
index 6d5272ad8fd6..d97fedc0f08b 100644
--- a/code/ui/manager/src/containers/menu.tsx
+++ b/code/ui/manager/src/containers/menu.tsx
@@ -69,7 +69,7 @@ export const useMenu = (
     [api]
   );
 
-  const whatsNewNotificationsEnabled = global.FEATURES.whatsNewNotifications;
+  const whatsNewNotificationsEnabled = !global.SB_CORE_CONFIG.disableWhatsNewNotifications;
   const isWhatsNewUnread = api.isWhatsNewUnread();
   const whatsNew = useMemo(
     () => ({
diff --git a/code/ui/manager/src/containers/sidebar.tsx b/code/ui/manager/src/containers/sidebar.tsx
index 6a9b606e2db4..988e46d0d7c4 100755
--- a/code/ui/manager/src/containers/sidebar.tsx
+++ b/code/ui/manager/src/containers/sidebar.tsx
@@ -44,7 +44,8 @@ const Sidebar = React.memo(function Sideber() {
       refId,
       viewMode,
       menu,
-      menuHighlighted: global.FEATURES.whatsNewNotifications && api.isWhatsNewUnread(),
+      menuHighlighted:
+        !global.SB_CORE_CONFIG.disableWhatsNewNotifications && api.isWhatsNewUnread(),
       enableShortcuts,
     };
   };
diff --git a/code/ui/manager/src/settings/whats_new.tsx b/code/ui/manager/src/settings/whats_new.tsx
index 1dbadd82608a..f7ebe37ddbd7 100644
--- a/code/ui/manager/src/settings/whats_new.tsx
+++ b/code/ui/manager/src/settings/whats_new.tsx
@@ -1,7 +1,7 @@
 import type { ComponentProps, FC } from 'react';
 import React, { Fragment, useEffect, useState } from 'react';
 import { styled, useTheme } from '@storybook/theming';
-import { IconButton, Icons, Loader } from '@storybook/components';
+import { Button, IconButton, Icons, Loader } from '@storybook/components';
 import { useStorybookApi } from '@storybook/manager-api';
 import { global } from '@storybook/global';
 
@@ -46,7 +46,7 @@ const ToggleNotificationButton = styled(IconButton)(({ theme }) => ({
   margin: 0,
 }));
 
-const CopyButton = styled(IconButton)(() => ({
+const CopyButton = styled(Button)(() => ({
   margin: 0,
   padding: 0,
   borderRadius: 0,
@@ -141,6 +141,7 @@ export interface WhatsNewProps {
   isLoaded: boolean;
   onLoad: () => void;
   url?: string;
+  isNotificationsDisabled: boolean;
   onCopyLink?: () => void;
   onToggleNotifications?: () => void;
 }
@@ -152,6 +153,7 @@ const PureWhatsNewScreen: FC<WhatsNewProps> = ({
   url,
   onCopyLink,
   onToggleNotifications,
+  isNotificationsDisabled,
 }) => (
   <Fragment>
     {!isLoaded && !didHitMaxWaitTime && <WhatsNewLoader />}
@@ -161,7 +163,7 @@ const PureWhatsNewScreen: FC<WhatsNewProps> = ({
       <>
         <Iframe isLoaded={isLoaded} onLoad={onLoad} src={url} title={`What's new?`} />
         <WhatsNewFooter
-          isNotificationsDisabled
+          isNotificationsDisabled={isNotificationsDisabled}
           onToggleNotifications={onToggleNotifications}
           onCopyLink={onCopyLink}
         />
@@ -193,6 +195,7 @@ const WhatsNewScreen: FC<Omit<WhatsNewProps, 'isLoaded' | 'onLoad' | 'didHitMaxW
         setLoaded(true);
       }}
       url={url}
+      isNotificationsDisabled={global.SB_CORE_CONFIG.disableWhatsNewNotifications}
       onCopyLink={() => {
         navigator.clipboard.writeText(url);
       }}
diff --git a/code/ui/manager/src/typings.d.ts b/code/ui/manager/src/typings.d.ts
index b458d60aa911..28027403fdde 100644
--- a/code/ui/manager/src/typings.d.ts
+++ b/code/ui/manager/src/typings.d.ts
@@ -13,3 +13,8 @@ declare var FEATURES: import('@storybook/types').StorybookConfig['features'];
 declare var REFS: any;
 declare var VERSIONCHECK: any;
 declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;
+
+declare var SB_CORE_CONFIG: Pick<
+  import('@storybook/types').StorybookConfig['core'],
+  'disableWhatsNewNotifications'
+>;

From 2ea624707bae5883d982155638644d4f731cbcc5 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Mon, 10 Jul 2023 15:10:09 +0200
Subject: [PATCH 3/9] add toggle whats new preset event

---
 .../core-server/src/presets/common-preset.ts  |  5 +++
 code/lib/manager-api/src/modules/whatsnew.ts  |  6 ++--
 code/ui/manager/src/settings/whats_new.tsx    | 36 ++++++++++++-------
 .../src/settings/whats_new_footer.stories.tsx |  2 +-
 4 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts
index 69237a2f169c..ae90ec32a789 100644
--- a/code/lib/core-server/src/presets/common-preset.ts
+++ b/code/lib/core-server/src/presets/common-preset.ts
@@ -25,6 +25,7 @@ import {
   REQUEST_WHATS_NEW_DATA,
   RESULT_WHATS_NEW_DATA,
   SET_WHATS_NEW_CACHE,
+  TOGGLE_WHATS_NEW_NOTIFICATIONS,
 } from '@storybook/core-events';
 import { parseStaticDir } from '../utils/server-statics';
 import { defaultStaticDirs } from '../utils/constants';
@@ -292,5 +293,9 @@ export const experimental_serverChannel = (channel: Channel, options: Options) =
     }
   });
 
+  channel.on(TOGGLE_WHATS_NEW_NOTIFICATIONS, async (enable: boolean) => {
+    console.log(`${enable ? 'disabling' : 'enabling'}whats new`);
+  });
+
   return channel;
 };
diff --git a/code/lib/manager-api/src/modules/whatsnew.ts b/code/lib/manager-api/src/modules/whatsnew.ts
index 3bbec84c465e..385d27b18b74 100644
--- a/code/lib/manager-api/src/modules/whatsnew.ts
+++ b/code/lib/manager-api/src/modules/whatsnew.ts
@@ -15,7 +15,7 @@ export type SubState = {
 export type SubAPI = {
   isWhatsNewUnread(): boolean;
   whatsNewHasBeenRead(): void;
-  toggleWhatsNewNotifications(): void;
+  toggleWhatsNewNotifications(enable: boolean): void;
 };
 
 const WHATS_NEW_NOTIFICATION_ID = 'whats-new';
@@ -41,8 +41,8 @@ export const init: ModuleFn = ({ fullAPI, store }) => {
         fullAPI.clearNotification(WHATS_NEW_NOTIFICATION_ID);
       }
     },
-    toggleWhatsNewNotifications() {
-      fullAPI.emit(TOGGLE_WHATS_NEW_NOTIFICATIONS);
+    toggleWhatsNewNotifications(enable: boolean) {
+      fullAPI.emit(TOGGLE_WHATS_NEW_NOTIFICATIONS, enable);
     },
   };
 
diff --git a/code/ui/manager/src/settings/whats_new.tsx b/code/ui/manager/src/settings/whats_new.tsx
index f7ebe37ddbd7..cc58ed01a351 100644
--- a/code/ui/manager/src/settings/whats_new.tsx
+++ b/code/ui/manager/src/settings/whats_new.tsx
@@ -53,11 +53,11 @@ const CopyButton = styled(Button)(() => ({
 }));
 
 export const WhatsNewFooter = ({
-  isNotificationsDisabled,
+  isNotificationsEnabled,
   onToggleNotifications,
   onCopyLink,
 }: {
-  isNotificationsDisabled: boolean;
+  isNotificationsEnabled: boolean;
   onToggleNotifications?: () => void;
   onCopyLink?: () => void;
 }) => {
@@ -79,15 +79,15 @@ export const WhatsNewFooter = ({
         </CopyButton>
       </div>
       <ToggleNotificationButton onClick={onToggleNotifications}>
-        {isNotificationsDisabled ? (
+        {isNotificationsEnabled ? (
           <>
-            <Icons icon="eye" />
-            &nbsp;Show notifications
+            <Icons icon="eyeclose" />
+            &nbsp;Hide notifications
           </>
         ) : (
           <>
-            <Icons icon="eyeclose" />
-            &nbsp;Hide notifications
+            <Icons icon="eye" />
+            &nbsp;Show notifications
           </>
         )}
       </ToggleNotificationButton>
@@ -141,7 +141,7 @@ export interface WhatsNewProps {
   isLoaded: boolean;
   onLoad: () => void;
   url?: string;
-  isNotificationsDisabled: boolean;
+  isNotificationsEnabled: boolean;
   onCopyLink?: () => void;
   onToggleNotifications?: () => void;
 }
@@ -153,7 +153,7 @@ const PureWhatsNewScreen: FC<WhatsNewProps> = ({
   url,
   onCopyLink,
   onToggleNotifications,
-  isNotificationsDisabled,
+  isNotificationsEnabled,
 }) => (
   <Fragment>
     {!isLoaded && !didHitMaxWaitTime && <WhatsNewLoader />}
@@ -163,7 +163,7 @@ const PureWhatsNewScreen: FC<WhatsNewProps> = ({
       <>
         <Iframe isLoaded={isLoaded} onLoad={onLoad} src={url} title={`What's new?`} />
         <WhatsNewFooter
-          isNotificationsDisabled={isNotificationsDisabled}
+          isNotificationsEnabled={isNotificationsEnabled}
           onToggleNotifications={onToggleNotifications}
           onCopyLink={onCopyLink}
         />
@@ -180,6 +180,9 @@ const WhatsNewScreen: FC<Omit<WhatsNewProps, 'isLoaded' | 'onLoad' | 'didHitMaxW
   const api = useStorybookApi();
   const [isLoaded, setLoaded] = useState(false);
   const [didHitMaxWaitTime, setDidHitMaxWaitTime] = useState(false);
+  const [isNotificationsEnabled, setIsNotificationsEnabled] = useState(
+    global.SB_CORE_CONFIG.disableWhatsNewNotifications !== true
+  );
 
   useEffect(() => {
     const timer = setTimeout(() => !isLoaded && setDidHitMaxWaitTime(true), MAX_WAIT_TIME);
@@ -195,13 +198,20 @@ const WhatsNewScreen: FC<Omit<WhatsNewProps, 'isLoaded' | 'onLoad' | 'didHitMaxW
         setLoaded(true);
       }}
       url={url}
-      isNotificationsDisabled={global.SB_CORE_CONFIG.disableWhatsNewNotifications}
+      isNotificationsEnabled={isNotificationsEnabled}
       onCopyLink={() => {
         navigator.clipboard.writeText(url);
       }}
       onToggleNotifications={() => {
-        if (global.confirm('All update notifications will no longer be shown. Are you sure?')) {
-          api.toggleWhatsNewNotifications();
+        if (
+          isNotificationsEnabled &&
+          global.confirm('All update notifications will no longer be shown. Are you sure?')
+        ) {
+          api.toggleWhatsNewNotifications(false);
+          setIsNotificationsEnabled(false);
+        } else {
+          api.toggleWhatsNewNotifications(true);
+          setIsNotificationsEnabled(true);
         }
       }}
     />
diff --git a/code/ui/manager/src/settings/whats_new_footer.stories.tsx b/code/ui/manager/src/settings/whats_new_footer.stories.tsx
index f36187b37d78..8815eb0ec1c2 100644
--- a/code/ui/manager/src/settings/whats_new_footer.stories.tsx
+++ b/code/ui/manager/src/settings/whats_new_footer.stories.tsx
@@ -11,7 +11,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    isNotificationsDisabled: false,
+    isNotificationsEnabled: false,
   },
   parameters: {
     design: {

From a1b01a177870d2afd53490966c567c566fd947c7 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 10 Jul 2023 15:36:10 +0200
Subject: [PATCH 4/9] Wire everything

---
 .../core-server/src/presets/common-preset.ts  | 22 +++++++++++++++----
 code/lib/manager-api/src/modules/whatsnew.ts  | 14 ++++++++----
 .../src/components/sidebar/Menu.stories.tsx   |  3 +--
 code/ui/manager/src/containers/menu.tsx       |  3 +--
 code/ui/manager/src/containers/sidebar.tsx    |  4 +---
 code/ui/manager/src/settings/whats_new.tsx    | 19 +++++++---------
 6 files changed, 39 insertions(+), 26 deletions(-)

diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts
index ae90ec32a789..1282c0fd89ae 100644
--- a/code/lib/core-server/src/presets/common-preset.ts
+++ b/code/lib/core-server/src/presets/common-preset.ts
@@ -4,6 +4,7 @@ import {
   getDirectoryFromWorkingDir,
   getPreviewBodyTemplate,
   getPreviewHeadTemplate,
+  getStorybookInfo,
   loadEnvs,
 } from '@storybook/core-common';
 import type {
@@ -15,7 +16,7 @@ import type {
   StorybookConfig,
   StoryIndexer,
 } from '@storybook/types';
-import { loadCsf } from '@storybook/csf-tools';
+import { loadCsf, readConfig, writeConfig } from '@storybook/csf-tools';
 import { join } from 'path';
 import { dedent } from 'ts-dedent';
 import fetch from 'node-fetch';
@@ -27,6 +28,7 @@ import {
   SET_WHATS_NEW_CACHE,
   TOGGLE_WHATS_NEW_NOTIFICATIONS,
 } from '@storybook/core-events';
+import { JsPackageManagerFactory } from '@storybook/cli';
 import { parseStaticDir } from '../utils/server-statics';
 import { defaultStaticDirs } from '../utils/constants';
 
@@ -293,9 +295,21 @@ export const experimental_serverChannel = (channel: Channel, options: Options) =
     }
   });
 
-  channel.on(TOGGLE_WHATS_NEW_NOTIFICATIONS, async (enable: boolean) => {
-    console.log(`${enable ? 'disabling' : 'enabling'}whats new`);
-  });
+  channel.on(
+    TOGGLE_WHATS_NEW_NOTIFICATIONS,
+    async ({ disableWhatsNewNotifications }: { disableWhatsNewNotifications: boolean }) => {
+      try {
+        const packageManager = JsPackageManagerFactory.getPackageManager();
+        const info = getStorybookInfo(await packageManager.retrievePackageJson());
+        const main = await readConfig(info.mainConfig);
+        main.setFieldValue(['core', 'disableWhatsNewNotifications'], disableWhatsNewNotifications);
+        await writeConfig(main);
+      } catch (e) {
+        console.log(e);
+        // TODO: telemetry
+      }
+    }
+  );
 
   return channel;
 };
diff --git a/code/lib/manager-api/src/modules/whatsnew.ts b/code/lib/manager-api/src/modules/whatsnew.ts
index 385d27b18b74..c78d83231d32 100644
--- a/code/lib/manager-api/src/modules/whatsnew.ts
+++ b/code/lib/manager-api/src/modules/whatsnew.ts
@@ -10,12 +10,13 @@ import type { ModuleFn } from '../index';
 
 export type SubState = {
   whatsNewData?: WhatsNewData;
+  disableWhatsNewNotifications: boolean;
 };
 
 export type SubAPI = {
   isWhatsNewUnread(): boolean;
   whatsNewHasBeenRead(): void;
-  toggleWhatsNewNotifications(enable: boolean): void;
+  toggleWhatsNewNotifications(): void;
 };
 
 const WHATS_NEW_NOTIFICATION_ID = 'whats-new';
@@ -23,6 +24,7 @@ const WHATS_NEW_NOTIFICATION_ID = 'whats-new';
 export const init: ModuleFn = ({ fullAPI, store }) => {
   const state: SubState = {
     whatsNewData: undefined,
+    disableWhatsNewNotifications: global.SB_CORE_CONFIG.disableWhatsNewNotifications,
   };
 
   function setWhatsNewState(newState: WhatsNewData) {
@@ -41,8 +43,12 @@ export const init: ModuleFn = ({ fullAPI, store }) => {
         fullAPI.clearNotification(WHATS_NEW_NOTIFICATION_ID);
       }
     },
-    toggleWhatsNewNotifications(enable: boolean) {
-      fullAPI.emit(TOGGLE_WHATS_NEW_NOTIFICATIONS, enable);
+    toggleWhatsNewNotifications() {
+      state.disableWhatsNewNotifications = !state.disableWhatsNewNotifications;
+      store.setState({ disableWhatsNewNotifications: state.disableWhatsNewNotifications });
+      fullAPI.emit(TOGGLE_WHATS_NEW_NOTIFICATIONS, {
+        disableWhatsNewNotifications: state.disableWhatsNewNotifications,
+      });
     },
   };
 
@@ -68,7 +74,7 @@ export const init: ModuleFn = ({ fullAPI, store }) => {
     const isNewStoryBookUser = fullAPI.getUrlState().path.includes('onboarding');
 
     if (
-      !global.SB_CORE_CONFIG.disableWhatsNewNotifications &&
+      !state.disableWhatsNewNotifications &&
       !isNewStoryBookUser &&
       whatsNewData.status === 'SUCCESS' &&
       whatsNewData.showNotification
diff --git a/code/ui/manager/src/components/sidebar/Menu.stories.tsx b/code/ui/manager/src/components/sidebar/Menu.stories.tsx
index 22e6b2eace9a..ca8918fae52c 100644
--- a/code/ui/manager/src/components/sidebar/Menu.stories.tsx
+++ b/code/ui/manager/src/components/sidebar/Menu.stories.tsx
@@ -46,9 +46,8 @@ const DoubleThemeRenderingHack = styled.div({
 
 export const Expanded: Story = {
   render: () => {
-    window.SB_CORE_CONFIG.disableWhatsNewNotifications = false;
     const menu = useMenu(
-      { whatsNewData: { status: 'SUCCESS' } } as State,
+      { whatsNewData: { status: 'SUCCESS' }, disableWhatsNewNotifications: false } as State,
       {
         // @ts-expect-error (Converted from ts-ignore)
         getShortcutKeys: () => ({}),
diff --git a/code/ui/manager/src/containers/menu.tsx b/code/ui/manager/src/containers/menu.tsx
index d97fedc0f08b..1990d86063d0 100644
--- a/code/ui/manager/src/containers/menu.tsx
+++ b/code/ui/manager/src/containers/menu.tsx
@@ -5,7 +5,6 @@ import { Badge, Icons } from '@storybook/components';
 import type { API, State } from '@storybook/manager-api';
 import { shortcutToHumanString } from '@storybook/manager-api';
 import { styled, useTheme } from '@storybook/theming';
-import { global } from '@storybook/global';
 
 const focusableUIElements = {
   storySearchField: 'storybook-explorer-searchfield',
@@ -69,7 +68,7 @@ export const useMenu = (
     [api]
   );
 
-  const whatsNewNotificationsEnabled = !global.SB_CORE_CONFIG.disableWhatsNewNotifications;
+  const whatsNewNotificationsEnabled = !state.disableWhatsNewNotifications;
   const isWhatsNewUnread = api.isWhatsNewUnread();
   const whatsNew = useMemo(
     () => ({
diff --git a/code/ui/manager/src/containers/sidebar.tsx b/code/ui/manager/src/containers/sidebar.tsx
index 988e46d0d7c4..4fcc5df5d7b0 100755
--- a/code/ui/manager/src/containers/sidebar.tsx
+++ b/code/ui/manager/src/containers/sidebar.tsx
@@ -3,7 +3,6 @@ import React from 'react';
 import type { Combo, StoriesHash } from '@storybook/manager-api';
 import { Consumer } from '@storybook/manager-api';
 
-import { global } from '@storybook/global';
 import { Sidebar as SidebarComponent } from '../components/sidebar/Sidebar';
 import { useMenu } from './menu';
 
@@ -44,8 +43,7 @@ const Sidebar = React.memo(function Sideber() {
       refId,
       viewMode,
       menu,
-      menuHighlighted:
-        !global.SB_CORE_CONFIG.disableWhatsNewNotifications && api.isWhatsNewUnread(),
+      menuHighlighted: !state.disableWhatsNewNotifications && api.isWhatsNewUnread(),
       enableShortcuts,
     };
   };
diff --git a/code/ui/manager/src/settings/whats_new.tsx b/code/ui/manager/src/settings/whats_new.tsx
index cc58ed01a351..ff911907ccad 100644
--- a/code/ui/manager/src/settings/whats_new.tsx
+++ b/code/ui/manager/src/settings/whats_new.tsx
@@ -2,7 +2,7 @@ import type { ComponentProps, FC } from 'react';
 import React, { Fragment, useEffect, useState } from 'react';
 import { styled, useTheme } from '@storybook/theming';
 import { Button, IconButton, Icons, Loader } from '@storybook/components';
-import { useStorybookApi } from '@storybook/manager-api';
+import { useStorybookApi, useStorybookState } from '@storybook/manager-api';
 import { global } from '@storybook/global';
 
 const Centered = styled.div({
@@ -174,15 +174,14 @@ const PureWhatsNewScreen: FC<WhatsNewProps> = ({
 
 const MAX_WAIT_TIME = 10000; // 10 seconds
 
-const WhatsNewScreen: FC<Omit<WhatsNewProps, 'isLoaded' | 'onLoad' | 'didHitMaxWaitTime'>> = ({
-  url,
-}) => {
+const WhatsNewScreen: FC<
+  Omit<WhatsNewProps, 'isLoaded' | 'onLoad' | 'didHitMaxWaitTime' | 'isNotificationsEnabled'>
+> = ({ url }) => {
   const api = useStorybookApi();
+  const state = useStorybookState();
   const [isLoaded, setLoaded] = useState(false);
   const [didHitMaxWaitTime, setDidHitMaxWaitTime] = useState(false);
-  const [isNotificationsEnabled, setIsNotificationsEnabled] = useState(
-    global.SB_CORE_CONFIG.disableWhatsNewNotifications !== true
-  );
+  const isNotificationsEnabled = !state.disableWhatsNewNotifications;
 
   useEffect(() => {
     const timer = setTimeout(() => !isLoaded && setDidHitMaxWaitTime(true), MAX_WAIT_TIME);
@@ -207,11 +206,9 @@ const WhatsNewScreen: FC<Omit<WhatsNewProps, 'isLoaded' | 'onLoad' | 'didHitMaxW
           isNotificationsEnabled &&
           global.confirm('All update notifications will no longer be shown. Are you sure?')
         ) {
-          api.toggleWhatsNewNotifications(false);
-          setIsNotificationsEnabled(false);
+          api.toggleWhatsNewNotifications();
         } else {
-          api.toggleWhatsNewNotifications(true);
-          setIsNotificationsEnabled(true);
+          api.toggleWhatsNewNotifications();
         }
       }}
     />

From 23e5510eaa203d5ba1f5b2076432d3f0b5614939 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Mon, 10 Jul 2023 15:41:46 +0200
Subject: [PATCH 5/9] add core-config telemetry event

---
 code/lib/core-server/src/presets/common-preset.ts | 6 ++++--
 code/lib/telemetry/src/types.ts                   | 3 ++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts
index 1282c0fd89ae..00aa0abc7ef0 100644
--- a/code/lib/core-server/src/presets/common-preset.ts
+++ b/code/lib/core-server/src/presets/common-preset.ts
@@ -1,5 +1,6 @@
 import { pathExists, readFile } from 'fs-extra';
 import { deprecate, logger } from '@storybook/node-logger';
+import { telemetry } from '@storybook/telemetry';
 import {
   getDirectoryFromWorkingDir,
   getPreviewBodyTemplate,
@@ -304,9 +305,10 @@ export const experimental_serverChannel = (channel: Channel, options: Options) =
         const main = await readConfig(info.mainConfig);
         main.setFieldValue(['core', 'disableWhatsNewNotifications'], disableWhatsNewNotifications);
         await writeConfig(main);
+
+        await telemetry('core-config', { disableWhatsNewNotifications });
       } catch (e) {
-        console.log(e);
-        // TODO: telemetry
+        await telemetry('core-config', { disableWhatsNewNotifications: 'error' });
       }
     }
   );
diff --git a/code/lib/telemetry/src/types.ts b/code/lib/telemetry/src/types.ts
index e65da2747a34..25100149fd44 100644
--- a/code/lib/telemetry/src/types.ts
+++ b/code/lib/telemetry/src/types.ts
@@ -12,7 +12,8 @@ export type EventType =
   | 'canceled'
   | 'error'
   | 'error-metadata'
-  | 'version-update';
+  | 'version-update'
+  | 'core-config';
 
 export interface Dependency {
   version: string | undefined;

From e60681e883943bb46902298deda3d652a0025083 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 10 Jul 2023 15:52:57 +0200
Subject: [PATCH 6/9] Use user specified config dir

---
 code/lib/core-server/src/presets/common-preset.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts
index 00aa0abc7ef0..aee5fd9a79e7 100644
--- a/code/lib/core-server/src/presets/common-preset.ts
+++ b/code/lib/core-server/src/presets/common-preset.ts
@@ -301,8 +301,11 @@ export const experimental_serverChannel = (channel: Channel, options: Options) =
     async ({ disableWhatsNewNotifications }: { disableWhatsNewNotifications: boolean }) => {
       try {
         const packageManager = JsPackageManagerFactory.getPackageManager();
-        const info = getStorybookInfo(await packageManager.retrievePackageJson());
-        const main = await readConfig(info.mainConfig);
+        const { mainConfig } = getStorybookInfo(
+          await packageManager.retrievePackageJson(),
+          options.configDir
+        );
+        const main = await readConfig(mainConfig);
         main.setFieldValue(['core', 'disableWhatsNewNotifications'], disableWhatsNewNotifications);
         await writeConfig(main);
 

From b88cb9c64e5b998d62c9a8eb72b526997f1b50ac Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 10 Jul 2023 16:29:11 +0200
Subject: [PATCH 7/9] Refactor telemetry error handling and update 'whats-new'
 feature

---
 code/lib/core-events/src/index.ts             |  1 +
 .../core-server/src/presets/common-preset.ts  | 28 +++++++++++++++----
 code/lib/core-server/src/withTelemetry.ts     | 11 +++++++-
 code/ui/manager/src/settings/whats_new.tsx    | 11 ++++----
 .../manager/src/settings/whats_new_page.tsx   |  6 +---
 5 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/code/lib/core-events/src/index.ts b/code/lib/core-events/src/index.ts
index ce13b5385ca8..f959d9b42bbd 100644
--- a/code/lib/core-events/src/index.ts
+++ b/code/lib/core-events/src/index.ts
@@ -135,6 +135,7 @@ export type WhatsNewData =
       status: 'SUCCESS';
       title: string;
       url: string;
+      blogUrl?: string;
       publishedAt: string;
       excerpt: string;
       postIsRead: boolean;
diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts
index aee5fd9a79e7..adc5041c9565 100644
--- a/code/lib/core-server/src/presets/common-preset.ts
+++ b/code/lib/core-server/src/presets/common-preset.ts
@@ -32,6 +32,7 @@ import {
 import { JsPackageManagerFactory } from '@storybook/cli';
 import { parseStaticDir } from '../utils/server-statics';
 import { defaultStaticDirs } from '../utils/constants';
+import { sendTelemetryError } from '../withTelemetry';
 
 const interpolate = (string: string, data: Record<string, string> = {}) =>
   Object.entries(data).reduce((acc, [k, v]) => acc.replace(new RegExp(`%${k}%`, 'g'), v), string);
@@ -260,10 +261,18 @@ const WHATS_NEW_CACHE = 'whats-new-cache';
 const WHATS_NEW_URL = 'https://storybook.js.org/whats-new/v1';
 
 // Grabbed from the implementation: https://github.com/storybookjs/dx-functions/blob/main/netlify/functions/whats-new.ts
-type WhatsNewResponse = { title: string; url: string; publishedAt: string; excerpt: string };
+type WhatsNewResponse = {
+  title: string;
+  url: string;
+  blogUrl?: string;
+  publishedAt: string;
+  excerpt: string;
+};
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const experimental_serverChannel = (channel: Channel, options: Options) => {
+export const experimental_serverChannel = async (channel: Channel, options: Options) => {
+  const coreOptions = await options.presets.apply('core');
+
   channel.on(SET_WHATS_NEW_CACHE, async (data: WhatsNewCache) => {
     const cache: WhatsNewCache = await options.cache.get(WHATS_NEW_CACHE).catch((e) => {
       logger.verbose(e);
@@ -299,6 +308,7 @@ export const experimental_serverChannel = (channel: Channel, options: Options) =
   channel.on(
     TOGGLE_WHATS_NEW_NOTIFICATIONS,
     async ({ disableWhatsNewNotifications }: { disableWhatsNewNotifications: boolean }) => {
+      const isTelemetryEnabled = coreOptions.disableTelemetry !== true;
       try {
         const packageManager = JsPackageManagerFactory.getPackageManager();
         const { mainConfig } = getStorybookInfo(
@@ -309,9 +319,17 @@ export const experimental_serverChannel = (channel: Channel, options: Options) =
         main.setFieldValue(['core', 'disableWhatsNewNotifications'], disableWhatsNewNotifications);
         await writeConfig(main);
 
-        await telemetry('core-config', { disableWhatsNewNotifications });
-      } catch (e) {
-        await telemetry('core-config', { disableWhatsNewNotifications: 'error' });
+        if (isTelemetryEnabled) {
+          await telemetry('core-config', { disableWhatsNewNotifications });
+        }
+      } catch (error) {
+        if (isTelemetryEnabled) {
+          await sendTelemetryError(error, 'core-config', {
+            cliOptions: options,
+            presetOptions: { ...options, corePresets: [], overridePresets: [] },
+            skipPrompt: true,
+          });
+        }
       }
     }
   );
diff --git a/code/lib/core-server/src/withTelemetry.ts b/code/lib/core-server/src/withTelemetry.ts
index 2eda1325587a..ef231fe83c24 100644
--- a/code/lib/core-server/src/withTelemetry.ts
+++ b/code/lib/core-server/src/withTelemetry.ts
@@ -9,6 +9,7 @@ type TelemetryOptions = {
   cliOptions: CLIOptions;
   presetOptions?: Parameters<typeof loadAllPresets>[0];
   printError?: (err: any) => void;
+  skipPrompt?: boolean;
 };
 
 const promptCrashReports = async () => {
@@ -30,7 +31,11 @@ const promptCrashReports = async () => {
 
 type ErrorLevel = 'none' | 'error' | 'full';
 
-async function getErrorLevel({ cliOptions, presetOptions }: TelemetryOptions): Promise<ErrorLevel> {
+async function getErrorLevel({
+  cliOptions,
+  presetOptions,
+  skipPrompt,
+}: TelemetryOptions): Promise<ErrorLevel> {
   if (cliOptions.disableTelemetry) return 'none';
 
   // If we are running init or similar, we just have to go with true here
@@ -54,6 +59,10 @@ async function getErrorLevel({ cliOptions, presetOptions }: TelemetryOptions): P
     (await cache.get('enableCrashReports')) ?? (await cache.get('enableCrashreports'));
   if (valueFromCache !== undefined) return valueFromCache ? 'full' : 'error';
 
+  if (skipPrompt) {
+    return 'error';
+  }
+
   const valueFromPrompt = await promptCrashReports();
   if (valueFromPrompt !== undefined) return valueFromPrompt ? 'full' : 'error';
 
diff --git a/code/ui/manager/src/settings/whats_new.tsx b/code/ui/manager/src/settings/whats_new.tsx
index ff911907ccad..3e7ff9000c3e 100644
--- a/code/ui/manager/src/settings/whats_new.tsx
+++ b/code/ui/manager/src/settings/whats_new.tsx
@@ -4,6 +4,7 @@ import { styled, useTheme } from '@storybook/theming';
 import { Button, IconButton, Icons, Loader } from '@storybook/components';
 import { useStorybookApi, useStorybookState } from '@storybook/manager-api';
 import { global } from '@storybook/global';
+import type { WhatsNewData } from '@storybook/core-events';
 
 const Centered = styled.div({
   top: '50%',
@@ -174,9 +175,7 @@ const PureWhatsNewScreen: FC<WhatsNewProps> = ({
 
 const MAX_WAIT_TIME = 10000; // 10 seconds
 
-const WhatsNewScreen: FC<
-  Omit<WhatsNewProps, 'isLoaded' | 'onLoad' | 'didHitMaxWaitTime' | 'isNotificationsEnabled'>
-> = ({ url }) => {
+const WhatsNewScreen: FC<{ whatsNewData: WhatsNewData }> = ({ whatsNewData }) => {
   const api = useStorybookApi();
   const state = useStorybookState();
   const [isLoaded, setLoaded] = useState(false);
@@ -188,6 +187,8 @@ const WhatsNewScreen: FC<
     return () => clearTimeout(timer);
   }, [isLoaded]);
 
+  if (whatsNewData?.status !== 'SUCCESS') return null;
+
   return (
     <PureWhatsNewScreen
       didHitMaxWaitTime={didHitMaxWaitTime}
@@ -196,10 +197,10 @@ const WhatsNewScreen: FC<
         api.whatsNewHasBeenRead();
         setLoaded(true);
       }}
-      url={url}
+      url={whatsNewData.url}
       isNotificationsEnabled={isNotificationsEnabled}
       onCopyLink={() => {
-        navigator.clipboard.writeText(url);
+        navigator.clipboard?.writeText(whatsNewData.blogUrl ?? whatsNewData.url);
       }}
       onToggleNotifications={() => {
         if (
diff --git a/code/ui/manager/src/settings/whats_new_page.tsx b/code/ui/manager/src/settings/whats_new_page.tsx
index 53f436481043..60650429f92c 100644
--- a/code/ui/manager/src/settings/whats_new_page.tsx
+++ b/code/ui/manager/src/settings/whats_new_page.tsx
@@ -7,11 +7,7 @@ import { WhatsNewScreen } from './whats_new';
 const WhatsNewPage: FC = () => {
   const state = useStorybookState();
 
-  return (
-    <WhatsNewScreen
-      url={state.whatsNewData?.status === 'SUCCESS' ? state.whatsNewData.url : undefined}
-    />
-  );
+  return <WhatsNewScreen whatsNewData={state.whatsNewData} />;
 };
 
 export { WhatsNewPage };

From 7652f4522a4b6daac030692f5cb6d755a5a4fb25 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 10 Jul 2023 17:13:44 +0200
Subject: [PATCH 8/9] Address UI review

---
 code/ui/manager/src/settings/about.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/code/ui/manager/src/settings/about.tsx b/code/ui/manager/src/settings/about.tsx
index cdb0db8c2a73..7fb70f5eae59 100644
--- a/code/ui/manager/src/settings/about.tsx
+++ b/code/ui/manager/src/settings/about.tsx
@@ -35,6 +35,7 @@ const UpgradeBlock = styled.div(({ theme }) => {
     borderRadius: 5,
     padding: 20,
     margin: 20,
+    marginTop: 0,
     maxWidth: 400,
     borderColor: theme.appBorderColor,
     fontSize: theme.typography.size.s2,

From 552abe9669c32fde3f8cf301f77b798fe8af2321 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 10 Jul 2023 17:18:23 +0200
Subject: [PATCH 9/9] Get core flag from server channel instead

---
 code/builders/builder-manager/src/index.ts    |  4 ---
 .../builder-manager/src/utils/data.ts         |  2 --
 .../builder-manager/src/utils/template.ts     | 11 +-------
 .../src/utils/get-storybook-info.ts           |  2 +-
 code/lib/core-events/src/index.ts             |  1 +
 .../core-server/src/presets/common-preset.ts  | 28 ++++++-------------
 code/lib/manager-api/src/modules/whatsnew.ts  | 18 ++++++------
 code/lib/manager-api/src/typings.d.ts         |  4 ---
 .../src/components/sidebar/Menu.stories.tsx   |  2 +-
 code/ui/manager/src/containers/menu.tsx       |  3 +-
 code/ui/manager/src/containers/sidebar.tsx    |  5 +++-
 code/ui/manager/src/settings/whats_new.tsx    | 16 +++++------
 .../manager/src/settings/whats_new_page.tsx   |  5 +---
 code/ui/manager/src/typings.d.ts              |  5 ----
 14 files changed, 38 insertions(+), 68 deletions(-)

diff --git a/code/builders/builder-manager/src/index.ts b/code/builders/builder-manager/src/index.ts
index 227390808af8..e2bdf248be82 100644
--- a/code/builders/builder-manager/src/index.ts
+++ b/code/builders/builder-manager/src/index.ts
@@ -140,7 +140,6 @@ const starter: StarterFunction = async function* starterGeneratorFn({
     title,
     logLevel,
     docsOptions,
-    managerGlobals,
   } = await getData(options);
 
   yield;
@@ -178,7 +177,6 @@ const starter: StarterFunction = async function* starterGeneratorFn({
     refs,
     logLevel,
     docsOptions,
-    managerGlobals,
     options
   );
 
@@ -226,7 +224,6 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime,
     title,
     logLevel,
     docsOptions,
-    managerGlobals,
   } = await getData(options);
   yield;
 
@@ -267,7 +264,6 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime,
     refs,
     logLevel,
     docsOptions,
-    managerGlobals,
     options
   );
 
diff --git a/code/builders/builder-manager/src/utils/data.ts b/code/builders/builder-manager/src/utils/data.ts
index d2f7e038e16b..5e315c92e9f8 100644
--- a/code/builders/builder-manager/src/utils/data.ts
+++ b/code/builders/builder-manager/src/utils/data.ts
@@ -16,7 +16,6 @@ export const getData = async (options: Options) => {
   const docsOptions = options.presets.apply<DocsOptions>('docs', {});
   const template = readTemplate('template.ejs');
   const customHead = options.presets.apply<string>('managerHead');
-  const managerGlobals = options.presets.apply('managerGlobals', {});
 
   // we await these, because crucially if these fail, we want to bail out asap
   const [instance, config] = await Promise.all([
@@ -36,6 +35,5 @@ export const getData = async (options: Options) => {
     config,
     logLevel,
     favicon,
-    managerGlobals,
   };
 };
diff --git a/code/builders/builder-manager/src/utils/template.ts b/code/builders/builder-manager/src/utils/template.ts
index 1afa2ac12360..64fb626869b3 100644
--- a/code/builders/builder-manager/src/utils/template.ts
+++ b/code/builders/builder-manager/src/utils/template.ts
@@ -3,7 +3,7 @@ import fs from 'fs-extra';
 
 import { render } from 'ejs';
 
-import type { CoreConfig, DocsOptions, Options, Ref } from '@storybook/types';
+import type { DocsOptions, Options, Ref } from '@storybook/types';
 
 export const getTemplatePath = async (template: string) => {
   return join(
@@ -34,12 +34,10 @@ export const renderHTML = async (
   refs: Promise<Record<string, Ref>>,
   logLevel: Promise<string>,
   docsOptions: Promise<DocsOptions>,
-  managerGlobals: Promise<CoreConfig>,
   { versionCheck, previewUrl, configType }: Options
 ) => {
   const titleRef = await title;
   const templateRef = await template;
-  const managerGlobalsRef = await managerGlobals;
 
   return render(templateRef, {
     title: titleRef ? `${titleRef} - Storybook` : 'Storybook',
@@ -54,13 +52,6 @@ export const renderHTML = async (
       // These two need to be double stringified because the UI expects a string
       VERSIONCHECK: JSON.stringify(JSON.stringify(versionCheck), null, 2),
       PREVIEW_URL: JSON.stringify(previewUrl, null, 2), // global preview URL
-      ...Object.entries(managerGlobalsRef).reduce(
-        (acc, [key, value]) => ({
-          ...acc,
-          [key]: JSON.stringify(value, null, 2),
-        }),
-        {}
-      ),
     },
     head: (await customHead) || '',
   });
diff --git a/code/lib/core-common/src/utils/get-storybook-info.ts b/code/lib/core-common/src/utils/get-storybook-info.ts
index bcdb4eee3970..fe183d566b7c 100644
--- a/code/lib/core-common/src/utils/get-storybook-info.ts
+++ b/code/lib/core-common/src/utils/get-storybook-info.ts
@@ -83,7 +83,7 @@ const getRendererInfo = (packageJson: PackageJson) => {
 
 const validConfigExtensions = ['ts', 'js', 'tsx', 'jsx', 'mjs', 'cjs'];
 
-const findConfigFile = (prefix: string, configDir: string) => {
+export const findConfigFile = (prefix: string, configDir: string) => {
   const filePrefix = path.join(configDir, prefix);
   const extension = validConfigExtensions.find((ext: string) =>
     fse.existsSync(`${filePrefix}.${ext}`)
diff --git a/code/lib/core-events/src/index.ts b/code/lib/core-events/src/index.ts
index f959d9b42bbd..beec768961de 100644
--- a/code/lib/core-events/src/index.ts
+++ b/code/lib/core-events/src/index.ts
@@ -140,6 +140,7 @@ export type WhatsNewData =
       excerpt: string;
       postIsRead: boolean;
       showNotification: boolean;
+      disableWhatsNewNotifications: boolean;
     }
   | {
       status: 'ERROR';
diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts
index adc5041c9565..800f7ccaf0f7 100644
--- a/code/lib/core-server/src/presets/common-preset.ts
+++ b/code/lib/core-server/src/presets/common-preset.ts
@@ -2,10 +2,10 @@ import { pathExists, readFile } from 'fs-extra';
 import { deprecate, logger } from '@storybook/node-logger';
 import { telemetry } from '@storybook/telemetry';
 import {
+  findConfigFile,
   getDirectoryFromWorkingDir,
   getPreviewBodyTemplate,
   getPreviewHeadTemplate,
-  getStorybookInfo,
   loadEnvs,
 } from '@storybook/core-common';
 import type {
@@ -29,7 +29,6 @@ import {
   SET_WHATS_NEW_CACHE,
   TOGGLE_WHATS_NEW_NOTIFICATIONS,
 } from '@storybook/core-events';
-import { JsPackageManagerFactory } from '@storybook/cli';
 import { parseStaticDir } from '../utils/server-statics';
 import { defaultStaticDirs } from '../utils/constants';
 import { sendTelemetryError } from '../withTelemetry';
@@ -234,17 +233,6 @@ export const docs = (
   docsMode,
 });
 
-export const managerGlobals = async (existing: Record<string, unknown>, options: Options) => {
-  const coreConfig = await options.presets.apply('core');
-  const { disableWhatsNewNotifications = false } = coreConfig ?? {};
-  return {
-    ...existing,
-    SB_CORE_CONFIG: {
-      disableWhatsNewNotifications,
-    },
-  };
-};
-
 export const managerHead = async (_: any, options: Options) => {
   const location = join(options.configDir, 'manager-head.html');
   if (await pathExists(location)) {
@@ -289,12 +277,19 @@ export const experimental_serverChannel = async (channel: Channel, options: Opti
         throw response;
       })) as WhatsNewResponse;
 
+      const main = await readConfig(findConfigFile('main', options.configDir));
+      const disableWhatsNewNotifications = main.getFieldValue([
+        'core',
+        'disableWhatsNewNotifications',
+      ]);
+
       const cache: WhatsNewCache = (await options.cache.get(WHATS_NEW_CACHE)) ?? {};
       const data = {
         ...post,
         status: 'SUCCESS',
         postIsRead: post.url === cache.lastReadPost,
         showNotification: post.url !== cache.lastDismissedPost && post.url !== cache.lastReadPost,
+        disableWhatsNewNotifications,
       } satisfies WhatsNewData;
       channel.emit(RESULT_WHATS_NEW_DATA, { data });
     } catch (e) {
@@ -310,12 +305,7 @@ export const experimental_serverChannel = async (channel: Channel, options: Opti
     async ({ disableWhatsNewNotifications }: { disableWhatsNewNotifications: boolean }) => {
       const isTelemetryEnabled = coreOptions.disableTelemetry !== true;
       try {
-        const packageManager = JsPackageManagerFactory.getPackageManager();
-        const { mainConfig } = getStorybookInfo(
-          await packageManager.retrievePackageJson(),
-          options.configDir
-        );
-        const main = await readConfig(mainConfig);
+        const main = await readConfig(findConfigFile('main', options.configDir));
         main.setFieldValue(['core', 'disableWhatsNewNotifications'], disableWhatsNewNotifications);
         await writeConfig(main);
 
diff --git a/code/lib/manager-api/src/modules/whatsnew.ts b/code/lib/manager-api/src/modules/whatsnew.ts
index c78d83231d32..21d0596683f6 100644
--- a/code/lib/manager-api/src/modules/whatsnew.ts
+++ b/code/lib/manager-api/src/modules/whatsnew.ts
@@ -10,7 +10,6 @@ import type { ModuleFn } from '../index';
 
 export type SubState = {
   whatsNewData?: WhatsNewData;
-  disableWhatsNewNotifications: boolean;
 };
 
 export type SubAPI = {
@@ -24,7 +23,6 @@ const WHATS_NEW_NOTIFICATION_ID = 'whats-new';
 export const init: ModuleFn = ({ fullAPI, store }) => {
   const state: SubState = {
     whatsNewData: undefined,
-    disableWhatsNewNotifications: global.SB_CORE_CONFIG.disableWhatsNewNotifications,
   };
 
   function setWhatsNewState(newState: WhatsNewData) {
@@ -44,11 +42,15 @@ export const init: ModuleFn = ({ fullAPI, store }) => {
       }
     },
     toggleWhatsNewNotifications() {
-      state.disableWhatsNewNotifications = !state.disableWhatsNewNotifications;
-      store.setState({ disableWhatsNewNotifications: state.disableWhatsNewNotifications });
-      fullAPI.emit(TOGGLE_WHATS_NEW_NOTIFICATIONS, {
-        disableWhatsNewNotifications: state.disableWhatsNewNotifications,
-      });
+      if (state.whatsNewData?.status === 'SUCCESS') {
+        setWhatsNewState({
+          ...state.whatsNewData,
+          disableWhatsNewNotifications: !state.whatsNewData.disableWhatsNewNotifications,
+        });
+        fullAPI.emit(TOGGLE_WHATS_NEW_NOTIFICATIONS, {
+          disableWhatsNewNotifications: state.whatsNewData.disableWhatsNewNotifications,
+        });
+      }
     },
   };
 
@@ -74,9 +76,9 @@ export const init: ModuleFn = ({ fullAPI, store }) => {
     const isNewStoryBookUser = fullAPI.getUrlState().path.includes('onboarding');
 
     if (
-      !state.disableWhatsNewNotifications &&
       !isNewStoryBookUser &&
       whatsNewData.status === 'SUCCESS' &&
+      !whatsNewData.disableWhatsNewNotifications &&
       whatsNewData.showNotification
     ) {
       fullAPI.addNotification({
diff --git a/code/lib/manager-api/src/typings.d.ts b/code/lib/manager-api/src/typings.d.ts
index 9511efd62bf6..1d0d8d33ff0e 100644
--- a/code/lib/manager-api/src/typings.d.ts
+++ b/code/lib/manager-api/src/typings.d.ts
@@ -3,10 +3,6 @@ declare var __STORYBOOK_ADDONS_MANAGER: any;
 
 declare var CONFIG_TYPE: string;
 declare var FEATURES: import('@storybook/types').StorybookConfig['features'];
-declare var SB_CORE_CONFIG: Pick<
-  import('@storybook/types').StorybookConfig['core'],
-  'disableWhatsNewNotifications'
->;
 declare var REFS: any;
 declare var VERSIONCHECK: any;
 declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;
diff --git a/code/ui/manager/src/components/sidebar/Menu.stories.tsx b/code/ui/manager/src/components/sidebar/Menu.stories.tsx
index ca8918fae52c..f9e743a6d84d 100644
--- a/code/ui/manager/src/components/sidebar/Menu.stories.tsx
+++ b/code/ui/manager/src/components/sidebar/Menu.stories.tsx
@@ -47,7 +47,7 @@ const DoubleThemeRenderingHack = styled.div({
 export const Expanded: Story = {
   render: () => {
     const menu = useMenu(
-      { whatsNewData: { status: 'SUCCESS' }, disableWhatsNewNotifications: false } as State,
+      { whatsNewData: { status: 'SUCCESS', disableWhatsNewNotifications: false } } as State,
       {
         // @ts-expect-error (Converted from ts-ignore)
         getShortcutKeys: () => ({}),
diff --git a/code/ui/manager/src/containers/menu.tsx b/code/ui/manager/src/containers/menu.tsx
index 1990d86063d0..a387cb24d5f3 100644
--- a/code/ui/manager/src/containers/menu.tsx
+++ b/code/ui/manager/src/containers/menu.tsx
@@ -68,7 +68,8 @@ export const useMenu = (
     [api]
   );
 
-  const whatsNewNotificationsEnabled = !state.disableWhatsNewNotifications;
+  const whatsNewNotificationsEnabled =
+    state.whatsNewData?.status === 'SUCCESS' && !state.disableWhatsNewNotifications;
   const isWhatsNewUnread = api.isWhatsNewUnread();
   const whatsNew = useMemo(
     () => ({
diff --git a/code/ui/manager/src/containers/sidebar.tsx b/code/ui/manager/src/containers/sidebar.tsx
index 4fcc5df5d7b0..86b9cb71ac6b 100755
--- a/code/ui/manager/src/containers/sidebar.tsx
+++ b/code/ui/manager/src/containers/sidebar.tsx
@@ -32,6 +32,9 @@ const Sidebar = React.memo(function Sideber() {
       enableShortcuts
     );
 
+    const whatsNewNotificationsEnabled =
+      state.whatsNewData?.status === 'SUCCESS' && !state.disableWhatsNewNotifications;
+
     return {
       title: name,
       url,
@@ -43,7 +46,7 @@ const Sidebar = React.memo(function Sideber() {
       refId,
       viewMode,
       menu,
-      menuHighlighted: !state.disableWhatsNewNotifications && api.isWhatsNewUnread(),
+      menuHighlighted: whatsNewNotificationsEnabled && api.isWhatsNewUnread(),
       enableShortcuts,
     };
   };
diff --git a/code/ui/manager/src/settings/whats_new.tsx b/code/ui/manager/src/settings/whats_new.tsx
index 3e7ff9000c3e..3d0569129917 100644
--- a/code/ui/manager/src/settings/whats_new.tsx
+++ b/code/ui/manager/src/settings/whats_new.tsx
@@ -4,7 +4,6 @@ import { styled, useTheme } from '@storybook/theming';
 import { Button, IconButton, Icons, Loader } from '@storybook/components';
 import { useStorybookApi, useStorybookState } from '@storybook/manager-api';
 import { global } from '@storybook/global';
-import type { WhatsNewData } from '@storybook/core-events';
 
 const Centered = styled.div({
   top: '50%',
@@ -175,12 +174,12 @@ const PureWhatsNewScreen: FC<WhatsNewProps> = ({
 
 const MAX_WAIT_TIME = 10000; // 10 seconds
 
-const WhatsNewScreen: FC<{ whatsNewData: WhatsNewData }> = ({ whatsNewData }) => {
+const WhatsNewScreen: FC = () => {
   const api = useStorybookApi();
   const state = useStorybookState();
+  const { whatsNewData } = state;
   const [isLoaded, setLoaded] = useState(false);
   const [didHitMaxWaitTime, setDidHitMaxWaitTime] = useState(false);
-  const isNotificationsEnabled = !state.disableWhatsNewNotifications;
 
   useEffect(() => {
     const timer = setTimeout(() => !isLoaded && setDidHitMaxWaitTime(true), MAX_WAIT_TIME);
@@ -189,6 +188,8 @@ const WhatsNewScreen: FC<{ whatsNewData: WhatsNewData }> = ({ whatsNewData }) =>
 
   if (whatsNewData?.status !== 'SUCCESS') return null;
 
+  const isNotificationsEnabled = !whatsNewData.disableWhatsNewNotifications;
+
   return (
     <PureWhatsNewScreen
       didHitMaxWaitTime={didHitMaxWaitTime}
@@ -203,11 +204,10 @@ const WhatsNewScreen: FC<{ whatsNewData: WhatsNewData }> = ({ whatsNewData }) =>
         navigator.clipboard?.writeText(whatsNewData.blogUrl ?? whatsNewData.url);
       }}
       onToggleNotifications={() => {
-        if (
-          isNotificationsEnabled &&
-          global.confirm('All update notifications will no longer be shown. Are you sure?')
-        ) {
-          api.toggleWhatsNewNotifications();
+        if (isNotificationsEnabled) {
+          if (global.confirm('All update notifications will no longer be shown. Are you sure?')) {
+            api.toggleWhatsNewNotifications();
+          }
         } else {
           api.toggleWhatsNewNotifications();
         }
diff --git a/code/ui/manager/src/settings/whats_new_page.tsx b/code/ui/manager/src/settings/whats_new_page.tsx
index 60650429f92c..9aa4f776db89 100644
--- a/code/ui/manager/src/settings/whats_new_page.tsx
+++ b/code/ui/manager/src/settings/whats_new_page.tsx
@@ -1,13 +1,10 @@
-import { useStorybookState } from '@storybook/manager-api';
 import type { FC } from 'react';
 import React from 'react';
 
 import { WhatsNewScreen } from './whats_new';
 
 const WhatsNewPage: FC = () => {
-  const state = useStorybookState();
-
-  return <WhatsNewScreen whatsNewData={state.whatsNewData} />;
+  return <WhatsNewScreen />;
 };
 
 export { WhatsNewPage };
diff --git a/code/ui/manager/src/typings.d.ts b/code/ui/manager/src/typings.d.ts
index 28027403fdde..b458d60aa911 100644
--- a/code/ui/manager/src/typings.d.ts
+++ b/code/ui/manager/src/typings.d.ts
@@ -13,8 +13,3 @@ declare var FEATURES: import('@storybook/types').StorybookConfig['features'];
 declare var REFS: any;
 declare var VERSIONCHECK: any;
 declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;
-
-declare var SB_CORE_CONFIG: Pick<
-  import('@storybook/types').StorybookConfig['core'],
-  'disableWhatsNewNotifications'
->;