1afe639911
## Description Moves the Schema in Query Pane from the right side to the tab on the bottom. This is done to eventually remove the right side pane for Side by Side layout #### PR fixes following issue(s) Fixes #30873 #### Media https://github.com/appsmithorg/appsmith/assets/12022471/28c5086a-1967-4a72-8dc5-0717751198cf #### Type of change - 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. - [ x ] Manual - [ x ] Jest - [ x ] Cypress <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced a refresh button in the datasource structure container for easy refreshing. - Added a new state to handle scenarios with no columns to display, enhancing user feedback. - Implemented conditional rendering of components based on new props and states, improving UI responsiveness and interaction. - **Enhancements** - Updated placeholder texts and messages for a clearer user experience. - Improved the layout and styling of various components for better visual appeal and usability. - **Refactor** - Streamlined the rendering logic and state management in several components, leading to a cleaner codebase. - Removed unused imports and functions, optimizing component performance. - **Bug Fixes** - Fixed issues in test suites related to table schema handling and selection. - **UI Changes** - Adjusted styling properties for better alignment, display, and gap spacing in the datasource structure search container. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
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 "@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 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;
|