@centreon/ui 24.4.1-sync-release-34022.1 → 24.4.1-sync-dev-2404.0

package/src/utils/useFullscreen/useFullscreen.ts

@@ -0,0 +1,73 @@
+import { useTranslation } from 'react-i18next';
+import { useAtom } from 'jotai';
+
+import { useSnackbar } from '../..';
+
+import { labelCannotEnterInFullscreen } from './translatedLabels';
+import { isFullscreenActivatedAtom } from './atoms';
+
+interface UseFullscreenState {
+  enterInFullscreen: (element: HTMLElement | null) => void;
+  exitFullscreen: () => void;
+  fullscreenEnabled: boolean;
+  isFullscreenActivated: boolean;
+  resetVariables: () => void;
+  toggleFullscreen: (element: HTMLElement | null) => void;
+}
+
+export const useFullscreen = (): UseFullscreenState => {
+  const { t } = useTranslation();
+
+  const { showErrorMessage } = useSnackbar();
+
+  const [isFullscreenActivated, setIsFullscreenActivated] = useAtom(
+    isFullscreenActivatedAtom
+  );
+
+  const resetVariables = (): void => {
+    setIsFullscreenActivated(false);
+  };
+
+  const enterInFullscreen = (element: HTMLElement | null): void => {
+    if (!document.fullscreenEnabled) {
+      return;
+    }
+
+    if (!element) {
+      showErrorMessage(t(labelCannotEnterInFullscreen));
+    }
+
+    element
+      ?.requestFullscreen({ navigationUI: 'show' })
+      .then(() => {
+        setIsFullscreenActivated(true);
+      })
+      .catch(() => {
+        showErrorMessage(t(labelCannotEnterInFullscreen));
+        setIsFullscreenActivated(false);
+      });
+  };
+
+  const exitFullscreen = (): void => {
+    document.exitFullscreen().then(resetVariables);
+  };
+
+  const toggleFullscreen = (element: HTMLElement | null): void => {
+    if (isFullscreenActivated || document.fullscreenElement) {
+      exitFullscreen();
+
+      return;
+    }
+
+    enterInFullscreen(element);
+  };
+
+  return {
+    enterInFullscreen,
+    exitFullscreen,
+    fullscreenEnabled: document.fullscreenEnabled,
+    isFullscreenActivated,
+    resetVariables,
+    toggleFullscreen
+  };
+};

package/src/utils/useFullscreen/useFullscreenListener.ts

@@ -0,0 +1,62 @@
+import { useEffect } from 'react';
+
+import { equals, includes } from 'ramda';
+import { useSearchParams } from 'react-router-dom';
+
+import { useDeepCompare } from '../useMemoComponent';
+
+import { useFullscreen } from './useFullscreen';
+
+export const router = {
+  useSearchParams
+};
+
+export const useFullscreenListener = (): boolean => {
+  const { toggleFullscreen, resetVariables, isFullscreenActivated } =
+    useFullscreen();
+
+  const toggle = (event: KeyboardEvent): void => {
+    if (
+      includes(document.activeElement?.tagName, ['INPUT', 'TEXTAREA']) ||
+      equals(
+        document.activeElement?.getAttribute('data-lexical-editor'),
+        'true'
+      ) ||
+      equals(document.activeElement?.getAttribute('contenteditable'), 'true') ||
+      !equals(event.code, 'KeyF')
+    ) {
+      return;
+    }
+
+    toggleFullscreen(document.querySelector('body'));
+  };
+
+  const changeFullscreen = (): void => {
+    if (document.fullscreenElement) {
+      return;
+    }
+
+    resetVariables();
+  };
+
+  useEffect(
+    () => {
+      document.addEventListener('fullscreenchange', changeFullscreen);
+
+      return () => {
+        document.removeEventListener('fullscreenchange', changeFullscreen);
+      };
+    },
+    useDeepCompare([document.fullscreenElement])
+  );
+
+  useEffect(() => {
+    window.addEventListener('keypress', toggle);
+
+    return () => {
+      window.removeEventListener('keypress', toggle);
+    };
+  }, [isFullscreenActivated]);
+
+  return isFullscreenActivated;
+};

package/src/utils/useInfiniteScrollListing.ts

@@ -24,6 +24,7 @@ interface UseInfiniteScrollListing<T> {
 interface UseInfiniteScrollListingProps<T> {
   customQueryParameters?: Array<QueryParameter>;
   decoder?: JsonDecoder.Decoder<Listing<T>>;
+  enabled?: boolean;
   endpoint: string;
   limit?: number;
   pageAtom: PrimitiveAtom<number>;
@@ -40,7 +41,8 @@ export const useInfiniteScrollListing = <T>({
   suspense = true,
   parameters,
   customQueryParameters,
-  limit = 100
+  limit = 100,
+  enabled = true
 }: UseInfiniteScrollListingProps<T>): UseInfiniteScrollListing<T> => {
   const [maxPage, setMaxPage] = useState(1);
 
@@ -61,6 +63,7 @@ export const useInfiniteScrollListing = <T>({
     getQueryKey: () => [queryKeyName, page],
     isPaginated: true,
     queryOptions: {
+      enabled,
       refetchOnMount: false,
       refetchOnWindowFocus: false,
       suspense: suspense && equals(page, 1)

package/src/Graph/LineChart/BasicComponents/LoadingProgress.tsx

@@ -1,46 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-import { CircularProgress, alpha } from '@mui/material';
-
-interface StyleProps {
-  height: number;
-  width: number;
-}
-
-const useStyles = makeStyles<StyleProps>()((theme, { height, width }) => ({
-  graphLoader: {
-    alignItems: 'center',
-    backgroundColor: alpha(theme.palette.common.white, 0.5),
-    display: 'flex',
-    height,
-    justifyContent: 'center',
-    position: 'absolute',
-    width
-  }
-}));
-
-interface LoadingProgress {
-  display: boolean;
-  height: number;
-  width: number;
-}
-
-const LoadingProgress = ({
-  display,
-  height,
-  width
-}: LoadingProgress): JSX.Element | null => {
-  const { classes } = useStyles({ height, width });
-
-  if (!display) {
-    return null;
-  }
-
-  return (
-    <div className={classes.graphLoader}>
-      <CircularProgress />
-    </div>
-  );
-};
-
-export default LoadingProgress;

package/src/Graph/LineChart/InteractiveComponents/AnchorPoint/TooltipAnchorPoint.tsx

@@ -1,96 +0,0 @@
-import { Tooltip } from '@visx/visx';
-
-import { Typography, useTheme } from '@mui/material';
-
-import useTooltipAnchorPoint from './useTooltipAnchorPoint';
-import { TooltipAnchorModel } from './models';
-
-const baseStyles = {
-  ...Tooltip.defaultStyles,
-  textAlign: 'center'
-};
-
-const TooltipAnchorPoint = ({
-  timeSeries,
-  xScale,
-  graphHeight,
-  leftScale,
-  rightScale,
-  graphWidth,
-  lines,
-  baseAxis
-}: TooltipAnchorModel): JSX.Element => {
-  const theme = useTheme();
-
-  const {
-    tooltipDataAxisX,
-    tooltipDataAxisYLeft,
-    tooltipLeftAxisX,
-    tooltipLeftAxisYLeft,
-    tooltipTopAxisYLeft,
-    tooltipDataAxisYRight,
-    tooltipTopAxisYRight,
-    tooltipLeftAxisYRight
-  } = useTooltipAnchorPoint({
-    baseAxis,
-    graphHeight,
-    graphWidth,
-    leftScale,
-    lines,
-    rightScale,
-    timeSeries,
-    xScale
-  });
-
-  const cardStyles = {
-    backgroundColor: theme.palette.background.paper,
-    color: theme.palette.text.primary,
-    padding: theme.spacing(0.25, 0.5)
-  };
-
-  return (
-    <>
-      {tooltipDataAxisX && (
-        <Tooltip.Tooltip
-          left={tooltipLeftAxisX}
-          style={{
-            ...baseStyles,
-            ...cardStyles,
-            transform: 'translateX(-70%)'
-          }}
-          top={0}
-        >
-          <Typography variant="caption">{tooltipDataAxisX}</Typography>
-        </Tooltip.Tooltip>
-      )}
-      {tooltipDataAxisYLeft && (
-        <Tooltip.Tooltip
-          left={tooltipLeftAxisYLeft}
-          style={{
-            ...baseStyles,
-            ...cardStyles,
-            transform: 'translateX(-70%) translateY(-100%)'
-          }}
-          top={tooltipTopAxisYLeft}
-        >
-          <Typography variant="caption">{tooltipDataAxisYLeft}</Typography>
-        </Tooltip.Tooltip>
-      )}
-      {tooltipDataAxisYRight && (
-        <Tooltip.Tooltip
-          left={tooltipLeftAxisYRight}
-          style={{
-            ...baseStyles,
-            ...cardStyles,
-            transform: 'translateX(-70%)  translateY(-80%)'
-          }}
-          top={tooltipTopAxisYRight}
-        >
-          <Typography variant="caption">{tooltipDataAxisYRight}</Typography>
-        </Tooltip.Tooltip>
-      )}
-    </>
-  );
-};
-
-export default TooltipAnchorPoint;

package/src/Graph/LineChart/InteractiveComponents/AnchorPoint/useTooltipAnchorPoint.ts

@@ -1,107 +0,0 @@
-import { useEffect } from 'react';
-
-import { Tooltip } from '@visx/visx';
-import { isNil } from 'ramda';
-
-import { useLocaleDateTimeFormat } from '@centreon/ui';
-
-import { margin, timeFormat } from '../../common/index';
-
-import { TooltipAnchorModel, UseTooltipAnchorPointResult } from './models';
-import useTickGraph from './useTickGraph';
-
-const useTooltipAnchorPoint = ({
-  timeSeries,
-  xScale,
-  graphHeight,
-  leftScale,
-  rightScale,
-  graphWidth,
-  lines,
-  baseAxis
-}: TooltipAnchorModel): UseTooltipAnchorPointResult => {
-  const { format } = useLocaleDateTimeFormat();
-
-  const { positionX, positionY, tickAxisBottom, tickAxisLeft, tickAxisRight } =
-    useTickGraph({
-      baseAxis,
-      leftScale,
-      lines,
-      rightScale,
-      timeSeries,
-      xScale
-    });
-
-  const {
-    showTooltip: showTooltipAxisYLeft,
-    tooltipData: tooltipDataAxisYLeft,
-    tooltipLeft: tooltipLeftAxisYLeft,
-    tooltipTop: tooltipTopAxisYLeft
-  } = Tooltip.useTooltip();
-  const {
-    showTooltip: showTooltipAxisX,
-    tooltipData: tooltipDataAxisX,
-    tooltipLeft: tooltipLeftAxisX,
-    tooltipTop: tooltipTopAxisX
-  } = Tooltip.useTooltip();
-
-  const {
-    showTooltip: showTooltipAxisYRight,
-    tooltipData: tooltipDataAxisYRight,
-    tooltipLeft: tooltipLeftAxisYRight,
-    tooltipTop: tooltipTopAxisYRight
-  } = Tooltip.useTooltip();
-
-  useEffect(() => {
-    if (!positionX || !positionY || !tickAxisBottom) {
-      return;
-    }
-
-    const dataAxisX = format({
-      date: tickAxisBottom,
-      formatString: timeFormat
-    });
-
-    showTooltipAxisX({
-      tooltipData: dataAxisX,
-      tooltipLeft: positionX + margin.left,
-      tooltipTop: graphHeight + margin.top
-    });
-  }, [positionX, positionY, tickAxisBottom]);
-
-  useEffect(() => {
-    if (!positionX || !positionY || !tickAxisLeft) {
-      return;
-    }
-    showTooltipAxisYLeft({
-      tooltipData: tickAxisLeft,
-      tooltipLeft: margin.left,
-      tooltipTop: positionY + margin.top
-    });
-  }, [tickAxisLeft, positionX, positionY]);
-
-  useEffect(() => {
-    if (!positionX || !positionY || !tickAxisRight) {
-      return;
-    }
-    showTooltipAxisYRight({
-      tooltipData: tickAxisRight,
-      tooltipLeft: graphWidth ? graphWidth + margin.left : 0,
-      tooltipTop: positionY + margin.top
-    });
-  }, [positionX, positionY, tickAxisRight]);
-
-  return {
-    tooltipDataAxisX: !isNil(tickAxisBottom) ? tooltipDataAxisX : null,
-    tooltipDataAxisYLeft: !isNil(tickAxisLeft) ? tooltipDataAxisYLeft : null,
-    tooltipDataAxisYRight: !isNil(tickAxisRight) ? tooltipDataAxisYRight : null,
-    tooltipLeftAxisX,
-    tooltipLeftAxisYLeft,
-    tooltipLeftAxisYRight,
-    tooltipTopAxisX,
-    tooltipTopAxisYLeft,
-    tooltipTopAxisYRight
-  } as UseTooltipAnchorPointResult;
-};
-
-export default useTooltipAnchorPoint;

package/src/Graph/LineChart/Legend/InteractiveValue.tsx

@@ -1,22 +0,0 @@
-import { Typography } from '@mui/material';
-
-import { useLegendValueStyles } from './Legend.styles';
-
-interface Props {
-  value?: string | null;
-}
-
-const InteractiveValue = ({ value }: Props): JSX.Element | null => {
-  const { classes } = useLegendValueStyles({});
-  if (!value) {
-    return null;
-  }
-
-  return (
-    <Typography className={classes.text} variant="h6">
-      {value}
-    </Typography>
-  );
-};
-
-export default InteractiveValue;

package/src/Graph/LineChart/Legend/useInteractiveValues.ts

@@ -1,99 +0,0 @@
-import { useMemo } from 'react';
-
-import { useAtomValue } from 'jotai';
-import { equals, find, isNil } from 'ramda';
-
-import { mousePositionAtom } from '../InteractiveComponents/interactionWithGraphAtoms';
-import {
-  formatMetricValue,
-  getLineForMetric,
-  getMetrics,
-  getTimeValue
-} from '../../common/timeSeries';
-import { Line, TimeValue } from '../../common/timeSeries/models';
-
-import { FormattedMetricData } from './models';
-
-interface InteractiveValues {
-  getFormattedValue: (line: Line) => string | null | undefined;
-}
-
-interface Props {
-  base: number;
-  lines: Array<Line>;
-  timeSeries: Array<TimeValue>;
-  xScale;
-}
-
-const useInteractiveValues = ({
-  timeSeries,
-  lines,
-  base,
-  xScale
-}: Props): InteractiveValues => {
-  const mousePosition = useAtomValue(mousePositionAtom);
-
-  const timeValue = getTimeValue({
-    timeSeries,
-    x: mousePosition?.[0],
-    xScale
-  });
-
-  const graphTimeValue = timeSeries?.find((item) =>
-    equals(item.timeTick, timeValue?.timeTick)
-  );
-
-  const getMetricsToDisplay = (): Array<number> => {
-    if (isNil(graphTimeValue)) {
-      return [];
-    }
-    const metricsData = getMetrics(graphTimeValue as TimeValue);
-
-    const metricsToDisplay = metricsData.filter((metric_id) => {
-      const line = getLineForMetric({ lines, metric_id: Number(metric_id) });
-
-      return !isNil(graphTimeValue[metric_id]) && !isNil(line);
-    });
-
-    return metricsToDisplay.map(Number);
-  };
-
-  const metrics = useMemo(() => getMetricsToDisplay(), [graphTimeValue]);
-
-  const getFormattedMetricData = (
-    metric_id: number
-  ): FormattedMetricData | null => {
-    if (isNil(graphTimeValue)) {
-      return null;
-    }
-    const value = graphTimeValue[metric_id] as number;
-
-    const { color, name, unit } = getLineForMetric({
-      lines,
-      metric_id
-    }) as Line;
-
-    const formattedValue = formatMetricValue({
-      base,
-      unit,
-      value
-    });
-
-    return {
-      color,
-      formattedValue,
-      name,
-      unit
-    };
-  };
-
-  const getFormattedValue = (line: Line): string | undefined | null => {
-    const metric_id = find(equals(line.metric_id), metrics);
-
-    return metric_id ? getFormattedMetricData(metric_id)?.formattedValue : null;
-  };
-
-  return { getFormattedValue };
-};
-
-export default useInteractiveValues;

package/src/Typography/FluidTypography/useFluidResizeObserver.ts

@@ -1,56 +0,0 @@
-import {
-  MutableRefObject,
-  useCallback,
-  useEffect,
-  useRef,
-  useState
-} from 'react';
-
-interface Size {
-  height: number;
-  width: number;
-}
-
-interface UseFluidResizeObserver {
-  isParent?: boolean;
-  ref: MutableRefObject<HTMLElement | undefined>;
-}
-
-const useFluidResizeObserver = ({
-  ref,
-  isParent
-}: UseFluidResizeObserver): Size => {
-  const [size, setSize] = useState<Size>({ height: 0, width: 0 });
-
-  const observer = useRef<ResizeObserver | null>(null);
-
-  const resizeObserver = useCallback(
-    (element) => {
-      if (observer.current) {
-        observer.current.disconnect();
-      }
-
-      observer.current = new ResizeObserver(
-        ([entry]: Array<ResizeObserverEntry>) => {
-          setSize({
-            height: entry.target?.getBoundingClientRect().height || 0,
-            width: entry.target?.getBoundingClientRect().width || 0
-          });
-        }
-      );
-
-      if (element && observer.current) {
-        observer.current.observe(element);
-      }
-    },
-    [ref.current]
-  );
-
-  useEffect(() => {
-    resizeObserver(isParent ? ref.current?.parentElement : ref.current);
-  }, [ref.current]);
-
-  return size;
-};
-
-export default useFluidResizeObserver;

package/src/components/Form/AccessRights/AccessRights.resource.ts

@@ -1,45 +0,0 @@
-export type ContactAccessRightState =
-  | 'added'
-  | 'updated'
-  | 'removed'
-  | 'unchanged';
-
-export type ContactAccessRightStateResource = {
-  contactAccessRight: ContactAccessRightResource;
-  state: ContactAccessRightState;
-  stateHistory: Array<ContactAccessRightState>;
-};
-
-export type ContactAccessRightResource = {
-  contact: ContactResource | ContactGroupResource | null;
-  role: RoleResource['role'];
-};
-
-export type ContactResource = {
-  email?: string;
-  id?: number | string;
-  name: string;
-  type: 'contact';
-};
-
-export const isContactResource = (
-  resource: ContactResource | ContactGroupResource | null
-): resource is ContactResource => {
-  return resource?.type === 'contact';
-};
-
-export type ContactGroupResource = {
-  id?: number | string;
-  name: string;
-  type: 'contact_group';
-};
-
-export const isContactGroupResource = (
-  resource: ContactResource | ContactGroupResource | null
-): resource is ContactResource => {
-  return resource?.type === 'contact_group';
-};
-
-export type RoleResource = {
-  role: 'viewer' | 'editor' | string;
-};

package/src/components/Form/AccessRights/AccessRightsForm.stories.tsx

@@ -1,59 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { AccessRightsForm } from './AccessRightsForm';
-import { Default as DefaultContactAccessRightsListStory } from './List/ContactAccessRightsList.stories';
-import { Default as DefaultContactAccessRightInputStory } from './Input/ContactAccessRightInput.stories';
-import { ContactAccessRightsListProps } from './List/ContactAccessRightsList';
-import { ContactAccessRightInputProps } from './Input/ContactAccessRightInput';
-import {
-  contactAccessRightsMock,
-  contactsAndGroupsMock
-} from './__fixtures__/contactAccessRight.mock';
-
-const meta: Meta<typeof AccessRightsForm> = {
-  component: AccessRightsForm
-};
-
-export default meta;
-type Story = StoryObj<typeof AccessRightsForm>;
-
-export const Default: Story = {
-  args: {
-    initialValues: contactAccessRightsMock(12),
-    labels: {
-      actions: {
-        cancel: 'Cancel',
-        copyLink: 'Copy link',
-        copyLinkMessages: {
-          error: 'Unable to copy link',
-          success: 'Link copied'
-        },
-        submit: 'Update'
-      },
-      input: {
-        ...DefaultContactAccessRightInputStory.args?.labels
-      } as ContactAccessRightInputProps['labels'],
-      list: {
-        ...DefaultContactAccessRightsListStory.args?.labels
-      } as ContactAccessRightsListProps['labels'],
-      stats: {
-        added: 'added',
-        removed: 'removed',
-        updated: 'updated'
-      }
-    },
-    options: {
-      contacts: contactsAndGroupsMock(25),
-      roles: [{ role: 'viewer' }, { role: 'editor' }]
-    },
-    resourceLink: 'https://app.centreon.com/resource/1'
-  }
-};
-
-export const AsEmptyState: Story = {
-  args: {
-    labels: Default.args?.labels,
-    options: Default.args?.options,
-    resourceLink: Default.args?.resourceLink
-  }
-};