@centreon/ui 24.4.59 → 24.4.60

package/src/utils/docsURL.ts

@@ -1,31 +0,0 @@
-interface OnPremDocsURL {
-  majorVersion: string;
-  minorVersion: string;
-}
-
-interface DocsURL {
-  isCloudPlatform: boolean;
-  majorVersion: string;
-  minorVersion: string;
-}
-
-export const getOnPremDocsURL = ({
-  majorVersion,
-  minorVersion
-}: OnPremDocsURL): string => {
-  return `https://docs.centreon.com/docs/${majorVersion}.${minorVersion}/alerts-notifications/resources-status/#search-bar`;
-};
-export const cloudDocsURL =
-  'https://docs.centreon.com/cloud/alerts-notifications/resources-status/#search-bar';
-
-export const getDocsURL = ({
-  isCloudPlatform,
-  majorVersion,
-  minorVersion
-}: DocsURL): string => {
-  if (isCloudPlatform) {
-    return cloudDocsURL;
-  }
-
-  return getOnPremDocsURL({ majorVersion, minorVersion });
-};

package/src/utils/index.ts

@@ -1,24 +0,0 @@
-export * from './useLocaleDateTimeFormat';
-export * from './getNormalizedId';
-export * from './statuses';
-export * from './typedMemo';
-export * from './useCopyToClipboard';
-export * from './useDateTimePickerAdapter';
-export * from './useDebounce';
-export * from './useDeepCallback';
-export * from './useDeepMemo';
-export * from './useIntersectionObserver';
-export * from './useKeyObserver';
-export * from './useLoadImage';
-export * from './useMemoComponent';
-export * from './useThemeMode';
-export * from './useViewportIntersection';
-export * from './panelSize';
-export * from './sanitizedHTML';
-export * from './docsURL';
-export * from './useInfiniteScrollListing';
-export * from './useLicenseExpirationWarning';
-export * from './useRefreshInterval';
-export * from './centreonBaseURL';
-export * from './useResizeObserver';
-export * from './useFullscreen';

package/src/utils/panelSize.ts

@@ -1,15 +0,0 @@
-import { gt } from 'ramda';
-
-export enum PanelSize {
-  Small = 550,
-  Medium = 675,
-  Large = 800
-}
-
-interface PanelSizeParams {
-  currentSize: number;
-}
-
-export const togglePanelSize = ({ currentSize }: PanelSizeParams): number => {
-  return gt(currentSize, PanelSize.Medium) ? PanelSize.Small : PanelSize.Large;
-};

package/src/utils/sanitizedHTML.ts

@@ -1,18 +0,0 @@
-import sanitizeHtml, { IOptions } from 'sanitize-html';
-import ReactHtmlParser from 'react-html-parser';
-
-interface UseSanitizedHTMLProps {
-  initialContent: string;
-  sanitizeOptions?: IOptions;
-}
-
-const sanitizedHTML = ({
-  initialContent,
-  sanitizeOptions = {}
-}: UseSanitizedHTMLProps): JSX.Element => {
-  const sanitizedContent = sanitizeHtml(initialContent, sanitizeOptions);
-
-  return ReactHtmlParser(sanitizedContent);
-};
-
-export { sanitizedHTML };

package/src/utils/translatedLabel.ts

@@ -1,2 +0,0 @@
-export const labelLicenseWarning = (module, daysUntilExpiration): string =>
-  `The ${module} license will expire in ${daysUntilExpiration} days`;

package/src/utils/useDateTimePickerAdapter.ts

@@ -1,309 +0,0 @@
-/* eslint-disable class-methods-use-this */
-import { useCallback } from 'react';
-
-import dayjs from 'dayjs';
-import { useAtomValue } from 'jotai';
-import { equals, isNil, not } from 'ramda';
-
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-
-import { useLocaleDateTimeFormat } from '@centreon/ui';
-import { userAtom } from '@centreon/ui-context';
-
-interface GetDestinationAndConfiguredTimezoneOffsetProps {
-  endTimezone?: string;
-  startTimezone?: string;
-}
-
-interface UseDateTimePickerAdapterProps {
-  Adapter;
-  desktopPickerMediaQuery: string;
-}
-
-enum DSTState {
-  SUMMER,
-  WINTER,
-  NODST
-}
-
-interface ToTimezonedDateProps {
-  date: Date;
-  timeZone?: string;
-}
-
-interface GetDSTStateProps {
-  date: dayjs.Dayjs;
-  timezoneToUse?: string;
-}
-
-export const useDateTimePickerAdapter = (): UseDateTimePickerAdapterProps => {
-  const { timezone, locale } = useAtomValue(userAtom);
-  const { format } = useLocaleDateTimeFormat();
-
-  const desktopPickerMediaQuery =
-    '@media (pointer: fine) or (min-width: 1024px)';
-
-  const toTimezonedDate = ({
-    date,
-    timeZone = undefined
-  }: ToTimezonedDateProps): Date => {
-    if (isNil(timeZone)) {
-      return new Date(date.toLocaleString('en-US'));
-    }
-
-    return new Date(date.toLocaleString('en-US', { timeZone }));
-  };
-
-  const getDestinationAndConfiguredTimezoneOffset = ({
-    startTimezone = undefined,
-    endTimezone = timezone
-  }: GetDestinationAndConfiguredTimezoneOffsetProps): number => {
-    const now = new Date();
-    const currentTimezoneDate = toTimezonedDate({
-      date: now,
-      timeZone: startTimezone
-    });
-    const destinationTimezoneDate = toTimezonedDate({
-      date: now,
-      timeZone: endTimezone
-    });
-
-    return Math.floor(
-      (currentTimezoneDate.getTime() - destinationTimezoneDate.getTime()) /
-        60 /
-        60 /
-        1000
-    );
-  };
-
-  const getDSTState = useCallback(
-    ({ date, timezoneToUse }: GetDSTStateProps): DSTState => {
-      const hasNoTimezone = isNil(timezoneToUse);
-      const currentYear = toTimezonedDate({
-        date: new Date(),
-        timeZone: timezoneToUse
-      }).getFullYear();
-
-      const january = hasNoTimezone
-        ? dayjs(new Date(currentYear, 0, 1)).utcOffset()
-        : dayjs(new Date(currentYear, 0, 1)).tz(timezoneToUse).utcOffset();
-      const july = hasNoTimezone
-        ? dayjs(new Date(currentYear, 6, 1)).utcOffset()
-        : dayjs(new Date(currentYear, 6, 1)).tz(timezoneToUse).utcOffset();
-
-      if (equals(january, july)) {
-        return DSTState.NODST;
-      }
-
-      return july === date.tz().utcOffset() ? DSTState.SUMMER : DSTState.WINTER;
-    },
-    [timezone]
-  );
-
-  const getDSTStateForCurrentTimezone = useCallback(
-    (date: dayjs.Dayjs): DSTState => {
-      return getDSTState({ date });
-    },
-    []
-  );
-
-  interface Chunk {
-    array: Array<unknown>;
-    size: number;
-  }
-  class Adapter extends AdapterDayjs {
-    public formatByString = (value, formatKey: string): string => {
-      return format({
-        date: value.tz(timezone).toDate(),
-        formatString: formatKey
-      });
-    };
-
-    public format = (date: dayjs.Dayjs, formatKey: string): string => {
-      return this.formatByString(
-        date.tz(timezone, true),
-        this.formats[formatKey]
-      );
-    };
-
-    public startOfWeek = (date: dayjs.Dayjs): dayjs.Dayjs => {
-      if (date.tz(timezone).isUTC()) {
-        return date.tz(timezone).startOf('week').utc();
-      }
-
-      return date.tz(timezone).startOf('week');
-    };
-
-    public setMinutes = (date: dayjs.Dayjs, count: number): dayjs.Dayjs => {
-      return date.minute(count);
-    };
-
-    public setHours = (date: dayjs.Dayjs, count: number): dayjs.Dayjs => {
-      return date.hour(count);
-    };
-
-    public isSameDay = (date: dayjs.Dayjs, comparing: dayjs.Dayjs): boolean => {
-      const isSameYearAndMonth = this.isSameYear(date, comparing)
-        ? this.isSameMonth(date, comparing)
-        : false;
-
-      return (
-        isSameYearAndMonth &&
-        date.tz(timezone).isSame(comparing.tz(timezone), 'day')
-      );
-    };
-
-    public startOfDay = (date: dayjs.Dayjs): dayjs.Dayjs => {
-      return date.tz(timezone).startOf('day') as dayjs.Dayjs;
-    };
-
-    public endOfDay = (date: dayjs.Dayjs): dayjs.Dayjs => {
-      return date.tz(timezone).endOf('day') as dayjs.Dayjs;
-    };
-
-    public startOfMonth = (date: dayjs.Dayjs): dayjs.Dayjs => {
-      if (date.tz(timezone).isUTC()) {
-        return date.tz(timezone).utc();
-      }
-
-      return date.tz(timezone);
-    };
-
-    public endOfMonth = (date: dayjs.Dayjs): dayjs.Dayjs => {
-      return date.tz(timezone).endOf('month') as dayjs.Dayjs;
-    };
-
-    public isSameMonth = (
-      date: dayjs.Dayjs,
-      comparing: dayjs.Dayjs
-    ): boolean => {
-      return date.tz(timezone).isSame(comparing.tz(timezone), 'month');
-    };
-
-    public getMonth = (date: dayjs.Dayjs): number => {
-      return date.tz(timezone).month();
-    };
-
-    public isAfter = (date: dayjs.Dayjs, value: dayjs.Dayjs): boolean => {
-      return date.isAfter(value.endOf('month'));
-    };
-
-    public isBefore = (date: dayjs.Dayjs, value: dayjs.Dayjs): boolean => {
-      return date.isBefore(value.startOf('month'));
-    };
-
-    public getDaysInMonth = (date: dayjs.Dayjs): number => {
-      return date.tz(timezone).daysInMonth();
-    };
-
-    public getWeekdays = (): Array<string> => {
-      const start = dayjs().locale(locale).tz(timezone).startOf('week');
-
-      return [0, 1, 2, 3, 4, 5, 6].map((diff) =>
-        this.formatByString(start.add(diff, 'day'), 'dd')
-      );
-    };
-
-    public getChunkFromArray = ({ array, size }: Chunk): Array<unknown> => {
-      if (!array.length) {
-        return [];
-      }
-      const head = array.slice(0, size);
-      const tail = array.slice(size);
-
-      return [head, ...this.getChunkFromArray({ array: tail, size })];
-    };
-
-    public getWeekArray = (date: dayjs.Dayjs): Array<Array<dayjs.Dayjs>> => {
-      const isMorning = equals(dayjs().tz(timezone).format('a'), 'am');
-      const startOfWeek = date.tz(timezone).startOf('month').startOf('week');
-      const endOfWeek = date.tz(timezone).endOf('month').endOf('week');
-      const start = startOfWeek.startOf('day');
-      const end = endOfWeek.endOf('day');
-      const customStart = isMorning
-        ? startOfWeek.startOf('day')
-        : startOfWeek.startOf('day');
-      const customEnd = isMorning
-        ? endOfWeek.startOf('day')
-        : endOfWeek.startOf('day');
-      const currentStart = start.isUTC()
-        ? start.tz(timezone, true)
-        : customStart;
-      const currentEnd = end.isUTC() ? end.tz(timezone, true) : customEnd;
-      const numberOfDaysInCurrentMonth = currentEnd.diff(
-        currentStart,
-        'd',
-        true
-      );
-      const daysOfMonthWithTimezone = [
-        ...Array(Math.round(numberOfDaysInCurrentMonth)).keys()
-      ].reduce(
-        (acc, _, currentIndex) => {
-          if (acc[currentIndex].isUTC()) {
-            const newCurrent = acc[currentIndex]
-              .utc()
-              .add(1, 'day')
-              .tz(timezone, true);
-
-            return [...acc, newCurrent];
-          }
-          const newCurrent = acc[currentIndex].add(1, 'day');
-
-          return [...acc, newCurrent];
-        },
-        [currentStart]
-      );
-      const weeksArray = this.getChunkFromArray({
-        array: daysOfMonthWithTimezone,
-        size: 7
-      });
-
-      return weeksArray as Array<Array<dayjs.Dayjs>>;
-    };
-
-    public mergeDateAndTime = (
-      date: dayjs.Dayjs,
-      time: dayjs.Dayjs
-    ): dayjs.Dayjs => {
-      const dateWithTimezone = date.tz(timezone).startOf('day');
-      const timeWithTimezone = time.tz(timezone);
-      const dateDSTState = getDSTState({
-        date: dateWithTimezone,
-        timezoneToUse: timezone
-      });
-      const dateDSTStateWithCurrentTimezone =
-        getDSTStateForCurrentTimezone(date);
-
-      if (equals(dateDSTStateWithCurrentTimezone, DSTState.WINTER)) {
-        return dateWithTimezone
-          .add(
-            timeWithTimezone.hour() -
-              getDestinationAndConfiguredTimezoneOffset({
-                endTimezone: 'UTC',
-                startTimezone: dayjs.tz.guess()
-              }),
-            'hour'
-          )
-          .add(timeWithTimezone.minute(), 'minute')
-          .add(timeWithTimezone.second(), 'second');
-      }
-
-      if (not(equals(dateDSTState, DSTState.SUMMER))) {
-        return dateWithTimezone
-          .add(timeWithTimezone.hour(), 'hour')
-          .add(timeWithTimezone.minute(), 'minute')
-          .add(timeWithTimezone.second(), 'second');
-      }
-
-      return dateWithTimezone
-        .hour(timeWithTimezone.hour())
-        .minute(timeWithTimezone.minute())
-        .second(timeWithTimezone.second());
-    };
-  }
-
-  return {
-    Adapter,
-    desktopPickerMediaQuery
-  };
-};

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

@@ -1,132 +0,0 @@
-import { Provider, createStore } from 'jotai';
-import { BrowserRouter } from 'react-router-dom';
-
-import { Button } from '@mui/material';
-
-import { useFullscreen } from './useFullscreen';
-import { router, useFullscreenListener } from './useFullscreenListener';
-
-const labelEnterFullscreen = 'Enter fullscreen';
-const labelExitFullscreen = 'Exit fullscreen';
-
-const ChildComponent = (): JSX.Element => {
-  const { toggleFullscreen, fullscreenEnabled, isFullscreenActivated } =
-    useFullscreen();
-
-  return (
-    <div
-      data-fullscreenActivated={isFullscreenActivated}
-      data-fullscreenEnabled={fullscreenEnabled}
-      id="test"
-    >
-      <Button onClick={() => toggleFullscreen(document.body)}>
-        {isFullscreenActivated ? labelExitFullscreen : labelEnterFullscreen}
-      </Button>
-      <input id="input" />
-      <textarea id="textarea" />
-    </div>
-  );
-};
-
-const TestComponent = (): JSX.Element => {
-  useFullscreenListener();
-
-  return <ChildComponent />;
-};
-
-const initialize = (): void => {
-  const store = createStore();
-
-  const queryParameters = new Map();
-
-  cy.stub(router, 'useSearchParams', () => queryParameters);
-
-  cy.mount({
-    Component: (
-      <BrowserRouter>
-        <Provider store={store}>
-          <TestComponent />
-        </Provider>
-      </BrowserRouter>
-    )
-  });
-};
-
-describe('Fullscreen', () => {
-  it('enters fullscreen mode when the button is clicked', () => {
-    initialize();
-
-    cy.get('#test')
-      .should('have.attr', 'data-fullscreenActivated', 'false')
-      .should('have.attr', 'data-fullscreenEnabled', 'true');
-
-    cy.contains(labelEnterFullscreen).realClick();
-
-    cy.get('#test')
-      .should('have.attr', 'data-fullscreenActivated', 'true')
-      .should('have.attr', 'data-fullscreenEnabled', 'true');
-
-    cy.contains(labelExitFullscreen).realClick();
-  });
-
-  it('exits fullscreen mode when the button is clicked', () => {
-    initialize();
-
-    cy.get('#test')
-      .should('have.attr', 'data-fullscreenActivated', 'false')
-      .should('have.attr', 'data-fullscreenEnabled', 'true');
-
-    cy.contains(labelEnterFullscreen).realClick();
-
-    cy.get('#test')
-      .should('have.attr', 'data-fullscreenActivated', 'true')
-      .should('have.attr', 'data-fullscreenEnabled', 'true');
-
-    cy.contains(labelExitFullscreen).realClick();
-
-    cy.get('#test')
-      .should('have.attr', 'data-fullscreenActivated', 'false')
-      .should('have.attr', 'data-fullscreenEnabled', 'true');
-  });
-
-  it('toggles fullscreen mode when the corresponding shortcut is clicked', () => {
-    initialize();
-
-    cy.get('#test')
-      .should('have.attr', 'data-fullscreenActivated', 'false')
-      .should('have.attr', 'data-fullscreenEnabled', 'true');
-
-    cy.get('#test').realPress(['F']);
-
-    cy.get('#test')
-      .should('have.attr', 'data-fullscreenActivated', 'true')
-      .should('have.attr', 'data-fullscreenEnabled', 'true');
-
-    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/atoms.ts

@@ -1,3 +0,0 @@
-import { atom } from 'jotai';
-
-export const isFullscreenActivatedAtom = atom(false);

package/src/utils/useFullscreen/index.ts

@@ -1,2 +0,0 @@
-export * from './useFullscreen';
-export * from './useFullscreenListener';

package/src/utils/useFullscreen/translatedLabels.ts

@@ -1 +0,0 @@
-export const labelCannotEnterInFullscreen = 'Cannot enter fullscreen mode';

package/src/utils/useFullscreen/useFullscreen.ts

@@ -1,73 +0,0 @@
-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) {
-      exitFullscreen();
-
-      return;
-    }
-
-    enterInFullscreen(element);
-  };
-
-  return {
-    enterInFullscreen,
-    exitFullscreen,
-    fullscreenEnabled: document.fullscreenEnabled,
-    isFullscreenActivated,
-    resetVariables,
-    toggleFullscreen
-  };
-};

package/src/utils/useFullscreen/useFullscreenListener.ts

@@ -1,59 +0,0 @@
-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;
-};