@centreon/ui 24.4.1-MON-34407-implement-the-status-chart-widget.9 → 24.4.1-MON-37085-fix-fullscreen.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.1-MON-34407-implement-the-status-chart-widget.9",
+  "version": "24.4.1-MON-37085-fix-fullscreen.0",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Graph/BarStack/ResponsiveBarStack.tsx

@@ -12,7 +12,7 @@ import { Tooltip } from '../../components';
 import { LegendProps } from '../Legend/models';
 import { Legend as LegendComponent } from '../Legend';
 import { getValueByUnit } from '../common/utils';
-import { labelNoDataFound as defaultlabelNoDataFound } from '../translatedLabels';
+import { labelNoDataFound } from '../translatedLabels';
 
 import { BarStackProps } from './models';
 import { useBarStackStyles } from './BarStack.styles';
@@ -35,8 +35,7 @@ const BarStack = ({
   unit = 'number',
   displayValues,
   variant = 'vertical',
-  legendDirection = 'column',
-  labelNoDataFound = defaultlabelNoDataFound
+  legendDirection = 'column'
 }: BarStackProps & { height: number; width: number }): JSX.Element => {
   const { t } = useTranslation();
   const { classes } = useBarStackStyles();
@@ -91,7 +90,7 @@ const BarStack = ({
       >
         {title && (
           <div className={classes.title} data-testid="Title" ref={titleRef}>
-            {`${numeral(total).format('0a').toUpperCase()} `} {t(title)}
+            {`${numeral(total).format('0a').toUpperCase()} `} {title}
           </div>
         )}
         <div
@@ -145,9 +144,8 @@ const BarStack = ({
                             isVerticalBar ? 'right-start' : 'bottom-start'
                           }
                         >
-                          <g data-testid={bar.key} onClick={onClick}>
+                          <g data-testid={bar.key}>
                             <rect
-                              cursor="pointer"
                               fill={bar.color}
                               height={
                                 isVerticalBar ? bar.height - 1 : bar.height
@@ -157,6 +155,7 @@ const BarStack = ({
                               width={isVerticalBar ? bar.width : bar.width - 1}
                               x={bar.x}
                               y={bar.y}
+                              onClick={onClick}
                             />
                             {displayValues &&
                               bar.height > 10 &&

package/src/Graph/BarStack/models.ts

@@ -10,7 +10,6 @@ export type BarStackProps = {
   data: Array<BarType>;
   displayLegend?: boolean;
   displayValues?: boolean;
-  labelNoDataFound?: string;
   legendDirection?: 'row' | 'column';
   onSingleBarClick?: (barData) => void;
   size?: number;

package/src/Graph/PieChart/ResponsivePie.tsx

@@ -13,7 +13,7 @@ import { Tooltip } from '../../components';
 import { Legend as LegendComponent } from '../Legend';
 import { LegendProps } from '../Legend/models';
 import { getValueByUnit } from '../common/utils';
-import { labelNoDataFound as defaultlabelNoDataFound } from '../translatedLabels';
+import { labelNoDataFound } from '../translatedLabels';
 
 import { PieProps } from './models';
 import { usePieStyles } from './PieChart.styles';
@@ -54,8 +54,7 @@ const ResponsivePie = ({
   onArcClick,
   displayValues,
   TooltipContent,
-  legendDirection = 'column',
-  labelNoDataFound = defaultlabelNoDataFound
+  legendDirection = 'column'
 }: PieProps & { height: number; width: number }): JSX.Element => {
   const { t } = useTranslation();
   const theme = useTheme();
@@ -179,7 +178,6 @@ const ResponsivePie = ({
                       >
                         <g data-testid={arc.data.label} onClick={onClick}>
                           <path
-                            cursor="pointer"
                             d={pie.path(arc) as string}
                             fill={arc.data.color}
                           />

package/src/Graph/PieChart/models.ts

@@ -11,7 +11,6 @@ export interface PieProps {
   displayLegend?: boolean;
   displayValues?: boolean;
   innerRadius?: number;
-  labelNoDataFound?: string;
   legendDirection?: 'row' | 'column';
   onArcClick?: (ardata) => void;
   title?: string;

package/src/utils/useFullscreen/Fullscreen.cypress.spec.tsx

@@ -22,6 +22,8 @@ const ChildComponent = (): JSX.Element => {
       <Button onClick={() => toggleFullscreen(document.body)}>
         {isFullscreenActivated ? labelExitFullscreen : labelEnterFullscreen}
       </Button>
+      <input id="input" />
+      <textarea id="textarea" />
     </div>
   );
 };
@@ -94,16 +96,35 @@ describe('Fullscreen', () => {
       .should('have.attr', 'data-fullscreenActivated', 'false')
       .should('have.attr', 'data-fullscreenEnabled', 'true');
 
-    cy.get('#test').realPress(['Alt', 'F']);
+    cy.get('#test').realPress(['F']);
 
     cy.get('#test')
       .should('have.attr', 'data-fullscreenActivated', 'true')
       .should('have.attr', 'data-fullscreenEnabled', 'true');
 
-    cy.get('#test').realPress(['Alt', 'F']);
+    cy.get('#test').realPress(['F']);
 
     cy.get('#test')
       .should('have.attr', 'data-fullscreenActivated', 'false')
       .should('have.attr', 'data-fullscreenEnabled', 'true');
   });
+
+  ['input', 'textarea'].forEach((tag) => {
+    it(`cannot toggle fullscreen feature using the shortcut when ${tag === 'input' ? 'an' : 'a'} ${tag} is focused`, () => {
+      initialize();
+
+      cy.get('#test')
+        .should('have.attr', 'data-fullscreenActivated', 'false')
+        .should('have.attr', 'data-fullscreenEnabled', 'true');
+
+      cy.get(`#${tag}`).focus();
+
+      cy.get('#test').realPress(['F']);
+
+      cy.get('#test')
+        .should('have.attr', 'data-fullscreenActivated', 'false')
+        .should('have.attr', 'data-fullscreenEnabled', 'true');
+      cy.get(`#${tag}`).should('have.value', 'F');
+    });
+  });
 });

package/src/utils/useFullscreen/useFullscreenListener.ts

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-import { equals } from 'ramda';
+import { equals, includes } from 'ramda';
 import { useSearchParams } from 'react-router-dom';
 
 import { useDeepCompare } from '../useMemoComponent';
@@ -16,7 +16,10 @@ export const useFullscreenListener = (): boolean => {
     useFullscreen();
 
   const toggle = (event: KeyboardEvent): void => {
-    if (!event.altKey || !equals(event.code, 'KeyF')) {
+    if (
+      includes(document.activeElement?.tagName, ['INPUT', 'TEXTAREA']) ||
+      !equals(event.code, 'KeyF')
+    ) {
       return;
     }