Merge pull request #2576 from adamviktora/tree-view-close-button

CNV-56949: tree view close button styling changes

Author: openshift-merge-bot[bot]

src/views/virtualmachines/tree/VirtualMachineTreeView.scss

@@ -1,5 +1,5 @@
 .vms-tree-view {
-  overflow-x: hidden;
+  overflow: visible;
 
   .pf-v6-c-tree-view__list-item {
     position: relative;
@@ -22,20 +22,44 @@
     width: 100%;
   }
 
-  &__toolbar-top-panel {
-    align-items: center;
-    margin: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--md) 0
-      var(--pf-t--global--spacer--sm);
-  }
-
   &__search-input {
-    width: 100%;
+    margin-top: var(--pf-t--global--spacer--sm);
+    margin-inline: var(--pf-t--global--spacer--md);
   }
 
   &__action {
     padding: var(--pf-t--global--spacer--sm);
   }
 
+  &__panel-toggle-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    position: absolute;
+    right: -0.5rem;
+    top: 1.375rem;
+    z-index: var(--pf-t--global--z-index--2xl);
+    border: 1px solid var(--pf-t--global--icon--color--brand--default);
+    border-radius: 100%;
+    background: var(--pf-t--global--background--color--primary--default);
+
+    &:hover {
+      border-color: var(--pf-t--global--icon--color--brand--hover);
+
+      svg {
+        color: var(--pf-t--global--icon--color--brand--hover);
+      }
+    }
+
+    svg {
+      color: var(--pf-t--global--icon--color--brand--default);
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+
   &__header-section {
     margin: var(--pf-t--global--spacer--sm) 0;
   }

src/views/virtualmachines/tree/components/PanelToggleButton.tsx

@@ -1,26 +1,24 @@
 import React, { FC } from 'react';
 
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
-import { Button, ButtonVariant, Tooltip } from '@patternfly/react-core';
-import { PanelCloseIcon, PanelOpenIcon } from '@patternfly/react-icons';
+import { Tooltip } from '@patternfly/react-core';
+import { AngleLeftIcon, AngleRightIcon } from '@patternfly/react-icons';
 
 type PanelToggleButtonProps = {
-  className?: string;
   isOpen: boolean;
   toggleDrawer: () => void;
 };
 
-const PanelToggleButton: FC<PanelToggleButtonProps> = ({ className, isOpen, toggleDrawer }) => {
+const PanelToggleButton: FC<PanelToggleButtonProps> = ({ isOpen, toggleDrawer }) => {
   const { t } = useKubevirtTranslation();
+
+  const SvgIcon = isOpen ? AngleLeftIcon : AngleRightIcon;
+
   return (
     <Tooltip content={isOpen ? t('Close') : t('Open')}>
-      <Button
-        className={className}
-        hasNoPadding
-        icon={isOpen ? <PanelCloseIcon /> : <PanelOpenIcon />}
-        onClick={toggleDrawer}
-        variant={ButtonVariant.plain}
-      />
+      <button className="vms-tree-view__panel-toggle-button" onClick={toggleDrawer}>
+        <SvgIcon />
+      </button>
     </Tooltip>
   );
 };

src/views/virtualmachines/tree/components/TreeViewContent.tsx

@@ -54,23 +54,16 @@ const TreeViewContent: FC<TreeViewContentProps> = ({
     );
   }
 
+  const panelToggleButton = <PanelToggleButton isOpen={isOpen} toggleDrawer={toggleDrawer} />;
+
   if (!isOpen) {
-    return (
-      <PanelToggleButton
-        className="vms-tree-view__action"
-        isOpen={isOpen}
-        toggleDrawer={toggleDrawer}
-      />
-    );
+    return panelToggleButton;
   }
 
   return (
     <>
-      <TreeViewToolbar
-        closeComponent={<PanelToggleButton isOpen={isOpen} toggleDrawer={toggleDrawer} />}
-        isSwitchDisabled={isSwitchDisabled}
-        onSearch={onSearch}
-      />
+      {panelToggleButton}
+      <TreeViewToolbar isSwitchDisabled={isSwitchDisabled} onSearch={onSearch} />
       <DrawerHead className="vms-tree-view__header-section">
         <Content className="vms-tree-view__title" component="p">
           <TreeViewCollapseExpand setShowAll={setShowAll} showAll={showAll} />

src/views/virtualmachines/tree/components/TreeViewToolbar.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, FC, ReactNode } from 'react';
+import React, { ChangeEvent, FC } from 'react';
 
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
 import useLocalStorage from '@kubevirt-utils/hooks/useLocalStorage';
@@ -18,16 +18,11 @@ import {
 import { HIDE, SHOW, SHOW_EMPTY_PROJECTS_KEY, TREE_VIEW_SEARCH_ID } from '../utils/constants';
 
 type TreeViewToolbarProps = {
-  closeComponent: ReactNode;
   isSwitchDisabled: boolean;
   onSearch: (event: ChangeEvent<HTMLInputElement>) => void;
 };
 
-const TreeViewToolbar: FC<TreeViewToolbarProps> = ({
-  closeComponent,
-  isSwitchDisabled,
-  onSearch,
-}) => {
+const TreeViewToolbar: FC<TreeViewToolbarProps> = ({ isSwitchDisabled, onSearch }) => {
   const { t } = useKubevirtTranslation();
   const [showEmptyProjects, setShowEmptyProjects] = useLocalStorage(SHOW_EMPTY_PROJECTS_KEY, HIDE);
 
@@ -36,17 +31,13 @@ const TreeViewToolbar: FC<TreeViewToolbarProps> = ({
       <ToolbarContent className="vms-tree-view-toolbar-content">
         <Stack className="vms-tree-view__toolbar-section" hasGutter>
           <StackItem>
-            <Split className="vms-tree-view__toolbar-top-panel" hasGutter>
-              <SplitItem className="vms-tree-view__search-input" isFilled>
-                <TreeViewSearch
-                  id={TREE_VIEW_SEARCH_ID}
-                  name={TREE_VIEW_SEARCH_ID}
-                  onSearch={onSearch}
-                  placeholder={t('Search')}
-                />
-              </SplitItem>
-              <SplitItem>{closeComponent}</SplitItem>
-            </Split>
+            <TreeViewSearch
+              className="vms-tree-view__search-input"
+              id={TREE_VIEW_SEARCH_ID}
+              name={TREE_VIEW_SEARCH_ID}
+              onSearch={onSearch}
+              placeholder={t('Search')}
+            />
           </StackItem>
           <Divider />
           <StackItem>