2480a3c3fc
When action execution is triggered, we show no signs or indications of the action running in other parts of the page except for the run button, This PR introduces a spinner in the ResponseView for both APIs and Queries. Fixes #23956 - New feature (non-breaking change which adds functionality) > > > ## 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 - [x] Manual - [ ] 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/Test-plan-implementation#speedbreaker-features-to-consider-for-every-change) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans/_edit#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
72 lines
1.8 KiB
TypeScript
72 lines
1.8 KiB
TypeScript
import React from "react";
|
|
import {
|
|
ACTION_EXECUTION_CANCEL,
|
|
ACTION_EXECUTION_MESSAGE,
|
|
createMessage,
|
|
} from "@appsmith/constants/messages";
|
|
import ActionAPI from "api/ActionAPI";
|
|
import { Button, Spinner, Text } from "design-system";
|
|
import styled from "styled-components";
|
|
import type { EditorTheme } from "./CodeEditor/EditorConfig";
|
|
import LoadingOverlayScreen from "./LoadingOverlayScreen";
|
|
|
|
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();
|
|
};
|
|
|
|
type ActionExecutionInProgressViewProps = {
|
|
actionType: string;
|
|
theme?: EditorTheme;
|
|
};
|
|
|
|
const ActionExecutionInProgressView = ({
|
|
actionType,
|
|
theme,
|
|
}: ActionExecutionInProgressViewProps) => {
|
|
return (
|
|
<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>
|
|
);
|
|
};
|
|
|
|
export default ActionExecutionInProgressView;
|