036f9b0f1b
## Description In this PR, we are separating widget and canvas interactions. going forward - Wigdets can be interacted with only in Preview mode. - Canvas based interactions will only be allowed in edit mode. Fixes #32138 Fixes #31570 Fixes #32058 _or_ Fixes `Issue URL` > [!WARNING] > _If no issue exists, please create an issue first, and check with the maintainers if the issue is valid._ ## Automation /ok-to-test tags="@tag.Anvil" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!IMPORTANT] > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/8506204162> > Commit: `d42107de5931bb39b656817b220e72737a30b5d0` > Cypress dashboard url: <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8506204162&attempt=1" target="_blank">Click here!</a> > All cypress tests have passed 🎉🎉🎉 <!-- end of auto-generated comment: Cypress test results --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Enabled new Anvil editor functionality for all users. - Improved user interaction with widgets and modal widgets inside the Anvil editor. - **Refactor** - Streamlined feature flag handling for a more consistent user experience. - Enhanced canvas interaction in Anvil editor by adjusting pointer events settings. - **Tests** - Updated and refined Cypress end-to-end tests for better reliability and coverage. - **Style** - Introduced new CSS rules for better handling of user interactions within the Anvil editor environment. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
72 lines
1.4 KiB
TypeScript
72 lines
1.4 KiB
TypeScript
import { Colors } from "constants/Colors";
|
|
|
|
import { Button } from "design-system";
|
|
import React from "react";
|
|
import styled from "styled-components";
|
|
|
|
const Wrapper = styled.div`
|
|
position: absolute;
|
|
z-index: 9;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
background: #ffffff61;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
pointer-events: all !important;
|
|
`;
|
|
|
|
const Container = styled.div`
|
|
text-align: center;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 10px;
|
|
height: 100%;
|
|
justify-content: center;
|
|
backdrop-filter: blur(1px);
|
|
`;
|
|
|
|
const Header = styled.div`
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
color: ${Colors.GREY_900};
|
|
margin-bottom: 12px;
|
|
`;
|
|
|
|
const ConnecData = styled(Button)`
|
|
margin-bottom: 16px;
|
|
`;
|
|
|
|
export function ConnectDataOverlay(props: {
|
|
onConnectData: () => void;
|
|
message: string;
|
|
btnText: string;
|
|
}) {
|
|
const onClick = () => {
|
|
props.onConnectData();
|
|
};
|
|
|
|
return (
|
|
<Wrapper>
|
|
<Container>
|
|
<Header className="t--cypress-table-overlay-header">
|
|
{props.message}
|
|
</Header>
|
|
<ConnecData
|
|
className="t--cypress-table-overlay-connectdata"
|
|
id={"table-overlay-connectdata"}
|
|
onClick={onClick}
|
|
size="md"
|
|
>
|
|
{props.btnText}
|
|
</ConnecData>
|
|
</Container>
|
|
</Wrapper>
|
|
);
|
|
}
|