## Description Refactoring header actions on datasource page to support reusable queries on EE #### PR fixes following issue(s) Fixes [#28568](https://github.com/appsmithorg/appsmith/issues/28568) #### Type of change - Chore (housekeeping or task changes that don't impact user perception) ## Testing #### How Has This Been Tested? - [x] Manual - [ ] JUnit - [ ] Jest - [x] Cypress ## Checklist: #### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] 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 new header action management system in the data source editor, allowing for dynamic action button generation based on user permissions and editor type. - Implemented a new editor type detection hook to improve editor experience. - **Improvements** - Streamlined the data source editor interface by removing unused permissions checks and simplifying action button logic. - Enhanced the editor's routing system with additional constants for deprecated paths. - **Refactor** - Refactored the `DSFormHeader` component to utilize the new `useHeaderActions` hook for a cleaner and more maintainable codebase. - Updated Redux state management to include a new action handler for resetting editor state. - **Style** - Adjusted the layout of the `LeftPaneContainer` by removing the `min-width` property for a more responsive design. - **Chores** - Cleaned up imports and unused variables across multiple files to improve code clarity and maintainability. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
120 lines
3.5 KiB
TypeScript
120 lines
3.5 KiB
TypeScript
import React from "react";
|
|
import { useSelector } from "react-redux";
|
|
import NewActionButton from "pages/Editor/DataSourceEditor/NewActionButton";
|
|
import { EditorNames } from "./";
|
|
import type { Datasource } from "entities/Datasource";
|
|
import type { ApiDatasourceForm } from "entities/Datasource/RestAPIForm";
|
|
import { Button } from "design-system";
|
|
import {
|
|
GENERATE_NEW_PAGE_BUTTON_TEXT,
|
|
createMessage,
|
|
} from "@appsmith/constants/messages";
|
|
import AnalyticsUtil from "utils/AnalyticsUtil";
|
|
import history from "utils/history";
|
|
import { generateTemplateFormURL } from "@appsmith/RouteBuilder";
|
|
import {
|
|
getCurrentApplication,
|
|
getCurrentPageId,
|
|
getPagePermissions,
|
|
} from "selectors/editorSelectors";
|
|
import { useShowPageGenerationOnHeader } from "pages/Editor/DataSourceEditor/hooks";
|
|
import type { AppState } from "@appsmith/reducers";
|
|
import {
|
|
getHasCreatePagePermission,
|
|
hasCreateDSActionPermissionInApp,
|
|
} from "@appsmith/utils/BusinessFeatures/permissionPageHelpers";
|
|
import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag";
|
|
import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
|
|
|
|
export interface HeaderActionProps {
|
|
datasource: Datasource | ApiDatasourceForm | undefined;
|
|
isPluginAuthorized: boolean;
|
|
pluginType: string;
|
|
showReconnectButton?: boolean;
|
|
}
|
|
|
|
export const useHeaderActions = (
|
|
editorType: string,
|
|
{
|
|
datasource,
|
|
isPluginAuthorized,
|
|
pluginType,
|
|
showReconnectButton = false,
|
|
}: HeaderActionProps,
|
|
) => {
|
|
const pageId = useSelector(getCurrentPageId);
|
|
const isFeatureEnabled = useFeatureFlag(FEATURE_FLAG.license_gac_enabled);
|
|
const userAppPermissions = useSelector(
|
|
(state: AppState) => getCurrentApplication(state)?.userPermissions ?? [],
|
|
);
|
|
const pagePermissions = useSelector((state: AppState) =>
|
|
getPagePermissions(state),
|
|
);
|
|
const showGenerateButton = useShowPageGenerationOnHeader(
|
|
datasource as Datasource,
|
|
);
|
|
|
|
if (editorType === EditorNames.APPLICATION) {
|
|
const canCreateDatasourceActions = hasCreateDSActionPermissionInApp(
|
|
isFeatureEnabled,
|
|
datasource?.userPermissions ?? [],
|
|
pagePermissions,
|
|
);
|
|
const canCreatePages = getHasCreatePagePermission(
|
|
isFeatureEnabled,
|
|
userAppPermissions,
|
|
);
|
|
const canGeneratePage = canCreateDatasourceActions && canCreatePages;
|
|
|
|
const routeToGeneratePage = () => {
|
|
if (!showGenerateButton) {
|
|
// disable button when it doesn't support page generation
|
|
return;
|
|
}
|
|
AnalyticsUtil.logEvent("DATASOURCE_CARD_GEN_CRUD_PAGE_ACTION");
|
|
history.push(
|
|
generateTemplateFormURL({
|
|
pageId,
|
|
params: {
|
|
datasourceId: (datasource as Datasource).id,
|
|
new_page: true,
|
|
},
|
|
}),
|
|
);
|
|
};
|
|
|
|
const newActionButton = (
|
|
<NewActionButton
|
|
datasource={datasource as Datasource}
|
|
disabled={!canCreateDatasourceActions || !isPluginAuthorized}
|
|
eventFrom="datasource-pane"
|
|
pluginType={pluginType}
|
|
/>
|
|
);
|
|
|
|
const generatePageButton =
|
|
showGenerateButton && !showReconnectButton ? (
|
|
<Button
|
|
className={"t--generate-template"}
|
|
isDisabled={!canGeneratePage}
|
|
kind="secondary"
|
|
onClick={(e: any) => {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
routeToGeneratePage();
|
|
}}
|
|
size="md"
|
|
>
|
|
{createMessage(GENERATE_NEW_PAGE_BUTTON_TEXT)}
|
|
</Button>
|
|
) : null;
|
|
|
|
return {
|
|
newActionButton,
|
|
generatePageButton,
|
|
};
|
|
}
|
|
|
|
return {};
|
|
};
|