feat: Use togglebutton instead of the shellbar item for an ai assistant button (#3898)

Author: mrCherry97

src/header/Header.tsx

@@ -1,10 +1,11 @@
 import { useRef, useState } from 'react';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import {
   Avatar,
   ShellBar,
   ShellBarItem,
   ListItemStandard,
+  ToggleButton,
 } from '@ui5/webcomponents-react';
 
 import { useTranslation } from 'react-i18next';
@@ -45,7 +46,9 @@ export function Header() {
   const clusters = useRecoilValue(clustersState);
 
   const { isEnabled: isKymaCompanionEnabled } = useFeature('KYMA_COMPANION');
-  const setShowCompanion = useSetRecoilState(showKymaCompanionState);
+  const [showCompanion, setShowCompanion] = useRecoilState(
+    showKymaCompanionState,
+  );
   const shellbarRef = useRef(null);
 
   const inactiveClusterNames = Object.keys(clusters || {}).filter(
@@ -148,16 +151,18 @@ export function Header() {
         {isKymaCompanionEnabled &&
           isSAPUser &&
           window.location.pathname !== '/clusters' && (
-            <ShellBarItem
-              onClick={() =>
+            <ToggleButton
+              accessibleName="Kyma Companion"
+              icon={showCompanion.show ? 'da-2' : 'da'}
+              onClick={e => {
+                e.preventDefault();
                 setShowCompanion({
                   show: true,
                   fullScreen: false,
-                })
-              }
-              icon="da"
-              text={t('kyma-companion.name')}
-              title={t('kyma-companion.name')}
+                });
+              }}
+              pressed={showCompanion.show}
+              slot="assistant"
             />
           )}
       </ShellBar>

tests/integration/support/companion-commands.js

@@ -1,6 +1,6 @@
 Cypress.Commands.add('openCompanion', () => {
   cy.get('ui5-shellbar')
-    .find('ui5-button[icon="da"]')
+    .find('ui5-toggle-button[icon="da"]')
     .should('be.visible')
     .click();
 });

tests/integration/tests/companion/test-companion-ui.spec.js

@@ -67,7 +67,7 @@ context('Test Companion UI', () => {
       cy.wait(1000);
 
       cy.get('@shellbar')
-        .find('ui5-button[icon="da"]')
+        .find('ui5-toggle-button[icon="da"]')
         .should('not.exist');
     });
   });