From fc444953483c1dfea7998de41a6077bf5a9244e0 Mon Sep 17 00:00:00 2001
From: Olha Tomylko <otomylko@redhat.com>
Date: Thu, 20 Aug 2026 11:06:15 +0200
Subject: [PATCH] fix(ui): update Add widgets button to reflect drawer state

---
 src/Components/GenericHeader/GenericHeader.tsx | 13 +++++++++----
 src/Components/Header/Header.tsx               | 10 +++++-----
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/Components/GenericHeader/GenericHeader.tsx b/src/Components/GenericHeader/GenericHeader.tsx
index aa462db..99f4d64 100644
--- a/src/Components/GenericHeader/GenericHeader.tsx
+++ b/src/Components/GenericHeader/GenericHeader.tsx
@@ -4,7 +4,7 @@ import { ActionList, ActionListItem, Button, Flex, FlexItem, TextInput } from '@
 import PageHeader from '@patternfly/react-component-groups/dist/dynamic/PageHeader';
 import React, { useState } from 'react';
 import { CheckIcon, PencilAltIcon, PlusCircleIcon, TimesIcon } from '@patternfly/react-icons';
-import { useSetAtom } from 'jotai';
+import { useAtom } from 'jotai';
 import { drawerExpandedAtom } from '../../state/drawerExpandedAtom';
 import { DashboardTemplate } from '../../api/dashboard-templates';
 import GenericHeaderDropdown from './GenericHeaderDropdown';
@@ -16,7 +16,7 @@ interface GenericHeaderProps {
 }
 
 const GenericHeader = ({ dashboard, onRenameDashboard }: GenericHeaderProps) => {
-  const toggleOpen = useSetAtom(drawerExpandedAtom);
+  const [isDrawerExpanded, toggleOpen] = useAtom(drawerExpandedAtom);
   const addNotification = useAddNotification();
   const [isEditing, setIsEditing] = useState(false);
   const [editedName, setEditedName] = useState('');
@@ -90,8 +90,13 @@ const GenericHeader = ({ dashboard, onRenameDashboard }: GenericHeaderProps) =>
       actionMenu={
         <ActionList>
           <ActionListItem>
-            <Button onClick={() => toggleOpen((prev) => !prev)} variant="secondary" icon={<PlusCircleIcon />} ouiaId="add-widget-button">
-              Add widgets
+            <Button
+              onClick={() => toggleOpen((prev) => !prev)}
+              variant="secondary"
+              icon={isDrawerExpanded ? <TimesIcon /> : <PlusCircleIcon />}
+              ouiaId="add-widget-button"
+            >
+              {isDrawerExpanded ? 'Close widget panel' : 'Add widgets'}
             </Button>
           </ActionListItem>
           {dashboard && (
diff --git a/src/Components/Header/Header.tsx b/src/Components/Header/Header.tsx
index 5c99959..a72e855 100644
--- a/src/Components/Header/Header.tsx
+++ b/src/Components/Header/Header.tsx
@@ -23,8 +23,8 @@ import {
   ToolbarItem,
 } from '@patternfly/react-core';
 import React, { useRef, useState } from 'react';
-import { CodeIcon, CopyIcon, EditAltIcon, EllipsisVIcon, PlusCircleIcon, PlusIcon, ThIcon } from '@patternfly/react-icons';
-import { useAtom, useSetAtom } from 'jotai';
+import { CodeIcon, CopyIcon, EditAltIcon, EllipsisVIcon, PlusCircleIcon, PlusIcon, ThIcon, TimesIcon } from '@patternfly/react-icons';
+import { useAtom } from 'jotai';
 import { drawerExpandedAtom } from '../../state/drawerExpandedAtom';
 import { templateIdAtom } from '../../state/templateAtom';
 import { useApi } from '../../hooks/useApi';
@@ -207,7 +207,7 @@ export const KebabDropdown = ({ layoutType }: { layoutType?: string }) => {
 
 const Controls = () => {
   const [isOpen, setIsOpen] = useState(false);
-  const toggleOpen = useSetAtom(drawerExpandedAtom);
+  const [isDrawerExpanded, toggleOpen] = useAtom(drawerExpandedAtom);
   const [templateId, setTemplateId] = useAtom(templateIdAtom);
   const api = useApi();
 
@@ -250,10 +250,10 @@ const Controls = () => {
               toggleOpen((prev) => !prev);
             }}
             variant="primary"
-            icon={<PlusCircleIcon />}
+            icon={isDrawerExpanded ? <TimesIcon /> : <PlusCircleIcon />}
             ouiaId="add-widget-button"
           >
-            Add widgets
+            {isDrawerExpanded ? 'Close widget panel' : 'Add widgets'}
           </Button>
         </ToolbarItem>
       </ToolbarGroup>