[Query Copilot] Pin panel footer to the bottom, remove gap between panel and console (#1511)

* Move footer when save button is enabled to the bottom, remove gap between notification console and right panel

* Change the way panel height is calculated

* Remove unnecessary operator

* Change condition

* Fix snapshot

* Update panel height after animation ends and use different css for showing save button to the bottom of the page

* Fix ts compile
This commit is contained in:
v-darkora
2023-07-07 09:09:15 +02:00
committed by GitHub
parent 3bef1ed136
commit 0eaa5d004b
7 changed files with 55 additions and 17 deletions

View File

@@ -1,4 +1,4 @@
import React, { FunctionComponent, ReactNode } from "react";
import React, { CSSProperties, FunctionComponent, ReactNode } from "react";
import { PanelFooterComponent } from "../PanelFooterComponent";
import { PanelInfoErrorComponent } from "../PanelInfoErrorComponent";
import { PanelLoadingScreen } from "../PanelLoadingScreen";
@@ -11,6 +11,7 @@ export interface RightPaneFormProps {
isSubmitButtonHidden?: boolean;
isSubmitButtonDisabled?: boolean;
children?: ReactNode;
footerStyle?: CSSProperties;
}
export const RightPaneForm: FunctionComponent<RightPaneFormProps> = ({
@@ -21,6 +22,7 @@ export const RightPaneForm: FunctionComponent<RightPaneFormProps> = ({
isSubmitButtonHidden = false,
isSubmitButtonDisabled = false,
children,
footerStyle,
}: RightPaneFormProps) => {
const handleOnSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
@@ -33,7 +35,11 @@ export const RightPaneForm: FunctionComponent<RightPaneFormProps> = ({
{formError && <PanelInfoErrorComponent messageType="error" message={formError} showErrorDetails={true} />}
{children}
{!isSubmitButtonHidden && (
<PanelFooterComponent buttonLabel={submitButtonText} isButtonDisabled={isSubmitButtonDisabled} />
<PanelFooterComponent
buttonLabel={submitButtonText}
isButtonDisabled={isSubmitButtonDisabled}
style={footerStyle}
/>
)}
</form>
{isExecuting && <PanelLoadingScreen />}