Fix AddTableEntityPanel (#945)

* Fix AddTableEntityPanel

* Add CSS

* Fix snapshot

src/Explorer/Notebook/NotebookManager.tsx

@@ -141,6 +141,7 @@ export default class NotebookManager {
           notebookContentRef={notebookContentRef}
           onTakeSnapshot={onTakeSnapshot}
         />,
+        "440px",
         onClosePanel
       );
   }

src/Explorer/Panes/PanelContainerComponent.tsx

@@ -85,11 +85,12 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
 
 export const SidePanel: React.FC = () => {
   const isConsoleExpanded = useNotificationConsole((state) => state.isExpanded);
-  const { isOpen, panelContent, headerText } = useSidePanel((state) => {
+  const { isOpen, panelContent, panelWidth, headerText } = useSidePanel((state) => {
     return {
       isOpen: state.isOpen,
       panelContent: state.panelContent,
       headerText: state.headerText,
+      panelWidth: state.panelWidth,
     };
   });
   // TODO Refactor PanelContainerComponent into a functional component and remove this wrapper
@@ -100,6 +101,7 @@ export const SidePanel: React.FC = () => {
       panelContent={panelContent}
       headerText={headerText}
       isConsoleExpanded={isConsoleExpanded}
+      panelWidth={panelWidth}
     />
   );
 };

src/Explorer/Panes/Tables/AddTableEntityPanel.tsx

@@ -1,11 +1,11 @@
-import { IDropdownOption, Image, IPanelProps, IRenderFunction, Label, Stack, Text, TextField } from "@fluentui/react";
+import { IDropdownOption, Image, Label, Stack, Text, TextField } from "@fluentui/react";
 import { useBoolean } from "@fluentui/react-hooks";
 import React, { FunctionComponent, useEffect, useState } from "react";
 import * as _ from "underscore";
 import AddPropertyIcon from "../../../../images/Add-property.svg";
 import RevertBackIcon from "../../../../images/RevertBack.svg";
+import { getErrorMessage, handleError } from "../../../Common/ErrorHandlingUtils";
 import { TableEntity } from "../../../Common/TableEntity";
-import { useSidePanel } from "../../../hooks/useSidePanel";
 import { userContext } from "../../../UserContext";
 import * as TableConstants from "../../Tables/Constants";
 import * as DataTableUtilities from "../../Tables/DataTable/DataTableUtilities";
@@ -15,7 +15,7 @@ import { CassandraAPIDataClient, CassandraTableKey, TableDataClient } from "../.
 import * as TableEntityProcessor from "../../Tables/TableEntityProcessor";
 import * as Utilities from "../../Tables/Utilities";
 import QueryTablesTab from "../../Tabs/QueryTablesTab";
-import { PanelContainerComponent } from "../PanelContainerComponent";
+import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 import {
   attributeNameLabel,
   attributeValueLabel,
@@ -30,9 +30,7 @@ import {
   getCassandraDefaultEntities,
   getDefaultEntities,
   getEntityValuePlaceholder,
-  getPanelTitle,
   imageProps,
-  isValidEntities,
   options,
 } from "./Validators/EntityTableHelper";
 
@@ -61,7 +59,6 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
   tableEntityListViewModel,
   cassandraApiClient,
 }: AddTableEntityPanelProps): JSX.Element => {
-  const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
   const [entities, setEntities] = useState<EntityRowType[]>([]);
   const [selectedRow, setSelectedRow] = useState<number>(0);
   const [entityAttributeValue, setEntityAttributeValue] = useState<string>("");
@@ -70,6 +67,8 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
     isEntityValuePanelOpen,
     { setTrue: setIsEntityValuePanelTrue, setFalse: setIsEntityValuePanelFalse },
   ] = useBoolean(false);
+  const [formError, setFormError] = useState<string>("");
+  const [isExecuting, setIsExecuting] = useState<boolean>(false);
 
   /* Get default and previous saved entity headers */
   useEffect(() => {
@@ -98,19 +97,36 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
   };
 
   /* Add new entity attribute */
-  const submit = async (event: React.FormEvent<HTMLInputElement>): Promise<void> => {
-    if (!isValidEntities(entities)) {
-      return undefined;
+  const onSubmit = async (): Promise<void> => {
+    for (let i = 0; i < entities.length; i++) {
+      const { property, type } = entities[i];
+      if (property === "" || property === undefined) {
+        setFormError(`Property name cannot be empty. Please enter a property name`);
+        return;
       }
-    event.preventDefault();
 
+      if (!type) {
+        setFormError(`Property type cannot be empty. Please select a type from the dropdown for property ${property}`);
+        return;
+      }
+    }
+
+    setIsExecuting(true);
     const entity: Entities.ITableEntity = entityFromAttributes(entities);
     const newEntity: Entities.ITableEntity = await tableDataClient.createDocument(queryTablesTab.collection, entity);
+    try {
       await tableEntityListViewModel.addEntityToCache(newEntity);
       if (!tryInsertNewHeaders(tableEntityListViewModel, newEntity)) {
         tableEntityListViewModel.redrawTableThrottled();
       }
-    closeSidePanel();
+    } catch (error) {
+      const errorMessage = getErrorMessage(error);
+      setFormError(errorMessage);
+      handleError(errorMessage, "AddTableRow");
+      throw error;
+    } finally {
+      setIsExecuting(false);
+    }
   };
 
   const tryInsertNewHeaders = (viewModel: TableEntityListViewModel, newEntity: Entities.ITableEntity): boolean => {
@@ -200,10 +216,35 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
     setIsEntityValuePanelTrue();
   };
 
-  const renderPanelContent = (): JSX.Element => {
+  if (isEntityValuePanelOpen) {
     return (
-      <form className="panelFormWrapper">
-        <div className="panelFormWrapper">
+      <Stack style={{ margin: "20px 0", padding: "0 34px" }}>
+        <Stack horizontal {...columnProps}>
+          <Image {...backImageProps} src={RevertBackIcon} alt="back" onClick={() => setIsEntityValuePanelFalse()} />
+          <Label>{entityAttributeProperty}</Label>
+        </Stack>
+        <TextField
+          multiline
+          rows={5}
+          value={entityAttributeValue}
+          onChange={(event, newInput?: string) => {
+            entityChange(newInput, selectedRow, "value");
+            setEntityAttributeValue(newInput);
+          }}
+        />
+      </Stack>
+    );
+  }
+
+  const props: RightPaneFormProps = {
+    formError,
+    isExecuting,
+    submitButtonText: getButtonLabel(userContext.apiType),
+    onSubmit,
+  };
+
+  return (
+    <RightPaneForm {...props}>
       <div className="panelMainContent">
         {entities.map((entity, index) => {
           return (
@@ -249,61 +290,6 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
           </Stack>
         )}
       </div>
-          <div className="paneFooter">
-            <div className="leftpanel-okbut">
-              <input
-                type="submit"
-                onClick={submit}
-                className="genericPaneSubmitBtn"
-                value={getButtonLabel(userContext.apiType)}
-              />
-            </div>
-          </div>
-        </div>
-      </form>
-    );
-  };
-
-  const onRenderNavigationContent: IRenderFunction<IPanelProps> = () => {
-    return (
-      <Stack horizontal {...columnProps}>
-        <Image {...backImageProps} src={RevertBackIcon} alt="back" onClick={() => setIsEntityValuePanelFalse()} />
-        <Label>{entityAttributeProperty}</Label>
-      </Stack>
-    );
-  };
-
-  if (isEntityValuePanelOpen) {
-    return (
-      <PanelContainerComponent
-        headerText=""
-        onRenderNavigationContent={onRenderNavigationContent}
-        panelWidth="700px"
-        isOpen={true}
-        panelContent={
-          <TextField
-            multiline
-            rows={5}
-            className="entityValueTextField"
-            value={entityAttributeValue}
-            onChange={(event, newInput?: string) => {
-              entityChange(newInput, selectedRow, "value");
-              setEntityAttributeValue(newInput);
-            }}
-          />
-        }
-        isConsoleExpanded={false}
-      />
-    );
-  }
-
-  return (
-    <PanelContainerComponent
-      headerText={getPanelTitle(userContext.apiType)}
-      panelWidth="700px"
-      isOpen={true}
-      panelContent={renderPanelContent()}
-      isConsoleExpanded={false}
-    />
+    </RightPaneForm>
   );
 };

src/Explorer/Panes/Tables/Validators/EntityTableHelper.tsx

@@ -80,7 +80,7 @@ export const int64Placeholder = "Enter a signed 64-bit integer, in the range (-2
 
 export const columnProps: Partial<IStackProps> = {
   tokens: { childrenGap: 10 },
-  styles: { root: { width: 680 } },
+  styles: { root: { width: 680, marginBottom: 8 } },
 };
 
 // helper functions
@@ -134,8 +134,8 @@ export const getEntityValuePlaceholder = (entityType: string | number): string =
 
 export const isValidEntities = (entities: EntityRowType[]): boolean => {
   for (let i = 0; i < entities.length; i++) {
-    const { property } = entities[i];
-    if (property === "" || property === undefined) {
+    const { property, type } = entities[i];
+    if (property === "" || property === undefined || !type) {
       return false;
     }
   }
@@ -170,13 +170,6 @@ export const getDefaultEntities = (headers: string[], entityTypes: EntityType):
   return defaultEntities;
 };
 
-export const getPanelTitle = (apiType: string): string => {
-  if (apiType === "Cassandra") {
-    return "Add Table Row";
-  }
-  return "Add Table Row";
-};
-
 export const getAddButtonLabel = (apiType: string): string => {
   if (apiType === "Cassandra") {
     return "Add Row";

src/Explorer/Tabs/QueryTablesTab.tsx

@@ -137,13 +137,14 @@ export default class QueryTablesTab extends TabsBase {
     useSidePanel
       .getState()
       .openSidePanel(
-        "Add Table Entity",
+        "Add Table Row",
         <AddTableEntityPanel
           tableDataClient={this.tableDataClient}
           queryTablesTab={this}
           tableEntityListViewModel={this.tableEntityListViewModel()}
           cassandraApiClient={new CassandraAPIDataClient()}
-        />
+        />,
+        "700px"
       );
   };
 

src/hooks/useSidePanel.ts

@@ -2,14 +2,17 @@ import create, { UseStore } from "zustand";
 
 export interface SidePanelState {
   isOpen: boolean;
+  panelWidth: string;
   panelContent?: JSX.Element;
   headerText?: string;
-  openSidePanel: (headerText: string, panelContent: JSX.Element, onClose?: () => void) => void;
+  openSidePanel: (headerText: string, panelContent: JSX.Element, panelWidth?: string, onClose?: () => void) => void;
   closeSidePanel: () => void;
 }
 
 export const useSidePanel: UseStore<SidePanelState> = create((set) => ({
   isOpen: false,
-  openSidePanel: (headerText, panelContent) => set((state) => ({ ...state, headerText, panelContent, isOpen: true })),
+  panelWidth: "440px",
+  openSidePanel: (headerText, panelContent, panelWidth = "440px") =>
+    set((state) => ({ ...state, headerText, panelContent, panelWidth, isOpen: true })),
   closeSidePanel: () => set((state) => ({ ...state, isOpen: false })),
 }));