PromucFlow_constructor/app/client/src/layoutSystems/common/useLayoutSystemFeatures.ts
Ashok Kumar M c209b47671
chore: clean up space distribution feature in Anvil (#31468)
> Pull Request Template
>
> Use this template to quickly create a well written pull request.
Delete all quotes before creating the pull request.
>
## Description
This PR addresses two particular things with space distribution
- Issue: Space distribution distributing more than max column limit
space
- Enhancement: Replace flew grow css for zones to flex basis to make
sure column widths are even irresepective of number of zones in a
section.

Additional Fixes:
- replaced test id of widgets editor to abide by repo standards.
- disable crud app generation feature for Anvil.
#### PR fixes following issue(s)
Fixes # (issue number)
> if no issue exists, please create an issue and ask the maintainers
about this first
>
>
#### Media
> A video or a GIF is preferred. when using Loom, don’t embed because it
looks like it’s a GIF. instead, just link to the video
>
>
#### Type of change
> Please delete options that are not relevant.
- Bug fix (non-breaking change which fixes an issue)
- New feature (non-breaking change which adds functionality)
- Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- Chore (housekeeping or task changes that don't impact user perception)
- This change requires a documentation update
>
>
>
## Testing
>
#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [ ] Manual
- [ ] JUnit
- [ ] Jest
- [ ] Cypress
>
>
#### Test Plan
> Add Testsmith test cases links that relate to this PR
>
>
#### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
>
>
>
## Checklist:
#### Dev activity
- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
	- Enabled new feature flags to enhance application capabilities.
- Introduced dynamic space redistribution for improved layout
management.
- Added "Generate App" functionality for users with specific feature
access.
- **Enhancements**
	- Updated UI selectors for better consistency and reliability.
- Refined layout system logic to always utilize the Anvil layout system.
- **Refactor**
	- Optimized feature flag selection logic for efficiency.
- Improved flex property handling in layout components for more accurate
space distribution.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-03-06 12:59:44 +05:30

80 lines
3.2 KiB
TypeScript

import { useSelector } from "react-redux";
import { LayoutSystemTypes } from "layoutSystems/types";
import { getLayoutSystemType } from "selectors/layoutSystemSelectors";
export enum LayoutSystemFeatures {
ENABLE_MAIN_CONTAINER_RESIZER = "ENABLE_MAIN_CONTAINER_RESIZER",
ENABLE_FORKING_FROM_TEMPLATES = "ENABLE_FORKING_FROM_TEMPLATES",
ENABLE_CANVAS_LAYOUT_CONTROL = "ENABLE_CANVAS_LAYOUT_CONTROL",
ENABLE_CANVAS_OVERLAY_FOR_EDITOR_UI = "ENABLE_CANVAS_OVERLAY_FOR_EDITOR_UI",
ENABLE_LAYOUT_CONVERSION = "ENABLE_LAYOUT_CONVERSION",
ENABLE_GENERATE_CRUD_APP = "ENABLE_GENERATE_CRUD_APP",
}
const FIXED_LAYOUT_FEATURES: Record<LayoutSystemFeatures, boolean> = {
[LayoutSystemFeatures.ENABLE_FORKING_FROM_TEMPLATES]: true,
[LayoutSystemFeatures.ENABLE_CANVAS_LAYOUT_CONTROL]: true,
[LayoutSystemFeatures.ENABLE_MAIN_CONTAINER_RESIZER]: false,
[LayoutSystemFeatures.ENABLE_CANVAS_OVERLAY_FOR_EDITOR_UI]: false,
[LayoutSystemFeatures.ENABLE_LAYOUT_CONVERSION]: true,
[LayoutSystemFeatures.ENABLE_GENERATE_CRUD_APP]: true,
};
const AUTO_LAYOUT_FEATURES: Record<LayoutSystemFeatures, boolean> = {
[LayoutSystemFeatures.ENABLE_FORKING_FROM_TEMPLATES]: false,
[LayoutSystemFeatures.ENABLE_CANVAS_LAYOUT_CONTROL]: false,
[LayoutSystemFeatures.ENABLE_MAIN_CONTAINER_RESIZER]: true,
[LayoutSystemFeatures.ENABLE_CANVAS_OVERLAY_FOR_EDITOR_UI]: false,
[LayoutSystemFeatures.ENABLE_LAYOUT_CONVERSION]: true,
[LayoutSystemFeatures.ENABLE_GENERATE_CRUD_APP]: true,
};
const ANVIL_FEATURES: Record<LayoutSystemFeatures, boolean> = {
[LayoutSystemFeatures.ENABLE_FORKING_FROM_TEMPLATES]: false,
[LayoutSystemFeatures.ENABLE_CANVAS_LAYOUT_CONTROL]: false,
[LayoutSystemFeatures.ENABLE_MAIN_CONTAINER_RESIZER]: true,
[LayoutSystemFeatures.ENABLE_CANVAS_OVERLAY_FOR_EDITOR_UI]: true,
[LayoutSystemFeatures.ENABLE_LAYOUT_CONVERSION]: false,
[LayoutSystemFeatures.ENABLE_GENERATE_CRUD_APP]: false,
};
/**
* This Hook is mainly written to be used as a central control to enable
* layout specific features based on the type of current layout.
* This way the components using it need not be aware of what layout it is on
*
* @returns This hook returns a method, which can be used to get a boolean corresponding to the feature supplied as argument.
* The boolean will indicate if the feature is enabled for the current layout
*/
export const useLayoutSystemFeatures = () => {
const layoutSystemType = useSelector(getLayoutSystemType);
let currentFeatureSet = {} as Record<LayoutSystemFeatures, boolean>;
switch (layoutSystemType) {
case LayoutSystemTypes.FIXED:
currentFeatureSet = FIXED_LAYOUT_FEATURES;
break;
case LayoutSystemTypes.AUTO:
currentFeatureSet = AUTO_LAYOUT_FEATURES;
break;
case LayoutSystemTypes.ANVIL:
currentFeatureSet = ANVIL_FEATURES;
break;
}
/**
* This method checks if the features requested in the method,
* can be enabled for the given particular layout type
*/
return (checkFeaturesArray: LayoutSystemFeatures[]) => {
const featuresArray: boolean[] = [];
for (const checkFeature of checkFeaturesArray) {
featuresArray.push(!!currentFeatureSet[checkFeature]);
}
return featuresArray;
};
};