Merge branch 'master' into utkarsha/display-popup-upon-token-creation

Author: utkarsha-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/Apiexplorer/SubscribeRenderer/__tests__/SubscribeRenderer.test.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
-import { cleanup, render, screen } from '@testing-library/react';
+import { cleanup, render, screen, waitFor } from '@testing-library/react';
 import SubscribeRenderer from '..';
 import useAuthContext from '@site/src/hooks/useAuthContext';
 import useSubscription from '@site/src/hooks/useSubscription';
 import useDynamicImportJSON from '@site/src/hooks/useDynamicImportJSON';
 import { IAuthContext } from '@site/src/contexts/auth/auth.context';
+import LoginDialog from '../../LoginDialog';
 
 jest.mock('@site/src/hooks/useAuthContext');
 
@@ -78,39 +79,82 @@ describe('SubscribeRenderer', () => {
     expect(button).toBeVisible();
   });
 
+  it('should throw an error if incorrect json is being parsed', async () => {
+    const consoleOutput = [];
+    const mockedError = (output) => consoleOutput.push(output);
+    console.error = mockedError;
+
+    render(<SubscribeRenderer name='ticks' auth={1} reqData={'asdawefaewf3232'} />);
+    const button = await screen.findByRole('button', { name: /Send Request/i });
+    await userEvent.click(button);
+
+    expect(consoleOutput[0]).toEqual(
+      'Could not parse the JSON data while trying to send the request: ',
+    );
+  });
+
   it('should call subscribe and unsubscribe when pressing the send request button', async () => {
+    jest.spyOn(React, 'useRef').mockReturnValue({
+      current: {
+        unsubscribe: mockUnsubscribe,
+      },
+    });
     render(<SubscribeRenderer name='ticks' auth={1} reqData={request_data} />);
     const button = await screen.findByRole('button', { name: /Send Request/i });
     expect(button).toBeVisible();
 
     await userEvent.click(button);
-
     expect(mockUnsubscribe).toBeCalledTimes(1);
     expect(mockSubscribe).toBeCalledTimes(1);
     expect(mockSubscribe).toBeCalledWith({ ticks: 'R_50', subscribe: 1 });
   });
 
   it('should call unsubscribe when pressing the clear button', async () => {
+    jest.spyOn(React, 'useRef').mockReturnValue({
+      current: {
+        unsubscribe: mockUnsubscribe,
+      },
+    });
     render(<SubscribeRenderer name='ticks' auth={1} reqData={request_data} />);
     const button = await screen.findByRole('button', { name: 'Clear' });
     expect(button).toBeVisible();
 
     await userEvent.click(button);
-
     expect(mockUnsubscribe).toBeCalledTimes(1);
   });
 
-  it('should throw an error if incorrect json is being parsed', async () => {
-    const consoleOutput = [];
-    const mockedError = (output) => consoleOutput.push(output);
-    console.error = mockedError;
+  it('should call unsubscribe when unmounting the component', async () => {
+    jest.spyOn(React, 'useRef').mockReturnValue({
+      current: {
+        unsubscribe: mockUnsubscribe,
+      },
+    });
+    const { unmount } = render(<SubscribeRenderer name='ticks' auth={1} reqData={request_data} />);
+    unmount();
+    expect(mockUnsubscribe).toBeCalledTimes(1);
+  });
+  it('should call login dialog when the error code is not authourized', async () => {
+    const setToggleModal = jest.fn();
+    jest.spyOn(React, 'useState').mockReturnValue([false, setToggleModal]);
+    mockUseAuthContext.mockImplementation(() => ({
+      is_logged_in: false,
+      is_authorized: false,
+    }));
+    mockUseSubscription.mockImplementation(() => ({
+      subscribe: mockSubscribe,
+      unsubscribe: mockUnsubscribe,
+      error: { code: 'AuthorizationRequired' },
+      full_response: {
+        tick: 1,
+        echo_req: { tick: 1 },
+      },
+    }));
 
-    render(<SubscribeRenderer name='ticks' auth={1} reqData={'asdawefaewf3232'} />);
+    render(<SubscribeRenderer name='ticks' auth={1} reqData={request_data} />);
     const button = await screen.findByRole('button', { name: /Send Request/i });
     await userEvent.click(button);
-
-    expect(consoleOutput[0]).toEqual(
-      'Could not parse the JSON data while trying to send the request: ',
-    );
+    await waitFor(() => {
+      expect(setToggleModal).toHaveBeenCalled();
+    });
   });
 });

src/features/Apiexplorer/SubscribeRenderer/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect, useRef } from 'react';
 import {
   TSocketSubscribableEndpointNames,
   TSocketRequestProps,
@@ -25,18 +25,24 @@ function SubscribeRenderer<T extends TSocketSubscribableEndpointNames>({
 }: IResponseRendererProps<T>) {
   const { is_logged_in } = useAuthContext();
   const { disableSendRequest } = useDisableSendRequest();
-  const { full_response, is_loading, subscribe, unsubscribe, error } = useSubscription<T>(name);
+  const { full_response, is_loading, subscribe, error } = useSubscription<T>(name);
   const [response_state, setResponseState] = useState(false);
   const [toggle_modal, setToggleModal] = useState(false);
   const [is_not_valid, setIsNotValid] = useState(false);
 
+  const subscribe_ref: React.MutableRefObject<{ unsubscribe: () => void }> = useRef();
+
   useEffect(() => {
     if (error && error.code === 'AuthorizationRequired') {
       setToggleModal(true);
     }
+
+    return () => {
+      if (subscribe_ref.current) subscribe_ref.current.unsubscribe();
+    };
   }, [error]);
 
-  const parseRequestJSON = () => {
+  const parseRequestJSON = useCallback(() => {
     let request_data: TSocketRequestProps<T> extends never ? undefined : TSocketRequestProps<T>;
 
     try {
@@ -48,16 +54,16 @@ function SubscribeRenderer<T extends TSocketSubscribableEndpointNames>({
     }
 
     return request_data;
-  };
+  }, [reqData]);
 
   const handleClick = useCallback(() => {
-    unsubscribe();
-    subscribe(parseRequestJSON());
+    if (subscribe_ref.current) subscribe_ref.current.unsubscribe();
+    subscribe_ref.current = subscribe(parseRequestJSON());
     setResponseState(true);
-  }, [reqData, subscribe, unsubscribe]);
+  }, [parseRequestJSON, subscribe]);
 
   const handleClear = () => {
-    unsubscribe();
+    subscribe_ref.current.unsubscribe();
     setResponseState(false);
   };
 
@@ -88,4 +94,4 @@ function SubscribeRenderer<T extends TSocketSubscribableEndpointNames>({
   );
 }
 
-export default SubscribeRenderer;
+export default React.memo(SubscribeRenderer);

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;
 }