RI-7221: refactor(ui): migrate home page SCSS to styled-components#5405
RI-7221: refactor(ui): migrate home page SCSS to styled-components#5405
Conversation
- Replace SCSS styles with styled-components in the AutoRefresh component. - Extract prop types into a separate `.types.ts` file for better organization. - Simplify code by removing redundant utilities and inlining necessary helpers. - Update storybook example to use inline styles instead of external helpers. - Refactor and improve the readability of the AutoRefresh component code.
pd-redis
requested review from
ArtemHoruzhenko,
DimoHG,
KrumTy,
dantovska,
pawelangelow and
valkirilov
as code owners
Code Coverage - Frontend unit tests
Test suite run success5541 tests passing in 706 suites. Report generated by 🧪jest coverage report action from f2cb4f6 |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
redisinsight/ui/src/pages/home/components/database-list-header/DatabaseListHeader.styles.ts
Show resolved
Hide resolved
redisinsight/ui/src/pages/home/components/empty-message/EmptyMessage.tsx
Show resolved
Hide resolved
…eader - Replace SCSS with styled-components for `SpacerDl` to enhance responsive design. - Remove unused SCSS import from Storybook preview to improve maintainability.
| @media only screen and (max-width: 800px) { | ||
| display: none; | ||
| } | ||
| ` |
There was a problem hiding this comment.
Promo section no longer hides when insights panel opens
Low Severity
The Promo styled component lost the insights-open mixin behavior from the original SCSS. The old code hid the promo element when the .insightsOpen class was present AND screen width was ≤ 1350px. The new code only hides at ≤ 800px regardless of insights panel state. A styled-components version of insightsOpen exists at uiSrc/styles/mixins but wasn't used, causing the promo to potentially overlap or conflict with the insights panel on medium-sized screens.
- Migrate WBResults, WBView, and Query components from SCSS to styled-components for improved styling consistency and maintainability. - Update imports and structure to utilize styled-components effectively, enhancing readability and reducing reliance on classnames.
- Migrate Query and WBNoResultsMessage components from SCSS to styled-components for consistent styling and improved maintainability. - Replace SCSS imports, update structure, and enhance readability by utilizing styled-components effectively.
- Migrate KeysHeader component from SCSS to styled-components for consistent styling and improved code maintainability. - Extract related styles into a new `KeysHeader.styles.ts` file. - Replace SCSS imports and adjust structure to utilize styled-components effectively, enhancing readability.
…components References: #RI-7220
| data-testid={getDataTestid('auto-refresh-container')} | ||
| // TODO: fix properly | ||
| style={{ lineHeight: 1 }} | ||
| gap="s" |
There was a problem hiding this comment.
Gap spacing reduced from medium to small
Low Severity
The gap property on the AutoRefresh container changed from "m" (medium) to "s" (small). The PR description explicitly states "Visual appearance unchanged - styles are functionally equivalent," but this change reduces the spacing between elements in the auto-refresh control, causing a visual regression across all places where AutoRefresh is used.
redisinsight/ui/src/pages/browser/components/filter-key-type/FilterKeyType.styles.ts
Show resolved
Hide resolved
...ight/ui/src/pages/browser/components/add-key/AddKeyCommonFields/AddKeyCommonFields.styles.ts
Show resolved
Hide resolved
redisinsight/ui/src/pages/browser/modules/key-details-header/KeyDetailsHeader.styles.ts
Outdated
Show resolved
Hide resolved
...s/browser/modules/key-details/components/key-details-subheader/KeyDetailsSubheader.styles.ts
Show resolved
Hide resolved
...r/modules/key-details-header/components/key-details-header-ttl/KeyDetailsHeaderTTL.styles.ts
Show resolved
Hide resolved
redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.styles.ts
Show resolved
Hide resolved
pd-redis
changed the title
| ' ', | ||
| )} | ||
| data-testid={getDataTestid('refresh-btn')} | ||
| data-testid={getTestId('refresh-btn')} |
There was a problem hiding this comment.
Refresh button loses visual feedback when auto-refresh enabled
Medium Severity
The AutoRefreshButton styled component was removed during migration but its conditional styling was not transferred to the new implementation. Previously, when enableAutoRefresh was true, the refresh button icon changed color to primary400 to provide visual feedback that auto-refresh was active. Now a plain IconButton is used without this styling, so users lose the visual indicator showing that auto-refresh is enabled. The text element (S.AutoRefreshInterval) still changes color, but the button itself does not.
redisinsight/ui/src/pages/browser/modules/key-details-header/KeyDetailsHeader.tsx
Show resolved
Hide resolved
|
Started the app locally and noticed the following UI changes:
|
…UI to streamline the codebase and improve maintainability. This includes styles for command helper, query card, instance header, and several other components.
…errors References: #RI-7221
Deleted unused Accordion, NoIndexesInitialMessage.styles, and redundant styled-components across various parts of the UI. Replaced deprecated components and cleaned up imports to enhance maintainability.
…ix/RI-7220-remove-scss-files
|
|
||
| export const Calculation = styled.span` | ||
| font-style: italic; | ||
| ` |
There was a problem hiding this comment.
Calculation styled component has completely incorrect styles
Medium Severity
The Calculation styled component has font-style: italic but the original CSS had font-size: 13px, font-weight: 500, and margin-left: 8px. The italic style was never in the original and the actual required styles are completely missing. This affects the "Calculating..." text displayed while CPU usage is being computed.
| export const CalculationWrapper = styled.div` | ||
| display: flex; | ||
| align-items: center; | ||
| ` |
There was a problem hiding this comment.
CPU wrapper responsive hiding and min-width styles lost
Medium Severity
CpuWrapper and CalculationWrapper styled components are missing critical styles. The original .cpuWrapper had min-width: 96px and a media query to hide the CPU section on screens narrower than 992px (display: none). The original .calculationWrapper had min-width: 96px. Both styled components are either empty or missing the min-width constraint, breaking the responsive layout behavior.
Updated tests for Pagination, MonitorOutputList, and VirtualTable components to utilize screen queries for better readability and reliability. This includes verifying active menu item content and ensuring rendered items are present in the document.
| <OnboardingTour | ||
| options={ONBOARDING_FEATURES.BROWSER_COMMAND_HELPER} | ||
| anchorPosition="upLeft" | ||
| panelClassName={styles.helperOnboardPanel} |
There was a problem hiding this comment.
CommandHelper OnboardingTour panelClassName styling removed
Low Severity
The panelClassName prop was removed from the OnboardingTour component without any replacement. The original SCSS applied margin-top: -4px to the tour popup panel for proper positioning. This styling is now completely lost, which may cause the Command Helper onboarding tour popup to be slightly mispositioned.
redisinsight/ui/src/components/database-overview/components/OverviewMetrics/OverviewMetrics.tsx
Show resolved
Hide resolved
| disabled={isLoading} | ||
| data-testid="cancel-btn" | ||
| /> | ||
| </ActionsWrapper> |
There was a problem hiding this comment.
InlineItemEditor popover panel lost visual styling
Medium Severity
The panelClassName={cx(styles.popoverPanel)} was replaced with only maxWidth={S.POPOVER_PANEL_WIDTH}. The original panel styling included padding (24px 30px), a primary-colored border, a specific background color, and custom arrow colors. Only the width is preserved; the padding, border, background, and arrow styling are all lost, which will make the confirmation popover look visually different.
There was a problem hiding this comment.
The ConfirmationPopover now uses RiPopover's built-in styling. The visual appearance is intentionally simplified as part of the migration to Redis UI components.
Replaced deprecated `.toBeCalled()` with `.toHaveBeenCalled()` for more explicit assertions in VirtualTable tests. Removed unnecessary destructuring in the render function.
| // OverviewMetrics styles | ||
| export const CpuWrapper = styled.div`` | ||
|
|
||
| export const OpsPerSecItem = styled.div`` |
There was a problem hiding this comment.
CPU metric loses responsive hiding on small screens
Medium Severity
The styled components CpuWrapper and OpsPerSecItem are defined as empty styled components but are never used. The original SCSS had a @media only screen and (max-width: 992px) rule that hid the CPU metric on smaller screens with display: none. The className property that would have applied these styles is no longer returned from getCpuUsage in OverviewMetrics.tsx. The responsive behavior is completely lost.
|
|
||
| export const Calculation = styled.span` | ||
| font-style: italic; | ||
| ` |
There was a problem hiding this comment.
Calculation text styled with wrong properties
Medium Severity
The Calculation styled component has font-style: italic instead of the original SCSS properties (font-size: 13px; font-weight: 500; margin-left: 8px). The font-style: italic was never in the original styles. Additionally, CalculationWrapper is missing min-width: 96px from the original SCSS. These changes affect the appearance of the "Calculating..." loading text displayed during CPU calculation in the database overview.
Additional Locations (1)
…d-components Replaced SCSS module styles with styled-components in the PageHeader component. Updated type definitions and improved structure by cleaning up imports and removing unused code.
| <ColorText | ||
| size="s" | ||
| component="span" | ||
| data-testid={getDataTestid('refresh-message-label')} |
There was a problem hiding this comment.
AutoRefresh config button styling completely lost
Medium Severity
The AutoRefreshConfigButton styled component was removed without transferring its styling. This component had custom SVG sizing (width: 10px; height: 10px) and background color changes based on isPopoverOpen state. The replacement plain IconButton loses both the constrained icon size and the visual feedback when the popover is open.
…ed-components Replaced SCSS module styles with styled-components for QueryCard and SuspenseLoader components. Updated type definitions, cleaned up imports, and removed unused code for improved structure and maintainability.
Refactored QueryCard and related components to use reusable styled-components (e.g., `QueryResultsContainer`, `PluginResultsContainer`). Simplified class names and removed redundant SCSS styles for better maintainability.
| ` | ||
|
|
||
| // OverviewMetrics styles | ||
| export const CpuWrapper = styled.div`` |
There was a problem hiding this comment.
CPU metric responsive hiding lost on small screens
Medium Severity
The CpuWrapper styled component is empty but the original SCSS had responsive styles including min-width: 96px and a media query @media only screen and (max-width: 992px) { display: none !important; } that hid the CPU metric on smaller screens. Additionally, the className property referencing this wrapper was removed from the CPU metric object in OverviewMetrics.tsx. This causes the CPU metric to remain visible on small screens where it previously was hidden, likely causing layout issues.
| @@ -0,0 +1,57 @@ | |||
| import React, { AnchorHTMLAttributes } from 'react' | |||
There was a problem hiding this comment.
Unused React import in styles file
Low Severity
The React import is only used for the type React.ReactNode in the WrapperProps interface. This could be replaced with import type { ReactNode } from 'react' to avoid importing the entire React namespace when only a type is needed.
| ${({ theme }: { theme: Theme }) => theme.semantic.color.border.neutral300}; | ||
| border-right: 1px solid | ||
| ${({ theme }: { theme: Theme }) => theme.semantic.color.border.neutral300}; | ||
| ` |
There was a problem hiding this comment.
Duplicate styled components with inconsistent implementations
Low Severity
Two separate styles files exist for CommandHelper with duplicate styled component names but different implementations. For example, CommandHelperWrapper uses border.neutral400 in one file and border.neutral300 in another. Similarly, Container, Arg, Badge, SearchWrapper, DefaultScreen, and Summary have conflicting implementations. This creates confusion about which styles are applied and could lead to inconsistent styling across the component tree.
Additional Locations (1)
Replaced SCSS module styles with reusable styled-components for browser and home page components. Simplified class names, updated imports, and improved maintainability.
| // OverviewMetrics styles | ||
| export const CpuWrapper = styled.div`` | ||
|
|
||
| export const OpsPerSecItem = styled.div`` |
There was a problem hiding this comment.
Unused styled components defined but never connected
Low Severity
The styled components CpuWrapper, OpsPerSecItem, and Spinner are defined but never imported or used anywhere in the codebase. They appear to be remnants from the SCSS migration where the className references were removed but the styled components were created as placeholders.
Clean up OnboardingTour, VirtualTable, and stream details components
| ` | ||
|
|
||
| // OverviewMetrics styles | ||
| export const CpuWrapper = styled.div`` |
There was a problem hiding this comment.
CPU metric responsive styling lost during migration
Medium Severity
The CpuWrapper styled component is defined as empty but the original SCSS had a media query that hid the CPU metric on screens narrower than 992px (display: none at max-width: 992px). Additionally, the className property that would apply this styling was removed from the CPU metric item in OverviewMetrics.tsx, meaning the component isn't used at all. This causes the CPU metric to display on mobile/tablet views where it should be hidden.
| align-items: center; | ||
| ` | ||
|
|
||
| export const Spinner = styled.span`` |
There was a problem hiding this comment.
Unused styled components defined but never applied
Low Severity
CpuWrapper, OpsPerSecItem, and Spinner styled components are defined but never imported or used anywhere in the codebase. These appear to be remnants of an incomplete migration where the old SCSS class names were converted to styled components but never wired up to replace the original className usage.
| export const InfoBadge = styled.span` | ||
| background-color: ${({ theme }: { theme: Theme }) => | ||
| theme.semantic.color.background.neutral300}; | ||
| ` |
There was a problem hiding this comment.
Duplicate styled component files with conflicting definitions
Low Severity
Two CommandHelper.styles.ts files exist at different directory levels, both exporting styled components with the same names (Container, SearchWrapper, Arg, Badge, CommandHelperWrapper) but with different implementations. While the relative imports prevent runtime conflicts, this creates maintainability confusion. For example, Arg in the parent file uses styled(Row) with an $odd prop, while the nested file uses styled.div with :nth-child(2n) selector - functionally different approaches to alternating row styling.
Additional Locations (1)
Adds proper TypeScript types to styled components across multiple files (RangeFilter, VirtualGrid, Divider, Stream components) to accept standard HTML props like children, ref, and event handlers. Also migrates hardcoded values to theme tokens and refactors inline styles to styled components.
Updated styled component type definitions to use ComponentPropsWithRef for proper prop support. Fixed VirtualGrid to use theme hook instead of theme prop and corrected TypeScript signatures for callback functions and utilities.
| contentItems={contentItems} | ||
| inCircle={inCircle} | ||
| /> | ||
| </AnchorModuleTooltip> |
There was a problem hiding this comment.
DatabaseModulesList anchorClassName prop no longer passed
Medium Severity
The anchorClassName prop is no longer passed to DatabaseModulesList when inCircle is true. The component internally uses this prop to style each individual RiTooltip anchor for every module. The new AnchorModuleTooltip wrapper applies margin to the entire container instead of to each tooltip anchor, resulting in different spacing behavior for module tooltips.
2 participants
What
Large-scale migration from SCSS modules to styled-components across browser page, key details, and home page components (100 files changed, 32 SCSS files deleted, 31 styled-components files created).
Browser components migrated:
AddKey,BrowserLeftPanel,BrowserSearchPanel,BulkActionsFilterKeyType,KeyList,KeyTree,KeysHeaderKeyRowName,KeyRowSize,KeyRowTTL,KeyRowTypePopoverDelete,SearchKeyList,VirtualTree,NodeKey details modules migrated:
KeyDetails,KeyDetailsHeader,KeyDetailsSubheaderHashDetails,ListDetails,SetDetailsTable,ZSetDetailsTableModulesTypeDetails,NoKeySelected,UnsupportedTypeDetailsEditableInput,EditableTextAreaHome page migrated:
HomePage,DatabaseListHeader,EmptyMessage,TagsCellHeaderDbIndex,DbInfo,TlsDetails)Shared components:
AutoRefresh- refactored with extracted types/stylesIconButton- extracted types to separate fileTech decisions:
!importantdeclarations and dead CSS classesTesting
Screenshots
Note
Medium Risk
Mostly presentation-layer churn, but touches heavily-used components (headers, overview, CLI, lists) and changes styling and some component wiring, which risks subtle layout/regression issues despite minimal business-logic change.
Overview
Large-scale styling refactor that replaces many SCSS module usages with colocated
styled-componentsstyle files across core UI surfaces (e.g.AutoRefresh, CLI/Command Helper, Database Overview, Instance Header, list/action popovers), deleting corresponding*.module.scssfiles and wiring components to use theme tokens instead of!important/global CSS.AutoRefreshis reorganized with extractedAutoRefresh.types/AutoRefresh.styles, shared helpers moved intoauto-refresh/utils.ts, and callbacks memoized (useCallback) while preserving existing behavior (localStorage persistence, tooltips/popover editing). Base primitives are also tidied by extracting flex constants/types (flex.constants.ts,flex.types.ts) and button/text prop types (IconButton.types,EmptyButton.types,text.types).Written by Cursor Bugbot for commit 3b51550. This will update automatically on new commits. Configure here.