chore: action editor right pane refactor (#29757)
## Description Add flags to enable/disable viewing certain sections of Actions right side pane. Applies to showing the bindings, schema sections Condition to hide the complete right pane when none of the sections are allowed to show. #### PR fixes following issue(s) Fixes for PR https://github.com/appsmithorg/appsmith-ee/pull/3164 #### Type of change > Please delete options that are not relevant. - Chore (housekeeping or task changes that don't impact user perception) ## 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** - Introduced a toggle to show or hide schema information in the Action Sidebar. - Added a feature to suggest widgets based on the current context in the Query Editor. - **Enhancements** - Improved conditional rendering logic for displaying the right pane in the API and Query Editors. - Streamlined the import of DatasourceStructureContainer for better maintainability. - **Refactor** - Renamed `SomeWrapper` to `ActionRightPaneWrapper` for clarity. - Created a custom hook `useShowSchema` to handle the visibility of schema information. - **Documentation** - Updated interface `QueryEditorContextContextProps` to include the `showSuggestedWidgets` property. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
ashit-rath
GitHub
parent
41acf4d001
commit
3924fd61b7
|
|
@ -22,10 +22,7 @@ import type {
|
|||
} from "api/ActionAPI";
|
||||
import { getPagePermissions } from "selectors/editorSelectors";
|
||||
import DatasourceStructureHeader from "pages/Editor/DatasourceInfo/DatasourceStructureHeader";
|
||||
import {
|
||||
DatasourceStructureContainer as DataStructureList,
|
||||
SCHEMALESS_PLUGINS,
|
||||
} from "pages/Editor/DatasourceInfo/DatasourceStructureContainer";
|
||||
import { DatasourceStructureContainer as DataStructureList } from "pages/Editor/DatasourceInfo/DatasourceStructureContainer";
|
||||
import {
|
||||
getDatasourceStructureById,
|
||||
getIsFetchingDatasourceStructure,
|
||||
|
|
@ -171,6 +168,8 @@ function ActionSidebar({
|
|||
hasConnections,
|
||||
hasResponse,
|
||||
pluginId,
|
||||
showSchema,
|
||||
showSuggestedWidgets = true,
|
||||
suggestedWidgets,
|
||||
}: {
|
||||
actionName: string;
|
||||
|
|
@ -182,6 +181,8 @@ function ActionSidebar({
|
|||
context: DatasourceStructureContext;
|
||||
additionalSections?: React.ReactNode;
|
||||
actionRightPaneBackLink: React.ReactNode;
|
||||
showSuggestedWidgets?: boolean;
|
||||
showSchema: boolean;
|
||||
}) {
|
||||
const dispatch = useDispatch();
|
||||
const widgets = useSelector(getWidgets);
|
||||
|
|
@ -267,10 +268,6 @@ function ActionSidebar({
|
|||
});
|
||||
};
|
||||
|
||||
const showSchema =
|
||||
pluginDatasourceForm !== DatasourceComponentTypes.RestAPIDatasourceForm &&
|
||||
!SCHEMALESS_PLUGINS.includes(pluginName);
|
||||
|
||||
useEffect(() => {
|
||||
if (showSchema) {
|
||||
checkAndShowWalkthrough();
|
||||
|
|
@ -286,13 +283,13 @@ function ActionSidebar({
|
|||
pagePermissions,
|
||||
);
|
||||
|
||||
const showSuggestedWidgets =
|
||||
const suggestedWidgetsEnabled =
|
||||
canEditPage && hasResponse && suggestedWidgets && !!suggestedWidgets.length;
|
||||
const showSnipingMode = hasResponse && hasWidgets;
|
||||
|
||||
if (
|
||||
!hasConnections &&
|
||||
!showSuggestedWidgets &&
|
||||
!suggestedWidgetsEnabled &&
|
||||
!showSnipingMode &&
|
||||
// putting this here to make the placeholder only appear for rest APIs.
|
||||
pluginDatasourceForm === DatasourceComponentTypes.RestAPIDatasourceForm
|
||||
|
|
@ -300,53 +297,59 @@ function ActionSidebar({
|
|||
return <Placeholder>{createMessage(NO_CONNECTIONS)}</Placeholder>;
|
||||
}
|
||||
|
||||
if (!additionalSections && !showSchema && !showSuggestedWidgets) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<SideBar>
|
||||
{actionRightPaneBackLink}
|
||||
<CollapsibleGroupContainer>
|
||||
{additionalSections && (
|
||||
<>
|
||||
<CollapsibleGroup maxHeight={"50%"}>
|
||||
{additionalSections}
|
||||
</CollapsibleGroup>
|
||||
<StyledDivider />
|
||||
</>
|
||||
<CollapsibleGroup maxHeight={"50%"}>
|
||||
{additionalSections}
|
||||
</CollapsibleGroup>
|
||||
)}
|
||||
<CollapsibleGroup height={additionalSections ? "50%" : "100%"}>
|
||||
{showSchema && (
|
||||
<CollapsibleSection
|
||||
data-testId="datasource-schema-container"
|
||||
height={
|
||||
datasourceStructure?.tables?.length && !isLoadingSchema
|
||||
? "50%"
|
||||
: "auto"
|
||||
}
|
||||
id={SCHEMA_SECTION_ID}
|
||||
ref={schemaRef}
|
||||
>
|
||||
<Collapsible
|
||||
CustomLabelComponent={DatasourceStructureHeader}
|
||||
containerRef={schemaRef}
|
||||
datasource={{ id: datasourceId }}
|
||||
expand={!showSuggestedWidgets}
|
||||
label="Schema"
|
||||
<>
|
||||
{additionalSections && <StyledDivider />}
|
||||
<CollapsibleSection
|
||||
data-testId="datasource-schema-container"
|
||||
height={
|
||||
datasourceStructure?.tables?.length && !isLoadingSchema
|
||||
? showSuggestedWidgets
|
||||
? "50%"
|
||||
: "100%"
|
||||
: "auto"
|
||||
}
|
||||
id={SCHEMA_SECTION_ID}
|
||||
ref={schemaRef}
|
||||
>
|
||||
<DataStructureListWrapper>
|
||||
<DataStructureList
|
||||
context={context}
|
||||
currentActionId={params?.queryId || ""}
|
||||
datasourceId={datasourceId || ""}
|
||||
datasourceStructure={datasourceStructure}
|
||||
pluginName={pluginName}
|
||||
step={0}
|
||||
/>
|
||||
</DataStructureListWrapper>
|
||||
</Collapsible>
|
||||
</CollapsibleSection>
|
||||
<Collapsible
|
||||
CustomLabelComponent={DatasourceStructureHeader}
|
||||
containerRef={schemaRef}
|
||||
datasource={{ id: datasourceId }}
|
||||
expand={!suggestedWidgetsEnabled}
|
||||
label="Schema"
|
||||
>
|
||||
<DataStructureListWrapper>
|
||||
<DataStructureList
|
||||
context={context}
|
||||
currentActionId={params?.queryId || ""}
|
||||
datasourceId={datasourceId || ""}
|
||||
datasourceStructure={datasourceStructure}
|
||||
pluginName={pluginName}
|
||||
step={0}
|
||||
/>
|
||||
</DataStructureListWrapper>
|
||||
</Collapsible>
|
||||
</CollapsibleSection>
|
||||
</>
|
||||
)}
|
||||
|
||||
{showSchema && <StyledDivider />}
|
||||
{showSuggestedWidgets ? (
|
||||
{showSuggestedWidgets && showSchema && <StyledDivider />}
|
||||
{showSuggestedWidgets && suggestedWidgetsEnabled && (
|
||||
<CollapsibleSection height={"40%"} marginTop={12}>
|
||||
<SuggestedWidgets
|
||||
actionName={actionName}
|
||||
|
|
@ -354,7 +357,8 @@ function ActionSidebar({
|
|||
suggestedWidgets={suggestedWidgets as SuggestedWidget[]}
|
||||
/>
|
||||
</CollapsibleSection>
|
||||
) : (
|
||||
)}
|
||||
{showSuggestedWidgets && !suggestedWidgetsEnabled && (
|
||||
<DisabledCollapsible
|
||||
label={createMessage(BINDING_SECTION_LABEL)}
|
||||
tooltipLabel={createMessage(BINDINGS_DISABLED_TOOLTIP)}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
import {
|
||||
getPluginDatasourceComponentFromId,
|
||||
getPluginNameFromId,
|
||||
} from "@appsmith/selectors/entitiesSelector";
|
||||
import { DatasourceComponentTypes } from "api/PluginApi";
|
||||
import { SCHEMALESS_PLUGINS } from "pages/Editor/DatasourceInfo/DatasourceStructureContainer";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
function useShowSchema(pluginId: string) {
|
||||
const pluginDatasourceForm = useSelector((state) =>
|
||||
getPluginDatasourceComponentFromId(state, pluginId),
|
||||
);
|
||||
|
||||
const pluginName = useSelector((state) =>
|
||||
getPluginNameFromId(state, pluginId),
|
||||
);
|
||||
|
||||
return (
|
||||
pluginDatasourceForm !== DatasourceComponentTypes.RestAPIDatasourceForm &&
|
||||
!SCHEMALESS_PLUGINS.includes(pluginName)
|
||||
);
|
||||
}
|
||||
|
||||
export default useShowSchema;
|
||||
|
|
@ -20,6 +20,7 @@ import { DatasourceStructureContext } from "entities/Datasource";
|
|||
|
||||
import { getCurrentEnvironmentId } from "@appsmith/selectors/environmentSelectors";
|
||||
import type { SuggestedWidget } from "api/ActionAPI";
|
||||
import useShowSchema from "components/editorComponents/ActionRightPane/useShowSchema";
|
||||
|
||||
interface ApiRightPaneProps {
|
||||
additionalSections?: React.ReactNode;
|
||||
|
|
@ -142,7 +143,7 @@ const DataSourceNameContainer = styled.div`
|
|||
}
|
||||
`;
|
||||
|
||||
const SomeWrapper = styled.div`
|
||||
const ActionRightPaneWrapper = styled.div`
|
||||
height: 100%;
|
||||
padding: 0 var(--ads-v2-spaces-4);
|
||||
`;
|
||||
|
|
@ -209,6 +210,8 @@ function ApiRightPane(props: ApiRightPaneProps) {
|
|||
const selectedTab = useSelector(getApiRightPaneSelectedTab);
|
||||
const currentEnvironmentId = useSelector(getCurrentEnvironmentId);
|
||||
|
||||
const showSchema = useShowSchema(props.pluginId);
|
||||
|
||||
const setSelectedTab = useCallback((selectedIndex: string) => {
|
||||
dispatch(setApiRightPaneSelectedTab(selectedIndex));
|
||||
}, []);
|
||||
|
|
@ -230,6 +233,8 @@ function ApiRightPane(props: ApiRightPaneProps) {
|
|||
[props.datasources, props.currentActionDatasourceId],
|
||||
);
|
||||
|
||||
if (!props.additionalSections && !props.showTabbedSection) return null;
|
||||
|
||||
return (
|
||||
<DatasourceContainer>
|
||||
<TabbedViewContainer className="tab-container-right-sidebar">
|
||||
|
|
@ -334,7 +339,7 @@ function ApiRightPane(props: ApiRightPaneProps) {
|
|||
)}
|
||||
</TabPanel>
|
||||
<TabPanel value={API_RIGHT_PANE_TABS.CONNECTIONS}>
|
||||
<SomeWrapper>
|
||||
<ActionRightPaneWrapper>
|
||||
<ActionRightPane
|
||||
actionName={props.actionName}
|
||||
actionRightPaneBackLink={props.actionRightPaneBackLink}
|
||||
|
|
@ -343,9 +348,10 @@ function ApiRightPane(props: ApiRightPaneProps) {
|
|||
hasConnections={hasDependencies}
|
||||
hasResponse={props.hasResponse}
|
||||
pluginId={props.pluginId}
|
||||
showSchema={showSchema}
|
||||
suggestedWidgets={props.suggestedWidgets}
|
||||
/>
|
||||
</SomeWrapper>
|
||||
</ActionRightPaneWrapper>
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -91,6 +91,7 @@ import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag";
|
|||
import { QueryEditorContext } from "./QueryEditorContext";
|
||||
import QueryResponseTabView from "./QueryResponseView";
|
||||
import { setDebuggerSelectedTab, showDebugger } from "actions/debuggerActions";
|
||||
import useShowSchema from "components/editorComponents/ActionRightPane/useShowSchema";
|
||||
|
||||
const QueryFormContainer = styled.form`
|
||||
flex: 1;
|
||||
|
|
@ -332,6 +333,7 @@ export function EditorJSONtoForm(props: Props) {
|
|||
closeEditorLink,
|
||||
moreActionsMenu,
|
||||
saveActionName,
|
||||
showSuggestedWidgets = true,
|
||||
} = useContext(QueryEditorContext);
|
||||
|
||||
const params = useParams<{ apiId?: string; queryId?: string }>();
|
||||
|
|
@ -365,6 +367,13 @@ export function EditorJSONtoForm(props: Props) {
|
|||
userWorkspacePermissions,
|
||||
);
|
||||
|
||||
const showSchema = useShowSchema(currentActionConfig?.pluginId || "");
|
||||
|
||||
const showRightPane =
|
||||
showSchema ||
|
||||
showSuggestedWidgets ||
|
||||
Boolean(actionRightPaneAdditionSections);
|
||||
|
||||
// get the current action's plugin name
|
||||
const currentActionPluginName = useSelector((state: AppState) =>
|
||||
getPluginNameFromId(state, currentActionConfig?.pluginId || ""),
|
||||
|
|
@ -783,19 +792,23 @@ export function EditorJSONtoForm(props: Props) {
|
|||
)}
|
||||
</SecondaryWrapper>
|
||||
</div>
|
||||
<SidebarWrapper show={shouldOpenActionPaneByDefault}>
|
||||
<ActionRightPane
|
||||
actionName={actionName}
|
||||
actionRightPaneBackLink={actionRightPaneBackLink}
|
||||
additionalSections={actionRightPaneAdditionSections}
|
||||
context={DatasourceStructureContext.QUERY_EDITOR}
|
||||
datasourceId={props.datasourceId}
|
||||
hasConnections={hasDependencies}
|
||||
hasResponse={!!actionResponse}
|
||||
pluginId={props.pluginId}
|
||||
suggestedWidgets={actionResponse?.suggestedWidgets}
|
||||
/>
|
||||
</SidebarWrapper>
|
||||
{showRightPane && (
|
||||
<SidebarWrapper show={shouldOpenActionPaneByDefault}>
|
||||
<ActionRightPane
|
||||
actionName={actionName}
|
||||
actionRightPaneBackLink={actionRightPaneBackLink}
|
||||
additionalSections={actionRightPaneAdditionSections}
|
||||
context={DatasourceStructureContext.QUERY_EDITOR}
|
||||
datasourceId={props.datasourceId}
|
||||
hasConnections={hasDependencies}
|
||||
hasResponse={!!actionResponse}
|
||||
pluginId={props.pluginId}
|
||||
showSchema={showSchema}
|
||||
showSuggestedWidgets={showSuggestedWidgets}
|
||||
suggestedWidgets={actionResponse?.suggestedWidgets}
|
||||
/>
|
||||
</SidebarWrapper>
|
||||
)}
|
||||
</Wrapper>
|
||||
</QueryFormContainer>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ interface QueryEditorContextContextProps {
|
|||
) => ReduxAction<SaveActionNameParams>;
|
||||
closeEditorLink?: React.ReactNode;
|
||||
actionRightPaneAdditionSections?: React.ReactNode;
|
||||
showSuggestedWidgets?: boolean;
|
||||
}
|
||||
|
||||
type QueryEditorContextProviderProps =
|
||||
|
|
@ -36,6 +37,7 @@ export function QueryEditorContextProvider({
|
|||
onCreateDatasourceClick,
|
||||
onEntityNotFoundBackClick,
|
||||
saveActionName,
|
||||
showSuggestedWidgets,
|
||||
}: QueryEditorContextProviderProps) {
|
||||
const value = useMemo(
|
||||
() => ({
|
||||
|
|
@ -47,6 +49,7 @@ export function QueryEditorContextProvider({
|
|||
onCreateDatasourceClick,
|
||||
onEntityNotFoundBackClick,
|
||||
saveActionName,
|
||||
showSuggestedWidgets,
|
||||
}),
|
||||
[
|
||||
actionRightPaneBackLink,
|
||||
|
|
@ -57,6 +60,7 @@ export function QueryEditorContextProvider({
|
|||
onCreateDatasourceClick,
|
||||
onEntityNotFoundBackClick,
|
||||
saveActionName,
|
||||
showSuggestedWidgets,
|
||||
],
|
||||
);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user