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

Commit

Permalink
Merge pull request #253 from sanjam-deriv/dynamictokenlabel
Browse files Browse the repository at this point in the history 
chore: add dynamic token label
  • Loading branch information
@sanjam-deriv
sanjam-deriv authored Nov 7, 2023
2 parents b8ab24c + 1d68c32 commit 7c72053
Show file tree
Hide file tree
Showing 3 changed files with 118 additions and 73 deletions.
35 changes: 22 additions & 13 deletions src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,14 @@ const CreateTokenField = ({
}: TCreateTokenField) => {
const { tokens } = useApiToken();
const [input_value, setInputValue] = useState('');
const numberOfTokens = tokens.length;

useEffect(() => {
if (form_is_cleared) {
setInputValue('');
setFormIsCleared(false);
}
}, [form_is_cleared]);

const getTokenNames = useMemo(() => {
const token_names = [];
for (const token_object of tokens) {
Expand Down Expand Up @@ -75,21 +75,30 @@ const CreateTokenField = ({
</Text>
</div>
</div>
<div
onChange={(e) => setInputValue((e.target as HTMLInputElement).value)}
className={`${styles.customTextInput} ${error_border_active ? 'error-border' : ''}`}
>
<input
className={`${error_border_active ? 'error-border' : ''}`}
type='text'
name='name'
{...register}
placeholder=' '
/>
<div className={styles.tokenWrapper}>
<div
onChange={(e) => setInputValue((e.target as HTMLInputElement).value)}
className={`${styles.customTextInput} ${error_border_active ? 'error-border' : ''}`}
>
<input
className={`${error_border_active ? 'error-border' : ''}`}
type='text'
name='name'
{...register}
placeholder=''
/>
{is_toggle && <TokenCreationDialogSuccess setToggleModal={setToggleModal} />}
<label
htmlFor='playground-request'
className={styles.inlineLabel}
data-testid='token-count-label'
>
Token name (You&apos;ve created <b>{numberOfTokens}</b> out of 30 tokens )
</label>
</div>
<Button disabled={disable_button} type='submit'>
Create
</Button>
{is_toggle && <TokenCreationDialogSuccess setToggleModal={setToggleModal} />}
</div>
{errors && errors.name && (
<Text as='span' type='paragraph-1' className='error-message'>
Expand Down
23 changes: 22 additions & 1 deletion src/features/dashboard/components/ApiTokenForm/__tests__/api-token.form.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { cleanup, render, screen, within } from '@site/src/test-utils';
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 useCreateToken from '../../../hooks/useCreateToken';
Expand Down Expand Up @@ -134,6 +134,13 @@ describe('Home Page', () => {
expect(adminCheckbox.checked).toBeTruthy();
});

it('Should show dynamic token label', async () => {
const tokenLabel = screen.getByTestId('token-count-label');
await waitFor(() => {
expect(tokenLabel).toBeVisible();
});
});

it('Should create token on form submit', async () => {
const nameInput = screen.getByRole('textbox');

Expand All @@ -155,6 +162,20 @@ describe('Home Page', () => {
expect(error).toBeVisible;
});

it('Should update token a value on create token', async () => {
const tokenLabel = screen.getByTestId('token-count-label');
const nameInput = screen.getByRole('textbox');

await userEvent.type(nameInput, 'test create token');

const submitButton = screen.getByRole('button', { name: /Create/i });
await userEvent.click(submitButton);

await waitFor(() => {
expect(tokenLabel).toHaveTextContent('2');
});
});

it('should hide restrictions if error is present', async () => {
const nameInput = screen.getByRole('textbox');
const restrictions = screen.getByRole('list');
Expand Down
133 changes: 74 additions & 59 deletions src/features/dashboard/components/ApiTokenForm/api-token.form.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,69 +48,59 @@ form {
}
}

.customTextInput {
align-items: center;
border: 1px solid var(--colors-greyLight400);
border-radius: rem(1.6);
.tokenWrapper {
display: flex;
position: relative;
box-sizing: border-box;
margin: rem(0.5) 0;
&:hover {
border: 1px solid var(--colors-greyLight600);
}
&:focus-within {
border-color: var(--colors-blue500);
}
flex-direction: row;
align-items: center;
button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-radius: 0 rem(1.6) rem(1.6) 0;
height: rem(3);
border-top-right-radius: rem(1.6);
border-bottom-right-radius: rem(1.6);
}
label {
position: absolute;
color: var(--colors-greyLight600);
left: rem(1.2);
pointer-events: none;
transform-origin: top left;
transition: all 0.25s ease;
white-space: nowrap;
width: calc(100% - 100px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@media (max-width: 425px) {
border-radius: rem(1.6);
width: 91%;
}
}
input[type='text'],
input[type='number'] {
background: 0 0;
box-sizing: border-box;
color: var(--ifm-color-emphasis-1000);
height: rem(4);
min-width: 0;

.customTextInput {
align-items: center;
border: 1px solid var(--colors-greyLight400);
border-radius: rem(1.6) 0 0 rem(1.6);
display: flex;
width: 100%;
border: none;
text-indent: rem(1.2);
font-size: rem(1.6);
&:not(:placeholder-shown) ~ label {
color: var(--colors-blue400);
background-color: var(--ifm-color-emphasis-0);
padding: 0 rem(0.4);
transform: translateY(rem(-2)) scale(0.75);
width: unset;
@media screen and (min-width: 320px) and (max-width: 425px) {
font-size: rem(1.4);
}
&.tokenInputLabel {
color: var(--smoke);
}
position: relative;
box-sizing: border-box;
margin: rem(0.5) 0;
&:hover {
border: 1px solid var(--colors-greyLight600);
}
&:focus {
outline-color: unset;
outline: unset;
border-radius: rem(1.6);
& ~ label {
&:focus-within {
border-color: var(--colors-blue500);
}
label {
position: absolute;
color: var(--colors-greyLight600);
left: rem(1.2);
pointer-events: none;
transform-origin: top left;
transition: all 0.25s ease;
white-space: nowrap;
width: calc(100% - 100px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
input[type='text'],
input[type='number'] {
background: 0 0;
box-sizing: border-box;
color: var(--ifm-color-emphasis-1000);
height: rem(4);
min-width: 0;
width: 100%;
border: none;
text-indent: rem(1.2);
font-size: rem(1.6);
&:not(:placeholder-shown) ~ label {
color: var(--colors-blue400);
background-color: var(--ifm-color-emphasis-0);
padding: 0 rem(0.4);
Expand All @@ -123,11 +113,36 @@ form {
color: var(--smoke);
}
}
&:focus {
outline-color: unset;
outline: unset;
border-radius: rem(1.6);
& ~ label {
color: var(--colors-blue400);
background-color: var(--ifm-color-emphasis-0);
padding: 0 rem(0.4);
transform: translateY(rem(-2)) scale(0.75);
width: unset;
@media screen and (min-width: 320px) and (max-width: 425px) {
font-size: rem(1.4);
}
&.tokenInputLabel {
color: var(--smoke);
}
}
}
&::placeholder {
color: var(--colors-greyLight600);
}
}
&::placeholder {
color: var(--colors-greyLight600);
@media (max-width: 425px) {
border-radius: rem(1.6);
}
}
@media (max-width: 425px) {
flex-direction: column;
gap: rem(0.5);
}
}

.card_wrapper {
Expand Down

0 comments on commit 7c72053

Please sign in to comment.