RI-7767: custom tutorials form alignment #5300

dantovska · 2025-12-03T15:08:43Z

What

Fix custom tutorials UX issues and button alignment:

Remove WelcomeMyTutorials component and show form directly when empty
Hide + button when no custom tutorials exist (form shows directly)
Add border and padding to form using styled component with theme values
Fix button alignment (+, delete icons) with accordion chevron
Move onboarding tour to "Add new tutorial" title
Auto-open form when onboarding tour is triggered (if form is hidden)
Restore Cancel button with proper spacing using Row component
Remove unnecessary create-btn and delete-btn styles
Update form styling (remove padding/background, add border with radius)
Darken form border to match accordion border (neutral600)
Extract group header button styles to styled component with theme-based colors
Apply import pattern rule (import * as S) for styled components
Use theme spacing (space300) for button dimensions instead of hardcoded values

Testing

Open tutorials panel → My Tutorials section (empty)
Verify form shows directly (no welcome screen, no + button)
Upload a tutorial, verify + button appears and aligns with chevron
Verify delete button aligns with chevron
Click + button when tutorials exist, verify form opens with Cancel button
Delete all tutorials, verify form appears again (no + button)
Complete onboarding flow, verify it targets "Add new tutorial" title
When onboarding is triggered with tutorials loaded, verify form auto-opens
Test form submission and cancel functionality
Verify button hover states work correctly
Verify form border matches accordion border color
Verify button dimensions use theme spacing values

Onboarding tooltip

Before	After

Before:

Screen.Recording.2025-12-04.at.16.25.06.mov

After:

Screen.Recording.2025-12-04.at.16.23.29.mov

Closes #RI-7767

Note

Streamlines the custom tutorials flow by showing the form when empty, aligning action buttons, migrating styles to styled-components, removing the welcome component, and updating docs/rules.

Frontend – Enablement Area (Custom Tutorials):
- Show UploadTutorialForm directly when no tutorials; hide + action accordingly and gate it on hasChildren.
- Align header action buttons with accordion chevron using S.GroupHeaderButton; use theme spacing/colors.
- Move onboarding tour to the "Add new tutorial" title; auto-open form during onboarding when hidden.
- Restore Cancel button with proper spacing via Row; prevent event propagation on delete popover trigger.
- Remove WelcomeMyTutorials component and related styles/tests.
Styling/Refactor:
- Add GroupHeaderButton and UploadTutorialForm.Wrapper styled components; apply theme-based border, radius, padding.
- Remove legacy SCSS button styles and SCSS wrapper padding/background.
- Apply local import * as S pattern and re-export styles where needed.
Tests:
- Update EnablementArea.spec.tsx to reflect direct form rendering and telemetry; remove WelcomeMyTutorials tests.
Docs/Rules:
- Clarify allowed branch types and FE import pattern (import * as S reserved for local styles).

^{Written by Cursor Bugbot for commit 526618b. This will update automatically on new commits. Configure here.}

...nents/side-panels/panels/enablement-area/EnablementArea/components/Navigation/Navigation.tsx

pd-redis · 2025-12-03T15:34:24Z

.../src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.tsx

            preventPropagation
          >
            <RiTooltip content="Upload Tutorial">
              <div


This could become styled-component

...s/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.tsx

- Remove WelcomeMyTutorials component and show form directly when empty - Add border and padding to form using styled component with theme values - Fix button alignment (+, delete icons) with accordion chevron - Move onboarding tour to + icon - Restore Cancel button with proper spacing using Row component - Remove unnecessary create-btn and delete-btn styles - Update form styling (remove padding/background, add border with radius) References: #RI-7767

- Add branch name to PR plan - Update references from feature to bug fix - Mark ticket as Bug Fix in header References: #RI-7767

Remove implementation plan document as it's not needed in the repository. References: #RI-7767

Update branch naming rules to specify that bug fixes affecting only the redisinsight/ui/ folder should use fe/bugfix/ prefix instead of bugfix/ prefix. References: #RI-7767

- Create Group.styles.ts with GroupHeaderButton styled component - Replace className-based styles with styled component in Group and DeleteTutorialButton - Use theme-based colors instead of CSS variables - Apply import pattern rule (import * as S) for styled components

github-actions · 2025-12-04T14:33:58Z

Code Coverage - Frontend unit tests

St.^❔	Category	Percentage	Covered / Total
🟢	Statements	82.82%	21057/25425
🟡	Branches	67.96%	8849/13021
🟡	Functions	77.98%	5774/7404
🟢	Lines	83.22%	20623/24782

Test suite run success

5465 tests passing in 702 suites.

Report generated by 🧪jest coverage report action from 526618b

… component - Update UploadTutorialForm to use import * as S pattern - Revert Theme import to use uiSrc/components/base/theme/types

...nents/side-panels/panels/enablement-area/EnablementArea/components/Navigation/Navigation.tsx

...omponents/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.styles.ts

...nels/enablement-area/EnablementArea/components/DeleteTutorialButton/DeleteTutorialButton.tsx

- Create DeleteTutorialButton.styles.ts that re-exports GroupHeaderButton - Update DeleteTutorialButton to import from local styles file - Reserve import * as S pattern for local styles only

- Clarify that import * as S should only be used for local ComponentName.styles.ts files - Add guidance for re-exporting external styled components through local styles file

.../src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.tsx

…title - Remove OnboardingTour from Group component + button - Add OnboardingTour wrapper around Add new tutorial title in UploadTutorialForm - Pass isPageOpened prop to UploadTutorialForm for proper onboarding visibility

- Replace hardcoded 24px width/height with theme.core.space.space300

- Open upload form automatically when custom tutorials onboarding step is active - Ensures form is visible when onboarding targets 'Add new tutorial' title - Only opens form when tutorials exist and form is currently closed

cursor · 2025-12-04T16:26:28Z

...nents/side-panels/panels/enablement-area/EnablementArea/components/Navigation/Navigation.tsx

+    ) {
+      setIsCreateOpen(true)
+    }
+  }, [isCustomTutorialsOnboarding, customTutorials?.length, isCreateOpen])


Bug: Cancel button doesn't work during onboarding due to useEffect

The useEffect has isCreateOpen in its dependency array, which causes the Cancel button to be non-functional during onboarding. When a user clicks Cancel (setting isCreateOpen to false), the effect immediately re-runs because isCreateOpen changed. Since isCustomTutorialsOnboarding && customTutorials?.length > 0 && !isCreateOpen is now true again, it sets isCreateOpen back to true, immediately reopening the form. The isCreateOpen dependency creates an infinite loop that prevents closing the form during onboarding.

- Prevent event propagation when the delete button is clicked, because it causes the section element behind it to expand/collapse

valkirilov · 2025-12-05T07:17:51Z

...nels/enablement-area/EnablementArea/components/DeleteTutorialButton/DeleteTutorialButton.tsx


-  const handleClickDelete = () => {
+  const handleClickDelete = (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,


Minor enhancement to prevent expland/collapse of the section behind when clicking the delete button.

Screen.Recording.2025-12-05.at.9.10.27.mov

valkirilov · 2025-12-05T07:19:49Z

...omponents/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.styles.ts

+export const GroupHeaderButton = styled.div<
+  React.HTMLAttributes<HTMLDivElement>
+>`
+  display: flex;


nit: We can use our layout components Row/Col/FlexGroup instead of a regular div and pass align/justify instead of declaring them here.

dantovska self-assigned this Dec 3, 2025

dantovska added the AI-Made label Dec 3, 2025

dantovska requested review from ArtemHoruzhenko, DimoHG, KrumTy, pawelangelow, pd-redis, tptodorov and valkirilov as code owners December 3, 2025 15:08

cursor bot reviewed Dec 3, 2025

View reviewed changes

...nents/side-panels/panels/enablement-area/EnablementArea/components/Navigation/Navigation.tsx Show resolved Hide resolved

pd-redis reviewed Dec 3, 2025

View reviewed changes

valkirilov reviewed Dec 4, 2025

View reviewed changes

...s/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.tsx Outdated Show resolved Hide resolved

dantovska added 8 commits December 4, 2025 16:11

docs: update PR plan to reflect bug fix nature

c00bbf6

- Add branch name to PR plan - Update references from feature to bug fix - Mark ticket as Bug Fix in header References: #RI-7767

chore: remove PR plan document

bc0c0c6

Remove implementation plan document as it's not needed in the repository. References: #RI-7767

docs: clarify fe/bugfix prefix for UI-only bug fixes

51f9c4f

Update branch naming rules to specify that bug fixes affecting only the redisinsight/ui/ folder should use fe/bugfix/ prefix instead of bugfix/ prefix. References: #RI-7767

fix(ui): darken form border to match accordion border

3871133

test(ui): remove WelcomeMyTutorials tests and update empty state test

4e20267

fix(ui): hide + button when no custom tutorials exist

28801ea

dantovska force-pushed the fe/bugfix/RI-7767/custom-tutorials-buttons-alignment branch from cf991f3 to 63f1d9b Compare December 4, 2025 14:16

refactor(ui): apply import pattern rule for UploadTutorialForm styled…

22902f3

… component - Update UploadTutorialForm to use import * as S pattern - Revert Theme import to use uiSrc/components/base/theme/types

cursor bot reviewed Dec 4, 2025

View reviewed changes

...nents/side-panels/panels/enablement-area/EnablementArea/components/Navigation/Navigation.tsx Show resolved Hide resolved

KrumTy reviewed Dec 4, 2025

View reviewed changes

...omponents/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.styles.ts Outdated Show resolved Hide resolved

...nels/enablement-area/EnablementArea/components/DeleteTutorialButton/DeleteTutorialButton.tsx Outdated Show resolved Hide resolved

dantovska added 2 commits December 4, 2025 17:30

refactor(ui): create local styles file for DeleteTutorialButton

3a21501

- Create DeleteTutorialButton.styles.ts that re-exports GroupHeaderButton - Update DeleteTutorialButton to import from local styles file - Reserve import * as S pattern for local styles only

docs: add rule for import * as S pattern reserved for local styles only

8855fff

- Clarify that import * as S should only be used for local ComponentName.styles.ts files - Add guidance for re-exporting external styled components through local styles file

KrumTy previously approved these changes Dec 4, 2025

View reviewed changes

cursor bot reviewed Dec 4, 2025

View reviewed changes

.../src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.tsx Show resolved Hide resolved

dantovska dismissed KrumTy’s stale review via 388984b December 4, 2025 16:11

dantovska added 2 commits December 4, 2025 18:15

refactor(ui): use theme spacing for GroupHeaderButton dimensions

cd9219b

- Replace hardcoded 24px width/height with theme.core.space.space300

fix(ui): auto-open form when onboarding tour is triggered

c0c7f2c

- Open upload form automatically when custom tutorials onboarding step is active - Ensures form is visible when onboarding targets 'Add new tutorial' title - Only opens form when tutorials exist and form is currently closed

cursor bot reviewed Dec 4, 2025

View reviewed changes

fix(ui): prevent event propagation in DeleteTutorialButton click handler

526618b

- Prevent event propagation when the delete button is clicked, because it causes the section element behind it to expand/collapse

valkirilov reviewed Dec 5, 2025

View reviewed changes

valkirilov approved these changes Dec 5, 2025

View reviewed changes

KrumTy approved these changes Dec 5, 2025

View reviewed changes

dantovska merged commit e9ea682 into main Dec 5, 2025
19 checks passed

dantovska deleted the fe/bugfix/RI-7767/custom-tutorials-buttons-alignment branch December 5, 2025 09:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

RI-7767: custom tutorials form alignment #5300

RI-7767: custom tutorials form alignment #5300

Uh oh!

dantovska commented Dec 3, 2025 •

edited by cursor bot

Loading

Uh oh!

Uh oh!

pd-redis Dec 3, 2025

Uh oh!

Uh oh!

github-actions bot commented Dec 4, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor bot Dec 4, 2025

Uh oh!

valkirilov Dec 5, 2025

Uh oh!

valkirilov Dec 5, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

RI-7767: custom tutorials form alignment #5300

RI-7767: custom tutorials form alignment #5300

Uh oh!

Conversation

dantovska commented Dec 3, 2025 • edited by cursor bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What

Testing

Onboarding tooltip

Uh oh!

Uh oh!

pd-redis Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented Dec 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Coverage - Frontend unit tests

Test suite run success

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor bot Dec 4, 2025

Choose a reason for hiding this comment

Bug: Cancel button doesn't work during onboarding due to useEffect

Uh oh!

valkirilov Dec 5, 2025

Choose a reason for hiding this comment

Uh oh!

valkirilov Dec 5, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

dantovska commented Dec 3, 2025 •

edited by cursor bot

Loading

github-actions bot commented Dec 4, 2025 •

edited

Loading