feat(cred): credential test table

locales/en/public.json

@@ -288,7 +288,7 @@
         "TITLE": "Session (Browser Memory)"
       },
       "DESCRIPTION": "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 <0>Security</0> panel will always be stored in Cryostat backend encrypted storage.",
-      "TITLE": "JMX Credentials Storage"
+      "TITLE": "Credentials Storage"
     },
     "DATETIME_CONTROL": {
       "ARIA_LABELS": {

src/app/AppLayout/AuthModal.tsx

@@ -66,7 +66,7 @@ export const AuthModal: React.FC<AuthModalProps> = ({ onDismiss, onSave: onProps
             filter((target) => target !== NO_TARGET),
             first(),
             map((target) => target.connectUrl),
-            mergeMap((connectUrl) => context.jmxCredentials.setCredential(connectUrl, username, password))
+            mergeMap((connectUrl) => context.authCredentials.setCredential(connectUrl, username, password))
           )
           .subscribe((ok) => {
             setLoading(false);
@@ -76,7 +76,7 @@ export const AuthModal: React.FC<AuthModalProps> = ({ onDismiss, onSave: onProps
           })
       );
     },
-    [addSubscription, context.jmxCredentials, context.target, setLoading, onPropsSave]
+    [addSubscription, context.authCredentials, context.target, setLoading, onPropsSave]
   );
 
   return (

src/app/AppLayout/CredentialAuthForm.tsx

@@ -39,15 +39,31 @@ import { LoadingPropsType } from '@app/Shared/ProgressIndicator';
 import { ActionGroup, Button, Form, FormGroup, TextInput } from '@patternfly/react-core';
 import * as React from 'react';
 
+export interface AuthCredential {
+  username: string;
+  password: string;
+}
+
 export interface CredentialAuthFormProps {
   onDismiss: () => void;
   onSave: (username: string, password: string) => void;
   focus?: boolean;
   loading?: boolean;
+  isDisabled?: boolean;
   children?: React.ReactNode;
+  onCredentialChange?: (credential: AuthCredential) => void;
 }
 
-export const CredentialAuthForm: React.FC<CredentialAuthFormProps> = ({ onDismiss, onSave, ...props }) => {
+export const CredentialAuthForm: React.FC<CredentialAuthFormProps> = ({
+  onDismiss,
+  onSave,
+  onCredentialChange,
+  loading,
+  isDisabled,
+  focus,
+  children,
+  ...props
+}) => {
   const [username, setUsername] = React.useState('');
   const [password, setPassword] = React.useState('');
 
@@ -73,35 +89,49 @@ export const CredentialAuthForm: React.FC<CredentialAuthFormProps> = ({ onDismis
     () =>
       ({
         spinnerAriaValueText: 'Saving',
-        spinnerAriaLabel: 'saving-jmx-credentials',
-        isLoading: props.loading,
+        spinnerAriaLabel: 'saving-credentials',
+        isLoading: loading,
       } as LoadingPropsType),
-    [props.loading]
+    [loading]
   );
 
   return (
-    <Form>
-      {props.children}
+    <Form {...props}>
+      {children}
       <FormGroup isRequired label="Username" fieldId="username">
         <TextInput
           value={username}
-          isDisabled={props.loading}
+          isDisabled={isDisabled || loading}
           isRequired
           type="text"
           id="username"
-          onChange={setUsername}
+          onChange={(v) => {
+            setUsername(v);
+            onCredentialChange &&
+              onCredentialChange({
+                username: v,
+                password: password,
+              });
+          }}
           onKeyUp={handleKeyUp}
-          autoFocus={props.focus}
+          autoFocus={focus}
         />
       </FormGroup>
       <FormGroup isRequired label="Password" fieldId="password">
         <TextInput
           value={password}
-          isDisabled={props.loading}
+          isDisabled={isDisabled || loading}
           isRequired
           type="password"
           id="password"
-          onChange={setPassword}
+          onChange={(v) => {
+            setPassword(v);
+            onCredentialChange &&
+              onCredentialChange({
+                username: username,
+                password: v,
+              });
+          }}
           onKeyUp={handleKeyUp}
         />
       </FormGroup>
@@ -110,11 +140,11 @@ export const CredentialAuthForm: React.FC<CredentialAuthFormProps> = ({ onDismis
           variant="primary"
           onClick={handleSave}
           {...saveButtonLoadingProps}
-          isDisabled={props.loading || username === '' || password === ''}
+          isDisabled={isDisabled || loading || username === '' || password === ''}
         >
-          {props.loading ? 'Saving' : 'Save'}
+          {loading ? 'Saving' : 'Save'}
         </Button>
-        <Button variant="secondary" onClick={handleDismiss} isDisabled={props.loading}>
+        <Button variant="secondary" onClick={handleDismiss} isDisabled={isDisabled || loading}>
           Cancel
         </Button>
       </ActionGroup>

src/app/Rules/CreateRule.tsx

@@ -388,9 +388,7 @@ const CreateRuleForm: React.FC<CreateRuleFormProps> = ({ ...props }) => {
             ? `Warning: Match expression matches no targets.`
             : `
   Enter a match expression. This is a Java-like code snippet that is evaluated against each target
-  application to determine whether the rule should be applied. Select a target from the dropdown
-  on the right to view the context object available within the match expression context and test
-  if the expression matches.`
+  application to determine whether the rule should be applied.`
         }
         helperTextInvalid="Invalid Match Expression."
         validated={matchExpressionValid}