gravitational · gzdunek · Feb 8, 2024 · Feb 8, 2024
diff --git a/package.json b/package.json
@@ -35,7 +35,7 @@
     "x-default-browser": "^0.5.2"
   },
   "devDependencies": {
-    "prettier": "^2.5.0",
+    "prettier": "^3.2.5",
     "typescript": "^5.3.2"
   },
   "workspaces": {

diff --git a/web/packages/design/src/AnimatedProgressBar/AnimatedProgressBar.tsx b/web/packages/design/src/AnimatedProgressBar/AnimatedProgressBar.tsx
@@ -57,7 +57,8 @@ const Bar = styled.span`
   border-bottom-left-radius: 20px;
   background-color: ${props => props.theme.colors.brand};
 
-  box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3),
+  box-shadow:
+    inset 0 2px 9px rgba(255, 255, 255, 0.3),
     inset 0 -2px 6px rgba(0, 0, 0, 0.4);
   position: relative;
   overflow: hidden;

diff --git a/web/packages/shared/components/AnimatedTerminal/TerminalContent.tsx b/web/packages/shared/components/AnimatedTerminal/TerminalContent.tsx
@@ -264,7 +264,12 @@ export const TerminalContentContainer = styled.div`
 
 export const TerminalCode = styled.div`
   font-size: 12px;
-  font-family: Menlo, DejaVu Sans Mono, Consolas, Lucida Console, monospace;
+  font-family:
+    Menlo,
+    DejaVu Sans Mono,
+    Consolas,
+    Lucida Console,
+    monospace;
   line-height: 20px;
   white-space: pre-wrap;
   margin: 10px 16px;

diff --git a/web/packages/shared/components/Select/types.ts b/web/packages/shared/components/Select/types.ts
@@ -97,7 +97,7 @@ export type ActionMeta = {
  */
 export type CustomSelectComponentProps<
   CustomProps,
-  CustomOption = Option
+  CustomOption = Option,
 > = CustomOption & {
   /**
    * selectProps is the field to use to access the props that were

diff --git a/web/packages/shared/components/UnifiedResources/shared/PinButton.tsx b/web/packages/shared/components/UnifiedResources/shared/PinButton.tsx
@@ -62,7 +62,9 @@ export function PinButton({
       className={className}
       css={`
         visibility: ${shouldShowButton ? 'visible' : 'hidden'};
-        transition: color 0.3s, background 0.3s;
+        transition:
+          color 0.3s,
+          background 0.3s;
       `}
     >
       {tipContent && shouldShowButton ? (

diff --git a/web/packages/shared/components/Window/WindowComponents.tsx b/web/packages/shared/components/Window/WindowComponents.tsx
@@ -58,7 +58,12 @@ export const WindowContentContainer = styled.div`
 
 export const WindowCode = styled.div`
   font-size: 12px;
-  font-family: Menlo, DejaVu Sans Mono, Consolas, Lucida Console, monospace;
+  font-family:
+    Menlo,
+    DejaVu Sans Mono,
+    Consolas,
+    Lucida Console,
+    monospace;
   line-height: 20px;
   white-space: pre-wrap;
 `;
diff --git a/web/packages/shared/hooks/useRefClickOutside/useRefClickOutside.ts b/web/packages/shared/hooks/useRefClickOutside/useRefClickOutside.ts
@@ -26,7 +26,7 @@ import { MutableRefObject, useEffect, useRef, useCallback } from 'react';
  * events to be ignored.
  */
 export function useRefClickOutside<
-  T extends { contains(eventTarget: HTMLElement): boolean }
+  T extends { contains(eventTarget: HTMLElement): boolean },
 >(options: { open: boolean; setOpen(b: boolean): void }): MutableRefObject<T> {
   const ref = useRef<T>();
   const { setOpen, open } = options;

diff --git a/web/packages/teleport/src/AccessRequests/LockedAccessRequests/LockedAccessRequests.tsx b/web/packages/teleport/src/AccessRequests/LockedAccessRequests/LockedAccessRequests.tsx
@@ -94,7 +94,7 @@ export function LockedAccessRequests() {
               transform: translate(-50%, 50%);
               @media screen and (max-width: 800px) {
                 min-width: 100%;
-              } ;
+              }
             `}
           >
             {CTAButton}

diff --git a/web/packages/teleport/src/Assist/Assist.tsx b/web/packages/teleport/src/Assist/Assist.tsx
@@ -200,7 +200,8 @@ const AssistContainer = styled.div`
     0
   );
   animation: forwards ${slideIn} 0.5s cubic-bezier(0.33, 1, 0.68, 1);
-  transition: width 0.5s cubic-bezier(0.33, 1, 0.68, 1),
+  transition:
+    width 0.5s cubic-bezier(0.33, 1, 0.68, 1),
     height 0.5s cubic-bezier(0.33, 1, 0.68, 1);
   background: ${p => p.theme.colors.levels.popout};
   border-radius: var(--assist-border-radius);

diff --git a/web/packages/teleport/src/Assist/Conversation/EntryContainer.tsx b/web/packages/teleport/src/Assist/Conversation/EntryContainer.tsx
@@ -61,7 +61,8 @@ const Content = styled.div`
   background: var(--content-background);
   color: var(--content-color);
   border-radius: var(--content-border-radius);
-  box-shadow: 0 6px 12px -2px rgba(50, 50, 93, 0.05),
+  box-shadow:
+    0 6px 12px -2px rgba(50, 50, 93, 0.05),
     0 3px 7px -3px rgba(0, 0, 0, 0.1);
   max-width: 90%;
   border: 1px solid ${p => p.theme.colors.spotBackground[1]};

diff --git a/web/packages/teleport/src/Assist/Settings/DisplaySettings.tsx b/web/packages/teleport/src/Assist/Settings/DisplaySettings.tsx
@@ -149,8 +149,10 @@ const PageNavigation = styled.div`
   background: ${p => p.theme.colors.levels.surface};
   flex: 0 0 45px;
   height: inherit;
-  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
-    0px 1px 1px rgba(0, 0, 0, 0.14), 0px 1px 3px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
+    0px 1px 1px rgba(0, 0, 0, 0.14),
+    0px 1px 3px rgba(0, 0, 0, 0.12);
 `;
 
 const NavigationLogo = styled.div`
@@ -189,8 +191,10 @@ const PageTable = styled.div`
   width: 100%;
   height: 40px;
   border-radius: 3px;
-  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.1),
-    0px 1px 1px rgba(0, 0, 0, 0.07), 0px 1px 3px rgba(0, 0, 0, 0.06);
+  box-shadow:
+    0px 2px 1px -1px rgba(0, 0, 0, 0.1),
+    0px 1px 1px rgba(0, 0, 0, 0.07),
+    0px 1px 3px rgba(0, 0, 0, 0.06);
 `;
 
 function MockPage() {

diff --git a/web/packages/teleport/src/Assist/context/AssistContext.tsx b/web/packages/teleport/src/Assist/context/AssistContext.tsx
@@ -272,9 +272,8 @@ export function AssistContextProvider(props: PropsWithChildren<unknown>) {
 
     setupWebSocket(conversationId);
 
-    const serverMessages = await service.loadConversationMessages(
-      conversationId
-    );
+    const serverMessages =
+      await service.loadConversationMessages(conversationId);
     const messages: ResolvedServerMessage[] = [];
 
     for (const message of serverMessages) {
@@ -313,9 +312,8 @@ export function AssistContextProvider(props: PropsWithChildren<unknown>) {
         loading: true,
       });
 
-      const serverMessages = await service.loadConversationMessages(
-        conversationId
-      );
+      const serverMessages =
+        await service.loadConversationMessages(conversationId);
       const messages: ResolvedServerMessage[] = [];
 
       for (const message of serverMessages) {

diff --git a/web/packages/teleport/src/Assist/markdown.ts b/web/packages/teleport/src/Assist/markdown.ts
@@ -302,8 +302,14 @@ export const markdownCSS = css`
   kbd {
     display: inline-block;
     padding: 3px 5px;
-    font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
-      Liberation Mono, monospace;
+    font:
+      11px ui-monospace,
+      SFMono-Regular,
+      SF Mono,
+      Menlo,
+      Consolas,
+      Liberation Mono,
+      monospace;
     line-height: 10px;
     color: var(--color-fg-default);
     vertical-align: middle;
@@ -392,16 +398,28 @@ export const markdownCSS = css`
   tt,
   code,
   samp {
-    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
-      Liberation Mono, monospace;
+    font-family:
+      ui-monospace,
+      SFMono-Regular,
+      SF Mono,
+      Menlo,
+      Consolas,
+      Liberation Mono,
+      monospace;
     font-size: 12px;
   }
 
   pre {
     margin-top: 0;
     margin-bottom: 0;
-    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
-      Liberation Mono, monospace;
+    font-family:
+      ui-monospace,
+      SFMono-Regular,
+      SF Mono,
+      Menlo,
+      Consolas,
+      Liberation Mono,
+      monospace;
     font-size: 12px;
     word-wrap: normal;
   }

diff --git a/web/packages/teleport/src/Assist/types.ts b/web/packages/teleport/src/Assist/types.ts
@@ -52,7 +52,7 @@ export interface GetConversationsResponse {
       id: string;
       title?: string;
       created_time: string;
-    }
+    },
   ];
 }
 

diff --git a/web/packages/teleport/src/AuthConnectors/styles/AuthConnectors.styles.ts b/web/packages/teleport/src/AuthConnectors/styles/AuthConnectors.styles.ts
@@ -36,7 +36,7 @@ export const MobileDescription = styled(Text)`
   margin-bottom: ${p => p.theme.space[3]}px;
   @media screen and (min-width: ${p => p.theme.breakpoints.tablet}px) {
     display: none;
-  } ;
+  }
 `;
 
 export const DesktopDescription = styled(Box)`
@@ -46,12 +46,12 @@ export const DesktopDescription = styled(Box)`
   flex-shrink: 0;
   @media screen and (max-width: ${p => p.theme.breakpoints.tablet}px) {
     display: none;
-  } ;
+  }
 `;
 
 export const ResponsiveAddButton = styled(ButtonPrimary)`
   width: 240px;
   @media screen and (max-width: ${p => p.theme.breakpoints.tablet}px) {
     width: 100%;
-  } ;
+  }
 `;
diff --git a/web/packages/teleport/src/AuthConnectors/styles/LockedFeatureContainer.styles.ts b/web/packages/teleport/src/AuthConnectors/styles/LockedFeatureContainer.styles.ts
@@ -36,5 +36,5 @@ export const LockedFeatureButton = styled(ButtonLockedFeature)`
   @media screen and (max-width: ${props => props.theme.breakpoints.tablet}px) {
     width: 100%;
     right: 1px;
-  } ;
+  }
 `;
diff --git a/web/packages/teleport/src/DeviceTrust/DeviceTrustLocked.tsx b/web/packages/teleport/src/DeviceTrust/DeviceTrustLocked.tsx
@@ -173,7 +173,9 @@ const StyledMessageContainer = styled(Flex)`
   padding: 24px;
   gap: 24px;
   width: 600px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-    0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
 `;
diff --git a/web/packages/teleport/src/Discover/Database/CreateDatabase/useCreateDatabase.ts b/web/packages/teleport/src/Discover/Database/CreateDatabase/useCreateDatabase.ts
@@ -210,9 +210,8 @@ export function useCreateDatabase() {
     // database service. If there is no active database service,
     // user is led to the next step.
     try {
-      const { services } = await ctx.databaseService.fetchDatabaseServices(
-        clusterId
-      );
+      const { services } =
+        await ctx.databaseService.fetchDatabaseServices(clusterId);
 
       if (!findActiveDatabaseSvc(db.labels, services)) {
         updateAgentMeta({

diff --git a/web/packages/teleport/src/Discover/Desktop/DiscoverDesktops/ProxyDesktopServiceDiagram.tsx b/web/packages/teleport/src/Discover/Desktop/DiscoverDesktops/ProxyDesktopServiceDiagram.tsx
@@ -28,7 +28,12 @@ import {
 import { ProxyServerIcon } from './Server';
 
 const NodeHostname = styled.div`
-  font-family: Menlo, DejaVu Sans Mono, Consolas, Lucida Console, monospace;
+  font-family:
+    Menlo,
+    DejaVu Sans Mono,
+    Consolas,
+    Lucida Console,
+    monospace;
   font-size: 12px;
   color: ${props => props.theme.colors.text.primary};
   max-width: 184px;

diff --git a/web/packages/teleport/src/Discover/Desktop/DiscoverDesktops/WindowsComputer.tsx b/web/packages/teleport/src/Discover/Desktop/DiscoverDesktops/WindowsComputer.tsx
@@ -43,7 +43,12 @@ const SuccessMessage = styled.div`
 const SuccessTick = styled.span`
   margin-right: 5px;
   font-size: 14px;
-  font-family: Menlo, DejaVu Sans Mono, Consolas, Lucida Console, monospace;
+  font-family:
+    Menlo,
+    DejaVu Sans Mono,
+    Consolas,
+    Lucida Console,
+    monospace;
 `;
 
 const Application = styled.div`
@@ -143,7 +148,12 @@ const ComputerOSVersion = styled.div`
 `;
 
 const ComputerAddress = styled.div`
-  font-family: Menlo, DejaVu Sans Mono, Consolas, Lucida Console, monospace;
+  font-family:
+    Menlo,
+    DejaVu Sans Mono,
+    Consolas,
+    Lucida Console,
+    monospace;
   font-size: 13px;
   color: rgba(0, 0, 0, 0.8);
 `;

diff --git a/web/packages/teleport/src/Discover/Shared/HintBox.tsx b/web/packages/teleport/src/Discover/Shared/HintBox.tsx
@@ -29,7 +29,7 @@ const HintBoxContainer = styled(Box).attrs(props => ({
   background-color: ${props => props.theme.colors.spotBackground[0]};
   padding: ${props => `${props.theme.space[3]}px`};
   border-radius: ${props => `${props.theme.space[2]}px`};
-  border: 2px solid ${props => props.theme.colors.warning.main}; ;
+  border: 2px solid ${props => props.theme.colors.warning.main};
 `;
 
 export const WaitingInfo = styled(Box)`

diff --git a/web/packages/teleport/src/Navigation/Navigation.tsx b/web/packages/teleport/src/Navigation/Navigation.tsx
@@ -45,8 +45,10 @@ const NavigationContainer = styled.div`
   position: relative;
   display: flex;
   flex-direction: column;
-  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
-    0px 1px 1px rgba(0, 0, 0, 0.14), 0px 1px 3px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
+    0px 1px 1px rgba(0, 0, 0, 0.14),
+    0px 1px 3px rgba(0, 0, 0, 0.12);
 `;
 
 const CategoriesContainer = styled.div`

diff --git a/web/packages/teleport/src/Navigation/NavigationSection.tsx b/web/packages/teleport/src/Navigation/NavigationSection.tsx
@@ -35,7 +35,8 @@ const Title = styled.h3`
   line-height: 14px;
   color: ${props => props.theme.colors.text.slightlyMuted};
   margin-left: 32px;
-  transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1),
+  transition:
+    transform 0.3s cubic-bezier(0.19, 1, 0.22, 1),
     opacity 0.15s ease-in;
   will-change: transform;
   margin-top: 33px;

diff --git a/web/packages/teleport/src/Navigation/NavigationSwitcher.tsx b/web/packages/teleport/src/Navigation/NavigationSwitcher.tsx
@@ -74,7 +74,9 @@ const Dropdown = styled.div<OpenProps>`
   opacity: ${p => (p.open ? 1 : 0)};
   visibility: ${p => (p.open ? 'visible' : 'hidden')};
   transform-origin: top center;
-  transition: opacity 0.2s ease, visibility 0.2s ease,
+  transition:
+    opacity 0.2s ease,
+    visibility 0.2s ease,
     transform 0.3s cubic-bezier(0.45, 0.6, 0.5, 1.25);
   transform: translate3d(0, ${p => (p.open ? '12px' : 0)}, 0);
 `;
@@ -87,7 +89,9 @@ const DropdownItem = styled.div<ActiveProps & OpenProps>`
   box-sizing: border-box;
   cursor: pointer;
   opacity: ${p => (p.open ? 1 : 0)};
-  transition: transform 0.3s ease, opacity 0.7s ease;
+  transition:
+    transform 0.3s ease,
+    opacity 0.7s ease;
   transform: translate3d(0, ${p => (p.open ? 0 : '-10px')}, 0);
 
   &:hover,

diff --git a/web/packages/teleport/src/Player/ProgressBar/ProgressBar.tsx b/web/packages/teleport/src/Player/ProgressBar/ProgressBar.tsx
@@ -173,7 +173,9 @@ const StyledProgessBar = styled.div`
   .grv-slider .handle {
     background-color: ${props => props.theme.colors.text.main};
     border-radius: 200px;
-    box-shadow: 0 0 4px rgba(0, 0, 0, 0.12), 0 4px 4px rgba(0, 0, 0, 0.24);
+    box-shadow:
+      0 0 4px rgba(0, 0, 0, 0.12),
+      0 4px 4px rgba(0, 0, 0, 0.24);
     width: 16px;
     height: 16px;
     left: -8px;

diff --git a/web/packages/teleport/src/components/Dropdown/Dropdown.tsx b/web/packages/teleport/src/components/Dropdown/Dropdown.tsx
@@ -39,7 +39,9 @@ export const Dropdown = styled.div<OpenProps>`
   opacity: ${p => (p.open ? 1 : 0)};
   visibility: ${p => (p.open ? 'visible' : 'hidden')};
   transform-origin: top right;
-  transition: opacity 0.2s ease, visibility 0.2s ease,
+  transition:
+    opacity 0.2s ease,
+    visibility 0.2s ease,
     transform 0.3s cubic-bezier(0.45, 0.6, 0.5, 1.25);
   transform: ${p =>
     p.open ? 'scale(1) translate(0, 12px)' : 'scale(.8) translate(0, 4px)'};
@@ -53,7 +55,9 @@ export const DropdownItem = styled.div`
   border-radius: ${p => p.theme.radii[2]}px;
   margin-bottom: ${p => p.theme.space[1]}px;
   opacity: ${p => (p.open ? 1 : 0)};
-  transition: transform 0.3s ease, opacity 0.7s ease;
+  transition:
+    transform 0.3s ease,
+    opacity 0.7s ease;
   transform: translate3d(${p => (p.open ? 0 : '20px')}, 0, 0);
   transition-delay: ${p => p.$transitionDelay}ms;
-Original file line number
+Diff line change
@@ Expand Up / @@ -52,7 +52,7 @@ export interface GetConversationsResponse { @@
           id: string;
           title?: string;
           created_time: string;
-        }
+        },
       ];
     }
@@ Expand Down @@