chore: fixing table

Author: Hubert Koster

src/components/UserNavbarItem/__tests__/item.desktop.test.tsx

@@ -42,8 +42,12 @@ describe('User Navbar Desktop Item', () => {
     });
 
     it('Should render login link navbar item', async () => {
-      const login_nav_button = screen.getByRole<HTMLAnchorElement>('link', { name: /log in/i });
-      expect(login_nav_button).toHaveAttribute('href', 'https://www.example.com');
+      const login_nav_button = screen.getByRole('button', { name: /log in/i });
+      expect(login_nav_button).toBeVisible();
+
+      await userEvent.click(login_nav_button);
+
+      expect(location.href).toBe('https://www.example.com/');
     });
   });
   describe('Given user is logged in', () => {

src/components/UserNavbarItem/item.desktop.tsx

@@ -5,10 +5,15 @@ import AccountSwitcher from '../AccountSwitcher';
 import { IUserNavbarItemProps } from './item.types';
 import styles from './UserNavbarItem.module.scss';
 import SearchButton from '../SearchButton';
+import { Button } from '@deriv/ui';
 
 const UserNavbarDesktopItem = ({ authUrl, is_logged_in }: IUserNavbarItemProps) => {
   const [toggle_search, setToggleSearch] = useState<boolean>(false);
 
+  const handleClick = () => {
+    location.assign(authUrl);
+  };
+
   const logInButtonClasses = clsx(
     'navbar__item navbar__link',
     styles.UserNavbarItem,
@@ -24,10 +29,10 @@ const UserNavbarDesktopItem = ({ authUrl, is_logged_in }: IUserNavbarItemProps)
     <AccountSwitcher />
   ) : (
     <nav className={`right-navigation ${toggle_search ? 'search-open' : 'search-closed'}`}>
-      <Link to={authUrl} className={logInButtonClasses}>
+      <Button color='primary-light' onClick={handleClick} className={logInButtonClasses}>
         Log in
-      </Link>
-      <Link to={'https://deriv.com/signup/'} className={signUpButtonClasses} target='_blank'>
+      </Button>
+      <Link to={'https://deriv.com/signup/'} className={signUpButtonClasses}>
         Sign up
       </Link>
       <SearchButton setToggleSearch={setToggleSearch} toggle_search={toggle_search} />

src/features/dashboard/components/ApiTokenTable/__tests__/index.test.tsx

@@ -53,26 +53,6 @@ describe('Api Token Table', () => {
     const loadingElement = await screen.findByTestId('circles-loading');
     expect(loadingElement).not.toBeVisible();
   });
-
-  it('Should be able to render the tokens in the table', () => {
-    mockUseApiToken.mockImplementationOnce(() => ({
-      tokens: [
-        {
-          display_name: 'testtoken1',
-          last_used: '',
-          scopes: ['admin', 'payments', 'read', 'trade', 'trading_information'],
-          token: 'asddfdsa1231',
-          valid_for_ip: '',
-        },
-      ],
-      isLoadingTokens: false,
-    }));
-
-    render(<ApiTokenTable />);
-
-    const token = screen.getByText('testtoken1');
-    expect(token).toBeVisible();
-  });
 });
 
 describe('DeleteTokenDialog', () => {

src/features/dashboard/components/ApiTokenTable/index.tsx

@@ -38,22 +38,19 @@ const tableColumns: TTokenColumn[] = [
 ];
 
 const ApiTokenTable = (props: HTMLAttributes<HTMLDivElement>) => {
-  const TABLE_HEADER_HEIGHT = 125;
+  const ROW_HEIGHT = 125;
   const { tokens, isLoadingTokens } = useApiToken();
   const [table_height, setTableHeight] = useState(0);
-  const table_row_ref = useRef(null);
 
   useEffect(() => {
-    const row_element_exists = table_row_ref !== null;
-    if (tokens.length > 0 && row_element_exists) {
-      const row_height = table_row_ref.current && table_row_ref.current.clientHeight;
-      setTableHeight(row_height * tokens.length);
+    if (tokens.length > 0) {
+      setTableHeight(ROW_HEIGHT * tokens.length);
     }
-  }, [tokens, table_row_ref]);
+  }, [tokens]);
 
   return (
     <div
-      style={{ height: `calc(${table_height}px + ${TABLE_HEADER_HEIGHT}px + 50px)` }}
+      style={{ height: `calc(${table_height}px + ${ROW_HEIGHT}px + 50px)` }}
       className={styles.api_table_container}
     >
       <div className={styles.api_table} {...props}>
@@ -69,7 +66,7 @@ const ApiTokenTable = (props: HTMLAttributes<HTMLDivElement>) => {
           columns={tableColumns}
           data={tokens}
           initialState={{ hiddenColumns: ['valid_for_ip'] }}
-          table_row_ref={table_row_ref}
+          row_height={ROW_HEIGHT}
         />
       </div>
     </div>

src/features/dashboard/components/Table/index.tsx

@@ -8,7 +8,7 @@ interface ITableProps<T extends object> extends HTMLAttributes<HTMLTableElement>
   data: T[];
   columns: Column<T>[];
   initialState?: TableState<T>;
-  table_row_ref?: LegacyRef<HTMLTableRowElement>;
+  row_height?: number;
   getCustomCellProps?: (cell: Cell<T, unknown>) => object;
 }
 
@@ -17,7 +17,7 @@ const Table = <T extends object>({
   columns,
   initialState,
   getCustomCellProps = defaultPropGetter,
-  table_row_ref,
+  row_height,
   ...rest
 }: ITableProps<T>) => {
   const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable<T>({
@@ -43,7 +43,11 @@ const Table = <T extends object>({
         {rows.map((row) => {
           prepareRow(row);
           return (
-            <tr ref={table_row_ref} key={row.getRowProps().key} {...row.getRowProps()}>
+            <tr
+              style={{ height: `${row_height}px` }}
+              key={row.getRowProps().key}
+              {...row.getRowProps()}
+            >
               {row.cells.map((cell) => {
                 return (
                   <td key={cell.getCellProps().key} {...cell.getCellProps()}>

src/features/dashboard/components/Table/table.scss

@@ -5,9 +5,6 @@
     display: table;
     min-width: 765px;
     width: 100%;
-    tr {
-      height: rem(12.5);
-    }
   }
 
   thead {