remove dashboard SerializedTarget, move into expandable TargetSelect

cryostatio · Nov 2, 2022 · fe3608f · fe3608f
1 parent ed31f40
commit fe3608f
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 42 deletions.
diff --git a/src/app/Dashboard/Dashboard.tsx b/src/app/Dashboard/Dashboard.tsx
@@ -36,37 +36,12 @@
  * SOFTWARE.
  */
 import * as React from 'react';
-import { ServiceContext } from '@app/Shared/Services/Services';
-import { useSubscriptions } from '@app/utils/useSubscriptions';
 import { TargetView } from '@app/TargetView/TargetView';
-import { NO_TARGET } from '@app/Shared/Services/Target.service';
-import { Card, CardBody, CardTitle, Text, TextVariants } from '@patternfly/react-core';
-import { SerializedTarget } from '../Shared/SerializedTarget';
 
 export interface DashboardProps {}
 
 export const Dashboard: React.FunctionComponent<DashboardProps> = (props) => {
-  const context = React.useContext(ServiceContext);
-  const addSubscription = useSubscriptions();
-
-  const [selectedTarget, setSelectedTarget] = React.useState(NO_TARGET);
-
-  React.useEffect(() => {
-    addSubscription(context.target.target().subscribe(setSelectedTarget));
-  }, [addSubscription, context.target, setSelectedTarget]);
-
-  return (
-    <TargetView pageTitle="Dashboard" compactSelect={true}>
-      <Card>
-        <CardTitle>
-          <Text component={TextVariants.h1}>Target Details</Text>
-        </CardTitle>
-        <CardBody>
-          <SerializedTarget target={selectedTarget} />
-        </CardBody>
-      </Card>
-    </TargetView>
-  );
+  return <TargetView pageTitle="Dashboard" compactSelect={false} />;
 };
 
 export default Dashboard;
diff --git a/src/app/TargetSelect/TargetSelect.tsx b/src/app/TargetSelect/TargetSelect.tsx
@@ -45,8 +45,10 @@ import {
   Card,
   CardActions,
   CardBody,
+  CardExpandableContent,
   CardHeader,
   CardHeaderMain,
+  CardTitle,
   Select,
   SelectOption,
   SelectVariant,
@@ -60,6 +62,7 @@ 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';
 
@@ -70,9 +73,10 @@ export const TargetSelect: React.FunctionComponent<TargetSelectProps> = (props)
   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 +95,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 +113,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(
@@ -243,8 +251,8 @@ export const TargetSelect: React.FunctionComponent<TargetSelectProps> = (props)
         targets.map((t: Target) => (
           <SelectOption key={t.connectUrl} value={t} isPlaceholder={false}>
             {!t.alias || t.alias === t.connectUrl
-              ? `${t.connectUrl}: ${t.jvmId}`
-              : `${t.alias} (${t.connectUrl}): ${t.jvmId}`}
+              ? `${t.connectUrl}`
+              : `${t.alias} (${t.connectUrl})`}
           </SelectOption>
         ))
       ),
@@ -253,11 +261,20 @@ export const TargetSelect: React.FunctionComponent<TargetSelectProps> = (props)
 
   return (
     <>
-      <Card>
-        <CardHeader>
-          <CardHeaderMain>
+      <Card isExpanded={isExpanded && selected !== NO_TARGET}>
+        <CardHeader
+          onExpand={onExpand}
+          isToggleRightAligned={true}
+          toggleButtonProps={{
+            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"
@@ -282,15 +299,20 @@ 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>
+        <CardExpandableContent>
+          <CardBody>
+            <SerializedTarget target={selected} />
+          </CardBody>
+        </CardExpandableContent>
       </Card>
       <CreateTargetModal
         visible={isModalOpen}

diff --git a/src/app/TargetView/TargetView.tsx b/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>

diff --git a/src/test/TargetSelect/TargetSelect.test.tsx b/src/test/TargetSelect/TargetSelect.test.tsx
@@ -151,8 +151,8 @@ describe('<TargetSelect />', () => {
     userEvent.click(screen.getByLabelText('Options menu'));
     expect(screen.getByLabelText('Select Target')).toBeInTheDocument();
     expect(screen.getByText(`Select target...`)).toBeInTheDocument();
-    expect(screen.getByText(`fooTarget (service:jmx:rmi://someFooUrl): abcd`)).toBeInTheDocument();
-    expect(screen.getByText(`barTarget (service:jmx:rmi://someBarUrl): efgh`)).toBeInTheDocument();
+    expect(screen.getByText(`fooTarget (service:jmx:rmi://someFooUrl)`)).toBeInTheDocument();
+    expect(screen.getByText(`barTarget (service:jmx:rmi://someBarUrl)`)).toBeInTheDocument();
     expect(screen.getByText('2')).toBeInTheDocument(); // Number of discoverable targets
   });
 

diff --git a/src/test/TargetSelect/__snapshots__/TargetSelect.test.tsx.snap b/src/test/TargetSelect/__snapshots__/TargetSelect.test.tsx.snap
@@ -9,10 +9,10 @@ exports[`<TargetSelect /> renders correctly 1`] = `
   id=""
 >
   <div
-    className="pf-c-card__header"
+    className="pf-c-card__header pf-m-toggle-right"
   >
     <div
-      className=""
+      className="pf-c-card__title"
     >
       <h4
         className=""
@@ -99,6 +99,48 @@ exports[`<TargetSelect /> renders correctly 1`] = `
         </span>
       </button>
     </div>
+    <div
+      className="pf-c-card__header-toggle"
+    >
+      <button
+        aria-disabled={false}
+        aria-expanded={false}
+        aria-label="Details"
+        aria-labelledby="expandable-card-title toggle-button1"
+        className="pf-c-button pf-m-plain"
+        data-ouia-component-id="OUIA-Generated-Button-plain-1"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe={true}
+        disabled={false}
+        id="toggle-button1"
+        onClick={[Function]}
+        role={null}
+        type="button"
+      >
+        <span
+          className="pf-c-card__header-toggle-icon"
+        >
+          <svg
+            aria-hidden="true"
+            aria-labelledby={null}
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style={
+              Object {
+                "verticalAlign": "-0.125em",
+              }
+            }
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
   </div>
   <div
     className="pf-c-card__body"