-
Notifications
You must be signed in to change notification settings - Fork 410
RI-7640: Storybook and Playground #5062
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
# 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
|
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. |
There was a problem hiding this 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
| dependencies: | ||
| "@babel/parser" "^7.28.0" | ||
| "@babel/types" "^7.28.0" | ||
| "@babel/parser" "^7.28.3" |
There was a problem hiding this comment.
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_fpIgnore and mark this specific single instance of finding as “False Positive”#jit_ignore_acceptIgnore and mark this specific single instance of finding as “Accept Risk”#jit_ignore_type_in_fileIgnore any finding of type "Github" in yarn.lock; future occurrences will also be ignored.#jit_undo_ignoreUndo 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" |
There was a problem hiding this comment.
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_fpIgnore and mark this specific single instance of finding as “False Positive”#jit_ignore_acceptIgnore and mark this specific single instance of finding as “Accept Risk”#jit_ignore_type_in_fileIgnore any finding of type "Github" in yarn.lock; future occurrences will also be ignored.#jit_undo_ignoreUndo 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" |
There was a problem hiding this comment.
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_fpIgnore and mark this specific single instance of finding as “False Positive”#jit_ignore_acceptIgnore and mark this specific single instance of finding as “Accept Risk”#jit_ignore_type_in_fileIgnore any finding of type "Github" in yarn.lock; future occurrences will also be ignored.#jit_undo_ignoreUndo 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" |
There was a problem hiding this comment.
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_fpIgnore and mark this specific single instance of finding as “False Positive”#jit_ignore_acceptIgnore and mark this specific single instance of finding as “Accept Risk”#jit_ignore_type_in_fileIgnore any finding of type "Github" in yarn.lock; future occurrences will also be ignored.#jit_undo_ignoreUndo ignore command
There was a problem hiding this 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" |
There was a problem hiding this comment.
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_fpIgnore and mark this specific single instance of finding as “False Positive”#jit_ignore_acceptIgnore and mark this specific single instance of finding as “Accept Risk”#jit_ignore_type_in_fileIgnore any finding of type "Github" in yarn.lock; future occurrences will also be ignored.#jit_undo_ignoreUndo 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" |
There was a problem hiding this comment.
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_fpIgnore and mark this specific single instance of finding as “False Positive”#jit_ignore_acceptIgnore and mark this specific single instance of finding as “Accept Risk”#jit_ignore_type_in_fileIgnore any finding of type "Github" in yarn.lock; future occurrences will also be ignored.#jit_undo_ignoreUndo 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" |
There was a problem hiding this comment.
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_fpIgnore and mark this specific single instance of finding as “False Positive”#jit_ignore_acceptIgnore and mark this specific single instance of finding as “Accept Risk”#jit_ignore_type_in_fileIgnore any finding of type "Github" in yarn.lock; future occurrences will also be ignored.#jit_undo_ignoreUndo 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" |
There was a problem hiding this comment.
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_fpIgnore and mark this specific single instance of finding as “False Positive”#jit_ignore_acceptIgnore and mark this specific single instance of finding as “Accept Risk”#jit_ignore_type_in_fileIgnore any finding of type "Github" in yarn.lock; future occurrences will also be ignored.#jit_undo_ignoreUndo ignore command
There was a problem hiding this 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 = { |
There was a problem hiding this comment.
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
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I saw that too
There was a problem hiding this comment.
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 = { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
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] }, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
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 = { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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}; |
There was a problem hiding this comment.
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({ | |||
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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 = { |
There was a problem hiding this comment.
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!.
| 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 = {} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
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
|
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. |




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
.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].storybook/preview-head.htmlto set up global variables and CSS for Storybook docs and previews.Component Stories and Utilities
AnalyticsTabs,AutoRefresh,Button,DestructiveButton, andActionIconButtonto demonstrate usage and enable visual testing. [1] [2] [3] [4] [5].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
package.jsonto add Storybook-related scripts (sb,build-sb), dependencies (@storybook/*,eslint-plugin-storybook, etc.), and upgradedmswto v2. [1] [2] [3] [4] [5].eslintrc.jsto extend withplugin:storybook/recommendedand addedeslint-plugin-storybookfor linting Storybook files. [1] [2]babel.config.cjsto include the@babel/plugin-proposal-decoratorsplugin for Storybook support.Component and Style Refactoring
FormFieldfrom@redis-ui/componentsto 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.