Merge pull request #51 from KasperskyLab/feature/hide-selected-info-f…

…or-non-selectable-tables

feat: hide selected info for non selectable tables

packages/kaspersky-components/design-system/theme/themes/light/table.ts

@@ -44,9 +44,13 @@ export const table = ({ colors }: ComponentThemeContext): TableColorConfig => ({
     },
     item: {
       backgroundColor: colors.bg.alternative2,
+      iconColor: colors.textIconsElements.primary,
       title: {
         color: colors.textIconsElements['secondary2-solid']
       }
     }
+  },
+  validation: {
+    outline: colors.criticalitystatuses.critical
   }
 })

packages/kaspersky-components/helpers/components/TextReducer.tsx

@@ -0,0 +1,45 @@
+import { Tooltip } from '@src/tooltip'
+import React, { ReactNode, useEffect, useRef, useState, VFC } from 'react'
+import styled from 'styled-components'
+
+const TooltipWrapper = styled.div`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: keep-all;
+`
+
+const StyledContainer = styled.div`
+  width: 100%
+`
+
+type TextReducerProps = { children?: ReactNode }
+
+export const TextReducer: VFC<TextReducerProps> = ({ children }: TextReducerProps) => {
+  const ref = useRef<HTMLDivElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [hasOverflow, setHasOverflow] = useState(false)
+
+  useEffect(() => {
+    if (!containerRef.current) return
+    const container = containerRef.current
+    const resizeObserver = new ResizeObserver(() => {
+      if (!ref.current) return
+      setHasOverflow(ref.current.offsetWidth < ref.current.scrollWidth)
+    })
+    resizeObserver.observe(container)
+    return () => resizeObserver.unobserve(container)
+  }, [containerRef.current])
+
+  return (
+    <StyledContainer ref={containerRef}>
+      {
+        hasOverflow
+          ? <Tooltip text={children}>
+              <TooltipWrapper ref={ref}>{children}</TooltipWrapper>
+            </Tooltip>
+          : <TooltipWrapper ref={ref}>{children}</TooltipWrapper>
+      }
+    </StyledContainer>
+  )
+}

packages/kaspersky-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaspersky/components",
-  "version": "6.40.3",
+  "version": "6.40.4",
   "description": "Kaspersky Design System UI Kit",
   "author": "AO Kaspersky Lab",
   "license": "Apache-2.0",

packages/kaspersky-components/setupTests.js

@@ -2,3 +2,26 @@ import { configure } from '@testing-library/react'
 import '@testing-library/jest-dom'
 
 configure({ testIdAttribute: 'kl-id' })
+
+beforeAll(() => {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(),
+      removeListener: jest.fn(),
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  });
+  window.ResizeObserver =
+    window.ResizeObserver ||
+    jest.fn().mockImplementation(() => ({
+      disconnect: jest.fn(),
+      observe: jest.fn(),
+      unobserve: jest.fn()
+    }))
+});

packages/kaspersky-components/src/pagination/Pagination.tsx

@@ -42,6 +42,7 @@ export const PaginationView: FC<PaginationViewProps> = ({
   pageSizeOptions = ['10', '20', '50', '100'],
   total = 0,
   selected = 0,
+  showSelected = true,
   onChange,
   onShowSizeChange: customOnShowSizeChange,
   showSizeChanger = false,
@@ -57,12 +58,14 @@ export const PaginationView: FC<PaginationViewProps> = ({
   }
 
   const { t } = useTranslation()
-  const totalText = useMemo(() => (
-    `${t('pagination.total', { count: total })}`
-  ), [t, total])
-  const selectedText = useMemo(() => (
-    `${t('pagination.selected', { count: selected })}`
-  ), [t, selected])
+
+  const getSummaryText = () => {
+    const totalText = `${t('pagination.total', { count: total })}`
+    if (!showSelected) return totalText
+
+    const selectedText = `${t('pagination.selected', { count: selected })}`
+    return `${totalText} / ${selectedText}`
+  }
 
   const parsedPageSizeOptions = useMemo(() => (
     getPageSizeOptions(t, pageSizeOptions)
@@ -90,10 +93,10 @@ export const PaginationView: FC<PaginationViewProps> = ({
       aria-disabled={disabled}
       {...testAttributes}
     >
-      <StyledTotal testId='total'>
-        {`${totalText} / ${selectedText}`}
-      </StyledTotal>
-      {!simple && (
+      {!simple && <StyledTotal testId='total'>
+        {getSummaryText()}
+      </StyledTotal>}
+      {(
         <div className='kl6-pagination-right'>
           <StyledPagination
             showQuickJumper={false}
@@ -102,7 +105,8 @@ export const PaginationView: FC<PaginationViewProps> = ({
             current={current}
             pageSize={pageSize}
             total={total}
-            disabled={disabled}
+            showLessItems={true}
+            disabled={disabled || (pageSize >= total)}
             onChange={onChange}
             cssConfig={cssConfig}
             {...icons}

packages/kaspersky-components/src/pagination/__tests__/Pagination.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { fireEvent, render } from '@testing-library/react'
+import {fireEvent, render, screen} from '@testing-library/react'
 import { act } from 'react-test-renderer'
 import { ConfigProvider } from '@design-system/context'
 import { ThemeKey } from '@design-system/types'
@@ -25,25 +25,9 @@ const DefaultPagination = (props: PaginationProps) => (
   </ConfigProvider>
 )
 
+const getSummaryRegex = (total: number) => new RegExp(`total ${total} / selected 0`, 'i')
+
 describe('Pagination', () => {
-  /**
-   * Antd Pagination uses window.watchMedia, we need to mock it
-   */
-  beforeAll(() => {
-    Object.defineProperty(window, 'matchMedia', {
-      writable: true,
-      value: jest.fn().mockImplementation(query => ({
-        matches: false,
-        media: query,
-        onchange: null,
-        addListener: jest.fn(),
-        removeListener: jest.fn(),
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
-        dispatchEvent: jest.fn()
-      }))
-    })
-  })
 
   test('should render', () => {
     const { container } = render(<DefaultPagination />)
@@ -151,4 +135,33 @@ describe('Pagination', () => {
 
     expect(onShowSizeChange).toHaveBeenCalledTimes(1)
   })
+
+  test('should render summary by default', () => {
+    const total = 10
+    render(<DefaultPagination total={total}/>)
+    expect(screen.getByText(getSummaryRegex(total))).toBeInTheDocument()
+  })
+
+  test('should not render summary if it is in simple mode', () => {
+    const total = 10
+    render(<DefaultPagination total={10} simple={true}/>)
+    expect(screen.queryByText(getSummaryRegex(total))).not.toBeInTheDocument()
+  })
+
+  describe('when rendered summary', () => {
+    const total = 100
+    const totalRegex = new RegExp(`total ${total}`, 'i')
+    const totalAndSelectedRegex = new RegExp(`total ${total} / selected 0`, 'i')
+
+    test('should show selected value by default', () => {
+      render(<DefaultPagination total={100}/>)
+      expect(screen.getByText(totalAndSelectedRegex)).toBeInTheDocument()
+    })
+
+    test('should not show selected value if selection is not possible', () => {
+      render(<DefaultPagination total={100} showSelected={false}/>)
+      expect(screen.getByText(totalRegex)).toBeInTheDocument()
+      expect(screen.queryByText(totalAndSelectedRegex)).not.toBeInTheDocument()
+    })
+  })
 })

packages/kaspersky-components/src/pagination/paginationCss.ts

@@ -28,7 +28,7 @@ export const paginationCss = css`
 
       a {
         padding: 0;
-        color: inherit;
+        color: ${fromProps('unselected.normal.color')};
       }
 
       &:hover {
@@ -48,16 +48,26 @@ export const paginationCss = css`
       }
       
       &.ant-pagination-item-active {
-        color: ${fromProps('selected.normal.color')};
         background: ${fromProps('selected.normal.background')};
+
+        &, a {
+          color: ${fromProps('selected.normal.color')};
+        }
         
         &:hover {
-          color: ${fromProps('selected.hover.color')};
           background: ${fromProps('selected.hover.background')};
+
+          &, a {
+            color: ${fromProps('selected.hover.color')};
+          }
         }
+        
         &:active {
-          color: ${fromProps('selected.active.color')};
           background: ${fromProps('selected.active.background')};
+
+          &, a {
+            color: ${fromProps('selected.active.color')};
+          }
         }
       }
     }

packages/kaspersky-components/src/pagination/types.ts

@@ -31,10 +31,14 @@ export type PaginationProps = {
   pageSizeOptions?: string[],
   /** Determine whether to show pageSize select, it will be true when total > 50 */
   showSizeChanger?: boolean,
+  /** Show less pagination items: 3 or 5 */
+  showLessItems?: boolean,
   /** Total number of data items */
   total?: number,
   /** Number of selected data items */
   selected?: number,
+  /** Show number of selected data items */
+  showSelected?: boolean,
   /** Called when the page number or pageSize is changed, and it takes the resulting page number and pageSize as its arguments */
   onChange?: (page: number, pageSize: number) => void,
   /** Called when pageSize is changed */

packages/kaspersky-components/src/table/Table.stories.tsx

@@ -46,3 +46,4 @@ export { ColumnsWidthPercent } from './stories/ColumnsWidthPercent'
 export { RowAccordion } from './stories/RowAccordion'
 export { Reductions } from './stories/Reductions'
 export { WithFilters } from './stories/WithFilters'
+export { KesTable } from './stories/KesTable'

packages/kaspersky-components/src/table/Table.tsx

@@ -59,6 +59,7 @@ export const Table: FC<ITableProps> = props => {
     rowSelection: _rowSelection,
     klId,
     testId,
+    isValid,
     ...tableProps
   } = props
 
@@ -98,6 +99,7 @@ export const Table: FC<ITableProps> = props => {
         locale={{ emptyText }}
         showSorterTooltip={showSorterTooltip}
         size='small'
+        isValid={isValid}
       />
       {rowDraggingContainer}
     </>