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

Commit 7c72053

Browse files
sanjam-derivsanjam-deriv
authored
Merge pull request #253 from sanjam-deriv/dynamictokenlabel
chore: add dynamic token label
2 parents b8ab24c + 1d68c32 commit 7c72053

File tree

3 files changed

+118
-73
lines changed

3 files changed

+118
-73
lines changed

‎src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -36,14 +36,14 @@ const CreateTokenField = ({
3636
}: TCreateTokenField) => {
3737
const { tokens } = useApiToken();
3838
const [input_value, setInputValue] = useState('');
39+
const numberOfTokens = tokens.length;
3940

4041
useEffect(() => {
4142
if (form_is_cleared) {
4243
setInputValue('');
4344
setFormIsCleared(false);
4445
}
4546
}, [form_is_cleared]);
46-
4747
const getTokenNames = useMemo(() => {
4848
const token_names = [];
4949
for (const token_object of tokens) {
@@ -75,21 +75,30 @@ const CreateTokenField = ({
7575
</Text>
7676
</div>
7777
</div>
78-
<div
79-
onChange={(e) => setInputValue((e.target as HTMLInputElement).value)}
80-
className={`${styles.customTextInput} ${error_border_active ? 'error-border' : ''}`}
81-
>
82-
<input
83-
className={`${error_border_active ? 'error-border' : ''}`}
84-
type='text'
85-
name='name'
86-
{...register}
87-
placeholder=' '
88-
/>
78+
<div className={styles.tokenWrapper}>
79+
<div
80+
onChange={(e) => setInputValue((e.target as HTMLInputElement).value)}
81+
className={`${styles.customTextInput} ${error_border_active ? 'error-border' : ''}`}
82+
>
83+
<input
84+
className={`${error_border_active ? 'error-border' : ''}`}
85+
type='text'
86+
name='name'
87+
{...register}
88+
placeholder=''
89+
/>
90+
{is_toggle && <TokenCreationDialogSuccess setToggleModal={setToggleModal} />}
91+
<label
92+
htmlFor='playground-request'
93+
className={styles.inlineLabel}
94+
data-testid='token-count-label'
95+
>
96+
Token name (You&apos;ve created <b>{numberOfTokens}</b> out of 30 tokens )
97+
</label>
98+
</div>
8999
<Button disabled={disable_button} type='submit'>
90100
Create
91101
</Button>
92-
{is_toggle && <TokenCreationDialogSuccess setToggleModal={setToggleModal} />}
93102
</div>
94103
{errors && errors.name && (
95104
<Text as='span' type='paragraph-1' className='error-message'>

‎src/features/dashboard/components/ApiTokenForm/__tests__/api-token.form.test.tsx

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { cleanup, render, screen, within } from '@site/src/test-utils';
2+
import { cleanup, render, screen, waitFor, within } from '@site/src/test-utils';
33
import userEvent from '@testing-library/user-event';
44
import ApiTokenForm from '../api-token.form';
55
import useCreateToken from '../../../hooks/useCreateToken';
@@ -134,6 +134,13 @@ describe('Home Page', () => {
134134
expect(adminCheckbox.checked).toBeTruthy();
135135
});
136136

137+
it('Should show dynamic token label', async () => {
138+
const tokenLabel = screen.getByTestId('token-count-label');
139+
await waitFor(() => {
140+
expect(tokenLabel).toBeVisible();
141+
});
142+
});
143+
137144
it('Should create token on form submit', async () => {
138145
const nameInput = screen.getByRole('textbox');
139146

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

165+
it('Should update token a value on create token', async () => {
166+
const tokenLabel = screen.getByTestId('token-count-label');
167+
const nameInput = screen.getByRole('textbox');
168+
169+
await userEvent.type(nameInput, 'test create token');
170+
171+
const submitButton = screen.getByRole('button', { name: /Create/i });
172+
await userEvent.click(submitButton);
173+
174+
await waitFor(() => {
175+
expect(tokenLabel).toHaveTextContent('2');
176+
});
177+
});
178+
158179
it('should hide restrictions if error is present', async () => {
159180
const nameInput = screen.getByRole('textbox');
160181
const restrictions = screen.getByRole('list');

‎src/features/dashboard/components/ApiTokenForm/api-token.form.module.scss

Lines changed: 74 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -48,69 +48,59 @@ form {
4848
}
4949
}
5050

51-
.customTextInput {
52-
align-items: center;
53-
border: 1px solid var(--colors-greyLight400);
54-
border-radius: rem(1.6);
51+
.tokenWrapper {
5552
display: flex;
56-
position: relative;
57-
box-sizing: border-box;
58-
margin: rem(0.5) 0;
59-
&:hover {
60-
border: 1px solid var(--colors-greyLight600);
61-
}
62-
&:focus-within {
63-
border-color: var(--colors-blue500);
64-
}
53+
flex-direction: row;
54+
align-items: center;
6555
button {
66-
border-top-left-radius: 0;
67-
border-bottom-left-radius: 0;
56+
border-radius: 0 rem(1.6) rem(1.6) 0;
6857
height: rem(3);
69-
border-top-right-radius: rem(1.6);
70-
border-bottom-right-radius: rem(1.6);
71-
}
72-
label {
73-
position: absolute;
74-
color: var(--colors-greyLight600);
75-
left: rem(1.2);
76-
pointer-events: none;
77-
transform-origin: top left;
78-
transition: all 0.25s ease;
79-
white-space: nowrap;
80-
width: calc(100% - 100px);
81-
white-space: nowrap;
82-
overflow: hidden;
83-
text-overflow: ellipsis;
58+
@media (max-width: 425px) {
59+
border-radius: rem(1.6);
60+
width: 91%;
61+
}
8462
}
85-
input[type='text'],
86-
input[type='number'] {
87-
background: 0 0;
88-
box-sizing: border-box;
89-
color: var(--ifm-color-emphasis-1000);
90-
height: rem(4);
91-
min-width: 0;
63+
64+
.customTextInput {
65+
align-items: center;
66+
border: 1px solid var(--colors-greyLight400);
67+
border-radius: rem(1.6) 0 0 rem(1.6);
68+
display: flex;
9269
width: 100%;
93-
border: none;
94-
text-indent: rem(1.2);
95-
font-size: rem(1.6);
96-
&:not(:placeholder-shown) ~ label {
97-
color: var(--colors-blue400);
98-
background-color: var(--ifm-color-emphasis-0);
99-
padding: 0 rem(0.4);
100-
transform: translateY(rem(-2)) scale(0.75);
101-
width: unset;
102-
@media screen and (min-width: 320px) and (max-width: 425px) {
103-
font-size: rem(1.4);
104-
}
105-
&.tokenInputLabel {
106-
color: var(--smoke);
107-
}
70+
position: relative;
71+
box-sizing: border-box;
72+
margin: rem(0.5) 0;
73+
&:hover {
74+
border: 1px solid var(--colors-greyLight600);
10875
}
109-
&:focus {
110-
outline-color: unset;
111-
outline: unset;
112-
border-radius: rem(1.6);
113-
& ~ label {
76+
&:focus-within {
77+
border-color: var(--colors-blue500);
78+
}
79+
label {
80+
position: absolute;
81+
color: var(--colors-greyLight600);
82+
left: rem(1.2);
83+
pointer-events: none;
84+
transform-origin: top left;
85+
transition: all 0.25s ease;
86+
white-space: nowrap;
87+
width: calc(100% - 100px);
88+
white-space: nowrap;
89+
overflow: hidden;
90+
text-overflow: ellipsis;
91+
}
92+
input[type='text'],
93+
input[type='number'] {
94+
background: 0 0;
95+
box-sizing: border-box;
96+
color: var(--ifm-color-emphasis-1000);
97+
height: rem(4);
98+
min-width: 0;
99+
width: 100%;
100+
border: none;
101+
text-indent: rem(1.2);
102+
font-size: rem(1.6);
103+
&:not(:placeholder-shown) ~ label {
114104
color: var(--colors-blue400);
115105
background-color: var(--ifm-color-emphasis-0);
116106
padding: 0 rem(0.4);
@@ -123,11 +113,36 @@ form {
123113
color: var(--smoke);
124114
}
125115
}
116+
&:focus {
117+
outline-color: unset;
118+
outline: unset;
119+
border-radius: rem(1.6);
120+
& ~ label {
121+
color: var(--colors-blue400);
122+
background-color: var(--ifm-color-emphasis-0);
123+
padding: 0 rem(0.4);
124+
transform: translateY(rem(-2)) scale(0.75);
125+
width: unset;
126+
@media screen and (min-width: 320px) and (max-width: 425px) {
127+
font-size: rem(1.4);
128+
}
129+
&.tokenInputLabel {
130+
color: var(--smoke);
131+
}
132+
}
133+
}
134+
&::placeholder {
135+
color: var(--colors-greyLight600);
136+
}
126137
}
127-
&::placeholder {
128-
color: var(--colors-greyLight600);
138+
@media (max-width: 425px) {
139+
border-radius: rem(1.6);
129140
}
130141
}
142+
@media (max-width: 425px) {
143+
flex-direction: column;
144+
gap: rem(0.5);
145+
}
131146
}
132147

133148
.card_wrapper {

0 commit comments

Comments
 (0)