Controls: Improve ArgsTable empty state guidance

code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.stories.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { action } from 'storybook/actions';
+import { expect, within } from 'storybook/test';
 import { styled } from 'storybook/theming';
 
 import * as ArgRow from './ArgRow.stories';
@@ -156,11 +157,34 @@ export const Error = {
   },
 };
 
-export const Empty = {
-  args: {},
+const expectEmptyState = async (canvasElement: HTMLElement) => {
+  const canvas = within(canvasElement);
+
+  await expect(await canvas.findByText('This story has no controls')).toBeVisible();
+  await expect(
+    await canvas.findByText(/Storybook couldn't find or generate any controls for this story/i)
+  ).toBeVisible();
+  const learnMoreLink = await canvas.findByRole('link', {
+    name: /Read docs/i,
+  });
+
+  await expect(learnMoreLink).toBeVisible();
+  await expect(learnMoreLink).toHaveAttribute(
+    'href',
+    'https://storybook.js.org/docs/essentials/controls?ref=ui'
+  );
+};
+
+export const Empty: Story = {
+  args: {
+    rows: {},
+  },
   parameters: {
     layout: 'centered',
   },
+  play: async ({ canvasElement }) => {
+    await expectEmptyState(canvasElement);
+  },
 };
 
 export const EmptyInsideAddonPanel: Story = {
@@ -171,6 +195,9 @@ export const EmptyInsideAddonPanel: Story = {
   parameters: {
     layout: 'centered',
   },
+  play: async ({ canvasElement }) => {
+    await expectEmptyState(canvasElement);
+  },
 };
 
 export const WithDefaultExpandedArgs = {

code/addons/docs/src/blocks/components/ArgsTable/Empty.tsx

@@ -51,39 +51,23 @@ export const Empty: FC<EmptyProps> = ({ inAddonPanel }) => {
   return (
     <Wrapper inAddonPanel={inAddonPanel}>
       <EmptyTabContent
-        title={
-          inAddonPanel
-            ? 'Interactive story playground'
-            : "Args table with interactive controls couldn't be auto-generated"
-        }
+        title="This story has no controls"
         description={
           <>
-            Controls give you an easy to use interface to test your components. Set your story args
-            and you&apos;ll see controls appearing here automatically.
+            Storybook couldn&apos;t find or generate any controls for this story. Define{' '}
+            <code>args</code> or <code>argTypes</code>, or configure docgen to let Storybook
+            generate controls automatically.
           </>
         }
         footer={
           <Links>
-            {inAddonPanel && (
-              <>
-                <Link
-                  href="https://storybook.js.org/docs/essentials/controls?ref=ui"
-                  target="_blank"
-                  withArrow
-                >
-                  <DocumentIcon /> Read docs
-                </Link>
-              </>
-            )}
-            {!inAddonPanel && (
-              <Link
-                href="https://storybook.js.org/docs/essentials/controls?ref=ui"
-                target="_blank"
-                withArrow
-              >
-                <DocumentIcon /> Learn how to set that up
-              </Link>
-            )}
+            <Link
+              href="https://storybook.js.org/docs/essentials/controls?ref=ui"
+              target="_blank"
+              withArrow
+            >
+              <DocumentIcon /> Read docs
+            </Link>
           </Links>
         }
       />