[Chore]: Typescript 4.4 fixes (#1957)

src/actions/src/provider-actions.ts

@@ -104,7 +104,7 @@ export const resetProviderStatus: () => {
 } = createAction(ActionTypes.RESET_PROVIDER_STATUS);
 
 /** SET_CLOUD_PROVIDER */
-export type SetCloudProviderPayload = string;
+export type SetCloudProviderPayload = string | null;
 export const setCloudProvider: (
   p: SetCloudProviderPayload
 ) => {

src/components/src/common/item-selector/typeahead.tsx

@@ -298,7 +298,11 @@ class Typeahead extends Component<TypeaheadProps, TypeaheadState> {
   }
 
   getSelection() {
-    let index = Number(this.state.selectionIndex);
+    let index: number | null = this.state.selectionIndex;
+    if (index === null) {
+      return null;
+    }
+    index = Number(index);
 
     if (this._hasCustomValue()) {
       if (index === 0) {

src/components/src/map/map-popover.tsx

@@ -139,7 +139,13 @@ function createVirtualReference(container, x, y, size = 0) {
     right: left + size,
     bottom: top + size,
     width: size,
-    height: size
+    height: size,
+    // These properties are present to meet the DOMRect interface
+    y: top,
+    x: left,
+    toJSON() {
+      return this;
+    }
   };
 }
 

src/components/src/modals/cloud-tile.tsx

@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React, {ReactNode} from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import {Logout, Login} from '../common/icons';
 import {CenterVerticalFlexbox, Button, CheckMark} from '../common/styled-components';
@@ -97,7 +97,7 @@ const LogoutButton = ({onClick}: OnClickProps) => (
 
 interface ActionButtonProps {
   isConnected?: boolean;
-  actionName?: ReactNode | null;
+  actionName?: string | null;
   isReady?: boolean;
 }
 
@@ -111,15 +111,15 @@ const ActionButton = ({isConnected, actionName = null, isReady}: ActionButtonPro
 interface CloudTileProps {
   onSelect?: React.MouseEventHandler<HTMLDivElement>;
   // default to login
-  onConnect?: React.MouseEventHandler<HTMLDivElement> | null;
+  onConnect?: (() => void) | null;
   // default to logout
-  onLogout?: React.MouseEventHandler<HTMLDivElement> | null;
+  onLogout?: (() => void) | null;
   // action name
-  actionName?: ReactNode | null;
+  actionName?: string | null;
   // cloud provider class
   cloudProvider: Provider;
   // function to take after login or logout
-  onSetCloudProvider;
+  onSetCloudProvider: (providerName: string | null) => void;
   // whether provider is selected as currentProvider
   isSelected?: boolean;
   // whether user has logged in