Update TreeComponent.test.tsx.snap

This reverts commit ec109b3145.

src/Common/TableEntity.tsx

@@ -0,0 +1,169 @@
+import {
+  Dropdown,
+  IDropdownOption,
+  IDropdownStyles,
+  IImageProps,
+  Image,
+  IStackTokens,
+  Stack,
+  TextField,
+  TooltipHost,
+} from "@fluentui/react";
+import React, { FunctionComponent } from "react";
+import DeleteIcon from "../../images/delete.svg";
+import EditIcon from "../../images/Edit_entity.svg";
+import { CassandraType, TableType } from "../Explorer/Tables/Constants";
+import { userContext } from "../UserContext";
+import { EntityValue } from "./EntityValue";
+
+const dropdownStyles: Partial<IDropdownStyles> = { dropdown: { width: 100 } };
+
+export interface TableEntityProps {
+  entityTypeLabel?: string;
+  entityPropertyLabel?: string;
+  entityValueLabel?: string;
+  isDeleteOptionVisible: boolean;
+  entityProperty: string;
+  entityPropertyPlaceHolder: string;
+  selectedKey: string | number;
+  entityValuePlaceholder: string;
+  entityValue: string | Date;
+  isEntityTypeDate: boolean;
+  options: { key: string; text: string }[];
+  isPropertyTypeDisable: boolean;
+  entityTimeValue: string;
+  isEntityValueDisable?: boolean;
+  onDeleteEntity?: () => void;
+  onEditEntity?: () => void;
+  onEntityPropertyChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
+  onEntityTypeChange: (event: React.FormEvent<HTMLElement>, selectedParam: IDropdownOption) => void;
+  onEntityValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
+  onSelectDate: (date: Date | null | undefined) => void;
+  onEntityTimeValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
+}
+
+export const TableEntity: FunctionComponent<TableEntityProps> = ({
+  entityTypeLabel,
+  entityPropertyLabel,
+  isDeleteOptionVisible,
+  entityProperty,
+  selectedKey,
+  entityPropertyPlaceHolder,
+  entityValueLabel,
+  entityValuePlaceholder,
+  entityValue,
+  options,
+  isPropertyTypeDisable,
+  isEntityTypeDate,
+  entityTimeValue,
+  isEntityValueDisable,
+  onEditEntity,
+  onDeleteEntity,
+  onEntityPropertyChange,
+  onEntityTypeChange,
+  onEntityValueChange,
+  onSelectDate,
+  onEntityTimeValueChange,
+}: TableEntityProps): JSX.Element => {
+  const imageProps: IImageProps = {
+    width: 16,
+    height: 30,
+    className: entityPropertyLabel ? "addRemoveIconLabel" : "addRemoveIcon",
+  };
+
+  const sectionStackTokens: IStackTokens = { childrenGap: 12 };
+
+  const handleKeyPress = (event: React.KeyboardEvent<HTMLElement>) => {
+    if (event.key === "Enter" || event.key === "Space") {
+      onEditEntity();
+    }
+  };
+  const handleKeyPressdelete = (event: React.KeyboardEvent<HTMLElement>) => {
+    if (event.key === "Enter" || event.key === "Space") {
+      onDeleteEntity();
+    }
+  };
+
+  const getEntityValueType = (): string => {
+    const { Int, Smallint, Tinyint } = CassandraType;
+    const { Double, Int32, Int64 } = TableType;
+
+    if (
+      selectedKey === Double ||
+      selectedKey === Int32 ||
+      selectedKey === Int64 ||
+      selectedKey === Int ||
+      selectedKey === Smallint ||
+      selectedKey === Tinyint
+    ) {
+      return "number";
+    }
+    return "string";
+  };
+
+  return (
+    <>
+      <Stack horizontal tokens={sectionStackTokens}>
+        <TextField
+          label={entityPropertyLabel && entityPropertyLabel}
+          id="entityPropertyId"
+          autoFocus
+          disabled={isPropertyTypeDisable}
+          placeholder={entityPropertyPlaceHolder}
+          value={entityProperty}
+          onChange={onEntityPropertyChange}
+          required
+        />
+        <Dropdown
+          label={entityTypeLabel && entityTypeLabel}
+          selectedKey={selectedKey}
+          onChange={onEntityTypeChange}
+          options={options}
+          disabled={isPropertyTypeDisable}
+          id="entityTypeId"
+          styles={dropdownStyles}
+        />
+        <EntityValue
+          entityValueLabel={entityValueLabel}
+          entityValueType={getEntityValueType()}
+          isEntityValueDisable={isEntityValueDisable}
+          entityValuePlaceholder={entityValuePlaceholder}
+          entityValue={entityValue}
+          isEntityTypeDate={isEntityTypeDate}
+          entityTimeValue={entityTimeValue}
+          onEntityValueChange={onEntityValueChange}
+          onSelectDate={onSelectDate}
+          onEntityTimeValueChange={onEntityTimeValueChange}
+        />
+        {!isEntityValueDisable && (
+          <TooltipHost content="Edit property" id="editTooltip">
+            <div tabIndex={0}>
+              <Image
+                {...imageProps}
+                src={EditIcon}
+                alt="editEntity"
+                id="editEntity"
+                onClick={onEditEntity}
+                tabIndex={0}
+                onKeyPress={handleKeyPress}
+              />
+            </div>
+          </TooltipHost>
+        )}
+        {isDeleteOptionVisible && userContext.apiType !== "Cassandra" && (
+          <TooltipHost content="Delete property" id="deleteTooltip">
+            <Image
+              {...imageProps}
+              src={DeleteIcon}
+              alt="delete entity"
+              id="deleteEntity"
+              onClick={onDeleteEntity}
+              tabIndex={0}
+              onKeyPress={handleKeyPressdelete}
+            />
+          </TooltipHost>
+        )}
+      </Stack>
+    </>
+  );
+};

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -201,20 +201,20 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
             Autoscale
           </label>
 
-        <input
+          <input
-          id="Manual-input"
+            id="Manual-input"
-          className="throughputInputRadioBtn"
+            className="throughputInputRadioBtn"
-          aria-label="Manual database throughput"
+            aria-label="Manual database throughput"
-          checked={!isAutoscaleSelected}
+            checked={!isAutoscaleSelected}
-          type="radio"
+            type="radio"
-          aria-required={true}
+            aria-required={true}
-          role="radio"
+            role="radio"
-          tabIndex={0}
+            tabIndex={0}
-          onChange={(e) => handleOnChangeMode(e, "Manual")}
+            onChange={(e) => handleOnChangeMode(e, "Manual")}
-        />
+          />
-        <label className="throughputInputRadioBtnLabel" htmlFor="Manual-input">
+          <label className="throughputInputRadioBtnLabel" htmlFor="Manual-input">
-          Manual
+            Manual
-        </label>
+          </label>
         </div>
       </Stack>
 

src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap

@@ -347,14 +347,12 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                     ariaLabel="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
                     className="panelInfoIcon"
                     iconName="Info"
-                    role="tooltip"
                     tabIndex={0}
                   >
                     <IconBase
                       ariaLabel="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
                       className="panelInfoIcon"
                       iconName="Info"
-                      role="tooltip"
                       styles={[Function]}
                       tabIndex={0}
                       theme={
@@ -635,7 +633,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                         aria-label="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
                         className="panelInfoIcon root-57"
                         data-icon-name="Info"
-                        role="tooltip"
+                        role="img"
                         tabIndex={0}
                       >
                         
@@ -1341,14 +1339,12 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                         ariaLabel="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
                         className="panelInfoIcon"
                         iconName="Info"
-                        role="tooltip"
                         tabIndex={0}
                       >
                         <IconBase
                           ariaLabel="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
                           className="panelInfoIcon"
                           iconName="Info"
-                          role="tooltip"
                           styles={[Function]}
                           tabIndex={0}
                           theme={
@@ -1629,7 +1625,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                             aria-label="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
                             className="panelInfoIcon root-57"
                             data-icon-name="Info"
-                            role="tooltip"
+                            role="img"
                             tabIndex={0}
                           >
                             

src/Explorer/Controls/TreeComponent/TreeComponent.tsx

@@ -10,7 +10,7 @@ import {
   IButtonStyles,
   IconButton,
   IContextualMenuItemProps,
-  IContextualMenuProps
+  IContextualMenuProps,
 } from "@fluentui/react";
 import * as React from "react";
 import AnimateHeight from "react-animate-height";

src/Explorer/Controls/TreeComponent/__snapshots__/TreeComponent.test.tsx.snap

@@ -40,32 +40,30 @@ exports[`TreeNodeComponent does not render children by default 1`] = `
   onKeyPress={[Function]}
   role="treeitem"
 >
-  <div>
+  <div
-    <div
+    className="treeNodeHeader "
-      className="treeNodeHeader "
+    data-test="label"
-      data-test="label"
+    style={
-      style={
+      Object {
-        Object {
+        "paddingLeft": 9,
-          "paddingLeft": 9,
-        }
       }
-      tabIndex={-1}
+    }
+    tabIndex={-1}
+  >
+    <img
+      alt="label branch is collapsed"
+      className="expandCollapseIcon"
+      onKeyPress={[Function]}
+      role="button"
+      src=""
+      tabIndex={0}
+    />
+    <span
+      className="nodeLabel"
+      title="label"
     >
-      <img
+      label
-        alt="label branch is collapsed"
+    </span>
-        className="expandCollapseIcon"
-        onKeyPress={[Function]}
-        role="button"
-        src=""
-        tabIndex={0}
-      />
-      <span
-        className="nodeLabel"
-        title="label"
-      >
-        label
-      </span>
-    </div>
   </div>
   <div
     className="loadingIconContainer"
@@ -145,80 +143,78 @@ exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`]
   onKeyPress={[Function]}
   role="treeitem"
 >
-  <div>
+  <div
-    <div
+    className="treeNodeHeader "
-      className="treeNodeHeader "
+    data-test="label"
-      data-test="label"
+    style={
-      style={
+      Object {
-        Object {
+        "paddingLeft": 23,
-          "paddingLeft": 23,
-        }
       }
-      tabIndex={-1}
+    }
+    tabIndex={-1}
+  >
+    <img
+      alt="label branch is expanded"
+      className="expandCollapseIcon"
+      onKeyPress={[Function]}
+      role="button"
+      src=""
+      tabIndex={0}
+    />
+    <span
+      className="nodeLabel"
+      title="label"
     >
-      <img
+      label
-        alt="label branch is expanded"
+    </span>
-        className="expandCollapseIcon"
+    <div
-        onKeyPress={[Function]}
+      onContextMenu={[Function]}
-        role="button"
+      onKeyPress={[Function]}
-        src=""
+    >
-        tabIndex={0}
+      <CustomizedIconButton
+        ariaLabel="More"
+        className="treeMenuEllipsis"
+        menuIconProps={
+          Object {
+            "iconName": "More",
+            "styles": Object {
+              "root": Object {
+                "fontSize": "18px",
+                "fontWeight": "bold",
+              },
+            },
+          }
+        }
+        menuProps={
+          Object {
+            "contextualMenuItemAs": [Function],
+            "coverTarget": true,
+            "directionalHint": 3,
+            "isBeakVisible": false,
+            "items": Array [
+              Object {
+                "className": undefined,
+                "disabled": true,
+                "key": "menuLabel",
+                "onClick": [Function],
+                "onRenderIcon": [Function],
+                "text": "menuLabel",
+              },
+            ],
+            "onMenuDismissed": [Function],
+            "onMenuOpened": [Function],
+          }
+        }
+        name="More"
+        styles={
+          Object {
+            "rootFocused": Object {
+              "outline": "1px dashed undefined",
+            },
+          }
+        }
+        title="More"
       />
-      <span
-        className="nodeLabel"
-        title="label"
-      >
-        label
-      </span>
-      <div
-        onContextMenu={[Function]}
-        onKeyPress={[Function]}
-      >
-        <CustomizedIconButton
-          ariaLabel="More"
-          className="treeMenuEllipsis"
-          menuIconProps={
-            Object {
-              "iconName": "More",
-              "styles": Object {
-                "root": Object {
-                  "fontSize": "18px",
-                  "fontWeight": "bold",
-                },
-              },
-            }
-          }
-          menuProps={
-            Object {
-              "contextualMenuItemAs": [Function],
-              "coverTarget": true,
-              "directionalHint": 3,
-              "isBeakVisible": false,
-              "items": Array [
-                Object {
-                  "className": undefined,
-                  "disabled": true,
-                  "key": "menuLabel",
-                  "onClick": [Function],
-                  "onRenderIcon": [Function],
-                  "text": "menuLabel",
-                },
-              ],
-              "onMenuDismissed": [Function],
-              "onMenuOpened": [Function],
-            }
-          }
-          name="More"
-          styles={
-            Object {
-              "rootFocused": Object {
-                "outline": "1px dashed undefined",
-              },
-            }
-          }
-          title="More"
-        />
-      </div>
     </div>
   </div>
   <div
@@ -298,32 +294,30 @@ exports[`TreeNodeComponent renders loading icon 1`] = `
   onKeyPress={[Function]}
   role="treeitem"
 >
-  <div>
+  <div
-    <div
+    className="treeNodeHeader "
-      className="treeNodeHeader "
+    data-test="label"
-      data-test="label"
+    style={
-      style={
+      Object {
-        Object {
+        "paddingLeft": 9,
-          "paddingLeft": 9,
-        }
       }
-      tabIndex={-1}
+    }
+    tabIndex={-1}
+  >
+    <img
+      alt="label branch is expanded"
+      className="expandCollapseIcon"
+      onKeyPress={[Function]}
+      role="button"
+      src=""
+      tabIndex={0}
+    />
+    <span
+      className="nodeLabel"
+      title="label"
     >
-      <img
+      label
-        alt="label branch is expanded"
+    </span>
-        className="expandCollapseIcon"
-        onKeyPress={[Function]}
-        role="button"
-        src=""
-        tabIndex={0}
-      />
-      <span
-        className="nodeLabel"
-        title="label"
-      >
-        label
-      </span>
-    </div>
   </div>
   <div
     className="loadingIconContainer"
@@ -374,71 +368,69 @@ exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents
   onKeyPress={[Function]}
   role="treeitem"
 >
-  <div>
+  <div
-    <div
+    className="treeNodeHeader "
-      className="treeNodeHeader "
+    data-test="label"
-      data-test="label"
+    style={
-      style={
+      Object {
-        Object {
+        "paddingLeft": 23,
-          "paddingLeft": 23,
-        }
       }
-      tabIndex={-1}
+    }
+    tabIndex={-1}
+  >
+    <img
+      alt="label branch is expanded"
+      className="expandCollapseIcon"
+      onKeyPress={[Function]}
+      role="button"
+      src=""
+      tabIndex={0}
+    />
+    <span
+      className="nodeLabel"
+      title="label"
     >
-      <img
+      label
-        alt="label branch is expanded"
+    </span>
-        className="expandCollapseIcon"
+    <div
-        onKeyPress={[Function]}
+      onContextMenu={[Function]}
-        role="button"
+      onKeyPress={[Function]}
-        src=""
+    >
-        tabIndex={0}
+      <CustomizedIconButton
+        ariaLabel="More"
+        className="treeMenuEllipsis"
+        menuIconProps={
+          Object {
+            "iconName": "More",
+            "styles": Object {
+              "root": Object {
+                "fontSize": "18px",
+                "fontWeight": "bold",
+              },
+            },
+          }
+        }
+        menuProps={
+          Object {
+            "contextualMenuItemAs": [Function],
+            "coverTarget": true,
+            "directionalHint": 3,
+            "isBeakVisible": false,
+            "items": Array [],
+            "onMenuDismissed": [Function],
+            "onMenuOpened": [Function],
+          }
+        }
+        name="More"
+        styles={
+          Object {
+            "rootFocused": Object {
+              "outline": "1px dashed undefined",
+            },
+          }
+        }
+        title="More"
       />
-      <span
-        className="nodeLabel"
-        title="label"
-      >
-        label
-      </span>
-      <div
-        onContextMenu={[Function]}
-        onKeyPress={[Function]}
-      >
-        <CustomizedIconButton
-          ariaLabel="More"
-          className="treeMenuEllipsis"
-          menuIconProps={
-            Object {
-              "iconName": "More",
-              "styles": Object {
-                "root": Object {
-                  "fontSize": "18px",
-                  "fontWeight": "bold",
-                },
-              },
-            }
-          }
-          menuProps={
-            Object {
-              "contextualMenuItemAs": [Function],
-              "coverTarget": true,
-              "directionalHint": 3,
-              "isBeakVisible": false,
-              "items": Array [],
-              "onMenuDismissed": [Function],
-              "onMenuOpened": [Function],
-            }
-          }
-          name="More"
-          styles={
-            Object {
-              "rootFocused": Object {
-                "outline": "1px dashed undefined",
-              },
-            }
-          }
-          title="More"
-        />
-      </div>
     </div>
   </div>
   <div
@@ -546,32 +538,30 @@ exports[`TreeNodeComponent renders unsorted children by default 1`] = `
   onKeyPress={[Function]}
   role="treeitem"
 >
-  <div>
+  <div
-    <div
+    className="treeNodeHeader "
-      className="treeNodeHeader "
+    data-test="label"
-      data-test="label"
+    style={
-      style={
+      Object {
-        Object {
+        "paddingLeft": 9,
-          "paddingLeft": 9,
-        }
       }
-      tabIndex={-1}
+    }
+    tabIndex={-1}
+  >
+    <img
+      alt="label branch is expanded"
+      className="expandCollapseIcon"
+      onKeyPress={[Function]}
+      role="button"
+      src=""
+      tabIndex={0}
+    />
+    <span
+      className="nodeLabel"
+      title="label"
     >
-      <img
+      label
-        alt="label branch is expanded"
+    </span>
-        className="expandCollapseIcon"
-        onKeyPress={[Function]}
-        role="button"
-        src=""
-        tabIndex={0}
-      />
-      <span
-        className="nodeLabel"
-        title="label"
-      >
-        label
-      </span>
-    </div>
   </div>
   <div
     className="loadingIconContainer"