@centreon/ui 24.5.1 → 24.5.2

package/src/components/Zoom/Zoom.tsx

@@ -7,7 +7,6 @@ import { MinimapPosition } from './models';
 
 export interface ZoomProps {
   children: JSX.Element | (({ width, height }) => JSX.Element);
-  id?: number | string;
   minimapPosition?: MinimapPosition;
   scaleMax?: number;
   scaleMin?: number;
@@ -28,8 +27,7 @@ const Zoom = ({
   scaleMin = 0.5,
   scaleMax = 4,
   showMinimap = false,
-  minimapPosition = 'top-left',
-  id = 0
+  minimapPosition = 'top-left'
 }: ZoomProps): JSX.Element => {
   return (
     <ParentSize>
@@ -46,7 +44,6 @@ const Zoom = ({
           {(zoom) => (
             <ZoomContent
               height={height}
-              id={id}
               minimapPosition={minimapPosition}
               showMinimap={showMinimap}
               width={width}

package/src/components/Zoom/ZoomContent.tsx

@@ -18,7 +18,6 @@ import { ChildrenProps, MinimapPosition, ZoomState } from './models';
 export interface Props {
   children: ({ width, height, transformMatrix }: ChildrenProps) => JSX.Element;
   height: number;
-  id?: number | string;
   minimapPosition: MinimapPosition;
   showMinimap?: boolean;
   width: number;
@@ -31,8 +30,7 @@ const ZoomContent = ({
   height,
   children,
   showMinimap,
-  minimapPosition,
-  id
+  minimapPosition
 }: Props): JSX.Element => {
   const { classes } = useZoomStyles();
   const contentRef = useRef<SVGGElement | null>(null);
@@ -94,7 +92,7 @@ const ZoomContent = ({
       >
         <RectClipPath
           height={Math.max(contentClientRect?.height || 0, height)}
-          id={`zoom-clip-${id}`}
+          id="zoom-clip"
           rx={radius}
           width={Math.max(contentClientRect?.width || 0, width)}
         />
@@ -126,7 +124,6 @@ const ZoomContent = ({
                 diffBetweenContentAndSvg || { left: 0, top: 0 }
               }
               height={height}
-              id={id}
               isDraggingFromContainer={isDragging}
               width={width}
               zoom={zoom}

package/src/components/index.ts

@@ -12,4 +12,3 @@ export * from './Avatar';
 export * from './CollapsibleItem';
 export * from './Inputs';
 export { default as Zoom } from './Zoom/Zoom';
-export * from './Tabs';

package/src/index.ts

@@ -131,7 +131,7 @@ export {
   default as useGraphQuery,
   resourceTypeQueryParameter
 } from './api/useGraphQuery';
-export { default as QueryProvider, client } from './api/QueryProvider';
+export { default as QueryProvider } from './api/QueryProvider';
 export {
   default as FileDropZone,
   transformFileListToArray

package/src/utils/index.ts

@@ -22,4 +22,3 @@ export * from './centreonBaseURL';
 export * from './usePluralizedTranslation';
 export * from './useResizeObserver';
 export * from './useFullscreen';
-export * from './resourcesStatusURL';

package/src/utils/usePluralizedTranslation.ts

@@ -1,11 +1,5 @@
-import { useCallback } from 'react';
-
 import { useTranslation } from 'react-i18next';
 import pluralize from 'pluralize';
-import { useAtomValue } from 'jotai';
-import { equals, includes } from 'ramda';
-
-import { userAtom } from '@centreon/ui-context';
 
 interface TProps {
   count: number;
@@ -16,21 +10,10 @@ export const usePluralizedTranslation = (): {
   pluralizedT: (props: TProps) => string;
 } => {
   const translation = useTranslation();
-  const { locale } = useAtomValue(userAtom);
-
-  const isNotPartitiveLocale = includes('fr', locale);
 
-  const pluralizedT = useCallback(
-    ({ label, count }: TProps): string => {
-      const isZero = equals(count, 0);
-
-      return pluralize(
-        translation.t(label),
-        isZero && isNotPartitiveLocale ? 1 : count
-      );
-    },
-    [isNotPartitiveLocale]
-  );
+  const pluralizedT = ({ label, count }: TProps): string => {
+    return pluralize(translation.t(label), count);
+  };
 
   return {
     pluralizedT

package/src/api/logger.ts

@@ -1,11 +0,0 @@
-export const errorLog = (text: string): void => {
-  const { error: log } = console;
-
-  log(`API Request: ${text}`);
-};
-
-export const warnLog = (text: string): void => {
-  const { warn: log } = console;
-
-  log(`API Request: ${text}`);
-};

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

@@ -1,30 +0,0 @@
-import { useEffect } from 'react';
-
-import { useAtomValue } from 'jotai';
-
-import { useDeepCompare } from '../../../utils';
-
-import { valuesAtom } from './atoms';
-import { formatValueForSubmition } from './utils';
-import { AccessRightInitialValues } from './models';
-
-export const useAccessRightsChange = (
-  onChange?: (values: Array<AccessRightInitialValues>) => void
-): void => {
-  const values = useAtomValue(valuesAtom);
-
-  useEffect(
-    () => {
-      if (!onChange) {
-        return;
-      }
-
-      onChange(
-        values
-          .filter(({ isRemoved }) => !isRemoved)
-          .map(formatValueForSubmition)
-      );
-    },
-    useDeepCompare([values])
-  );
-};

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

@@ -1,18 +0,0 @@
-import { omit } from 'ramda';
-
-import { AccessRight, AccessRightInitialValues } from './models';
-
-export const formatValue = (
-  accessRight: AccessRight
-): AccessRightInitialValues => {
-  return omit(['isAdded', 'isUpdated', 'isRemoved'], accessRight);
-};
-
-export const formatValueForSubmition = (
-  accessRight: AccessRight
-): AccessRightInitialValues => {
-  return {
-    ...formatValue(accessRight),
-    id: Number((accessRight.id as string).split('_')[1])
-  };
-};

package/src/components/Tabs/Tab.styles.ts

@@ -1,25 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useTabsStyles = makeStyles()((theme) => ({
-  indicator: {
-    bottom: 'unset'
-  },
-  tab: {
-    '&[aria-selected="true"]': {
-      color: theme.palette.text.primary,
-      fontWeight: theme.typography.fontWeightBold
-    },
-    color: theme.palette.text.primary,
-    fontWeight: theme.typography.fontWeightRegular,
-    marginRight: theme.spacing(2),
-    minHeight: 0,
-    minWidth: 0,
-    padding: theme.spacing(0.5, 0)
-  },
-  tabPanel: {
-    padding: theme.spacing(1, 0, 0)
-  },
-  tabs: {
-    minHeight: theme.spacing(4.5)
-  }
-}));

package/src/components/Tabs/TabPanel.tsx

@@ -1,22 +0,0 @@
-import { TabPanel as MuiTabPanel } from '@mui/lab';
-
-import { useTabsStyles } from './Tab.styles';
-
-type Props = {
-  children: JSX.Element;
-  value: string;
-};
-
-export const TabPanel = ({ children, value }: Props): JSX.Element => {
-  const { classes } = useTabsStyles();
-
-  return (
-    <MuiTabPanel
-      className={classes.tabPanel}
-      data-tabPanel={value}
-      value={value}
-    >
-      {children}
-    </MuiTabPanel>
-  );
-};

package/src/components/Tabs/Tabs.cypress.spec.tsx

@@ -1,70 +0,0 @@
-import { Typography } from '@mui/material';
-
-import { TabPanel } from './TabPanel';
-
-import { Tabs } from '.';
-
-const initialize = (withTabListProps = false): void => {
-  cy.mount({
-    Component: (
-      <Tabs
-        defaultTab="tab 0"
-        tabList={
-          withTabListProps
-            ? {
-                variant: 'fullWidth'
-              }
-            : undefined
-        }
-        tabs={[
-          { label: 'Tab 0', value: 'tab 0' },
-          { label: 'Tab 1', value: 'tab 1' }
-        ]}
-      >
-        <TabPanel value="tab 0">
-          <Typography>Tab 0</Typography>
-        </TabPanel>
-        <TabPanel value="tab 1">
-          <Typography>Tab 1</Typography>
-        </TabPanel>
-      </Tabs>
-    )
-  });
-};
-
-describe('Tabs', () => {
-  it('displays tabs and their content when a tab is selected', () => {
-    initialize();
-
-    cy.get('[data-TabPanel="tab 0"]').should('not.have.attr', 'hidden');
-    cy.get('[data-TabPanel="tab 1"]').should('have.attr', 'hidden');
-    cy.findByLabelText('Tab 0')
-      .should('have.attr', 'aria-selected')
-      .and('equals', 'true');
-    cy.findByLabelText('Tab 1')
-      .should('have.attr', 'aria-selected')
-      .and('equals', 'false');
-
-    cy.contains('Tab 1').click();
-
-    cy.get('[data-TabPanel="tab 0"]').should('have.attr', 'hidden');
-    cy.get('[data-TabPanel="tab 1"]').should('not.have.attr', 'hidden');
-    cy.findByLabelText('Tab 0')
-      .should('have.attr', 'aria-selected')
-      .and('equals', 'false');
-    cy.findByLabelText('Tab 1')
-      .should('have.attr', 'aria-selected')
-      .and('equals', 'true');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays tabs when tabList props are set', () => {
-    initialize(true);
-
-    cy.get('[data-TabPanel="tab 0"]').should('not.have.attr', 'hidden');
-    cy.get('[data-TabPanel="tab 1"]').should('have.attr', 'hidden');
-
-    cy.makeSnapshot();
-  });
-});

package/src/components/Tabs/Tabs.stories.tsx

@@ -1,55 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { Typography } from '@mui/material';
-
-import { TabPanel } from './TabPanel';
-
-import { Tabs } from '.';
-
-const meta: Meta<typeof Tabs> = {
-  component: Tabs
-};
-
-export default meta;
-type Story = StoryObj<typeof Tabs>;
-
-const generateTabs = (size: number): Array<{ label: string; value: string }> =>
-  Array(size)
-    .fill(0)
-    .map((_, index) => ({ label: `Tab ${index}`, value: `tab ${index}` }));
-
-export const Default: Story = {
-  args: {
-    defaultTab: 'tab 0',
-    tabs: generateTabs(2)
-  },
-  render: (args) => (
-    <Tabs {...args}>
-      {generateTabs(2).map(({ value, label }) => (
-        <TabPanel key={value} value={value}>
-          <Typography>{label}</Typography>
-        </TabPanel>
-      ))}
-    </Tabs>
-  )
-};
-
-export const WithTabListProps: Story = {
-  args: {
-    defaultTab: 'tab 0',
-    tabList: {
-      textColor: 'inherit',
-      variant: 'fullWidth'
-    },
-    tabs: generateTabs(2)
-  },
-  render: (args) => (
-    <Tabs {...args}>
-      {generateTabs(2).map(({ value, label }) => (
-        <TabPanel key={value} value={value}>
-          <Typography>{label}</Typography>
-        </TabPanel>
-      ))}
-    </Tabs>
-  )
-};

package/src/components/Tabs/Tabs.tsx

@@ -1,55 +0,0 @@
-import { useCallback, useState } from 'react';
-
-import { TabContext, TabList, TabListProps } from '@mui/lab';
-import { Tab } from '@mui/material';
-
-import { useTabsStyles } from './Tab.styles';
-
-type Props = {
-  children: Array<JSX.Element>;
-  defaultTab: string;
-  tabList?: TabListProps;
-  tabs: Array<{
-    label: string;
-    value: string;
-  }>;
-};
-
-export const Tabs = ({
-  children,
-  defaultTab,
-  tabs,
-  tabList
-}: Props): JSX.Element => {
-  const { classes } = useTabsStyles();
-
-  const [selectedTab, setSelectedTab] = useState(defaultTab);
-
-  const changeTab = useCallback((_, newValue: string): void => {
-    setSelectedTab(newValue);
-  }, []);
-
-  return (
-    <TabContext value={selectedTab}>
-      <TabList
-        classes={{
-          indicator: classes.indicator,
-          root: classes.tabs
-        }}
-        onChange={changeTab}
-        {...tabList}
-      >
-        {tabs.map(({ value, label }) => (
-          <Tab
-            aria-label={label}
-            className={classes.tab}
-            key={value}
-            label={label}
-            value={value}
-          />
-        ))}
-      </TabList>
-      {children}
-    </TabContext>
-  );
-};

package/src/components/Tabs/index.ts

@@ -1,6 +0,0 @@
-import { TabPanel } from './TabPanel';
-import { Tabs as TabsRoot } from './Tabs';
-
-export const Tabs = Object.assign(TabsRoot, {
-  TabPanel
-});

package/src/utils/resourcesStatusURL.ts

@@ -1,166 +0,0 @@
-import {
-  always,
-  cond,
-  equals,
-  flatten,
-  groupBy,
-  identity,
-  includes,
-  map,
-  pipe,
-  T
-} from 'ramda';
-
-import { SelectEntry } from '..';
-
-import { centreonBaseURL } from './centreonBaseURL';
-
-export interface Resource {
-  resourceType: string;
-  resources: Array<SelectEntry>;
-}
-
-interface GetResourcesUrlProps {
-  allResources: Array<Resource>;
-  isForOneResource: boolean;
-  resource?;
-  states: Array<string>;
-  statuses: Array<string>;
-  type: string;
-}
-
-export const getDetailsPanelQueriers = ({ resource, type }): object => {
-  const { id, parentId, uuid } = resource;
-
-  const resourcesDetailsEndpoint = cond([
-    [
-      equals('host'),
-      always(`${centreonBaseURL}/api/latest/monitoring/resources/hosts/${id}`)
-    ],
-    [
-      equals('service'),
-      always(
-        `${centreonBaseURL}/api/latest/monitoring/resources/hosts/${parentId}/services/${id}`
-      )
-    ],
-    [
-      equals('metaservice'),
-      always(
-        `${centreonBaseURL}/api/latest/monitoring/resources/metaservices/${id}`
-      )
-    ],
-    [
-      equals('anomaly-detection'),
-      always(
-        `${centreonBaseURL}/api/latest/monitoring/resources/anomaly-detection/${id}`
-      )
-    ]
-  ])(type);
-
-  const queryParameters = {
-    id,
-    resourcesDetailsEndpoint,
-    selectedTimePeriodId: 'last_24_h',
-    tab: 'details',
-    tabParameters: {},
-    uuid
-  };
-
-  return queryParameters;
-};
-
-export const getResourcesUrl = ({
-  type,
-  statuses,
-  states,
-  allResources,
-  isForOneResource,
-  resource
-}: GetResourcesUrlProps): string => {
-  const resourcesCriterias = equals(type, 'all')
-    ? {
-        name: 'resource_types',
-        value: [
-          { id: 'service', name: 'Service' },
-          { id: 'host', name: 'Host' }
-        ]
-      }
-    : {
-        name: 'resource_types',
-        value: [
-          { id: type, name: `${type.charAt(0).toUpperCase()}${type.slice(1)}` }
-        ]
-      };
-
-  const formattedStatuses = pipe(
-    flatten,
-    map((status: string) => {
-      return {
-        id: status.toLocaleUpperCase(),
-        name: `${status.charAt(0).toUpperCase()}${status.slice(1)}`
-      };
-    })
-  )(statuses);
-
-  const formattedStates = states.map((state) => {
-    return {
-      id: state,
-      name: `${state.charAt(0).toUpperCase()}${state.slice(1)}`
-    };
-  });
-
-  const groupedResources = groupBy(
-    ({ resourceType }) => resourceType,
-    allResources
-  );
-
-  const resourcesFilters = Object.entries(groupedResources).map(
-    ([resourceType, res]) => {
-      const name = cond<Array<string>, string>([
-        [equals('host'), always('parent_name')],
-        [equals('service'), always('name')],
-        [T, identity]
-      ])(resourceType);
-
-      return {
-        name: name.replace('-', '_'),
-        value: flatten(
-          (res || []).map(({ resources: subResources }) => {
-            return subResources.map(({ name: resourceName }) => ({
-              id: includes(name, ['name', 'parent_name'])
-                ? `\\b${resourceName}\\b`
-                : resourceName,
-              name: resourceName
-            }));
-          })
-        )
-      };
-    }
-  );
-
-  const filterQueryParameter = {
-    criterias: [
-      resourcesCriterias,
-      { name: 'statuses', value: formattedStatuses },
-      { name: 'states', value: formattedStates },
-      ...resourcesFilters,
-      { name: 'search', value: '' }
-    ]
-  };
-
-  const encodedFilterParams = encodeURIComponent(
-    JSON.stringify(filterQueryParameter)
-  );
-
-  if (!isForOneResource) {
-    return `/monitoring/resources?filter=${encodedFilterParams}&fromTopCounter=true`;
-  }
-
-  const detailsPanelQueriers = getDetailsPanelQueriers({ resource, type });
-
-  const encodedDetailsParams = encodeURIComponent(
-    JSON.stringify(detailsPanelQueriers)
-  );
-
-  return `/monitoring/resources?details=${encodedDetailsParams}&filter=${encodedFilterParams}&fromTopCounter=true`;
-};