Fix typescript strict issues for getCollectionDataUsageSize and few more

src/Common/ErrorHandlingUtils.ts

@@ -28,10 +28,10 @@ export const getErrorMessage = (error: string | Error = ""): string => {
 };
 
 export const getErrorStack = (error: string | Error): string => {
-  return typeof error === "string" ? undefined : error.stack;
+  return typeof error === "string" ? "" : error.stack === undefined ? "" : error.stack;
 };
 
-const sendNotificationForError = (errorMessage: string, errorCode: number | string): void => {
+const sendNotificationForError = (errorMessage: string, errorCode: number | string | undefined): void => {
   if (errorCode === HttpStatusCodes.Forbidden) {
     if (errorMessage?.toLowerCase().indexOf("sharedoffer is disabled for your account") > 0) {
       return;

src/Common/dataAccess/getCollectionDataUsageSize.ts

@@ -40,13 +40,16 @@ interface MetricsResponse {
   value: MetricsData[];
 }
 
-export const getCollectionUsageSizeInKB = async (databaseName: string, containerName: string): Promise<number> => {
+export const getCollectionUsageSizeInKB = async (
+  databaseName: string,
+  containerName: string
+): Promise<number | undefined> => {
   if (userContext.authType !== AuthType.AAD) {
     return undefined;
   }
 
   const { subscriptionId, resourceGroup, databaseAccount } = userContext;
-  const accountName = databaseAccount.name;
+  const accountName = databaseAccount !== undefined ? databaseAccount.name : "";
 
   const filter = `DatabaseName eq '${databaseName}' and CollectionName eq '${containerName}'`;
   const metricNames = "DataUsage,IndexUsage";

src/Common/dataAccess/readMongoDBCollection.tsx

@@ -8,19 +8,27 @@ import { handleError } from "../ErrorHandlingUtils";
 export async function readMongoDBCollectionThroughRP(
   databaseId: string,
   collectionId: string
-): Promise<MongoDBCollectionResource> {
+): Promise<MongoDBCollectionResource | undefined> {
   if (userContext.authType !== AuthType.AAD) {
     return undefined;
   }
-  let collection: MongoDBCollectionResource;
+  let collection: MongoDBCollectionResource | undefined;
 
   const { subscriptionId, resourceGroup, databaseAccount } = userContext;
-  const accountName = databaseAccount.name;
+  const accountName = databaseAccount !== undefined ? databaseAccount.name : "";
 
   const clearMessage = logConsoleProgress(`Reading container ${collectionId}`);
   try {
-    const response = await getMongoDBCollection(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
+    const response = await getMongoDBCollection(
-    collection = response.properties.resource;
+      subscriptionId !== undefined ? subscriptionId : "",
+      resourceGroup !== undefined ? resourceGroup : "",
+      accountName,
+      databaseId,
+      collectionId
+    );
+    if (response.properties !== undefined) {
+      collection = response.properties.resource;
+    }
   } catch (error) {
     handleError(error, "ReadMongoDBCollection", `Error while reading container ${collectionId}`);
     throw error;

src/Explorer/Controls/AccessibleElement/AccessibleElement.tsx

@@ -2,9 +2,9 @@ import * as React from "react";
 import * as Constants from "../../../Common/Constants";
 
 interface AccessibleElementProps extends React.HtmlHTMLAttributes<HTMLElement> {
-  as: string; // tag element name
+  as?: string; // tag element name
-  onActivated: (event: React.SyntheticEvent<HTMLElement>) => void;
+  onActivated?: (event: React.SyntheticEvent<HTMLElement>) => void;
-  "aria-label": string;
+  "aria-label"?: string;
   tabIndex?: number;
 }
 
@@ -16,7 +16,9 @@ export class AccessibleElement extends React.Component<AccessibleElementProps> {
     if (event.charCode === Constants.KeyCodes.Space || event.charCode === Constants.KeyCodes.Enter) {
       event.stopPropagation();
       event.preventDefault();
-      this.props.onActivated(event);
+      if (this.props.onActivated !== undefined) {
+        this.props.onActivated(event);
+      }
     }
   };
 
@@ -27,11 +29,15 @@ export class AccessibleElement extends React.Component<AccessibleElementProps> {
 
     const tabIndex = this.props.tabIndex === undefined ? 0 : this.props.tabIndex;
 
-    return React.createElement(this.props.as, {
+    return this.props.as !== undefined ? (
-      ...elementProps,
+      React.createElement(this.props.as, {
-      onKeyPress: this.onKeyPress,
+        ...elementProps,
-      onClick: this.props.onActivated,
+        onKeyPress: this.onKeyPress,
-      tabIndex,
+        onClick: this.props.onActivated,
-    });
+        tabIndex,
+      })
+    ) : (
+      <></>
+    );
   }
 }

src/Explorer/Graph/GraphExplorerComponent/LeftPaneComponent.tsx

@@ -58,7 +58,7 @@ export class LeftPaneComponent extends React.Component<LeftPaneComponentProps> {
         className={className}
         as="tr"
         aria-label={node.caption}
-        onActivated={(e) => this.props.onRootNodeSelected(node.id)}
+        onActivated={() => this.props.onRootNodeSelected(node.id)}
         key={node.id}
       >
         <td className="resultItem">

tsconfig.strict.json

@@ -139,7 +139,11 @@
     "./src/userContext.test.ts",
     "src/Common/EntityValue.tsx",
     "./src/Platform/Hosted/Components/SwitchAccount.tsx",
-    "./src/Platform/Hosted/Components/SwitchSubscription.tsx"
+    "./src/Platform/Hosted/Components/SwitchSubscription.tsx",
+    "./src/Common/dataAccess/getCollectionDataUsageSize.ts",
+    "./src/Common/dataAccess/readMongoDBCollection.tsx",
+    "./src/Explorer/Controls/CollapsiblePanel/CollapsiblePanel.tsx",
+    "./src/Explorer/Graph/GraphExplorerComponent/LeftPaneComponent.tsx"
   ],
   "include": [
     "src/CellOutputViewer/transforms/**/*",