[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

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -5,18 +5,18 @@
 import { Dropdown, IDropdownOption } from "@fluentui/react";
 import * as React from "react";
 import AnimateHeight from "react-animate-height";
-import LoaderIcon from "../../../../images/circular_loader_black_16x16.gif";
 import ClearIcon from "../../../../images/Clear-1.svg";
+import ChevronDownIcon from "../../../../images/QueryBuilder/CollapseChevronDown_16x.png";
+import ChevronUpIcon from "../../../../images/QueryBuilder/CollapseChevronUp_16x.png";
+import LoaderIcon from "../../../../images/circular_loader_black_16x16.gif";
 import ErrorBlackIcon from "../../../../images/error_black.svg";
 import ErrorRedIcon from "../../../../images/error_red.svg";
 import infoBubbleIcon from "../../../../images/info-bubble-9x9.svg";
 import InfoIcon from "../../../../images/info_color.svg";
 import LoadingIcon from "../../../../images/loading.svg";
-import ChevronDownIcon from "../../../../images/QueryBuilder/CollapseChevronDown_16x.png";
-import ChevronUpIcon from "../../../../images/QueryBuilder/CollapseChevronUp_16x.png";
 import { ClientDefaults, KeyCodes } from "../../../Common/Constants";
-import { useNotificationConsole } from "../../../hooks/useNotificationConsole";
 import { userContext } from "../../../UserContext";
+import { useNotificationConsole } from "../../../hooks/useNotificationConsole";
 import { ConsoleData, ConsoleDataType } from "./ConsoleData";
 
 export interface NotificationConsoleComponentProps {
@@ -256,6 +256,7 @@ export class NotificationConsoleComponent extends React.Component<
     if (this.props.isConsoleExpanded && this.consoleHeaderElement) {
       this.consoleHeaderElement.focus();
     }
+    useNotificationConsole.getState().setConsoleAnimationFinished(true);
   };
 
   private updateConsoleData = (prevProps: NotificationConsoleComponentProps): void => {

src/Explorer/Panes/PanelContainerComponent.tsx

@@ -8,6 +8,7 @@ export interface PanelContainerProps {
   panelContent?: JSX.Element;
   isConsoleExpanded: boolean;
   isOpen: boolean;
+  isConsoleAnimationFinished?: boolean;
   panelWidth?: string;
   onRenderNavigationContent?: IRenderFunction<IPanelProps>;
 }
@@ -28,7 +29,7 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
     };
   }
 
-  componentDidMount(): void {
+  omponentDidMount(): void {
     window.addEventListener("resize", () => this.setState({ height: this.getPanelHeight() }));
   }
 
@@ -36,6 +37,15 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
     window.removeEventListener("resize", () => this.setState({ height: this.getPanelHeight() }));
   }
 
+  componentDidUpdate(): void {
+    if (useNotificationConsole.getState().consoleAnimationFinished || this.state.height !== this.getPanelHeight()) {
+      this.setState({
+        height: this.getPanelHeight(),
+      });
+      useNotificationConsole.getState().setConsoleAnimationFinished(false);
+    }
+  }
+
   render(): JSX.Element {
     if (!this.props.panelContent) {
       return <></>;
@@ -59,7 +69,7 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
           header: { padding: "0 0 8px 34px" },
           commands: { marginTop: 8 },
         }}
-        style={{ height: this.getPanelHeight() }}
+        style={{ height: this.state.height }}
       >
         {this.props.panelContent}
       </Panel>
@@ -75,16 +85,22 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
   };
 
   private getPanelHeight = (): string => {
-    const consoleHeight = this.props.isConsoleExpanded
+    const notificationConsole = document.getElementById("explorerNotificationConsole");
-      ? PanelContainerComponent.consoleContentHeight + PanelContainerComponent.consoleHeaderHeight
+    if (notificationConsole) {
-      : PanelContainerComponent.consoleHeaderHeight;
+      return window.innerHeight - notificationConsole.clientHeight + "px";
-    const panelHeight = window.innerHeight - consoleHeight;
+    }
-    return panelHeight + "px";
+    return (
+      window.innerHeight -
+      (this.props.isConsoleExpanded
+        ? PanelContainerComponent.consoleContentHeight + PanelContainerComponent.consoleHeaderHeight
+        : PanelContainerComponent.consoleHeaderHeight) +
+      "px"
+    );
   };
 }
-
 export const SidePanel: React.FC = () => {
   const isConsoleExpanded = useNotificationConsole((state) => state.isExpanded);
+  const isConsoleAnimationFinished = useNotificationConsole((state) => state.consoleAnimationFinished);
   const { isOpen, panelContent, panelWidth, headerText } = useSidePanel((state) => {
     return {
       isOpen: state.isOpen,
@@ -102,6 +118,7 @@ export const SidePanel: React.FC = () => {
       headerText={headerText}
       isConsoleExpanded={isConsoleExpanded}
       panelWidth={panelWidth}
+      isConsoleAnimationFinished={isConsoleAnimationFinished}
     />
   );
 };

src/Explorer/Panes/PanelFooterComponent.tsx

@@ -1,16 +1,18 @@
 import { PrimaryButton } from "@fluentui/react";
-import React from "react";
+import React, { CSSProperties } from "react";
 
 export interface PanelFooterProps {
   buttonLabel: string;
   isButtonDisabled?: boolean;
+  style?: CSSProperties;
 }
 
 export const PanelFooterComponent: React.FunctionComponent<PanelFooterProps> = ({
   buttonLabel,
   isButtonDisabled,
+  style,
 }: PanelFooterProps): JSX.Element => (
-  <div className="panelFooter">
+  <div className="panelFooter" style={style}>
     <PrimaryButton
       type="submit"
       id="sidePanelOkButton"

src/Explorer/Panes/RightPaneForm/RightPaneForm.tsx

@@ -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 />}

src/Explorer/Panes/SaveQueryPane/SaveQueryPane.tsx

@@ -139,10 +139,11 @@ export const SaveQueryPane: FunctionComponent<SaveQueryPaneProps> = ({
     onSubmit: () => {
       isSaveQueryEnabled() ? submit() : setupQueries();
     },
+    footerStyle: isSaveQueryEnabled() ? { flexGrow: 0 } : {},
   };
   return (
     <RightPaneForm {...props}>
-      <div className="panelFormWrapper">
+      <div className="panelFormWrapper" style={{ flexGrow: 1 }}>
         <div className="panelMainContent">
           {!isSaveQueryEnabled() ? (
             <Text variant="small">{setupSaveQueriesText}</Text>

src/Explorer/Panes/SaveQueryPane/__snapshots__/SaveQueryPane.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`Save Query Pane should render Default properly 1`] = `
 <RightPaneForm
+  footerStyle={Object {}}
   formError=""
   isExecuting={false}
   onSubmit={[Function]}
@@ -9,6 +10,11 @@ exports[`Save Query Pane should render Default properly 1`] = `
 >
   <div
     className="panelFormWrapper"
+    style={
+      Object {
+        "flexGrow": 1,
+      }
+    }
   >
     <div
       className="panelMainContent"

src/hooks/useNotificationConsole.ts

@@ -5,21 +5,26 @@ export interface NotificationConsoleState {
   isExpanded: boolean;
   inProgressConsoleDataIdToBeDeleted: string;
   consoleData: ConsoleData | undefined;
+  consoleAnimationFinished: boolean;
   expandConsole: () => void;
   // TODO Remove this method. Add a `closeConsole` method instead
   setIsExpanded: (isExpanded: boolean) => void;
   // TODO These two methods badly need a refactor. Not very react friendly.
   setNotificationConsoleData: (consoleData: ConsoleData) => void;
   setInProgressConsoleDataIdToBeDeleted: (id: string) => void;
+  setConsoleAnimationFinished: (consoleAnimationFinished: boolean) => void;
 }
 
 export const useNotificationConsole: UseStore<NotificationConsoleState> = create((set) => ({
   isExpanded: false,
   consoleData: undefined,
   inProgressConsoleDataIdToBeDeleted: "",
+  consoleAnimationFinished: false,
   expandConsole: () => set((state) => ({ ...state, isExpanded: true })),
   setIsExpanded: (isExpanded) => set((state) => ({ ...state, isExpanded })),
   setNotificationConsoleData: (consoleData: ConsoleData) => set((state) => ({ ...state, consoleData })),
   setInProgressConsoleDataIdToBeDeleted: (id: string) =>
     set((state) => ({ ...state, inProgressConsoleDataIdToBeDeleted: id })),
+  setConsoleAnimationFinished: (consoleAnimationFinished: boolean) =>
+    set({ consoleAnimationFinished: consoleAnimationFinished }),
 }));