-
Notifications
You must be signed in to change notification settings - Fork 3.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: anvil layout and some cleanup #33442
Conversation
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 (
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
renderMode
property still being used throughout the codebase. This indicates that the removal of therenderMode
property from theLayoutComponentProps
interface might not be complete or could lead to issues if not addressed properly.Locations where
renderMode
is still used:
app/client/test/factories/Widgets/CanvasFactory.ts
app/client/test/factories/Widgets/FilepickerFactory.ts
app/client/test/factories/Widgets/ListFactory.ts
app/client/test/factories/Widgets/VideoFactory.ts
app/client/test/factories/Widgets/TabsFactory.ts
app/client/test/factories/Widgets/SwitchFactory.ts
app/client/test/factories/Widgets/SkeletonFactory.ts
app/client/test/factories/Widgets/RichTextFactory.ts
app/client/test/factories/Widgets/RadiogroupFactory.ts
app/client/test/factories/Widgets/MapFactory.ts
app/client/test/factories/Widgets/ModalFactory.ts
app/client/test/factories/Widgets/TextFactory.ts
app/client/test/factories/Widgets/IconFactory.ts
app/client/test/factories/Widgets/FormFactory.ts
app/client/test/factories/Widgets/FormButtonFactory.ts
app/client/test/factories/Widgets/DropdownFactory.ts
app/client/test/factories/Widgets/DividerFactory.ts
app/client/test/factories/Widgets/ImageFactory.ts
app/client/test/factories/Widgets/ContainerFactory.ts
app/client/test/factories/Widgets/CheckboxFactory.ts
app/client/test/factories/Widgets/ChartFactory.ts
app/client/test/factories/Widgets/ButtonFactory.ts
app/client/test/factories/Widgets/DatepickerFactory.ts
app/client/test/factories/WidgetFactoryUtils.ts
app/client/src/sagas/WidgetSelectUtils.test.ts
app/client/src/sagas/WidgetOperationUtils.ts
app/client/src/sagas/WidgetBlueprintSagas.test.ts
app/client/src/sagas/WidgetOperationUtils.test.ts
app/client/src/sagas/WidgetOperationSagas.tsx
app/client/src/sagas/WidgetAdditionSagas.ts
app/client/src/widgets/withWidgetProps.tsx
app/client/src/widgets/ListWidgetV2/testData.ts
app/client/src/widgets/ListWidgetV2/widget/index.tsx
app/client/src/widgets/wds/WDSTableWidget/widget/reactTableUtils/getColumnsPureFn.tsx
app/client/src/widgets/wds/WDSTableWidget/widget/index.tsx
app/client/src/widgets/wds/WDSButtonWidget/component/Container.tsx
app/client/src/widgets/useDropdown.tsx
app/client/src/widgets/ListWidgetV2/MetaWidgetGenerator.ts
app/client/src/widgets/ListWidgetV2/MetaWidgetGenerator.test.ts
app/client/src/widgets/DropdownWidget/widget/index.test.tsx
app/client/src/widgets/WidgetUtils.test.ts
app/client/src/widgets/anvil/ZoneWidget/widget/config/anvilConfig.ts
app/client/src/widgets/TableWidgetV2/widget/reactTableUtils/getColumnsPureFn.tsx
app/client/src/widgets/TableWidgetV2/widget/index.tsx
app/client/src/widgets/TableWidget/widget/propertyUtils.test.ts
app/client/src/widgets/TableWidget/widget/index.tsx
app/client/src/widgets/DividerWidget/widget/index.test.tsx
app/client/src/widgets/SingleSelectTreeWidget/widget/index.tsx
app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx
app/client/src/widgets/MultiSelectWidgetV2/component/index.tsx
app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx
app/client/src/widgets/MultiSelectTreeWidget/widget/index.tsx
app/client/src/widgets/ModalWidget/widget/index.tsx
app/client/src/widgets/ModalWidget/component/index.tsx
app/client/src/widgets/MultiSelectTreeWidget/component/index.tsx
app/client/src/widgets/MenuButtonWidget/widget/index.tsx
app/client/src/widgets/MenuButtonWidget/constants.ts
app/client/src/widgets/MenuButtonWidget/component/index.tsx
app/client/src/widgets/JSONFormWidget/widget/index.tsx
app/client/src/widgets/ListWidget/widget/index.tsx
app/client/src/widgets/ListWidget/widget/index.test.tsx
app/client/src/widgets/JSONFormWidget/fields/useRegisterFieldValidity.test.tsx
app/client/src/widgets/JSONFormWidget/fields/PhoneInputField.tsx
app/client/src/widgets/JSONFormWidget/fields/CurrencyInputField.tsx
app/client/src/widgets/JSONFormWidget/fields/ArrayField.test.tsx
app/client/src/widgets/JSONFormWidget/FormContext.tsx
app/client/src/widgets/JSONFormWidget/component/index.tsx
app/client/src/widgets/ImageWidget/widget/index.tsx
app/client/src/widgets/InputWidget/widget/index.tsx
app/client/src/widgets/InputWidget/widget/index.test.tsx
app/client/src/widgets/IframeWidget/widget/index.tsx
app/client/src/widgets/IframeWidget/component/index.tsx
app/client/src/widgets/IconButtonWidget/widget/index.tsx
app/client/src/widgets/IconButtonWidget/component/index.tsx
app/client/src/widgets/CustomWidget/widget/index.tsx
app/client/src/widgets/CustomWidget/component/index.tsx
app/client/src/widgets/ChartWidget/widget/index.test.ts
app/client/src/widgets/ChartWidget/widget/SyntaxErrorsEvaluation.test.ts
app/client/src/widgets/ButtonGroupWidget/widget/index.tsx
app/client/src/workers/common/DataTreeEvaluator/mockData/mockUnEvalTree.ts
app/client/src/workers/common/DataTreeEvaluator/mockData/ArrayAccessorTree.ts
app/client/src/workers/common/DataTreeEvaluator/mockData/NestedArrayAccessorTree.ts
app/client/src/widgets/ButtonGroupWidget/component/index.tsx
app/client/src/widgets/ButtonWidget/component/DragContainer.tsx
app/client/src/widgets/BaseWidget.tsx
app/client/src/workers/Evaluation/replayUtils.ts
app/client/src/workers/Evaluation/__tests__/evaluate.test.ts
app/client/src/workers/Evaluation/__tests__/setters.test.ts
app/client/src/workers/Evaluation/__tests__/validations.test.ts
app/client/src/workers/Evaluation/__tests__/generateOpimisedUpdates.test.ts
app/client/src/workers/Evaluation/__tests__/evaluation.test.ts
app/client/src/workers/Evaluation/__tests__/Actions.test.ts
app/client/src/utils/metaWidgetState.ts
app/client/src/utils/testDSLs.ts
app/client/src/utils/helpers.test.ts
app/client/src/utils/autocomplete/__tests__/dataTreeTypeDefCreator.test.ts
app/client/src/utils/WidgetPropsUtils.tsx
app/client/src/utils/WidgetSizeUtils.test.ts
app/client/src/utils/WidgetLoadingStateUtils.test.ts
app/client/src/utils/WidgetFeatures.test.ts
app/client/src/utils/FilterInternalProperties/__tests__/index.test.ts
app/client/src/selectors/propertyPaneSelectors.tsx
app/client/src/selectors/flattenedChildCanvasSelector.ts
app/client/src/selectors/editorSelectors.tsx
app/client/src/reducers/entityReducers/metaWidgetsReducer.test.ts
app/client/src/pages/Editor/WidgetsEditor/WidgetEditorContainer.tsx
app/client/src/pages/Editor/CustomWidgetBuilder/Preview/index.tsx
app/client/src/pages/AppViewer/index.tsx
app/client/src/mocks/widgetProps/input.ts
app/client/src/mocks/widgetProps/container.ts
app/client/src/mocks/layoutComponents/layoutComponentMock.ts
app/client/src/mocks/widgetProps/button.ts
app/client/src/mocks/widgetProps/canvas.ts
app/client/src/layoutSystems/withLayoutSystemWidgetHOC.test.tsx
app/client/src/layoutSystems/withLayoutSystemWidgetHOC.tsx
app/client/src/layoutSystems/autolayout/viewer/AutoLayoutViewerWidgetOnion.tsx
app/client/src/mockComponentProps/WidgetPayloads.ts
app/client/src/layoutSystems/common/dropTarget/DragLayerComponent.test.tsx
app/client/src/layoutSystems/anvil/utils/layouts/renderUtils.tsx
app/client/src/layoutSystems/anvil/layoutComponents/components/zone/useZoneMinWidth.ts
app/client/src/layoutSystems/anvil/layoutComponents/components/section/SectionRow.tsx
app/client/src/layoutSystems/anvil/layoutComponents/WidgetRenderer.tsx
app/client/src/layoutSystems/anvil/layoutComponents/LayoutProvider.tsx
app/client/src/layoutSystems/anvil/layoutComponents/BaseLayoutComponent.tsx
app/client/src/layoutSystems/anvil/index.ts
app/client/src/layoutSystems/CanvasFactory.tsx
app/client/src/entities/Widget/utils.test.ts
app/client/src/entities/Replay/ReplayEntity/ReplayCanvas.ts
app/client/src/entities/DataTree/dataTreeWidget.test.ts
app/client/src/entities/AppTheming/utils.test.ts
app/client/src/components/editorComponents/EditorContextProvider.tsx
app/client/src/components/editorComponents/PartialImportExport/PartialExportModal/unitTestUtils.ts
app/client/src/components/editorComponents/EditorContextProvider.test.tsx
app/client/src/constants/WidgetConstants.tsx
app/client/src/ce/workers/Evaluation/evaluationUtils.test.ts
app/client/src/WidgetProvider/factory/index.tsx
app/client/packages/dsl/src/migrate/tests/ChartDataFromArrayFromArrayToObject.test.ts
app/client/packages/dsl/src/migrate/tests/MigrateInitialValues.test.ts
app/client/packages/dsl/src/migrate/tests/TextWidget.test.ts
app/client/packages/dsl/src/migrate/tests/DSLMigrationsUtils.test.ts
app/client/packages/dsl/src/migrate/tests/PhoneInputWidgetMigrations.test.ts
app/client/packages/dsl/src/migrate/tests/ModalWidget.test.ts
app/client/packages/dsl/src/migrate/tests/CustomWidget.test.ts
app/client/packages/dsl/src/migrate/tests/testDSLs.ts
app/client/packages/dsl/src/migrate/tests/ChartWidgetReskinningMigrations.test.ts
app/client/packages/dsl/src/migrate/tests/CurrencyInputWidgetMigrations.test.ts
app/client/packages/dsl/src/migrate/tests/SelectWidget.test.ts
app/client/packages/dsl/src/migrate/tests/TableWidget.test.ts
app/client/packages/dsl/src/migrate/tests/ThemingMigration.test.ts
Action Required:
- Review and update the codebase to ensure the
renderMode
property is either properly refactored or reintroduced if necessary.- Ensure that all instances of
renderMode
are handled appropriately to avoid potential runtime errors or inconsistencies.Analysis chain
Line range hint
16-16
: The removal of therenderMode
property 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
position?: PositionValues; | ||
gap?: Responsive<SpacingDimension>; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
...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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It is not used anywhere
3b2161a
to
b443ac6
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@KelvinOm thanks for reviewing the layout code and reducing the code. It should be more maintainable now.
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 Number
or
Fixes
Issue URL
Warning
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?