From 2a91547f2ae39b8ab2e3b7d5991a1b8df7387fc8 Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Wed, 3 Dec 2025 16:59:36 +0200 Subject: [PATCH 01/15] fix(ui): improve custom tutorials UX and button alignment - 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 --- ...7767-custom-tutorials-buttons-alignment.md | 642 ++++++++++++++++++ .../DeleteTutorialButton.tsx | 2 +- .../EnablementArea/components/Group/Group.tsx | 4 +- .../components/Group/styles.scss | 12 - .../components/Navigation/Navigation.tsx | 26 +- .../UploadTutorialForm.styles.ts | 11 + .../UploadTutorialForm/UploadTutorialForm.tsx | 107 ++- .../UploadTutorialForm/styles.module.scss | 143 ++-- .../WelcomeMyTutorials.spec.tsx | 21 - .../WelcomeMyTutorials.styles.ts | 13 - .../WelcomeMyTutorials/WelcomeMyTutorials.tsx | 27 - .../components/WelcomeMyTutorials/index.ts | 3 - 12 files changed, 784 insertions(+), 227 deletions(-) create mode 100644 docs/pr-plan-RI-7767-custom-tutorials-buttons-alignment.md create mode 100644 redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.styles.ts delete mode 100644 redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/WelcomeMyTutorials/WelcomeMyTutorials.spec.tsx delete mode 100644 redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/WelcomeMyTutorials/WelcomeMyTutorials.styles.ts delete mode 100644 redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/WelcomeMyTutorials/WelcomeMyTutorials.tsx delete mode 100644 redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/WelcomeMyTutorials/index.ts diff --git a/docs/pr-plan-RI-7767-custom-tutorials-buttons-alignment.md b/docs/pr-plan-RI-7767-custom-tutorials-buttons-alignment.md new file mode 100644 index 0000000000..e39d817abe --- /dev/null +++ b/docs/pr-plan-RI-7767-custom-tutorials-buttons-alignment.md @@ -0,0 +1,642 @@ +# Implementation Plan: \[Tutorials] Custom tutorials buttons are not aligned + +**JIRA Ticket:** [RI-7767](https://redislabs.atlassian.net/browse/RI-7767) +**Plan Date:** 2025-12-03 +**Planner:** Augment Agent + +*** + +## Executive Summary + +**Components Affected:** + +* `Navigation` component (remove welcome screen logic, always show form when empty) +* `Group` component (fix + button and delete icon alignment with chevron) +* `UploadTutorialForm` component (remove Cancel button, update onboarding anchor) +* `WelcomeMyTutorials` component (remove component entirely) + +**Key Risks:** + +1. **State management changes** - Removing `isCreateOpen` toggle might affect other logic. Mitigation: Carefully review Navigation.tsx to ensure no other dependencies on this state. +2. **Onboarding anchor change** - Moving onboarding from + button to file picker might require anchor position adjustments. Mitigation: Test onboarding flow thoroughly, adjust `anchorPosition` if needed. +3. **Test updates required** - Many tests reference welcome screen and + button. Mitigation: Update all affected tests, ensure test coverage maintained. +4. **Delete icon alignment** - May require CSS adjustments that affect other accordion items. Mitigation: Use specific selectors, test with multiple tutorials. + +*** + +## 1. Requirements Summary + +**Story (Why):** +Some spacings and alignments in the custom tutorials section are not good. The UX flow needs to be simplified by removing the welcome screen, showing the form directly when the section is empty. The + button should remain for when tutorials exist, but needs to be aligned with the chevron. + +**Acceptance Criteria (What):** + +1. Remove the welcome tutorial screen, leave only the add new tutorial form +2. Remove all the logic behind the welcome tutorial screen +3. The + icon should be aligned with the accordion chevron icon (remains visible when tutorials exist) +4. The delete icon needs to be aligned with the accordion chevron icon +5. Cancel button is no longer needed +6. Update the onboarding to show around the file picker + +**Functional Requirements:** + +* When "My Tutorials" section is open and empty, show UploadTutorialForm directly (no welcome screen, no + button) +* When "My Tutorials" section has tutorials, show tutorials list with + button to open form +* * button must be vertically aligned with accordion chevron icon +* Delete icon button must be vertically aligned with accordion chevron icon +* Remove Cancel button from UploadTutorialForm +* Onboarding tour must target file picker instead of + button (when form is shown) +* Form submission and tutorial upload must continue to work + +**Non-Functional Requirements:** + +* Maintain existing functionality (upload, delete, navigation) +* Onboarding flow must continue to work correctly with new anchor +* No breaking changes to other parts of the system +* Visual consistency with design specifications + +**Resources Provided:** + +* Design image: `image-20251203-132723.png` (attached to JIRA ticket) +* Design image: `image-20251126-150847.png` (attached to JIRA ticket) +* Test file: `tutorial.zip` (for testing upload functionality) + +*** + +## 2. Current State Analysis + +### Frontend Changes + +**Components to Modify:** + +* **Navigation.tsx** (`redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Navigation/Navigation.tsx`): + * Current: Uses `isCreateOpen` state to toggle between WelcomeMyTutorials and UploadTutorialForm + * Current: Shows WelcomeMyTutorials when `!isCreateOpen && children?.length === 0` + * Current: Shows UploadTutorialForm when `isCreateOpen` + * Changes needed: + * Remove `isCreateOpen` state + * Remove conditional rendering of WelcomeMyTutorials + * Always show UploadTutorialForm when `children?.length === 0` and section is open + * Remove `onCreate` callback from Group component (no longer needed) + +* **Group.tsx** (`redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.tsx`): + * Current: Renders + button wrapped in OnboardingTour when `isGroupOpen || forceState === 'open'` + * Current: + button calls `handleCreate` which triggers `onCreate` callback + * Changes needed: + * Keep + button but fix alignment with chevron icon + * Keep `handleCreate` function and `onCreate` prop (needed when tutorials exist) + * Ensure + button aligns with chevron (may need CSS adjustments) + * Ensure delete icon alignment with chevron (may need CSS adjustments) + * Move OnboardingTour from + button to UploadTutorialForm (file picker) + +* **Group/styles.scss** (`redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/styles.scss`): + * Current: `.group-header__btn` has width/height 24px with flex alignment + * Current: `.group-header__delete-btn` has specific icon sizing (14px) + * Changes needed: + * Verify + button aligns with accordion chevron + * Verify delete icon aligns with accordion chevron + * May need to adjust icon sizes or container alignment + * Ensure consistent alignment for all header buttons + +* **UploadTutorialForm.tsx** (`redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.tsx`): + * Current: Has Cancel button that calls `onCancel?.()` + * Current: Cancel and Submit buttons in `.footerButtons` div + * Current: File picker has `data-testid="import-tutorial"` + * Changes needed: + * Remove Cancel button (lines 107-113) + * Remove `onCancel` prop + * Update footer layout (remove Cancel, keep Submit) + * Wrap RiFilePicker with OnboardingTour component + * Move OnboardingTour from Group to UploadTutorialForm + +* **UploadTutorialForm/styles.module.scss** (`redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/styles.module.scss`): + * Current: `.footerButtons` uses flex layout + * Current: `.btnSubmit` has `margin-left: 6px` + * Changes needed: + * Update footer layout since Cancel button removed + * Remove `.btnSubmit` margin-left (no longer needed) + * Simplify footer styles + +**Components to Remove:** + +* **WelcomeMyTutorials**: Remove component entirely (delete component files) + * `WelcomeMyTutorials.tsx` + * `WelcomeMyTutorials.styles.ts` (or `.scss` if exists) + * `WelcomeMyTutorials.spec.tsx` + * `index.ts` (barrel export) + +**Components to Reuse:** + +* **RiAccordion**: Already handles action button layout, just needs alignment fixes +* **OnboardingTour**: Move from Group to UploadTutorialForm, target file picker +* **RiFilePicker**: Wrap with OnboardingTour for onboarding +* **DeleteTutorialButton**: Ensure proper alignment with chevron + +### Backend Changes + +**No backend changes required** - This is a pure frontend UI/UX change. + +*** + +## 3. Implementation Plan + +### Phase 1: Remove Welcome Screen and Update Form Display Logic + +**Goal:** Remove welcome screen, show form directly when empty, keep + button for when tutorials exist + +**Tasks:** + +1. \[ ] **Remove welcome screen rendering from Navigation.tsx** + * Files: `Navigation.tsx` + * Acceptance: WelcomeMyTutorials is never rendered + * Details: + * Update logic: When `children?.length === 0` and section is open, show UploadTutorialForm directly (no welcome screen, no toggle needed) + * When `children?.length > 0`, show tutorials list and keep + button functionality + * Keep `isCreateOpen` state for toggling form when tutorials exist + * Remove conditional rendering of WelcomeMyTutorials (lines 184-189) + * Keep `onCreate={() => setIsCreateOpen((v) => !v)}` from Group (line 172) - still needed when tutorials exist + +2. \[ ] **Fix + button alignment in Group.tsx** + * Files: `Group.tsx`, `Group/styles.scss` + * Acceptance: + button is aligned with chevron icon + * Details: + * Keep + button rendering (lines 89-109) + * Keep `handleCreate` function and `onCreate` prop (needed when tutorials exist) + * Remove OnboardingTour wrapper from + button (will move to file picker) + * Fix alignment: Ensure + button icon aligns with accordion chevron + * May need to adjust icon size or container alignment in styles + +3. \[ ] **Remove WelcomeMyTutorials component entirely** + * Files: `WelcomeMyTutorials/` directory + * Acceptance: Component files deleted, no references remain + * Details: + * Delete `WelcomeMyTutorials.tsx` + * Delete `WelcomeMyTutorials.styles.ts` (or `.scss` if exists) + * Delete `WelcomeMyTutorials.spec.tsx` + * Delete `index.ts` (barrel export) + * Remove WelcomeMyTutorials import from Navigation.tsx (line 42) + +4. \[ ] **Remove unused imports and styles** + * Files: `Navigation.tsx`, `Group.tsx`, `Group/styles.scss` + * Acceptance: No unused imports, clean code + * Details: + * Remove `.group-header__create-btn` styles if no longer referenced + * Clean up any unused code + +**Deliverables:** + +* Navigation component without welcome screen logic +* Group component with + button properly aligned with chevron +* WelcomeMyTutorials component removed entirely +* Form shows directly when empty, + button works when tutorials exist +* Clean code with no unused imports + +**Testing:** + +* Visual: Empty state shows form directly (no welcome screen, no + button) +* Visual: When tutorials exist, + button is visible and aligned with chevron +* Functional: Form appears when section is opened and empty +* Functional: + button opens form when tutorials exist +* No console errors or warnings + +### Phase 2: Remove Cancel Button and Update Form + +**Goal:** Remove Cancel button from UploadTutorialForm and simplify form footer + +**Tasks:** + +1. \[ ] **Remove Cancel button from UploadTutorialForm** + * Files: `UploadTutorialForm.tsx` + * Acceptance: Cancel button is not rendered + * Details: + * Remove Cancel button JSX (lines 107-113) + * Remove `onCancel` prop from Props interface (line 28) + * Remove `onCancel` from destructuring (line 32) + * Remove `onCancel?.()` call + +2. \[ ] **Update form footer layout** + * Files: `UploadTutorialForm.tsx`, `UploadTutorialForm/styles.module.scss` + * Acceptance: Footer shows only Submit button and CreateTutorialLink + * Details: + * Update `.footerButtons` to only contain Submit button + * Remove `.btnSubmit` margin-left from styles (line 31) + * Simplify footer layout (may not need `.footerButtons` wrapper anymore) + +3. \[ ] **Update Navigation.tsx to remove onCancel prop** + * Files: `Navigation.tsx` + * Acceptance: No onCancel prop passed to UploadTutorialForm + * Details: + * Remove `onCancel={() => setIsCreateOpen(false)}` from UploadTutorialForm (line 195) + * This prop is no longer needed since there's no cancel action + +**Deliverables:** + +* UploadTutorialForm without Cancel button +* Simplified footer layout +* Clean prop interfaces + +**Testing:** + +* Visual: Only Submit button visible in footer +* Functional: Form submission still works +* No console errors + +### Phase 3: Fix Button Icons Alignment + +**Goal:** Ensure + button and delete icon are vertically aligned with accordion chevron icon + +**Tasks:** + +1. \[ ] **Review current alignment** + * Files: `Group/styles.scss`, `DeleteTutorialButton.tsx` + * Acceptance: Understanding of current alignment issue + * Details: + * Check `.group-header__btn` alignment (lines 28-42) + * Check `.group-header__delete-btn` icon sizing (lines 44-54) + * Verify RiIcon size prop in DeleteTutorialButton (line 41: `size="m"`) + * Check accordion chevron icon size for comparison + +2. \[ ] **Fix delete icon alignment** + * Files: `Group/styles.scss`, `DeleteTutorialButton.tsx` + * Acceptance: Delete icon aligns with chevron icon + * Details: + * Ensure consistent icon sizes between delete icon and chevron + * Verify container alignment (`.group-header__btn` should align with chevron container) + * May need to adjust icon size prop or CSS + * Test with multiple tutorials to ensure all delete buttons align + +3. \[ ] **Test visual alignment** + * Files: Manual testing + * Acceptance: Visual inspection confirms alignment + * Details: + * Open custom tutorials section with tutorials + * Verify delete icon aligns with chevron on same baseline + * Test with multiple tutorials + +**Deliverables:** + +* * button properly aligned with chevron +* Delete icon properly aligned with chevron +* Consistent icon sizing across all header buttons +* Updated styles if needed + +**Testing:** + +* Visual: + button aligns with chevron when tutorials exist +* Visual: All delete icons align with their respective chevrons +* Functional: + button and delete functionality still work +* Multiple tutorials: All alignments correct + +### Phase 4: Update Onboarding to Target File Picker + +**Goal:** Move onboarding tour from + button to file picker + +**Tasks:** + +1. \[ ] **Move OnboardingTour to UploadTutorialForm** + * Files: `UploadTutorialForm.tsx` + * Acceptance: OnboardingTour wraps file picker + * Details: + * Import OnboardingTour and ONBOARDING\_FEATURES (already imported in Group.tsx) + * Wrap RiFilePicker with OnboardingTour component + * Use same config: `ONBOARDING_FEATURES.EXPLORE_CUSTOM_TUTORIALS` + * Adjust `anchorPosition` if needed (currently "downLeft" in Group, may need different for file picker) + * Remove `anchorWrapperClassName` or adjust for file picker + * Keep `panelClassName` logic if needed for page opened state + +2. \[ ] **Test onboarding flow** + * Files: Manual testing + * Acceptance: Onboarding targets file picker correctly + * Details: + * Start onboarding flow + * Verify tour highlights file picker + * Verify tour content is correct + * Verify tour completes successfully + +3. \[ ] **Update onboarding anchor position if needed** + * Files: `UploadTutorialForm.tsx` + * Acceptance: Onboarding popover appears in correct position + * Details: + * Test different `anchorPosition` values if needed + * Ensure popover doesn't overlap important UI + * Verify in both empty and non-empty states + +**Deliverables:** + +* OnboardingTour wrapping file picker +* Onboarding flow working correctly +* Proper anchor positioning + +**Testing:** + +* Onboarding: Tour targets file picker +* Visual: Popover appears in correct position +* Functional: Onboarding completes successfully + +### Phase 5: Update Tests and Clean Up + +**Goal:** Update all tests and ensure code quality + +**Tasks:** + +1. \[ ] **Update Navigation tests** + * Files: `Navigation.spec.tsx` (if exists), `EnablementArea.spec.tsx` + * Acceptance: All tests pass + * Details: + * Remove tests that check for WelcomeMyTutorials rendering + * Update tests to check for UploadTutorialForm in empty state + * Remove tests for + button click + * Update tests for form submission + +2. \[ ] **Update Group tests** + * Files: `Group.spec.tsx` (if exists) + * Acceptance: All tests pass + * Details: + * Remove tests for + button rendering + * Remove tests for `handleCreate` function + * Update tests for delete button alignment if needed + +3. \[ ] **Update UploadTutorialForm tests** + * Files: `UploadTutorialForm.spec.tsx` + * Acceptance: All tests pass + * Details: + * Remove tests for Cancel button + * Update tests for form submission (no cancel action) + * Add tests for onboarding tour if needed + +4. \[ ] **Remove WelcomeMyTutorials test references** + * Files: `EnablementArea.spec.tsx` and other test files + * Acceptance: No test references to WelcomeMyTutorials + * Details: + * Remove tests that check for `welcome-my-tutorials` testid + * Update tests that reference WelcomeMyTutorials component + * Ensure no broken test imports + +5. \[ ] **Run linter and fix any issues** + * Files: All modified files + * Acceptance: `yarn lint` passes without errors + * Details: + * Follow project code quality standards + * Remove unused imports + * Fix any TypeScript errors + * Ensure proper formatting + +**Deliverables:** + +* All tests passing +* Code passes linting +* No unused code or imports + +**Testing:** + +* Unit tests: All component tests pass +* Integration: Onboarding flow works +* Linting: No lint errors +* TypeScript: No type errors + +*** + +## 4. Testing Strategy + +### Test Scenarios (from Acceptance Criteria) + +**AC1: Remove welcome tutorial screen** + +* Test Scenario: + * Given: User opens tutorials panel and navigates to "My Tutorials" section + * When: Section is empty and opened + * Then: UploadTutorialForm is shown directly (no WelcomeMyTutorials component) +* Test Type: Unit/Integration +* Test Location: `Navigation.spec.tsx` or `EnablementArea.spec.tsx` + +**AC2: Remove all logic behind welcome tutorial screen** + +* Test Scenario: + * Given: User opens "My Tutorials" section + * When: Section is empty + * Then: No `isCreateOpen` state is used, form shows directly +* Test Type: Unit +* Test Location: `Navigation.spec.tsx` + +**AC3: + icon aligned with chevron** + +* Test Scenario: + * Given: User opens "My Tutorials" section with tutorials loaded + * When: Viewing the section header + * Then: The + button is visible and vertically aligned with the chevron icon +* Test Type: Unit/Visual +* Test Location: `Group.spec.tsx` + +**AC4: Delete icon aligned with accordion chevron** + +* Test Scenario: + * Given: User has custom tutorials uploaded + * When: User views a custom tutorial item with delete button + * Then: The delete icon button is vertically aligned with the chevron icon +* Test Type: Visual/Manual +* Test Location: Manual visual inspection + +**AC5: Cancel button removed** + +* Test Scenario: + * Given: User opens upload form (empty state) + * When: User views the form footer + * Then: Only Submit button is visible (no Cancel button) +* Test Type: Unit/Visual +* Test Location: `UploadTutorialForm.spec.tsx` + +**AC6: Onboarding updated to show around file picker** + +* Test Scenario: + * Given: User starts onboarding flow + * When: User reaches custom tutorials step + * Then: Onboarding tour highlights the file picker (not + button) +* Test Type: Integration/Manual +* Test Location: Manual testing of onboarding flow + +### Edge Cases and Error Scenarios + +1. **Section closed then reopened** + * Scenario: User closes "My Tutorials" section, then reopens it when empty + * Expected Behavior: Form shows directly (no welcome screen) + * Test: Close and reopen section, verify form appears + +2. **Upload tutorial then delete all** + * Scenario: User uploads a tutorial, then deletes all tutorials + * Expected Behavior: Form appears again when section becomes empty + * Test: Upload tutorial, delete it, verify form shows + +3. **Onboarding active during form display** + * Scenario: User is in onboarding flow when viewing empty custom tutorials + * Expected Behavior: Onboarding tour highlights file picker, form is visible + * Test: Complete onboarding with empty state + +4. **Multiple custom tutorials with delete buttons** + * Scenario: User has multiple custom tutorials with multiple delete buttons + * Expected Behavior: All delete buttons align with their respective chevrons + * Test: Upload multiple tutorials, verify all alignments + +5. **Form validation errors** + * Scenario: User tries to submit form without file or link + * Expected Behavior: Submit button disabled, form still visible (no cancel needed) + * Test: Try to submit empty form, verify UI state + +6. **Section with tutorials (non-empty state)** + * Scenario: User has tutorials, opens section + * Expected Behavior: Tutorials list shows, + button visible and aligned, delete buttons align + * Test: Open section with tutorials, verify + button works and all buttons align + +7. **+ button opens form when tutorials exist** + * Scenario: User has tutorials, clicks + button + * Expected Behavior: Form opens, can upload new tutorial + * Test: Click + button, verify form appears, upload works + +### Test Data Needs + +* Test tutorial zip file: Use `tutorial.zip` from JIRA ticket attachment +* Multiple custom tutorials: Create 2-3 test tutorials for alignment verification +* Empty state: Clear custom tutorials to test form display + +*** + +## 5. Risk Assessment and Mitigation + +### Technical Risks + +| Risk | Likelihood | Impact | Mitigation | +|------|-----------|--------|-----------| +| State management changes break other logic | Medium | Medium | Carefully review Navigation.tsx for all `isCreateOpen` usages, ensure no other dependencies | +| Delete icon alignment requires CSS that affects other accordions | Low | Medium | Use specific selectors (`.group-header__delete-btn`), test with multiple accordion items | +| Onboarding anchor position incorrect for file picker | Medium | Low | Test different `anchorPosition` values, adjust as needed | +| Removing welcome screen breaks existing tests | High | Low | Update all tests that reference `welcome-my-tutorials` testid | +| Form always visible might cause UX issues | Low | Medium | Verify with design that always-visible form is correct behavior | + +### Integration Risks + +| Risk | Likelihood | Impact | Mitigation | +|------|-----------|--------|-----------| +| Onboarding tour breaks with new anchor | Medium | Medium | Test onboarding flow thoroughly, verify tour completes successfully | +| Telemetry events affected by removing + button | Low | Low | Check if + button click telemetry needs to be moved or removed | +| Other components depend on WelcomeMyTutorials | Low | Low | Component can remain in codebase, just unused | +| Form submission flow breaks without cancel | Low | Medium | Test form submission thoroughly, ensure error handling works | + +### Timeline Risks + +| Risk | Likelihood | Impact | Mitigation | +|------|-----------|--------|-----------| +| Test updates take longer than expected | Medium | Low | Allocate buffer time for test updates | +| Design clarification needed for exact behavior | Low | Low | Current description is clear, proceed with implementation | +| Onboarding configuration needs updates | Low | Medium | Test onboarding early, adjust configuration if needed | + +### Knowledge Gaps + +* **Exact onboarding anchor position**: May need to test different positions for file picker. Start with "downLeft" and adjust if needed. +* **Behavior when section is closed/reopened**: Verify form appears correctly when section is reopened. Should be straightforward based on current logic. +* **Telemetry for + button**: Check if telemetry event `EXPLORE_PANEL_IMPORT_CLICKED` needs to be moved or if it's no longer needed. + +*** + +## 6. Implementation Notes + +### Code Quality Standards + +* Follow project rules for styled-components migration (prefer layout components over div) +* Use theme spacing values instead of magic numbers +* Use semantic colors from theme +* Ensure all changes pass `yarn lint` +* No console.log statements +* Proper TypeScript types (no `any`) +* Remove unused imports and code + +### PR Strategy + +This can be implemented as a **single PR** since: + +* Changes are related to the same feature (custom tutorials UX improvement) +* All changes are in the same area (enablement area components) +* Risk is manageable with thorough testing +* Easier to review as one cohesive change + +**PR Title:** `RI-7767 Remove welcome screen and fix custom tutorials alignment` + +**PR Description:** + +```markdown +# What + +Simplify custom tutorials UX by removing welcome screen and fixing button alignments: +- Remove WelcomeMyTutorials component usage +- Always show UploadTutorialForm when section is empty (no welcome screen, no + button) +- Keep + button when tutorials exist (aligned with chevron) +- Fix + button and delete icon alignment with accordion chevron +- Remove Cancel button from UploadTutorialForm +- Move onboarding tour to target file picker instead of + button + +# Testing + +1. Open tutorials panel → My Tutorials section (empty) +2. Verify form shows directly (no welcome screen, no + button) +3. Upload a tutorial, verify + button appears and aligns with chevron +4. Verify delete button aligns with chevron +5. Click + button when tutorials exist, verify form opens +6. Delete all tutorials, verify form appears again (no + button) +7. Complete onboarding flow, verify it targets file picker +8. Test form submission (no cancel button) + +--- + +Closes #RI-7767 +``` + +### Files to Modify + +1. `redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Navigation/Navigation.tsx` +2. `redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.tsx` +3. `redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/styles.scss` +4. `redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.tsx` +5. `redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/styles.module.scss` +6. `redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.spec.tsx` +7. `redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/EnablementArea.spec.tsx` (if tests need updates) + +### Files to Delete + +1. `redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/WelcomeMyTutorials/WelcomeMyTutorials.tsx` +2. `redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/WelcomeMyTutorials/WelcomeMyTutorials.styles.ts` (or `.scss` if exists) +3. `redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/WelcomeMyTutorials/WelcomeMyTutorials.spec.tsx` +4. `redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/WelcomeMyTutorials/index.ts` + +### Dependencies + +* No new dependencies required +* Uses existing components (OnboardingTour, RiFilePicker, etc.) +* Uses existing onboarding configuration (`ONBOARDING_FEATURES.EXPLORE_CUSTOM_TUTORIALS`) + +*** + +## 7. Success Criteria + +The implementation is successful when: + +1. ✅ Welcome screen is never shown (UploadTutorialForm shows directly when empty) +2. ✅ + button is aligned with accordion chevron icon (visible when tutorials exist) +3. ✅ Cancel button is removed from UploadTutorialForm +4. ✅ Delete icon is vertically aligned with accordion chevron icon +5. ✅ Onboarding tour targets file picker and completes successfully +6. ✅ All existing tests pass (with updates) +7. ✅ Code passes linting +8. ✅ Visual inspection confirms alignment matches design specifications +9. ✅ Form submission and tutorial upload continue to work +10. ✅ + button opens form when tutorials exist +11. ✅ No console errors or warnings + +*** + +## 8. Follow-up Actions + +After implementation: + +1. **Visual QA**: Have designer or QA verify alignment matches design images +2. **Onboarding verification**: Test complete onboarding flow end-to-end +3. **Telemetry check**: Verify telemetry events are still tracked correctly (if + button telemetry needs adjustment) +4. **Documentation**: Update any relevant documentation if behavior changes significantly +5. **Component removal**: WelcomeMyTutorials component has been removed entirely diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/DeleteTutorialButton/DeleteTutorialButton.tsx b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/DeleteTutorialButton/DeleteTutorialButton.tsx index 614807c9b2..09fb5de9df 100644 --- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/DeleteTutorialButton/DeleteTutorialButton.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/DeleteTutorialButton/DeleteTutorialButton.tsx @@ -33,7 +33,7 @@ const DeleteTutorialButton = (props: Props) => { panelPaddingSize="l" button={
{ >
- +
diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/styles.scss b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/styles.scss index 6369a0de30..3c109608ef 100644 --- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/styles.scss +++ b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/styles.scss @@ -41,18 +41,6 @@ } } - &__delete-btn { - svg { - width: 14px; - height: 14px; - } - - &:hover { - color: var(--euiColorPrimaryText); - background-color: var(--euiColorSecondary); - } - } - .euiIcon { margin-right: 4px; } diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Navigation/Navigation.tsx b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Navigation/Navigation.tsx index 793f4b18e0..38e8ca7f13 100644 --- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Navigation/Navigation.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Navigation/Navigation.tsx @@ -39,7 +39,6 @@ import InternalLink from '../InternalLink' import PlainText from '../PlainText' import { Col } from 'uiSrc/components/base/layout/flex' import UploadTutorialForm from '../UploadTutorialForm' -import WelcomeMyTutorials from '../WelcomeMyTutorials' import styles from './styles.module.scss' @@ -179,24 +178,21 @@ const Navigation = (props: Props) => { } {...args} > - {isCustomTutorials && actions?.includes(EAItemActions.Create) && ( -
- {!isCreateOpen && children?.length === 0 && ( - - setIsCreateOpen(true)} - /> - - - )} - {isCreateOpen && ( + {isCustomTutorials && + actions?.includes(EAItemActions.Create) && + (children?.length === 0 ? ( + + + + + ) : ( + isCreateOpen && ( setIsCreateOpen(false)} /> - )} -
- )} + ) + ))} {renderTreeView( children ? getManifestItems(children) : [], { diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.styles.ts b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.styles.ts new file mode 100644 index 0000000000..ac4e90ec85 --- /dev/null +++ b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.styles.ts @@ -0,0 +1,11 @@ +import React from 'react' +import styled from 'styled-components' +import { Theme } from 'uiSrc/components/base/theme/types' + +export const Wrapper = styled.div>` + border: 1px solid + ${({ theme }: { theme: Theme }) => theme.semantic.color.border.neutral500}; + border-radius: ${({ theme }: { theme: Theme }) => + theme.components.card.borderRadius}; + padding: ${({ theme }: { theme: Theme }) => theme.core.space.space200}; +` diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.tsx b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.tsx index 39f43cab3a..34eac5ca3f 100644 --- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.tsx @@ -9,6 +9,7 @@ import validationErrors from 'uiSrc/constants/validationErrors' import { RiFilePicker, RiTooltip } from 'uiSrc/components' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { Row } from 'uiSrc/components/base/layout/flex' import { PrimaryButton, SecondaryButton, @@ -16,6 +17,7 @@ import { import { InfoIcon } from 'uiSrc/components/base/icons' import { Text } from 'uiSrc/components/base/text' import CreateTutorialLink from '../CreateTutorialLink' +import { Wrapper } from './UploadTutorialForm.styles' import styles from './styles.module.scss' export interface FormValues { @@ -75,70 +77,67 @@ const UploadTutorialForm = (props: Props) => { } return ( -
-
- Add new Tutorial - -
-
- -
-
OR
- formik.setFieldValue('link', value)} - className={styles.input} - data-testid="tutorial-link-field" + + Add new tutorial + +
+
+ - -
- -
+
+
OR
+ formik.setFieldValue('link', value)} + className={styles.input} + data-testid="tutorial-link-field" + /> + +
+ + + {onCancel && ( onCancel?.()} + onClick={() => onCancel()} data-testid="cancel-upload-tutorial-btn" > Cancel - + formik.handleSubmit()} + icon={isSubmitDisabled ? InfoIcon : undefined} + disabled={isSubmitDisabled} + data-testid="submit-upload-tutorial-btn" > - formik.handleSubmit()} - icon={isSubmitDisabled ? InfoIcon : undefined} - disabled={isSubmitDisabled} - data-testid="submit-upload-tutorial-btn" - > - Submit - - -
-
+ Submit + + +
-
+ ) } diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/styles.module.scss b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/styles.module.scss index 202dabcf05..631a5cd550 100644 --- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/styles.module.scss +++ b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/styles.module.scss @@ -1,93 +1,83 @@ -.outerWrapper { - padding: 12px 10px; - - .wrapper { - padding: 18px; - background: var(--euiColorLightestShade); - border-radius: 4px; - - .input { - height: 34px !important; - background: var(--euiColorEmptyShade) !important; - } - - .uploadFileWrapper { - text-align: right; - margin-top: -8px; - } +.wrapper { + .input { + height: 34px !important; + background: var(--euiColorEmptyShade) !important; + } - .uploadFileName { - display: flex; - align-items: center; - padding-left: 4px; - } + .uploadFileWrapper { + text-align: right; + margin-top: -8px; + } - .uploadFileNameTitle { - max-width: calc(100% - 30px); - } + .uploadFileName { + display: flex; + align-items: center; + padding-left: 4px; } - .btnSubmit { - margin-left: 6px; + .uploadFileNameTitle { + max-width: calc(100% - 30px); + } +} - svg { - width: 16px !important; - height: 16px !important; - margin-top: 0; - } +.btnSubmit { + svg { + width: 16px !important; + height: 16px !important; + margin-top: 0; } +} - .fileDrop { - width: 100%; - margin-top: 14px; +.fileDrop { + width: 100%; + margin-top: 14px; - :global { - .RI-File-Picker__clearButton, .RI-File-Picker__clearButton .euiButtonEmpty__text { - color: var(--externalLinkColor) !important; - text-transform: lowercase; - } + :global { + .RI-File-Picker__clearButton, .RI-File-Picker__clearButton .euiButtonEmpty__text { + color: var(--externalLinkColor) !important; + text-transform: lowercase; + } - .RI-File-Picker__showDrop .RI-File-Picker__prompt, .RI-File-Picker__input:focus + .RI-File-Picker__prompt { - background-color: var(--euiColorEmptyShade); - } + .RI-File-Picker__showDrop .RI-File-Picker__prompt, .RI-File-Picker__input:focus + .RI-File-Picker__prompt { + background-color: var(--euiColorEmptyShade); + } - .RI-File-Picker__prompt { - background-color: var(--euiColorEmptyShade); - height: 120px; - border-radius: 4px; - box-shadow: none; - border: 1px dashed var(--controlsBorderColor); - } + .RI-File-Picker__prompt { + background-color: var(--euiColorEmptyShade); + height: 120px; + border-radius: 4px; + box-shadow: none; + border: 1px dashed var(--controlsBorderColor); + } - .RI-File-Picker__clearButton { - margin-top: 4px; - } + .RI-File-Picker__clearButton { + margin-top: 4px; } } +} - .hr { - margin: 12px 0; - width: 100%; - text-align: center; - position: relative; - - &:before, &:after { - content: ''; - display: block; - width: 40%; - height: 1px; - background: var(--tableDarkestBorderColor); - position: absolute; - top: 50%; - } +.hr { + margin: 12px 0; + width: 100%; + text-align: center; + position: relative; + + &:before, &:after { + content: ''; + display: block; + width: 40%; + height: 1px; + background: var(--tableDarkestBorderColor); + position: absolute; + top: 50%; + } - &:before { - left: 0; - } + &:before { + left: 0; + } - &:after { - right: 0; - } + &:after { + right: 0; } } @@ -96,9 +86,4 @@ align-items: center; justify-content: space-between; - .footerButtons { - display: flex; - align-items: center; - justify-content: flex-end; - } } diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/WelcomeMyTutorials/WelcomeMyTutorials.spec.tsx b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/WelcomeMyTutorials/WelcomeMyTutorials.spec.tsx deleted file mode 100644 index b1b2f12d65..0000000000 --- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/WelcomeMyTutorials/WelcomeMyTutorials.spec.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react' -import { render, screen, fireEvent } from 'uiSrc/utils/test-utils' - -import WelcomeMyTutorials from './WelcomeMyTutorials' - -describe('WelcomeMyTutorials', () => { - it('should render', () => { - expect( - render(), - ).toBeTruthy() - }) - - it('should call handleOpenUpload', () => { - const mockHandleOpenUpload = jest.fn() - render() - - fireEvent.click(screen.getByTestId('upload-tutorial-btn')) - - expect(mockHandleOpenUpload).toBeCalled() - }) -}) diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/WelcomeMyTutorials/WelcomeMyTutorials.styles.ts b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/WelcomeMyTutorials/WelcomeMyTutorials.styles.ts deleted file mode 100644 index 2c7223c916..0000000000 --- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/WelcomeMyTutorials/WelcomeMyTutorials.styles.ts +++ /dev/null @@ -1,13 +0,0 @@ -import styled from 'styled-components' - -import { Row } from 'uiSrc/components/base/layout/flex' - -export const StyledRow = styled(Row)` - padding: ${({ theme }) => theme.core.space.space100}; -` - -export const TutorialText = styled.span` - @media only screen and (max-width: 1440px) { - display: none; - } -` diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/WelcomeMyTutorials/WelcomeMyTutorials.tsx b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/WelcomeMyTutorials/WelcomeMyTutorials.tsx deleted file mode 100644 index c1f0f9b3ee..0000000000 --- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/WelcomeMyTutorials/WelcomeMyTutorials.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react' - -import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' -import { Card } from 'uiSrc/components/base/layout' -import CreateTutorialLink from '../CreateTutorialLink' -import { StyledRow, TutorialText } from './WelcomeMyTutorials.styles' - -export interface Props { - handleOpenUpload: () => void -} - -const WelcomeMyTutorials = ({ handleOpenUpload }: Props) => ( - - - - handleOpenUpload()} - data-testid="upload-tutorial-btn" - > - + Upload tutorial - - - -) - -export default WelcomeMyTutorials diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/WelcomeMyTutorials/index.ts b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/WelcomeMyTutorials/index.ts deleted file mode 100644 index 906eb17a0e..0000000000 --- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/WelcomeMyTutorials/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import WelcomeMyTutorials from './WelcomeMyTutorials' - -export default WelcomeMyTutorials From c00bbf60f595e47e88c93d97fdb520496f88818d Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Wed, 3 Dec 2025 17:02:38 +0200 Subject: [PATCH 02/15] docs: update PR plan to reflect bug fix nature - Add branch name to PR plan - Update references from feature to bug fix - Mark ticket as Bug Fix in header References: #RI-7767 --- docs/pr-plan-RI-7767-custom-tutorials-buttons-alignment.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/docs/pr-plan-RI-7767-custom-tutorials-buttons-alignment.md b/docs/pr-plan-RI-7767-custom-tutorials-buttons-alignment.md index e39d817abe..405f38c18d 100644 --- a/docs/pr-plan-RI-7767-custom-tutorials-buttons-alignment.md +++ b/docs/pr-plan-RI-7767-custom-tutorials-buttons-alignment.md @@ -1,8 +1,9 @@ # Implementation Plan: \[Tutorials] Custom tutorials buttons are not aligned -**JIRA Ticket:** [RI-7767](https://redislabs.atlassian.net/browse/RI-7767) +**JIRA Ticket:** [RI-7767](https://redislabs.atlassian.net/browse/RI-7767) (Bug Fix) **Plan Date:** 2025-12-03 **Planner:** Augment Agent +**Branch:** `fe/bugfix/RI-7767/custom-tutorials-buttons-alignment` *** @@ -552,11 +553,13 @@ Some spacings and alignments in the custom tutorials section are not good. The U This can be implemented as a **single PR** since: -* Changes are related to the same feature (custom tutorials UX improvement) +* Changes are related to the same bug fix (custom tutorials UX improvement) * All changes are in the same area (enablement area components) * Risk is manageable with thorough testing * Easier to review as one cohesive change +**Branch:** `fe/bugfix/RI-7767/custom-tutorials-buttons-alignment` + **PR Title:** `RI-7767 Remove welcome screen and fix custom tutorials alignment` **PR Description:** From bc0c0c67722eefc5dffca3b459d9e8f4d9b92697 Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Wed, 3 Dec 2025 17:04:35 +0200 Subject: [PATCH 03/15] chore: remove PR plan document Remove implementation plan document as it's not needed in the repository. References: #RI-7767 --- ...7767-custom-tutorials-buttons-alignment.md | 645 ------------------ 1 file changed, 645 deletions(-) delete mode 100644 docs/pr-plan-RI-7767-custom-tutorials-buttons-alignment.md diff --git a/docs/pr-plan-RI-7767-custom-tutorials-buttons-alignment.md b/docs/pr-plan-RI-7767-custom-tutorials-buttons-alignment.md deleted file mode 100644 index 405f38c18d..0000000000 --- a/docs/pr-plan-RI-7767-custom-tutorials-buttons-alignment.md +++ /dev/null @@ -1,645 +0,0 @@ -# Implementation Plan: \[Tutorials] Custom tutorials buttons are not aligned - -**JIRA Ticket:** [RI-7767](https://redislabs.atlassian.net/browse/RI-7767) (Bug Fix) -**Plan Date:** 2025-12-03 -**Planner:** Augment Agent -**Branch:** `fe/bugfix/RI-7767/custom-tutorials-buttons-alignment` - -*** - -## Executive Summary - -**Components Affected:** - -* `Navigation` component (remove welcome screen logic, always show form when empty) -* `Group` component (fix + button and delete icon alignment with chevron) -* `UploadTutorialForm` component (remove Cancel button, update onboarding anchor) -* `WelcomeMyTutorials` component (remove component entirely) - -**Key Risks:** - -1. **State management changes** - Removing `isCreateOpen` toggle might affect other logic. Mitigation: Carefully review Navigation.tsx to ensure no other dependencies on this state. -2. **Onboarding anchor change** - Moving onboarding from + button to file picker might require anchor position adjustments. Mitigation: Test onboarding flow thoroughly, adjust `anchorPosition` if needed. -3. **Test updates required** - Many tests reference welcome screen and + button. Mitigation: Update all affected tests, ensure test coverage maintained. -4. **Delete icon alignment** - May require CSS adjustments that affect other accordion items. Mitigation: Use specific selectors, test with multiple tutorials. - -*** - -## 1. Requirements Summary - -**Story (Why):** -Some spacings and alignments in the custom tutorials section are not good. The UX flow needs to be simplified by removing the welcome screen, showing the form directly when the section is empty. The + button should remain for when tutorials exist, but needs to be aligned with the chevron. - -**Acceptance Criteria (What):** - -1. Remove the welcome tutorial screen, leave only the add new tutorial form -2. Remove all the logic behind the welcome tutorial screen -3. The + icon should be aligned with the accordion chevron icon (remains visible when tutorials exist) -4. The delete icon needs to be aligned with the accordion chevron icon -5. Cancel button is no longer needed -6. Update the onboarding to show around the file picker - -**Functional Requirements:** - -* When "My Tutorials" section is open and empty, show UploadTutorialForm directly (no welcome screen, no + button) -* When "My Tutorials" section has tutorials, show tutorials list with + button to open form -* * button must be vertically aligned with accordion chevron icon -* Delete icon button must be vertically aligned with accordion chevron icon -* Remove Cancel button from UploadTutorialForm -* Onboarding tour must target file picker instead of + button (when form is shown) -* Form submission and tutorial upload must continue to work - -**Non-Functional Requirements:** - -* Maintain existing functionality (upload, delete, navigation) -* Onboarding flow must continue to work correctly with new anchor -* No breaking changes to other parts of the system -* Visual consistency with design specifications - -**Resources Provided:** - -* Design image: `image-20251203-132723.png` (attached to JIRA ticket) -* Design image: `image-20251126-150847.png` (attached to JIRA ticket) -* Test file: `tutorial.zip` (for testing upload functionality) - -*** - -## 2. Current State Analysis - -### Frontend Changes - -**Components to Modify:** - -* **Navigation.tsx** (`redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Navigation/Navigation.tsx`): - * Current: Uses `isCreateOpen` state to toggle between WelcomeMyTutorials and UploadTutorialForm - * Current: Shows WelcomeMyTutorials when `!isCreateOpen && children?.length === 0` - * Current: Shows UploadTutorialForm when `isCreateOpen` - * Changes needed: - * Remove `isCreateOpen` state - * Remove conditional rendering of WelcomeMyTutorials - * Always show UploadTutorialForm when `children?.length === 0` and section is open - * Remove `onCreate` callback from Group component (no longer needed) - -* **Group.tsx** (`redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.tsx`): - * Current: Renders + button wrapped in OnboardingTour when `isGroupOpen || forceState === 'open'` - * Current: + button calls `handleCreate` which triggers `onCreate` callback - * Changes needed: - * Keep + button but fix alignment with chevron icon - * Keep `handleCreate` function and `onCreate` prop (needed when tutorials exist) - * Ensure + button aligns with chevron (may need CSS adjustments) - * Ensure delete icon alignment with chevron (may need CSS adjustments) - * Move OnboardingTour from + button to UploadTutorialForm (file picker) - -* **Group/styles.scss** (`redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/styles.scss`): - * Current: `.group-header__btn` has width/height 24px with flex alignment - * Current: `.group-header__delete-btn` has specific icon sizing (14px) - * Changes needed: - * Verify + button aligns with accordion chevron - * Verify delete icon aligns with accordion chevron - * May need to adjust icon sizes or container alignment - * Ensure consistent alignment for all header buttons - -* **UploadTutorialForm.tsx** (`redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.tsx`): - * Current: Has Cancel button that calls `onCancel?.()` - * Current: Cancel and Submit buttons in `.footerButtons` div - * Current: File picker has `data-testid="import-tutorial"` - * Changes needed: - * Remove Cancel button (lines 107-113) - * Remove `onCancel` prop - * Update footer layout (remove Cancel, keep Submit) - * Wrap RiFilePicker with OnboardingTour component - * Move OnboardingTour from Group to UploadTutorialForm - -* **UploadTutorialForm/styles.module.scss** (`redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/styles.module.scss`): - * Current: `.footerButtons` uses flex layout - * Current: `.btnSubmit` has `margin-left: 6px` - * Changes needed: - * Update footer layout since Cancel button removed - * Remove `.btnSubmit` margin-left (no longer needed) - * Simplify footer styles - -**Components to Remove:** - -* **WelcomeMyTutorials**: Remove component entirely (delete component files) - * `WelcomeMyTutorials.tsx` - * `WelcomeMyTutorials.styles.ts` (or `.scss` if exists) - * `WelcomeMyTutorials.spec.tsx` - * `index.ts` (barrel export) - -**Components to Reuse:** - -* **RiAccordion**: Already handles action button layout, just needs alignment fixes -* **OnboardingTour**: Move from Group to UploadTutorialForm, target file picker -* **RiFilePicker**: Wrap with OnboardingTour for onboarding -* **DeleteTutorialButton**: Ensure proper alignment with chevron - -### Backend Changes - -**No backend changes required** - This is a pure frontend UI/UX change. - -*** - -## 3. Implementation Plan - -### Phase 1: Remove Welcome Screen and Update Form Display Logic - -**Goal:** Remove welcome screen, show form directly when empty, keep + button for when tutorials exist - -**Tasks:** - -1. \[ ] **Remove welcome screen rendering from Navigation.tsx** - * Files: `Navigation.tsx` - * Acceptance: WelcomeMyTutorials is never rendered - * Details: - * Update logic: When `children?.length === 0` and section is open, show UploadTutorialForm directly (no welcome screen, no toggle needed) - * When `children?.length > 0`, show tutorials list and keep + button functionality - * Keep `isCreateOpen` state for toggling form when tutorials exist - * Remove conditional rendering of WelcomeMyTutorials (lines 184-189) - * Keep `onCreate={() => setIsCreateOpen((v) => !v)}` from Group (line 172) - still needed when tutorials exist - -2. \[ ] **Fix + button alignment in Group.tsx** - * Files: `Group.tsx`, `Group/styles.scss` - * Acceptance: + button is aligned with chevron icon - * Details: - * Keep + button rendering (lines 89-109) - * Keep `handleCreate` function and `onCreate` prop (needed when tutorials exist) - * Remove OnboardingTour wrapper from + button (will move to file picker) - * Fix alignment: Ensure + button icon aligns with accordion chevron - * May need to adjust icon size or container alignment in styles - -3. \[ ] **Remove WelcomeMyTutorials component entirely** - * Files: `WelcomeMyTutorials/` directory - * Acceptance: Component files deleted, no references remain - * Details: - * Delete `WelcomeMyTutorials.tsx` - * Delete `WelcomeMyTutorials.styles.ts` (or `.scss` if exists) - * Delete `WelcomeMyTutorials.spec.tsx` - * Delete `index.ts` (barrel export) - * Remove WelcomeMyTutorials import from Navigation.tsx (line 42) - -4. \[ ] **Remove unused imports and styles** - * Files: `Navigation.tsx`, `Group.tsx`, `Group/styles.scss` - * Acceptance: No unused imports, clean code - * Details: - * Remove `.group-header__create-btn` styles if no longer referenced - * Clean up any unused code - -**Deliverables:** - -* Navigation component without welcome screen logic -* Group component with + button properly aligned with chevron -* WelcomeMyTutorials component removed entirely -* Form shows directly when empty, + button works when tutorials exist -* Clean code with no unused imports - -**Testing:** - -* Visual: Empty state shows form directly (no welcome screen, no + button) -* Visual: When tutorials exist, + button is visible and aligned with chevron -* Functional: Form appears when section is opened and empty -* Functional: + button opens form when tutorials exist -* No console errors or warnings - -### Phase 2: Remove Cancel Button and Update Form - -**Goal:** Remove Cancel button from UploadTutorialForm and simplify form footer - -**Tasks:** - -1. \[ ] **Remove Cancel button from UploadTutorialForm** - * Files: `UploadTutorialForm.tsx` - * Acceptance: Cancel button is not rendered - * Details: - * Remove Cancel button JSX (lines 107-113) - * Remove `onCancel` prop from Props interface (line 28) - * Remove `onCancel` from destructuring (line 32) - * Remove `onCancel?.()` call - -2. \[ ] **Update form footer layout** - * Files: `UploadTutorialForm.tsx`, `UploadTutorialForm/styles.module.scss` - * Acceptance: Footer shows only Submit button and CreateTutorialLink - * Details: - * Update `.footerButtons` to only contain Submit button - * Remove `.btnSubmit` margin-left from styles (line 31) - * Simplify footer layout (may not need `.footerButtons` wrapper anymore) - -3. \[ ] **Update Navigation.tsx to remove onCancel prop** - * Files: `Navigation.tsx` - * Acceptance: No onCancel prop passed to UploadTutorialForm - * Details: - * Remove `onCancel={() => setIsCreateOpen(false)}` from UploadTutorialForm (line 195) - * This prop is no longer needed since there's no cancel action - -**Deliverables:** - -* UploadTutorialForm without Cancel button -* Simplified footer layout -* Clean prop interfaces - -**Testing:** - -* Visual: Only Submit button visible in footer -* Functional: Form submission still works -* No console errors - -### Phase 3: Fix Button Icons Alignment - -**Goal:** Ensure + button and delete icon are vertically aligned with accordion chevron icon - -**Tasks:** - -1. \[ ] **Review current alignment** - * Files: `Group/styles.scss`, `DeleteTutorialButton.tsx` - * Acceptance: Understanding of current alignment issue - * Details: - * Check `.group-header__btn` alignment (lines 28-42) - * Check `.group-header__delete-btn` icon sizing (lines 44-54) - * Verify RiIcon size prop in DeleteTutorialButton (line 41: `size="m"`) - * Check accordion chevron icon size for comparison - -2. \[ ] **Fix delete icon alignment** - * Files: `Group/styles.scss`, `DeleteTutorialButton.tsx` - * Acceptance: Delete icon aligns with chevron icon - * Details: - * Ensure consistent icon sizes between delete icon and chevron - * Verify container alignment (`.group-header__btn` should align with chevron container) - * May need to adjust icon size prop or CSS - * Test with multiple tutorials to ensure all delete buttons align - -3. \[ ] **Test visual alignment** - * Files: Manual testing - * Acceptance: Visual inspection confirms alignment - * Details: - * Open custom tutorials section with tutorials - * Verify delete icon aligns with chevron on same baseline - * Test with multiple tutorials - -**Deliverables:** - -* * button properly aligned with chevron -* Delete icon properly aligned with chevron -* Consistent icon sizing across all header buttons -* Updated styles if needed - -**Testing:** - -* Visual: + button aligns with chevron when tutorials exist -* Visual: All delete icons align with their respective chevrons -* Functional: + button and delete functionality still work -* Multiple tutorials: All alignments correct - -### Phase 4: Update Onboarding to Target File Picker - -**Goal:** Move onboarding tour from + button to file picker - -**Tasks:** - -1. \[ ] **Move OnboardingTour to UploadTutorialForm** - * Files: `UploadTutorialForm.tsx` - * Acceptance: OnboardingTour wraps file picker - * Details: - * Import OnboardingTour and ONBOARDING\_FEATURES (already imported in Group.tsx) - * Wrap RiFilePicker with OnboardingTour component - * Use same config: `ONBOARDING_FEATURES.EXPLORE_CUSTOM_TUTORIALS` - * Adjust `anchorPosition` if needed (currently "downLeft" in Group, may need different for file picker) - * Remove `anchorWrapperClassName` or adjust for file picker - * Keep `panelClassName` logic if needed for page opened state - -2. \[ ] **Test onboarding flow** - * Files: Manual testing - * Acceptance: Onboarding targets file picker correctly - * Details: - * Start onboarding flow - * Verify tour highlights file picker - * Verify tour content is correct - * Verify tour completes successfully - -3. \[ ] **Update onboarding anchor position if needed** - * Files: `UploadTutorialForm.tsx` - * Acceptance: Onboarding popover appears in correct position - * Details: - * Test different `anchorPosition` values if needed - * Ensure popover doesn't overlap important UI - * Verify in both empty and non-empty states - -**Deliverables:** - -* OnboardingTour wrapping file picker -* Onboarding flow working correctly -* Proper anchor positioning - -**Testing:** - -* Onboarding: Tour targets file picker -* Visual: Popover appears in correct position -* Functional: Onboarding completes successfully - -### Phase 5: Update Tests and Clean Up - -**Goal:** Update all tests and ensure code quality - -**Tasks:** - -1. \[ ] **Update Navigation tests** - * Files: `Navigation.spec.tsx` (if exists), `EnablementArea.spec.tsx` - * Acceptance: All tests pass - * Details: - * Remove tests that check for WelcomeMyTutorials rendering - * Update tests to check for UploadTutorialForm in empty state - * Remove tests for + button click - * Update tests for form submission - -2. \[ ] **Update Group tests** - * Files: `Group.spec.tsx` (if exists) - * Acceptance: All tests pass - * Details: - * Remove tests for + button rendering - * Remove tests for `handleCreate` function - * Update tests for delete button alignment if needed - -3. \[ ] **Update UploadTutorialForm tests** - * Files: `UploadTutorialForm.spec.tsx` - * Acceptance: All tests pass - * Details: - * Remove tests for Cancel button - * Update tests for form submission (no cancel action) - * Add tests for onboarding tour if needed - -4. \[ ] **Remove WelcomeMyTutorials test references** - * Files: `EnablementArea.spec.tsx` and other test files - * Acceptance: No test references to WelcomeMyTutorials - * Details: - * Remove tests that check for `welcome-my-tutorials` testid - * Update tests that reference WelcomeMyTutorials component - * Ensure no broken test imports - -5. \[ ] **Run linter and fix any issues** - * Files: All modified files - * Acceptance: `yarn lint` passes without errors - * Details: - * Follow project code quality standards - * Remove unused imports - * Fix any TypeScript errors - * Ensure proper formatting - -**Deliverables:** - -* All tests passing -* Code passes linting -* No unused code or imports - -**Testing:** - -* Unit tests: All component tests pass -* Integration: Onboarding flow works -* Linting: No lint errors -* TypeScript: No type errors - -*** - -## 4. Testing Strategy - -### Test Scenarios (from Acceptance Criteria) - -**AC1: Remove welcome tutorial screen** - -* Test Scenario: - * Given: User opens tutorials panel and navigates to "My Tutorials" section - * When: Section is empty and opened - * Then: UploadTutorialForm is shown directly (no WelcomeMyTutorials component) -* Test Type: Unit/Integration -* Test Location: `Navigation.spec.tsx` or `EnablementArea.spec.tsx` - -**AC2: Remove all logic behind welcome tutorial screen** - -* Test Scenario: - * Given: User opens "My Tutorials" section - * When: Section is empty - * Then: No `isCreateOpen` state is used, form shows directly -* Test Type: Unit -* Test Location: `Navigation.spec.tsx` - -**AC3: + icon aligned with chevron** - -* Test Scenario: - * Given: User opens "My Tutorials" section with tutorials loaded - * When: Viewing the section header - * Then: The + button is visible and vertically aligned with the chevron icon -* Test Type: Unit/Visual -* Test Location: `Group.spec.tsx` - -**AC4: Delete icon aligned with accordion chevron** - -* Test Scenario: - * Given: User has custom tutorials uploaded - * When: User views a custom tutorial item with delete button - * Then: The delete icon button is vertically aligned with the chevron icon -* Test Type: Visual/Manual -* Test Location: Manual visual inspection - -**AC5: Cancel button removed** - -* Test Scenario: - * Given: User opens upload form (empty state) - * When: User views the form footer - * Then: Only Submit button is visible (no Cancel button) -* Test Type: Unit/Visual -* Test Location: `UploadTutorialForm.spec.tsx` - -**AC6: Onboarding updated to show around file picker** - -* Test Scenario: - * Given: User starts onboarding flow - * When: User reaches custom tutorials step - * Then: Onboarding tour highlights the file picker (not + button) -* Test Type: Integration/Manual -* Test Location: Manual testing of onboarding flow - -### Edge Cases and Error Scenarios - -1. **Section closed then reopened** - * Scenario: User closes "My Tutorials" section, then reopens it when empty - * Expected Behavior: Form shows directly (no welcome screen) - * Test: Close and reopen section, verify form appears - -2. **Upload tutorial then delete all** - * Scenario: User uploads a tutorial, then deletes all tutorials - * Expected Behavior: Form appears again when section becomes empty - * Test: Upload tutorial, delete it, verify form shows - -3. **Onboarding active during form display** - * Scenario: User is in onboarding flow when viewing empty custom tutorials - * Expected Behavior: Onboarding tour highlights file picker, form is visible - * Test: Complete onboarding with empty state - -4. **Multiple custom tutorials with delete buttons** - * Scenario: User has multiple custom tutorials with multiple delete buttons - * Expected Behavior: All delete buttons align with their respective chevrons - * Test: Upload multiple tutorials, verify all alignments - -5. **Form validation errors** - * Scenario: User tries to submit form without file or link - * Expected Behavior: Submit button disabled, form still visible (no cancel needed) - * Test: Try to submit empty form, verify UI state - -6. **Section with tutorials (non-empty state)** - * Scenario: User has tutorials, opens section - * Expected Behavior: Tutorials list shows, + button visible and aligned, delete buttons align - * Test: Open section with tutorials, verify + button works and all buttons align - -7. **+ button opens form when tutorials exist** - * Scenario: User has tutorials, clicks + button - * Expected Behavior: Form opens, can upload new tutorial - * Test: Click + button, verify form appears, upload works - -### Test Data Needs - -* Test tutorial zip file: Use `tutorial.zip` from JIRA ticket attachment -* Multiple custom tutorials: Create 2-3 test tutorials for alignment verification -* Empty state: Clear custom tutorials to test form display - -*** - -## 5. Risk Assessment and Mitigation - -### Technical Risks - -| Risk | Likelihood | Impact | Mitigation | -|------|-----------|--------|-----------| -| State management changes break other logic | Medium | Medium | Carefully review Navigation.tsx for all `isCreateOpen` usages, ensure no other dependencies | -| Delete icon alignment requires CSS that affects other accordions | Low | Medium | Use specific selectors (`.group-header__delete-btn`), test with multiple accordion items | -| Onboarding anchor position incorrect for file picker | Medium | Low | Test different `anchorPosition` values, adjust as needed | -| Removing welcome screen breaks existing tests | High | Low | Update all tests that reference `welcome-my-tutorials` testid | -| Form always visible might cause UX issues | Low | Medium | Verify with design that always-visible form is correct behavior | - -### Integration Risks - -| Risk | Likelihood | Impact | Mitigation | -|------|-----------|--------|-----------| -| Onboarding tour breaks with new anchor | Medium | Medium | Test onboarding flow thoroughly, verify tour completes successfully | -| Telemetry events affected by removing + button | Low | Low | Check if + button click telemetry needs to be moved or removed | -| Other components depend on WelcomeMyTutorials | Low | Low | Component can remain in codebase, just unused | -| Form submission flow breaks without cancel | Low | Medium | Test form submission thoroughly, ensure error handling works | - -### Timeline Risks - -| Risk | Likelihood | Impact | Mitigation | -|------|-----------|--------|-----------| -| Test updates take longer than expected | Medium | Low | Allocate buffer time for test updates | -| Design clarification needed for exact behavior | Low | Low | Current description is clear, proceed with implementation | -| Onboarding configuration needs updates | Low | Medium | Test onboarding early, adjust configuration if needed | - -### Knowledge Gaps - -* **Exact onboarding anchor position**: May need to test different positions for file picker. Start with "downLeft" and adjust if needed. -* **Behavior when section is closed/reopened**: Verify form appears correctly when section is reopened. Should be straightforward based on current logic. -* **Telemetry for + button**: Check if telemetry event `EXPLORE_PANEL_IMPORT_CLICKED` needs to be moved or if it's no longer needed. - -*** - -## 6. Implementation Notes - -### Code Quality Standards - -* Follow project rules for styled-components migration (prefer layout components over div) -* Use theme spacing values instead of magic numbers -* Use semantic colors from theme -* Ensure all changes pass `yarn lint` -* No console.log statements -* Proper TypeScript types (no `any`) -* Remove unused imports and code - -### PR Strategy - -This can be implemented as a **single PR** since: - -* Changes are related to the same bug fix (custom tutorials UX improvement) -* All changes are in the same area (enablement area components) -* Risk is manageable with thorough testing -* Easier to review as one cohesive change - -**Branch:** `fe/bugfix/RI-7767/custom-tutorials-buttons-alignment` - -**PR Title:** `RI-7767 Remove welcome screen and fix custom tutorials alignment` - -**PR Description:** - -```markdown -# What - -Simplify custom tutorials UX by removing welcome screen and fixing button alignments: -- Remove WelcomeMyTutorials component usage -- Always show UploadTutorialForm when section is empty (no welcome screen, no + button) -- Keep + button when tutorials exist (aligned with chevron) -- Fix + button and delete icon alignment with accordion chevron -- Remove Cancel button from UploadTutorialForm -- Move onboarding tour to target file picker instead of + button - -# Testing - -1. Open tutorials panel → My Tutorials section (empty) -2. Verify form shows directly (no welcome screen, no + button) -3. Upload a tutorial, verify + button appears and aligns with chevron -4. Verify delete button aligns with chevron -5. Click + button when tutorials exist, verify form opens -6. Delete all tutorials, verify form appears again (no + button) -7. Complete onboarding flow, verify it targets file picker -8. Test form submission (no cancel button) - ---- - -Closes #RI-7767 -``` - -### Files to Modify - -1. `redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Navigation/Navigation.tsx` -2. `redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.tsx` -3. `redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/styles.scss` -4. `redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.tsx` -5. `redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/styles.module.scss` -6. `redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.spec.tsx` -7. `redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/EnablementArea.spec.tsx` (if tests need updates) - -### Files to Delete - -1. `redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/WelcomeMyTutorials/WelcomeMyTutorials.tsx` -2. `redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/WelcomeMyTutorials/WelcomeMyTutorials.styles.ts` (or `.scss` if exists) -3. `redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/WelcomeMyTutorials/WelcomeMyTutorials.spec.tsx` -4. `redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/WelcomeMyTutorials/index.ts` - -### Dependencies - -* No new dependencies required -* Uses existing components (OnboardingTour, RiFilePicker, etc.) -* Uses existing onboarding configuration (`ONBOARDING_FEATURES.EXPLORE_CUSTOM_TUTORIALS`) - -*** - -## 7. Success Criteria - -The implementation is successful when: - -1. ✅ Welcome screen is never shown (UploadTutorialForm shows directly when empty) -2. ✅ + button is aligned with accordion chevron icon (visible when tutorials exist) -3. ✅ Cancel button is removed from UploadTutorialForm -4. ✅ Delete icon is vertically aligned with accordion chevron icon -5. ✅ Onboarding tour targets file picker and completes successfully -6. ✅ All existing tests pass (with updates) -7. ✅ Code passes linting -8. ✅ Visual inspection confirms alignment matches design specifications -9. ✅ Form submission and tutorial upload continue to work -10. ✅ + button opens form when tutorials exist -11. ✅ No console errors or warnings - -*** - -## 8. Follow-up Actions - -After implementation: - -1. **Visual QA**: Have designer or QA verify alignment matches design images -2. **Onboarding verification**: Test complete onboarding flow end-to-end -3. **Telemetry check**: Verify telemetry events are still tracked correctly (if + button telemetry needs adjustment) -4. **Documentation**: Update any relevant documentation if behavior changes significantly -5. **Component removal**: WelcomeMyTutorials component has been removed entirely From 51f9c4fd1d8df11ebcf5713608d9c1c25f50cb8a Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Wed, 3 Dec 2025 17:06:06 +0200 Subject: [PATCH 04/15] docs: clarify fe/bugfix prefix for UI-only bug fixes 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 --- .ai/rules/branches.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/.ai/rules/branches.md b/.ai/rules/branches.md index 98e084f7ab..3549524258 100644 --- a/.ai/rules/branches.md +++ b/.ai/rules/branches.md @@ -29,18 +29,20 @@ ric/RI-666/custom-prefix ## Allowed Branch Types (GitHub Actions Enforced) -- `feature/` - New features and refactoring -- `bugfix/` - Bug fixes -- `fe/feature/` - Frontend-only features -- `fe/bugfix/` - Frontend-only bug fixes -- `be/feature/` - Backend-only features -- `be/bugfix/` - Backend-only bug fixes +- `feature/` - New features and refactoring (affects multiple areas) +- `bugfix/` - Bug fixes (affects multiple areas) +- `fe/feature/` - Frontend-only features (only `redisinsight/ui/` folder) +- `fe/bugfix/` - Frontend-only bug fixes (only `redisinsight/ui/` folder) +- `be/feature/` - Backend-only features (only `redisinsight/api/` folder) +- `be/bugfix/` - Backend-only bug fixes (only `redisinsight/api/` folder) - `docs/` - Documentation changes - `test/` - Test-related changes - `e2e/` - End-to-end test changes - `release/` - Release branches - `ric/` - Custom prefix for special cases +**Note:** When a bug fix affects only the `redisinsight/ui/` folder, use `fe/bugfix/` prefix instead of `bugfix/`. + ## Issue References - **Internal**: `RI-XXX` (JIRA ticket) From 3871133de81359e42746e9d4265361a75157084a Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Thu, 4 Dec 2025 10:01:07 +0200 Subject: [PATCH 05/15] fix(ui): darken form border to match accordion border --- .../components/UploadTutorialForm/UploadTutorialForm.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.styles.ts b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.styles.ts index ac4e90ec85..5ed49a3bcc 100644 --- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.styles.ts +++ b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.styles.ts @@ -4,7 +4,7 @@ import { Theme } from 'uiSrc/components/base/theme/types' export const Wrapper = styled.div>` border: 1px solid - ${({ theme }: { theme: Theme }) => theme.semantic.color.border.neutral500}; + ${({ theme }: { theme: Theme }) => theme.semantic.color.border.neutral600}; border-radius: ${({ theme }: { theme: Theme }) => theme.components.card.borderRadius}; padding: ${({ theme }: { theme: Theme }) => theme.core.space.space200}; From 4e20267527503120ce96337896038eba07ef2a44 Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Thu, 4 Dec 2025 10:47:41 +0200 Subject: [PATCH 06/15] test(ui): remove WelcomeMyTutorials tests and update empty state test --- .../EnablementArea/EnablementArea.spec.tsx | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/EnablementArea.spec.tsx b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/EnablementArea.spec.tsx index 0261516629..7f4a9eb9c3 100644 --- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/EnablementArea.spec.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/EnablementArea.spec.tsx @@ -192,7 +192,7 @@ describe('EnablementArea', () => { expect(screen.getByTestId('upload-tutorial-form')).toBeInTheDocument() }) - it('should render open form with tutorials', () => { + it('should render form directly when no tutorials', () => { const customTutorials = [ { ...MOCK_CUSTOM_TUTORIALS_ITEMS[0], children: [] }, ] @@ -202,9 +202,6 @@ describe('EnablementArea', () => { customTutorials={customTutorials} />, ) - expect(screen.getByTestId('welcome-my-tutorials')).toBeInTheDocument() - - fireEvent.click(screen.getByTestId('upload-tutorial-btn')) expect(screen.getByTestId('upload-tutorial-form')).toBeInTheDocument() }) @@ -254,17 +251,6 @@ describe('EnablementArea', () => { ) }) - it('should not render welcome screen if at least one tutorial uploaded', () => { - render( - , - ) - expect( - screen.queryByTestId('welcome-my-tutorials'), - ).not.toBeInTheDocument() - }) }) describe('Telemetry', () => { From 28801eae18dc9d80c8e1e05946d47adfe185b2e5 Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Thu, 4 Dec 2025 10:52:12 +0200 Subject: [PATCH 07/15] fix(ui): hide + button when no custom tutorials exist --- .../enablement-area/EnablementArea/components/Group/Group.tsx | 3 +++ .../EnablementArea/components/Navigation/Navigation.tsx | 2 ++ 2 files changed, 5 insertions(+) diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.tsx b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.tsx index 0ce5fd65e9..72b514b0bd 100644 --- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.tsx @@ -36,6 +36,7 @@ export interface Props { isPageOpened?: boolean isShowActions?: boolean isShowFolder?: boolean + hasChildren?: boolean } const Group = (props: Props) => { @@ -53,6 +54,7 @@ const Group = (props: Props) => { onDelete, isPageOpened, isShowFolder, + hasChildren = true, } = props const { deleting: deletingCustomTutorials } = useSelector( workbenchCustomTutorialsSelector, @@ -87,6 +89,7 @@ const Group = (props: Props) => { const actionsContent = ( <> {actions?.includes(EAItemActions.Create) && + hasChildren && (isGroupOpen || forceState === 'open') && ( { const currentManifestPath = `${manifestPath}/${key}` const isCustomTutorials = id === CUSTOM_TUTORIALS_ID && level === 0 + const hasChildren = (children?.length ?? 0) > 0 switch (type) { case EnablementAreaComponent.Group: @@ -171,6 +172,7 @@ const Navigation = (props: Props) => { onCreate={() => setIsCreateOpen((v) => !v)} onDelete={onDeleteCustomTutorial} isPageOpened={isInternalPageVisible} + hasChildren={hasChildren} forceState={ isCustomTutorials && isCustomTutorialsOnboarding ? 'open' From 63f1d9bd400a58706c95bfac7e3533dffd7cc7a7 Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Thu, 4 Dec 2025 16:14:51 +0200 Subject: [PATCH 08/15] refactor(ui): extract group header button styles to styled component - 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 --- .../DeleteTutorialButton.tsx | 7 +++--- .../components/Group/Group.styles.ts | 23 +++++++++++++++++++ .../EnablementArea/components/Group/Group.tsx | 8 +++---- .../components/Group/styles.scss | 19 --------------- 4 files changed, 31 insertions(+), 26 deletions(-) create mode 100644 redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.styles.ts diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/DeleteTutorialButton/DeleteTutorialButton.tsx b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/DeleteTutorialButton/DeleteTutorialButton.tsx index 09fb5de9df..0899d63888 100644 --- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/DeleteTutorialButton/DeleteTutorialButton.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/DeleteTutorialButton/DeleteTutorialButton.tsx @@ -7,6 +7,8 @@ import { DeleteIcon } from 'uiSrc/components/base/icons' import { Text } from 'uiSrc/components/base/text' import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' import { RiPopover } from 'uiSrc/components/base' + +import * as S from '../Group/Group.styles' import styles from './styles.module.scss' export interface Props { @@ -32,14 +34,13 @@ const DeleteTutorialButton = (props: Props) => { closePopover={() => setIsPopoverDeleteOpen(false)} panelPaddingSize="l" button={ -
-
+ } onClick={(e) => e.stopPropagation()} data-testid={`delete-tutorial-popover-${id}`} diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.styles.ts b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.styles.ts new file mode 100644 index 0000000000..a544022684 --- /dev/null +++ b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.styles.ts @@ -0,0 +1,23 @@ +import React from 'react' +import styled from 'styled-components' +import { Theme } from '@redis-ui/styles' + +export const GroupHeaderButton = styled.div< + React.HTMLAttributes +>` + display: flex; + align-items: center; + justify-content: center; + + width: 24px; + height: 24px; + border-radius: ${({ theme }: { theme: Theme }) => theme.core.space.space050}; + cursor: pointer; + + &:hover { + color: ${({ theme }: { theme: Theme }) => + theme.semantic.color.text.neutral100}; + background-color: ${({ theme }: { theme: Theme }) => + theme.semantic.color.background.neutral200}; + } +` diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.tsx b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.tsx index 72b514b0bd..90e62b5a31 100644 --- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.tsx @@ -20,6 +20,7 @@ import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' import DeleteTutorialButton from '../DeleteTutorialButton' +import * as S from './Group.styles' import './styles.scss' export interface Props { @@ -98,15 +99,14 @@ const Group = (props: Props) => { panelClassName={cx({ hide: isPageOpened })} preventPropagation > - -
+ -
+ )} diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/styles.scss b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/styles.scss index 3c109608ef..a3d3eee8af 100644 --- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/styles.scss +++ b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/styles.scss @@ -25,25 +25,6 @@ white-space: nowrap; text-overflow: ellipsis; - &__btn { - display: flex; - align-items: center; - justify-content: center; - - width: 24px; - height: 24px; - border-radius: 4px; - cursor: pointer; - - &:hover { - color: var(--euiColorPrimaryText); - background-color: var(--euiColorSecondary); - } - } - - .euiIcon { - margin-right: 4px; - } } .divider { From 22902f3db1dfa1d0f09ef62fed3ac1c3057ecb9e Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Thu, 4 Dec 2025 16:33:59 +0200 Subject: [PATCH 09/15] refactor(ui): apply import pattern rule for UploadTutorialForm styled component - Update UploadTutorialForm to use import * as S pattern - Revert Theme import to use uiSrc/components/base/theme/types --- .../EnablementArea/components/Group/Group.styles.ts | 2 +- .../components/UploadTutorialForm/UploadTutorialForm.tsx | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.styles.ts b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.styles.ts index a544022684..961556412e 100644 --- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.styles.ts +++ b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.styles.ts @@ -1,6 +1,6 @@ import React from 'react' import styled from 'styled-components' -import { Theme } from '@redis-ui/styles' +import { Theme } from 'uiSrc/components/base/theme/types' export const GroupHeaderButton = styled.div< React.HTMLAttributes diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.tsx b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.tsx index 34eac5ca3f..3bad76a068 100644 --- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.tsx @@ -17,7 +17,8 @@ import { import { InfoIcon } from 'uiSrc/components/base/icons' import { Text } from 'uiSrc/components/base/text' import CreateTutorialLink from '../CreateTutorialLink' -import { Wrapper } from './UploadTutorialForm.styles' + +import * as S from './UploadTutorialForm.styles' import styles from './styles.module.scss' export interface FormValues { @@ -77,7 +78,7 @@ const UploadTutorialForm = (props: Props) => { } return ( - + Add new tutorial
@@ -137,7 +138,7 @@ const UploadTutorialForm = (props: Props) => {
- + ) } From 3a215013dbf57310e017b7ad3044e8dc40b8ce28 Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Thu, 4 Dec 2025 17:30:26 +0200 Subject: [PATCH 10/15] refactor(ui): create local styles file for DeleteTutorialButton - 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 --- .../DeleteTutorialButton/DeleteTutorialButton.styles.ts | 2 ++ .../components/DeleteTutorialButton/DeleteTutorialButton.tsx | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) create mode 100644 redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/DeleteTutorialButton/DeleteTutorialButton.styles.ts diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/DeleteTutorialButton/DeleteTutorialButton.styles.ts b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/DeleteTutorialButton/DeleteTutorialButton.styles.ts new file mode 100644 index 0000000000..0911af6d5b --- /dev/null +++ b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/DeleteTutorialButton/DeleteTutorialButton.styles.ts @@ -0,0 +1,2 @@ +export { GroupHeaderButton } from '../Group/Group.styles' + diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/DeleteTutorialButton/DeleteTutorialButton.tsx b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/DeleteTutorialButton/DeleteTutorialButton.tsx index 0899d63888..a361a79d6d 100644 --- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/DeleteTutorialButton/DeleteTutorialButton.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/DeleteTutorialButton/DeleteTutorialButton.tsx @@ -8,7 +8,7 @@ import { Text } from 'uiSrc/components/base/text' import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' import { RiPopover } from 'uiSrc/components/base' -import * as S from '../Group/Group.styles' +import * as S from './DeleteTutorialButton.styles' import styles from './styles.module.scss' export interface Props { From 8855fff1888819e6905f3045699a311da54d173c Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Thu, 4 Dec 2025 17:38:00 +0200 Subject: [PATCH 11/15] docs: add rule for import * as S pattern reserved 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 --- .ai/rules/frontend.md | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/.ai/rules/frontend.md b/.ai/rules/frontend.md index 6509479036..c797dcb843 100644 --- a/.ai/rules/frontend.md +++ b/.ai/rules/frontend.md @@ -66,10 +66,13 @@ ComponentName/ Keep all component styles in dedicated .style.ts files and import them with a namespace. +**CRITICAL: `import * as S` is reserved for local styles only** (e.g., from `ComponentName.styles.ts`). When you need to use styled components from external components, create a local styles file that re-exports them. + #### ✅ Good ```typescript -import * as S from './Component.styles' +// ComponentName.tsx +import * as S from './ComponentName.styles' return ( @@ -77,19 +80,19 @@ return ( Content ) + +// ComponentName.styles.ts (when re-exporting from external component) +export { ExternalStyledComponent } from '../ExternalComponent/ExternalComponent.styles' ``` #### ❌ Bad ```typescript -import { Container, Title, Content } from './Component.styles' +// ❌ BAD: Importing styled components directly from external component +import * as S from '../ExternalComponent/ExternalComponent.styles' -return ( - - Title - Content - -) +// ❌ BAD: Named imports instead of namespace +import { Container, Title, Content } from './Component.styles' ``` ### Use Layout Components Instead of div From 388984bc9a88fcae414ad52aeec3c8f12d4b9009 Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Thu, 4 Dec 2025 18:11:16 +0200 Subject: [PATCH 12/15] refactor(ui): move onboarding tour from + button to Add new tutorial 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 --- .../EnablementArea/components/Group/Group.tsx | 31 ++++++------------- .../components/Navigation/Navigation.tsx | 7 +++-- .../UploadTutorialForm/UploadTutorialForm.tsx | 17 ++++++++-- 3 files changed, 29 insertions(+), 26 deletions(-) diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.tsx b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.tsx index 90e62b5a31..9fcbb1ba53 100644 --- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.tsx @@ -10,11 +10,10 @@ import { } from 'uiSrc/telemetry' import { workbenchCustomTutorialsSelector } from 'uiSrc/slices/workbench/wb-custom-tutorials' import { EAItemActions } from 'uiSrc/constants' -import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features' import { RiAccordion } from 'uiSrc/components/base/display/accordion/RiAccordion' import { Col, Row } from 'uiSrc/components/base/layout/flex' -import { RiTooltip, OnboardingTour } from 'uiSrc/components' +import { RiTooltip } from 'uiSrc/components' import { Text } from 'uiSrc/components/base/text' import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' @@ -34,7 +33,6 @@ export interface Props { initialIsOpen?: boolean forceState?: 'open' | 'closed' onToggle?: (isOpen: boolean) => void - isPageOpened?: boolean isShowActions?: boolean isShowFolder?: boolean hasChildren?: boolean @@ -53,7 +51,6 @@ const Group = (props: Props) => { onToggle, onCreate, onDelete, - isPageOpened, isShowFolder, hasChildren = true, } = props @@ -92,23 +89,15 @@ const Group = (props: Props) => { {actions?.includes(EAItemActions.Create) && hasChildren && (isGroupOpen || forceState === 'open') && ( - - - - - - - + + + + + )} {actions?.includes(EAItemActions.Delete) && ( { )} onCreate={() => setIsCreateOpen((v) => !v)} onDelete={onDeleteCustomTutorial} - isPageOpened={isInternalPageVisible} hasChildren={hasChildren} forceState={ isCustomTutorials && isCustomTutorialsOnboarding @@ -184,7 +183,10 @@ const Navigation = (props: Props) => { actions?.includes(EAItemActions.Create) && (children?.length === 0 ? ( - + ) : ( @@ -192,6 +194,7 @@ const Navigation = (props: Props) => { setIsCreateOpen(false)} + isPageOpened={isInternalPageVisible} /> ) ))} diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.tsx b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.tsx index 3bad76a068..49d2704d5c 100644 --- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.tsx @@ -2,11 +2,13 @@ import React, { useState } from 'react' import { useFormik } from 'formik' import { FormikErrors } from 'formik/dist/types' import { isEmpty } from 'lodash' +import cx from 'classnames' import { TextInput } from 'uiSrc/components/base/inputs' import { Nullable } from 'uiSrc/utils' import validationErrors from 'uiSrc/constants/validationErrors' -import { RiFilePicker, RiTooltip } from 'uiSrc/components' +import { RiFilePicker, RiTooltip, OnboardingTour } from 'uiSrc/components' +import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features' import { Spacer } from 'uiSrc/components/base/layout/spacer' import { Row } from 'uiSrc/components/base/layout/flex' @@ -29,10 +31,11 @@ export interface FormValues { export interface Props { onSubmit: (data: FormValues) => void onCancel?: () => void + isPageOpened?: boolean } const UploadTutorialForm = (props: Props) => { - const { onSubmit, onCancel } = props + const { onSubmit, onCancel, isPageOpened } = props const [errors, setErrors] = useState>({}) const initialValues: FormValues = { @@ -79,7 +82,15 @@ const UploadTutorialForm = (props: Props) => { return ( - Add new tutorial + + Add new tutorial +
From cd9219bd8245b4eb2b1cab2be78b13c34d240cc2 Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Thu, 4 Dec 2025 18:15:53 +0200 Subject: [PATCH 13/15] refactor(ui): use theme spacing for GroupHeaderButton dimensions - Replace hardcoded 24px width/height with theme.core.space.space300 --- .../EnablementArea/components/Group/Group.styles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.styles.ts b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.styles.ts index 961556412e..295883346f 100644 --- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.styles.ts +++ b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.styles.ts @@ -9,8 +9,8 @@ export const GroupHeaderButton = styled.div< align-items: center; justify-content: center; - width: 24px; - height: 24px; + width: ${({ theme }: { theme: Theme }) => theme.core.space.space300}; + height: ${({ theme }: { theme: Theme }) => theme.core.space.space300}; border-radius: ${({ theme }: { theme: Theme }) => theme.core.space.space050}; cursor: pointer; From c0c7f2c12cc33cf6d14760b8430c6dc50d7e4544 Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Thu, 4 Dec 2025 18:19:25 +0200 Subject: [PATCH 14/15] fix(ui): auto-open form when onboarding tour is triggered - 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 --- .../components/Navigation/Navigation.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Navigation/Navigation.tsx b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Navigation/Navigation.tsx index 06c1ea0c1e..5db92e87e1 100644 --- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Navigation/Navigation.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Navigation/Navigation.tsx @@ -89,6 +89,17 @@ const Navigation = (props: Props) => { [], ) + // Open form when onboarding is triggered and form is not visible + useEffect(() => { + if ( + isCustomTutorialsOnboarding && + customTutorials?.length > 0 && + !isCreateOpen + ) { + setIsCreateOpen(true) + } + }, [isCustomTutorialsOnboarding, customTutorials?.length, isCreateOpen]) + const submitCreate = ({ file, link }: FormValues) => { const formData = new FormData() From 526618baa4537e81305ef953e5b7b27e0edc2557 Mon Sep 17 00:00:00 2001 From: Valentin Kirilov Date: Fri, 5 Dec 2025 09:13:35 +0200 Subject: [PATCH 15/15] fix(ui): prevent event propagation in DeleteTutorialButton click handler - Prevent event propagation when the delete button is clicked, because it causes the section element behind it to expand/collapse --- .../components/DeleteTutorialButton/DeleteTutorialButton.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/DeleteTutorialButton/DeleteTutorialButton.tsx b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/DeleteTutorialButton/DeleteTutorialButton.tsx index a361a79d6d..8fb780b4b9 100644 --- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/DeleteTutorialButton/DeleteTutorialButton.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/DeleteTutorialButton/DeleteTutorialButton.tsx @@ -22,7 +22,10 @@ const DeleteTutorialButton = (props: Props) => { const { id, label, onDelete, isLoading } = props const [isPopoverDeleteOpen, setIsPopoverDeleteOpen] = useState(false) - const handleClickDelete = () => { + const handleClickDelete = ( + e: React.MouseEvent, + ) => { + e.stopPropagation() setIsPopoverDeleteOpen((v) => !v) }