+
+
+
+ );
+};
+
+export default CustomRadioButton;
diff --git a/src/components/CustomTabs/__tests__/custom-tabs.test.tsx b/src/components/CustomTabs/__tests__/custom-tabs.test.tsx
new file mode 100644
index 000000000..50015f01e
--- /dev/null
+++ b/src/components/CustomTabs/__tests__/custom-tabs.test.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { cleanup, render, screen } from '@testing-library/react';
+import CustomTabs from '..';
+import userEvent from '@testing-library/user-event';
+
+const mock_tabs = [
+ { label: 'tab_1', content: 'content 1' },
+ { label: 'tab_2', content: 'content 2' },
+];
+
+describe('CustomTabs', () => {
+ beforeEach(() => {
+ render(
+
+ );
+};
+
+export default CustomTabs;
diff --git a/src/components/CustomTooltip/__tests__/custom-tooltip.test.tsx b/src/components/CustomTooltip/__tests__/custom-tooltip.test.tsx
new file mode 100644
index 000000000..7ed240ef7
--- /dev/null
+++ b/src/components/CustomTooltip/__tests__/custom-tooltip.test.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { cleanup, render, screen } from '@testing-library/react';
+import CustomTooltip from '..';
+import userEvent from '@testing-library/user-event';
+
+describe('CustomTooltip', () => {
+ beforeEach(() => {
+ render(
+
+
+
+ {tabs.map((tab, index) => (
+
+ setActiveTab(index)}
+ >
+ {tab.label}
+
+ ))}
+ {tabs[activeTab].content}
+ outer text
+ Test content
+
+
+ {!is_desktop && !disable_drag && (
+
+
+ )}
+
+
+
+ )}
+
+
+
+ {children}
+
+ {primary_action && (
+
+ )}
+ {secondary_action && (
+
+ )}
+
+ Test Component
+
+
+ );
+};
+
+export default AppDashboardContainer;
diff --git a/src/features/dashboard/components/AppRegister/__tests__/app-register.test.tsx b/src/features/dashboard/components/AppRegister/__tests__/app-register.test.tsx
new file mode 100644
index 000000000..c40144d86
--- /dev/null
+++ b/src/features/dashboard/components/AppRegister/__tests__/app-register.test.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { cleanup, render, screen } from '@site/src/test-utils';
+import AppRegister from '..';
+
+const mock_submit = jest.fn();
+
+describe('AppRegister', () => {
+ afterEach(() => {
+ cleanup();
+ jest.clearAllMocks();
+ });
+
+ it('Should render the register form with register button', () => {
+ render(
+
+
+ App dashboard
+
+ Start using Deriv API to bring custom integrations and powerful automation to your apps.
+
+
+ {children}
+
+
+
+
+
+ );
+};
+
+const RestrictionsComponent: React.FC
+
+ );
+};
+
+const AppRegister: React.FC-
+
- + {error_map.error_code_1} + +
- + {error_map.error_code_2} + +
- + {error_map.error_code_3} + +
- ;
const appTableColumns: TAppColumn[] = [
{
- Header: 'Application Name',
+ Header: 'App’s name',
accessor: 'name',
+ minWidth: 150,
+ maxWidth: 200,
},
{
- Header: 'Application ID',
+ Header: 'App ID',
accessor: 'app_id',
+ minWidth: 120,
+ maxWidth: 150,
+ Cell: CopyTextCell,
},
{
- Header: 'Scopes',
+ Header: 'OAuth scopes',
accessor: 'scopes',
+ minWidth: 200,
Cell: ScopesCell,
},
{
- Header: 'Redirect URL',
+ Header: 'OAuth redirect URL',
accessor: 'redirect_uri',
+ minWidth: 350,
+ Cell: CopyTextCell,
},
{
Header: 'Actions',
@@ -40,25 +56,75 @@ interface AppsTableProps extends HTMLAttributes {
apps: ApplicationObject[];
}
+const AppsTableHeader: React.FC<{ is_desktop: boolean }> = ({ is_desktop }) => {
+ const { updateCurrentTab } = useAppManager();
+
+ return (
+ ();
+ const { deviceType } = useDeviceType();
+ const is_desktop = deviceType === 'desktop';
- const getCustomCellProps = useCallback((cell: Cell) => {
+ const getActionObject = useCallback((item: ApplicationObject) => {
return {
openDeleteDialog: () => {
- setActionRow(cell.row.original);
- setIsDeleteOpen(true);
+ setActionRow(item);
+ // setIsDeleteOpen(true);
},
openEditDialog: () => {
- setActionRow(cell.row.original);
- setIsEditOpen(true);
+ setActionRow(item);
+ // setIsEditOpen(true);
},
};
}, []);
+ const getCustomCellProps = useCallback(
+ (cell: Cell) => {
+ return getActionObject(cell.row.original);
+ },
+ [getActionObject],
+ );
+
+ const accordionActions = useCallback(
+ (item: ApplicationObject) => {
+ return getActionObject(item);
+ },
+ [getActionObject],
+ );
+
const onCloseEdit = () => {
setActionRow(null);
setIsEditOpen(false);
@@ -69,16 +135,33 @@ const AppsTable = ({ apps }: AppsTableProps) => {
setIsDeleteOpen(false);
};
- if (apps.length) {
- return (
- <>
- {isDeleteOpen &&
-
+ const renderTable = () => {
+ return is_desktop ? (
+
+ ) : (
+ = ({ label, value, row_wise = false }) => (
+ >
+>;
+mockUseAppManager.mockImplementation(() => ({
+ app_register_modal_open: true,
+}));
+
+describe('AppRegisterSuccessModal', () => {
+ afterEach(() => {
+ cleanup();
+ jest.clearAllMocks();
+ });
+
+ it('Should render the success modal in desktop', () => {
+ render(
+
+ {cell.value ? (
+
+ );
+};
+
+export default CopyTextCell;
diff --git a/src/features/dashboard/components/Table/index.tsx b/src/features/dashboard/components/Table/index.tsx
index 052fc5a1a..c60e4ec81 100644
--- a/src/features/dashboard/components/Table/index.tsx
+++ b/src/features/dashboard/components/Table/index.tsx
@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, LegacyRef, ReactNode } from 'react';
+import React, { HTMLAttributes } from 'react';
import { Cell, Column, TableState, useTable } from 'react-table';
import './table.scss';
@@ -8,6 +8,7 @@ interface ITableProps extends HTMLAttributes
data: T[];
columns: Column[];
initialState?: TableState;
+ parentClass?: string;
row_height?: number;
getCustomCellProps?: (cell: Cell) => object;
}
@@ -17,6 +18,7 @@ const Table = ({
columns,
initialState,
getCustomCellProps = defaultPropGetter,
+ parentClass,
row_height,
...rest
}: ITableProps) => {
@@ -27,19 +29,28 @@ const Table = ({
});
return (
-
-
+
+
{headerGroups.map((headerGroup) => (
-
- Edit application details
-
-
- Delete application
-
+
+
+
+
+
+
+
+
+
+
);
};
diff --git a/src/features/dashboard/components/AppsTable/apps-table.scss b/src/features/dashboard/components/AppsTable/apps-table.scss
new file mode 100644
index 000000000..ff1e5a8ff
--- /dev/null
+++ b/src/features/dashboard/components/AppsTable/apps-table.scss
@@ -0,0 +1,82 @@
+.apps_table {
+ border: 1px solid var(--opacity-black-100);
+ border-radius: 32px;
+ margin: 48px;
+ margin-top: 0;
+
+ &.mobile {
+ border: none;
+ margin: 0px;
+ }
+
+ table {
+ table-layout: fixed;
+ border-collapse: collapse;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-inline: 48px;
+
+ th,
+ td,
+ tr {
+ border: 0px;
+ border-bottom: 1px solid var(--solid-slate-75);
+ text-align: left;
+ height: 72px;
+ padding: 8px 16px;
+ }
+ tr {
+ background-color: transparent;
+ font-weight: 400;
+ }
+ }
+
+ &__table_container {
+ position: relative;
+ max-height: 560px;
+ overflow-y: auto;
+ }
+
+ &__table_header {
+ table-layout: fixed;
+ border-collapse: collapse;
+ th {
+ background-color: var(--solid-slate-75);
+ position: sticky;
+ top: 0;
+ z-index: 1;
+ font-weight: bold;
+ }
+ }
+
+ &__table_body {
+ width: 100%;
+ overflow-y: auto;
+ }
+
+ &__header {
+ display: flex;
+ justify-content: space-between;
+ padding: 48px;
+
+ &.mobile {
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ padding: unset;
+ }
+ &__button {
+ margin-top: 16px;
+ }
+
+ &__texts {
+ display: block;
+ max-width: 72%;
+
+ h3 {
+ margin-bottom: 16px;
+ }
+ }
+ }
+}
diff --git a/src/features/dashboard/components/AppsTable/cells.module.scss b/src/features/dashboard/components/AppsTable/cells.module.scss
index ff96715b7..4e068e391 100644
--- a/src/features/dashboard/components/AppsTable/cells.module.scss
+++ b/src/features/dashboard/components/AppsTable/cells.module.scss
@@ -1,68 +1,15 @@
@use 'src/styles/utility' as *;
-@mixin actionIcon {
- background-repeat: no-repeat;
- background-position: center;
- background-size: rem(1.8);
- cursor: pointer;
- padding: rem(1.8) rem(1.8);
- border-radius: 100%;
-}
-
-.deleteApp {
- background-image: url(/img/delete.svg);
- @include actionIcon;
-}
-
-.updateApp {
- background-image: url(/img/edit.svg);
- @include actionIcon;
-}
-
.appActions {
+ width: 168px;
display: flex;
- margin: rem(3);
- justify-content: center;
-}
-
-.tooltip {
- position: relative;
-
- .tooltipText {
- visibility: hidden;
- color: var(--ifm-color-emphasis-100);
- background-color: var(--ifm-color-emphasis-700);
- text-align: center;
- border-radius: 4px;
- position: absolute;
- z-index: 1;
- opacity: 0;
- transition: opacity 0.3s;
- font-size: rem(1);
- transform: translateX(50%);
- right: 50%;
- bottom: rem(4);
- padding: rem(0.5);
- &::after {
- content: '';
- position: absolute;
- bottom: rem(-0.9);
- right: 50%;
- transform: translateX(50%);
- margin-left: rem(-0.5);
- border-width: 5px;
- border-style: solid;
- border-color: var(--ifm-color-emphasis-700) transparent transparent transparent;
- }
+ svg {
+ margin-inline: 8px;
+ cursor: pointer;
}
+}
- &:hover {
- transform: translateY(-0.2rem);
-
- .tooltipText {
- visibility: visible;
- opacity: 1;
- }
- }
+.flex_end {
+ justify-content: flex-end;
}
diff --git a/src/features/dashboard/components/AppsTable/index.tsx b/src/features/dashboard/components/AppsTable/index.tsx
index 125524c72..8ba091907 100644
--- a/src/features/dashboard/components/AppsTable/index.tsx
+++ b/src/features/dashboard/components/AppsTable/index.tsx
@@ -1,32 +1,48 @@
import { ApplicationObject } from '@deriv/api-types';
import React, { HTMLAttributes, useCallback, useState } from 'react';
import { Cell, Column } from 'react-table';
-import NoApps from '../NoApps';
+import { Button, Heading, Text } from '@deriv/quill-design';
+import { LabelPairedCirclePlusMdRegularIcon } from '@deriv/quill-icons';
+
+import useAppManager from '@site/src/hooks/useAppManager';
+import useDeviceType from '@site/src/hooks/useDeviceType';
+import ResponsiveTable from './responsive-table';
+import AppActionsCell from './app-actions.cell';
+import CopyTextCell from '../Table/copy-text.cell';
import DeleteAppDialog from '../Dialogs/DeleteAppDialog';
-import UpdateAppDialog from '../Dialogs/UpdateAppDialog';
-import Table from '../Table';
import ScopesCell from '../Table/scopes.cell';
-import AppActionsCell from './app-actions.cell';
+import Table from '../Table';
+import UpdateAppDialog from '../Dialogs/UpdateAppDialog';
+import clsx from 'clsx';
+import './apps-table.scss';
export type TAppColumn = Column
+
+ );
+};
+
const AppsTable = ({ apps }: AppsTableProps) => {
const [isDeleteOpen, setIsDeleteOpen] = useState(false);
const [isEditOpen, setIsEditOpen] = useState(false);
const [actionRow, setActionRow] = useState
+ App manager
+
+ Here's where you can see your app's details. Edit your app settings to suit your
+ needs or delete them permanently.
+
+
+
+
+ {isDeleteOpen &&
+ );
};
export default AppsTable;
diff --git a/src/features/dashboard/components/AppsTable/responsive-table.scss b/src/features/dashboard/components/AppsTable/responsive-table.scss
new file mode 100644
index 000000000..c8996d7ce
--- /dev/null
+++ b/src/features/dashboard/components/AppsTable/responsive-table.scss
@@ -0,0 +1,30 @@
+.accordion_item {
+ width: 100%;
+ padding-block: 18px;
+ border-bottom: 1px solid var(--opacity-black-75);
+ font-size: 14px;
+
+ &_column {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ &__label {
+ line-height: 2;
+ min-width: fit-content;
+ font-weight: 500;
+ }
+ &__value {
+ text-align: end;
+ justify-content: end;
+ &_row {
+ text-align: start;
+ justify-content: start;
+ overflow-wrap: anywhere;
+ }
+ }
+ .redirect_url {
+ text-align: start;
+ }
+}
diff --git a/src/features/dashboard/components/AppsTable/responsive-table.tsx b/src/features/dashboard/components/AppsTable/responsive-table.tsx
new file mode 100644
index 000000000..cd0ab30c0
--- /dev/null
+++ b/src/features/dashboard/components/AppsTable/responsive-table.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import CustomAccordion from '@site/src/components/CustomAccordion';
+import { ApplicationObject } from '@deriv/api-types';
+import CopyTextCell from '../Table/copy-text.cell';
+import ScopesCell from '../Table/scopes.cell';
+import AppActionsCell from './app-actions.cell';
+import clsx from 'clsx';
+import './responsive-table.scss';
+
+type TResponsiveTableProps = {
+ apps: ApplicationObject[];
+ accordionActions: TAccordionActions;
+};
+
+type TAccordionActions = (item: ApplicationObject) => {
+ openDeleteDialog: () => void;
+ openEditDialog: () => void;
+};
+
+type TAccordionItemProps = {
+ label: string;
+ value: React.ReactNode;
+ row_wise?: boolean;
+};
+
+const AccordionItem: React.FC
+
+
+
+);
+
+const generateContent = (item: ApplicationObject, accordionActions: TAccordionActions) => {
+ return (
+ {label}
+
+ {value}
+
+
+
+ );
+};
+
+const ResponsiveTable = ({ apps, accordionActions }: TResponsiveTableProps) => {
+ const items = apps.map((app) => ({
+ header: app.name,
+ content: generateContent(app, accordionActions),
+ }));
+ return
+
+
+
+ );
+};
diff --git a/src/features/dashboard/components/Table/__tests__/copy-text.cell.test.tsx b/src/features/dashboard/components/Table/__tests__/copy-text.cell.test.tsx
new file mode 100644
index 000000000..3473cdd56
--- /dev/null
+++ b/src/features/dashboard/components/Table/__tests__/copy-text.cell.test.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { render, screen } from '@site/src/test-utils';
+import CopyTextCell from '../copy-text.cell';
+import userEvent from '@testing-library/user-event';
+
+describe('CopyTextCell', () => {
+ beforeAll(() => {
+ Object.assign(navigator, {
+ clipboard: {
+ writeText: jest.fn(),
+ },
+ });
+ });
+
+ it('Should render the copy button', () => {
+ render(
+
+ {is_desktop && (
+
+ Application registered successfully!
+
+
+
+ 
+
+ )}
+
+
+
+ Ready to take the next step?
+
Optimise your app's capabilities by: +
+ Optimise your app's capabilities by: +
-
+
- Creating an API token to use with your application. +
- Adding OAuth authentication in your app. +
- Selecting the scopes of OAuth authorisation for your app. +
Note: You can make these changes later through the dashboard.
+
+ {
+ navigator.clipboard.writeText(cell.value.toString());
+ }}
+ >
+ {cell.value}
+
+
+ ) : (
+ ''
+ )}
+ | + | 1000 ? 'auto' : column.maxWidth, + }} + > {column.render('Header')} | ))}+ | 1000 ? 'auto' : cell.column.maxWidth, + }} + > {cell.render('Cell', getCustomCellProps(cell))} | ); diff --git a/src/features/dashboard/components/Table/scopes.cell.module.scss b/src/features/dashboard/components/Table/scopes.cell.module.scss index 57dfa80e9..f894ac0e9 100644 --- a/src/features/dashboard/components/Table/scopes.cell.module.scss +++ b/src/features/dashboard/components/Table/scopes.cell.module.scss @@ -3,7 +3,7 @@ .scope { display: inline-block; border: rem(0.1) solid var(--ifm-color-emphasis-400); - border-radius: 100vw; // pill shaped + border-radius: 4px; padding: rem(0.2) rem(0.8); font-size: rem(1.2); margin: rem(0.5); diff --git a/src/features/dashboard/components/Table/scopes.cell.tsx b/src/features/dashboard/components/Table/scopes.cell.tsx index af249b858..03abcf98b 100644 --- a/src/features/dashboard/components/Table/scopes.cell.tsx +++ b/src/features/dashboard/components/Table/scopes.cell.tsx @@ -1,13 +1,21 @@ import React from 'react'; -import { CellProps } from 'react-table'; import styles from './scopes.cell.module.scss'; -const ScopesCell =
|---|