Skip to content

Conversation

@pd-redis
Copy link
Collaborator

This pull request introduces Storybook integration for the project, enabling component-driven development, documentation, and visual testing. It adds Storybook configuration files, updates build and linting tools, and provides initial stories for several UI components. The changes also include theming, styling, and utility enhancements to support Storybook and improve the developer experience.

Storybook Integration and Configuration

  • Added Storybook configuration files, including .storybook/main.ts, .storybook/preview.tsx, .storybook/vite.config.ts, .storybook/tsconfig.json, and .storybook/redis-theme.ts, to enable and customize Storybook for the project. These files configure addons, theming, Vite integration, and global styles. [1] [2] [3] [4] [5]
  • Added .storybook/preview-head.html to set up global variables and CSS for Storybook docs and previews.

Component Stories and Utilities

  • Added initial Storybook stories for UI components such as AnalyticsTabs, AutoRefresh, Button, DestructiveButton, and ActionIconButton to demonstrate usage and enable visual testing. [1] [2] [3] [4] [5]
  • Introduced utility and helper files for Storybook, such as .storybook/helpers/styles.ts, .storybook/RootStoryLayout.tsx, and .storybook/Story.context.ts, to provide styled containers, context, and layout customization for stories. [1] [2] [3]

Build, Lint, and Babel Enhancements

  • Updated package.json to add Storybook-related scripts (sb, build-sb), dependencies (@storybook/*, eslint-plugin-storybook, etc.), and upgraded msw to v2. [1] [2] [3] [4] [5]
  • Modified .eslintrc.js to extend with plugin:storybook/recommended and added eslint-plugin-storybook for linting Storybook files. [1] [2]
  • Updated babel.config.cjs to include the @babel/plugin-proposal-decorators plugin for Storybook support.

Component and Style Refactoring

  • Re-exported FormField from @redis-ui/components to simplify imports in the codebase.

These changes collectively establish a robust Storybook environment, streamline UI component development, and enhance the project's tooling and developer workflow.

pd-redis added 30 commits May 7, 2025 12:28
# Conflicts:
#	redisinsight/ui/src/components/connectivity-error/ConnectivityError.tsx
#	redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx
#	redisinsight/ui/src/components/item-list/components/delete-action/DeleteAction.tsx
#	redisinsight/ui/src/components/item-list/components/export-action/ExportAction.tsx
#	redisinsight/ui/src/components/query/query-actions/QueryActions.tsx
#	redisinsight/ui/src/components/query/query-card/QueryCardHeader/QueryCardHeader.tsx
#	redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/InternalPage/InternalPage.tsx
#	redisinsight/ui/src/pages/browser/components/add-key/AddKeyHash/AddKeyHash.tsx
#	redisinsight/ui/src/pages/browser/components/add-key/AddKeyList/AddKeyList.tsx
#	redisinsight/ui/src/pages/browser/components/add-key/AddKeyReJSON/AddKeyReJSON.tsx
#	redisinsight/ui/src/pages/browser/components/add-key/AddKeySet/AddKeySet.tsx
#	redisinsight/ui/src/pages/browser/components/add-key/AddKeyStream/AddKeyStream.tsx
#	redisinsight/ui/src/pages/browser/components/add-key/AddKeyString/AddKeyString.tsx
#	redisinsight/ui/src/pages/browser/components/add-key/AddKeyZset/AddKeyZset.tsx
#	redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.tsx
#	redisinsight/ui/src/pages/browser/modules/key-details/components/set-details/add-set-members/AddSetMembers.tsx
#	redisinsight/ui/src/pages/database-analysis/components/header/Header.tsx
#	redisinsight/ui/src/pages/home/components/database-list-header/DatabaseListHeader.tsx
#	redisinsight/ui/src/pages/home/components/database-manage-tags-modal/ManageTagsModal.tsx
#	redisinsight/ui/src/pages/settings/components/cloud-settings/CloudSettings.tsx
#	redisinsight/ui/src/pages/settings/components/cloud-settings/components/user-api-keys-table/UserApiKeysTable.tsx
#	redisinsight/ui/src/pages/slow-log/components/Actions/Actions.tsx
@CLAassistant
Copy link

CLAassistant commented Oct 14, 2025

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
3 out of 4 committers have signed the CLA.

✅ dantovska
✅ pd-redis
✅ KrumTy
❌ Kristiyan Ivanov


Kristiyan Ivanov seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
You have signed the CLA already but the status is still pending? Let us recheck it.

Copy link

@jit-ci jit-ci bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❌ Jit has detected 4 important findings in this PR that you should review.
The findings are detailed below as separate comments.
It’s highly recommended that you fix these security issues before merge.

Repository Risks:

  • Critical Severity Findings: Indicates that the resource has critical severity security findings that need immediate action.
  • Database Integration: Connects to a database, often involving sensitive data that must be securely managed.
  • Production: Critical as it operates in a live production environment, directly impacting users and business operations.

Repository Context:

graph LR
    GitHub$Repository_U23_redis/RedisInsight["GitHub Repository<br/>redis/RedisInsight"]:::GitHub$Repository
    DBIntegration_U23_redis["DBIntegration<br/>redis"]:::DBIntegration
    GitHub$Actions_U23_aws_U2D_upload_U2D_enterprise_U2E_yml["GitHub Actions<br/>aws-upload-enterprise.yml"]:::GitHub$Actions
    GitHub$Repository_U23_redis/RedisInsight -- "Is accessible to" --> DBIntegration_U23_redis
    GitHub$Repository_U23_redis/RedisInsight -- "Has" --> GitHub$Actions_U23_aws_U2D_upload_U2D_enterprise_U2E_yml
Loading

dependencies:
"@babel/parser" "^7.28.0"
"@babel/types" "^7.28.0"
"@babel/parser" "^7.28.3"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Security control: Secret Detection Trufflehog

Github

Github (Unverified)

Severity: HIGH


Why should you fix this issue?
This code introduces a hard-coded secrets issue. In a production environment, storing secrets like passwords or API keys directly in the code can lead to serious security risks. If these secrets are compromised, it could result in unauthorized access or manipulation of critical systems.


Jit Bot commands and options (e.g., ignore issue)

You can trigger Jit actions by commenting on this PR review:

  • #jit_ignore_fp Ignore and mark this specific single instance of finding as “False Positive”
  • #jit_ignore_accept Ignore and mark this specific single instance of finding as “Accept Risk”
  • #jit_ignore_type_in_file Ignore any finding of type "Github" in yarn.lock; future occurrences will also be ignored.
  • #jit_undo_ignore Undo ignore command

integrity sha512-muE8Tt8M22638HU31A3CgfSUciwz1fhATfoVai05aPXGor//CdWDCbnlY1yvBPo07njuVOCNGCSp/GTt12lIug==
"@babel/helpers@^7.25.0", "@babel/helpers@^7.28.4":
version "7.28.4"
resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.28.4.tgz#fe07274742e95bdf7cf1443593eeb8926ab63827"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Security control: Secret Detection Trufflehog

Github

Github (Unverified)

Severity: HIGH


Why should you fix this issue?
This code introduces a hard-coded secrets issue. In a production environment, storing secrets like passwords or API keys directly in the code can lead to serious security risks. If these secrets are compromised, it could result in unauthorized access or manipulation of critical systems.


Jit Bot commands and options (e.g., ignore issue)

You can trigger Jit actions by commenting on this PR review:

  • #jit_ignore_fp Ignore and mark this specific single instance of finding as “False Positive”
  • #jit_ignore_accept Ignore and mark this specific single instance of finding as “Accept Risk”
  • #jit_ignore_type_in_file Ignore any finding of type "Github" in yarn.lock; future occurrences will also be ignored.
  • #jit_undo_ignore Undo ignore command

integrity sha512-Oixnb+DzmRT30qu9d3tJSQkxuygWm32DFykT4bRoORPa9hZ/L4KhVB/XiRm6KG+roIEM7DBQlmg27kw2HZkdZg==
"@babel/core@^7.11.6", "@babel/core@^7.12.3", "@babel/core@^7.21.3", "@babel/core@^7.23.5", "@babel/core@^7.23.9", "@babel/core@^7.28.0":
version "7.28.4"
resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.28.4.tgz#12a550b8794452df4c8b084f95003bce1742d496"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Security control: Secret Detection Trufflehog

Github

Github (Unverified)

Severity: HIGH


Why should you fix this issue?
This code introduces a hard-coded secrets issue. In a production environment, storing secrets like passwords or API keys directly in the code can lead to serious security risks. If these secrets are compromised, it could result in unauthorized access or manipulation of critical systems.


Jit Bot commands and options (e.g., ignore issue)

You can trigger Jit actions by commenting on this PR review:

  • #jit_ignore_fp Ignore and mark this specific single instance of finding as “False Positive”
  • #jit_ignore_accept Ignore and mark this specific single instance of finding as “Accept Risk”
  • #jit_ignore_type_in_file Ignore any finding of type "Github" in yarn.lock; future occurrences will also be ignored.
  • #jit_undo_ignore Undo ignore command

resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.3.2.tgz#a6abc715fb6884851fca9dad37fc34739a04fd11"
integrity sha512-DA5a1C0gD/pLOvhv33YMrbf2FK3oUzwNl9oOJqE4XVjuEtt6XIakRcsd7eLiOSPkp1kTRQGICTA8cKra/vFbjw==
"@adobe/css-tools@^4.4.0":
version "4.4.4"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Security control: Secret Detection Trufflehog

Github

Github (Unverified)

Severity: HIGH


Why should you fix this issue?
This code introduces a hard-coded secrets issue. In a production environment, storing secrets like passwords or API keys directly in the code can lead to serious security risks. If these secrets are compromised, it could result in unauthorized access or manipulation of critical systems.


Jit Bot commands and options (e.g., ignore issue)

You can trigger Jit actions by commenting on this PR review:

  • #jit_ignore_fp Ignore and mark this specific single instance of finding as “False Positive”
  • #jit_ignore_accept Ignore and mark this specific single instance of finding as “Accept Risk”
  • #jit_ignore_type_in_file Ignore any finding of type "Github" in yarn.lock; future occurrences will also be ignored.
  • #jit_undo_ignore Undo ignore command

Copy link

@jit-ci jit-ci bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❌ Jit has detected 4 important findings in this PR that you should review.
The findings are detailed as separate comments.
It’s highly recommended that you fix these security issues before merge.

Until now, you ignored/fixed 4 findings.

dependencies:
"@babel/parser" "^7.28.0"
"@babel/types" "^7.28.0"
"@babel/parser" "^7.28.3"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Security control: Secret Detection Trufflehog

Github

Github (Unverified)

Severity: HIGH


Why should you fix this issue?
This code introduces a hard-coded secrets issue. In a production environment, storing secrets like passwords or API keys directly in the code can lead to serious security risks. If these secrets are compromised, it could result in unauthorized access or manipulation of critical systems.


Jit Bot commands and options (e.g., ignore issue)

You can trigger Jit actions by commenting on this PR review:

  • #jit_ignore_fp Ignore and mark this specific single instance of finding as “False Positive”
  • #jit_ignore_accept Ignore and mark this specific single instance of finding as “Accept Risk”
  • #jit_ignore_type_in_file Ignore any finding of type "Github" in yarn.lock; future occurrences will also be ignored.
  • #jit_undo_ignore Undo ignore command

integrity sha512-muE8Tt8M22638HU31A3CgfSUciwz1fhATfoVai05aPXGor//CdWDCbnlY1yvBPo07njuVOCNGCSp/GTt12lIug==
"@babel/helpers@^7.25.0", "@babel/helpers@^7.28.4":
version "7.28.4"
resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.28.4.tgz#fe07274742e95bdf7cf1443593eeb8926ab63827"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Security control: Secret Detection Trufflehog

Github

Github (Unverified)

Severity: HIGH


Why should you fix this issue?
This code introduces a hard-coded secrets issue. In a production environment, storing secrets like passwords or API keys directly in the code can lead to serious security risks. If these secrets are compromised, it could result in unauthorized access or manipulation of critical systems.


Jit Bot commands and options (e.g., ignore issue)

You can trigger Jit actions by commenting on this PR review:

  • #jit_ignore_fp Ignore and mark this specific single instance of finding as “False Positive”
  • #jit_ignore_accept Ignore and mark this specific single instance of finding as “Accept Risk”
  • #jit_ignore_type_in_file Ignore any finding of type "Github" in yarn.lock; future occurrences will also be ignored.
  • #jit_undo_ignore Undo ignore command

integrity sha512-Oixnb+DzmRT30qu9d3tJSQkxuygWm32DFykT4bRoORPa9hZ/L4KhVB/XiRm6KG+roIEM7DBQlmg27kw2HZkdZg==
"@babel/core@^7.11.6", "@babel/core@^7.12.3", "@babel/core@^7.21.3", "@babel/core@^7.23.5", "@babel/core@^7.23.9", "@babel/core@^7.28.0":
version "7.28.4"
resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.28.4.tgz#12a550b8794452df4c8b084f95003bce1742d496"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Security control: Secret Detection Trufflehog

Github

Github (Unverified)

Severity: HIGH


Why should you fix this issue?
This code introduces a hard-coded secrets issue. In a production environment, storing secrets like passwords or API keys directly in the code can lead to serious security risks. If these secrets are compromised, it could result in unauthorized access or manipulation of critical systems.


Jit Bot commands and options (e.g., ignore issue)

You can trigger Jit actions by commenting on this PR review:

  • #jit_ignore_fp Ignore and mark this specific single instance of finding as “False Positive”
  • #jit_ignore_accept Ignore and mark this specific single instance of finding as “Accept Risk”
  • #jit_ignore_type_in_file Ignore any finding of type "Github" in yarn.lock; future occurrences will also be ignored.
  • #jit_undo_ignore Undo ignore command

resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.3.2.tgz#a6abc715fb6884851fca9dad37fc34739a04fd11"
integrity sha512-DA5a1C0gD/pLOvhv33YMrbf2FK3oUzwNl9oOJqE4XVjuEtt6XIakRcsd7eLiOSPkp1kTRQGICTA8cKra/vFbjw==
"@adobe/css-tools@^4.4.0":
version "4.4.4"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Security control: Secret Detection Trufflehog

Github

Github (Unverified)

Severity: HIGH


Why should you fix this issue?
This code introduces a hard-coded secrets issue. In a production environment, storing secrets like passwords or API keys directly in the code can lead to serious security risks. If these secrets are compromised, it could result in unauthorized access or manipulation of critical systems.


Jit Bot commands and options (e.g., ignore issue)

You can trigger Jit actions by commenting on this PR review:

  • #jit_ignore_fp Ignore and mark this specific single instance of finding as “False Positive”
  • #jit_ignore_accept Ignore and mark this specific single instance of finding as “Accept Risk”
  • #jit_ignore_type_in_file Ignore any finding of type "Github" in yarn.lock; future occurrences will also be ignored.
  • #jit_undo_ignore Undo ignore command

Copy link
Member

@valkirilov valkirilov left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very nice! Looks promising and hopefully useful for us in the future.

Still, it looks like a big topic, so I think it's a good candidate to present to the team, maybe with a short demo, so everybody is aware of the enhancements it introduces and how we can use (and extend them) in the future.

},
}

export const EmptyMedium: EmptyStory = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note: It seems like the size property is not working properly, all of the buttons are rendered with the same size.

And yes, it's not related to the changes introduced in this pull request, but it helped us visualize them and see the issue.

<div>
   <EmptyButton>Empty Button</EmptyButton>
   <EmptyButton size="small">Empty Button</EmptyButton>
   <EmptyButton size="medium">Empty Button</EmptyButton>
   <EmptyButton size="large">Empty Button</EmptyButton>
   <EmptyButton disabled>Empty Button</EmptyButton>
</div>

Preview

Image

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I saw that too

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just the perfect example how this can be helpful for narrowing down such issues :)


type Story = StoryObj<typeof meta>

export const CLI: Story = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure whether Storybook rendering is broken (because in the real-world scenarios, it looks fine), but it feels bad when rendered in the story.

Image

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is not SB, it is how the component behaves in isolation.
Obviously, all examples here are a bit contrived, to demonstrate different usages, not all levels of granularity are suitable for isolated development.
Also, weird layout in isolation, may point to some missing dependencies, either in the component, or in how SB is setup.

height: 200,
name: 'test',
data: [
{ value: 1, name: 'A', color: [0, 0, 0] },
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: Let's put a bit more variant styles, because now it looks... black.

Image

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, open a ticket and go for it! This PR introduces SB and how to use it, it does not provide useful stories for all components


type Story = StoryObj<typeof meta>

export const Default: Story = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: I don't think what we see for this component is useful, in terms of the purpose of having a Storybook.

Image

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh yes it is! It shows that something is definitely broken with compoent implementation.
In this case, it depends on EUI styles, which are not imported in SB, and when Krum starts to re-work it, here it will show in isolation

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this looks very broken, if we do not fix it, maybe it is better to remove it?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is up for a change, I think @KrumTy will have the task to do it, and SB can help isolate the component and work on it without depending on the entire app

background-color: ${({ theme }: { theme: Theme }) =>
theme.semantic.color.background.neutral100};
border: 2px solid
${({ theme }: { theme: Theme }) => theme.semantic.color.border.neutral500};
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, we use Redis UI to style Stroybook as well 😀

@@ -0,0 +1,20 @@
import { create } from '@storybook/theming/create';

export default create({
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where do we use this? I don't see the Redis title/logo/colors anywhere. I have changed all the values below, and still I see the default Storybook UI, so I think this file is not loaded properly.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is within the canvas if anywhere. I copied it from redis-ui storybook setup

render: () => <Theme />,
}

export const ColorsStory: StoryObj = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NIce! This is one of the most useful pages, where we can see visuals of the available spacing, colors, and icons. Thanks!.

@pd-redis pd-redis requested a review from valkirilov October 17, 2025 06:50
Comment on lines +1 to +13
import type { Meta, StoryObj } from '@storybook/react-vite'

import Cli from './Cli'

const cliMeta = {
component: Cli,
} satisfies Meta<typeof Cli>

export default cliMeta

type Story = StoryObj<typeof cliMeta>

export const Default: Story = {}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe it is worth it to pass some data to this component? or add the ability to do that.
image

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It might be valid comment, or maybe this story is not needed and component should be developed in a bit higher level, or maybe it will benefit from refactoring

@dantovska
Copy link
Collaborator

I think the storybook implementation would be useful for our product! Left a few comments for the few of the components. A good idea IMO would be to do this in smaller portions - at least at first. For example, one PR to set the basis and fix the issues and have only one example component. And then separate PRs for others. It would be easier to review. We should definitely create a plan about it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants