Skip to content

Commit

Permalink
chore: Update dependencies and remove storybook
Browse files Browse the repository at this point in the history 
Update all dependencies for the dashboard and remove the storybook
dependencies as they are not used or maintained

Vite has also been upgraded to v5 and migrated from CJS to modules
  • Loading branch information
@Venefilyn
Venefilyn committed Sep 3, 2024
1 parent 15cd29c commit 1fb677f
Show file tree
Hide file tree
Showing 9 changed files with 2,491 additions and 13,432 deletions.
73 changes: 0 additions & 73 deletions CONTRIBUTING.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,76 +74,6 @@ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo s

[Technical details](https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers#the-technical-details)

## Developing frontend with Storybook

For the dashboard's frontend, we make use of Storybook to test out different scenarios that each component can be in. For example, testing that everything looks fine from an accessibility point-of-view, or that network errors are displayed correctly.

Storybook allows us to isolate individual React components and display them in different scenarios that we can view with minimal interference. Allowing us to do a proper integration test.

However, Storybook itself is not a replacement for making sure the code works correctly. The API endpoints being used might change in the future, which is why it is good to test your PRs out against stage before production deployment.

## Getting started

You can explore existing stories by looking at the local Storybook dev instance. All the stories listed here belong to a `.stories.jsx` file somewhere in the codebase.

```
make storybook
```

### Writing a story

We isolate components in a stories file, this will show up as a dedicated page when running Storybook. For up-to-date information consult the [Storybook docs](https://storybook.js.org/docs/react/writing-stories/introduction).

Storybook's recommended way of writing component stories is to use their [Component Story Format](https://storybook.js.org/docs/react/api/csf). With that we can easily test out a small component like the `NotFound` one.

```jsx
// Import React, it's necessary for JSX
import React from "react";
// Importing the component we want to write a story about
import { NotFound } from "./NotFound";

// Default export is the actual story page itself, it sets things up for the actual stories - which are the named exports down below
export default {
title: "NotFound",
component: NotFound,
};

// Here we initialize the component with default args from Storybook
// If we wanted to add some parameter ourselves that the viewer of the Story cannot change we would do so here
// Note: It's recommended to allow the user to change the variables through the Storybook website unless it's critical to the story
const Template = (args) => <NotFound {...args} />;

// Next we call bind, this allows us to use `this` properly within the component
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
export const Default = Template.bind({});
```

#### Network usage

Most of our components need to use some sort of network activity, likely an API call to Packit service. For those stories, we are using a library called [MSW](https://mswjs.io/).

To use this, we can add some parameters to the named export to tell `msw` on how to intercept the network call. In this example we have a story that successfully recieve data instantly and displays it. The `CoprBuildData` here is from a local data file containing an example output from the API endpoint.

> [!NOTE]
>
> `msw` will output into the browser console if it detects a network call it did not intercept, which is helpful for debugging why it is not working.
```jsx
export const ResultsFound = Template.bind({});
// Adding parameters to the story
ResultsFound.parameters = {
msw: {
handlers: [
// all requests to the API ending with copr-builds are catched
rest.get("*/copr-builds", (req, res, ctx) => {
// Returning the JSON from the variable containing the data of the Copr build API response
return res(ctx.json(CoprBuildData));
}),
],
},
};
```

#### Using React Router and React Query

Other things to consider is our usage of React Router and React Query. If the component is making use of these in any way, such as `useParams` from React Router, or `useQuery` from React Query, we need to add those to the default export. Take `CoprBuildsTable` component here which has both.
Expand All @@ -153,13 +83,10 @@ Here we need to import both `withRouter` to allow us to use hooks from React Rou
```jsx
import React from "react";
import { CoprBuildsTable } from "./CoprBuildsTable";
import { withQueryClient } from "../../utils/storybook/withQueryClient";
import { withRouter } from "storybook-addon-react-router-v6";

export default {
title: "CoprBuildsTable",
component: CoprBuildsTable,
decorators: [withRouter, withQueryClient],
};
```

Expand Down
4 changes: 0 additions & 4 deletions Makefile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,6 @@ run-dev-frontend:
run-dev-flask:
FLASK_DEBUG=1 FLASK_APP=packit_dashboard.app VITE_GIT_SHA=$(GIT_SHA) VITE_API_URL=$(API_URL) flask-3 run --host=0.0.0.0

storybook:
cd frontend && pnpm storybook


run-container-stg: build-stg
$(CONTAINER_ENGINE) run -i --rm -u 1234 -p 8443:8443 -v $(CURDIR)/secrets:/secrets:ro,z $(IMAGE)

Expand Down
24 changes: 0 additions & 24 deletions frontend/.storybook/main.ts
View file

This file was deleted.

3 changes: 0 additions & 3 deletions frontend/.storybook/preview-head.html
View file

This file was deleted.

17 changes: 0 additions & 17 deletions frontend/.storybook/preview.ts
View file

This file was deleted.

0 frontend/eslint.config.mjs → frontend/eslint.config.js
View file
File renamed without changes.
99 changes: 37 additions & 62 deletions frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,44 +2,44 @@
"name": "frontend",
"version": "0.1.0",
"private": true,
"type": "module",
"dependencies": {
"@imranbarbhuiya/duration": "^5.1.8",
"@patternfly/patternfly": "^5.1.0",
"@patternfly/react-charts": "^7.1.1",
"@patternfly/patternfly": "^5.4.0",
"@patternfly/react-charts": "^7.4.0",
"@patternfly/react-component-groups": "^5.2.0",
"@patternfly/react-core": "^5.1.1",
"@patternfly/react-icons": "^5.1.1",
"@patternfly/react-log-viewer": "^5",
"@patternfly/react-styles": "5.1.1",
"@patternfly/react-table": "5.1.1",
"@sentry/react": "^8.13.0",
"@sentry/vite-plugin": "^2.20.1",
"@tanstack/react-query": "^5.50.1",
"@tanstack/react-query-devtools": "^5.50.1",
"@tanstack/react-router": "^1.43.12",
"@tanstack/router-devtools": "^1.48.1",
"@tanstack/router-plugin": "^1.43.12",
"@testing-library/dom": "^9.3.1",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^14.4.3",
"@types/jest": "^29.5.0",
"@types/node": "^18.15.10",
"@types/react": "^18.0.29",
"@types/react-dom": "^18.0.11",
"@vitejs/plugin-react": "^4.0.1",
"msw": "^1.2.1",
"prettier": "^2.8.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sharp": "^0.33.4",
"@patternfly/react-core": "^5.4.0",
"@patternfly/react-icons": "^5.4.0",
"@patternfly/react-log-viewer": "^5.3.0",
"@patternfly/react-styles": "5.4.0",
"@patternfly/react-table": "5.4.0",
"@sentry/react": "^8.27.0",
"@sentry/vite-plugin": "^2.22.3",
"@tanstack/react-query": "^5.53.3",
"@tanstack/react-query-devtools": "^5.53.3",
"@tanstack/react-router": "^1.52.4",
"@tanstack/router-devtools": "^1.52.4",
"@tanstack/router-plugin": "^1.52.0",
"@testing-library/dom": "^10.4.0",
"@testing-library/jest-dom": "^6.5.0",
"@testing-library/react": "^16.0.1",
"@testing-library/user-event": "^14.5.2",
"@types/jest": "^29.5.12",
"@types/node": "^22.5.2",
"@types/react": "^18.3.5",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.3.1",
"prettier": "^3.3.3",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"sharp": "^0.33.5",
"svgo": "^3.3.2",
"typescript": "^5.0.2",
"vite": "^4.5.3",
"vite-bundle-visualizer": "^0.7.0",
"typescript": "^5.5.4",
"vite": "^5.4.2",
"vite-bundle-visualizer": "^1.2.1",
"vite-plugin-image-optimizer": "^1.1.8",
"vite-plugin-svgr": "^3.2.0",
"vite-tsconfig-paths": "^4.2.0"
"vite-plugin-svgr": "^4.2.0",
"vite-tsconfig-paths": "^5.0.1"
},
"proxy": "http://127.0.0.1:5000",
"scripts": {
Expand All @@ -48,9 +48,7 @@
"build:analyze": "vite-bundle-visualizer --open",
"preview": "vite preview",
"lint": "eslint src/",
"prettier": "prettier --write .",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
"prettier": "prettier --write ."
},
"prettier": {
"overrides": [
Expand Down Expand Up @@ -78,35 +76,12 @@
]
},
"devDependencies": {
"@storybook/addon-a11y": "^7.0.9",
"@storybook/addon-actions": "^7.0.9",
"@storybook/addon-essentials": "^7.0.9",
"@storybook/addon-interactions": "^7.0.9",
"@storybook/addon-links": "^7.0.9",
"@storybook/blocks": "^7.0.18",
"@storybook/builder-vite": "^7.0.18",
"@storybook/components": "^7.4.0",
"@storybook/core-events": "^7.4.0",
"@storybook/manager-api": "^7.4.0",
"@storybook/node-logger": "^7.0.9",
"@storybook/preview-api": "^7.4.0",
"@storybook/react": "^7.0.9",
"@storybook/react-vite": "^7.0.18",
"@storybook/testing-library": "^0.1.0",
"@storybook/theming": "^7.4.0",
"@storybook/types": "^7.4.0",
"babel-plugin-named-exports-order": "^0.0.2",
"eslint": "^8.57.0",
"eslint": "^9.9.1",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-react": "^7.34.1",
"eslint-plugin-storybook": "^0.6.12",
"msw-storybook-addon": "^1.8.0",
"eslint-plugin-react": "^7.35.0",
"prop-types": "^15.8.1",
"storybook": "^7.0.9",
"typescript-eslint": "^7.5.0"
},
"msw": {
"workerDirectory": "public"
"typescript-eslint": "^8.4.0"
},
"pnpm": {
"supportedArchitectures": {
Expand Down
Loading

0 comments on commit 1fb677f

Please sign in to comment.