Skip to content

RI-7554 Rework the actions button on the browser page #4994

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.

Sign up for GitHub

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

Merged
merged 4 commits into from
Sep 29, 2025
Merged

RI-7554 Rework the actions button on the browser page #4994

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
35770b2
fix(ui): rework the actions button on the browser page
valkirilov Sep 25, 2025
3f47e1c
feat(ui): extend text buttons to support different sizes
valkirilov Sep 26, 2025
a60282b
Revert "feat(ui): extend text buttons to support different sizes"
valkirilov Sep 26, 2025
83e52f6
fix(ui): update the visuals of the actions button on the browser page
valkirilov Sep 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion redisinsight/ui/src/components/navigation-menu/app-navigation/AppNavigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ const AppNavigation = ({ actions, onChange }: AppNavigationProps) => {
borderLess
grow={false}
justify="center"
style={{ paddingTop: '20px' }}
style={{ paddingTop: '16px' }}
Copy link
Collaborator

Choose a reason for hiding this comment

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

this is bugging me, but I guess it should be fixed in dedicated ticket

Copy link
Member Author

Choose a reason for hiding this comment

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

This is a fix to make the action buttons and the navigation in line.
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 mean the inline style is bugging me, not the value :)

>
<Tabs.Compose
value={activeTab?.pageName}
Expand Down
7 changes: 7 additions & 0 deletions redisinsight/ui/src/pages/browser/components/actions/Actions.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,13 @@ const mockedProps: Props = {
describe('Actions', () => {
it('should render', () => {
expect(render(<Actions {...mockedProps} />)).toBeTruthy()

// Verify the buttons are present
const bulkActionsButton = screen.getByTestId('btn-bulk-actions')
const addKeyButton = screen.getByTestId('btn-add-key')

expect(bulkActionsButton).toBeInTheDocument()
expect(addKeyButton).toBeInTheDocument()
})

it('should show feature dependent items when feature flag is off', async () => {
Expand Down
11 changes: 6 additions & 5 deletions redisinsight/ui/src/pages/browser/components/actions/Actions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ import {
TelemetryEvent,
} from 'uiSrc/telemetry'
import {
EmptyButton,
SecondaryButton,
} from 'uiSrc/components/base/forms/buttons'
import styles from 'uiSrc/pages/browser/components/browser-search-panel/styles.module.scss'
import { setBulkActionType } from 'uiSrc/slices/browser/bulkActions'
import { BulkActionsType, FeatureFlags } from 'uiSrc/constants'
import { SubscriptionsIcon } from 'uiSrc/components/base/icons'
Expand Down Expand Up @@ -46,28 +46,29 @@ const Actions = ({ handleAddKeyPanel, handleBulkActionsPanel }: Props) => {
onClick={openAddKeyPanel}
data-testid="btn-add-key"
>
+ <span className={styles.addKeyText}>Key</span>
Add key
</SecondaryButton>
)
const openBulkActions = () => {
dispatch(setBulkActionType(BulkActionsType.Delete))
handleBulkActionsPanel(true)
}
const BulkActionsBtn = (
<SecondaryButton
<EmptyButton
color="secondary"
icon={SubscriptionsIcon}
onClick={openBulkActions}
data-testid="btn-bulk-actions"
aria-label="bulk actions"
>
Bulk Actions
</SecondaryButton>
Bulk actions
</EmptyButton>
)
return (
<Row
grow={false}
gap="m"
align="center"
style={{
flexShrink: 0,
marginLeft: 12,
Expand Down
Loading