Backwards compatibility for viewport addon

[CodeByAlex]

Describe the bug
The viewport tab has gone missing when upgrading any version of major version 5 when running in an angular environment.

To Reproduce
Steps to reproduce the behavior:

1. Add the viewport addon to addons.js
2. import and add "addDecorator(configureViewport)" to config.js
3. run storybook
4. look to the addons section and viewport will be missing from the options

Expected behavior
Viewport tab should be available like it was in V4

Screenshots
If applicable, add screenshots to help explain your problem.

System:

• OS: MacOS
• Browser: chrome, safari, firefox, (not sure about IE)
• Framework: Angular
• Addons:
  addon-notes
  addon-knobs
  addon-a11y
  addon-viewport
  addon-actions
• Version: 5.0.0-debug.0 and greater

Additional Info
This can not be seen in the angular-cli example because the example does not use the viewport addon

[CodeByAlex]

@tmeasday Was the viewport functionality modified or removed in version 5? I have heard no mention of it in new threads. Last time I checked, I saw it in the codebase.

[tmeasday]

Hey @CodeByAlex, sorry I missed this. The viewports addon now lives it the toolbar at the top!

You can see it in the latest official storybook: https://5c638d7c9a7643000809952f--storybooks-official.netlify.com/?path=/story/ui-panel--default

Note this icon in the toolbar:

Thanks for the detailed report and sorry about the slow response.

[CodeByAlex]

@tmeasday That looks great! but im not seeing it in the angular cli "next" demo:

Also, do we still have to include the addon?

[tmeasday]

Hey @CodeByAlex, the addon is not currently used in that demo. You do still need to install and register it.

[CodeByAlex]

@tmeasday, are we sure this works on the angular version. Im still not seeing it in the toolbar when installing and registering with the latest:

The config that I am using follows the screenshots in the original issue above

[tmeasday]

Hi @CodeByAlex -- how did you install the addon? Can you upload a version of your code somewhere?

[CodeByAlex]

Hey @tmeasday , I am unable to upload the full codebase that I am using but here is the config code:

import { configure, addDecorator, getStorybook } from '@storybook/angular';
import { checkA11y, withA11Y } from '@storybook/addon-a11y';
import { configureViewport } from '@storybook/addon-viewport';
import { withNotes } from '@storybook/addon-notes';
import '@storybook/addon-console';

import axe from 'axe-core';

const req = require.context('../projects/', true, /.stories.ts$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

addDecorator(withNotes);

addDecorator(withA11Y);

addDecorator(configureViewport);

Here is the addonJS:

import '@storybook/addon-notes/register';
import '@storybook/addon-knobs/register';
import '@storybook/addon-a11y/register'; 
import '@storybook/addon-viewport/register';
import '@storybook/addon-actions/register';

Here are the dev deps from the package json:

 "devDependencies": {
    "@angular-devkit/build-angular": "~0.8.0-rc.0",
    "@angular-devkit/build-ng-packagr": "~0.8.0-rc.0",
    "@angular/cli": "~6.2.0-rc.0",
    "@angular/compiler-cli": "^7.2.4",
    "@angular/language-service": "^7.2.4",
    "@storybook/addon-a11y": "5.0.0-rc.5",
    "@storybook/addon-actions": "5.0.0-rc.5",
    "@storybook/addon-centered": "5.0.0-rc.5",
    "@storybook/addon-console": "^1.1.0",
    "@storybook/addon-knobs": "5.0.0-rc.5",
    "@storybook/addon-notes": "5.0.0-rc.5",
    "@storybook/addon-viewport": "5.0.0-rc.5",
    "@storybook/addons": "5.0.0-rc.5",
    "@storybook/angular": "5.0.0-rc.5",
    "@storybook/cli": "5.0.0-rc.5",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^10.5.7",
    "axe": "^3.0.1",
    "babel-loader": "^8.0.4",
    "boxen": "2.1.0",
    "codelyzer": "~4.5.0",
    "css-loader": "^2.1.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "moment": "^2.22.2",
    "ng-packagr": "^4.1.1",
    "node-sass": "^4.11.0",
    "npm-run-all": "^4.1.2",
    "protractor": "~5.3.0",
    "puppeteer": "^1.11.0",
    "resize-observer-polyfill": "^1.5.0",
    "rimraf": "^2.6.1",
    "sass-lint": "^1.12.1",
    "shallow-render": "^7.1.2",
    "start-server-and-test": "^1.7.11",
    "style-loader": "^0.23.1",
    "ts-node": "^5.0.1",
    "tsickle": ">=0.32.1",
    "tslib": "^1.7.1",
    "tslint": "~5.11.0",
    "typescript": "3.1.1"
  }

Those are the only places I'm referencing the viewport addon

[CodeByAlex]

I am seeing this though: warn: ["usage is deprecated, use .addParameters({ viewport }) instead"]
0: "usage is deprecated, use .addParameters({ viewport }) instead"

[tmeasday]

OK, it looks like maybe we can add better back-compat here.

[CodeByAlex]

@tmeasday Am I adding it in incorrectly?

[tmeasday]

@CodeByAlex sure, so the new API is just configure it via parameters:

// Get rid of this
addDecorator(configureViewport);

// Instead just use
addParameters({ 
  // If you want to configure viewports. You can do this at the story or chapter level too
  viewport: { ... }
});

[tmeasday]

I guess it should still be showing up. I'll dig into that

[CodeByAlex]

Thanks, for good measure I tried removing the configure and it didnt show so it must be something else

[shilman]

I'm closing this as a duplicate to #5757. Please feel free to re-open if you think there's something angular-specific here or this is not a dupe.