Ad a storybook for the Unified Resources screen

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"
   }
 }

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<MockedRequest, RestContext>) => {
+  const ctx = createTeleportContext();
+
+  const s = () => (
+    <MemoryRouter>
+      <ContextProvider ctx={ctx}>
+        <Resources />
+      </ContextProvider>
+    </MemoryRouter>
+  );
+
+  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' }));
+});

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"