implement custom folders tree for expanded options page #4396

OleksandrDragun · 2025-06-09T16:31:26Z

PR Checklist

Visuals

Empty state

Summary by CodeRabbit

New Features
- Introduced an interactive folder tree for browsing and managing test case folders, including expandable/collapsible folders and test counts.
- Added empty state views for both the main test case library and individual folders, with actions to create or import test cases.
- Provided action buttons for exporting, importing, and creating test cases, as well as toggling between empty and expanded views.
- Implemented localized UI messages for improved internationalization support.
Style
- Added new styles for the expanded options panel, folder tree, and updated layout for actions and toggles.
Chores
- Updated ESLint configuration to disable specific accessibility rules for TypeScript files.

coderabbitai · 2025-06-09T16:31:34Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

This update introduces a new folder-based navigation and empty state experience to the Test Case Library page. New React components, mock data, and SCSS styles were added for folder trees, empty states, and expanded options. The main page now conditionally renders either an empty state or the expanded folder view, controlled by a toggle.

Changes

File(s)	Change Summary
`testCaseLibraryPage.jsx`, `testCaseLibraryPage.scss`	Added toggle and conditional rendering for empty/expanded states; new styles for actions and toggle placement.
`expandedOptions/expandedOptions.tsx`, `expandedOptions/index.ts`, `expandedOptions.scss`	Introduced the `ExpandedOptions` component, export file, and related styles for folder-based navigation UI.
`expandedOptions/mockData.js`	Added mock folder data for the folder tree structure.
`expandedOptions/folder/folder.tsx`, `expandedOptions/folder/index.ts`, `folder.scss`	Added recursive `Folder` component, export file, and styles for hierarchical folder tree UI.
`emptyState/folder/folderEmptyState.tsx`, `emptyState/folder/index.ts`	Added `FolderEmptyState` component and export for displaying empty folder messages and actions.
`emptyState/mainPage/mainPageEmptyState.tsx`, `mainPage/index.ts`	Added `MainPageEmptyState` component and export for the main empty state with benefit list and actions.
`emptyState/messages.ts`	Added new localized messages for folder empty state and add test case action.
`commonMessages.js`	Added localized message definitions for the Test Case Library page.
`common/constants/localization.js`	Added `IMPORT` and `EXPORT` localization keys.
`.eslintrc`	Disabled two accessibility rules for TypeScript/TSX files in ESLint config.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant TestCaseLibraryPage
    participant ExpandedOptions
    participant Folder
    participant MainPageEmptyState
    participant FolderEmptyState

    User->>TestCaseLibraryPage: Load page
    TestCaseLibraryPage->>User: Show Toggle (Empty/Expanded)
    User->>TestCaseLibraryPage: Toggle Expanded View
    alt Expanded View
        TestCaseLibraryPage->>ExpandedOptions: Render
        ExpandedOptions->>User: Show Folder Sidebar and Content
        User->>ExpandedOptions: Select Folder
        ExpandedOptions->>Folder: Set Active Folder
        alt Folder is Empty
            ExpandedOptions->>FolderEmptyState: Render Empty Folder UI
        else Folder has Tests
            ExpandedOptions->>User: Show Test Cases Table (placeholder)
        end
    else Empty State
        TestCaseLibraryPage->>MainPageEmptyState: Render
        MainPageEmptyState->>User: Show Empty State UI
    end

Suggested reviewers

OleksandrDragun
ViktorSoroka07

Poem

In the warren of folders, a rabbit peeks in,
New branches and leaves for test cases begin.
Empty states sparkle, toggles appear,
With buttons and icons, the purpose is clear.
Hop, hop, organize, let the tests multiply—
The library grows as the carrots pile high! 🥕

✨ Finishing Touches

🧪 Generate Unit Tests

Create PR with Unit Tests
Commit Unit Tests in branch tcl-expanded-options
Post Copyable Unit Tests in Comment

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

‼️ IMPORTANT
Auto-reply has been disabled for this repository in the CodeRabbit settings. The CodeRabbit bot will not respond to your replies unless it is explicitly tagged.

Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai auto-generate unit tests to generate unit tests for this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

Guria · 2025-06-09T19:13:12Z

@OleksandrDragun should current selection in tree be reflected in address bar?

app/src/pages/inside/testCaseLibraryPage/expandedOptions/expandedOptions.scss

app/src/pages/inside/testCaseLibraryPage/expandedOptions/expandedOptions.jsx

app/src/pages/inside/testCaseLibraryPage/emptyState/emptyState.jsx

app/src/pages/inside/testCaseLibraryPage/emptyState/messages.js

app/src/pages/inside/testCaseLibraryPage/expandedOptions/expandedOptions.jsx

app/src/pages/inside/testCaseLibraryPage/expandedOptions/folder/folder.jsx

app/src/pages/inside/testCaseLibraryPage/expandedOptions/mockData.js

Guria · 2025-06-09T22:35:34Z

@coderabbitai full review

coderabbitai · 2025-06-09T22:35:39Z

✅ Actions performed

Full review triggered.

coderabbitai

Actionable comments posted: 11

🔭 Outside diff range comments (1)

app/src/pages/inside/testCaseLibraryPage/emptyState/emptyState.jsx (1)
54-59: ⚠️ Potential issue

Ensure unique dataAutomationId for import button.
The importTestCases button reuses the createTestCaseButton ID, which may break automation scripts. It should be distinct.

Apply this diff:
- {
-   name: formatMessage(parentMessages.importTestCases),
-   dataAutomationId: 'createTestCaseButton',
+ {
+   name: formatMessage(parentMessages.importTestCases),
+   dataAutomationId: 'importTestCasesButton',
    variant: 'ghost',
    icon: ImportIcon,
    isCompact: true,
  },

♻️ Duplicate comments (4)

app/src/pages/inside/testCaseLibraryPage/expandedOptions/expandedOptions.scss (1)

17-17: Address previous review feedback on CSS structure.

The BEM naming and deep nesting issues raised in previous reviews are still present. Consider flattening the class structure and following proper BEM conventions for better maintainability.

Also applies to: 27-27

app/src/pages/inside/testCaseLibraryPage/expandedOptions/mockData.js (1)

1-305: Consider adding unique identifiers for better tree navigation.

The current implementation uses folder names as identifiers, but this approach has limitations for URL synchronization and state management as mentioned in previous reviews. Consider adding unique IDs to support better navigation and selection tracking.

app/src/pages/inside/testCaseLibraryPage/expandedOptions/expandedOptions.jsx (1)

39-40: Implement path-based state management for better tree navigation.

As suggested in previous reviews, storing active path instead of folder name would eliminate sync risks and enable better URL integration. The current approach using folder names could lead to issues with duplicate folder names across different tree levels.

app/src/pages/inside/testCaseLibraryPage/expandedOptions/folder/folder.jsx (1)

28-77: 🛠️ Refactor suggestion

Address accessibility and keyboard navigation concerns.

As raised in previous reviews, the recursive rendering approach may create challenges with keyboard interactions and accessibility. The current aria-selected logic uses isOpen instead of active state, which is semantically incorrect.

Consider implementing:

Proper keyboard navigation (arrow keys, Enter, Space)

Correct aria-selected based on active folder, not open state

Focus management for tree navigation

🧰 Tools

🪛 GitHub Actions: Build

[warning] 37-37: React Hook useCallback has missing dependencies: 'setActiveFolder' and 'setIsEmptyFolder'. Either include them or remove the dependency array. If 'setActiveFolder' changes too often, find the parent component that defines it and wrap that definition in useCallback (react-hooks/exhaustive-deps)

🧹 Nitpick comments (2)

app/src/pages/inside/testCaseLibraryPage/testCaseLibraryPage.jsx (2)
62-62: Add meaningful automation IDs for testing.

Empty data-automation-id attributes reduce testability. Consider adding descriptive IDs for these interactive elements.
-                data-automation-id=""
+                data-automation-id="toggle-empty-state"
-                  <Button variant="ghost" data-automation-id="">
+                  <Button variant="ghost" data-automation-id="create-test-case-btn">
Also applies to: 83-83

71-71: Optimize SVG parsing performance.

Parsing SVGs in the render method creates new objects on every render. Consider moving the parsed SVGs to constants or using direct imports.
+const EXPORT_ICON = Parser(ExportIcon);
+const IMPORT_ICON = Parser(ImportIcon);
+
 export const TestCaseLibraryPage = () => {
   // ... rest of component
-                    icon={Parser(ExportIcon)}
+                    icon={EXPORT_ICON}
-                    icon={Parser(ImportIcon)}
+                    icon={IMPORT_ICON}
Also applies to: 78-78

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d50dfe7 and 684c96a.

📒 Files selected for processing (14)

app/src/common/constants/eventsObjectTypes.js (1 hunks)
app/src/common/constants/localization/eventsLocalization.js (2 hunks)
app/src/pages/inside/testCaseLibraryPage/emptyState/emptyState.jsx (3 hunks)
app/src/pages/inside/testCaseLibraryPage/emptyState/messages.js (0 hunks)
app/src/pages/inside/testCaseLibraryPage/expandedOptions/expandedOptions.jsx (1 hunks)
app/src/pages/inside/testCaseLibraryPage/expandedOptions/expandedOptions.scss (1 hunks)
app/src/pages/inside/testCaseLibraryPage/expandedOptions/folder/folder.jsx (1 hunks)
app/src/pages/inside/testCaseLibraryPage/expandedOptions/folder/folder.scss (1 hunks)
app/src/pages/inside/testCaseLibraryPage/expandedOptions/folder/index.js (1 hunks)
app/src/pages/inside/testCaseLibraryPage/expandedOptions/index.js (1 hunks)
app/src/pages/inside/testCaseLibraryPage/expandedOptions/mockData.js (1 hunks)
app/src/pages/inside/testCaseLibraryPage/messages.js (1 hunks)
app/src/pages/inside/testCaseLibraryPage/testCaseLibraryPage.jsx (2 hunks)
app/src/pages/inside/testCaseLibraryPage/testCaseLibraryPage.scss (1 hunks)

💤 Files with no reviewable changes (1)

app/src/pages/inside/testCaseLibraryPage/emptyState/messages.js

🧰 Additional context used

🧬 Code Graph Analysis (1)

app/src/common/constants/localization/eventsLocalization.js (1)

app/src/common/constants/eventsObjectTypes.js (2)

EXPORT (22-22)

EXPORT (22-22)

🪛 GitHub Actions: Build

app/src/pages/inside/testCaseLibraryPage/expandedOptions/folder/folder.scss

[error] 29-29: Unexpected hex color "#d9d9d9" (color-no-hex)

[error] 44-44: Unexpected hex color "#d9d9d9" (color-no-hex)

app/src/pages/inside/testCaseLibraryPage/expandedOptions/folder/folder.jsx

[warning] 37-37: React Hook useCallback has missing dependencies: 'setActiveFolder' and 'setIsEmptyFolder'. Either include them or remove the dependency array. If 'setActiveFolder' changes too often, find the parent component that defines it and wrap that definition in useCallback (react-hooks/exhaustive-deps)

🔇 Additional comments (11)

app/src/common/constants/eventsObjectTypes.js (1)

22-22: Approve addition of EXPORT constant.
The new EXPORT event object type aligns with the existing pattern and supports the export functionality.

app/src/common/constants/localization/eventsLocalization.js (1)

24-24: Approve import of EXPORT constant.
Importing EXPORT from eventsObjectTypes ensures the new action message can reference the correct event type.

app/src/pages/inside/testCaseLibraryPage/expandedOptions/index.js (1)

17-17: Approve re-export of ExpandedOptions.
This centralized export file simplifies imports and aligns with the modular folder structure.

app/src/pages/inside/testCaseLibraryPage/expandedOptions/folder/index.js (1)

17-17: Approve re-export of Folder component.
Providing a single entry point for the Folder component improves maintainability.
app/src/pages/inside/testCaseLibraryPage/emptyState/emptyState.jsx (2)

27-27: Approve import of parent messages.
Pulling in parentMessages centralizes localization strings and ensures consistency across the TestCaseLibrary page.

43-44:
✅ Verification successful

Verify use of parentMessages.emptyPageTitle.
Ensure that emptyPageTitle is defined in the parent messages.js and matches your UI requirements.

You can grep for its definition:

🏁 Script executed:
rg 'emptyPageTitle' -n app/src/pages/inside/testCaseLibraryPage/messages.js
Length of output: 98
Confirmed definition of emptyPageTitle
emptyPageTitle is defined in app/src/pages/inside/testCaseLibraryPage/messages.js at line 24. No further action required.
app/src/pages/inside/testCaseLibraryPage/testCaseLibraryPage.scss (1)

54-72: LGTM! Clean CSS structure following established patterns.

The new modifier class and positioned elements follow the existing code style and use appropriate CSS variables for theming consistency.

app/src/pages/inside/testCaseLibraryPage/messages.js (1)

24-56: LGTM! Proper internationalization structure.

All new message entries follow the correct react-intl pattern with unique IDs and appropriate default messages.

app/src/pages/inside/testCaseLibraryPage/testCaseLibraryPage.jsx (1)

42-45: Address temporary code before merging.

The comment indicates this toggle is temporary for BA and designer review. Ensure this temporary code is removed or properly implemented before the final merge.

app/src/pages/inside/testCaseLibraryPage/expandedOptions/folder/folder.scss (1)

17-97: LGTM! Well-structured folder tree styles.

The CSS effectively creates a hierarchical folder tree with proper visual connectors and interactive states. The structure supports the folder navigation functionality well.

🧰 Tools

🪛 GitHub Actions: Build

[error] 29-29: Unexpected hex color "#d9d9d9" (color-no-hex)

[error] 44-44: Unexpected hex color "#d9d9d9" (color-no-hex)

app/src/pages/inside/testCaseLibraryPage/expandedOptions/expandedOptions.scss (1)

18-129: Well-structured layout for expanded options UI.

The flex-based layout effectively creates a sidebar-content structure with appropriate spacing and visual hierarchy for the test case library interface.

app/src/common/constants/localization/eventsLocalization.js

app/src/pages/inside/testCaseLibraryPage/testCaseLibraryPage.jsx