diff --git a/web/packages/build/package.json b/web/packages/build/package.json index f858c44b65089..2c8a4b56b602b 100644 --- a/web/packages/build/package.json +++ b/web/packages/build/package.json @@ -37,11 +37,11 @@ "@opentelemetry/sdk-trace-web": "1.8.0", "@opentelemetry/semantic-conventions": "1.8.0", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7", + "@storybook/addon-toolbars": "^6.5.16", "@storybook/builder-webpack5": "^6.5.16", + "@storybook/components": "^6.5.16", "@storybook/manager-webpack5": "^6.5.16", "@storybook/react": "^6.5.16", - "@storybook/addon-toolbars": "^6.5.16", - "@storybook/components": "^6.5.16", "@swc/plugin-styled-components": "1.5.41", "@testing-library/jest-dom": "^5.15.1", "@testing-library/react": "^12.1.2", @@ -72,8 +72,8 @@ "eslint-plugin-jest": "^25.3.0", "eslint-plugin-jest-dom": "^4.0.2", "eslint-plugin-react": "^7.27.1", - "eslint-plugin-testing-library": "^5.6.0", "eslint-plugin-react-hooks": "^4.6.0", + "eslint-plugin-testing-library": "^5.6.0", "events": "1.0.2", "fork-ts-checker-webpack-plugin": "^8.0.0", "html-webpack-plugin": "^5.5.0", @@ -96,5 +96,8 @@ "webpack-bundle-analyzer": "^4.6.1", "webpack-cli": "^4.10.0", "webpack-dev-server": "^4.9.3" + }, + "devDependencies": { + "msw-storybook-addon": "^1.8.0" } } diff --git a/web/packages/teleport/src/UnifiedResources/Resources.story.tsx b/web/packages/teleport/src/UnifiedResources/Resources.story.tsx new file mode 100644 index 0000000000000..8d91db0a95c42 --- /dev/null +++ b/web/packages/teleport/src/UnifiedResources/Resources.story.tsx @@ -0,0 +1,98 @@ +/** + * Copyright 2023 Gravitational, Inc + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { MemoryRouter } from 'react-router'; + +import { initialize, mswLoader } from 'msw-storybook-addon'; + +import { rest, ResponseResolver, MockedRequest, RestContext } from 'msw'; + +import { createTeleportContext } from 'teleport/mocks/contexts'; +import { ContextProvider } from 'teleport'; +import cfg from 'teleport/config'; +import { apps } from 'teleport/Apps/fixtures'; +import { databases } from 'teleport/Databases/fixtures'; +import { kubes } from 'teleport/Kubes/fixtures'; +import { desktops } from 'teleport/Desktops/fixtures'; +import { nodes } from 'teleport/Nodes/fixtures'; + +import { Resources } from './Resources'; + +initialize(); + +export default { + title: 'Teleport/UnifiedResources', + loaders: [mswLoader], +}; + +const allResources = [ + ...apps, + ...databases, + ...kubes, + ...desktops, + ...nodes, + ...apps, + ...databases, + ...kubes, + ...desktops, + ...nodes, +]; + +const story = (resolver: ResponseResolver) => { + const ctx = createTeleportContext(); + + const s = () => ( + + + + + + ); + + s.parameters = { + msw: { + handlers: [ + rest.get(cfg.getUnifiedResourcesUrl('localhost', {}), resolver), + ], + }, + }; + return s; +}; + +export const Empty = story((_, res, ctx) => res(ctx.json({ items: [] }))); + +export const List = story((_, res, ctx) => + res(ctx.json({ items: allResources })) +); + +export const Loading = story((_, res, ctx) => res(ctx.delay('infinite'))); + +export const LoadingAfterScrolling = story((req, res, ctx) => { + if (req.url.searchParams.get('startKey') === 'next-key') { + return res(ctx.delay('infinite')); + } + return res(ctx.json({ items: allResources, startKey: 'next-key' })); +}); + +export const Error = story((_, res, ctx) => res(ctx.status(500))); + +export const ErrorAfterScrolling = story((req, res, ctx) => { + if (req.url.searchParams.get('startKey') === 'next-key') { + return res(ctx.status(500)); + } + return res(ctx.json({ items: allResources, startKey: 'next-key' })); +}); diff --git a/yarn.lock b/yarn.lock index df33c9b1644f3..e2031b0bf32c4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11608,6 +11608,13 @@ ms@2.1.3, ms@^2.0.0, ms@^2.1.1: resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2" integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA== +msw-storybook-addon@^1.8.0: + version "1.8.0" + resolved "https://registry.yarnpkg.com/msw-storybook-addon/-/msw-storybook-addon-1.8.0.tgz#090b55b9a586f3e1620782dc156e8d5ce951ab7a" + integrity sha512-dw3vZwqjixmiur0vouRSOax7wPSu9Og2Hspy9JZFHf49bZRjwDiLF0Pfn2NXEkGviYJOJiGxS1ejoTiUwoSg4A== + dependencies: + is-node-process "^1.0.1" + msw@^0.47.4: version "0.47.4" resolved "https://registry.yarnpkg.com/msw/-/msw-0.47.4.tgz#5551011609890c6b62a2047055f475a9afae2ad4"