PromucFlow_constructor/app/client/src/selectors/navigationSelectors.ts
Favour Ohanekwu b80b0ca3fa
feat: show lint errors in async functions bound to sync fields (#21187)
## Description

This PR improves the error resolution journey for users. Lint warnings
are added to async JS functions which are bound to data fields (sync
fields).

- JSObjects are "linted" by individual properties (as opposed to being
"linted" as a whole)
- Only edited jsobject properties get "linted", improving jsObject
linting by ~35%.(This largely depends on the size of the JSObject)
<img width="500" alt="Screenshot 2023-04-03 at 11 17 45"
src="https://user-images.githubusercontent.com/46670083/229482424-233f3950-ffec-46f5-8c42-680dff6a412f.png">
<img width="500" alt="Screenshot 2023-03-14 at 11 26 00"
src="https://user-images.githubusercontent.com/46670083/224975572-b2d8d404-aac6-43fb-be14-20edf7c56117.png">
<img width="500" alt="Screenshot 2023-03-14 at 11 41 11"
src="https://user-images.githubusercontent.com/46670083/224975952-c40848b1-69d8-489d-9b62-24127ea1a2f1.png">

Fixes #20289
Fixes #20008


## Type of change

- Bug fix (non-breaking change which fixes an issue)


## How Has This Been Tested?

- CYPRESS
- JEST

### 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:
- [ ] Test plan has been approved by relevant developers
- [x] Test plan has been peer reviewed by QA
- [x] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test
2023-04-03 16:11:15 +05:30

148 lines
4.9 KiB
TypeScript

import type {
DataTree,
AppsmithEntity,
} from "entities/DataTree/dataTreeFactory";
import { ENTITY_TYPE } from "entities/DataTree/dataTreeFactory";
import { createSelector } from "reselect";
import {
getActionsForCurrentPage,
getJSCollections,
getPlugins,
} from "selectors/entitiesSelector";
import { getWidgets } from "sagas/selectors";
import { getCurrentPageId } from "selectors/editorSelectors";
import { getActionConfig } from "pages/Editor/Explorer/Actions/helpers";
import { jsCollectionIdURL, widgetURL } from "RouteBuilder";
import { getDataTree } from "selectors/dataTreeSelectors";
import { getActionChildrenNavData } from "utils/NavigationSelector/ActionChildren";
import { createNavData } from "utils/NavigationSelector/common";
import { getWidgetChildrenNavData } from "utils/NavigationSelector/WidgetChildren";
import { getJsChildrenNavData } from "utils/NavigationSelector/JsChildren";
import { getAppsmithNavData } from "utils/NavigationSelector/AppsmithNavData";
import {
getEntityNameAndPropertyPath,
isJSAction,
} from "@appsmith/workers/Evaluation/evaluationUtils";
import type { AppState } from "@appsmith/reducers";
export type NavigationData = {
name: string;
id: string;
type: ENTITY_TYPE;
url: string | undefined;
navigable: boolean;
children: EntityNavigationData;
peekable: boolean;
peekData?: unknown;
key?: string;
};
export type EntityNavigationData = Record<string, NavigationData>;
export const getEntitiesForNavigation = createSelector(
getActionsForCurrentPage,
getPlugins,
getJSCollections,
getWidgets,
getCurrentPageId,
getDataTree,
(_: any, entityName: string | undefined) => entityName,
(
actions,
plugins,
jsActions,
widgets,
pageId,
dataTree: DataTree,
entityName: string | undefined,
) => {
// data tree retriggers this
jsActions = jsActions.filter((a) => a.config.pageId === pageId);
const navigationData: EntityNavigationData = {};
if (!dataTree) return navigationData;
actions.forEach((action) => {
const plugin = plugins.find(
(plugin) => plugin.id === action.config.pluginId,
);
const config = getActionConfig(action.config.pluginType);
// dataTree used to get entityDefinitions and peekData
const result = getActionChildrenNavData(action, dataTree);
if (!config) return;
navigationData[action.config.name] = createNavData({
id: action.config.id,
name: action.config.name,
type: ENTITY_TYPE.ACTION,
url: config.getURL(
pageId,
action.config.id,
action.config.pluginType,
plugin,
),
peekable: true,
peekData: result?.peekData,
children: result?.childNavData || {},
});
});
jsActions.forEach((jsAction) => {
// dataTree for null check and peekData
const result = getJsChildrenNavData(jsAction, pageId, dataTree);
navigationData[jsAction.config.name] = createNavData({
id: jsAction.config.id,
name: jsAction.config.name,
type: ENTITY_TYPE.JSACTION,
url: jsCollectionIdURL({ pageId, collectionId: jsAction.config.id }),
peekable: true,
peekData: result?.peekData,
children: result?.childNavData || {},
});
});
Object.values(widgets).forEach((widget) => {
// dataTree to get entityDefinitions, for url (can use getWidgetByName?) and peekData
const result = getWidgetChildrenNavData(widget, dataTree, pageId);
navigationData[widget.widgetName] = createNavData({
id: widget.widgetId,
name: widget.widgetName,
type: ENTITY_TYPE.WIDGET,
url: widgetURL({ pageId, selectedWidgets: [widget.widgetId] }),
peekable: true,
peekData: result?.peekData,
children: result?.childNavData || {},
});
});
// dataTree to get entity definitions and peekData
navigationData["appsmith"] = getAppsmithNavData(
dataTree.appsmith as AppsmithEntity,
);
if (
entityName &&
isJSAction(dataTree[entityName]) &&
entityName in navigationData
) {
return {
...navigationData,
this: navigationData[entityName],
};
}
return navigationData;
},
);
export const getJSFunctionNavigationUrl = createSelector(
[
(state: AppState, entityName: string) =>
getEntitiesForNavigation(state, entityName),
(_, __, jsFunctionFullName: string | undefined) => jsFunctionFullName,
],
(entitiesForNavigation, jsFunctionFullName) => {
if (!jsFunctionFullName) return undefined;
const { entityName: jsObjectName, propertyPath: jsFunctionName } =
getEntityNameAndPropertyPath(jsFunctionFullName);
const jsObjectNavigationData = entitiesForNavigation[jsObjectName];
const jsFuncNavigationData =
jsObjectNavigationData && jsObjectNavigationData.children[jsFunctionName];
return jsFuncNavigationData?.url;
},
);