add quotes to keyspace and table name for create table

src/Common/EntityValue.tsx

@@ -1,6 +1,5 @@
 import { DatePicker, TextField } from "@fluentui/react";
 import React, { FunctionComponent } from "react";
-import { attributeValueLabel } from "../Explorer/Panes/Tables/Validators/EntityTableHelper";
 
 export interface TableEntityProps {
   entityValueLabel?: string;
@@ -62,7 +61,6 @@ export const EntityValue: FunctionComponent<TableEntityProps> = ({
       placeholder={entityValuePlaceholder}
       value={typeof entityValue === "string" ? entityValue : ""}
       onChange={onEntityValueChange}
-      ariaLabel={attributeValueLabel}
     />
   );
 };

src/Common/TableEntity.tsx

@@ -12,7 +12,6 @@ import {
 import React, { FunctionComponent } from "react";
 import DeleteIcon from "../../images/delete.svg";
 import EditIcon from "../../images/Edit_entity.svg";
-import { attributeNameLabel, dataTypeLabel } from "../Explorer/Panes/Tables/Validators/EntityTableHelper";
 import { CassandraType, TableType } from "../Explorer/Tables/Constants";
 import { userContext } from "../UserContext";
 import { EntityValue } from "./EntityValue";
@@ -37,7 +36,7 @@ export interface TableEntityProps {
   onDeleteEntity?: () => void;
   onEditEntity?: () => void;
   onEntityPropertyChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
-  onEntityTypeChange: (event: React.FormEvent<HTMLElement>, selectedParam: IDropdownOption) => 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;
@@ -114,7 +113,6 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
           value={entityProperty}
           onChange={onEntityPropertyChange}
           required
-          ariaLabel={attributeNameLabel}
         />
         <Dropdown
           label={entityTypeLabel && entityTypeLabel}
@@ -124,7 +122,6 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
           disabled={isPropertyTypeDisable}
           id="entityTypeId"
           styles={dropdownStyles}
-          ariaLabel={dataTypeLabel}
         />
         <EntityValue
           entityValueLabel={entityValueLabel}

src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.ts

@@ -729,7 +729,6 @@ export class D3ForceGraph implements GraphRenderer {
     var iconGroup = newNodes
       .append("g")
       .attr("class", "iconContainer")
-      .attr("role", "group")
       .attr("tabindex", 0)
       .attr("aria-label", (d: D3Node) => {
         return this.retrieveNodeCaption(d);

src/Explorer/Graph/NewVertexComponent/NewVertexComponent.test.tsx

@@ -107,11 +107,11 @@ describe("New Vertex Component", () => {
   it("should call onTypeChange method on type dropdown change", () => {
     const DOWN_ARROW = { keyCode: 40 };
     const onTypeChange = jest.fn();
-    const dropdown = screen.getByRole("combobox");
+    const dropdown = screen.getByRole("listbox");
     dropdown.onclick = onTypeChange();
     dropdown.onkeydown = onTypeChange();
 
-    fireEvent.keyDown(screen.getByRole("combobox"), DOWN_ARROW);
+    fireEvent.keyDown(screen.getByRole("listbox"), DOWN_ARROW);
     fireEvent.click(screen.getByText(/number/));
     expect(onTypeChange).toHaveBeenCalled();
   });

src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx

@@ -145,7 +145,6 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                     type="text"
                     id="propertyKeyNewVertexPane"
                     componentRef={input}
-                    aria-required="true"
                     placeholder="Key"
                     autoComplete="off"
                     aria-label={`Enter value for propery ${index + 1}`}
@@ -153,8 +152,6 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                     onChange={(event: React.ChangeEvent<HTMLInputElement>) => onKeyChange(event, index)}
                   />
                 </div>
-                <span className="mandatoryStar">*&nbsp;</span>
-
                 <div className="valueCol">
                   <TextField
                     className="edgeInput"
@@ -168,7 +165,7 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                 </div>
                 <div>
                   <Dropdown
-                    role="combobox"
+                    role="listbox"
                     placeholder="Select an option"
                     defaultSelectedKey={data.values[0].type}
                     style={{ width: 100 }}

src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx

@@ -2,13 +2,13 @@ import { Checkbox, Dropdown, IDropdownOption, Link, Stack, Text, TextField } fro
 import * as Constants from "Common/Constants";
 import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils";
 import { InfoTooltip } from "Common/Tooltip/InfoTooltip";
-import { useSidePanel } from "hooks/useSidePanel";
-import React, { FunctionComponent, useState } from "react";
 import * as SharedConstants from "Shared/Constants";
 import { Action } from "Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "UserContext";
 import { isServerlessAccount } from "Utils/CapabilityUtils";
+import { useSidePanel } from "hooks/useSidePanel";
+import React, { FunctionComponent, useState } from "react";
 import { ThroughputInput } from "../../Controls/ThroughputInput/ThroughputInput";
 import Explorer from "../../Explorer";
 import { CassandraAPIDataClient } from "../../Tables/TableDataClient";
@@ -86,7 +86,7 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
         : `${createKeyspaceQueryPrefix} AND cosmosdb_provisioned_throughput=${newKeySpaceThroughput};`
       : `${createKeyspaceQueryPrefix};`;
     let tableQuery: string;
-    const createTableQueryPrefix = `CREATE TABLE ${keyspaceId}.${tableId.trim()} ${userTableQuery}`;
+    const createTableQueryPrefix = `CREATE TABLE \"${keyspaceId}\".\"${tableId.trim()}\" ${userTableQuery}`;
 
     if (tableThroughput) {
       if (isTableAutoscale) {

src/Explorer/Tabs/QueryTablesTab.html

@@ -134,7 +134,6 @@
             data-bind="click: selectQueryOptions, event: { keydown: onselectQueryOptionsKeyDown }"
             tabindex="0"
             role="button"
-            href=""
           >
             <span>Choose Columns... </span>
           </a>

src/Explorer/Tabs/Tabs.tsx

@@ -7,10 +7,10 @@ import { SplashScreen } from "Explorer/SplashScreen/SplashScreen";
 import { ConnectTab } from "Explorer/Tabs/ConnectTab";
 import { PostgresConnectTab } from "Explorer/Tabs/PostgresConnectTab";
 import { QuickstartTab } from "Explorer/Tabs/QuickstartTab";
-import { userContext } from "UserContext";
 import { useTeachingBubble } from "hooks/useTeachingBubble";
 import ko from "knockout";
 import React, { MutableRefObject, useEffect, useRef, useState } from "react";
+import { userContext } from "UserContext";
 import loadingIcon from "../../../images/circular_loader_black_16x16.gif";
 import errorIcon from "../../../images/close-black.svg";
 import { useObservable } from "../../hooks/useObservable";
@@ -102,20 +102,22 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
       ref={focusTab}
     >
       <span className="tabNavContentContainer">
-        <div className="tab_Content">
+        <a data-toggle="tab" href={"#" + tabId} tabIndex={-1}>
-          <span className="statusIconContainer" style={{ width: tabKind === ReactTabKind.Home ? 0 : 18 }}>
+          <div className="tab_Content">
-            {useObservable(tab?.isExecutionError || ko.observable(false)) && <ErrorIcon tab={tab} active={active} />}
+            <span className="statusIconContainer" style={{ width: tabKind === ReactTabKind.Home ? 0 : 18 }}>
-            {useObservable(tab?.isExecuting || ko.observable(false)) && (
+              {useObservable(tab?.isExecutionError || ko.observable(false)) && <ErrorIcon tab={tab} active={active} />}
-              <img className="loadingIcon" title="Loading" src={loadingIcon} alt="Loading" />
+              {useObservable(tab?.isExecuting || ko.observable(false)) && (
-            )}
+                <img className="loadingIcon" title="Loading" src={loadingIcon} alt="Loading" />
-          </span>
+              )}
-          <span className="tabNavText">{useObservable(tab?.tabTitle || ko.observable(ReactTabKind[tabKind]))}</span>
-          {tabKind !== ReactTabKind.Home && (
-            <span className="tabIconSection">
-              <CloseButton tab={tab} active={active} hovering={hovering} tabKind={tabKind} />
             </span>
-          )}
+            <span className="tabNavText">{useObservable(tab?.tabTitle || ko.observable(ReactTabKind[tabKind]))}</span>
-        </div>
+            {tabKind !== ReactTabKind.Home && (
+              <span className="tabIconSection">
+                <CloseButton tab={tab} active={active} hovering={hovering} tabKind={tabKind} />
+              </span>
+            )}
+          </div>
+        </a>
       </span>
     </li>
   );

tsconfig.strict.json

@@ -135,6 +135,7 @@
     "./src/quickstart.ts",
     "./src/setupTests.ts",
     "./src/userContext.test.ts",
+    "src/Common/EntityValue.tsx",
     "./src/Platform/Hosted/Components/SwitchAccount.tsx",
     "./src/Platform/Hosted/Components/SwitchSubscription.tsx"
   ],