Merge pull request #197 from hubert-deriv/HOTFIX_table_scroll

Author: hubert-deriv

src/components/UserNavbarItem/UserNavbarItem.module.scss

@@ -10,7 +10,7 @@
     border: 2px solid var(--colors-coral500);
     border-radius: rem(1.6);
     padding: rem(1) rem(1.6);
-    height: rem(4);
+    height: rem(1.5);
   }
 }
 

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

@@ -9,6 +9,10 @@ import SearchButton from '../SearchButton';
 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 +28,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 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/api-table.module.scss

@@ -2,11 +2,9 @@
 
 .api_table_container {
   position: relative;
-  .api_table {
-    height: rem(30);
-    min-height: 10rem;
-    table {
-      position: absolute;
-    }
+  overflow-y: hidden;
+  overflow-x: auto;
+  .api_table table {
+    position: absolute;
   }
 }

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

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react';
+import React, { HTMLAttributes, useEffect, useState } from 'react';
 import { Circles } from 'react-loader-spinner';
 import styles from './api-table.module.scss';
 import useApiToken from '@site/src/hooks/useApiToken';
@@ -38,10 +38,21 @@ const tableColumns: TTokenColumn[] = [
 ];
 
 const ApiTokenTable = (props: HTMLAttributes<HTMLDivElement>) => {
+  const ROW_HEIGHT = 125;
   const { tokens, isLoadingTokens } = useApiToken();
+  const [table_height, setTableHeight] = useState(0);
+
+  useEffect(() => {
+    if (tokens.length > 0) {
+      setTableHeight(ROW_HEIGHT * tokens.length);
+    }
+  }, [tokens]);
 
   return (
-    <div className={styles.api_table_container}>
+    <div
+      style={{ height: `calc(${table_height}px + ${ROW_HEIGHT}px + 50px)` }}
+      className={styles.api_table_container}
+    >
       <div className={styles.api_table} {...props}>
         <Circles
           height='100'
@@ -55,6 +66,7 @@ const ApiTokenTable = (props: HTMLAttributes<HTMLDivElement>) => {
           columns={tableColumns}
           data={tokens}
           initialState={{ hiddenColumns: ['valid_for_ip'] }}
+          row_height={ROW_HEIGHT}
         />
       </div>
     </div>

src/features/dashboard/components/NoApps/no-apps.module.scss

@@ -10,7 +10,7 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  justify-content: var(center);
+  justify-content: center;
   align-items: center;
   width: calc(rem(32) - rem(3.2));
   position: relative;
@@ -28,13 +28,13 @@
   height: rem(10);
 }
 
-.noAppsText {
+.noAppsText p {
   text-align: center;
+  margin-bottom: rem(2);
 }
 
 [data-state*="responsive.desktop"] {
   .noAppsWrapper {
-    width: calc(100% - rem(12.5));
     position: relative;
   }
   .noApps {

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

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react';
+import React, { HTMLAttributes, LegacyRef, ReactNode } from 'react';
 import { Cell, Column, TableState, useTable } from 'react-table';
 import './table.scss';
 
@@ -8,6 +8,7 @@ interface ITableProps<T extends object> extends HTMLAttributes<HTMLTableElement>
   data: T[];
   columns: Column<T>[];
   initialState?: TableState<T>;
+  row_height?: number;
   getCustomCellProps?: (cell: Cell<T, unknown>) => object;
 }
 
@@ -16,6 +17,7 @@ const Table = <T extends object>({
   columns,
   initialState,
   getCustomCellProps = defaultPropGetter,
+  row_height,
   ...rest
 }: ITableProps<T>) => {
   const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable<T>({
@@ -41,7 +43,11 @@ const Table = <T extends object>({
         {rows.map((row) => {
           prepareRow(row);
           return (
-            <tr 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/Tabs/tabs.module.scss

@@ -51,4 +51,5 @@
   justify-content: space-around;
   align-items: center;
   padding: rem(2);
+  overflow-y: auto;
 }