fix: anvil layout and some cleanup #33442
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
WalkthroughWalkthroughThe recent updates primarily focus on simplifying and streamlining the layout components within the Anvil layout system. Key changes include the removal of several properties from the Changes
Recent Review DetailsConfiguration used: CodeRabbit UI Files selected for processing (3)
Files skipped from review as they are similar to previous changes (2)
Additional comments not posted (5)
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 as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Out of diff range and nitpick comments (1)
app/client/src/layoutSystems/anvil/utils/anvilTypes.ts (1)
[!TIP]
Codebase VerificationThe verification script has revealed numerous instances of the
renderModeproperty still being used throughout the codebase. This indicates that the removal of therenderModeproperty from theLayoutComponentPropsinterface might not be complete or could lead to issues if not addressed properly.Locations where
renderModeis still used:
app/client/test/factories/Widgets/CanvasFactory.tsapp/client/test/factories/Widgets/FilepickerFactory.tsapp/client/test/factories/Widgets/ListFactory.tsapp/client/test/factories/Widgets/VideoFactory.tsapp/client/test/factories/Widgets/TabsFactory.tsapp/client/test/factories/Widgets/SwitchFactory.tsapp/client/test/factories/Widgets/SkeletonFactory.tsapp/client/test/factories/Widgets/RichTextFactory.tsapp/client/test/factories/Widgets/RadiogroupFactory.tsapp/client/test/factories/Widgets/MapFactory.tsapp/client/test/factories/Widgets/ModalFactory.tsapp/client/test/factories/Widgets/TextFactory.tsapp/client/test/factories/Widgets/IconFactory.tsapp/client/test/factories/Widgets/FormFactory.tsapp/client/test/factories/Widgets/FormButtonFactory.tsapp/client/test/factories/Widgets/DropdownFactory.tsapp/client/test/factories/Widgets/DividerFactory.tsapp/client/test/factories/Widgets/ImageFactory.tsapp/client/test/factories/Widgets/ContainerFactory.tsapp/client/test/factories/Widgets/CheckboxFactory.tsapp/client/test/factories/Widgets/ChartFactory.tsapp/client/test/factories/Widgets/ButtonFactory.tsapp/client/test/factories/Widgets/DatepickerFactory.tsapp/client/test/factories/WidgetFactoryUtils.tsapp/client/src/sagas/WidgetSelectUtils.test.tsapp/client/src/sagas/WidgetOperationUtils.tsapp/client/src/sagas/WidgetBlueprintSagas.test.tsapp/client/src/sagas/WidgetOperationUtils.test.tsapp/client/src/sagas/WidgetOperationSagas.tsxapp/client/src/sagas/WidgetAdditionSagas.tsapp/client/src/widgets/withWidgetProps.tsxapp/client/src/widgets/ListWidgetV2/testData.tsapp/client/src/widgets/ListWidgetV2/widget/index.tsxapp/client/src/widgets/wds/WDSTableWidget/widget/reactTableUtils/getColumnsPureFn.tsxapp/client/src/widgets/wds/WDSTableWidget/widget/index.tsxapp/client/src/widgets/wds/WDSButtonWidget/component/Container.tsxapp/client/src/widgets/useDropdown.tsxapp/client/src/widgets/ListWidgetV2/MetaWidgetGenerator.tsapp/client/src/widgets/ListWidgetV2/MetaWidgetGenerator.test.tsapp/client/src/widgets/DropdownWidget/widget/index.test.tsxapp/client/src/widgets/WidgetUtils.test.tsapp/client/src/widgets/anvil/ZoneWidget/widget/config/anvilConfig.tsapp/client/src/widgets/TableWidgetV2/widget/reactTableUtils/getColumnsPureFn.tsxapp/client/src/widgets/TableWidgetV2/widget/index.tsxapp/client/src/widgets/TableWidget/widget/propertyUtils.test.tsapp/client/src/widgets/TableWidget/widget/index.tsxapp/client/src/widgets/DividerWidget/widget/index.test.tsxapp/client/src/widgets/SingleSelectTreeWidget/widget/index.tsxapp/client/src/widgets/SingleSelectTreeWidget/component/index.tsxapp/client/src/widgets/MultiSelectWidgetV2/component/index.tsxapp/client/src/widgets/MultiSelectWidgetV2/widget/index.tsxapp/client/src/widgets/MultiSelectTreeWidget/widget/index.tsxapp/client/src/widgets/ModalWidget/widget/index.tsxapp/client/src/widgets/ModalWidget/component/index.tsxapp/client/src/widgets/MultiSelectTreeWidget/component/index.tsxapp/client/src/widgets/MenuButtonWidget/widget/index.tsxapp/client/src/widgets/MenuButtonWidget/constants.tsapp/client/src/widgets/MenuButtonWidget/component/index.tsxapp/client/src/widgets/JSONFormWidget/widget/index.tsxapp/client/src/widgets/ListWidget/widget/index.tsxapp/client/src/widgets/ListWidget/widget/index.test.tsxapp/client/src/widgets/JSONFormWidget/fields/useRegisterFieldValidity.test.tsxapp/client/src/widgets/JSONFormWidget/fields/PhoneInputField.tsxapp/client/src/widgets/JSONFormWidget/fields/CurrencyInputField.tsxapp/client/src/widgets/JSONFormWidget/fields/ArrayField.test.tsxapp/client/src/widgets/JSONFormWidget/FormContext.tsxapp/client/src/widgets/JSONFormWidget/component/index.tsxapp/client/src/widgets/ImageWidget/widget/index.tsxapp/client/src/widgets/InputWidget/widget/index.tsxapp/client/src/widgets/InputWidget/widget/index.test.tsxapp/client/src/widgets/IframeWidget/widget/index.tsxapp/client/src/widgets/IframeWidget/component/index.tsxapp/client/src/widgets/IconButtonWidget/widget/index.tsxapp/client/src/widgets/IconButtonWidget/component/index.tsxapp/client/src/widgets/CustomWidget/widget/index.tsxapp/client/src/widgets/CustomWidget/component/index.tsxapp/client/src/widgets/ChartWidget/widget/index.test.tsapp/client/src/widgets/ChartWidget/widget/SyntaxErrorsEvaluation.test.tsapp/client/src/widgets/ButtonGroupWidget/widget/index.tsxapp/client/src/workers/common/DataTreeEvaluator/mockData/mockUnEvalTree.tsapp/client/src/workers/common/DataTreeEvaluator/mockData/ArrayAccessorTree.tsapp/client/src/workers/common/DataTreeEvaluator/mockData/NestedArrayAccessorTree.tsapp/client/src/widgets/ButtonGroupWidget/component/index.tsxapp/client/src/widgets/ButtonWidget/component/DragContainer.tsxapp/client/src/widgets/BaseWidget.tsxapp/client/src/workers/Evaluation/replayUtils.tsapp/client/src/workers/Evaluation/__tests__/evaluate.test.tsapp/client/src/workers/Evaluation/__tests__/setters.test.tsapp/client/src/workers/Evaluation/__tests__/validations.test.tsapp/client/src/workers/Evaluation/__tests__/generateOpimisedUpdates.test.tsapp/client/src/workers/Evaluation/__tests__/evaluation.test.tsapp/client/src/workers/Evaluation/__tests__/Actions.test.tsapp/client/src/utils/metaWidgetState.tsapp/client/src/utils/testDSLs.tsapp/client/src/utils/helpers.test.tsapp/client/src/utils/autocomplete/__tests__/dataTreeTypeDefCreator.test.tsapp/client/src/utils/WidgetPropsUtils.tsxapp/client/src/utils/WidgetSizeUtils.test.tsapp/client/src/utils/WidgetLoadingStateUtils.test.tsapp/client/src/utils/WidgetFeatures.test.tsapp/client/src/utils/FilterInternalProperties/__tests__/index.test.tsapp/client/src/selectors/propertyPaneSelectors.tsxapp/client/src/selectors/flattenedChildCanvasSelector.tsapp/client/src/selectors/editorSelectors.tsxapp/client/src/reducers/entityReducers/metaWidgetsReducer.test.tsapp/client/src/pages/Editor/WidgetsEditor/WidgetEditorContainer.tsxapp/client/src/pages/Editor/CustomWidgetBuilder/Preview/index.tsxapp/client/src/pages/AppViewer/index.tsxapp/client/src/mocks/widgetProps/input.tsapp/client/src/mocks/widgetProps/container.tsapp/client/src/mocks/layoutComponents/layoutComponentMock.tsapp/client/src/mocks/widgetProps/button.tsapp/client/src/mocks/widgetProps/canvas.tsapp/client/src/layoutSystems/withLayoutSystemWidgetHOC.test.tsxapp/client/src/layoutSystems/withLayoutSystemWidgetHOC.tsxapp/client/src/layoutSystems/autolayout/viewer/AutoLayoutViewerWidgetOnion.tsxapp/client/src/mockComponentProps/WidgetPayloads.tsapp/client/src/layoutSystems/common/dropTarget/DragLayerComponent.test.tsxapp/client/src/layoutSystems/anvil/utils/layouts/renderUtils.tsxapp/client/src/layoutSystems/anvil/layoutComponents/components/zone/useZoneMinWidth.tsapp/client/src/layoutSystems/anvil/layoutComponents/components/section/SectionRow.tsxapp/client/src/layoutSystems/anvil/layoutComponents/WidgetRenderer.tsxapp/client/src/layoutSystems/anvil/layoutComponents/LayoutProvider.tsxapp/client/src/layoutSystems/anvil/layoutComponents/BaseLayoutComponent.tsxapp/client/src/layoutSystems/anvil/index.tsapp/client/src/layoutSystems/CanvasFactory.tsxapp/client/src/entities/Widget/utils.test.tsapp/client/src/entities/Replay/ReplayEntity/ReplayCanvas.tsapp/client/src/entities/DataTree/dataTreeWidget.test.tsapp/client/src/entities/AppTheming/utils.test.tsapp/client/src/components/editorComponents/EditorContextProvider.tsxapp/client/src/components/editorComponents/PartialImportExport/PartialExportModal/unitTestUtils.tsapp/client/src/components/editorComponents/EditorContextProvider.test.tsxapp/client/src/constants/WidgetConstants.tsxapp/client/src/ce/workers/Evaluation/evaluationUtils.test.tsapp/client/src/WidgetProvider/factory/index.tsxapp/client/packages/dsl/src/migrate/tests/ChartDataFromArrayFromArrayToObject.test.tsapp/client/packages/dsl/src/migrate/tests/MigrateInitialValues.test.tsapp/client/packages/dsl/src/migrate/tests/TextWidget.test.tsapp/client/packages/dsl/src/migrate/tests/DSLMigrationsUtils.test.tsapp/client/packages/dsl/src/migrate/tests/PhoneInputWidgetMigrations.test.tsapp/client/packages/dsl/src/migrate/tests/ModalWidget.test.tsapp/client/packages/dsl/src/migrate/tests/CustomWidget.test.tsapp/client/packages/dsl/src/migrate/tests/testDSLs.tsapp/client/packages/dsl/src/migrate/tests/ChartWidgetReskinningMigrations.test.tsapp/client/packages/dsl/src/migrate/tests/CurrencyInputWidgetMigrations.test.tsapp/client/packages/dsl/src/migrate/tests/SelectWidget.test.tsapp/client/packages/dsl/src/migrate/tests/TableWidget.test.tsapp/client/packages/dsl/src/migrate/tests/ThemingMigration.test.tsAction Required:
- Review and update the codebase to ensure the
renderModeproperty is either properly refactored or reintroduced if necessary.- Ensure that all instances of
renderModeare handled appropriately to avoid potential runtime errors or inconsistencies.Analysis chain
Line range hint
16-16: The removal of therenderModeproperty and the type declarations indicates a refactor or deprecation of these features. Ensure that these removed properties and types are not used elsewhere in the codebase.Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that the removed `renderMode` property and type declarations are not used elsewhere in the codebase. # Test: Search for the usage of the removed `renderMode` property and type declarations. Expect: No occurrences of the removed properties and types. rg --type typescript 'renderMode|GenerateHighlights|UpdateHighlights'Length of output: 106
Script:
#!/bin/bash # Description: Verify that the removed `renderMode` property and type declarations are not used elsewhere in the codebase. # Test: Search for the usage of the removed `renderMode` property and type declarations. Expect: No occurrences of the removed properties and types. rg --type ts 'renderMode|GenerateHighlights|UpdateHighlights'Length of output: 105511
KelvinOm
added
skip-changelog
github-actions
bot
removed
the
skip-changelog
KelvinOm
commented
May 14, 2024
| position?: PositionValues; | ||
| gap?: Responsive<SpacingDimension>; |
There was a problem hiding this comment.
All this we have in FlexProps type.
| @@ -160,7 +121,7 @@ export const FlexLayout = React.memo((props: FlexLayoutProps) => { | |||
| ? { background: "var(--anvil-cell-highlight)" } | |||
| : {}), | |||
| }; | |||
| }, [border, isDropTarget, position, renderMode, shouldHighlightCell]); | |||
There was a problem hiding this comment.
We don't use border and renderMode in this useMemo.
| @@ -31,72 +23,18 @@ import { RenderModes } from "constants/WidgetConstants"; | |||
| * Each alignment has following characteristics: | |||
| * 1. Mobile viewport: | |||
| * - flex-wrap: wrap. | |||
| * - flex-basis: auto. | |||
There was a problem hiding this comment.
Changed flex-basis to 0% for mobile because I believe it's wrong. With auto the container with the component takes more space and the grid breaks.
...rc/layoutSystems/anvil/layoutComponents/components/alignedWidgetRow/AlignedWidgetRowComp.tsx
Show resolved
Hide resolved
| @@ -152,54 +90,48 @@ const AlignedWidgetRowComp = (props: LayoutComponentProps) => { | |||
| // WDS Flex can be used as a replacement. | |||
| return ( | |||
| <> | |||
| {isStartVisible() && ( | |||
There was a problem hiding this comment.
It was a bad idea, brings less benefit than problems. I'm deleting it.
| @@ -140,19 +138,6 @@ export interface DraggedWidget { | |||
| widgetId: string; | |||
| } | |||
|
|
|||
| export type GenerateHighlights = ( | |||
There was a problem hiding this comment.
It is not used anywhere
| @@ -202,14 +187,3 @@ export interface HighlightPayload { | |||
| highlights: AnvilHighlightInfo[]; | |||
| skipEntity: boolean; | |||
| } | |||
|
|
|||
| export type UpdateHighlights = ( | |||
There was a problem hiding this comment.
It is not used anywhere
KelvinOm
force-pushed
the
fix/anvil-layout
branch
from
3b2161a
to
b443ac6
Compare
KelvinOm
added
ok-to-test
marks0351
approved these changes
May 15, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Tip
Add a TL;DR when the description is longer than 500 words or extremely technical (helps the content, marketing, and DevRel team).
Please also include relevant motivation and context. List any dependencies that are required for this change. Add links to Notion, Figma or any other documents that might be relevant to the PR.
Fixes #
Issue Numberor
Fixes
Issue URLWarning
If no issue exists, please create an issue first, and check with the maintainers if the issue is valid.
Automation
/ok-to-test tags="@tag.Anvil"
馃攳 Cypress test results
Tip
馃煝 馃煝 馃煝 All cypress tests have passed! 馃帀 馃帀 馃帀
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/9083152704
Commit: b443ac6
Cypress dashboard url: Click here!
Communication
Should the DevRel and Marketing teams inform users about this change?