Added TableAPI whitespace check and trim values (#1731)

* Added TableAPI whitespace check and trim values

* Reverted value is not required unless Row or PrimaryKey

* Prettier Run

* Add full whitespace check on Keys

* Prettier formatting

* Fixed type

* Added whitespace check for tabs, vertical tabs, formfeeds, line breaks, etc

* Fixed logic

src/Explorer/Panes/Tables/AddTableEntityPanel.tsx

@@ -1,5 +1,6 @@
 import { IDropdownOption, Image, Label, Stack, Text, TextField } from "@fluentui/react";
 import { useBoolean } from "@fluentui/react-hooks";
+import { logConsoleError } from "Utils/NotificationConsoleUtils";
 import React, { FunctionComponent, useEffect, useState } from "react";
 import * as _ from "underscore";
 import AddPropertyIcon from "../../../../images/Add-property.svg";
@@ -97,9 +98,19 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
   /* Add new entity attribute */
   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`);
+      const { property, type, value } = entities[i];
+      if ((property === "PartitionKey" && value === "") || (property === "RowKey" && value === "")) {
+        logConsoleError(`${property} cannot be empty. Please input a value for ${property}`);
+        setFormError(`${property} cannot be empty. Please input a value for ${property}`);
+        return;
+      }
+
+      if (
+        (property === "PartitionKey" && containsAnyWhiteSpace(value) === true) ||
+        (property === "RowKey" && containsAnyWhiteSpace(value) === true)
+      ) {
+        logConsoleError(`${property} cannot have whitespace. Please input a value for ${property} without whitespace`);
+        setFormError(`${property} cannot have whitespace. Please input a value for ${property} without whitespace`);
         return;
       }
 
@@ -107,6 +118,8 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
         setFormError(`Property type cannot be empty. Please select a type from the dropdown for property ${property}`);
         return;
       }
+
+      setFormError("");
     }
 
     setIsExecuting(true);
@@ -127,6 +140,13 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
     }
   };
 
+  const containsAnyWhiteSpace = (entityValue: string) => {
+    if (/\s/.test(entityValue)) {
+      return true;
+    }
+    return false;
+  };
+
   const tryInsertNewHeaders = (viewModel: TableEntityListViewModel, newEntity: Entities.ITableEntity): boolean => {
     let newHeaders: string[] = [];
     const keys = Object.keys(newEntity);
@@ -182,9 +202,14 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
   const entityChange = (value: string | Date, indexOfInput: number, key: string): void => {
     const cloneEntities: EntityRowType[] = [...entities];
     if (key === "property") {
-      cloneEntities[indexOfInput].property = value.toString();
+      cloneEntities[indexOfInput].property = value.toString().trim();
     } else if (key === "time") {
       cloneEntities[indexOfInput].entityTimeValue = value.toString();
+    } else if (
+      cloneEntities[indexOfInput].property === "PartitionKey" ||
+      cloneEntities[indexOfInput].property === "RowKey"
+    ) {
+      cloneEntities[indexOfInput].value = value.toString().trim();
     } else {
       cloneEntities[indexOfInput].value = value.toString();
     }

src/Explorer/Panes/Tables/EditTableEntityPanel.tsx

@@ -1,5 +1,6 @@
 import { IDropdownOption, Image, Label, Stack, Text, TextField } from "@fluentui/react";
 import { useBoolean } from "@fluentui/react-hooks";
+import { logConsoleError } from "Utils/NotificationConsoleUtils";
 import React, { FunctionComponent, useEffect, useState } from "react";
 import * as _ from "underscore";
 import AddPropertyIcon from "../../../../images/Add-property.svg";
@@ -190,7 +191,7 @@ export const EditTableEntityPanel: FunctionComponent<EditTableEntityPanelProps>
 
   const onSubmit = async (): Promise<void> => {
     for (let i = 0; i < entities.length; i++) {
-      const { property, type } = entities[i];
+      const { property, type, value } = entities[i];
       if (property === "" || property === undefined) {
         setFormError(`Property name cannot be empty. Please enter a property name`);
         return;
@@ -200,6 +201,17 @@ export const EditTableEntityPanel: FunctionComponent<EditTableEntityPanelProps>
         setFormError(`Property type cannot be empty. Please select a type from the dropdown for property ${property}`);
         return;
       }
+
+      if (
+        (property === "PartitionKey" && value === "") ||
+        (property === "PartitionKey" && value === undefined) ||
+        (property === "RowKey" && value === "") ||
+        (property === "RowKey" && value === undefined)
+      ) {
+        logConsoleError(`${property} cannot be empty. Please input a value for ${property}`);
+        setFormError(`${property} cannot be empty. Please input a value for ${property}`);
+        return;
+      }
     }
 
     setIsExecuting(true);
@@ -359,7 +371,7 @@ export const EditTableEntityPanel: FunctionComponent<EditTableEntityPanelProps>
               selectedKey={entity.type}
               entityPropertyPlaceHolder={detailedHelp}
               entityValuePlaceholder={entity.entityValuePlaceholder}
-              entityValue={entity.value?.toString()}
+              entityValue={entity.value.toString()}
               isEntityTypeDate={entity.isEntityTypeDate}
               entityTimeValue={entity.entityTimeValue}
               isEntityValueDisable={entity.isEntityValueDisable}