Repository: storybook
Issue: addon-controls - Disabling controls for a story does not hide them on argsTable
Labels: bug,addon: docs,addon: controls,block: argstable,needs triage

**Describe the bug**
When I set the `controls` parameter to `{ disabled: true }` for a story, the "Control" column into `<argsTable story="">` doesn't disappear, even if I override `argTypes` on story with `control: { type: null }`.

**Case 1: `<Story parameters={{ controls: { disable: true } }}></Story>`**
argsTable
![argstable-with-controls](https://user-images.githubusercontent.com/835430/128508366-6114bba7-30fe-4dcd-9fd0-a869c88e1ab6.jpg)
Control panel
![controls-disabled](https://user-images.githubusercontent.com/835430/128512493-c1bf45ee-4d6e-4e81-9271-c2fd78310d10.jpg)

**Case 2: `<Story argTypes={{ title: { control: { type: null } } }}></Story>`**
argsTable
![argstable-without-controls](https://user-images.githubusercontent.com/835430/128508399-6520ad33-80f1-43aa-b33a-6151716990a1.jpg)
Control panel
![controls-type-null](https://user-images.githubusercontent.com/835430/128512510-dda09a9f-a287-4450-9b74-889a6abcf52c.jpg)

**To Reproduce**
Steps to reproduce the behaviour:

0. In a *.stories.mdx file:
```
import {
  Meta,
  Story,
  Canvas,
  ArgsTable,
} from '@storybook/addon-docs'
import html from './card.html'

<Meta
  title="Components/Card"
  parameters={{
    viewMode: 'docs',
  }}
  args={{
    title: '',
  }}
  argTypes={{
    title: {
      name: 'Titre',
      description: 'Titre de l’article',
      type: { name: 'string', required: true },
      table: {
        type: {
          summary: 'string',
        },
        defaultValue: { summary: '' },
      },
      control: { type: 'text' },
    }
  }}
/>

export const PlaygroundTmpl = (args) => `
<div class="Card">
    <h4 class="Card-title">${args.title}</h4>
</div>
`

# Card

<Canvas>
  <Story
    name="Card"
    height="600px"
    parameters={{
      controls: { disable: true },
      docs: { source: { code: html } },
      viewMode: 'story',
    }}
  >
    {PlaygroundTmpl.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Card" />

<Canvas>
  <Story
    name="Card 1"
    height="600px"
    parameters={{
      controls: { disable: true },
      docs: { source: { code: html } },
      viewMode: 'story',
    }}
    argTypes={{
      title: { control: { type: null } },
    }}
  >
    {PlaygroundTmpl.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Card 1" />
```
1. Serve Storybook.
2. Navigate to MyGreatComponent
3. Click on the Canvas tab.
4. See that the Controls tab is no visible.
5. Click on the Docs tab.
6. See that the "Control" column and the reload button are still visible.

**Expected behaviour**
When I disable controls for a story (or all controls are null), I expect the "Control" column and the reload button into `<argsTable>`component to disappear and the Control panel to be empty.

**System**
```
System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 Intel(R) Core(TM) i5-8350U CPU @ 1.70GHz
  Binaries:
    Node: 14.17.0 - C:\nodejs\node.EXE
    npm: 6.14.13 - C:\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.423.0), Chromium (92.0.902.62)
  npmPackages:
    @storybook/addon-essentials: ^6.3.4 => 6.3.6
    @storybook/addon-links: ^6.3.4 => 6.3.6
    @storybook/addons: ^6.3.6 => 6.3.6
    @storybook/html: ^6.3.4 => 6.3.6
    @storybook/preset-scss: ^1.0.3 => 1.0.3
    @storybook/theming: ^6.3.4 => 6.3.6
```