> 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 -->
80 lines
3.2 KiB
TypeScript
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;
|
|
};
|
|
};
|