yarn format:apply

src/app/AppLayout/AuthModal.tsx

@@ -64,7 +64,7 @@ export const AuthModal: React.FunctionComponent<AuthModalProps> = (props) => {
               first(),
               filter((target) => target !== NO_TARGET),
               map((target) => target.connectUrl),
-              mergeMap(connectUrl => context.jmxCredentials.setCredential(connectUrl, username, password))
+              mergeMap((connectUrl) => context.jmxCredentials.setCredential(connectUrl, username, password))
             )
             .subscribe((result) => {
               if (result) {
@@ -89,10 +89,17 @@ export const AuthModal: React.FunctionComponent<AuthModalProps> = (props) => {
       title="Authentication Required"
       description={
         <Text>
-          This target JVM requires authentication. The credentials you provide here will be passed from Cryostat to the target when establishing JMX connections.
-          Enter credentials specific to this target, or go to <Link onClick={props.onDismiss} to="/security">Security</Link> to add a credential matching multiple targets.
-          Visit <Link onClick={props.onDismiss} to="/settings">Settings</Link> to confirm and configure whether these credentials will be held only for this browser session
-          or stored encrypted in the Cryostat backend.
+          This target JVM requires authentication. The credentials you provide here will be passed from Cryostat to the
+          target when establishing JMX connections. Enter credentials specific to this target, or go to{' '}
+          <Link onClick={props.onDismiss} to="/security">
+            Security
+          </Link>{' '}
+          to add a credential matching multiple targets. Visit{' '}
+          <Link onClick={props.onDismiss} to="/settings">
+            Settings
+          </Link>{' '}
+          to confirm and configure whether these credentials will be held only for this browser session or stored
+          encrypted in the Cryostat backend.
         </Text>
       }
     >

src/app/Settings/AutoRefresh.tsx

@@ -105,6 +105,7 @@ const Component = () => {
 
 export const AutoRefresh: UserSetting = {
   title: 'Auto-Refresh',
-  description: 'Set the refresh period for content views. Views normally update dynamically via WebSocket notifications, so this should not be needed unless WebSockets are not working.',
+  description:
+    'Set the refresh period for content views. Views normally update dynamically via WebSocket notifications, so this should not be needed unless WebSockets are not working.',
   content: Component,
 };

src/app/Settings/CredentialsStorage.tsx

@@ -41,7 +41,7 @@ import { Link } from 'react-router-dom';
 import { Select, SelectOption, SelectVariant, Text } from '@patternfly/react-core';
 
 import { UserSetting } from './Settings';
-import { getFromLocalStorage, saveToLocalStorage } from "@app/utils/LocalStorage";
+import { getFromLocalStorage, saveToLocalStorage } from '@app/utils/LocalStorage';
 
 export interface Location {
   key: string;
@@ -51,18 +51,17 @@ export interface Location {
 export class Locations {
   static readonly BROWSER_SESSION: Location = {
     key: 'Session (Browser Memory)',
-    description: 'Keep credentials in browser memory for the current session only. When you close this browser tab the credentials will be forgotten.'
+    description:
+      'Keep credentials in browser memory for the current session only. When you close this browser tab the credentials will be forgotten.',
   };
   static readonly BACKEND: Location = {
     key: 'Backend',
-    description: 'Keep credentials in encrypted Cryostat backend storage. These credentials will be available to other users and will be used for Automated Rules.'
+    description:
+      'Keep credentials in encrypted Cryostat backend storage. These credentials will be available to other users and will be used for Automated Rules.',
   };
 }
 
-const locations = [
-  Locations.BROWSER_SESSION,
-  Locations.BACKEND,
-];
+const locations = [Locations.BROWSER_SESSION, Locations.BACKEND];
 
 function getLocation(key: string): Location {
   for (let l of locations) {
@@ -74,47 +73,49 @@ function getLocation(key: string): Location {
 }
 
 const Component = () => {
-
   const [isExpanded, setExpanded] = React.useState(false);
   const [selection, setSelection] = React.useState(Locations.BROWSER_SESSION);
 
-  const handleSelect = React.useCallback((_, selection) => {
-    let location = getLocation(selection);
-    setSelection(location);
-    setExpanded(false);
-    saveToLocalStorage("JMX_CREDENTIAL_LOCATION", selection)
-  }, [getLocation, setSelection, setExpanded, saveToLocalStorage]);
+  const handleSelect = React.useCallback(
+    (_, selection) => {
+      let location = getLocation(selection);
+      setSelection(location);
+      setExpanded(false);
+      saveToLocalStorage('JMX_CREDENTIAL_LOCATION', selection);
+    },
+    [getLocation, setSelection, setExpanded, saveToLocalStorage]
+  );
 
   React.useEffect(() => {
-    handleSelect(
-      undefined,
-      getFromLocalStorage("JMX_CREDENTIAL_LOCATION", Locations.BROWSER_SESSION)
-    );
+    handleSelect(undefined, getFromLocalStorage('JMX_CREDENTIAL_LOCATION', Locations.BROWSER_SESSION));
   }, [handleSelect, getLocation, getFromLocalStorage]);
 
-  return (<>
-    <Select
-      variant={SelectVariant.single}
-      onToggle={setExpanded}
-      onSelect={handleSelect}
-      isOpen={isExpanded}
-      selections={selection.key}
-    >
-      {
-        locations.map(location => <SelectOption key={location.key} value={location.key} description={location.description} />)
-      }
-    </Select>
-  </>);
-}
+  return (
+    <>
+      <Select
+        variant={SelectVariant.single}
+        onToggle={setExpanded}
+        onSelect={handleSelect}
+        isOpen={isExpanded}
+        selections={selection.key}
+      >
+        {locations.map((location) => (
+          <SelectOption key={location.key} value={location.key} description={location.description} />
+        ))}
+      </Select>
+    </>
+  );
+};
 
 export const CredentialsStorage: UserSetting = {
   title: 'JMX Credentials Storage',
-  description: <Text>
-    When you attempt to connect to a target application which requires authentication
-    you will see a prompt for credentials to present to the application and complete the
-    connection. You can choose where to persist these credentials. Any credentials added
-    through the <Link to="/security">Security</Link> panel will always be stored in Cryostat
-    backend encrypted storage.
-    </Text>,
+  description: (
+    <Text>
+      When you attempt to connect to a target application which requires authentication you will see a prompt for
+      credentials to present to the application and complete the connection. You can choose where to persist these
+      credentials. Any credentials added through the <Link to="/security">Security</Link> panel will always be stored in
+      Cryostat backend encrypted storage.
+    </Text>
+  ),
   content: Component,
-}
+};

src/app/Settings/Settings.tsx

@@ -47,18 +47,13 @@ import { WebSocketDebounce } from './WebSocketDebounce';
 import { AutoRefresh } from './AutoRefresh';
 
 export const Settings: React.FunctionComponent<{}> = () => {
-  const settings =
-    [
-      NotificationControl,
-      CredentialsStorage,
-      DeletionDialogControl,
-      WebSocketDebounce,
-      AutoRefresh,
-    ].map(c => ({
+  const settings = [NotificationControl, CredentialsStorage, DeletionDialogControl, WebSocketDebounce, AutoRefresh].map(
+    (c) => ({
       title: c.title,
       description: c.description,
       element: React.createElement(c.content, null),
-    }));
+    })
+  );
   return (
     <>
       <BreadcrumbPage pageTitle="Settings">

src/app/Shared/Services/JmxCredentials.service.tsx

@@ -46,13 +46,10 @@ export interface Credential {
 }
 
 export class JmxCredentials {
-
   // TODO replace with Redux?
   private readonly store = new Map<string, Credential>();
 
-  constructor(
-    private readonly api: () => ApiService
-  ) { }
+  constructor(private readonly api: () => ApiService) {}
 
   setCredential(targetId: string, username: string, password: string): Observable<boolean> {
     let location = getFromLocalStorage('JMX_CREDENTIAL_LOCATION', Locations.BROWSER_SESSION);

src/app/Shared/Services/Login.service.tsx

@@ -68,7 +68,11 @@ export class LoginService {
   private readonly sessionState = new ReplaySubject<SessionState>(1);
   readonly authority: string;
 
-  constructor(private readonly target: TargetService, private readonly jmxCredentials: JmxCredentials, private readonly settings: SettingsService) {
+  constructor(
+    private readonly target: TargetService,
+    private readonly jmxCredentials: JmxCredentials,
+    private readonly settings: SettingsService
+  ) {
     let apiAuthority = process.env.CRYOSTAT_AUTHORITY;
     if (!apiAuthority) {
       apiAuthority = '';
@@ -154,10 +158,16 @@ export class LoginService {
   }
 
   getHeaders(): Observable<Headers> {
-    return combineLatest([this.getToken(), this.getAuthMethod(), this.target.target().pipe(map(target => target.connectUrl), concatMap(connect => this.jmxCredentials.getCredential(connect)))])
-    .pipe(
+    return combineLatest([
+      this.getToken(),
+      this.getAuthMethod(),
+      this.target.target().pipe(
+        map((target) => target.connectUrl),
+        concatMap((connect) => this.jmxCredentials.getCredential(connect))
+      ),
+    ]).pipe(
       map((parts: [string, AuthMethod, Credential | undefined]) => this.getAuthHeaders(parts[0], parts[1], parts[2])),
-      first(),
+      first()
     );
   }
 

src/app/Shared/Services/Services.tsx

@@ -65,7 +65,16 @@ const notificationChannel = new NotificationChannel(NotificationsInstance, login
 const reports = new ReportService(login, NotificationsInstance);
 const targets = new TargetsService(api, NotificationsInstance, login, notificationChannel);
 
-const defaultServices: Services = { target: TargetInstance, targets, api, jmxCredentials, notificationChannel, reports, settings, login };
+const defaultServices: Services = {
+  target: TargetInstance,
+  targets,
+  api,
+  jmxCredentials,
+  notificationChannel,
+  reports,
+  settings,
+  login,
+};
 
 const ServiceContext: React.Context<Services> = React.createContext(defaultServices);