Skip to content
This repository was archived by the owner on May 13, 2024. It is now read-only.

fix: design changes for app manager #188

Merged
hubert-deriv merged 4 commits into from
Jun 27, 2023
Merged

fix: design changes for app manager #188

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f0186c6
fix: design changes for app manager
sanjam-deriv Jun 14, 2023
29ae370
fix: tests
sanjam-deriv Jun 14, 2023
ec0401e
fix: valid dialog test
sanjam-deriv Jun 19, 2023
3a7afde
fix: design changes for app manager
sanjam-deriv Jun 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion src/features/dashboard/components/ApiTokenCard/api-token.card.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,14 @@
font-size: var(--fontSizes-2xs);
}

.description {
padding-right: 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 {
Expand Down
4 changes: 2 additions & 2 deletions src/features/dashboard/components/ApiTokenCard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@ const ApiTokenCard = ({ register, name, label, description, ...rest }: IApiToken
<div className={styles.api_token_card_input}>
<CustomCheckbox name={name} id={`${name}-scope`} register={register(name)}>
<label data-testid={`card-label-${name}`} htmlFor={`${name}-scope`}>
<b>{label}</b>
<b> {label} </b>
</label>
</CustomCheckbox>
</div>
<Text role={'definition'} as={'p'} type={'small'}>
<Text role={'definition'} as={'p'} type={'small'} className={styles.description}>
{description}
</Text>
<React.Fragment>
Expand Down
12 changes: 6 additions & 6 deletions src/features/dashboard/components/ApiTokenTable/DeleteTokenDialog/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
},
},
],
Expand All @@ -46,7 +46,7 @@ const DeleteTokenDialog = ({ onDelete, setToggleModal }: TDeleteTokendialog) =>
<div className='modal-overlay'>
<Modal.Overlay />
<Modal.DialogContent
title='Deleting token'
title='Delete token'
content='Are you sure you want to delete this token?'
action_buttons={actionButtons}
has_close_button
Expand Down
2 changes: 1 addition & 1 deletion src/features/dashboard/components/ApiTokenTable/__tests__/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
48 changes: 23 additions & 25 deletions src/features/dashboard/components/ApiTokenTable/cells.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/features/dashboard/components/AppsTable/__tests__/apps-table.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
4 changes: 2 additions & 2 deletions ...eatures/dashboard/components/Dialogs/DeleteAppDialog/__tests__/delete-app-dialog.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 });
Comment on lines -49 to +55
Copy link
Contributor

@matin-deriv matin-deriv Jun 15, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[Question]: why one of the word starts with a capital letter and not the other one?

Copy link
Contributor Author

@sanjam-deriv sanjam-deriv Jun 15, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Anything you write in between the // it only checks for the words inside the ui and ignores capital letters. so their will be no differnce if we use capital or small letters in the test case


await userEvent.click(cancelButton);

Expand Down
2 changes: 1 addition & 1 deletion src/features/dashboard/components/Dialogs/DeleteAppDialog/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const DeleteAppDialog = ({ appId, onClose }: TDeleteAppDialogProps) => {
},
{
id: 1,
text: 'No, keep it',
text: 'Cancel',
color: 'secondary',
onClick: () => {
onClose();
Expand Down