Merge branch 'main' into select-id

gravity-ui · May 24, 2024 · f2b0ae3 · f2b0ae3
2 parents 186ac34 + e35ce8b
commit f2b0ae3
Show file tree

Hide file tree

Showing 14 changed files with 225 additions and 128 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -30,6 +30,7 @@
         "jsx-a11y/no-autofocus": "off",
         "import/no-extraneous-dependencies": "off",
         "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
+        "@typescript-eslint/prefer-ts-expect-error": "error",
         "@typescript-eslint/consistent-type-imports": ["error", {"prefer":  "type-imports", "fixStyle": "separate-type-imports"}]
     },
     "overrides": [

diff --git a/CODEOWNERS b/CODEOWNERS
@@ -18,7 +18,7 @@
 /src/components/Hotkey @d3m1d0v
 /src/components/Icon @amje
 /src/components/Label @goshander
-/src/components/Link @LakeVostok
+/src/components/Link @Estasie
 /src/components/List @korvin89
 /src/components/Loader @SeqviriouM
 /src/components/Menu @NikitaCG

diff --git a/src/components/Disclosure/Disclosure.tsx b/src/components/Disclosure/Disclosure.tsx
@@ -42,7 +42,7 @@ export interface DisclosureProps extends QAProps {
 
 const isDisclosureSummaryComponent = isOfType(DisclosureSummary);
 
-// @ts-ignore this ts-error is appears when forwarding ref. It complains that DisclosureComposition props is not provided initially
+// @ts-expect-error this ts-error is appears when forwarding ref. It complains that DisclosureComposition props is not provided initially
 export const Disclosure: React.FunctionComponent<DisclosureProps> & DisclosureComposition =
     React.forwardRef<HTMLDivElement, DisclosureProps>(function Disclosure(props, ref) {
         const {

diff --git a/src/components/Pagination/__tests__/Pagination.test.tsx b/src/components/Pagination/__tests__/Pagination.test.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+
+import {noop} from 'lodash';
+
+import {render, screen} from '../../../../test-utils/utils';
+import {Pagination} from '../Pagination';
+import {PaginationQa, getPaginationPageQa} from '../constants';
+
+describe('Pagination component', () => {
+    test('Single page', () => {
+        render(<Pagination pageSize={20} total={20} onUpdate={noop} page={0} />);
+
+        const firstButton = screen.getByTestId(PaginationQa.PaginationButtonFirst);
+        expect(firstButton).toBeDisabled();
+
+        const prevButton = screen.getByTestId(PaginationQa.PaginationButtonPrevious);
+        expect(prevButton).toBeDisabled();
+
+        const nextButton = screen.getByTestId(PaginationQa.PaginationButtonNext);
+        expect(nextButton).toBeDisabled();
+    });
+
+    describe('Two pages', () => {
+        const PAGE_SIZE = 20;
+        const TOTAL = PAGE_SIZE + 1;
+
+        const FIRST_PAGE = 1;
+        const SECOND_PAGE = 2;
+
+        test('First page is current', () => {
+            render(
+                <Pagination pageSize={PAGE_SIZE} total={TOTAL} onUpdate={noop} page={FIRST_PAGE} />,
+            );
+
+            const firstPageButton = screen.getByTestId(getPaginationPageQa(FIRST_PAGE));
+            expect(firstPageButton).toHaveAttribute('aria-pressed', 'true');
+
+            const secondPageButton = screen.getByTestId(getPaginationPageQa(SECOND_PAGE));
+            expect(secondPageButton).toHaveAttribute('aria-pressed', 'false');
+
+            const firstButton = screen.getByTestId(PaginationQa.PaginationButtonFirst);
+            expect(firstButton).toBeDisabled();
+
+            const prevButton = screen.getByTestId(PaginationQa.PaginationButtonPrevious);
+            expect(prevButton).toBeDisabled();
+
+            const nextButton = screen.getByTestId(PaginationQa.PaginationButtonNext);
+            expect(nextButton).not.toBeDisabled();
+        });
+
+        test('Second page is current', () => {
+            render(
+                <Pagination
+                    pageSize={PAGE_SIZE}
+                    total={TOTAL}
+                    onUpdate={noop}
+                    page={SECOND_PAGE}
+                />,
+            );
+
+            const firstPageButton = screen.getByTestId(getPaginationPageQa(FIRST_PAGE));
+            expect(firstPageButton).toHaveAttribute('aria-pressed', 'false');
+
+            const secondPageButton = screen.getByTestId(getPaginationPageQa(SECOND_PAGE));
+            expect(secondPageButton).toHaveAttribute('aria-pressed', 'true');
+
+            const firstButton = screen.getByTestId(PaginationQa.PaginationButtonFirst);
+            expect(firstButton).not.toBeDisabled();
+
+            const prevButton = screen.getByTestId(PaginationQa.PaginationButtonPrevious);
+            expect(prevButton).not.toBeDisabled();
+
+            const nextButton = screen.getByTestId(PaginationQa.PaginationButtonNext);
+            expect(nextButton).toBeDisabled();
+        });
+    });
+
+    test('Total property undefined', () => {
+        render(<Pagination pageSize={20} onUpdate={noop} page={0} total={undefined} />);
+
+        const nextButton = screen.getByTestId(PaginationQa.PaginationButtonNext);
+
+        expect(nextButton).not.toBeDisabled();
+    });
+});
diff --git a/src/components/Pagination/components/PaginationPage/PaginationPage.tsx b/src/components/Pagination/components/PaginationPage/PaginationPage.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {Button} from '../../../Button';
 import {block} from '../../../utils/cn';
-import {PaginationQa} from '../../constants';
+import {getPaginationPageQa} from '../../constants';
 import type {PageItem, PaginationProps, PaginationSize} from '../../types';
 
 import './PaginationPage.scss';
@@ -18,7 +18,7 @@ type Props = {
 };
 
 export const PaginationPage = ({item, size, pageSize, className, onUpdate}: Props) => {
-    const qa = `${PaginationQa.PaginationPage}-${item.page}`;
+    const qa = getPaginationPageQa(item.page);
     if (item.simple) {
         return (
             <div data-qa={qa} className={b('simple', {size}, className)}>

diff --git a/src/components/Pagination/constants.ts b/src/components/Pagination/constants.ts
@@ -7,3 +7,7 @@ export const PaginationQa = {
     PaginationButtonPrevious: 'pagination-button-previous',
     PaginationButtonNext: 'pagination-button-next',
 };
+
+export const getPaginationPageQa = (pageNumber: number) => {
+    return `${PaginationQa.PaginationPage}-${pageNumber}`;
+};
diff --git a/src/components/Table/__tests__/Table.withTableSettings.test.tsx b/src/components/Table/__tests__/Table.withTableSettings.test.tsx
@@ -149,10 +149,8 @@ describe('withTableSettings', () => {
             );
             expect(osSettings).toBeDefined();
             expect(osxSettings).toBeDefined();
-            // @ts-ignore
-            expect(osSettings.isSelected).toBe(true);
-            // @ts-ignore
-            expect(osxSettings.isSelected).toBe(false);
+            expect(osSettings?.isSelected).toBe(true);
+            expect(osxSettings?.isSelected).toBe(false);
         });
 
         it('should return columns when no settings provided', () => {

diff --git a/src/components/Table/hoc/withTableActions/withTableActions.tsx b/src/components/Table/hoc/withTableActions/withTableActions.tsx
@@ -272,7 +272,7 @@ export function withTableActions<I extends TableDataItem, E extends {} = {}>(
 
                 return (item: I, index: number, event: React.MouseEvent<HTMLTableRowElement>) => {
                     if (
-                        // @ts-ignore
+                        // @ts-expect-error
                         event.nativeEvent.target.matches(
                             `.${actionsButtonCn}, .${actionsButtonCn} *`,
                         )

diff --git a/src/components/Table/hoc/withTableCopy/withTableCopy.tsx b/src/components/Table/hoc/withTableCopy/withTableCopy.tsx
@@ -104,7 +104,7 @@ export function withTableCopy<I extends TableDataItem, E extends {} = {}>(
                 return (item: I, index: number, event: React.MouseEvent<HTMLTableRowElement>) => {
                     const buttonClassName = b('copy-button');
                     if (
-                        // @ts-ignore
+                        // @ts-expect-error
                         event.nativeEvent.target.matches(
                             `.${buttonClassName}, .${buttonClassName} *`,
                         )

diff --git a/src/components/Table/hoc/withTableSelection/withTableSelection.tsx b/src/components/Table/hoc/withTableSelection/withTableSelection.tsx
@@ -120,7 +120,7 @@ export function withTableSelection<I extends TableDataItem, E extends {} = {}>(
             event: React.ChangeEvent<HTMLInputElement>,
         ) => {
             const {checked} = event.target;
-            // @ts-ignore shiftKey is defined for click events
+            // @ts-expect-error shiftKey is defined for click events
             const isShiftPressed = event.nativeEvent.shiftKey;
             const {data, selectedIds, onSelectionChange} = this.props;
 
@@ -191,7 +191,7 @@ export function withTableSelection<I extends TableDataItem, E extends {} = {}>(
                 return (item: I, index: number, event: React.MouseEvent<HTMLTableRowElement>) => {
                     const checkboxClassName = b('selection-checkbox');
                     if (
-                        // @ts-ignore
+                        // @ts-expect-error
                         event.nativeEvent.target.matches(
                             `.${checkboxClassName}, .${checkboxClassName} *`,
                         )

diff --git a/src/components/layout/Flex/Flex.tsx b/src/components/layout/Flex/Flex.tsx
@@ -128,7 +128,10 @@ type FlexPropsWithTypedAttrs<T extends React.ElementType> = FlexProps<T> &
  * ---
  * Storybook - https://preview.gravity-ui.com/uikit/?path=/docs/layout--playground#flex
  */
-export const Flex = function Flex<T extends React.ElementType = 'div'>(props: FlexProps<T>) {
+export const Flex = React.forwardRef(function Flex<T extends React.ElementType = 'div'>(
+    props: FlexProps<T>,
+    ref: FlexRef<T>,
+) {
     const {
         as: propsAs,
         direction,
@@ -187,6 +190,7 @@ export const Flex = function Flex<T extends React.ElementType = 'div'>(props: Fl
                 },
                 className,
             )}
+            ref={ref}
             style={{
                 flexDirection: applyMediaProps(direction),
                 flexGrow: grow === true ? 1 : grow,
@@ -213,6 +217,6 @@ export const Flex = function Flex<T extends React.ElementType = 'div'>(props: Fl
                 : children}
         </Box>
     );
-} as (<C extends React.ElementType = 'div'>(
+}) as (<C extends React.ElementType = 'div'>(
     props: FlexPropsWithTypedAttrs<C> & {ref?: FlexRef<C>},
 ) => React.ReactElement) & {displayName: string};
diff --git a/src/components/layout/demo/ColPresenter/ColPresenter.tsx b/src/components/layout/demo/ColPresenter/ColPresenter.tsx
@@ -4,7 +4,7 @@ import {Col} from '../../Col/Col';
 import type {ColProps} from '../../Col/Col';
 import {Box} from '../Box/Box';
 
-// @ts-ignore-error
+// @ts-expect-error
 const pickSizeProps = <T extends {}>({l, xl, s, m, xxl, xxxl, size}: T = {}): string => {
     // skip empty values
     return Object.entries({...{l, xl, s, m, xxl, xxxl, size}})