fix: Removing the global add in segmented header and updating the UI for new query tab #37757
Conversation
WalkthroughThe changes in this pull request involve various modifications primarily related to styling adjustments across multiple components. Key changes include the addition of CSS properties to prevent shrinking in flex containers, removal of specific padding rules, and alterations to component imports and rendering logic. The updates affect the layout and visual presentation of elements without altering the core functionality or logic of the components. Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
Documentation and Community
|
github-actions
bot
added
IDE Pod
ankitakinger
added
ok-to-test
github-actions
bot
added
IDE Pod
|
/build-deploy-preview skip-tests=true |
|
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/12033718824. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (1)
app/client/src/IDE/Components/FileTab/styles.tsx (1)
41-45: Consider documenting the special tab behavior.Since these tabs have special handling, it would be helpful to add a comment explaining why they need
flex-shrink: 0.+ // Prevent new query and JS tabs from shrinking to maintain consistent width &.t--ide-tab-new_query, &.t--ide-tab-new_js { flex-shrink: 0; }
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (15)
app/client/src/IDE/Components/FileTab/FileTab.tsx(1 hunks)app/client/src/IDE/Components/FileTab/styles.tsx(1 hunks)app/client/src/IDE/Components/HeaderDropdown.tsx(0 hunks)app/client/src/ce/entities/FeatureFlag.ts(0 hunks)app/client/src/components/editorComponents/PartialImportExport/PartialExportModal/unitTestUtils.ts(0 hunks)app/client/src/pages/Editor/Explorer/Entity/index.tsx(1 hunks)app/client/src/pages/Editor/Explorer/Widgets/WidgetIcon.tsx(1 hunks)app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx(0 hunks)app/client/src/pages/Editor/IDE/EditorPane/Query/Explorer.tsx(0 hunks)app/client/src/pages/Editor/IDE/EditorPane/UI/List.tsx(0 hunks)app/client/src/pages/Editor/IDE/EditorPane/components/SegmentedHeader.tsx(1 hunks)app/client/src/pages/Editor/IDE/EditorTabs/AddTab.tsx(2 hunks)app/client/src/pages/Editor/IDE/EditorTabs/List.tsx(0 hunks)app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/old/JSFunctionRun.tsx(1 hunks)app/client/src/pages/Editor/QueryEditor/DatasourceSelector.tsx(1 hunks)
🔥 Files not summarized due to errors (1)
- app/client/src/components/editorComponents/PartialImportExport/PartialExportModal/unitTestUtils.ts: Error: Server error: no LLM provider could handle the message
💤 Files with no reviewable changes (7)
- app/client/src/IDE/Components/HeaderDropdown.tsx
- app/client/src/ce/entities/FeatureFlag.ts
- app/client/src/components/editorComponents/PartialImportExport/PartialExportModal/unitTestUtils.ts
- app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx
- app/client/src/pages/Editor/IDE/EditorPane/Query/Explorer.tsx
- app/client/src/pages/Editor/IDE/EditorPane/UI/List.tsx
- app/client/src/pages/Editor/IDE/EditorTabs/List.tsx
✅ Files skipped from review due to trivial changes (3)
- app/client/src/pages/Editor/Explorer/Entity/index.tsx
- app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/old/JSFunctionRun.tsx
- app/client/src/pages/Editor/QueryEditor/DatasourceSelector.tsx
🔇 Additional comments (8)
app/client/src/pages/Editor/Explorer/Widgets/WidgetIcon.tsx (1)
16-16: Verify SVG content sanitization.
Ensure that the SVG content from useWidgetConfig is properly sanitized to prevent XSS attacks.
✅ Verification successful
SVG content is loaded from trusted static assets and does not require additional sanitization.
The SVG content is obtained through the useWidgetConfig hook which retrieves pre-defined SVG paths from the WidgetFactory configuration. These SVGs are static assets served from the application's own domain and are not user-provided content. The SVG paths are defined at build time as part of the widget configurations and cannot be manipulated at runtime.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check how SVG content is sanitized in useWidgetConfig
ast-grep --pattern 'function useWidgetConfig($$$) {
$$$
}'
# Look for any SVG sanitization utilities
rg -l "sanitize.*svg|svg.*sanitize" --type ts
Length of output: 500
Script:
#!/bin/bash
# Check how SVG content is obtained and used
ast-grep --pattern 'const svg = useWidgetConfig($$$)'
# Check the WidgetFactory implementation for SVG handling
ast-grep --pattern 'class WidgetFactory {
$$$
getConfig($$$) {
$$$
}
$$$
}'
# Look for widget config definitions
rg -l "widgetConfig|WidgetConfig" --type ts
# Search for any SVG-related security measures
rg "svg.*security|security.*svg|xss.*svg" --type ts
Length of output: 53987
Script:
#!/bin/bash
# Check how SVG content is defined in widget configs
ast-grep --pattern 'iconSVG = $_'
# Look for widget config implementations
rg -A 5 "getConfig\(\) {" --type ts
# Check for any SVG-related utilities or helper functions
rg -l "svg.*util|util.*svg" --type ts
Length of output: 142100
Script:
#!/bin/bash
# Check how SVG content is obtained and used in the widget config
rg -A 5 "iconSVG" --type ts
# Look for any SVG sanitization or security utilities
rg -A 3 "sanitize|xss|security.*svg" --type ts
# Check the widget factory implementation for SVG handling
rg -A 3 "getConfig.*iconSVG" --type ts
Length of output: 124856
app/client/src/pages/Editor/IDE/EditorTabs/AddTab.tsx (2)
9-9: LGTM: Clean import of design system component
38-38: LGTM: Good use of typography component
Using the design system's Text component ensures consistent typography styling across the application.
app/client/src/IDE/Components/FileTab/FileTab.tsx (2)
28-28: LGTM: Clean identifier implementation
The centralized identifier generation improves maintainability and testing consistency.
32-33: Verify CSS rules for specific tab identifiers
The className implementation looks good, but let's verify the corresponding CSS rules mentioned in the AI summary.
✅ Verification successful
CSS rules for tab identifiers are properly implemented
The CSS rules for the specific tab identifiers (t--ide-tab-new_query and t--ide-tab-new_js) are correctly defined in styles.tsx with the required flex-shrink: 0 property.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify the CSS rules for the new tab identifiers
# Look for flex-shrink rules mentioned in the AI summary
# Search for the CSS rules in the styles file
rg "t--ide-tab-(new_query|new_js)" "app/client/src/IDE/Components/FileTab/styles.tsx"
# Also check for any other potential style definitions
rg "flex-shrink.*t--ide-tab"
Length of output: 166
Script:
#!/bin/bash
# Let's check the complete style definition for these tab identifiers
rg -A 5 "t--ide-tab-(new_query|new_js)" "app/client/src/IDE/Components/FileTab/styles.tsx"
# Also check for any global styles that might affect these tabs
rg -g "*.{tsx,css,scss}" "\.t--ide-tab-"
Length of output: 400
app/client/src/pages/Editor/IDE/EditorPane/components/SegmentedHeader.tsx (2)
1-6: Clean and focused import statements
The removal of unused imports related to the global add functionality has resulted in a cleaner and more maintainable component.
Line range hint 14-54: Verify the removal of global add functionality
The component has been successfully streamlined to focus on navigation. Let's verify there are no remaining references to the removed functionality in related components.
✅ Verification successful
Global add functionality has been properly removed
The verification shows that:
globalAddURLonly exists as a route builder function- No components are importing or using the global add functionality
SegmentedHeaderis cleanly integrated without any add-related handlers- Remaining add-related code is for unrelated features (table rows, pages, widgets)
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for any remaining references to global add functionality
# that might need cleanup
# Search for any remaining references to globalAddURL
rg "globalAddURL"
# Search for any remaining feature flag references
rg "release_global_add_pane_enabled"
# Search for any remaining button references in related components
rg -g "*.tsx" "onAddButtonClick"
Length of output: 188
Script:
#!/bin/bash
# Let's check for any components that might be importing or using the globalAddURL
rg -A 3 "import.*globalAddURL"
# Check for any references to global add in the SegmentedHeader's parent components
rg -g "*.tsx" "SegmentedHeader"
# Search for any remaining add-related UI elements in the editor pane
ast-grep --pattern 'Button { $$$ label: "Add" $$$ }'
# Check for any remaining add-related handlers in the editor components
rg -g "*.tsx" "handleAdd|addEntity|addButton"
Length of output: 3346
app/client/src/IDE/Components/FileTab/styles.tsx (1)
41-45: LGTM! The flex-shrink implementation looks correct.
The addition of flex-shrink: 0 for new query and JS tabs will prevent unwanted shrinking, maintaining consistent tab widths.
Let's verify the tab identifiers are used consistently:
✅ Verification successful
The tab class implementation and flex-shrink styling are correctly implemented
The test files confirm the usage of these tab identifiers, and the flex-shrink property is consistently applied in the styles file. The implementation aligns with the expected behavior for new query and JS tabs.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify the usage of tab identifiers across the codebase
# Expected: Find corresponding React components that use these class names
# Search for the tab identifiers usage
rg -l "t--ide-tab-new_(query|js)"
# Search for related tab rendering logic
ast-grep --pattern 'className={`$_t--ide-tab-new_$_`}'
Length of output: 274
Script:
#!/bin/bash
# Let's check the actual implementation of these classes in test files
rg -A 5 "t--ide-tab-new_(query|js)" app/client/src/pages/Editor/IDE/EditorTabs/Editortabs.test.tsx app/client/src/pages/Editor/IDE/EditorPane/Query/QueryRender.test.tsx
# Also check if there are any related tab components that might need similar styling
ast-grep --pattern 'const $_Tab = styled$_`
$$$
`'
Length of output: 6405
Script:
#!/bin/bash
# Let's check the actual component implementation to verify the tab class usage
rg -A 10 "className.*t--ide-tab-new_(query|js)" --type typescript --type tsx
# Also check if there are any other tab styles that might need similar treatment
rg "flex-shrink:" app/client/src/IDE/Components/FileTab/styles.tsx
Length of output: 218
|
Deploy-Preview-URL: https://ce-37757.dp.appsmith.com |
…for new query tab (appsmithorg#37757) ## Description - Removing the global add in segmented header - Updating the UI for new query tab - Fixing the CSS for Query Header in side by side mode to show context menu which is hidden today - Fixing the spacing between the icon and the name of an entity, as this is currently broken on EE for workflows Fixes [appsmithorg#37610](appsmithorg#37610) [appsmithorg#37691](appsmithorg#37691) ## Automation /ok-to-test tags="@tag.Sanity, @tag.IDE" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/12043907148> > Commit: 0896ffb > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=12043907148&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.Sanity, @tag.IDE` > Spec: > <hr>Wed, 27 Nov 2024 05:28:37 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes - **New Features** - Enhanced styling for dropdown selectors in the DatasourceSelector and JSFunctionRun components for improved adaptability. - Introduced a new `Text` component in the AddTab for better content rendering. - **Bug Fixes** - Adjusted padding for the `.t--entity-name` class across multiple components to improve layout consistency. - **Refactor** - Simplified the rendering logic in the WidgetIcon component by removing unnecessary wrappers. - **Chores** - Removed deprecated feature flags and associated functionality from the SegmentedHeader component. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
Description
Fixes #37610 #37691
Automation
/ok-to-test tags="@tag.Sanity, @tag.IDE"
🔍 Cypress test results
Tip
🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/12043907148
Commit: 0896ffb
Cypress dashboard.
Tags:
@tag.Sanity, @tag.IDESpec:
Wed, 27 Nov 2024 05:28:37 UTC
Communication
Should the DevRel and Marketing teams inform users about this change?
Summary by CodeRabbit
Release Notes
New Features
Textcomponent in the AddTab for better content rendering.Bug Fixes
.t--entity-nameclass across multiple components to improve layout consistency.Refactor
Chores