## Description Earlier the `New query` button was primary and `Generate New Page` button was secondary button but now this PR interchanges the UI for both only for the preview data supported datasources i.e. Google sheet, Mysql, Postgres, Mongo Mock db. #### PR fixes following issue(s) Fixes #29599 > 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** - Introduced the ability to preview data within the data source editor for supported plugins. - **Enhancements** - Improved user interface by changing certain buttons from secondary to primary, enhancing visibility and interaction. - **Refactor** - Streamlined the logic for determining if a data source plugin supports data preview. - **Style** - Updated button styles for a more consistent and prominent user interface in the data source editor sections. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
144 lines
4.4 KiB
TypeScript
144 lines
4.4 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,
|
|
getCurrentApplicationId,
|
|
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";
|
|
import { ActionParentEntityType } from "@appsmith/entities/Engine/actionHelpers";
|
|
import { isEnabledForPreviewData } from "utils/editorContextUtils";
|
|
import { getPlugin } from "@appsmith/selectors/entitiesSelector";
|
|
|
|
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,
|
|
);
|
|
|
|
const plugin = useSelector((state: AppState) =>
|
|
getPlugin(state, datasource?.pluginId || ""),
|
|
);
|
|
|
|
const isPluginAllowedToPreviewData =
|
|
!!plugin && isEnabledForPreviewData(datasource as Datasource, plugin);
|
|
|
|
if (editorType === EditorNames.APPLICATION) {
|
|
const canCreateDatasourceActions = hasCreateDSActionPermissionInApp({
|
|
isEnabled: isFeatureEnabled,
|
|
dsPermissions: 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"
|
|
isNewQuerySecondaryButton={!!isPluginAllowedToPreviewData}
|
|
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 {};
|
|
};
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
export const useParentEntityInfo = (editorType: string) => {
|
|
const appId = useSelector(getCurrentApplicationId);
|
|
const pageId = useSelector(getCurrentPageId);
|
|
|
|
return {
|
|
editorId: appId || "",
|
|
parentEntityId: pageId || "",
|
|
parentEntityType: ActionParentEntityType.PAGE,
|
|
};
|
|
};
|