Fix React Router and React Query integrations in Storybook

- Remove unnecessary logout button styles - Update query keys to new format to pre-populate data for the stories - Replace custom router decorator - Fix tab selection on EventListener stories - Update Header stories to reflect new component composition
tektoncd · Jul 23, 2024 · 537b4c7 · 537b4c7
1 parent a4133bd
commit 537b4c7
Show file tree

Hide file tree

Showing 12 changed files with 151 additions and 68 deletions.
diff --git a/.storybook/Container.jsx b/.storybook/Container.jsx
@@ -13,34 +13,22 @@ limitations under the License.
 
 import { StrictMode } from 'react';
 import { IntlProvider } from 'react-intl';
-import { Route, MemoryRouter as Router, Routes } from 'react-router-dom';
 
 import messages from '../src/nls/messages_en.json';
 
 import './Container.scss';
 
 export default function Container({
   notes,
-  path = '/',
-  route = '/',
   story: Story
 }) {
   return (
     <IntlProvider locale="en" defaultLocale="en" messages={messages['en']}>
       {notes && <p>{notes}</p>}
       <div data-floating-menu-container role="main">
-        <Router initialEntries={[route]}>
-          <Routes>
-            <Route
-              path={path}
-              element={
-                <StrictMode>
-                  <Story />
-                </StrictMode>
-              }
-            />
-          </Routes>
-        </Router>
+        <StrictMode>
+          <Story />
+        </StrictMode>
       </div>
     </IntlProvider>
   );

diff --git a/.storybook/main.js b/.storybook/main.js
@@ -16,7 +16,8 @@ const config = {
     '@storybook/addon-essentials',
     '@storybook/addon-links',
     '@storybook/addon-storysource',
-    '@storybook/addon-themes'
+    '@storybook/addon-themes',
+    'storybook-addon-remix-react-router'
   ],
   core: { disableTelemetry: true },
   docs: {
@@ -29,13 +30,8 @@ const config = {
   refs: (_config, { configType }) => {
     if (configType === 'DEVELOPMENT') {
       return {
-        carbon10: {
-          title: 'Carbon v10',
-          url: 'https://v7-react.carbondesignsystem.com/',
-          expanded: false
-        },
         carbon11: {
-          title: 'Carbon v11 (do not use yet, for reference only)',
+          title: 'Carbon v11',
           url: 'https://react.carbondesignsystem.com/',
           expanded: false
         }

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -77,6 +77,7 @@
     "rollup-plugin-visualizer": "^5.12.0",
     "sass": "npm:sass-embedded@^1.77.5",
     "storybook": "^8.1.11",
+    "storybook-addon-remix-react-router": "^3.0.0",
     "vite": "^5.3.3",
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-svgr": "^4.2.0",

diff --git a/packages/components/src/components/PipelineRuns/PipelineRuns.stories.jsx b/packages/components/src/components/PipelineRuns/PipelineRuns.stories.jsx
@@ -16,6 +16,7 @@ import { getStatus } from '@tektoncd/dashboard-utils';
 import { action } from '@storybook/addon-actions';
 import { TrashCan as Delete } from '@carbon/react/icons';
 import { Dropdown } from '@carbon/react';
+import { withRouter } from 'storybook-addon-remix-react-router';
 
 import StatusIcon from '../StatusIcon';
 import PipelineRuns from '.';
@@ -35,6 +36,7 @@ function getFilters(showFilters) {
 
 export default {
   component: PipelineRuns,
+  decorators: [withRouter()],
   title: 'PipelineRuns'
 };
 

diff --git a/src/containers/EventListener/EventListener.stories.jsx b/src/containers/EventListener/EventListener.stories.jsx
@@ -13,8 +13,13 @@ limitations under the License.
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { createIntl } from 'react-intl';
+import {
+  reactRouterParameters,
+  withRouter
+} from 'storybook-addon-remix-react-router';
 
 import { EventListenerContainer } from './EventListener';
+import { triggersAPIGroup } from '../../api/utils';
 
 const name = 'my-eventlistener';
 const namespace = 'foo';
@@ -130,6 +135,7 @@ const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       cacheTime: 1000 * 60 * 5, // 5 minutes
+      queryFn: () => {},
       refetchOnWindowFocus: false,
       retry: false,
       staleTime: Infinity
@@ -140,11 +146,18 @@ const queryClient = new QueryClient({
 const props = { intl };
 
 export default {
-  args: {
-    path: '/namespaces/:namespace/eventlisteners/:name',
-    route: `/namespaces/${namespace}/eventlisteners/${name}`
-  },
   component: EventListenerContainer,
+  decorators: [withRouter()],
+  parameters: {
+    reactRouter: reactRouterParameters({
+      location: {
+        pathParams: { name, namespace }
+      },
+      routing: {
+        path: '/namespaces/:namespace/eventlisteners/:name'
+      }
+    })
+  },
   title: 'EventListener'
 };
 
@@ -154,7 +167,7 @@ export const Default = {
   decorators: [
     Story => {
       queryClient.setQueryData(
-        ['EventListener', { name, namespace }],
+        [triggersAPIGroup, 'v1beta1', 'eventlisteners', { name, namespace }],
         eventListener
       );
 
@@ -172,10 +185,13 @@ export const NoTriggers = {
 
   decorators: [
     Story => {
-      queryClient.setQueryData(['EventListener', { name, namespace }], {
-        ...eventListener,
-        spec: { ...eventListener.spec, triggers: [] }
-      });
+      queryClient.setQueryData(
+        [triggersAPIGroup, 'v1beta1', 'eventlisteners', { name, namespace }],
+        {
+          ...eventListener,
+          spec: { ...eventListener.spec, triggers: [] }
+        }
+      );
 
       return (
         <QueryClientProvider client={queryClient}>
@@ -191,10 +207,13 @@ export const NoServiceAccount = {
 
   decorators: [
     Story => {
-      queryClient.setQueryData(['EventListener', { name, namespace }], {
-        ...eventListener,
-        spec: { ...eventListener.spec, serviceAccountName: undefined }
-      });
+      queryClient.setQueryData(
+        [triggersAPIGroup, 'v1beta1', 'eventlisteners', { name, namespace }],
+        {
+          ...eventListener,
+          spec: { ...eventListener.spec, serviceAccountName: undefined }
+        }
+      );
 
       return (
         <QueryClientProvider client={queryClient}>
@@ -212,10 +231,13 @@ export const NoServiceType = {
 
   decorators: [
     Story => {
-      queryClient.setQueryData(['EventListener', { name, namespace }], {
-        ...eventListener,
-        spec: { ...eventListener.spec, serviceType: undefined }
-      });
+      queryClient.setQueryData(
+        [triggersAPIGroup, 'v1beta1', 'eventlisteners', { name, namespace }],
+        {
+          ...eventListener,
+          spec: { ...eventListener.spec, serviceType: undefined }
+        }
+      );
 
       return (
         <QueryClientProvider client={queryClient}>

diff --git a/src/containers/Header/Header.stories.jsx b/src/containers/Header/Header.stories.jsx
@@ -11,8 +11,35 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { withRouter } from 'storybook-addon-remix-react-router';
+
 import Header from '.';
-import LogoutButton from '../LogoutButton';
+import HeaderBarContent from '../HeaderBarContent';
+import { NamespaceContext } from '../../api';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      cacheTime: 1000 * 60 * 5, // 5 minutes
+      refetchOnWindowFocus: false,
+      retry: false,
+      staleTime: Infinity
+    }
+  }
+});
+
+const namespaces = [
+  'default',
+  'kube-public',
+  'kube-system',
+  'tekton-pipelines'
+].map(namespace => ({ metadata: { name: namespace } }));
+
+const namespaceContext = {
+  selectedNamespace: 'default',
+  selectNamespace: () => {}
+};
 
 export default {
   component: Header,
@@ -21,10 +48,28 @@ export default {
 
 export const Default = {};
 
-export const WithLogout = {
+export const WithContent = {
   args: {
-    children: (
-      <LogoutButton getLogoutURL={() => Promise.resolve('/something')} />
-    )
-  }
+    children: <HeaderBarContent />
+  },
+  decorators: [
+    withRouter(),
+    Story => {
+      queryClient.setQueryData(['core', 'v1', 'namespaces'], () => ({
+        items: namespaces,
+        metadata: {}
+      }));
+      queryClient.setQueryData(['properties'], () => ({
+        logoutURL: '/some/url'
+      }));
+
+      return (
+        <QueryClientProvider client={queryClient}>
+          <NamespaceContext.Provider value={namespaceContext}>
+            <Story />
+          </NamespaceContext.Provider>
+        </QueryClientProvider>
+      );
+    }
+  ]
 };
diff --git a/src/containers/ListPageLayout/ListPageLayout.stories.jsx b/src/containers/ListPageLayout/ListPageLayout.stories.jsx
@@ -14,6 +14,7 @@ limitations under the License.
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Table } from '@tektoncd/dashboard-components';
+import { withRouter } from 'storybook-addon-remix-react-router';
 
 import ListPageLayoutContainer from './ListPageLayout';
 
@@ -42,6 +43,7 @@ export default {
   },
   component: ListPageLayoutContainer,
   decorators: [
+    withRouter(),
     Story => {
       queryClient.setQueryData(['Namespace'], () => ({
         items: namespaces,

diff --git a/src/containers/LogoutButton/LogoutButton.jsx b/src/containers/LogoutButton/LogoutButton.jsx
@@ -36,7 +36,7 @@ export default function LogoutButton() {
       onClick={() => {
         window.location.href = logoutURL;
       }}
-      title={logoutString}
+      tooltipAlignment="end"
     >
       <LogoutIcon size={20} />
     </HeaderGlobalAction>

diff --git a/src/containers/LogoutButton/_LogoutButton.scss b/src/containers/LogoutButton/_LogoutButton.scss