42debc6d11
## Description Rename `design-system` package to `@appsmith/ads` ## Automation /ok-to-test tags="@tag.All" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/10319507327> > Commit: 65d9664dd75b750496458a6e1652e0da858e1fc6 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10319507327&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.All` > Spec: > <hr>Fri, 09 Aug 2024 13:47:50 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No
80 lines
1.9 KiB
TypeScript
80 lines
1.9 KiB
TypeScript
import React from "react";
|
|
import {
|
|
ACTION_EXECUTION_CANCEL,
|
|
ACTION_EXECUTION_MESSAGE,
|
|
createMessage,
|
|
} from "ee/constants/messages";
|
|
import ActionAPI from "api/ActionAPI";
|
|
import { Button, Spinner, Text } from "@appsmith/ads";
|
|
import styled from "styled-components";
|
|
import type { EditorTheme } from "./CodeEditor/EditorConfig";
|
|
import LoadingOverlayScreen from "./LoadingOverlayScreen";
|
|
|
|
const Wrapper = styled.div`
|
|
position: relative;
|
|
height: 100%;
|
|
width: 100%;
|
|
`;
|
|
|
|
const LoadingOverlayContainer = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: var(--ads-v2-spaces-3);
|
|
background-color: transparent;
|
|
position: relative;
|
|
z-index: 20;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin-top: 5px;
|
|
`;
|
|
|
|
const LoadingProgressWrapper = styled.div`
|
|
height: 100%;
|
|
`;
|
|
|
|
const InProgressText = styled(Text)`
|
|
text-align: center;
|
|
`;
|
|
|
|
const handleCancelActionExecution = () => {
|
|
ActionAPI.abortActionExecutionTokenSource.cancel();
|
|
};
|
|
|
|
interface ActionExecutionInProgressViewProps {
|
|
actionType: string;
|
|
theme?: EditorTheme;
|
|
}
|
|
|
|
const ActionExecutionInProgressView = ({
|
|
actionType,
|
|
theme,
|
|
}: ActionExecutionInProgressViewProps) => {
|
|
return (
|
|
<Wrapper>
|
|
<LoadingProgressWrapper>
|
|
<LoadingOverlayScreen theme={theme} />
|
|
<LoadingOverlayContainer>
|
|
<Spinner size="md" />
|
|
<InProgressText kind="body-m" renderAs="p">
|
|
{createMessage(ACTION_EXECUTION_MESSAGE, actionType)}
|
|
</InProgressText>
|
|
<Button
|
|
className={`t--cancel-action-button`}
|
|
kind="secondary"
|
|
onClick={() => {
|
|
handleCancelActionExecution();
|
|
}}
|
|
size="md"
|
|
>
|
|
{createMessage(ACTION_EXECUTION_CANCEL)}
|
|
</Button>
|
|
</LoadingOverlayContainer>
|
|
</LoadingProgressWrapper>
|
|
</Wrapper>
|
|
);
|
|
};
|
|
|
|
export default ActionExecutionInProgressView;
|