Resolve dependabot CVE issues (gravitational#22605)

* update storybook dependencies to resolve some dependabot issues.

* remove config that's already set to the default

* Resolve prettier issues after dep update.

* Pin x-default-browser version to resolve dependabot vulnerability.

.prettierrc

@@ -2,7 +2,6 @@
   "arrowParens": "avoid",
   "printWidth": 80,
   "bracketSpacing": true,
-  "bracketSameLine": false,
   "semi": true,
   "singleQuote": true,
   "tabWidth": 2,

package.json

@@ -27,7 +27,8 @@
   "resolutions": {
     "react": "16.14.0",
     "**/minimist": "^1.2.5",
-    "**/@types/react": "^16.8.19"
+    "**/@types/react": "^16.8.19",
+    "x-default-browser": "^0.5.2"
   },
   "workspaces": {
     "packages": [

web/packages/build/package.json

@@ -37,9 +37,9 @@
     "@opentelemetry/sdk-trace-web": "1.8.0",
     "@opentelemetry/semantic-conventions": "1.8.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
-    "@storybook/builder-webpack5": "^6.4.0",
-    "@storybook/manager-webpack5": "^6.4.0",
-    "@storybook/react": "^6.4.0",
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/react": "^6.5.16",
     "@testing-library/jest-dom": "^5.15.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^8.0.1",

web/packages/design/src/StepSlider/StepSlider.tsx

@@ -36,9 +36,8 @@ export function StepSlider<T>(props: Props<T>) {
   const [step, setStep] = useState(0);
   // animationDirectionPrefix defines the prefix of the class name that contains
   // the animations to apply when transitioning.
-  const [animationDirectionPrefix, setAnimationDirectionPrefix] = useState<
-    'next' | 'prev' | ''
-  >('');
+  const [animationDirectionPrefix, setAnimationDirectionPrefix] =
+    useState<'next' | 'prev' | ''>('');
 
   const startTransitionInDirection = useCallback(
     (direction: 'next' | 'prev') => {

web/packages/design/src/index.ts

@@ -44,7 +44,9 @@ import Flex from './Flex';
 import Menu, { MenuItem, MenuItemIcon } from './Menu';
 import { Pill } from './Pill';
 import Popover from './Popover';
-import { TextArea, type TextAreaProps } from './TextArea';
+import { TextArea } from './TextArea';
+
+import type { TextAreaProps } from './TextArea';
 
 export { AnimatedProgressBar } from './AnimatedProgressBar';
 export {

web/packages/shared/components/FileTransfer/FileTransferContextProvider.tsx

@@ -18,12 +18,13 @@ import React, { useContext, useState, FC } from 'react';
 
 import { FileTransferDialogDirection } from './FileTransferStateless';
 
-const FileTransferContext = React.createContext<{
-  openedDialog: FileTransferDialogDirection;
-  openDownloadDialog(): void;
-  openUploadDialog(): void;
-  closeDialog(): void;
-}>(null);
+const FileTransferContext =
+  React.createContext<{
+    openedDialog: FileTransferDialogDirection;
+    openDownloadDialog(): void;
+    openUploadDialog(): void;
+    closeDialog(): void;
+  }>(null);
 
 export const FileTransferContextProvider: FC<{
   openedDialog?: FileTransferDialogDirection;

web/packages/teleport/src/Databases/DatabaseList/DatabaseList.tsx

@@ -48,10 +48,11 @@ function DatabaseList(props: Props) {
     pageIndicators,
   } = props;
 
-  const [dbConnectInfo, setDbConnectInfo] = useState<{
-    name: string;
-    protocol: DbProtocol;
-  }>(null);
+  const [dbConnectInfo, setDbConnectInfo] =
+    useState<{
+      name: string;
+      protocol: DbProtocol;
+    }>(null);
 
   return (
     <>

web/packages/teleterm/src/ui/ClusterConnect/ClusterConnect.tsx

@@ -26,9 +26,8 @@ import { ClusterAdd } from './ClusterAdd';
 import { ClusterLogin } from './ClusterLogin';
 
 export function ClusterConnect(props: ClusterConnectProps) {
-  const [createdClusterUri, setCreatedClusterUri] = useState<
-    RootClusterUri | undefined
-  >();
+  const [createdClusterUri, setCreatedClusterUri] =
+    useState<RootClusterUri | undefined>();
   const { clustersService } = useAppContext();
   const clusterUri = props.clusterUri || createdClusterUri;
 

web/packages/teleterm/src/ui/Documents/workspaceContext.tsx

@@ -21,12 +21,13 @@ import { AccessRequestsService } from 'teleterm/ui/services/workspacesService/ac
 import { useAppContext } from 'teleterm/ui/appContextProvider';
 import { ClusterUri, RootClusterUri } from 'teleterm/ui/uri';
 
-const WorkspaceContext = React.createContext<{
-  rootClusterUri: RootClusterUri;
-  localClusterUri: ClusterUri;
-  documentsService: DocumentsService;
-  accessRequestsService: AccessRequestsService;
-}>(null);
+const WorkspaceContext =
+  React.createContext<{
+    rootClusterUri: RootClusterUri;
+    localClusterUri: ClusterUri;
+    documentsService: DocumentsService;
+    accessRequestsService: AccessRequestsService;
+  }>(null);
 
 export const WorkspaceContextProvider: React.FC<{
   value: {

web/packages/teleterm/src/ui/TopBar/Clusters/Clusters.tsx

@@ -31,9 +31,8 @@ import ConfirmClusterChangeDialog from './ConfirmClusterChangeDialog';
 export function Clusters() {
   const iconRef = useRef();
   const [isPopoverOpened, setIsPopoverOpened] = useState(false);
-  const [confirmChangeTo, setConfirmChangeTo] = useState<ClusterUri | null>(
-    null
-  );
+  const [confirmChangeTo, setConfirmChangeTo] =
+    useState<ClusterUri | null>(null);
   const clusters = useClusters();
 
   const togglePopover = useCallback(() => {

web/packages/teleterm/src/ui/components/KeyboardArrowsNavigation/KeyboardArrowsNavigation.tsx

@@ -24,12 +24,13 @@ import React, {
 
 export type RunActiveItemHandler = () => void;
 
-export const KeyboardArrowsNavigationContext = createContext<{
-  activeIndex: number;
-  setActiveIndex(index: number): void;
-  addItem(index: number, onRunActiveItem: RunActiveItemHandler): void;
-  removeItem(index: number): void;
-}>(null);
+export const KeyboardArrowsNavigationContext =
+  createContext<{
+    activeIndex: number;
+    setActiveIndex(index: number): void;
+    addItem(index: number, onRunActiveItem: RunActiveItemHandler): void;
+    removeItem(index: number): void;
+  }>(null);
 
 enum KeyboardArrowNavigationKeys {
   ArrowDown = 'ArrowDown',