Addon-controls: Add warning to controls tab on no-args story

addons/controls/package.json

@@ -34,6 +34,7 @@
     "@storybook/api": "6.0.0-beta.18",
     "@storybook/client-api": "6.0.0-beta.18",
     "@storybook/components": "6.0.0-beta.18",
+    "@storybook/theming": "6.0.0-beta.18",
     "core-js": "^3.0.1"
   },
   "peerDependencies": {

addons/controls/src/components/ControlsPanel.tsx

@@ -1,14 +1,39 @@
 import React, { FC } from 'react';
-import { ArgsTable } from '@storybook/components';
+import { styled } from '@storybook/theming';
+import { ArgsTable, Link } from '@storybook/components';
 import { useArgs, useArgTypes, useParameter } from '@storybook/api';
 
 interface ControlsParameters {
   expanded?: boolean;
 }
 
+const NoControlsWrapper = styled.div(({ theme }) => ({
+  background: theme.background.warning,
+  padding: 20,
+}));
+
+const NoControlsWarning = () => (
+  <NoControlsWrapper>
+    No controls found for this component.&nbsp;
+    <Link
+      href="https://github.com/storybookjs/storybook/blob/next/addons/controls/README.md#writing-stories"
+      target="_blank"
+      cancel={false}
+    >
+      Learn how to add controls »
+    </Link>
+  </NoControlsWrapper>
+);
+
 export const ControlsPanel: FC = () => {
   const [args, updateArgs] = useArgs();
   const rows = useArgTypes();
   const { expanded } = useParameter<ControlsParameters>('controls', {});
-  return <ArgsTable {...{ compact: !expanded, rows, args, updateArgs }} />;
+  const hasControls = Object.values(rows).filter((argType) => argType?.control?.type).length > 0;
+  return (
+    <>
+      {hasControls ? null : <NoControlsWarning />}
+      <ArgsTable {...{ compact: !expanded, rows, args, updateArgs }} />
+    </>
+  );
 };