feat(targets): target select component can be expanded to reveal details

src/app/Dashboard/Dashboard.tsx

@@ -41,7 +41,7 @@ import { TargetView } from '@app/TargetView/TargetView';
 export interface DashboardProps {}
 
 export const Dashboard: React.FunctionComponent<DashboardProps> = (props) => {
-  return <TargetView pageTitle="Dashboard" compactSelect={true} />;
+  return <TargetView pageTitle="Dashboard" compactSelect={false} />;
 };
 
 export default Dashboard;

src/app/Shared/MatchExpressionEvaluator.tsx

@@ -60,6 +60,7 @@ import {
   InfoCircleIcon,
   WarningTriangleIcon,
 } from '@patternfly/react-icons';
+import { SerializedTarget } from '@app/Shared/SerializedTarget';
 
 export interface MatchExpressionEvaluatorProps {
   inlineHint?: boolean;
@@ -155,7 +156,7 @@ export const MatchExpressionEvaluator: React.FunctionComponent<MatchExpressionEv
     <>
       <Stack hasGutter>
         <StackItem>
-          <TargetSelect />
+          <TargetSelect simple />
         </StackItem>
         <StackItem>
           <Split hasGutter isWrappable>
@@ -189,13 +190,7 @@ export const MatchExpressionEvaluator: React.FunctionComponent<MatchExpressionEv
           <></>
         )}
         <StackItem>
-          {!!target?.alias && !!target?.connectUrl ? (
-            <CodeBlock>
-              <CodeBlockCode>{JSON.stringify(target, null, 2)}</CodeBlockCode>
-            </CodeBlock>
-          ) : (
-            <NoTargetSelected />
-          )}
+          <SerializedTarget target={target} />
         </StackItem>
       </Stack>
     </>

src/app/Shared/SerializedTarget.tsx

@@ -0,0 +1,60 @@
+/*
+ * Copyright The Cryostat Authors
+ *
+ * The Universal Permissive License (UPL), Version 1.0
+ *
+ * Subject to the condition set forth below, permission is hereby granted to any
+ * person obtaining a copy of this software, associated documentation and/or data
+ * (collectively the "Software"), free of charge and under any and all copyright
+ * rights in the Software, and any and all patent rights owned or freely
+ * licensable by each licensor hereunder covering either (i) the unmodified
+ * Software as contributed to or provided by such licensor, or (ii) the Larger
+ * Works (as defined below), to deal in both
+ *
+ * (a) the Software, and
+ * (b) any piece of software and/or hardware listed in the lrgrwrks.txt file if
+ * one is included with the Software (each a "Larger Work" to which the Software
+ * is contributed by such licensors),
+ *
+ * without restriction, including without limitation the rights to copy, create
+ * derivative works of, display, perform, and distribute the Software and make,
+ * use, sell, offer for sale, import, export, have made, and have sold the
+ * Software and the Larger Work(s), and to sublicense the foregoing rights on
+ * either these or other terms.
+ *
+ * This license is subject to the following condition:
+ * The above copyright notice and either this complete permission notice or at
+ * a minimum a reference to the UPL must be included in all copies or
+ * substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import * as React from 'react';
+import { CodeBlock, CodeBlockCode } from '@patternfly/react-core';
+import { Target } from '@app/Shared/Services/Target.service';
+import { NoTargetSelected } from '@app/TargetView/NoTargetSelected';
+
+export interface SerializedTargetProps {
+  target?: Target;
+  indentLevel?: number;
+}
+
+export const SerializedTarget: React.FunctionComponent<SerializedTargetProps> = (props) => {
+  return (
+    <>
+      {!props.target ? (
+        <NoTargetSelected />
+      ) : (
+        <CodeBlock>
+          <CodeBlockCode>{JSON.stringify(props.target, null, props.indentLevel || 2)}</CodeBlockCode>
+        </CodeBlock>
+      )}
+    </>
+  );
+};

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

@@ -58,6 +58,7 @@ export const indexOfTarget = (arr: Target[], target: Target): number => {
 };
 
 export interface Target {
+  jvmId?: string; // present in responses, but we do not need to provide it in requests
   connectUrl: string;
   alias: string;
   labels?: {};

src/app/TargetSelect/TargetSelect.tsx

@@ -45,8 +45,10 @@ import {
   Card,
   CardActions,
   CardBody,
+  CardExpandableContent,
   CardHeader,
   CardHeaderMain,
+  CardTitle,
   Select,
   SelectOption,
   SelectVariant,
@@ -60,19 +62,25 @@ import { CreateTargetModal } from './CreateTargetModal';
 import { DeleteWarningType } from '@app/Modal/DeleteWarningUtils';
 import { DeleteWarningModal } from '@app/Modal/DeleteWarningModal';
 import { getFromLocalStorage, removeFromLocalStorage, saveToLocalStorage } from '@app/utils/LocalStorage';
+import { SerializedTarget } from '@app/Shared/SerializedTarget';
 
 export const CUSTOM_TARGETS_REALM = 'Custom Targets';
 
-export interface TargetSelectProps {}
+export interface TargetSelectProps {
+  // display a simple, non-expandable component. set this if the view elsewhere
+  // contains a <SerializedTarget /> or other repeated components
+  simple?: boolean;
+}
 
 export const TargetSelect: React.FunctionComponent<TargetSelectProps> = (props) => {
   const notifications = React.useContext(NotificationsContext);
   const context = React.useContext(ServiceContext);
   const addSubscription = useSubscriptions();
 
+  const [isExpanded, setExpanded] = React.useState(false);
   const [selected, setSelected] = React.useState(NO_TARGET);
   const [targets, setTargets] = React.useState([] as Target[]);
-  const [expanded, setExpanded] = React.useState(false);
+  const [isDropdownOpen, setDropdownOpen] = React.useState(false);
   const [isLoading, setLoading] = React.useState(false);
   const [isModalOpen, setModalOpen] = React.useState(false);
   const [warningModalOpen, setWarningModalOpen] = React.useState(false);
@@ -91,6 +99,10 @@ export const TargetSelect: React.FunctionComponent<TargetSelectProps> = (props)
     removeCachedTargetSelection();
   }, [context.target, removeCachedTargetSelection]);
 
+  const onExpand = React.useCallback(() => {
+    setExpanded((v) => !v);
+  }, [setExpanded]);
+
   const onSelect = React.useCallback(
     // ATTENTION: do not add onSelect as deps for effect hook as it updates with selected states
     (evt, selection, isPlaceholder) => {
@@ -105,9 +117,9 @@ export const TargetSelect: React.FunctionComponent<TargetSelectProps> = (props)
           });
         }
       }
-      setExpanded(false);
+      setDropdownOpen(false);
     },
-    [context.target, notifications, setExpanded, setCachedTargetSelection, resetTargetSelection, selected]
+    [context.target, notifications, setDropdownOpen, setCachedTargetSelection, resetTargetSelection, selected]
   );
 
   const selectTargetFromCache = React.useCallback(
@@ -251,11 +263,24 @@ export const TargetSelect: React.FunctionComponent<TargetSelectProps> = (props)
 
   return (
     <>
-      <Card>
-        <CardHeader>
-          <CardHeaderMain>
+      <Card isExpanded={props.simple || selected === NO_TARGET ? undefined : isExpanded}>
+        <CardHeader
+          onExpand={props.simple || selected === NO_TARGET ? undefined : onExpand}
+          isToggleRightAligned={props.simple || selected === NO_TARGET ? undefined : true}
+          toggleButtonProps={
+            props.simple || selected === NO_TARGET
+              ? undefined
+              : {
+                  id: 'toggle-button1',
+                  'aria-label': 'Details',
+                  'aria-labelledby': 'expandable-card-title toggle-button1',
+                  'aria-expanded': isExpanded,
+                }
+          }
+        >
+          <CardTitle>
             <Text component={TextVariants.h4}>Target JVM</Text>
-          </CardHeaderMain>
+          </CardTitle>
           <CardActions>
             <Button
               aria-label="Create target"
@@ -280,15 +305,24 @@ export const TargetSelect: React.FunctionComponent<TargetSelectProps> = (props)
             toggleIcon={<ContainerNodeIcon />}
             variant={SelectVariant.single}
             onSelect={onSelect}
-            onToggle={setExpanded}
+            onToggle={setDropdownOpen}
             selections={selected.alias || selected.connectUrl}
             isDisabled={isLoading}
-            isOpen={expanded}
+            isOpen={isDropdownOpen}
             aria-label="Select Target"
           >
             {selectOptions}
           </Select>
         </CardBody>
+        {props.simple || selected === NO_TARGET ? (
+          <></>
+        ) : (
+          <CardExpandableContent>
+            <CardBody>
+              <SerializedTarget target={selected} />
+            </CardBody>
+          </CardExpandableContent>
+        )}
       </Card>
       <CreateTargetModal
         visible={isModalOpen}

src/app/TargetView/TargetView.tsx

@@ -71,7 +71,7 @@ export const TargetView: React.FunctionComponent<TargetViewProps> = (props) => {
     <>
       <BreadcrumbPage pageTitle={props.pageTitle} breadcrumbs={props.breadcrumbs}>
         <Grid hasGutter>
-          <GridItem span={compact ? 4 : 12}>
+          <GridItem span={compact ? 6 : 12}>
             <TargetSelect />
           </GridItem>
           <GridItem>{connected ? props.children : <NoTargetSelected />}</GridItem>

src/test/Dashboard/__snapshots__/Dashboard.test.tsx.snap

@@ -35,7 +35,7 @@ exports[`<Dashboard /> renders correctly 1`] = `
         className="pf-l-grid pf-m-gutter"
       >
         <div
-          className="pf-l-grid__item pf-m-4-col"
+          className="pf-l-grid__item pf-m-12-col"
         >
           <div>
             Target Select

src/test/Rules/__snapshots__/CreateRule.test.tsx.snap

@@ -935,7 +935,7 @@ exports[`<CreateRule /> renders correctly 1`] = `
                       className="pf-c-card__header"
                     >
                       <div
-                        className=""
+                        className="pf-c-card__title"
                       >
                         <h4
                           className=""

src/test/TargetSelect/TargetSelect.test.tsx

@@ -55,14 +55,15 @@ const cryostatAnnotation = {
   REALM: CUSTOM_TARGETS_REALM,
 };
 const mockFooTarget: Target = {
+  jvmId: 'abcd',
   connectUrl: mockFooConnectUrl,
   alias: 'fooTarget',
   annotations: {
     cryostat: cryostatAnnotation,
     platform: {},
   },
 };
-const mockBarTarget: Target = { ...mockFooTarget, connectUrl: mockBarConnectUrl, alias: 'barTarget' };
+const mockBarTarget: Target = { ...mockFooTarget, jvmId: 'efgh', connectUrl: mockBarConnectUrl, alias: 'barTarget' };
 const mockBazTarget: Target = { connectUrl: mockBazConnectUrl, alias: 'bazTarget' };
 
 const history = createMemoryHistory();

src/test/TargetSelect/__snapshots__/TargetSelect.test.tsx.snap

@@ -12,7 +12,7 @@ exports[`<TargetSelect /> renders correctly 1`] = `
     className="pf-c-card__header"
   >
     <div
-      className=""
+      className="pf-c-card__title"
     >
       <h4
         className=""