remove dashboard SerializedTarget, move into expandable TargetSelect

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

Hide file tree

Showing 3 changed files with 33 additions and 36 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(
@@ -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>