From f0186c62599b70498c310a8f1864988f83d3e3da Mon Sep 17 00:00:00 2001 From: sanjam chhatwal Date: Wed, 14 Jun 2023 15:25:25 +0400 Subject: [PATCH 1/4] fix: design changes for app manager --- .../ApiTokenCard/api-token.card.module.scss | 6 ++- .../components/ApiTokenCard/index.tsx | 4 +- .../ApiTokenTable/DeleteTokenDialog/index.tsx | 10 ++-- .../ApiTokenTable/__tests__/index.test.tsx | 4 +- .../ApiTokenTable/cells.module.scss | 48 +++++++++---------- .../__tests__/delete-app-dialog.test.tsx | 4 +- .../Dialogs/DeleteAppDialog/index.tsx | 2 +- 7 files changed, 40 insertions(+), 38 deletions(-) diff --git a/src/features/dashboard/components/ApiTokenCard/api-token.card.module.scss b/src/features/dashboard/components/ApiTokenCard/api-token.card.module.scss index 5cfe30187..3d600965f 100644 --- a/src/features/dashboard/components/ApiTokenCard/api-token.card.module.scss +++ b/src/features/dashboard/components/ApiTokenCard/api-token.card.module.scss @@ -19,10 +19,14 @@ font-size: var(--fontSizes-2xs); } + .description { + padding-left: rem(1); + } + .warning_container { display: flex; gap: rem(1); - background-color : #FFAD3A29; + background-color: #ffad3a29; padding: rem(0.8); font-size: var(--fontSizes-2xs); img { diff --git a/src/features/dashboard/components/ApiTokenCard/index.tsx b/src/features/dashboard/components/ApiTokenCard/index.tsx index e70baccd8..a825acd2e 100644 --- a/src/features/dashboard/components/ApiTokenCard/index.tsx +++ b/src/features/dashboard/components/ApiTokenCard/index.tsx @@ -19,11 +19,11 @@ const ApiTokenCard = ({ register, name, label, description, ...rest }: IApiToken
- + {description} diff --git a/src/features/dashboard/components/ApiTokenTable/DeleteTokenDialog/index.tsx b/src/features/dashboard/components/ApiTokenTable/DeleteTokenDialog/index.tsx index 02b666d40..352f43a51 100644 --- a/src/features/dashboard/components/ApiTokenTable/DeleteTokenDialog/index.tsx +++ b/src/features/dashboard/components/ApiTokenTable/DeleteTokenDialog/index.tsx @@ -21,19 +21,19 @@ const DeleteTokenDialog = ({ onDelete, setToggleModal }: TDeleteTokendialog) => () => [ { id: 0, - text: 'Yes, delete', - color: 'primary', + text: 'Cancel', + color: 'secondary', onClick: () => { setToggleModal(false); - onDelete(); }, }, { id: 1, - text: 'No, keep it', - color: 'secondary', + text: 'Yes, delete', + color: 'primary', onClick: () => { setToggleModal(false); + onDelete(); }, }, ], diff --git a/src/features/dashboard/components/ApiTokenTable/__tests__/index.test.tsx b/src/features/dashboard/components/ApiTokenTable/__tests__/index.test.tsx index 7cf71a0d0..f9291e2f1 100644 --- a/src/features/dashboard/components/ApiTokenTable/__tests__/index.test.tsx +++ b/src/features/dashboard/components/ApiTokenTable/__tests__/index.test.tsx @@ -119,7 +119,7 @@ describe('DeleteTokenDialog', () => { const delete_modal = await screen.findByText(/Are you sure you want to delete this token?/i); expect(delete_modal).toBeInTheDocument(); - const cancel_button = await screen.findByRole('button', { name: 'No, keep it' }); + const cancel_button = await screen.findByRole('button', { name: 'Cancel' }); await userEvent.click(cancel_button); expect(delete_modal).not.toBeInTheDocument(); @@ -134,7 +134,7 @@ describe('DeleteTokenDialog', () => { const delete_modal = await screen.findByText(/Are you sure you want to delete this token?/i); expect(delete_modal).toBeInTheDocument(); - const cancel_button = await screen.findByRole('button', { name: 'Yes, delete' }); + const cancel_button = await screen.findByRole('button', { name: 'Cancel' }); await userEvent.click(cancel_button); expect(mockDeleteToken).toHaveBeenCalledTimes(1); diff --git a/src/features/dashboard/components/ApiTokenTable/cells.module.scss b/src/features/dashboard/components/ApiTokenTable/cells.module.scss index e99a34a78..cf574478e 100644 --- a/src/features/dashboard/components/ApiTokenTable/cells.module.scss +++ b/src/features/dashboard/components/ApiTokenTable/cells.module.scss @@ -14,37 +14,35 @@ background-repeat: no-repeat; background-position: center; background-image: url(/img/delete.svg); - background-color: var(--colors-greyLight200); - border: 1px solid var(--colors-greyLight400); border-radius: 100%; cursor: pointer; &:hover { &::after { - content: 'Delete token'; - text-align: center; - position: absolute; - display: inline-block; - border-radius: 4px; - padding: rem(1); - color: var(--ifm-color-emphasis-100); - background-color: var(--ifm-color-emphasis-700); - font-size: var(--fontSizes-3xs); - top: calc(-50% - 20px); - left: 50%; - min-width: 100px; - transform: translate(-50%, -50%); + content: 'Delete token'; + text-align: center; + position: absolute; + display: inline-block; + border-radius: 4px; + padding: rem(1); + color: var(--ifm-color-emphasis-100); + background-color: var(--ifm-color-emphasis-700); + font-size: var(--fontSizes-3xs); + top: calc(-50% - 20px); + left: 50%; + min-width: 100px; + transform: translate(-50%, -50%); } &::before { - content: ''; - position: absolute; - width: 0; - height: 0; - border-left: rem(0.7) solid transparent; - border-right: rem(0.7) solid transparent; - border-top: rem(0.7) solid var(--ifm-color-emphasis-700); - top: calc(-50% + 2px); - transform: translate(-50%, -50%); - left: 50%; + content: ''; + position: absolute; + width: 0; + height: 0; + border-left: rem(0.7) solid transparent; + border-right: rem(0.7) solid transparent; + border-top: rem(0.7) solid var(--ifm-color-emphasis-700); + top: calc(-50% + 2px); + transform: translate(-50%, -50%); + left: 50%; } } } diff --git a/src/features/dashboard/components/Dialogs/DeleteAppDialog/__tests__/delete-app-dialog.test.tsx b/src/features/dashboard/components/Dialogs/DeleteAppDialog/__tests__/delete-app-dialog.test.tsx index 109dd08b2..c0d4c34b6 100644 --- a/src/features/dashboard/components/Dialogs/DeleteAppDialog/__tests__/delete-app-dialog.test.tsx +++ b/src/features/dashboard/components/Dialogs/DeleteAppDialog/__tests__/delete-app-dialog.test.tsx @@ -46,13 +46,13 @@ describe('Delete App Dialog', () => { it('Should render proper buttons', () => { const okButton = screen.getByRole('button', { name: /yes, delete/i }); - const cancelButton = screen.getByRole('button', { name: /no, keep it/i }); + const cancelButton = screen.getByRole('button', { name: /Cancel/i }); expect(okButton).toBeInTheDocument(); expect(cancelButton).toBeInTheDocument(); }); it('Should call onClose on cancel button click', async () => { - const cancelButton = screen.getByRole('button', { name: /no, keep it/i }); + const cancelButton = screen.getByRole('button', { name: /cancel/i }); await userEvent.click(cancelButton); diff --git a/src/features/dashboard/components/Dialogs/DeleteAppDialog/index.tsx b/src/features/dashboard/components/Dialogs/DeleteAppDialog/index.tsx index 334d77ab1..608fcfb1b 100644 --- a/src/features/dashboard/components/Dialogs/DeleteAppDialog/index.tsx +++ b/src/features/dashboard/components/Dialogs/DeleteAppDialog/index.tsx @@ -33,7 +33,7 @@ const DeleteAppDialog = ({ appId, onClose }: TDeleteAppDialogProps) => { }, { id: 1, - text: 'No, keep it', + text: 'Cancel', color: 'secondary', onClick: () => { onClose(); From 29ae3704e57f3fb8ed2c8ff9fabfe37594c2879d Mon Sep 17 00:00:00 2001 From: sanjam chhatwal Date: Wed, 14 Jun 2023 15:29:51 +0400 Subject: [PATCH 2/4] fix: tests --- .../dashboard/components/ApiTokenTable/__tests__/index.test.tsx | 2 +- .../components/AppsTable/__tests__/apps-table.test.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/features/dashboard/components/ApiTokenTable/__tests__/index.test.tsx b/src/features/dashboard/components/ApiTokenTable/__tests__/index.test.tsx index f9291e2f1..d773fe29f 100644 --- a/src/features/dashboard/components/ApiTokenTable/__tests__/index.test.tsx +++ b/src/features/dashboard/components/ApiTokenTable/__tests__/index.test.tsx @@ -134,7 +134,7 @@ describe('DeleteTokenDialog', () => { const delete_modal = await screen.findByText(/Are you sure you want to delete this token?/i); expect(delete_modal).toBeInTheDocument(); - const cancel_button = await screen.findByRole('button', { name: 'Cancel' }); + const cancel_button = await screen.findByRole('button', { name: 'Yes, delete' }); await userEvent.click(cancel_button); expect(mockDeleteToken).toHaveBeenCalledTimes(1); diff --git a/src/features/dashboard/components/AppsTable/__tests__/apps-table.test.tsx b/src/features/dashboard/components/AppsTable/__tests__/apps-table.test.tsx index 14f1e44b2..d53e79fd1 100644 --- a/src/features/dashboard/components/AppsTable/__tests__/apps-table.test.tsx +++ b/src/features/dashboard/components/AppsTable/__tests__/apps-table.test.tsx @@ -88,7 +88,7 @@ describe('Apps Table', () => { const deleteDialogTitle = await screen.findByText('Are you sure you want to delete this app?'); expect(deleteDialogTitle).toBeInTheDocument(); - const closeDeleteDialog = await screen.findByText(/no, keep it/i); + const closeDeleteDialog = await screen.findByText(/cancel/i); await userEvent.click(closeDeleteDialog); expect(deleteDialogTitle).not.toBeInTheDocument(); From ec0401ee7f78357898a942568a6395815e1ee60d Mon Sep 17 00:00:00 2001 From: sanjam chhatwal Date: Mon, 19 Jun 2023 13:36:45 +0400 Subject: [PATCH 3/4] fix: valid dialog test --- .../components/ApiTokenTable/DeleteTokenDialog/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/dashboard/components/ApiTokenTable/DeleteTokenDialog/index.tsx b/src/features/dashboard/components/ApiTokenTable/DeleteTokenDialog/index.tsx index 352f43a51..e5a783eda 100644 --- a/src/features/dashboard/components/ApiTokenTable/DeleteTokenDialog/index.tsx +++ b/src/features/dashboard/components/ApiTokenTable/DeleteTokenDialog/index.tsx @@ -46,7 +46,7 @@ const DeleteTokenDialog = ({ onDelete, setToggleModal }: TDeleteTokendialog) =>
Date: Tue, 20 Jun 2023 10:25:56 +0400 Subject: [PATCH 4/4] fix: design changes for app manager --- .../components/ApiTokenCard/api-token.card.module.scss | 2 +- src/features/dashboard/components/ApiTokenCard/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/features/dashboard/components/ApiTokenCard/api-token.card.module.scss b/src/features/dashboard/components/ApiTokenCard/api-token.card.module.scss index 3d600965f..dd0b38815 100644 --- a/src/features/dashboard/components/ApiTokenCard/api-token.card.module.scss +++ b/src/features/dashboard/components/ApiTokenCard/api-token.card.module.scss @@ -20,7 +20,7 @@ } .description { - padding-left: rem(1); + padding-right: rem(1); } .warning_container { diff --git a/src/features/dashboard/components/ApiTokenCard/index.tsx b/src/features/dashboard/components/ApiTokenCard/index.tsx index a825acd2e..f0ebb1152 100644 --- a/src/features/dashboard/components/ApiTokenCard/index.tsx +++ b/src/features/dashboard/components/ApiTokenCard/index.tsx @@ -19,7 +19,7 @@ const ApiTokenCard = ({ register, name, label, description, ...rest }: IApiToken