fix(shell, logging): replace createRef with useRef (#5943)

Author: gribnoysup

packages/compass-logging/src/provider.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import type {
   LoggerAndTelemetry,
   LoggingAndTelemetryPreferences,
@@ -56,9 +56,9 @@ export function useLoggerAndTelemetry(component: string): LoggerAndTelemetry {
   if (!context) {
     throw new Error('LoggerAndTelemetry service is missing from React context');
   }
-  const loggerRef = React.createRef<LoggerAndTelemetry>();
+  const loggerRef = useRef<LoggerAndTelemetry>();
   if (!loggerRef.current) {
-    (loggerRef as any).current = context.createLogger(
+    loggerRef.current = context.createLogger(
       component,
       context.preferences ?? {
         getPreferences() {
@@ -67,7 +67,7 @@ export function useLoggerAndTelemetry(component: string): LoggerAndTelemetry {
       }
     );
   }
-  return loggerRef.current!;
+  return loggerRef.current;
 }
 
 export function useTrackOnChange(

packages/compass-shell/src/components/compass-shell/tab-compass-shell.tsx

@@ -1,11 +1,5 @@
 import { connect } from 'react-redux';
-import React, {
-  useCallback,
-  useEffect,
-  useRef,
-  createRef,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTabState } from '@mongodb-js/compass-workspaces/provider';
 import {
   Banner,
@@ -67,7 +61,7 @@ const CompassShell: React.FC<CompassShellProps> = ({
   emitShellPluginOpened,
 }) => {
   const enableShell = usePreference('enableShell');
-  const shellRef = createRef<ShellType>();
+  const shellRef = useRef<ShellType>(null);
   const emitShellPluginOpenedRef = useRef(emitShellPluginOpened);
   emitShellPluginOpenedRef.current =
     emitShellPluginOpened ??
@@ -112,8 +106,7 @@ const CompassShell: React.FC<CompassShellProps> = ({
 
   const focusEditor = useCallback(() => {
     if (shellRef.current && window.getSelection()?.type !== 'Range') {
-      (shellRef.current as any) /* private ... */
-        .focusEditor();
+      shellRef.current['focusEditor']();
     }
   }, [shellRef]);