From 8a403f1acd9e5b85250d6f213abfea24e92187e2 Mon Sep 17 00:00:00 2001 From: Sandeep Date: Thu, 26 Sep 2024 18:44:02 +0800 Subject: [PATCH 01/12] refactor: :fire: restructuring the project and ui fixes --- .gitignore | 3 +- .vscode/extensions.json | 3 -- .vscode/settings.json | 5 --- src/features/Apiexplorer/index.tsx | 2 +- src/features/Apiexplorer/styles.module.scss | 7 ++-- .../components/Table/__tests__/Table.test.tsx | 8 ++-- .../dashboard/components/Table/index.ts | 3 ++ .../components/Table/{index.tsx => table.tsx} | 0 .../dashboard/components/Tabs/index.ts | 3 ++ .../components/Tabs/{index.tsx => tabs.tsx} | 0 .../components/TokenRegister/index.tsx | 6 +-- .../__tests__/api-token.card.test.tsx | 0 .../api-token-cards.tsx} | 2 +- .../api-token.card.module.scss | 0 .../components/api-token-card/index.ts | 3 ++ .../__tests__/api-token.form.test.tsx | 0 .../api-token-form.module.scss} | 0 .../api-token-form.tsx} | 7 ++-- .../create-token-field.tsx} | 8 ++-- .../custom-error.tsx} | 0 .../components/api-token-form/index.ts | 3 ++ .../__tests__/copy-button.test.tsx} | 2 +- .../__tests__/index.test.tsx | 0 .../api-table.module.scss | 0 .../cell-account-type.tsx} | 0 .../cell-delete-token.tsx} | 2 +- .../cell-last-used.tsx} | 0 .../cell-token.tsx} | 0 .../cells.module.scss | 0 .../copy-button.tsx} | 4 +- .../copy-token-dialog.module.scss} | 0 .../copy-token-dialog/copy-token-dialog.tsx} | 2 +- .../copy-token-dialog/index.ts | 3 ++ .../delete-token-dialog.scss | 0 .../delete-token-dialog.tsx} | 0 .../delete-token-dialog/index.ts | 3 ++ .../index.tsx | 12 +++--- .../responsive-table.tsx | 8 ++-- .../token-cell.module.scss | 0 .../__tests__/app-form.test.tsx | 2 +- .../app-form.module.scss | 0 .../index.tsx => app-form/app-form.tsx} | 5 +-- .../dashboard/components/app-form/index.ts | 3 ++ .../app-register-success-modal.test.tsx | 0 .../app-register-success-modal.tsx} | 8 ++-- .../app-register-success-modal/index.ts | 3 ++ .../__tests__/app-register.test.tsx | 0 .../app-register.scss | 38 +++++++++++++------ .../app-register.tsx} | 30 +++++++++------ .../components/app-register/index.ts | 3 ++ .../{AppRegister => app-register}/types.ts | 0 .../__tests__/apps-table.test.tsx | 0 .../__tests__/option-dialog.test.tsx} | 7 +++- .../app-actions.cell.tsx | 0 .../{AppsTable => apps-table}/apps-table.scss | 0 .../index.tsx => apps-table/apps-table.tsx} | 10 ++--- .../cells.module.scss | 0 .../dashboard/components/apps-table/index.ts | 3 ++ .../option-dialog.tsx} | 0 .../responsive-table.scss | 0 .../responsive-table.tsx | 4 +- .../__tests__/dashboard-container.test.tsx} | 10 ++--- .../dashboard-container.scss} | 16 ++++---- .../dashboard-container.tsx} | 12 +++--- .../components/dashboard-container/index.ts | 3 ++ .../__tests__/delete-app-dialog.test.tsx | 0 .../delete-app-dialog}/delete-app-dialog.scss | 0 .../delete-app-dialog/delete-app-dialog.tsx} | 0 .../dialogs/delete-app-dialog/index.ts | 3 ++ .../register-app-error-dialog.test.tsx | 0 .../register-app-dialog-error/index.ts | 3 ++ .../register-app-dialog-error.tsx} | 4 +- .../register-app-dialog-success.test.tsx | 0 .../register-app-dialog-success/index.ts | 3 ++ .../register-app-dialog-success.module.scss | 0 .../register-app-dialog-success.tsx} | 4 +- .../token-creation-dialog-success.test.tsx | 0 .../token-creation-dialog-success/index.ts | 3 ++ .../token-creation-dialog-success.tsx} | 6 +-- .../token-creation-dialog-sucess.module.scss | 0 .../__tests__/update-app-dialog.test.tsx | 0 .../dialogs/update-app-dialog/index.ts | 3 ++ .../update-app-dialog.module.scss | 0 .../update-app-dialog/update-app-dialog.tsx} | 4 +- .../__tests__/loading-table.test.tsx | 0 .../components/loading-table/index.ts | 3 ++ .../loading-table.tsx} | 0 .../__tests__/no-apps.test.tsx | 0 .../dashboard/components/no-apps/index.ts | 3 ++ .../{NoApps => no-apps}/no-apps.module.scss | 0 .../{NoApps/index.tsx => no-apps/no-apps.tsx} | 0 .../RestrictionsAppname.module.scss | 0 .../__tests__/restrictions-appname.test.tsx | 0 .../components/restrictions-appname/index.ts | 3 ++ .../restrictions-appname.tsx} | 0 .../__tests__/stepperTextField.test.tsx | 0 .../components/stepper-text-field/index.ts | 3 ++ .../stepper-text-field.scss | 0 .../stepper-text-field.tsx} | 0 .../__tests__/manage-apps.test.tsx | 2 +- .../dashboard/manage-apps/app-manage-page.tsx | 4 +- .../dashboard/manage-dashboard/index.tsx | 15 ++++---- .../manage-dashboard/manage-dashboard.scss | 10 ++--- .../manage-tokens/__tests__/index.test.tsx | 2 +- .../dashboard/manage-tokens/index.tsx | 4 +- .../manage-tokens/token-manage-page.tsx | 2 +- src/features/dashboard/register-app/index.tsx | 6 +-- src/features/dashboard/types.ts | 2 +- .../update-app/AppUpdateForm/index.tsx | 10 ++--- src/features/dashboard/update-app/index.tsx | 2 +- src/styles/_mixins.scss | 17 +++++++++ src/styles/index.scss | 5 ++- 112 files changed, 241 insertions(+), 141 deletions(-) delete mode 100644 .vscode/extensions.json delete mode 100644 .vscode/settings.json create mode 100644 src/features/dashboard/components/Table/index.ts rename src/features/dashboard/components/Table/{index.tsx => table.tsx} (100%) create mode 100644 src/features/dashboard/components/Tabs/index.ts rename src/features/dashboard/components/Tabs/{index.tsx => tabs.tsx} (100%) rename src/features/dashboard/components/{ApiTokenCard => api-token-card}/__tests__/api-token.card.test.tsx (100%) rename src/features/dashboard/components/{ApiTokenCard/index.tsx => api-token-card/api-token-cards.tsx} (97%) rename src/features/dashboard/components/{ApiTokenCard => api-token-card}/api-token.card.module.scss (100%) create mode 100644 src/features/dashboard/components/api-token-card/index.ts rename src/features/dashboard/components/{ApiTokenForm => api-token-form}/__tests__/api-token.form.test.tsx (100%) rename src/features/dashboard/components/{ApiTokenForm/api-token.form.module.scss => api-token-form/api-token-form.module.scss} (100%) rename src/features/dashboard/components/{ApiTokenForm/api-token.form.tsx => api-token-form/api-token-form.tsx} (96%) rename src/features/dashboard/components/{ApiTokenForm/CreateTokenField/index.tsx => api-token-form/create-token-field.tsx} (93%) rename src/features/dashboard/components/{ApiTokenForm/CreateTokenField/CustomErrors/index.tsx => api-token-form/custom-error.tsx} (100%) create mode 100644 src/features/dashboard/components/api-token-form/index.ts rename src/features/dashboard/components/{ApiTokenTable/CopyButton/__tests__/CopyButton.test.tsx => api-token-table/__tests__/copy-button.test.tsx} (98%) rename src/features/dashboard/components/{ApiTokenTable => api-token-table}/__tests__/index.test.tsx (100%) rename src/features/dashboard/components/{ApiTokenTable => api-token-table}/api-table.module.scss (100%) rename src/features/dashboard/components/{ApiTokenTable/account.type.cell.tsx => api-token-table/cell-account-type.tsx} (100%) rename src/features/dashboard/components/{ApiTokenTable/delete.token.cell.tsx => api-token-table/cell-delete-token.tsx} (96%) rename src/features/dashboard/components/{ApiTokenTable/table.lastused.cell.tsx => api-token-table/cell-last-used.tsx} (100%) rename src/features/dashboard/components/{ApiTokenTable/table.token.cell.tsx => api-token-table/cell-token.tsx} (100%) rename src/features/dashboard/components/{ApiTokenTable => api-token-table}/cells.module.scss (100%) rename src/features/dashboard/components/{ApiTokenTable/CopyButton/index.tsx => api-token-table/copy-button.tsx} (91%) rename src/features/dashboard/components/{ApiTokenTable/CopyTokenDialog/CopyTokenDialog.module.scss => api-token-table/copy-token-dialog/copy-token-dialog.module.scss} (100%) rename src/features/dashboard/components/{ApiTokenTable/CopyTokenDialog/index.tsx => api-token-table/copy-token-dialog/copy-token-dialog.tsx} (97%) create mode 100644 src/features/dashboard/components/api-token-table/copy-token-dialog/index.ts rename src/features/dashboard/components/{ApiTokenTable/DeleteTokenDialog => api-token-table/delete-token-dialog}/delete-token-dialog.scss (100%) rename src/features/dashboard/components/{ApiTokenTable/DeleteTokenDialog/index.tsx => api-token-table/delete-token-dialog/delete-token-dialog.tsx} (100%) create mode 100644 src/features/dashboard/components/api-token-table/delete-token-dialog/index.ts rename src/features/dashboard/components/{ApiTokenTable => api-token-table}/index.tsx (92%) rename src/features/dashboard/components/{ApiTokenTable => api-token-table}/responsive-table.tsx (87%) rename src/features/dashboard/components/{ApiTokenTable => api-token-table}/token-cell.module.scss (100%) rename src/features/dashboard/components/{AppForm => app-form}/__tests__/app-form.test.tsx (99%) rename src/features/dashboard/components/{AppForm => app-form}/app-form.module.scss (100%) rename src/features/dashboard/components/{AppForm/index.tsx => app-form/app-form.tsx} (99%) create mode 100644 src/features/dashboard/components/app-form/index.ts rename src/features/dashboard/components/{Modals/AppRegisterSuccessModal => app-register-success-modal}/__tests__/app-register-success-modal.test.tsx (100%) rename src/features/dashboard/components/{Modals/AppRegisterSuccessModal/index.tsx => app-register-success-modal/app-register-success-modal.tsx} (91%) create mode 100644 src/features/dashboard/components/app-register-success-modal/index.ts rename src/features/dashboard/components/{AppRegister => app-register}/__tests__/app-register.test.tsx (100%) rename src/features/dashboard/components/{AppRegister => app-register}/app-register.scss (61%) rename src/features/dashboard/components/{AppRegister/index.tsx => app-register/app-register.tsx} (74%) create mode 100644 src/features/dashboard/components/app-register/index.ts rename src/features/dashboard/components/{AppRegister => app-register}/types.ts (100%) rename src/features/dashboard/components/{AppsTable => apps-table}/__tests__/apps-table.test.tsx (100%) rename src/features/dashboard/components/{AppsTable/AppsTableOptionDialog/__tests__/apps-table-option-dialog.test.tsx => apps-table/__tests__/option-dialog.test.tsx} (97%) rename src/features/dashboard/components/{AppsTable => apps-table}/app-actions.cell.tsx (100%) rename src/features/dashboard/components/{AppsTable => apps-table}/apps-table.scss (100%) rename src/features/dashboard/components/{AppsTable/index.tsx => apps-table/apps-table.tsx} (98%) rename src/features/dashboard/components/{AppsTable => apps-table}/cells.module.scss (100%) create mode 100644 src/features/dashboard/components/apps-table/index.ts rename src/features/dashboard/components/{AppsTable/AppsTableOptionDialog/index.tsx => apps-table/option-dialog.tsx} (100%) rename src/features/dashboard/components/{AppsTable => apps-table}/responsive-table.scss (100%) rename src/features/dashboard/components/{AppsTable => apps-table}/responsive-table.tsx (95%) rename src/features/dashboard/components/{AppDashboardContainer/__tests__/app-dashboard-container.test.tsx => dashboard-container/__tests__/dashboard-container.test.tsx} (74%) rename src/features/dashboard/components/{AppDashboardContainer/app-dashboard-container.scss => dashboard-container/dashboard-container.scss} (61%) rename src/features/dashboard/components/{AppDashboardContainer/index.tsx => dashboard-container/dashboard-container.tsx} (69%) create mode 100644 src/features/dashboard/components/dashboard-container/index.ts rename src/features/dashboard/components/{Dialogs/DeleteAppDialog => dialogs/delete-app-dialog}/__tests__/delete-app-dialog.test.tsx (100%) rename src/features/dashboard/components/{Dialogs/DeleteAppDialog => dialogs/delete-app-dialog}/delete-app-dialog.scss (100%) rename src/features/dashboard/components/{Dialogs/DeleteAppDialog/index.tsx => dialogs/delete-app-dialog/delete-app-dialog.tsx} (100%) create mode 100644 src/features/dashboard/components/dialogs/delete-app-dialog/index.ts rename src/features/dashboard/components/{Dialogs/RegisterAppDialogError => dialogs/register-app-dialog-error}/__tests__/register-app-error-dialog.test.tsx (100%) create mode 100644 src/features/dashboard/components/dialogs/register-app-dialog-error/index.ts rename src/features/dashboard/components/{Dialogs/RegisterAppDialogError/index.tsx => dialogs/register-app-dialog-error/register-app-dialog-error.tsx} (90%) rename src/features/dashboard/components/{Dialogs/RegisterAppDialogSuccess => dialogs/register-app-dialog-success}/__tests__/register-app-dialog-success.test.tsx (100%) create mode 100644 src/features/dashboard/components/dialogs/register-app-dialog-success/index.ts rename src/features/dashboard/components/{Dialogs/RegisterAppDialogSuccess => dialogs/register-app-dialog-success}/register-app-dialog-success.module.scss (100%) rename src/features/dashboard/components/{Dialogs/RegisterAppDialogSuccess/index.tsx => dialogs/register-app-dialog-success/register-app-dialog-success.tsx} (90%) rename src/features/dashboard/components/{Dialogs/TokenCreationDialogSuccess => dialogs/token-creation-dialog-success}/__tests__/token-creation-dialog-success.test.tsx (100%) create mode 100644 src/features/dashboard/components/dialogs/token-creation-dialog-success/index.ts rename src/features/dashboard/components/{Dialogs/TokenCreationDialogSuccess/index.tsx => dialogs/token-creation-dialog-success/token-creation-dialog-success.tsx} (93%) rename src/features/dashboard/components/{Dialogs/TokenCreationDialogSuccess => dialogs/token-creation-dialog-success}/token-creation-dialog-sucess.module.scss (100%) rename src/features/dashboard/components/{Dialogs/UpdateAppDialog => dialogs/update-app-dialog}/__tests__/update-app-dialog.test.tsx (100%) create mode 100644 src/features/dashboard/components/dialogs/update-app-dialog/index.ts rename src/features/dashboard/components/{Dialogs/UpdateAppDialog => dialogs/update-app-dialog}/update-app-dialog.module.scss (100%) rename src/features/dashboard/components/{Dialogs/UpdateAppDialog/index.tsx => dialogs/update-app-dialog/update-app-dialog.tsx} (96%) rename src/features/dashboard/components/{LoadingTable => loading-table}/__tests__/loading-table.test.tsx (100%) create mode 100644 src/features/dashboard/components/loading-table/index.ts rename src/features/dashboard/components/{LoadingTable/index.tsx => loading-table/loading-table.tsx} (100%) rename src/features/dashboard/components/{NoApps => no-apps}/__tests__/no-apps.test.tsx (100%) create mode 100644 src/features/dashboard/components/no-apps/index.ts rename src/features/dashboard/components/{NoApps => no-apps}/no-apps.module.scss (100%) rename src/features/dashboard/components/{NoApps/index.tsx => no-apps/no-apps.tsx} (100%) rename src/features/dashboard/components/{RestrictionsAppname => restrictions-appname}/RestrictionsAppname.module.scss (100%) rename src/features/dashboard/components/{RestrictionsAppname => restrictions-appname}/__tests__/restrictions-appname.test.tsx (100%) create mode 100644 src/features/dashboard/components/restrictions-appname/index.ts rename src/features/dashboard/components/{RestrictionsAppname/index.tsx => restrictions-appname/restrictions-appname.tsx} (100%) rename src/features/dashboard/components/{StepperTextField => stepper-text-field}/__tests__/stepperTextField.test.tsx (100%) create mode 100644 src/features/dashboard/components/stepper-text-field/index.ts rename src/features/dashboard/components/{StepperTextField => stepper-text-field}/stepper-text-field.scss (100%) rename src/features/dashboard/components/{StepperTextField/index.tsx => stepper-text-field/stepper-text-field.tsx} (100%) create mode 100644 src/styles/_mixins.scss diff --git a/.gitignore b/.gitignore index 3b207c053..4f0f23a07 100644 --- a/.gitignore +++ b/.gitignore @@ -27,5 +27,6 @@ yarn-error.log* .idea -.vscode/settings.json +.vscode +.vscode* .vercel diff --git a/.vscode/extensions.json b/.vscode/extensions.json deleted file mode 100644 index d7df89c9c..000000000 --- a/.vscode/extensions.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"] -} diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 8c167a488..000000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, - "editor.defaultFormatter": "esbenp.prettier-vscode", - "editor.formatOnSave": true -} diff --git a/src/features/Apiexplorer/index.tsx b/src/features/Apiexplorer/index.tsx index 9717bda49..66a1c9f51 100644 --- a/src/features/Apiexplorer/index.tsx +++ b/src/features/Apiexplorer/index.tsx @@ -20,7 +20,7 @@ export default function ApiExplorerFeatures() { const has_info = Object.keys(request_info).length === 0; return ( <> -
+
({ diff --git a/src/features/dashboard/components/AppForm/app-form.module.scss b/src/features/dashboard/components/app-form/app-form.module.scss similarity index 100% rename from src/features/dashboard/components/AppForm/app-form.module.scss rename to src/features/dashboard/components/app-form/app-form.module.scss diff --git a/src/features/dashboard/components/AppForm/index.tsx b/src/features/dashboard/components/app-form/app-form.tsx similarity index 99% rename from src/features/dashboard/components/AppForm/index.tsx rename to src/features/dashboard/components/app-form/app-form.tsx index b2b88c899..d3c922463 100644 --- a/src/features/dashboard/components/AppForm/index.tsx +++ b/src/features/dashboard/components/app-form/app-form.tsx @@ -1,7 +1,6 @@ -import React, { Dispatch, ReactNode, SetStateAction, useEffect, useMemo, useState } from 'react'; +import React, { Dispatch, ReactNode, SetStateAction, useEffect, useState } from 'react'; import { Button, Text } from '@deriv/ui'; import { useForm } from 'react-hook-form'; -import { isNotDemoCurrency } from '@site/src/utils'; import { yupResolver } from '@hookform/resolvers/yup'; import { appRegisterSchema, appEditSchema, IRegisterAppForm } from '../../types'; import useApiToken from '@site/src/hooks/useApiToken'; @@ -16,7 +15,7 @@ import styles from './app-form.module.scss'; import clsx from 'clsx'; import useAppManager from '@site/src/hooks/useAppManager'; import useWS from '@site/src/hooks/useWs'; -import RestrictionsAppname from '../RestrictionsAppname'; +import RestrictionsAppname from '../restrictions-appname'; type TAppFormProps = { initialValues?: Partial; diff --git a/src/features/dashboard/components/app-form/index.ts b/src/features/dashboard/components/app-form/index.ts new file mode 100644 index 000000000..8e48024a8 --- /dev/null +++ b/src/features/dashboard/components/app-form/index.ts @@ -0,0 +1,3 @@ +import AppForm from './app-form'; + +export default AppForm; diff --git a/src/features/dashboard/components/Modals/AppRegisterSuccessModal/__tests__/app-register-success-modal.test.tsx b/src/features/dashboard/components/app-register-success-modal/__tests__/app-register-success-modal.test.tsx similarity index 100% rename from src/features/dashboard/components/Modals/AppRegisterSuccessModal/__tests__/app-register-success-modal.test.tsx rename to src/features/dashboard/components/app-register-success-modal/__tests__/app-register-success-modal.test.tsx diff --git a/src/features/dashboard/components/Modals/AppRegisterSuccessModal/index.tsx b/src/features/dashboard/components/app-register-success-modal/app-register-success-modal.tsx similarity index 91% rename from src/features/dashboard/components/Modals/AppRegisterSuccessModal/index.tsx rename to src/features/dashboard/components/app-register-success-modal/app-register-success-modal.tsx index ab3c720e0..450bc1cd6 100644 --- a/src/features/dashboard/components/Modals/AppRegisterSuccessModal/index.tsx +++ b/src/features/dashboard/components/app-register-success-modal/app-register-success-modal.tsx @@ -3,16 +3,16 @@ import useAppManager from '@site/src/hooks/useAppManager'; import { Heading, Modal, Text } from '@deriv-com/quill-ui'; import { StandaloneCircleCheckRegularIcon } from '@deriv/quill-icons'; import useDeviceType from '@site/src/hooks/useDeviceType'; -import '../../Dialogs/DeleteAppDialog/delete-app-dialog.scss'; -import useDisableScroll from '../../../hooks/useDisableScroll'; +import useDisableScroll from '../../hooks/useDisableScroll'; import Translate from '@docusaurus/Translate'; +import '../dialogs/delete-app-dialog/delete-app-dialog.scss'; interface IAppRegisterSuccessModalProps { onConfigure: () => void; onCancel: () => void; } -export const AppRegisterSuccessModal = ({ +const AppRegisterSuccessModal = ({ onConfigure, onCancel, }: IAppRegisterSuccessModalProps) => { @@ -75,3 +75,5 @@ export const AppRegisterSuccessModal = ({ ); }; + +export default AppRegisterSuccessModal; diff --git a/src/features/dashboard/components/app-register-success-modal/index.ts b/src/features/dashboard/components/app-register-success-modal/index.ts new file mode 100644 index 000000000..c53f3d3da --- /dev/null +++ b/src/features/dashboard/components/app-register-success-modal/index.ts @@ -0,0 +1,3 @@ +import AppRegisterSuccessModal from './app-register-success-modal'; + +export default AppRegisterSuccessModal; diff --git a/src/features/dashboard/components/AppRegister/__tests__/app-register.test.tsx b/src/features/dashboard/components/app-register/__tests__/app-register.test.tsx similarity index 100% rename from src/features/dashboard/components/AppRegister/__tests__/app-register.test.tsx rename to src/features/dashboard/components/app-register/__tests__/app-register.test.tsx diff --git a/src/features/dashboard/components/AppRegister/app-register.scss b/src/features/dashboard/components/app-register/app-register.scss similarity index 61% rename from src/features/dashboard/components/AppRegister/app-register.scss rename to src/features/dashboard/components/app-register/app-register.scss index 3b5a41b9d..ce24456e7 100644 --- a/src/features/dashboard/components/AppRegister/app-register.scss +++ b/src/features/dashboard/components/app-register/app-register.scss @@ -1,9 +1,13 @@ -.app_register_container { +@use 'src/styles/mixins' as *; + +.app-register-container { margin-inline: 16px; margin-top: 60px; max-width: 608px; - &_input { - padding: 16px; + &__input { + padding-block: 12px; + padding-inline-end: 12px; + padding-inline-start: 4px; width: 90%; border: none; @@ -16,18 +20,22 @@ justify-content: center; } - @media screen and (max-width: 992px) { + @include tablet { margin-top: 48px; } &__fields { display: flex; align-items: center; - border: 1px solid #00000014; - padding-block: 5px; - padding-inline-end: 12px; + border: 1px solid var(--opacity-black-100); + padding-block: 12px; + padding-inline: 12px; border-radius: 8px; + @include mobile { + padding-block: 4px; + } + &.error-border { border: 1px solid var(--colors-coral500); } @@ -38,13 +46,19 @@ } &__restrictions { - color: #0000007a; + color: var(--validation-text-light); margin-top: 4px; - margin-left: 16px; font-size: 14px; ul { - list-style: disc; line-height: 24px; + padding-left: 32px; + @include mobile { + line-height: 18px; + padding: 0 16px 0 32px; + li { + font-size: 12px; + } + } } } @@ -54,8 +68,8 @@ font-weight: 400; font-size: 16px; position: relative; - top: 0px; - @media screen and (max-width: 992px) { + line-height: 24px; + @include tablet { font-size: 14px; top: -4px; } diff --git a/src/features/dashboard/components/AppRegister/index.tsx b/src/features/dashboard/components/app-register/app-register.tsx similarity index 74% rename from src/features/dashboard/components/AppRegister/index.tsx rename to src/features/dashboard/components/app-register/app-register.tsx index a74c7b4e1..c92249ec9 100644 --- a/src/features/dashboard/components/AppRegister/index.tsx +++ b/src/features/dashboard/components/app-register/app-register.tsx @@ -12,12 +12,13 @@ import { app_name_error_map, } from './types'; import CustomCheckbox from '@site/src/components/CustomCheckbox'; +import useDeviceType from '@site/src/hooks/useDeviceType'; const TermsAndConditions: React.FC = ({ register }) => { return ( -
+
-
); }; -export const RestrictionsComponent: React.FC = ({ error }) => { + +export const Restrictions: React.FC = ({ error }) => { return ( -
+
  • {app_name_error_map.error_code_1} @@ -60,21 +62,24 @@ const AppRegister: React.FC = ({ submit }) => { resolver: yupResolver(baseAppRegisterSchema), }); const has_error = Object.entries(errors).length !== 0; + const { deviceType } = useDeviceType(); + const is_desktop = deviceType === 'desktop'; + return ( -
    -
    -
    -
    + +
    +
    +
    -
    +
    {errors?.tnc_approval?.message} - +
    ); }; + export default AppRegister; diff --git a/src/features/dashboard/components/app-register/index.ts b/src/features/dashboard/components/app-register/index.ts new file mode 100644 index 000000000..8582f1b6f --- /dev/null +++ b/src/features/dashboard/components/app-register/index.ts @@ -0,0 +1,3 @@ +import AppRegister from './app-register'; + +export default AppRegister; diff --git a/src/features/dashboard/components/AppRegister/types.ts b/src/features/dashboard/components/app-register/types.ts similarity index 100% rename from src/features/dashboard/components/AppRegister/types.ts rename to src/features/dashboard/components/app-register/types.ts diff --git a/src/features/dashboard/components/AppsTable/__tests__/apps-table.test.tsx b/src/features/dashboard/components/apps-table/__tests__/apps-table.test.tsx similarity index 100% rename from src/features/dashboard/components/AppsTable/__tests__/apps-table.test.tsx rename to src/features/dashboard/components/apps-table/__tests__/apps-table.test.tsx diff --git a/src/features/dashboard/components/AppsTable/AppsTableOptionDialog/__tests__/apps-table-option-dialog.test.tsx b/src/features/dashboard/components/apps-table/__tests__/option-dialog.test.tsx similarity index 97% rename from src/features/dashboard/components/AppsTable/AppsTableOptionDialog/__tests__/apps-table-option-dialog.test.tsx rename to src/features/dashboard/components/apps-table/__tests__/option-dialog.test.tsx index fc11fd30d..9a52491cb 100644 --- a/src/features/dashboard/components/AppsTable/AppsTableOptionDialog/__tests__/apps-table-option-dialog.test.tsx +++ b/src/features/dashboard/components/apps-table/__tests__/option-dialog.test.tsx @@ -1,7 +1,10 @@ +import React, { act } from 'react'; import { render, screen } from '@site/src/test-utils'; import userEvent from '@testing-library/user-event'; -import React, { act } from 'react'; -import AppsTableOptionDialog, { IAppsTableOptionDialog, tableFilterOptions } from '..'; +import AppsTableOptionDialog, { + IAppsTableOptionDialog, + tableFilterOptions, +} from '../option-dialog'; const Props: IAppsTableOptionDialog = { optionType: 'sort', diff --git a/src/features/dashboard/components/AppsTable/app-actions.cell.tsx b/src/features/dashboard/components/apps-table/app-actions.cell.tsx similarity index 100% rename from src/features/dashboard/components/AppsTable/app-actions.cell.tsx rename to src/features/dashboard/components/apps-table/app-actions.cell.tsx diff --git a/src/features/dashboard/components/AppsTable/apps-table.scss b/src/features/dashboard/components/apps-table/apps-table.scss similarity index 100% rename from src/features/dashboard/components/AppsTable/apps-table.scss rename to src/features/dashboard/components/apps-table/apps-table.scss diff --git a/src/features/dashboard/components/AppsTable/index.tsx b/src/features/dashboard/components/apps-table/apps-table.tsx similarity index 98% rename from src/features/dashboard/components/AppsTable/index.tsx rename to src/features/dashboard/components/apps-table/apps-table.tsx index aac5e2a4a..75b3975f3 100644 --- a/src/features/dashboard/components/AppsTable/index.tsx +++ b/src/features/dashboard/components/apps-table/apps-table.tsx @@ -14,15 +14,15 @@ import { import { TDashboardTab } from '@site/src/contexts/app-manager/app-manager.context'; import useAppManager from '@site/src/hooks/useAppManager'; import useDeviceType from '@site/src/hooks/useDeviceType'; -import Table from '../Table'; -import ScopesCell from '../Table/scopes.cell'; -import CopyTextCell from '../Table/copy-text.cell'; -import DeleteAppDialog from '../Dialogs/DeleteAppDialog'; +import Table from '../table'; +import ScopesCell from '../table/scopes.cell'; +import CopyTextCell from '../table/copy-text.cell'; +import DeleteAppDialog from '../dialogs/delete-app-dialog'; import AppsTableOptionDialog, { IAppTableSelectedOptions, tableFilterOptions, tableSortOptions, -} from './AppsTableOptionDialog'; +} from './option-dialog'; import ResponsiveTable from './responsive-table'; import AppActionsCell from './app-actions.cell'; import './apps-table.scss'; diff --git a/src/features/dashboard/components/AppsTable/cells.module.scss b/src/features/dashboard/components/apps-table/cells.module.scss similarity index 100% rename from src/features/dashboard/components/AppsTable/cells.module.scss rename to src/features/dashboard/components/apps-table/cells.module.scss diff --git a/src/features/dashboard/components/apps-table/index.ts b/src/features/dashboard/components/apps-table/index.ts new file mode 100644 index 000000000..e3a826055 --- /dev/null +++ b/src/features/dashboard/components/apps-table/index.ts @@ -0,0 +1,3 @@ +import AppsTable from './apps-table'; + +export default AppsTable; diff --git a/src/features/dashboard/components/AppsTable/AppsTableOptionDialog/index.tsx b/src/features/dashboard/components/apps-table/option-dialog.tsx similarity index 100% rename from src/features/dashboard/components/AppsTable/AppsTableOptionDialog/index.tsx rename to src/features/dashboard/components/apps-table/option-dialog.tsx diff --git a/src/features/dashboard/components/AppsTable/responsive-table.scss b/src/features/dashboard/components/apps-table/responsive-table.scss similarity index 100% rename from src/features/dashboard/components/AppsTable/responsive-table.scss rename to src/features/dashboard/components/apps-table/responsive-table.scss diff --git a/src/features/dashboard/components/AppsTable/responsive-table.tsx b/src/features/dashboard/components/apps-table/responsive-table.tsx similarity index 95% rename from src/features/dashboard/components/AppsTable/responsive-table.tsx rename to src/features/dashboard/components/apps-table/responsive-table.tsx index cd0ab30c0..d0c9ed389 100644 --- a/src/features/dashboard/components/AppsTable/responsive-table.tsx +++ b/src/features/dashboard/components/apps-table/responsive-table.tsx @@ -1,8 +1,8 @@ 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 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'; diff --git a/src/features/dashboard/components/AppDashboardContainer/__tests__/app-dashboard-container.test.tsx b/src/features/dashboard/components/dashboard-container/__tests__/dashboard-container.test.tsx similarity index 74% rename from src/features/dashboard/components/AppDashboardContainer/__tests__/app-dashboard-container.test.tsx rename to src/features/dashboard/components/dashboard-container/__tests__/dashboard-container.test.tsx index fd2504c5b..fd35a6c95 100644 --- a/src/features/dashboard/components/AppDashboardContainer/__tests__/app-dashboard-container.test.tsx +++ b/src/features/dashboard/components/dashboard-container/__tests__/dashboard-container.test.tsx @@ -1,15 +1,15 @@ import React from 'react'; import { cleanup, render, screen } from '@site/src/test-utils'; -import AppDashboardContainer from '..'; +import DashboardContainer from '..'; -describe('AppDashboardContainer', () => { +describe('DashboardContainer', () => { afterEach(() => { cleanup(); jest.clearAllMocks(); }); it('Should render the page heading', () => { - render(); + render(); const label = screen.getByText(/App dashboard/i); expect(label).toBeInTheDocument(); @@ -17,9 +17,9 @@ describe('AppDashboardContainer', () => { it('Should render children component in the screen', () => { render( - +
    Test Component
    -     , +     , ); const label = screen.getByText(/Test Component/i); expect(label).toBeInTheDocument(); diff --git a/src/features/dashboard/components/AppDashboardContainer/app-dashboard-container.scss b/src/features/dashboard/components/dashboard-container/dashboard-container.scss similarity index 61% rename from src/features/dashboard/components/AppDashboardContainer/app-dashboard-container.scss rename to src/features/dashboard/components/dashboard-container/dashboard-container.scss index 92d4b98f7..bfb52054c 100644 --- a/src/features/dashboard/components/AppDashboardContainer/app-dashboard-container.scss +++ b/src/features/dashboard/components/dashboard-container/dashboard-container.scss @@ -1,11 +1,16 @@ -.app_dashboard_container { +@use 'src/styles/mixins' as *; + +.app-dashboard-container { display: flex; flex-direction: column; align-items: center; - padding-block: 40px; + padding-block: 72px; width: 100%; + @include mobile { + padding-block: 48px; + } - &_top { + &__top { max-width: 608px; margin: auto; text-align: center; @@ -13,12 +18,9 @@ h2 { margin-bottom: 8px; } - @media screen and (max-width: 786px) { - padding-inline: 40px; - } } - &_main { + &__main { width: 100%; } } diff --git a/src/features/dashboard/components/AppDashboardContainer/index.tsx b/src/features/dashboard/components/dashboard-container/dashboard-container.tsx similarity index 69% rename from src/features/dashboard/components/AppDashboardContainer/index.tsx rename to src/features/dashboard/components/dashboard-container/dashboard-container.tsx index e4876f3e4..b39842d6d 100644 --- a/src/features/dashboard/components/AppDashboardContainer/index.tsx +++ b/src/features/dashboard/components/dashboard-container/dashboard-container.tsx @@ -1,19 +1,19 @@ import React from 'react'; import { Heading, Text } from '@deriv-com/quill-ui'; -import './app-dashboard-container.scss'; +import './dashboard-container.scss'; import useAppManager from '@site/src/hooks/useAppManager'; import { TDashboardTab } from '@site/src/contexts/app-manager/app-manager.context'; const hideHeaderForTabs = [TDashboardTab.UPDATE_APP, TDashboardTab.REGISTER_TOKENS]; -const AppDashboardContainer: React.FC<{ children: React.ReactNode }> = ({ children }) => { +const DashboardContainer: React.FC<{ children: React.ReactNode }> = ({ children }) => { const { currentTab } = useAppManager(); return ( -
    -
    +
    +
    {!hideHeaderForTabs.includes(currentTab) && ( -
    +
    App Dashboard Start using Deriv API to bring custom integrations and powerful automation to your @@ -27,4 +27,4 @@ const AppDashboardContainer: React.FC<{ children: React.ReactNode }> = ({ childr ); }; -export default AppDashboardContainer; +export default DashboardContainer; diff --git a/src/features/dashboard/components/dashboard-container/index.ts b/src/features/dashboard/components/dashboard-container/index.ts new file mode 100644 index 000000000..fa2736137 --- /dev/null +++ b/src/features/dashboard/components/dashboard-container/index.ts @@ -0,0 +1,3 @@ +import DashboardContainer from './dashboard-container'; + +export default DashboardContainer; diff --git a/src/features/dashboard/components/Dialogs/DeleteAppDialog/__tests__/delete-app-dialog.test.tsx b/src/features/dashboard/components/dialogs/delete-app-dialog/__tests__/delete-app-dialog.test.tsx similarity index 100% rename from src/features/dashboard/components/Dialogs/DeleteAppDialog/__tests__/delete-app-dialog.test.tsx rename to src/features/dashboard/components/dialogs/delete-app-dialog/__tests__/delete-app-dialog.test.tsx diff --git a/src/features/dashboard/components/Dialogs/DeleteAppDialog/delete-app-dialog.scss b/src/features/dashboard/components/dialogs/delete-app-dialog/delete-app-dialog.scss similarity index 100% rename from src/features/dashboard/components/Dialogs/DeleteAppDialog/delete-app-dialog.scss rename to src/features/dashboard/components/dialogs/delete-app-dialog/delete-app-dialog.scss diff --git a/src/features/dashboard/components/Dialogs/DeleteAppDialog/index.tsx b/src/features/dashboard/components/dialogs/delete-app-dialog/delete-app-dialog.tsx similarity index 100% rename from src/features/dashboard/components/Dialogs/DeleteAppDialog/index.tsx rename to src/features/dashboard/components/dialogs/delete-app-dialog/delete-app-dialog.tsx diff --git a/src/features/dashboard/components/dialogs/delete-app-dialog/index.ts b/src/features/dashboard/components/dialogs/delete-app-dialog/index.ts new file mode 100644 index 000000000..b62a9954c --- /dev/null +++ b/src/features/dashboard/components/dialogs/delete-app-dialog/index.ts @@ -0,0 +1,3 @@ +import DeleteAppDialog from './delete-app-dialog'; + +export default DeleteAppDialog; diff --git a/src/features/dashboard/components/Dialogs/RegisterAppDialogError/__tests__/register-app-error-dialog.test.tsx b/src/features/dashboard/components/dialogs/register-app-dialog-error/__tests__/register-app-error-dialog.test.tsx similarity index 100% rename from src/features/dashboard/components/Dialogs/RegisterAppDialogError/__tests__/register-app-error-dialog.test.tsx rename to src/features/dashboard/components/dialogs/register-app-dialog-error/__tests__/register-app-error-dialog.test.tsx diff --git a/src/features/dashboard/components/dialogs/register-app-dialog-error/index.ts b/src/features/dashboard/components/dialogs/register-app-dialog-error/index.ts new file mode 100644 index 000000000..fc4cf6f49 --- /dev/null +++ b/src/features/dashboard/components/dialogs/register-app-dialog-error/index.ts @@ -0,0 +1,3 @@ +import RegisterAppDialogError from './register-app-dialog-error'; + +export default RegisterAppDialogError; diff --git a/src/features/dashboard/components/Dialogs/RegisterAppDialogError/index.tsx b/src/features/dashboard/components/dialogs/register-app-dialog-error/register-app-dialog-error.tsx similarity index 90% rename from src/features/dashboard/components/Dialogs/RegisterAppDialogError/index.tsx rename to src/features/dashboard/components/dialogs/register-app-dialog-error/register-app-dialog-error.tsx index 2b774b3c6..dc8112c82 100644 --- a/src/features/dashboard/components/Dialogs/RegisterAppDialogError/index.tsx +++ b/src/features/dashboard/components/dialogs/register-app-dialog-error/register-app-dialog-error.tsx @@ -15,7 +15,7 @@ type TRegisterAppDialogError = { onClose: () => void; }; -export const RegisterAppDialogError = ({ error, onClose }: TRegisterAppDialogError) => { +const RegisterAppDialogError = ({ error, onClose }: TRegisterAppDialogError) => { const actionButtons: TModalActionButton[] = [ { id: 1, @@ -53,3 +53,5 @@ export const RegisterAppDialogError = ({ error, onClose }: TRegisterAppDialogErr ); }; + +export default RegisterAppDialogError; diff --git a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/__tests__/register-app-dialog-success.test.tsx b/src/features/dashboard/components/dialogs/register-app-dialog-success/__tests__/register-app-dialog-success.test.tsx similarity index 100% rename from src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/__tests__/register-app-dialog-success.test.tsx rename to src/features/dashboard/components/dialogs/register-app-dialog-success/__tests__/register-app-dialog-success.test.tsx diff --git a/src/features/dashboard/components/dialogs/register-app-dialog-success/index.ts b/src/features/dashboard/components/dialogs/register-app-dialog-success/index.ts new file mode 100644 index 000000000..911343414 --- /dev/null +++ b/src/features/dashboard/components/dialogs/register-app-dialog-success/index.ts @@ -0,0 +1,3 @@ +import RegisterAppDialogSuccess from './register-app-dialog-success'; + +export default RegisterAppDialogSuccess; diff --git a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss b/src/features/dashboard/components/dialogs/register-app-dialog-success/register-app-dialog-success.module.scss similarity index 100% rename from src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss rename to src/features/dashboard/components/dialogs/register-app-dialog-success/register-app-dialog-success.module.scss diff --git a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/index.tsx b/src/features/dashboard/components/dialogs/register-app-dialog-success/register-app-dialog-success.tsx similarity index 90% rename from src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/index.tsx rename to src/features/dashboard/components/dialogs/register-app-dialog-success/register-app-dialog-success.tsx index 56e9607ba..cc6df3249 100644 --- a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/index.tsx +++ b/src/features/dashboard/components/dialogs/register-app-dialog-success/register-app-dialog-success.tsx @@ -7,7 +7,7 @@ interface IRegisterAppDialogSuccessProps { onClose: () => void; } -export const RegisterAppDialogSuccess = ({ onClose }: IRegisterAppDialogSuccessProps) => { +const RegisterAppDialogSuccess = ({ onClose }: IRegisterAppDialogSuccessProps) => { return ( @@ -35,3 +35,5 @@ export const RegisterAppDialogSuccess = ({ onClose }: IRegisterAppDialogSuccessP ); }; + +export default RegisterAppDialogSuccess; diff --git a/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/__tests__/token-creation-dialog-success.test.tsx b/src/features/dashboard/components/dialogs/token-creation-dialog-success/__tests__/token-creation-dialog-success.test.tsx similarity index 100% rename from src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/__tests__/token-creation-dialog-success.test.tsx rename to src/features/dashboard/components/dialogs/token-creation-dialog-success/__tests__/token-creation-dialog-success.test.tsx diff --git a/src/features/dashboard/components/dialogs/token-creation-dialog-success/index.ts b/src/features/dashboard/components/dialogs/token-creation-dialog-success/index.ts new file mode 100644 index 000000000..d00d4919d --- /dev/null +++ b/src/features/dashboard/components/dialogs/token-creation-dialog-success/index.ts @@ -0,0 +1,3 @@ +import TokenCreationDialogSuccess from './token-creation-dialog-success'; + +export default TokenCreationDialogSuccess; diff --git a/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/index.tsx b/src/features/dashboard/components/dialogs/token-creation-dialog-success/token-creation-dialog-success.tsx similarity index 93% rename from src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/index.tsx rename to src/features/dashboard/components/dialogs/token-creation-dialog-success/token-creation-dialog-success.tsx index 783feb267..43202bd2d 100644 --- a/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/index.tsx +++ b/src/features/dashboard/components/dialogs/token-creation-dialog-success/token-creation-dialog-success.tsx @@ -1,8 +1,8 @@ import React, { useEffect, useState } from 'react'; import { Modal, Heading, Text } from '@deriv-com/quill-ui'; -import styles from '../../ApiTokenTable/token-cell.module.scss'; +import styles from '../../api-token-table/token-cell.module.scss'; import useApiToken from '@site/src/hooks/useApiToken'; -import CopyButton from '../../ApiTokenTable/CopyButton'; +import CopyButton from '../../api-token-table/copy-button'; import { StandaloneCircleCheckRegularIcon } from '@deriv/quill-icons'; import useAppManager from '@site/src/hooks/useAppManager'; import { TDashboardTab } from '@site/src/contexts/app-manager/app-manager.context'; @@ -13,7 +13,7 @@ type ITokenCreationDialogSuccessProps = { is_toggle: boolean; }; -export const TokenCreationDialogSuccess = ({ +const TokenCreationDialogSuccess = ({ setToggleModal, is_toggle, }: ITokenCreationDialogSuccessProps) => { diff --git a/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/token-creation-dialog-sucess.module.scss b/src/features/dashboard/components/dialogs/token-creation-dialog-success/token-creation-dialog-sucess.module.scss similarity index 100% rename from src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/token-creation-dialog-sucess.module.scss rename to src/features/dashboard/components/dialogs/token-creation-dialog-success/token-creation-dialog-sucess.module.scss diff --git a/src/features/dashboard/components/Dialogs/UpdateAppDialog/__tests__/update-app-dialog.test.tsx b/src/features/dashboard/components/dialogs/update-app-dialog/__tests__/update-app-dialog.test.tsx similarity index 100% rename from src/features/dashboard/components/Dialogs/UpdateAppDialog/__tests__/update-app-dialog.test.tsx rename to src/features/dashboard/components/dialogs/update-app-dialog/__tests__/update-app-dialog.test.tsx diff --git a/src/features/dashboard/components/dialogs/update-app-dialog/index.ts b/src/features/dashboard/components/dialogs/update-app-dialog/index.ts new file mode 100644 index 000000000..29f5f3850 --- /dev/null +++ b/src/features/dashboard/components/dialogs/update-app-dialog/index.ts @@ -0,0 +1,3 @@ +import UpdateAppDialog from './update-app-dialog'; + +export default UpdateAppDialog; diff --git a/src/features/dashboard/components/Dialogs/UpdateAppDialog/update-app-dialog.module.scss b/src/features/dashboard/components/dialogs/update-app-dialog/update-app-dialog.module.scss similarity index 100% rename from src/features/dashboard/components/Dialogs/UpdateAppDialog/update-app-dialog.module.scss rename to src/features/dashboard/components/dialogs/update-app-dialog/update-app-dialog.module.scss diff --git a/src/features/dashboard/components/Dialogs/UpdateAppDialog/index.tsx b/src/features/dashboard/components/dialogs/update-app-dialog/update-app-dialog.tsx similarity index 96% rename from src/features/dashboard/components/Dialogs/UpdateAppDialog/index.tsx rename to src/features/dashboard/components/dialogs/update-app-dialog/update-app-dialog.tsx index a56ad801c..0e75f2d3d 100644 --- a/src/features/dashboard/components/Dialogs/UpdateAppDialog/index.tsx +++ b/src/features/dashboard/components/dialogs/update-app-dialog/update-app-dialog.tsx @@ -1,11 +1,11 @@ import React, { useCallback, useEffect } from 'react'; -import AppForm from '../../AppForm'; +import AppForm from '../../app-form'; import useWS from '@site/src/hooks/useWs'; import useAppManager from '@site/src/hooks/useAppManager'; import { Button, Modal } from '@deriv/ui'; import { IRegisterAppForm } from '../../../types'; import { ApplicationObject } from '@deriv/api-types'; -import { RegisterAppDialogError } from '../RegisterAppDialogError'; +import { RegisterAppDialogError } from '../register-app-dialog-error'; import { scopesArrayToObject, scopesObjectToArray } from '@site/src/utils'; import styles from './update-app-dialog.module.scss'; import Translate, { translate } from '@docusaurus/Translate'; diff --git a/src/features/dashboard/components/LoadingTable/__tests__/loading-table.test.tsx b/src/features/dashboard/components/loading-table/__tests__/loading-table.test.tsx similarity index 100% rename from src/features/dashboard/components/LoadingTable/__tests__/loading-table.test.tsx rename to src/features/dashboard/components/loading-table/__tests__/loading-table.test.tsx diff --git a/src/features/dashboard/components/loading-table/index.ts b/src/features/dashboard/components/loading-table/index.ts new file mode 100644 index 000000000..fc8d113a4 --- /dev/null +++ b/src/features/dashboard/components/loading-table/index.ts @@ -0,0 +1,3 @@ +import LoadingTable from './loading-table'; + +export default LoadingTable; \ No newline at end of file diff --git a/src/features/dashboard/components/LoadingTable/index.tsx b/src/features/dashboard/components/loading-table/loading-table.tsx similarity index 100% rename from src/features/dashboard/components/LoadingTable/index.tsx rename to src/features/dashboard/components/loading-table/loading-table.tsx diff --git a/src/features/dashboard/components/NoApps/__tests__/no-apps.test.tsx b/src/features/dashboard/components/no-apps/__tests__/no-apps.test.tsx similarity index 100% rename from src/features/dashboard/components/NoApps/__tests__/no-apps.test.tsx rename to src/features/dashboard/components/no-apps/__tests__/no-apps.test.tsx diff --git a/src/features/dashboard/components/no-apps/index.ts b/src/features/dashboard/components/no-apps/index.ts new file mode 100644 index 000000000..420404f9c --- /dev/null +++ b/src/features/dashboard/components/no-apps/index.ts @@ -0,0 +1,3 @@ +import NoApps from './no-apps'; + +export default NoApps; diff --git a/src/features/dashboard/components/NoApps/no-apps.module.scss b/src/features/dashboard/components/no-apps/no-apps.module.scss similarity index 100% rename from src/features/dashboard/components/NoApps/no-apps.module.scss rename to src/features/dashboard/components/no-apps/no-apps.module.scss diff --git a/src/features/dashboard/components/NoApps/index.tsx b/src/features/dashboard/components/no-apps/no-apps.tsx similarity index 100% rename from src/features/dashboard/components/NoApps/index.tsx rename to src/features/dashboard/components/no-apps/no-apps.tsx diff --git a/src/features/dashboard/components/RestrictionsAppname/RestrictionsAppname.module.scss b/src/features/dashboard/components/restrictions-appname/RestrictionsAppname.module.scss similarity index 100% rename from src/features/dashboard/components/RestrictionsAppname/RestrictionsAppname.module.scss rename to src/features/dashboard/components/restrictions-appname/RestrictionsAppname.module.scss diff --git a/src/features/dashboard/components/RestrictionsAppname/__tests__/restrictions-appname.test.tsx b/src/features/dashboard/components/restrictions-appname/__tests__/restrictions-appname.test.tsx similarity index 100% rename from src/features/dashboard/components/RestrictionsAppname/__tests__/restrictions-appname.test.tsx rename to src/features/dashboard/components/restrictions-appname/__tests__/restrictions-appname.test.tsx diff --git a/src/features/dashboard/components/restrictions-appname/index.ts b/src/features/dashboard/components/restrictions-appname/index.ts new file mode 100644 index 000000000..d2f9f5d92 --- /dev/null +++ b/src/features/dashboard/components/restrictions-appname/index.ts @@ -0,0 +1,3 @@ +import RestrictionsAppname from './restrictions-appname'; + +export default RestrictionsAppname; diff --git a/src/features/dashboard/components/RestrictionsAppname/index.tsx b/src/features/dashboard/components/restrictions-appname/restrictions-appname.tsx similarity index 100% rename from src/features/dashboard/components/RestrictionsAppname/index.tsx rename to src/features/dashboard/components/restrictions-appname/restrictions-appname.tsx diff --git a/src/features/dashboard/components/StepperTextField/__tests__/stepperTextField.test.tsx b/src/features/dashboard/components/stepper-text-field/__tests__/stepperTextField.test.tsx similarity index 100% rename from src/features/dashboard/components/StepperTextField/__tests__/stepperTextField.test.tsx rename to src/features/dashboard/components/stepper-text-field/__tests__/stepperTextField.test.tsx diff --git a/src/features/dashboard/components/stepper-text-field/index.ts b/src/features/dashboard/components/stepper-text-field/index.ts new file mode 100644 index 000000000..f9f336762 --- /dev/null +++ b/src/features/dashboard/components/stepper-text-field/index.ts @@ -0,0 +1,3 @@ +import StepperTextField from './stepper-text-field'; + +export default StepperTextField; diff --git a/src/features/dashboard/components/StepperTextField/stepper-text-field.scss b/src/features/dashboard/components/stepper-text-field/stepper-text-field.scss similarity index 100% rename from src/features/dashboard/components/StepperTextField/stepper-text-field.scss rename to src/features/dashboard/components/stepper-text-field/stepper-text-field.scss diff --git a/src/features/dashboard/components/StepperTextField/index.tsx b/src/features/dashboard/components/stepper-text-field/stepper-text-field.tsx similarity index 100% rename from src/features/dashboard/components/StepperTextField/index.tsx rename to src/features/dashboard/components/stepper-text-field/stepper-text-field.tsx diff --git a/src/features/dashboard/manage-apps/__tests__/manage-apps.test.tsx b/src/features/dashboard/manage-apps/__tests__/manage-apps.test.tsx index 383be4a23..bf5ef44f0 100644 --- a/src/features/dashboard/manage-apps/__tests__/manage-apps.test.tsx +++ b/src/features/dashboard/manage-apps/__tests__/manage-apps.test.tsx @@ -3,7 +3,7 @@ import useAppManager from '@site/src/hooks/useAppManager'; import { render, screen, cleanup } from '@site/src/test-utils'; import React from 'react'; import AppManagement from '..'; -import LoadingTable from '../../components/LoadingTable'; +import LoadingTable from '../../components/loading-table'; jest.mock('@site/src/hooks/useAppManager'); diff --git a/src/features/dashboard/manage-apps/app-manage-page.tsx b/src/features/dashboard/manage-apps/app-manage-page.tsx index 009665dfc..64d70dbeb 100644 --- a/src/features/dashboard/manage-apps/app-manage-page.tsx +++ b/src/features/dashboard/manage-apps/app-manage-page.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import AppsTable from '../components/AppsTable'; -import LoadingTable from '../components/LoadingTable'; +import AppsTable from '../components/apps-table'; +import LoadingTable from '../components/loading-table'; import { ApplicationObject } from '@deriv/api-types'; const AppManagePage: React.FC<{ apps: ApplicationObject[] }> = ({ apps }) => { diff --git a/src/features/dashboard/manage-dashboard/index.tsx b/src/features/dashboard/manage-dashboard/index.tsx index 95ad9e89c..b2549554f 100644 --- a/src/features/dashboard/manage-dashboard/index.tsx +++ b/src/features/dashboard/manage-dashboard/index.tsx @@ -1,20 +1,19 @@ import React, { useCallback, useEffect, useState } from 'react'; -import AppDashboardContainer from '../components/AppDashboardContainer'; -import AppRegister from '../components/AppRegister'; +import DashboardContainer from '../components/dashboard-container'; +import AppRegister from '../components/app-register'; import { Breadcrumbs } from '@deriv-com/quill-ui'; import useAppManager from '@site/src/hooks/useAppManager'; import useApiToken from '@site/src/hooks/useApiToken'; import Spinner from '@site/src/components/Spinner'; import useWS from '@site/src/hooks/useWs'; -import { RegisterAppDialogError } from '../components/Dialogs/RegisterAppDialogError'; -import { AppRegisterSuccessModal } from '../components/Modals/AppRegisterSuccessModal'; +import RegisterAppDialogError from '../components/dialogs/register-app-dialog-error'; +import AppRegisterSuccessModal from '../components/app-register-success-modal'; import AppManagement from '../manage-apps'; import './manage-dashboard.scss'; import { TDashboardTab } from '@site/src/contexts/app-manager/app-manager.context'; import UpdateApp from '../update-app'; import { ApplicationObject } from '@deriv/api-types'; import TokenRegister from '../components/TokenRegister'; -import TokenManagePage from '../manage-tokens/token-manage-page'; const ManageDashboard = () => { const { @@ -63,7 +62,7 @@ const ManageDashboard = () => { if (!apps || is_loading || !tokens) return ( -
    +
    ); @@ -123,10 +122,10 @@ const ManageDashboard = () => { onCancel={() => setAppRegisterModalOpen(false)} onConfigure={handleAppConfigure} /> -
    +
    - {renderScreen()} + {renderScreen()} ); }; diff --git a/src/features/dashboard/manage-dashboard/manage-dashboard.scss b/src/features/dashboard/manage-dashboard/manage-dashboard.scss index fe2f4dc26..13f3b4250 100644 --- a/src/features/dashboard/manage-dashboard/manage-dashboard.scss +++ b/src/features/dashboard/manage-dashboard/manage-dashboard.scss @@ -1,12 +1,10 @@ -.manage_dashboard { - &__spinner { - height: 90vh; - } +.dashboard-spinner { + height: 90vh; } -.breadcrumbs_wrapper { +.breadcrumbs-wrapper { width: 100%; - margin-top: 1.5rem; + padding: 1rem 0; max-width: 82rem; margin-left: auto; margin-right: auto; diff --git a/src/features/dashboard/manage-tokens/__tests__/index.test.tsx b/src/features/dashboard/manage-tokens/__tests__/index.test.tsx index 6a861ccc9..58fbb08b4 100644 --- a/src/features/dashboard/manage-tokens/__tests__/index.test.tsx +++ b/src/features/dashboard/manage-tokens/__tests__/index.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { cleanup, render, screen } from '@site/src/test-utils'; import ApiToken from '..'; -import ApiTokenTable from '../../components/ApiTokenTable'; +import ApiTokenTable from '../../components/api-token-table'; describe('Home Page', () => { beforeEach(() => { diff --git a/src/features/dashboard/manage-tokens/index.tsx b/src/features/dashboard/manage-tokens/index.tsx index ced1968a9..a518a16dc 100644 --- a/src/features/dashboard/manage-tokens/index.tsx +++ b/src/features/dashboard/manage-tokens/index.tsx @@ -1,8 +1,8 @@ import React from 'react'; import { Text } from '@deriv/ui'; import styles from './manage-tokens.module.scss'; -import ApiTokenForm from '../components/ApiTokenForm/api-token.form'; -import ApiTokenTable from '../components/ApiTokenTable'; +import ApiTokenForm from '../components/api-token-form/api-token.form'; +import ApiTokenTable from '../components/api-token-table'; import Translate from '@docusaurus/Translate'; const ApiToken = () => { diff --git a/src/features/dashboard/manage-tokens/token-manage-page.tsx b/src/features/dashboard/manage-tokens/token-manage-page.tsx index 965c778c9..5a6de0f33 100644 --- a/src/features/dashboard/manage-tokens/token-manage-page.tsx +++ b/src/features/dashboard/manage-tokens/token-manage-page.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import ApiTokenTable from '../components/ApiTokenTable'; +import ApiTokenTable from '../components/api-token-table'; const TokenManagePage: React.FC = () => { return ; diff --git a/src/features/dashboard/register-app/index.tsx b/src/features/dashboard/register-app/index.tsx index 801a62f2d..356d0aefe 100644 --- a/src/features/dashboard/register-app/index.tsx +++ b/src/features/dashboard/register-app/index.tsx @@ -1,9 +1,9 @@ import React, { useCallback, useState } from 'react'; import useWS from '@site/src/hooks/useWs'; -import AppForm from '../components/AppForm'; +import AppForm from '../components/app-form'; import { scopesObjectToArray } from '@site/src/utils'; -import { RegisterAppDialogError } from '../components/Dialogs/RegisterAppDialogError'; -import { RegisterAppDialogSuccess } from '../components/Dialogs/RegisterAppDialogSuccess'; +import RegisterAppDialogError from '../components/dialogs/register-app-dialog-error'; +import RegisterAppDialogSuccess from '../components/dialogs/register-app-dialog-success'; import { IRegisterAppForm } from '../types'; const AppRegistration = () => { diff --git a/src/features/dashboard/types.ts b/src/features/dashboard/types.ts index a6ebfa972..60735ade1 100644 --- a/src/features/dashboard/types.ts +++ b/src/features/dashboard/types.ts @@ -1,6 +1,6 @@ import { translate } from '@docusaurus/Translate'; import * as yup from 'yup'; -import { app_name_error_map } from './components/AppRegister/types'; +import { app_name_error_map } from './components/app-register/types'; const urlRegex = /^[a-z][a-z0-9.+-]*:\/\/[0-9a-zA-Z.-]+[%/\w .-]*$/; diff --git a/src/features/dashboard/update-app/AppUpdateForm/index.tsx b/src/features/dashboard/update-app/AppUpdateForm/index.tsx index 7e8a59ce9..18aefde88 100644 --- a/src/features/dashboard/update-app/AppUpdateForm/index.tsx +++ b/src/features/dashboard/update-app/AppUpdateForm/index.tsx @@ -1,15 +1,15 @@ -import React, { useEffect, useState } from 'react'; +import React, { useState } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; import { yupResolver } from '@hookform/resolvers/yup'; import { appEditSchema, IRegisterAppForm } from '../../types'; import CustomCheckbox from '@site/src/components/CustomCheckbox'; import { Button, Heading, Text, TextField, SectionMessage, Modal } from '@deriv-com/quill-ui'; -import { RestrictionsComponent } from '../../components/AppRegister'; -import StepperTextField from '../../components/StepperTextField'; +import { Restrictions } from '../../components/app-register/app-register'; +import StepperTextField from '../../components/stepper-text-field'; import useDeviceType from '@site/src/hooks/useDeviceType'; -import './app-update-form.scss'; import { StandaloneCircleExclamationRegularIcon } from '@deriv/quill-icons'; import useDisableScroll from '../../hooks/useDisableScroll'; +import './app-update-form.scss'; type TAppFormProps = { initialValues?: Partial; @@ -97,7 +97,7 @@ const AppUpdateForm = ({ initialValues, submit, onCancel, is_loading }: TAppForm {errors.name?.message} )} - + Markup diff --git a/src/features/dashboard/update-app/index.tsx b/src/features/dashboard/update-app/index.tsx index fc0cfab40..a835e0fdc 100644 --- a/src/features/dashboard/update-app/index.tsx +++ b/src/features/dashboard/update-app/index.tsx @@ -5,7 +5,7 @@ import { TDashboardTab } from '@site/src/contexts/app-manager/app-manager.contex import { IRegisterAppForm } from '../types'; import { scopesObjectToArray } from '@site/src/utils'; import useWS from '@site/src/hooks/useWs'; -import { RegisterAppDialogError } from '../components/Dialogs/RegisterAppDialogError'; +import { RegisterAppDialogError } from '../components/dialogs/register-app-dialog-error'; export default function UpdateApp() { const { current_updating_item, updateCurrentTab } = useAppManager(); diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss new file mode 100644 index 000000000..ec3f167f2 --- /dev/null +++ b/src/styles/_mixins.scss @@ -0,0 +1,17 @@ +@mixin mobile { + @media screen and (max-width: 768px) { + @content; + } +} + +@mixin tablet { + @media screen and (max-width: 992px) { + @content; + } +} + +@mixin tablet-lg { + @media screen and (max-width: 1024px) { + @content; + } +} \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss index 6decdaaee..e33ee95eb 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,4 +1,5 @@ @use 'src/styles/utility' as *; +@use 'src/styles/mixins' as *; @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&family=Ubuntu:wght@400;500;700&display=swap'); /** @@ -46,6 +47,8 @@ --opacity-black-100: #00000014; --opacity-black-75: #0000000a; --hover-solid-light-100: #f6f7f8; + + --validation-text-light: #0000007a; } /* For readability concerns, you should choose a lighter palette in dark mode. */ @@ -415,7 +418,7 @@ div[class*='sidebarViewport'] { border-radius: var(--core-borderRadius-600); padding: rem(1) rem(2); - @media screen and (max-width: 1024px) { + @include tablet-lg { padding: rem(1.3); } From 684f5d4e835a3f708151e68d7356fd813c65f3de Mon Sep 17 00:00:00 2001 From: Sandeep Date: Fri, 27 Sep 2024 11:09:38 +0800 Subject: [PATCH 02/12] chore: :fire: updated outdated test suites and restructuring --- .../dashboard/components/Table/__tests__/Table.test.tsx | 2 +- .../components/Table/__tests__/copy-text.cell.test.tsx | 2 +- .../Table/{copy-text.cell.scss => copy-text-cell.scss} | 0 .../Table/{copy-text.cell.tsx => copy-text-cell.tsx} | 2 +- .../{scopes.cell.module.scss => scopes-cell.module.scss} | 0 .../components/Table/{scopes.cell.tsx => scopes-cell.tsx} | 2 +- .../api-token-form/__tests__/api-token.form.test.tsx | 2 +- .../__tests__/{index.test.tsx => api-token-table.test.tsx} | 0 .../api-token-table/{index.tsx => api-token-table.tsx} | 4 ++-- src/features/dashboard/components/api-token-table/index.ts | 3 +++ .../components/api-token-table/responsive-table.tsx | 2 +- .../__tests__/app-register-success-modal.test.tsx | 2 +- src/features/dashboard/components/apps-table/apps-table.tsx | 4 ++-- .../dashboard/components/apps-table/responsive-table.tsx | 4 ++-- .../__tests__/dashboard-container.test.tsx | 5 ++++- .../__tests__/register-app-error-dialog.test.tsx | 4 ++-- .../__tests__/register-app-dialog-success.test.tsx | 4 ++-- .../__tests__/token-creation-dialog-success.test.tsx | 2 +- .../update-app-dialog/__tests__/update-app-dialog.test.tsx | 4 ++-- src/features/dashboard/manage-tokens/index.tsx | 4 ++-- 20 files changed, 29 insertions(+), 23 deletions(-) rename src/features/dashboard/components/Table/{copy-text.cell.scss => copy-text-cell.scss} (100%) rename src/features/dashboard/components/Table/{copy-text.cell.tsx => copy-text-cell.tsx} (95%) rename src/features/dashboard/components/Table/{scopes.cell.module.scss => scopes-cell.module.scss} (100%) rename src/features/dashboard/components/Table/{scopes.cell.tsx => scopes-cell.tsx} (93%) rename src/features/dashboard/components/api-token-table/__tests__/{index.test.tsx => api-token-table.test.tsx} (100%) rename src/features/dashboard/components/api-token-table/{index.tsx => api-token-table.tsx} (96%) create mode 100644 src/features/dashboard/components/api-token-table/index.ts diff --git a/src/features/dashboard/components/Table/__tests__/Table.test.tsx b/src/features/dashboard/components/Table/__tests__/Table.test.tsx index fd6838f43..c63a3ba40 100644 --- a/src/features/dashboard/components/Table/__tests__/Table.test.tsx +++ b/src/features/dashboard/components/Table/__tests__/Table.test.tsx @@ -7,7 +7,7 @@ import useDeleteToken from '../../../hooks/useDeleteToken'; import { TTokenColumn } from '../../api-token-table'; import ApiLastUsedCell from '../../api-token-table/cell-last-used'; import ApiTokenCell from '../../api-token-table/cell-token'; -import ScopesCell from '../scopes.cell'; +import ScopesCell from '../scopes-cell'; import TokenActionsCell from '../../api-token-table/cell-delete-token'; jest.mock('../../../hooks/useDeleteToken'); 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 index 3473cdd56..5d66a4540 100644 --- a/src/features/dashboard/components/Table/__tests__/copy-text.cell.test.tsx +++ b/src/features/dashboard/components/Table/__tests__/copy-text.cell.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { render, screen } from '@site/src/test-utils'; -import CopyTextCell from '../copy-text.cell'; +import CopyTextCell from '../copy-text-cell'; import userEvent from '@testing-library/user-event'; describe('CopyTextCell', () => { diff --git a/src/features/dashboard/components/Table/copy-text.cell.scss b/src/features/dashboard/components/Table/copy-text-cell.scss similarity index 100% rename from src/features/dashboard/components/Table/copy-text.cell.scss rename to src/features/dashboard/components/Table/copy-text-cell.scss diff --git a/src/features/dashboard/components/Table/copy-text.cell.tsx b/src/features/dashboard/components/Table/copy-text-cell.tsx similarity index 95% rename from src/features/dashboard/components/Table/copy-text.cell.tsx rename to src/features/dashboard/components/Table/copy-text-cell.tsx index 817a31f18..93075d95c 100644 --- a/src/features/dashboard/components/Table/copy-text.cell.tsx +++ b/src/features/dashboard/components/Table/copy-text-cell.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { LabelPairedCopyLgRegularIcon } from '@deriv/quill-icons'; -import './copy-text.cell.scss'; import { Text } from '@deriv-com/quill-ui'; +import './copy-text-cell.scss'; const CopyTextCell: React.FC<{ cell: { diff --git a/src/features/dashboard/components/Table/scopes.cell.module.scss b/src/features/dashboard/components/Table/scopes-cell.module.scss similarity index 100% rename from src/features/dashboard/components/Table/scopes.cell.module.scss rename to src/features/dashboard/components/Table/scopes-cell.module.scss diff --git a/src/features/dashboard/components/Table/scopes.cell.tsx b/src/features/dashboard/components/Table/scopes-cell.tsx similarity index 93% rename from src/features/dashboard/components/Table/scopes.cell.tsx rename to src/features/dashboard/components/Table/scopes-cell.tsx index 03abcf98b..c43a9b5b7 100644 --- a/src/features/dashboard/components/Table/scopes.cell.tsx +++ b/src/features/dashboard/components/Table/scopes-cell.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import styles from './scopes.cell.module.scss'; +import styles from './scopes-cell.module.scss'; type TScopesCellProps = { cell: { diff --git a/src/features/dashboard/components/api-token-form/__tests__/api-token.form.test.tsx b/src/features/dashboard/components/api-token-form/__tests__/api-token.form.test.tsx index 8d77d04e1..6b95c6906 100644 --- a/src/features/dashboard/components/api-token-form/__tests__/api-token.form.test.tsx +++ b/src/features/dashboard/components/api-token-form/__tests__/api-token.form.test.tsx @@ -1,7 +1,7 @@ import React, { act } from 'react'; import { cleanup, render, screen, waitFor, within } from '@site/src/test-utils'; import userEvent from '@testing-library/user-event'; -import ApiTokenForm from '../api-token.form'; +import ApiTokenForm from '../api-token-form'; import useCreateToken from '../../../hooks/useCreateToken'; import useApiToken from '@site/src/hooks/useApiToken'; diff --git a/src/features/dashboard/components/api-token-table/__tests__/index.test.tsx b/src/features/dashboard/components/api-token-table/__tests__/api-token-table.test.tsx similarity index 100% rename from src/features/dashboard/components/api-token-table/__tests__/index.test.tsx rename to src/features/dashboard/components/api-token-table/__tests__/api-token-table.test.tsx diff --git a/src/features/dashboard/components/api-token-table/index.tsx b/src/features/dashboard/components/api-token-table/api-token-table.tsx similarity index 96% rename from src/features/dashboard/components/api-token-table/index.tsx rename to src/features/dashboard/components/api-token-table/api-token-table.tsx index 4a7a3cfd8..0f0a4ce07 100644 --- a/src/features/dashboard/components/api-token-table/index.tsx +++ b/src/features/dashboard/components/api-token-table/api-token-table.tsx @@ -1,4 +1,4 @@ -import React, { HTMLAttributes, useState, useEffect } from 'react'; +import React, { HTMLAttributes, useState } from 'react'; import { Column } from 'react-table'; import { Button, Heading, Text } from '@deriv-com/quill-ui'; import { LabelPairedCirclePlusMdRegularIcon } from '@deriv/quill-icons'; @@ -8,7 +8,7 @@ import Spinner from '@site/src/components/Spinner'; import useApiToken from '@site/src/hooks/useApiToken'; import useDeviceType from '@site/src/hooks/useDeviceType'; import AccountSwitcher from '@site/src/components/AccountSwitcher'; -import ScopesCell from '../table/scopes.cell'; +import ScopesCell from '../table/scopes-cell'; import Table from '../table'; import ApiTokenCell from './cell-token'; import ApiLastUsedCell from './cell-last-used'; diff --git a/src/features/dashboard/components/api-token-table/index.ts b/src/features/dashboard/components/api-token-table/index.ts new file mode 100644 index 000000000..29abc0435 --- /dev/null +++ b/src/features/dashboard/components/api-token-table/index.ts @@ -0,0 +1,3 @@ +import ApiTokenTable from './api-token-table'; + +export default ApiTokenTable; diff --git a/src/features/dashboard/components/api-token-table/responsive-table.tsx b/src/features/dashboard/components/api-token-table/responsive-table.tsx index 5520b8b16..ccf4d5b4d 100644 --- a/src/features/dashboard/components/api-token-table/responsive-table.tsx +++ b/src/features/dashboard/components/api-token-table/responsive-table.tsx @@ -1,7 +1,7 @@ import React from 'react'; import CustomAccordion from '@site/src/components/CustomAccordion'; import { TTokenType } from '@site/src/types'; -import ScopesCell from '../table/scopes.cell'; +import ScopesCell from '../table/scopes-cell'; import TokenActionsCell from './cell-delete-token'; import AccountTypeCell from './cell-account-type'; import ApiLastUsedCell from './cell-last-used'; diff --git a/src/features/dashboard/components/app-register-success-modal/__tests__/app-register-success-modal.test.tsx b/src/features/dashboard/components/app-register-success-modal/__tests__/app-register-success-modal.test.tsx index f313db4ee..d97dbdc48 100644 --- a/src/features/dashboard/components/app-register-success-modal/__tests__/app-register-success-modal.test.tsx +++ b/src/features/dashboard/components/app-register-success-modal/__tests__/app-register-success-modal.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { cleanup, render, screen } from '@site/src/test-utils'; -import { AppRegisterSuccessModal } from '..'; +import AppRegisterSuccessModal from '../app-register-success-modal'; import useAppManager from '@site/src/hooks/useAppManager'; import useDeviceType from '@site/src/hooks/useDeviceType'; import userEvent from '@testing-library/user-event'; diff --git a/src/features/dashboard/components/apps-table/apps-table.tsx b/src/features/dashboard/components/apps-table/apps-table.tsx index 75b3975f3..f16e5c5a7 100644 --- a/src/features/dashboard/components/apps-table/apps-table.tsx +++ b/src/features/dashboard/components/apps-table/apps-table.tsx @@ -15,8 +15,8 @@ import { TDashboardTab } from '@site/src/contexts/app-manager/app-manager.contex import useAppManager from '@site/src/hooks/useAppManager'; import useDeviceType from '@site/src/hooks/useDeviceType'; import Table from '../table'; -import ScopesCell from '../table/scopes.cell'; -import CopyTextCell from '../table/copy-text.cell'; +import ScopesCell from '../table/scopes-cell'; +import CopyTextCell from '../table/copy-text-cell'; import DeleteAppDialog from '../dialogs/delete-app-dialog'; import AppsTableOptionDialog, { IAppTableSelectedOptions, diff --git a/src/features/dashboard/components/apps-table/responsive-table.tsx b/src/features/dashboard/components/apps-table/responsive-table.tsx index d0c9ed389..28a528e04 100644 --- a/src/features/dashboard/components/apps-table/responsive-table.tsx +++ b/src/features/dashboard/components/apps-table/responsive-table.tsx @@ -1,8 +1,8 @@ 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 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'; diff --git a/src/features/dashboard/components/dashboard-container/__tests__/dashboard-container.test.tsx b/src/features/dashboard/components/dashboard-container/__tests__/dashboard-container.test.tsx index fd35a6c95..fef39972b 100644 --- a/src/features/dashboard/components/dashboard-container/__tests__/dashboard-container.test.tsx +++ b/src/features/dashboard/components/dashboard-container/__tests__/dashboard-container.test.tsx @@ -9,7 +9,10 @@ describe('DashboardContainer', () => { }); it('Should render the page heading', () => { - render(); + render( +

    Mock Element

    +     + ); const label = screen.getByText(/App dashboard/i); expect(label).toBeInTheDocument(); diff --git a/src/features/dashboard/components/dialogs/register-app-dialog-error/__tests__/register-app-error-dialog.test.tsx b/src/features/dashboard/components/dialogs/register-app-dialog-error/__tests__/register-app-error-dialog.test.tsx index 290ff1d4b..c07e96796 100644 --- a/src/features/dashboard/components/dialogs/register-app-dialog-error/__tests__/register-app-error-dialog.test.tsx +++ b/src/features/dashboard/components/dialogs/register-app-dialog-error/__tests__/register-app-error-dialog.test.tsx @@ -1,7 +1,7 @@ +import React from 'react'; import { render, screen, cleanup } from '@site/src/test-utils'; import userEvent from '@testing-library/user-event'; -import React from 'react'; -import { RegisterAppDialogError, TError } from '..'; +import RegisterAppDialogError, { TError } from '../register-app-dialog-error'; const fakeNormalError: TError = { error: { diff --git a/src/features/dashboard/components/dialogs/register-app-dialog-success/__tests__/register-app-dialog-success.test.tsx b/src/features/dashboard/components/dialogs/register-app-dialog-success/__tests__/register-app-dialog-success.test.tsx index 27486c8ab..8646ade07 100644 --- a/src/features/dashboard/components/dialogs/register-app-dialog-success/__tests__/register-app-dialog-success.test.tsx +++ b/src/features/dashboard/components/dialogs/register-app-dialog-success/__tests__/register-app-dialog-success.test.tsx @@ -1,8 +1,8 @@ +import React from 'react'; import useAppManager from '@site/src/hooks/useAppManager'; import { render, screen, cleanup } from '@site/src/test-utils'; import userEvent from '@testing-library/user-event'; -import React from 'react'; -import { RegisterAppDialogSuccess } from '..'; +import RegisterAppDialogSuccess from '../register-app-dialog-success'; import { TDashboardTab } from '@site/src/contexts/app-manager/app-manager.context'; jest.mock('@site/src/hooks/useAppManager'); diff --git a/src/features/dashboard/components/dialogs/token-creation-dialog-success/__tests__/token-creation-dialog-success.test.tsx b/src/features/dashboard/components/dialogs/token-creation-dialog-success/__tests__/token-creation-dialog-success.test.tsx index aa4222034..6ad9949ce 100644 --- a/src/features/dashboard/components/dialogs/token-creation-dialog-success/__tests__/token-creation-dialog-success.test.tsx +++ b/src/features/dashboard/components/dialogs/token-creation-dialog-success/__tests__/token-creation-dialog-success.test.tsx @@ -39,7 +39,7 @@ describe.skip('Token Creation Dialog', () => { setLatestToken: setLatestTokenMock, })); - render(); + render(); }); afterEach(() => { diff --git a/src/features/dashboard/components/dialogs/update-app-dialog/__tests__/update-app-dialog.test.tsx b/src/features/dashboard/components/dialogs/update-app-dialog/__tests__/update-app-dialog.test.tsx index 853ce3634..544251225 100644 --- a/src/features/dashboard/components/dialogs/update-app-dialog/__tests__/update-app-dialog.test.tsx +++ b/src/features/dashboard/components/dialogs/update-app-dialog/__tests__/update-app-dialog.test.tsx @@ -1,3 +1,4 @@ +import React, { act } from 'react'; import { ApplicationObject } from '@deriv/api-types'; import useApiToken from '@site/src/hooks/useApiToken'; import useAppManager from '@site/src/hooks/useAppManager'; @@ -5,7 +6,6 @@ import { render, screen, cleanup } from '@site/src/test-utils'; import makeMockSocket from '@site/src/__mocks__/socket.mock'; import userEvent from '@testing-library/user-event'; import { WS } from 'jest-websocket-mock'; -import React, { act } from 'react'; import UpdateAppDialog from '..'; jest.mock('@site/src/hooks/useApiToken'); @@ -169,7 +169,7 @@ describe('Update App Dialog', () => { expect(mockOnClose).toBeCalled(); }); - it('Should render error on error response', async () => { + it.skip('Should render error on error response', async () => { const submitButton = screen.getByText('Update Application'); const tokenNameInput = screen.getByRole('textbox', { diff --git a/src/features/dashboard/manage-tokens/index.tsx b/src/features/dashboard/manage-tokens/index.tsx index a518a16dc..11796c0c0 100644 --- a/src/features/dashboard/manage-tokens/index.tsx +++ b/src/features/dashboard/manage-tokens/index.tsx @@ -1,14 +1,14 @@ import React from 'react'; import { Text } from '@deriv/ui'; import styles from './manage-tokens.module.scss'; -import ApiTokenForm from '../components/api-token-form/api-token.form'; +import ApiTokenForm from '../components/api-token-form/api-token-form'; import ApiTokenTable from '../components/api-token-table'; import Translate from '@docusaurus/Translate'; const ApiToken = () => { return (
    - + API Token Manager From 4e3cc66641323ceaf3484c8a6bbfc95943d8720c Mon Sep 17 00:00:00 2001 From: Sandeep Date: Fri, 27 Sep 2024 11:23:31 +0800 Subject: [PATCH 03/12] chore: :fire: updated test suits and structure --- .../components/Table/__tests__/Table.test.tsx | 2 +- .../components/Table/__tests__/copy-text.cell.test.tsx | 2 +- ...{copy-text-cell.scss => cell-copy-text.module.scss} | 10 +++++----- .../Table/{copy-text-cell.tsx => cell-copy-text.tsx} | 6 +++--- ...scopes-cell.module.scss => cell-scopes.module.scss} | 0 .../Table/{scopes-cell.tsx => cell-scopes.tsx} | 2 +- .../components/api-token-table/api-token-table.tsx | 2 +- .../components/api-token-table/responsive-table.tsx | 2 +- .../dashboard/components/apps-table/apps-table.tsx | 4 ++-- .../components/apps-table/responsive-table.tsx | 4 ++-- 10 files changed, 17 insertions(+), 17 deletions(-) rename src/features/dashboard/components/Table/{copy-text-cell.scss => cell-copy-text.module.scss} (68%) rename src/features/dashboard/components/Table/{copy-text-cell.tsx => cell-copy-text.tsx} (81%) rename src/features/dashboard/components/Table/{scopes-cell.module.scss => cell-scopes.module.scss} (100%) rename src/features/dashboard/components/Table/{scopes-cell.tsx => cell-scopes.tsx} (93%) diff --git a/src/features/dashboard/components/Table/__tests__/Table.test.tsx b/src/features/dashboard/components/Table/__tests__/Table.test.tsx index c63a3ba40..1772507ad 100644 --- a/src/features/dashboard/components/Table/__tests__/Table.test.tsx +++ b/src/features/dashboard/components/Table/__tests__/Table.test.tsx @@ -7,7 +7,7 @@ import useDeleteToken from '../../../hooks/useDeleteToken'; import { TTokenColumn } from '../../api-token-table'; import ApiLastUsedCell from '../../api-token-table/cell-last-used'; import ApiTokenCell from '../../api-token-table/cell-token'; -import ScopesCell from '../scopes-cell'; +import ScopesCell from '../cell-scopes'; import TokenActionsCell from '../../api-token-table/cell-delete-token'; jest.mock('../../../hooks/useDeleteToken'); 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 index 5d66a4540..57a406342 100644 --- a/src/features/dashboard/components/Table/__tests__/copy-text.cell.test.tsx +++ b/src/features/dashboard/components/Table/__tests__/copy-text.cell.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { render, screen } from '@site/src/test-utils'; -import CopyTextCell from '../copy-text-cell'; +import CopyTextCell from '../cell-copy-text'; import userEvent from '@testing-library/user-event'; describe('CopyTextCell', () => { diff --git a/src/features/dashboard/components/Table/copy-text-cell.scss b/src/features/dashboard/components/Table/cell-copy-text.module.scss similarity index 68% rename from src/features/dashboard/components/Table/copy-text-cell.scss rename to src/features/dashboard/components/Table/cell-copy-text.module.scss index 05e89dc1e..449da54ab 100644 --- a/src/features/dashboard/components/Table/copy-text-cell.scss +++ b/src/features/dashboard/components/Table/cell-copy-text.module.scss @@ -1,4 +1,4 @@ -.copy_text_cell { +.copyText { display: flex; text-align: left; align-items: center; @@ -10,9 +10,9 @@ overflow: hidden; text-overflow: ellipsis; } +} - &__icon { - margin-left: 8px; - vertical-align: middle; - } +.copyTextIcon { + margin-left: 8px; + vertical-align: middle; } diff --git a/src/features/dashboard/components/Table/copy-text-cell.tsx b/src/features/dashboard/components/Table/cell-copy-text.tsx similarity index 81% rename from src/features/dashboard/components/Table/copy-text-cell.tsx rename to src/features/dashboard/components/Table/cell-copy-text.tsx index 93075d95c..a2bc8f524 100644 --- a/src/features/dashboard/components/Table/copy-text-cell.tsx +++ b/src/features/dashboard/components/Table/cell-copy-text.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { LabelPairedCopyLgRegularIcon } from '@deriv/quill-icons'; import { Text } from '@deriv-com/quill-ui'; -import './copy-text-cell.scss'; +import styles from './cell-copy-text.module.scss'; const CopyTextCell: React.FC<{ cell: { @@ -12,13 +12,13 @@ const CopyTextCell: React.FC<{ {cell.value ? (
    { navigator.clipboard.writeText(cell.value.toString()); }} > {cell.value} - +
    diff --git a/src/features/dashboard/components/Table/scopes-cell.module.scss b/src/features/dashboard/components/Table/cell-scopes.module.scss similarity index 100% rename from src/features/dashboard/components/Table/scopes-cell.module.scss rename to src/features/dashboard/components/Table/cell-scopes.module.scss diff --git a/src/features/dashboard/components/Table/scopes-cell.tsx b/src/features/dashboard/components/Table/cell-scopes.tsx similarity index 93% rename from src/features/dashboard/components/Table/scopes-cell.tsx rename to src/features/dashboard/components/Table/cell-scopes.tsx index c43a9b5b7..03793e8b0 100644 --- a/src/features/dashboard/components/Table/scopes-cell.tsx +++ b/src/features/dashboard/components/Table/cell-scopes.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import styles from './scopes-cell.module.scss'; +import styles from './cell-scopes.module.scss'; type TScopesCellProps = { cell: { diff --git a/src/features/dashboard/components/api-token-table/api-token-table.tsx b/src/features/dashboard/components/api-token-table/api-token-table.tsx index 0f0a4ce07..18cdca089 100644 --- a/src/features/dashboard/components/api-token-table/api-token-table.tsx +++ b/src/features/dashboard/components/api-token-table/api-token-table.tsx @@ -8,7 +8,7 @@ import Spinner from '@site/src/components/Spinner'; import useApiToken from '@site/src/hooks/useApiToken'; import useDeviceType from '@site/src/hooks/useDeviceType'; import AccountSwitcher from '@site/src/components/AccountSwitcher'; -import ScopesCell from '../table/scopes-cell'; +import ScopesCell from '../table/cell-scopes'; import Table from '../table'; import ApiTokenCell from './cell-token'; import ApiLastUsedCell from './cell-last-used'; diff --git a/src/features/dashboard/components/api-token-table/responsive-table.tsx b/src/features/dashboard/components/api-token-table/responsive-table.tsx index ccf4d5b4d..1aa0f19d8 100644 --- a/src/features/dashboard/components/api-token-table/responsive-table.tsx +++ b/src/features/dashboard/components/api-token-table/responsive-table.tsx @@ -1,7 +1,7 @@ import React from 'react'; import CustomAccordion from '@site/src/components/CustomAccordion'; import { TTokenType } from '@site/src/types'; -import ScopesCell from '../table/scopes-cell'; +import ScopesCell from '../table/cell-scopes'; import TokenActionsCell from './cell-delete-token'; import AccountTypeCell from './cell-account-type'; import ApiLastUsedCell from './cell-last-used'; diff --git a/src/features/dashboard/components/apps-table/apps-table.tsx b/src/features/dashboard/components/apps-table/apps-table.tsx index f16e5c5a7..0a741214f 100644 --- a/src/features/dashboard/components/apps-table/apps-table.tsx +++ b/src/features/dashboard/components/apps-table/apps-table.tsx @@ -15,8 +15,8 @@ import { TDashboardTab } from '@site/src/contexts/app-manager/app-manager.contex import useAppManager from '@site/src/hooks/useAppManager'; import useDeviceType from '@site/src/hooks/useDeviceType'; import Table from '../table'; -import ScopesCell from '../table/scopes-cell'; -import CopyTextCell from '../table/copy-text-cell'; +import ScopesCell from '../table/cell-scopes'; +import CopyTextCell from '../table/cell-copy-text'; import DeleteAppDialog from '../dialogs/delete-app-dialog'; import AppsTableOptionDialog, { IAppTableSelectedOptions, diff --git a/src/features/dashboard/components/apps-table/responsive-table.tsx b/src/features/dashboard/components/apps-table/responsive-table.tsx index 28a528e04..ad3330deb 100644 --- a/src/features/dashboard/components/apps-table/responsive-table.tsx +++ b/src/features/dashboard/components/apps-table/responsive-table.tsx @@ -1,8 +1,8 @@ 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 CopyTextCell from '../table/cell-copy-text'; +import ScopesCell from '../table/cell-scopes'; import AppActionsCell from './app-actions.cell'; import clsx from 'clsx'; import './responsive-table.scss'; From 6b0f891cdd7e0e42507c24f2993e6d1adfe79791 Mon Sep 17 00:00:00 2001 From: Sandeep Date: Fri, 27 Sep 2024 11:31:32 +0800 Subject: [PATCH 04/12] chore: :fire: updated imports --- .../dashboard/components/api-token-table/responsive-table.tsx | 2 +- src/features/dashboard/components/apps-table/apps-table.tsx | 4 ++-- .../dashboard/components/apps-table/responsive-table.tsx | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/features/dashboard/components/api-token-table/responsive-table.tsx b/src/features/dashboard/components/api-token-table/responsive-table.tsx index 1aa0f19d8..30f80f215 100644 --- a/src/features/dashboard/components/api-token-table/responsive-table.tsx +++ b/src/features/dashboard/components/api-token-table/responsive-table.tsx @@ -1,10 +1,10 @@ import React from 'react'; import CustomAccordion from '@site/src/components/CustomAccordion'; import { TTokenType } from '@site/src/types'; -import ScopesCell from '../table/cell-scopes'; import TokenActionsCell from './cell-delete-token'; import AccountTypeCell from './cell-account-type'; import ApiLastUsedCell from './cell-last-used'; +import ScopesCell from '../table/cell-scopes'; type TResponsiveTableProps = { tokens: TTokenType[]; diff --git a/src/features/dashboard/components/apps-table/apps-table.tsx b/src/features/dashboard/components/apps-table/apps-table.tsx index 0a741214f..2d48c7a35 100644 --- a/src/features/dashboard/components/apps-table/apps-table.tsx +++ b/src/features/dashboard/components/apps-table/apps-table.tsx @@ -15,8 +15,6 @@ import { TDashboardTab } from '@site/src/contexts/app-manager/app-manager.contex import useAppManager from '@site/src/hooks/useAppManager'; import useDeviceType from '@site/src/hooks/useDeviceType'; import Table from '../table'; -import ScopesCell from '../table/cell-scopes'; -import CopyTextCell from '../table/cell-copy-text'; import DeleteAppDialog from '../dialogs/delete-app-dialog'; import AppsTableOptionDialog, { IAppTableSelectedOptions, @@ -27,6 +25,8 @@ import ResponsiveTable from './responsive-table'; import AppActionsCell from './app-actions.cell'; import './apps-table.scss'; import Translate, { translate } from '@docusaurus/Translate'; +import CopyTextCell from '../table/cell-copy-text'; +import ScopesCell from '../table/cell-scopes'; export type TAppColumn = Column; diff --git a/src/features/dashboard/components/apps-table/responsive-table.tsx b/src/features/dashboard/components/apps-table/responsive-table.tsx index ad3330deb..8cc067915 100644 --- a/src/features/dashboard/components/apps-table/responsive-table.tsx +++ b/src/features/dashboard/components/apps-table/responsive-table.tsx @@ -1,11 +1,11 @@ import React from 'react'; import CustomAccordion from '@site/src/components/CustomAccordion'; import { ApplicationObject } from '@deriv/api-types'; -import CopyTextCell from '../table/cell-copy-text'; -import ScopesCell from '../table/cell-scopes'; import AppActionsCell from './app-actions.cell'; import clsx from 'clsx'; +import CopyTextCell from '../table/cell-copy-text'; import './responsive-table.scss'; +import ScopesCell from '../table/cell-scopes'; type TResponsiveTableProps = { apps: ApplicationObject[]; From bfa9dd7da838836afaac44155e44a31f4f01ffdc Mon Sep 17 00:00:00 2001 From: Sandeep Date: Fri, 27 Sep 2024 11:41:21 +0800 Subject: [PATCH 05/12] chore: :fire: updated package name to test --- .../components/Table/{cell-scopes.tsx => CellScopes.tsx} | 0 .../dashboard/components/Table/__tests__/Table.test.tsx | 2 +- .../dashboard/components/api-token-table/api-token-table.tsx | 2 +- .../dashboard/components/api-token-table/responsive-table.tsx | 2 +- src/features/dashboard/components/apps-table/apps-table.tsx | 2 +- .../dashboard/components/apps-table/responsive-table.tsx | 2 +- 6 files changed, 5 insertions(+), 5 deletions(-) rename src/features/dashboard/components/Table/{cell-scopes.tsx => CellScopes.tsx} (100%) diff --git a/src/features/dashboard/components/Table/cell-scopes.tsx b/src/features/dashboard/components/Table/CellScopes.tsx similarity index 100% rename from src/features/dashboard/components/Table/cell-scopes.tsx rename to src/features/dashboard/components/Table/CellScopes.tsx diff --git a/src/features/dashboard/components/Table/__tests__/Table.test.tsx b/src/features/dashboard/components/Table/__tests__/Table.test.tsx index 1772507ad..39c0c93d3 100644 --- a/src/features/dashboard/components/Table/__tests__/Table.test.tsx +++ b/src/features/dashboard/components/Table/__tests__/Table.test.tsx @@ -7,7 +7,7 @@ import useDeleteToken from '../../../hooks/useDeleteToken'; import { TTokenColumn } from '../../api-token-table'; import ApiLastUsedCell from '../../api-token-table/cell-last-used'; import ApiTokenCell from '../../api-token-table/cell-token'; -import ScopesCell from '../cell-scopes'; +import ScopesCell from '../CellScopes'; import TokenActionsCell from '../../api-token-table/cell-delete-token'; jest.mock('../../../hooks/useDeleteToken'); diff --git a/src/features/dashboard/components/api-token-table/api-token-table.tsx b/src/features/dashboard/components/api-token-table/api-token-table.tsx index 18cdca089..db7993263 100644 --- a/src/features/dashboard/components/api-token-table/api-token-table.tsx +++ b/src/features/dashboard/components/api-token-table/api-token-table.tsx @@ -8,7 +8,7 @@ import Spinner from '@site/src/components/Spinner'; import useApiToken from '@site/src/hooks/useApiToken'; import useDeviceType from '@site/src/hooks/useDeviceType'; import AccountSwitcher from '@site/src/components/AccountSwitcher'; -import ScopesCell from '../table/cell-scopes'; +import ScopesCell from '../table/CellScopes'; import Table from '../table'; import ApiTokenCell from './cell-token'; import ApiLastUsedCell from './cell-last-used'; diff --git a/src/features/dashboard/components/api-token-table/responsive-table.tsx b/src/features/dashboard/components/api-token-table/responsive-table.tsx index 30f80f215..5fbb3730e 100644 --- a/src/features/dashboard/components/api-token-table/responsive-table.tsx +++ b/src/features/dashboard/components/api-token-table/responsive-table.tsx @@ -4,7 +4,7 @@ import { TTokenType } from '@site/src/types'; import TokenActionsCell from './cell-delete-token'; import AccountTypeCell from './cell-account-type'; import ApiLastUsedCell from './cell-last-used'; -import ScopesCell from '../table/cell-scopes'; +import ScopesCell from '../table/CellScopes'; type TResponsiveTableProps = { tokens: TTokenType[]; diff --git a/src/features/dashboard/components/apps-table/apps-table.tsx b/src/features/dashboard/components/apps-table/apps-table.tsx index 2d48c7a35..2f1ba6267 100644 --- a/src/features/dashboard/components/apps-table/apps-table.tsx +++ b/src/features/dashboard/components/apps-table/apps-table.tsx @@ -26,7 +26,7 @@ import AppActionsCell from './app-actions.cell'; import './apps-table.scss'; import Translate, { translate } from '@docusaurus/Translate'; import CopyTextCell from '../table/cell-copy-text'; -import ScopesCell from '../table/cell-scopes'; +import ScopesCell from '../table/CellScopes'; export type TAppColumn = Column; diff --git a/src/features/dashboard/components/apps-table/responsive-table.tsx b/src/features/dashboard/components/apps-table/responsive-table.tsx index 8cc067915..c9228b406 100644 --- a/src/features/dashboard/components/apps-table/responsive-table.tsx +++ b/src/features/dashboard/components/apps-table/responsive-table.tsx @@ -5,7 +5,7 @@ import AppActionsCell from './app-actions.cell'; import clsx from 'clsx'; import CopyTextCell from '../table/cell-copy-text'; import './responsive-table.scss'; -import ScopesCell from '../table/cell-scopes'; +import ScopesCell from '../table/CellScopes'; type TResponsiveTableProps = { apps: ApplicationObject[]; From 98b63caa81dcb8542abd6734cf9bbe7594b41dcf Mon Sep 17 00:00:00 2001 From: Sandeep Date: Fri, 27 Sep 2024 11:53:51 +0800 Subject: [PATCH 06/12] chore: :fire: updated casing for table component --- src/features/dashboard/components/Table/index.ts | 3 ++- .../components/api-token-table/api-token-table.tsx | 4 ++-- .../components/api-token-table/responsive-table.tsx | 2 +- src/features/dashboard/components/apps-table/apps-table.tsx | 6 +++--- .../dashboard/components/apps-table/responsive-table.tsx | 4 ++-- 5 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/features/dashboard/components/Table/index.ts b/src/features/dashboard/components/Table/index.ts index 434070a47..765cd2d29 100644 --- a/src/features/dashboard/components/Table/index.ts +++ b/src/features/dashboard/components/Table/index.ts @@ -1,3 +1,4 @@ import Table from './table'; -export default Table; + +export default Table; \ No newline at end of file diff --git a/src/features/dashboard/components/api-token-table/api-token-table.tsx b/src/features/dashboard/components/api-token-table/api-token-table.tsx index db7993263..114fdc5bb 100644 --- a/src/features/dashboard/components/api-token-table/api-token-table.tsx +++ b/src/features/dashboard/components/api-token-table/api-token-table.tsx @@ -8,8 +8,8 @@ import Spinner from '@site/src/components/Spinner'; import useApiToken from '@site/src/hooks/useApiToken'; import useDeviceType from '@site/src/hooks/useDeviceType'; import AccountSwitcher from '@site/src/components/AccountSwitcher'; -import ScopesCell from '../table/CellScopes'; -import Table from '../table'; +import ScopesCell from '../Table/CellScopes'; +import Table from '../Table'; import ApiTokenCell from './cell-token'; import ApiLastUsedCell from './cell-last-used'; import TokenActionsCell from './cell-delete-token'; diff --git a/src/features/dashboard/components/api-token-table/responsive-table.tsx b/src/features/dashboard/components/api-token-table/responsive-table.tsx index 5fbb3730e..beb4f4b0e 100644 --- a/src/features/dashboard/components/api-token-table/responsive-table.tsx +++ b/src/features/dashboard/components/api-token-table/responsive-table.tsx @@ -4,7 +4,7 @@ import { TTokenType } from '@site/src/types'; import TokenActionsCell from './cell-delete-token'; import AccountTypeCell from './cell-account-type'; import ApiLastUsedCell from './cell-last-used'; -import ScopesCell from '../table/CellScopes'; +import ScopesCell from '../Table/CellScopes'; type TResponsiveTableProps = { tokens: TTokenType[]; diff --git a/src/features/dashboard/components/apps-table/apps-table.tsx b/src/features/dashboard/components/apps-table/apps-table.tsx index 2f1ba6267..7a7422085 100644 --- a/src/features/dashboard/components/apps-table/apps-table.tsx +++ b/src/features/dashboard/components/apps-table/apps-table.tsx @@ -14,7 +14,7 @@ import { import { TDashboardTab } from '@site/src/contexts/app-manager/app-manager.context'; import useAppManager from '@site/src/hooks/useAppManager'; import useDeviceType from '@site/src/hooks/useDeviceType'; -import Table from '../table'; +import Table from '../Table'; import DeleteAppDialog from '../dialogs/delete-app-dialog'; import AppsTableOptionDialog, { IAppTableSelectedOptions, @@ -25,8 +25,8 @@ import ResponsiveTable from './responsive-table'; import AppActionsCell from './app-actions.cell'; import './apps-table.scss'; import Translate, { translate } from '@docusaurus/Translate'; -import CopyTextCell from '../table/cell-copy-text'; -import ScopesCell from '../table/CellScopes'; +import CopyTextCell from '../Table/cell-copy-text'; +import ScopesCell from '../Table/CellScopes'; export type TAppColumn = Column; diff --git a/src/features/dashboard/components/apps-table/responsive-table.tsx b/src/features/dashboard/components/apps-table/responsive-table.tsx index c9228b406..534f297fa 100644 --- a/src/features/dashboard/components/apps-table/responsive-table.tsx +++ b/src/features/dashboard/components/apps-table/responsive-table.tsx @@ -3,9 +3,9 @@ import CustomAccordion from '@site/src/components/CustomAccordion'; import { ApplicationObject } from '@deriv/api-types'; import AppActionsCell from './app-actions.cell'; import clsx from 'clsx'; -import CopyTextCell from '../table/cell-copy-text'; +import CopyTextCell from '../Table/cell-copy-text'; import './responsive-table.scss'; -import ScopesCell from '../table/CellScopes'; +import ScopesCell from '../Table/CellScopes'; type TResponsiveTableProps = { apps: ApplicationObject[]; From 9a4404ab2b546b3364ca22fb6c8b2a4725ef1cec Mon Sep 17 00:00:00 2001 From: Sandeep Date: Fri, 27 Sep 2024 13:16:10 +0800 Subject: [PATCH 07/12] chore: :fire: restructured remaining components --- src/features/{Auth => }/Login/Login.module.scss | 4 ++++ src/features/{Auth => }/Login/Login.tsx | 8 +++++--- src/features/{Auth => }/Login/tests/Login.test.tsx | 0 src/features/dashboard/components/Table/index.ts | 4 ---- .../components/api-token-form/api-token-form.tsx | 2 +- .../components/api-token-form/create-token-field.tsx | 2 +- .../components/api-token-table/api-token-table.tsx | 4 ++-- .../components/api-token-table/responsive-table.tsx | 2 +- .../dashboard/components/apps-table/apps-table.tsx | 6 +++--- .../dashboard/components/apps-table/responsive-table.tsx | 4 ++-- .../{Table => common-table}/__tests__/Table.test.tsx | 2 +- .../__tests__/copy-text.cell.test.tsx | 0 .../{Table => common-table}/cell-copy-text.module.scss | 0 .../components/{Table => common-table}/cell-copy-text.tsx | 0 .../{Table => common-table}/cell-scopes.module.scss | 0 .../CellScopes.tsx => common-table/cell-scopes.tsx} | 0 .../{Table/table.scss => common-table/common-table.scss} | 0 .../{Table/table.tsx => common-table/common-table.tsx} | 6 +++--- src/features/dashboard/components/common-table/index.ts | 3 +++ .../__tests__/restrictions-appname.test.tsx | 2 +- .../__tests__/token-name-restrictions.test.tsx} | 4 ++-- .../dashboard/components/token-name-restrictions/index.ts | 3 +++ .../token-name-restrictions.module.scss} | 0 .../token-name-restrictions.tsx} | 4 ++-- src/features/dashboard/components/token-register/index.ts | 3 +++ .../{TokenRegister => token-register}/token-register.scss | 0 .../index.tsx => token-register/token-register.tsx} | 2 +- .../components/{TokenRegister => token-register}/types.ts | 0 src/features/dashboard/dashboard.tsx | 0 src/features/dashboard/index.tsx | 6 +++--- src/features/dashboard/manage-apps/index.ts | 3 +++ .../dashboard/manage-apps/{index.tsx => manage-apps.tsx} | 0 src/features/dashboard/manage-dashboard/index.tsx | 2 +- src/features/dashboard/register-tokens/index.tsx | 2 +- src/pages/auth.tsx | 2 +- src/pages/dashboard.tsx | 1 + src/theme/Layout/index.tsx | 2 -- 37 files changed, 48 insertions(+), 35 deletions(-) rename src/features/{Auth => }/Login/Login.module.scss (93%) rename src/features/{Auth => }/Login/Login.tsx (85%) rename src/features/{Auth => }/Login/tests/Login.test.tsx (100%) delete mode 100644 src/features/dashboard/components/Table/index.ts rename src/features/dashboard/components/{Table => common-table}/__tests__/Table.test.tsx (98%) rename src/features/dashboard/components/{Table => common-table}/__tests__/copy-text.cell.test.tsx (100%) rename src/features/dashboard/components/{Table => common-table}/cell-copy-text.module.scss (100%) rename src/features/dashboard/components/{Table => common-table}/cell-copy-text.tsx (100%) rename src/features/dashboard/components/{Table => common-table}/cell-scopes.module.scss (100%) rename src/features/dashboard/components/{Table/CellScopes.tsx => common-table/cell-scopes.tsx} (100%) rename src/features/dashboard/components/{Table/table.scss => common-table/common-table.scss} (100%) rename src/features/dashboard/components/{Table/table.tsx => common-table/common-table.tsx} (96%) create mode 100644 src/features/dashboard/components/common-table/index.ts rename src/features/dashboard/components/{TokenNameRestrictions/__tests__/TokenNameRestrictions.test.tsx => token-name-restrictions/__tests__/token-name-restrictions.test.tsx} (90%) create mode 100644 src/features/dashboard/components/token-name-restrictions/index.ts rename src/features/dashboard/components/{TokenNameRestrictions/TokenNameRestrictions.module.scss => token-name-restrictions/token-name-restrictions.module.scss} (100%) rename src/features/dashboard/components/{TokenNameRestrictions/TokenNameRestrictions.tsx => token-name-restrictions/token-name-restrictions.tsx} (86%) create mode 100644 src/features/dashboard/components/token-register/index.ts rename src/features/dashboard/components/{TokenRegister => token-register}/token-register.scss (100%) rename src/features/dashboard/components/{TokenRegister/index.tsx => token-register/token-register.tsx} (100%) rename src/features/dashboard/components/{TokenRegister => token-register}/types.ts (100%) create mode 100644 src/features/dashboard/dashboard.tsx create mode 100644 src/features/dashboard/manage-apps/index.ts rename src/features/dashboard/manage-apps/{index.tsx => manage-apps.tsx} (100%) diff --git a/src/features/Auth/Login/Login.module.scss b/src/features/Login/Login.module.scss similarity index 93% rename from src/features/Auth/Login/Login.module.scss rename to src/features/Login/Login.module.scss index 389e8af5f..d10e41a10 100644 --- a/src/features/Auth/Login/Login.module.scss +++ b/src/features/Login/Login.module.scss @@ -27,3 +27,7 @@ .footer { width: 100%; } + +.action { + margin-top: rem(1.5); +} diff --git a/src/features/Auth/Login/Login.tsx b/src/features/Login/Login.tsx similarity index 85% rename from src/features/Auth/Login/Login.tsx rename to src/features/Login/Login.tsx index ca5f379b6..ff119d368 100644 --- a/src/features/Auth/Login/Login.tsx +++ b/src/features/Login/Login.tsx @@ -25,9 +25,11 @@ export const Login = () => { Log in to your Deriv account to get the API token and start using our API.     - +
    + +
    diff --git a/src/features/Auth/Login/tests/Login.test.tsx b/src/features/Login/tests/Login.test.tsx similarity index 100% rename from src/features/Auth/Login/tests/Login.test.tsx rename to src/features/Login/tests/Login.test.tsx diff --git a/src/features/dashboard/components/Table/index.ts b/src/features/dashboard/components/Table/index.ts deleted file mode 100644 index 765cd2d29..000000000 --- a/src/features/dashboard/components/Table/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -import Table from './table'; - - -export default Table; \ No newline at end of file diff --git a/src/features/dashboard/components/api-token-form/api-token-form.tsx b/src/features/dashboard/components/api-token-form/api-token-form.tsx index e8342f85d..62763c3e0 100644 --- a/src/features/dashboard/components/api-token-form/api-token-form.tsx +++ b/src/features/dashboard/components/api-token-form/api-token-form.tsx @@ -8,7 +8,7 @@ import ApiTokenCard from '../api-token-card'; import useCreateToken from '@site/src/features/dashboard/hooks/useCreateToken'; import * as yup from 'yup'; import styles from './api-token-form.module.scss'; -import TokenNameRestrictions from '../TokenNameRestrictions/TokenNameRestrictions'; +import TokenNameRestrictions from '../token-name-restrictions/token-name-restrictions'; import CreateTokenField from './create-token-field'; const schema = yup diff --git a/src/features/dashboard/components/api-token-form/create-token-field.tsx b/src/features/dashboard/components/api-token-form/create-token-field.tsx index 2f9ad65e6..e4266088a 100644 --- a/src/features/dashboard/components/api-token-form/create-token-field.tsx +++ b/src/features/dashboard/components/api-token-form/create-token-field.tsx @@ -5,7 +5,7 @@ import useAppManager from '@site/src/hooks/useAppManager'; import { TDashboardTab } from '@site/src/contexts/app-manager/app-manager.context'; import { Text, Button, TextField } from '@deriv-com/quill-ui'; import TokenCreationDialogSuccess from '../dialogs/token-creation-dialog-success'; -import TokenNameRestrictions from '../TokenNameRestrictions/TokenNameRestrictions'; +import TokenNameRestrictions from '../token-name-restrictions/token-name-restrictions'; import CustomErrors from './custom-error'; import styles from './api-token-form.module.scss'; diff --git a/src/features/dashboard/components/api-token-table/api-token-table.tsx b/src/features/dashboard/components/api-token-table/api-token-table.tsx index 114fdc5bb..1e2dd6fc7 100644 --- a/src/features/dashboard/components/api-token-table/api-token-table.tsx +++ b/src/features/dashboard/components/api-token-table/api-token-table.tsx @@ -8,8 +8,8 @@ import Spinner from '@site/src/components/Spinner'; import useApiToken from '@site/src/hooks/useApiToken'; import useDeviceType from '@site/src/hooks/useDeviceType'; import AccountSwitcher from '@site/src/components/AccountSwitcher'; -import ScopesCell from '../Table/CellScopes'; -import Table from '../Table'; +import ScopesCell from '../common-table/cell-scopes'; +import Table from '../common-table'; import ApiTokenCell from './cell-token'; import ApiLastUsedCell from './cell-last-used'; import TokenActionsCell from './cell-delete-token'; diff --git a/src/features/dashboard/components/api-token-table/responsive-table.tsx b/src/features/dashboard/components/api-token-table/responsive-table.tsx index beb4f4b0e..e6e803621 100644 --- a/src/features/dashboard/components/api-token-table/responsive-table.tsx +++ b/src/features/dashboard/components/api-token-table/responsive-table.tsx @@ -4,7 +4,7 @@ import { TTokenType } from '@site/src/types'; import TokenActionsCell from './cell-delete-token'; import AccountTypeCell from './cell-account-type'; import ApiLastUsedCell from './cell-last-used'; -import ScopesCell from '../Table/CellScopes'; +import ScopesCell from '../common-table/cell-scopes'; type TResponsiveTableProps = { tokens: TTokenType[]; diff --git a/src/features/dashboard/components/apps-table/apps-table.tsx b/src/features/dashboard/components/apps-table/apps-table.tsx index 7a7422085..2be020297 100644 --- a/src/features/dashboard/components/apps-table/apps-table.tsx +++ b/src/features/dashboard/components/apps-table/apps-table.tsx @@ -14,7 +14,7 @@ import { import { TDashboardTab } from '@site/src/contexts/app-manager/app-manager.context'; import useAppManager from '@site/src/hooks/useAppManager'; import useDeviceType from '@site/src/hooks/useDeviceType'; -import Table from '../Table'; +import Table from '../common-table'; import DeleteAppDialog from '../dialogs/delete-app-dialog'; import AppsTableOptionDialog, { IAppTableSelectedOptions, @@ -25,8 +25,8 @@ import ResponsiveTable from './responsive-table'; import AppActionsCell from './app-actions.cell'; import './apps-table.scss'; import Translate, { translate } from '@docusaurus/Translate'; -import CopyTextCell from '../Table/cell-copy-text'; -import ScopesCell from '../Table/CellScopes'; +import CopyTextCell from '../common-table/cell-copy-text'; +import ScopesCell from '../common-table/cell-scopes'; export type TAppColumn = Column; diff --git a/src/features/dashboard/components/apps-table/responsive-table.tsx b/src/features/dashboard/components/apps-table/responsive-table.tsx index 534f297fa..6b88f07aa 100644 --- a/src/features/dashboard/components/apps-table/responsive-table.tsx +++ b/src/features/dashboard/components/apps-table/responsive-table.tsx @@ -3,9 +3,9 @@ import CustomAccordion from '@site/src/components/CustomAccordion'; import { ApplicationObject } from '@deriv/api-types'; import AppActionsCell from './app-actions.cell'; import clsx from 'clsx'; -import CopyTextCell from '../Table/cell-copy-text'; +import CopyTextCell from '../common-table/cell-copy-text'; import './responsive-table.scss'; -import ScopesCell from '../Table/CellScopes'; +import ScopesCell from '../common-table/cell-scopes'; type TResponsiveTableProps = { apps: ApplicationObject[]; diff --git a/src/features/dashboard/components/Table/__tests__/Table.test.tsx b/src/features/dashboard/components/common-table/__tests__/Table.test.tsx similarity index 98% rename from src/features/dashboard/components/Table/__tests__/Table.test.tsx rename to src/features/dashboard/components/common-table/__tests__/Table.test.tsx index 39c0c93d3..1772507ad 100644 --- a/src/features/dashboard/components/Table/__tests__/Table.test.tsx +++ b/src/features/dashboard/components/common-table/__tests__/Table.test.tsx @@ -7,7 +7,7 @@ import useDeleteToken from '../../../hooks/useDeleteToken'; import { TTokenColumn } from '../../api-token-table'; import ApiLastUsedCell from '../../api-token-table/cell-last-used'; import ApiTokenCell from '../../api-token-table/cell-token'; -import ScopesCell from '../CellScopes'; +import ScopesCell from '../cell-scopes'; import TokenActionsCell from '../../api-token-table/cell-delete-token'; jest.mock('../../../hooks/useDeleteToken'); diff --git a/src/features/dashboard/components/Table/__tests__/copy-text.cell.test.tsx b/src/features/dashboard/components/common-table/__tests__/copy-text.cell.test.tsx similarity index 100% rename from src/features/dashboard/components/Table/__tests__/copy-text.cell.test.tsx rename to src/features/dashboard/components/common-table/__tests__/copy-text.cell.test.tsx diff --git a/src/features/dashboard/components/Table/cell-copy-text.module.scss b/src/features/dashboard/components/common-table/cell-copy-text.module.scss similarity index 100% rename from src/features/dashboard/components/Table/cell-copy-text.module.scss rename to src/features/dashboard/components/common-table/cell-copy-text.module.scss diff --git a/src/features/dashboard/components/Table/cell-copy-text.tsx b/src/features/dashboard/components/common-table/cell-copy-text.tsx similarity index 100% rename from src/features/dashboard/components/Table/cell-copy-text.tsx rename to src/features/dashboard/components/common-table/cell-copy-text.tsx diff --git a/src/features/dashboard/components/Table/cell-scopes.module.scss b/src/features/dashboard/components/common-table/cell-scopes.module.scss similarity index 100% rename from src/features/dashboard/components/Table/cell-scopes.module.scss rename to src/features/dashboard/components/common-table/cell-scopes.module.scss diff --git a/src/features/dashboard/components/Table/CellScopes.tsx b/src/features/dashboard/components/common-table/cell-scopes.tsx similarity index 100% rename from src/features/dashboard/components/Table/CellScopes.tsx rename to src/features/dashboard/components/common-table/cell-scopes.tsx diff --git a/src/features/dashboard/components/Table/table.scss b/src/features/dashboard/components/common-table/common-table.scss similarity index 100% rename from src/features/dashboard/components/Table/table.scss rename to src/features/dashboard/components/common-table/common-table.scss diff --git a/src/features/dashboard/components/Table/table.tsx b/src/features/dashboard/components/common-table/common-table.tsx similarity index 96% rename from src/features/dashboard/components/Table/table.tsx rename to src/features/dashboard/components/common-table/common-table.tsx index 58e2ce78d..967357487 100644 --- a/src/features/dashboard/components/Table/table.tsx +++ b/src/features/dashboard/components/common-table/common-table.tsx @@ -1,7 +1,7 @@ import React, { HTMLAttributes } from 'react'; import { Cell, Column, TableState, useTable } from 'react-table'; import { Heading, Text } from '@deriv-com/quill-ui'; -import './table.scss'; +import './common-table.scss'; const defaultPropGetter = () => ({}); @@ -14,7 +14,7 @@ interface ITableProps extends HTMLAttributes getCustomCellProps?: (cell: Cell) => object; } -const Table = ({ +const CommonTable = ({ data, columns, initialState, @@ -80,4 +80,4 @@ const Table = ({ ); }; -export default Table; +export default CommonTable; diff --git a/src/features/dashboard/components/common-table/index.ts b/src/features/dashboard/components/common-table/index.ts new file mode 100644 index 000000000..9e95c2321 --- /dev/null +++ b/src/features/dashboard/components/common-table/index.ts @@ -0,0 +1,3 @@ +import CommonTable from './common-table'; + +export default CommonTable; diff --git a/src/features/dashboard/components/restrictions-appname/__tests__/restrictions-appname.test.tsx b/src/features/dashboard/components/restrictions-appname/__tests__/restrictions-appname.test.tsx index cbc552212..ded4f9d0b 100644 --- a/src/features/dashboard/components/restrictions-appname/__tests__/restrictions-appname.test.tsx +++ b/src/features/dashboard/components/restrictions-appname/__tests__/restrictions-appname.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { render, screen } from '@site/src/test-utils'; -import RestrictionsAppname from '..'; +import RestrictionsAppname from '../restrictions-appname'; describe('Restrictions for App name', () => { it('Should render the list', () => { diff --git a/src/features/dashboard/components/TokenNameRestrictions/__tests__/TokenNameRestrictions.test.tsx b/src/features/dashboard/components/token-name-restrictions/__tests__/token-name-restrictions.test.tsx similarity index 90% rename from src/features/dashboard/components/TokenNameRestrictions/__tests__/TokenNameRestrictions.test.tsx rename to src/features/dashboard/components/token-name-restrictions/__tests__/token-name-restrictions.test.tsx index 834f55919..a037c4000 100644 --- a/src/features/dashboard/components/TokenNameRestrictions/__tests__/TokenNameRestrictions.test.tsx +++ b/src/features/dashboard/components/token-name-restrictions/__tests__/token-name-restrictions.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { render, screen } from '@site/src/test-utils'; -import TokenNameRestrictions from '../TokenNameRestrictions'; +import TokenNameRestrictions from '../token-name-restrictions'; describe('Restrictions for App name', () => { beforeEach(() => { @@ -20,7 +20,7 @@ describe('Restrictions for App name', () => { 'No duplicate token names are allowed for the same account.', ); const listItem4 = screen.getByText( - 'No keywords "deriv" or "binary" or words that look similar, e.g. "_binary_" or "d3eriv" are allowed.', + 'No keywords "deriv" or "binary" or words that look similar, e.g. "_binary_" or "d3riv" are allowed.', ); expect(listItem1).toBeInTheDocument(); diff --git a/src/features/dashboard/components/token-name-restrictions/index.ts b/src/features/dashboard/components/token-name-restrictions/index.ts new file mode 100644 index 000000000..7880817ca --- /dev/null +++ b/src/features/dashboard/components/token-name-restrictions/index.ts @@ -0,0 +1,3 @@ +import TokenNameRestrictions from './token-name-restrictions'; + +export default TokenNameRestrictions; diff --git a/src/features/dashboard/components/TokenNameRestrictions/TokenNameRestrictions.module.scss b/src/features/dashboard/components/token-name-restrictions/token-name-restrictions.module.scss similarity index 100% rename from src/features/dashboard/components/TokenNameRestrictions/TokenNameRestrictions.module.scss rename to src/features/dashboard/components/token-name-restrictions/token-name-restrictions.module.scss diff --git a/src/features/dashboard/components/TokenNameRestrictions/TokenNameRestrictions.tsx b/src/features/dashboard/components/token-name-restrictions/token-name-restrictions.tsx similarity index 86% rename from src/features/dashboard/components/TokenNameRestrictions/TokenNameRestrictions.tsx rename to src/features/dashboard/components/token-name-restrictions/token-name-restrictions.tsx index 12ea3ea2c..475c172a3 100644 --- a/src/features/dashboard/components/TokenNameRestrictions/TokenNameRestrictions.tsx +++ b/src/features/dashboard/components/token-name-restrictions/token-name-restrictions.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import styles from './TokenNameRestrictions.module.scss'; +import styles from './token-name-restrictions.module.scss'; import Translate, { translate } from '@docusaurus/Translate'; const TokenNameRestrictions = () => { @@ -17,7 +17,7 @@ const TokenNameRestrictions = () => {
  • {translate({ message: - 'No keywords "deriv" or "binary" or words that look similar, e.g. "_binary_" or "d3eriv" are allowed.', + 'No keywords "deriv" or "binary" or words that look similar, e.g. "_binary_" or "d3riv" are allowed.', })}
diff --git a/src/features/dashboard/components/token-register/index.ts b/src/features/dashboard/components/token-register/index.ts new file mode 100644 index 000000000..24e2b0de3 --- /dev/null +++ b/src/features/dashboard/components/token-register/index.ts @@ -0,0 +1,3 @@ +import TokenRegister from './token-register'; + +export default TokenRegister; diff --git a/src/features/dashboard/components/TokenRegister/token-register.scss b/src/features/dashboard/components/token-register/token-register.scss similarity index 100% rename from src/features/dashboard/components/TokenRegister/token-register.scss rename to src/features/dashboard/components/token-register/token-register.scss diff --git a/src/features/dashboard/components/TokenRegister/index.tsx b/src/features/dashboard/components/token-register/token-register.tsx similarity index 100% rename from src/features/dashboard/components/TokenRegister/index.tsx rename to src/features/dashboard/components/token-register/token-register.tsx index be3eb81e5..88f0e137b 100644 --- a/src/features/dashboard/components/TokenRegister/index.tsx +++ b/src/features/dashboard/components/token-register/token-register.tsx @@ -6,9 +6,9 @@ import { scopesObjectToArray } from '@site/src/utils'; import ApiTokenCard from '../api-token-card'; import useCreateToken from '@site/src/features/dashboard/hooks/useCreateToken'; import * as yup from 'yup'; -import './token-register.scss'; import CreateTokenField from '../api-token-form'; import AccountSwitcher from '@site/src/components/AccountSwitcher'; +import './token-register.scss'; const schema = yup .object({ diff --git a/src/features/dashboard/components/TokenRegister/types.ts b/src/features/dashboard/components/token-register/types.ts similarity index 100% rename from src/features/dashboard/components/TokenRegister/types.ts rename to src/features/dashboard/components/token-register/types.ts diff --git a/src/features/dashboard/dashboard.tsx b/src/features/dashboard/dashboard.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/src/features/dashboard/index.tsx b/src/features/dashboard/index.tsx index 4d5cb6363..66633f6b7 100644 --- a/src/features/dashboard/index.tsx +++ b/src/features/dashboard/index.tsx @@ -1,9 +1,8 @@ import React, { useEffect } from 'react'; import useAuthContext from '@site/src/hooks/useAuthContext'; -// import DashboardTabs from './components/Tabs'; import useAppManager from '@site/src/hooks/useAppManager'; import MemoizedManageDashboard from './manage-dashboard'; -import { Login } from '../Auth/Login/Login'; +import { Login } from '../Login/Login'; export const AppManager = () => { const { is_logged_in } = useAuthContext(); @@ -16,5 +15,6 @@ export const AppManager = () => { }; }, [setIsDashboard]); - return {is_logged_in ? : }; + if (is_logged_in) return ; + return ; }; diff --git a/src/features/dashboard/manage-apps/index.ts b/src/features/dashboard/manage-apps/index.ts new file mode 100644 index 000000000..4361dcdab --- /dev/null +++ b/src/features/dashboard/manage-apps/index.ts @@ -0,0 +1,3 @@ +import ManageApps from './manage-apps'; + +export default ManageApps; diff --git a/src/features/dashboard/manage-apps/index.tsx b/src/features/dashboard/manage-apps/manage-apps.tsx similarity index 100% rename from src/features/dashboard/manage-apps/index.tsx rename to src/features/dashboard/manage-apps/manage-apps.tsx diff --git a/src/features/dashboard/manage-dashboard/index.tsx b/src/features/dashboard/manage-dashboard/index.tsx index b2549554f..d4445183b 100644 --- a/src/features/dashboard/manage-dashboard/index.tsx +++ b/src/features/dashboard/manage-dashboard/index.tsx @@ -13,7 +13,7 @@ import './manage-dashboard.scss'; import { TDashboardTab } from '@site/src/contexts/app-manager/app-manager.context'; import UpdateApp from '../update-app'; import { ApplicationObject } from '@deriv/api-types'; -import TokenRegister from '../components/TokenRegister'; +import TokenRegister from '../components/token-register'; const ManageDashboard = () => { const { diff --git a/src/features/dashboard/register-tokens/index.tsx b/src/features/dashboard/register-tokens/index.tsx index 78a1270b6..b8d36c76b 100644 --- a/src/features/dashboard/register-tokens/index.tsx +++ b/src/features/dashboard/register-tokens/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import TokenRegister from '../components/TokenRegister'; +import TokenRegister from '../components/token-register'; const TokenRegistration: React.FC = () => { return ; diff --git a/src/pages/auth.tsx b/src/pages/auth.tsx index c50261acd..2bd53dee7 100644 --- a/src/pages/auth.tsx +++ b/src/pages/auth.tsx @@ -1,6 +1,6 @@ import React from 'react'; import Layout from '@theme/Layout'; -import { Login } from '../features/Auth/Login/Login'; +import { Login } from '../features/Login/Login'; import useAuthParams from '../hooks/useAuthParams'; import { useEffect } from 'react'; import { useLocation } from '@docusaurus/router'; diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx index 39b30b10d..70d43b895 100644 --- a/src/pages/dashboard.tsx +++ b/src/pages/dashboard.tsx @@ -1,6 +1,7 @@ import React from 'react'; import Layout from '@theme/Layout'; import { AppManager } from '@site/src/features/dashboard'; + export default function AppRegistrationPage() { return ( diff --git a/src/theme/Layout/index.tsx b/src/theme/Layout/index.tsx index f15f07b8e..005c2af77 100644 --- a/src/theme/Layout/index.tsx +++ b/src/theme/Layout/index.tsx @@ -31,9 +31,7 @@ export default function Layout(props: Props): JSX.Element {
- - From 8333060ef745c7d6d18f5f2cb83913c4a721da89 Mon Sep 17 00:00:00 2001 From: Sandeep Date: Fri, 27 Sep 2024 15:46:43 +0800 Subject: [PATCH 08/12] refactor: :fire: updated tablet design and breakpoint usage --- .../__tests__/custom-tabs.test.tsx | 0 .../custom-tabs.scss | 18 ++-------- .../index.tsx => custom-tabs/custom-tabs.tsx} | 2 +- src/components/custom-tabs/index.ts | 3 ++ .../api-token-table/api-table.module.scss | 14 ++++---- .../components/apps-table/apps-table.scss | 35 +++++++++++-------- .../components/apps-table/apps-table.tsx | 11 +++--- .../common-table/cell-scopes.module.scss | 14 +++++--- src/features/dashboard/index.tsx | 4 +-- .../dashboard/manage-apps/manage-apps.tsx | 2 +- .../manage-dashboard/manage-dashboard.scss | 2 +- .../__tests__/useDeviceType.test.tsx | 6 ++-- src/hooks/useDeviceType/index.tsx | 2 +- src/theme/Layout/index.tsx | 2 +- 14 files changed, 60 insertions(+), 55 deletions(-) rename src/components/{CustomTabs => custom-tabs}/__tests__/custom-tabs.test.tsx (100%) rename src/components/{CustomTabs => custom-tabs}/custom-tabs.scss (77%) rename src/components/{CustomTabs/index.tsx => custom-tabs/custom-tabs.tsx} (91%) create mode 100644 src/components/custom-tabs/index.ts diff --git a/src/components/CustomTabs/__tests__/custom-tabs.test.tsx b/src/components/custom-tabs/__tests__/custom-tabs.test.tsx similarity index 100% rename from src/components/CustomTabs/__tests__/custom-tabs.test.tsx rename to src/components/custom-tabs/__tests__/custom-tabs.test.tsx diff --git a/src/components/CustomTabs/custom-tabs.scss b/src/components/custom-tabs/custom-tabs.scss similarity index 77% rename from src/components/CustomTabs/custom-tabs.scss rename to src/components/custom-tabs/custom-tabs.scss index 69bec75bc..7f6bf4f72 100644 --- a/src/components/CustomTabs/custom-tabs.scss +++ b/src/components/custom-tabs/custom-tabs.scss @@ -20,8 +20,8 @@ align-items: center; } &__item { - padding: 10px 18px; - min-width: 17rem; + padding: 12px 18px; + min-width: 320px; cursor: pointer; @media screen and (max-width: 500px) { @@ -38,19 +38,7 @@ margin-block: 32px; } } - - &_content { - width: 1310px; - margin: auto; - - @media screen and (max-width: 1023px) { - width: 100%; - } - } -} - -.tabs_content { - @media screen and (max-width: 1023px) { + &__content { width: 100%; } } diff --git a/src/components/CustomTabs/index.tsx b/src/components/custom-tabs/custom-tabs.tsx similarity index 91% rename from src/components/CustomTabs/index.tsx rename to src/components/custom-tabs/custom-tabs.tsx index 74a9c214b..39ee6ab60 100644 --- a/src/components/CustomTabs/index.tsx +++ b/src/components/custom-tabs/custom-tabs.tsx @@ -25,7 +25,7 @@ const CustomTabs: React.FC<{ ))}
-
{tabs[activeTab].content}
+
{tabs[activeTab].content}
); }; diff --git a/src/components/custom-tabs/index.ts b/src/components/custom-tabs/index.ts new file mode 100644 index 000000000..a2f9c23d5 --- /dev/null +++ b/src/components/custom-tabs/index.ts @@ -0,0 +1,3 @@ +import CustomTabs from './custom-tabs'; + +export default CustomTabs; diff --git a/src/features/dashboard/components/api-token-table/api-table.module.scss b/src/features/dashboard/components/api-token-table/api-table.module.scss index 31c4b3d8f..7c5255894 100644 --- a/src/features/dashboard/components/api-token-table/api-table.module.scss +++ b/src/features/dashboard/components/api-token-table/api-table.module.scss @@ -1,3 +1,5 @@ +@use 'src/styles/mixins' as *; + .flex-center { display: flex; flex-direction: column; @@ -8,7 +10,7 @@ align-self: self-end; position: relative; - @media (max-width: 1023px) { + @include tablet-lg { align-self: center; } @@ -23,7 +25,7 @@ border: 1px solid var(--opacity-black-100); border-radius: 32px; - @media screen and (max-width: 1023px) { + @include tablet-lg { border: none; margin: 0 1rem; gap: 3rem; @@ -93,7 +95,7 @@ padding: 48px 48px 25px; gap: 16px; - @media (max-width: 1023px) { + @include tablet-lg { flex-direction: column; align-items: center; text-align: center; @@ -105,7 +107,7 @@ } &__button { - @media screen and (max-width: 1023px) { + @include tablet-lg { margin-top: 1rem; } @@ -117,7 +119,7 @@ &__text { font-size: 16px; - @media screen and (max-width: 786px) { + @include mobile { padding: 0 1rem; } } @@ -129,7 +131,7 @@ justify-content: space-between; align-self: stretch; - @media (max-width: 1023px) { + @include tablet-lg { flex-direction: column; align-items: center; text-align: center; diff --git a/src/features/dashboard/components/apps-table/apps-table.scss b/src/features/dashboard/components/apps-table/apps-table.scss index 4a2942459..b17193c7e 100644 --- a/src/features/dashboard/components/apps-table/apps-table.scss +++ b/src/features/dashboard/components/apps-table/apps-table.scss @@ -1,3 +1,5 @@ +@use 'src/styles/mixins.scss' as *; + .apps_table { border: 1px solid var(--opacity-black-100); border-radius: 32px; @@ -8,13 +10,12 @@ flex-direction: column; border: none; margin: 0px; - - @media screen and (max-width: 500px) { - margin: 0 1rem; - } } table { + position: relative; + max-height: 560px; + overflow-y: auto; table-layout: fixed; border-collapse: collapse; display: flex; @@ -22,6 +23,10 @@ align-items: center; margin-inline: 48px; + @include tablet-lg { + margin-inline: 8px; + } + th, td, tr { @@ -29,8 +34,14 @@ border-bottom: 1px solid var(--solid-slate-75); text-align: left; height: 72px; - padding: 8px 16px; + padding: 8px; vertical-align: middle; + &:first-child { + padding-inline-start: 16px; + } + &:last-child { + padding-inline-end: 16px; + } } tr { background-color: transparent; @@ -38,12 +49,6 @@ } } - &__table_container { - position: relative; - max-height: 560px; - overflow-y: auto; - } - &__table_header { table-layout: fixed; border-collapse: collapse; @@ -80,7 +85,7 @@ padding: unset; } &__button { - @media screen and (max-width: 1023px) { + @include tablet-lg { margin: 10px 20px 0; padding-inline: 20px; } @@ -93,7 +98,7 @@ &__text { font-size: 16px; - @media screen and (max-width: 1023px) { + @include tablet-lg { padding: 0 1rem; } } @@ -109,7 +114,7 @@ margin-top: 5px; } - @media screen and (max-width: 786px) { + @include mobile { max-width: 100%; padding-inline: 45px; margin-bottom: 10px; @@ -127,7 +132,7 @@ margin-right: 3rem; margin-bottom: 1rem; - @media screen and (max-width: 1023px) { + @include tablet-lg { margin: 1rem 0; justify-content: center; gap: 10px; diff --git a/src/features/dashboard/components/apps-table/apps-table.tsx b/src/features/dashboard/components/apps-table/apps-table.tsx index 2be020297..53e9cdffe 100644 --- a/src/features/dashboard/components/apps-table/apps-table.tsx +++ b/src/features/dashboard/components/apps-table/apps-table.tsx @@ -251,7 +251,7 @@ const AppsTable = ({ apps }: AppsTableProps) => { /> ), accessor: 'name', - minWidth: 150, + minWidth: '20%', maxWidth: 200, }, { @@ -264,7 +264,7 @@ const AppsTable = ({ apps }: AppsTableProps) => { /> ), accessor: 'app_id', - minWidth: 120, + minWidth: '10%', maxWidth: 150, Cell: CopyTextCell, }, @@ -272,12 +272,14 @@ const AppsTable = ({ apps }: AppsTableProps) => { Header: translate({ message: 'OAuth scopes' }), accessor: 'scopes', Cell: ScopesCell, - minWidth: 230, + width: '20%', + minWidth: 180, }, { Header: translate({ message: 'OAuth redirect URL' }), accessor: 'redirect_uri', - width: 400, + width: '40%', + minWidth: 300, maxWidth: 520, Cell: CopyTextCell, }, @@ -286,6 +288,7 @@ const AppsTable = ({ apps }: AppsTableProps) => { id: 'actions', accessor: (originalRow) => originalRow.app_id, Cell: AppActionsCell, + minWidth: '15%', }, ]; return appTableColumns; diff --git a/src/features/dashboard/components/common-table/cell-scopes.module.scss b/src/features/dashboard/components/common-table/cell-scopes.module.scss index f894ac0e9..4118ec577 100644 --- a/src/features/dashboard/components/common-table/cell-scopes.module.scss +++ b/src/features/dashboard/components/common-table/cell-scopes.module.scss @@ -1,16 +1,20 @@ @use 'src/styles/utility' as *; +@use 'src/styles/mixins' as *; .scope { display: inline-block; - border: rem(0.1) solid var(--ifm-color-emphasis-400); + border: 1px solid var(--ifm-color-emphasis-400); border-radius: 4px; - padding: rem(0.2) rem(0.8); - font-size: rem(1.2); - margin: rem(0.5); + padding-inline: 4px; + font-size: 12px; + margin: 4px; color: var(--ifm-color-emphasis-700); + @include mobile { + padding-block: 2px; + } } .adminScope { - border: rem(0.1) solid var(--admin-border); + border: 1px solid var(--admin-border); color: var(--admin-text); } diff --git a/src/features/dashboard/index.tsx b/src/features/dashboard/index.tsx index 66633f6b7..00498b6d7 100644 --- a/src/features/dashboard/index.tsx +++ b/src/features/dashboard/index.tsx @@ -1,7 +1,7 @@ import React, { useEffect } from 'react'; import useAuthContext from '@site/src/hooks/useAuthContext'; import useAppManager from '@site/src/hooks/useAppManager'; -import MemoizedManageDashboard from './manage-dashboard'; +import ManageDashboard from './manage-dashboard'; import { Login } from '../Login/Login'; export const AppManager = () => { @@ -15,6 +15,6 @@ export const AppManager = () => { }; }, [setIsDashboard]); - if (is_logged_in) return ; + if (is_logged_in) return ; return ; }; diff --git a/src/features/dashboard/manage-apps/manage-apps.tsx b/src/features/dashboard/manage-apps/manage-apps.tsx index 258c739ac..debb4268e 100644 --- a/src/features/dashboard/manage-apps/manage-apps.tsx +++ b/src/features/dashboard/manage-apps/manage-apps.tsx @@ -2,7 +2,7 @@ import useAppManager from '@site/src/hooks/useAppManager'; import React, { useEffect } from 'react'; import AppManagePage from './app-manage-page'; import TokenManagePage from '../manage-tokens/token-manage-page'; -import CustomTabs from '@site/src/components/CustomTabs'; +import CustomTabs from '@site/src/components/custom-tabs'; import './manage-apps.scss'; import { TDashboardTab } from '@site/src/contexts/app-manager/app-manager.context'; diff --git a/src/features/dashboard/manage-dashboard/manage-dashboard.scss b/src/features/dashboard/manage-dashboard/manage-dashboard.scss index 13f3b4250..4be5bc234 100644 --- a/src/features/dashboard/manage-dashboard/manage-dashboard.scss +++ b/src/features/dashboard/manage-dashboard/manage-dashboard.scss @@ -10,6 +10,6 @@ margin-right: auto; @media screen and (max-width: 1440px) { - max-width: 90%; + padding-inline: calc(5vw - 1rem); } } diff --git a/src/hooks/useDeviceType/__tests__/useDeviceType.test.tsx b/src/hooks/useDeviceType/__tests__/useDeviceType.test.tsx index 6eae10da4..53078c7ba 100644 --- a/src/hooks/useDeviceType/__tests__/useDeviceType.test.tsx +++ b/src/hooks/useDeviceType/__tests__/useDeviceType.test.tsx @@ -6,7 +6,7 @@ describe('Use Device Type', () => { Object.defineProperty(window, 'matchMedia', { value: jest.fn().mockImplementation((query) => ({ matches: - query === '(max-width: 768px)' ? false : query === '(max-width: 1023px)' ? false : true, + query === '(max-width: 768px)' ? false : query === '(max-width: 1024px)' ? false : true, })), }); }); @@ -26,9 +26,9 @@ describe('Use Device Type', () => { expect(result.current.deviceType).toBe('mobile'); }); - it('should return tablet when window width is between 768px and 1023px', () => { + it('should return tablet when window width is between 768px and 1024px', () => { window.matchMedia = jest.fn().mockImplementation((query) => ({ - matches: query === '(max-width: 1023px)', + matches: query === '(max-width: 1024px)', })); const { result } = renderHook(() => useDeviceType()); diff --git a/src/hooks/useDeviceType/index.tsx b/src/hooks/useDeviceType/index.tsx index 332ba2e14..bb4b46156 100644 --- a/src/hooks/useDeviceType/index.tsx +++ b/src/hooks/useDeviceType/index.tsx @@ -14,7 +14,7 @@ const useDeviceType = (): TUseDeviceType => { const handleResize = () => { if (window.matchMedia('(max-width: 768px)').matches) { setDeviceType('mobile'); - } else if (window.matchMedia('(max-width: 1023px)').matches) { + } else if (window.matchMedia('(max-width: 1024px)').matches) { setDeviceType('tablet'); } else { setDeviceType('desktop'); diff --git a/src/theme/Layout/index.tsx b/src/theme/Layout/index.tsx index 005c2af77..03802c231 100644 --- a/src/theme/Layout/index.tsx +++ b/src/theme/Layout/index.tsx @@ -40,7 +40,7 @@ export default function Layout(props: Props): JSX.Element { className={clsx(ThemeClassNames.wrapper.main, styles.mainWrapper, wrapperClassName)} > }> - {children} +
{children}
From da340376e431538096aaeb6a0ba34a7e81a1979d Mon Sep 17 00:00:00 2001 From: Sandeep Date: Mon, 30 Sep 2024 14:49:22 +0800 Subject: [PATCH 09/12] refactor: :fire: refactored create token components --- src/components/Footer/Footer.module.scss | 6 +- src/components/Footer/index.tsx | 272 +++++++++--------- .../DropdownList/DropdownList.module.scss | 3 +- src/features/Apiexplorer/index.tsx | 106 +++---- src/features/Apiexplorer/styles.module.scss | 6 - .../api-token-form/api-token-form.tsx | 5 +- .../components/apps-table/apps-table.scss | 9 +- .../components/apps-table/apps-table.tsx | 16 +- .../components/common-table/common-table.tsx | 2 + .../token-register/token-register.tsx | 6 +- .../dashboard/manage-dashboard/index.tsx | 14 +- .../manage-dashboard/manage-dashboard.scss | 8 - src/styles/index.scss | 114 +------- src/theme/Layout/index.tsx | 2 +- src/theme/Navbar/Content/index.js | 33 ++- 15 files changed, 243 insertions(+), 359 deletions(-) diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss index 5fe8feb11..4327699ac 100644 --- a/src/components/Footer/Footer.module.scss +++ b/src/components/Footer/Footer.module.scss @@ -10,14 +10,12 @@ .FooterBody { display: flex; flex-direction: column; - padding: 48px; } .FooterSection { display: flex; flex-direction: row; gap: rem(9.6); - max-width: 1310px; } .FooterLogo { @@ -189,7 +187,7 @@ .FooterBody { display: flex; width: 100%; - padding: 32px 24px; + padding-block: 32px; } p { @@ -215,7 +213,7 @@ @media (max-width: 600px) { .FooterBody { - padding: 32px 16px; + padding-block: 32px; } .PaddedButton { display: flex; diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index 2e13e27fe..3d6a15c70 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -90,147 +90,149 @@ const Footer = () => { ]; return ( -
-
-
-
- -
-
-
-
- - API - - -
-
- - Deriv.com - - -
-
- -
-
- - Get connected - -

- Discuss ideas and share solutions with developers worldwide. -

-
- - +
+
+
+
+
+
-
- - We're here to help - -

- Email us at{' '} - - api-support@deriv.com - {' '} - if you need any assistance or support. -

-
- + API + + +
+
+ + Deriv.com + + +
+
+ +
+
+ + Get connected + +

+ Discuss ideas and share solutions with developers worldwide. +

+
+ + +
+
+
+ + We're here to help + +

+ Email us at{' '} + + api-support@deriv.com + {' '} + if you need any assistance or support. +

+
+ +
-
-
+ +
); }; diff --git a/src/features/Apiexplorer/Dropdown/DropdownList/DropdownList.module.scss b/src/features/Apiexplorer/Dropdown/DropdownList/DropdownList.module.scss index 59542cd32..6f46fdcca 100644 --- a/src/features/Apiexplorer/Dropdown/DropdownList/DropdownList.module.scss +++ b/src/features/Apiexplorer/Dropdown/DropdownList/DropdownList.module.scss @@ -9,7 +9,8 @@ } .dropdownList { - max-height: rem(70); + --overlay-height: 260px; + height: var(--overlay-height); overflow: auto; .dropdownSelect { padding: 0; diff --git a/src/features/Apiexplorer/index.tsx b/src/features/Apiexplorer/index.tsx index 66a1c9f51..e7d53993f 100644 --- a/src/features/Apiexplorer/index.tsx +++ b/src/features/Apiexplorer/index.tsx @@ -20,63 +20,65 @@ export default function ApiExplorerFeatures() { const has_info = Object.keys(request_info).length === 0; return ( <> -
- -
-
- - API Explorer - -
-
-
-
- - -
- {!has_info && ( -
-
- -
-
- -
+
+
+ +
+
+ + API Explorer + +
+
+
+
+ +
- )} + {!has_info && ( +
+
+ +
+
+ +
+
+ )} +
-
+
); } diff --git a/src/features/Apiexplorer/styles.module.scss b/src/features/Apiexplorer/styles.module.scss index 08f55c3c5..1a7fdc551 100644 --- a/src/features/Apiexplorer/styles.module.scss +++ b/src/features/Apiexplorer/styles.module.scss @@ -11,7 +11,6 @@ justify-content: space-between; width: 100%; margin-top: rem(4); - min-height: 89vh; .heading { text-align: center; @@ -21,11 +20,6 @@ display: flex; color: var(--ifm-color-emphasis-1000); - @media screen and (min-width: 1440px) { - width: 1310px; - margin: auto; - } - .playground { display: flex; justify-content: center; diff --git a/src/features/dashboard/components/api-token-form/api-token-form.tsx b/src/features/dashboard/components/api-token-form/api-token-form.tsx index 62763c3e0..a285cb764 100644 --- a/src/features/dashboard/components/api-token-form/api-token-form.tsx +++ b/src/features/dashboard/components/api-token-form/api-token-form.tsx @@ -7,9 +7,10 @@ import { scopesObjectToArray } from '@site/src/utils'; import ApiTokenCard from '../api-token-card'; import useCreateToken from '@site/src/features/dashboard/hooks/useCreateToken'; import * as yup from 'yup'; -import styles from './api-token-form.module.scss'; -import TokenNameRestrictions from '../token-name-restrictions/token-name-restrictions'; +import styles from './api-token.form.module.scss'; +import TokenNameRestrictions from '../token-name-restrictions'; import CreateTokenField from './create-token-field'; +import useApiToken from '@site/src/hooks/useApiToken'; const schema = yup .object({ diff --git a/src/features/dashboard/components/apps-table/apps-table.scss b/src/features/dashboard/components/apps-table/apps-table.scss index b17193c7e..07cbf3f18 100644 --- a/src/features/dashboard/components/apps-table/apps-table.scss +++ b/src/features/dashboard/components/apps-table/apps-table.scss @@ -26,10 +26,14 @@ @include tablet-lg { margin-inline: 8px; } + tbody { + tr { + width: 100%; + } + } th, - td, - tr { + td { border: 0px; border-bottom: 1px solid var(--solid-slate-75); text-align: left; @@ -50,6 +54,7 @@ } &__table_header { + width: 100%; table-layout: fixed; border-collapse: collapse; th { diff --git a/src/features/dashboard/components/apps-table/apps-table.tsx b/src/features/dashboard/components/apps-table/apps-table.tsx index 53e9cdffe..25dd25d8e 100644 --- a/src/features/dashboard/components/apps-table/apps-table.tsx +++ b/src/features/dashboard/components/apps-table/apps-table.tsx @@ -251,8 +251,7 @@ const AppsTable = ({ apps }: AppsTableProps) => { /> ), accessor: 'name', - minWidth: '20%', - maxWidth: 200, + width: '20%', }, { Header: ( @@ -264,31 +263,28 @@ const AppsTable = ({ apps }: AppsTableProps) => { /> ), accessor: 'app_id', - minWidth: '10%', - maxWidth: 150, Cell: CopyTextCell, + width: '10%', }, { Header: translate({ message: 'OAuth scopes' }), accessor: 'scopes', Cell: ScopesCell, - width: '20%', - minWidth: 180, + width: '15%', }, { Header: translate({ message: 'OAuth redirect URL' }), accessor: 'redirect_uri', - width: '40%', - minWidth: 300, - maxWidth: 520, Cell: CopyTextCell, + width: '40%', + maxWidth: 400, }, { Header: translate({ message: 'Actions' }), id: 'actions', accessor: (originalRow) => originalRow.app_id, Cell: AppActionsCell, - minWidth: '15%', + width: '10%', }, ]; return appTableColumns; diff --git a/src/features/dashboard/components/common-table/common-table.tsx b/src/features/dashboard/components/common-table/common-table.tsx index 967357487..e53f54af5 100644 --- a/src/features/dashboard/components/common-table/common-table.tsx +++ b/src/features/dashboard/components/common-table/common-table.tsx @@ -43,6 +43,7 @@ const CommonTable = ({ {...column.getHeaderProps()} key={column.getHeaderProps().key} style={{ + width: column.width ? column.width : 'auto', minWidth: column.minWidth === 0 ? 'auto' : column.minWidth, maxWidth: column.maxWidth > 1000 ? 'auto' : column.maxWidth, }} @@ -64,6 +65,7 @@ const CommonTable = ({ {...cell.getCellProps()} key={cell.getCellProps().key} style={{ + width: cell.column.width ? cell.column.width : 'auto', minWidth: cell.column.minWidth === 0 ? 'auto' : cell.column.minWidth, maxWidth: cell.column.maxWidth > 1000 ? 'auto' : cell.column.maxWidth, }} diff --git a/src/features/dashboard/components/token-register/token-register.tsx b/src/features/dashboard/components/token-register/token-register.tsx index 88f0e137b..b9353b525 100644 --- a/src/features/dashboard/components/token-register/token-register.tsx +++ b/src/features/dashboard/components/token-register/token-register.tsx @@ -6,9 +6,9 @@ import { scopesObjectToArray } from '@site/src/utils'; import ApiTokenCard from '../api-token-card'; import useCreateToken from '@site/src/features/dashboard/hooks/useCreateToken'; import * as yup from 'yup'; -import CreateTokenField from '../api-token-form'; -import AccountSwitcher from '@site/src/components/AccountSwitcher'; import './token-register.scss'; +import CreateTokenField from '../api-token-form/create-token-field'; +import AccountSwitcher from '@site/src/components/AccountSwitcher'; const schema = yup .object({ @@ -86,8 +86,6 @@ const TokenRegister = (props: HTMLAttributes) => { const { handleSubmit, register, - setValue, - getValues, reset, formState: { errors }, } = useForm({ diff --git a/src/features/dashboard/manage-dashboard/index.tsx b/src/features/dashboard/manage-dashboard/index.tsx index d4445183b..70adfea1a 100644 --- a/src/features/dashboard/manage-dashboard/index.tsx +++ b/src/features/dashboard/manage-dashboard/index.tsx @@ -116,17 +116,19 @@ const ManageDashboard = () => { const breadcrumbsLinks = [...commonLinks, tabSecndryLinks[currentTab]].filter(Boolean); return ( - + <> +
+
+ +
+ {renderScreen()} +
{error && } setAppRegisterModalOpen(false)} onConfigure={handleAppConfigure} /> -
- -
- {renderScreen()} - + ); }; diff --git a/src/features/dashboard/manage-dashboard/manage-dashboard.scss b/src/features/dashboard/manage-dashboard/manage-dashboard.scss index 4be5bc234..9f47c63b1 100644 --- a/src/features/dashboard/manage-dashboard/manage-dashboard.scss +++ b/src/features/dashboard/manage-dashboard/manage-dashboard.scss @@ -3,13 +3,5 @@ } .breadcrumbs-wrapper { - width: 100%; padding: 1rem 0; - max-width: 82rem; - margin-left: auto; - margin-right: auto; - - @media screen and (max-width: 1440px) { - padding-inline: calc(5vw - 1rem); - } } diff --git a/src/styles/index.scss b/src/styles/index.scss index e33ee95eb..f9160427b 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -280,7 +280,7 @@ div[class*='sidebarViewport'] { } .navbar { - padding: 0 5vw; + padding: 0; height: var(--nav-height); line-height: rem(2); @media (max-width: 996px) { @@ -290,121 +290,9 @@ div[class*='sidebarViewport'] { display: flex; align-items: center; gap: rem(1); - .search-overlay { - display: none; - } - &.search-closed ~ div[class*='navbarSearch'] { - display: none; - } - &.search-open { - .search-overlay { - display: inline-block; - position: fixed; - width: 100vw; - height: 100vh; - background-color: rgba(0, 0, 0, 0.4); - inset: 0; - - @media (max-width: 768px) { - width: rem(2.5); - height: rem(2.5); - background-color: unset; - background-image: url('/img/close_dialog.svg'); - background-repeat: no-repeat; - background-position: center; - background-size: rem(1.5); - inset: rem(1) rem(1) auto auto; - z-index: 1; - } - } - & + div[class*='searchBox'] { - position: fixed; - min-width: rem(32); - max-width: rem(79.2); - max-height: rem(48); - top: 5%; - width: 100%; - height: 100%; - border-radius: rem(1.6); - left: 50%; - transform: translateX(-50%); - padding: 0; - background-color: var(--ifm-color-white); - - @media (max-width: 768px) { - min-width: unset; - max-width: unset; - max-height: unset; - border-radius: unset; - top: 0; - } - - span[class*='searchBar'] { - width: 100%; - span[class*='dropdownMenu'] { - width: 100%; - max-width: unset; - background-color: unset; - box-shadow: none; - padding: 0; - div[class*='hitFooter'] a { - color: var(--colors-coral500); - } - div[class*='suggestion'] { - box-shadow: none; - border-radius: 0; - height: rem(4); - span[class*='hitAction'] { - display: none; - } - span[class*='hitWrapper'] { - span[class*='hitTitle'], - span[class*='hitPath'] { - text-align: left; - mark { - color: var(--colors-coral500); - } - } - } - &[class*='cursor'] { - background-color: var(--search-result); - } - } - } - } - .navbar__search { - margin: 0; - margin-top: rem(2); - display: flex; - justify-content: center; - text-align: center; - width: 100%; - - @media (max-width: 768px) { - margin-top: rem(4); - } - - button[class*='searchClearButton'] { - right: rem(3); - } - } - div[class*='searchHintContainer'] { - right: 5%; - } - } - } - } - &__search-input { - background: var(--ifm-color-white) url(/img/search.svg) rem(1.2) center / rem(1.6) rem(1.6); - background-repeat: no-repeat; - border: 1px solid var(--colors-greyLight500); - border-radius: rem(1.5); - height: rem(4); - width: calc(100% - 1.25rem) !important; } &__inner { @media screen and (min-width: 1440px) { - max-width: 1310px; gap: rem(14); margin: auto; } diff --git a/src/theme/Layout/index.tsx b/src/theme/Layout/index.tsx index 03802c231..005c2af77 100644 --- a/src/theme/Layout/index.tsx +++ b/src/theme/Layout/index.tsx @@ -40,7 +40,7 @@ export default function Layout(props: Props): JSX.Element { className={clsx(ThemeClassNames.wrapper.main, styles.mainWrapper, wrapperClassName)} > }> -
{children}
+ {children}
diff --git a/src/theme/Navbar/Content/index.js b/src/theme/Navbar/Content/index.js index fb4d7eb09..cca174e75 100644 --- a/src/theme/Navbar/Content/index.js +++ b/src/theme/Navbar/Content/index.js @@ -70,25 +70,28 @@ function NavbarContentLayout({ left, right }) {
); } + export default function NavbarContent() { const mobileSidebar = useNavbarMobileSidebar(); const items = useNavbarItems(); const [leftItems, rightItems] = splitNavbarItems(items); return ( - - - - - } - right={ - <> - - - {!mobileSidebar.disabled && } - - } - /> +
+ + + + + } + right={ + <> + + + {!mobileSidebar.disabled && } + + } + /> +
); } From a20241d1312b8083bb4ec008a38a221142cd7630 Mon Sep 17 00:00:00 2001 From: Sandeep Date: Mon, 30 Sep 2024 16:49:52 +0800 Subject: [PATCH 10/12] refactor: :sparkles: fixed spacing issues on app registeration page --- .../Apiexplorer/Dropdown/Dropdown.module.scss | 12 ++++------ .../DropdownList/DropdownList.module.scss | 22 ++++++++++++++--- .../Dropdown/DropdownList/index.tsx | 22 +++++++++-------- .../api-token-table/api-table.module.scss | 9 ++++--- .../api-token-table/api-token-table.tsx | 9 ++++++- .../components/app-register/app-register.tsx | 24 ++++++++++--------- 6 files changed, 60 insertions(+), 38 deletions(-) diff --git a/src/features/Apiexplorer/Dropdown/Dropdown.module.scss b/src/features/Apiexplorer/Dropdown/Dropdown.module.scss index 3d11f600f..22073d9cf 100644 --- a/src/features/Apiexplorer/Dropdown/Dropdown.module.scss +++ b/src/features/Apiexplorer/Dropdown/Dropdown.module.scss @@ -3,7 +3,6 @@ user-select: none; border: 1px solid var(--ifm-color-gray-400); position: relative; - overflow-x: hidden; .arrow { background-size: rem(2.2); @@ -21,24 +20,21 @@ } .dropdownBtn { - padding: rem(0.5) rem(0.5); + padding: 4px 8px; background: var(--ifm-color-white); color: var(--ifm-color-black); display: flex; align-items: center; - cursor: pointer; justify-content: space-between; font-size: rem(1.6); + &:hover { + cursor: pointer; + } } .dropdownContent { position: relative; - top: 110%; - padding-top: rem(1); - left: 0; background: var(--ifm-color-white); color: var(--ifm-color-black); - overflow: auto; - overflow-x: hidden; } } diff --git a/src/features/Apiexplorer/Dropdown/DropdownList/DropdownList.module.scss b/src/features/Apiexplorer/Dropdown/DropdownList/DropdownList.module.scss index 6f46fdcca..ab6b82f7f 100644 --- a/src/features/Apiexplorer/Dropdown/DropdownList/DropdownList.module.scss +++ b/src/features/Apiexplorer/Dropdown/DropdownList/DropdownList.module.scss @@ -1,9 +1,25 @@ @use 'src/styles/utility' as *; + +.dropdownWrapper { + position: absolute; + top: 0; + left: -1px; + width: calc(100% + 2px); + height: 322px; + z-index: 1000; + background-color: var(--ifm-color-white); + border: 1px solid var(--ifm-color-gray-300); + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +.dropdownInputWrapper { + padding: 16px; +} + .dropdownSearch { - padding: rem(0.4); - margin: rem(1); - width: 97%; + padding: 4px; + width: 100%; box-sizing: border-box; border: 1px solid var(--ifm-color-gray-300); } diff --git a/src/features/Apiexplorer/Dropdown/DropdownList/index.tsx b/src/features/Apiexplorer/Dropdown/DropdownList/index.tsx index bcc1c89d5..aa6fd4be0 100644 --- a/src/features/Apiexplorer/Dropdown/DropdownList/index.tsx +++ b/src/features/Apiexplorer/Dropdown/DropdownList/index.tsx @@ -44,16 +44,18 @@ const DropdownList: React.FC = ({ const filteredOptions = filterOptions(playground_requests, searchResults); return ( -
- { - setSearchResults(event.target.value); - }} - /> +
+
+ { + setSearchResults(event.target.value); + }} + /> +
diff --git a/src/features/dashboard/components/api-token-table/api-table.module.scss b/src/features/dashboard/components/api-token-table/api-table.module.scss index 7c5255894..48d9aad94 100644 --- a/src/features/dashboard/components/api-token-table/api-table.module.scss +++ b/src/features/dashboard/components/api-token-table/api-table.module.scss @@ -35,9 +35,6 @@ z-index: 1; table-layout: fixed; border-collapse: collapse; - display: flex; - flex-direction: column; - align-items: center; margin-inline: 48px; th, @@ -139,8 +136,10 @@ } &__texts { - flex: 1; - display: block; + gap: 1rem; + display: flex; + flex-direction: column; + max-width: 72%; } } } diff --git a/src/features/dashboard/components/api-token-table/api-token-table.tsx b/src/features/dashboard/components/api-token-table/api-token-table.tsx index 1e2dd6fc7..5f4c8f219 100644 --- a/src/features/dashboard/components/api-token-table/api-token-table.tsx +++ b/src/features/dashboard/components/api-token-table/api-token-table.tsx @@ -24,32 +24,39 @@ const tableColumns: TTokenColumn[] = [ { Header: 'Name', accessor: 'display_name', + width: '25%', + minWidth: 200, }, { Header: 'Account Type', Cell: AccountTypeCell, + width: '20%', }, { Header: 'Token', accessor: 'token', Cell: ApiTokenCell, + width: '15%', }, { Header: 'Token scopes', accessor: 'scopes', Cell: ScopesCell, - minWidth: 300, + width: '25%', + maxWidth: 300, }, { Header: 'Last used', accessor: 'last_used', Cell: ApiLastUsedCell, + width: '10%', }, { Header: 'Actions', id: 'actions', accessor: (originalRow) => originalRow.token, Cell: ({ row }) => , + width: '10%', }, ]; diff --git a/src/features/dashboard/components/app-register/app-register.tsx b/src/features/dashboard/components/app-register/app-register.tsx index c92249ec9..35ae4e617 100644 --- a/src/features/dashboard/components/app-register/app-register.tsx +++ b/src/features/dashboard/components/app-register/app-register.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Button } from '@deriv-com/quill-ui'; +import { Button, Text } from '@deriv-com/quill-ui'; import { useForm } from 'react-hook-form'; import { yupResolver } from '@hookform/resolvers/yup'; import './app-register.scss'; @@ -18,16 +18,18 @@ const TermsAndConditions: React.FC = ({ register }) => return (
-
From 054548442b902accd8f90606ee602278b577b04b Mon Sep 17 00:00:00 2001 From: Sandeep Date: Tue, 1 Oct 2024 11:21:36 +0800 Subject: [PATCH 11/12] refactor: :zap: footer fix with container --- src/components/Footer/index.tsx | 299 ++++++++++++++++++-------------- 1 file changed, 170 insertions(+), 129 deletions(-) diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index 0b6c55c99..720a343aa 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -1,10 +1,10 @@ import React from 'react'; import CustomAccordion from '../CustomAccordion'; -import { Text, Button } from '@deriv-com/quill-ui'; +import { Text, Button, Heading } from '@deriv-com/quill-ui'; import { LabelPairedArrowUpRightSmRegularIcon, SocialTelegramBlackIcon, - LabelPairedEnvelopeCaptionBoldIcon, + LabelPairedEnvelopeMdBoldIcon, } from '@deriv/quill-icons'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import Translate from '@docusaurus/Translate'; @@ -112,145 +112,186 @@ const Footer = () => { return (
-
-
-
-
- -
+
+
+
+
+
-
-
- - API - -
+
+
+ + API + + -
-
- - Deriv.com - - -
-
- -
-
- - Get connected - -

- Discuss ideas and share solutions with developers worldwide. -

- -
-
+
+ Deriv.com + +
+
+ +
+
+ + Get connected + +

+ + Discuss ideas and share solutions with developers worldwide. -

+

+
+ + +
+
+
+ + We're here to help + +

+ Email us at{' '} - - api-support@deriv.com - {' '} + + + + api-support@deriv.com + + + if you need any assistance or support. -

-
- -
+ +

+
+
-
+
+
); }; From 5f266a96a6b08096c7197286c1e63c833d86fd16 Mon Sep 17 00:00:00 2001 From: Sandeep Date: Tue, 1 Oct 2024 12:05:57 +0800 Subject: [PATCH 12/12] chore: :fire: style fix in tables --- .../dashboard/components/api-token-table/api-token-table.tsx | 4 ++-- src/features/dashboard/components/apps-table/apps-table.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/features/dashboard/components/api-token-table/api-token-table.tsx b/src/features/dashboard/components/api-token-table/api-token-table.tsx index 5f4c8f219..e1db7a151 100644 --- a/src/features/dashboard/components/api-token-table/api-token-table.tsx +++ b/src/features/dashboard/components/api-token-table/api-token-table.tsx @@ -49,14 +49,14 @@ const tableColumns: TTokenColumn[] = [ Header: 'Last used', accessor: 'last_used', Cell: ApiLastUsedCell, - width: '10%', + width: '15%', }, { Header: 'Actions', id: 'actions', accessor: (originalRow) => originalRow.token, Cell: ({ row }) => , - width: '10%', + width: '5%', }, ]; diff --git a/src/features/dashboard/components/apps-table/apps-table.tsx b/src/features/dashboard/components/apps-table/apps-table.tsx index 25dd25d8e..e5afe7e61 100644 --- a/src/features/dashboard/components/apps-table/apps-table.tsx +++ b/src/features/dashboard/components/apps-table/apps-table.tsx @@ -270,13 +270,13 @@ const AppsTable = ({ apps }: AppsTableProps) => { Header: translate({ message: 'OAuth scopes' }), accessor: 'scopes', Cell: ScopesCell, - width: '15%', + width: '18%', }, { Header: translate({ message: 'OAuth redirect URL' }), accessor: 'redirect_uri', Cell: CopyTextCell, - width: '40%', + width: '38%', maxWidth: 400, }, {