Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-31 00:16:47 +01:00
Code Issues Projects Releases Wiki Activity

feat: token input improvements (#5155)

Browse Source 
Rename `Api` to `API`
Add clear btn to token input
Add arrow to project and environment input tooltips

Closes #
[1-1549](https://linear.app/unleash/issue/1-1549/token-input-improvements)

---------

Signed-off-by: andreas-unleash <andreas@getunleash.ai>
This commit is contained in:
andreas-unleash 2023-10-26 12:39:30 +03:00 committed by GitHub
parent 2c7b7c90e0
commit ee44fae6ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 55 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundConnectionFieldset/PlaygroundConnectionFieldset.test.tsx
View File

@ -7,7 +7,7 @@ import { useState } from 'react';
const server = testServerSetup();
beforeEach(() => {
testServerRoute(server, '/api/admin/ui-config', {
testServerRoute(server, '/API/admin/ui-config', {
versionInfo: {
current: { oss: 'version', enterprise: 'version' },
},
@ -17,7 +17,7 @@ beforeEach(() => {
});
testServerRoute(
server,
'/api/admin/projects',
'/API/admin/projects',
{
projects: [
{
@ -35,7 +35,7 @@ beforeEach(() => {
);
testServerRoute(
server,
'/api/admin/api-tokens',
'/API/admin/API-tokens',
{
tokens: [
{
@ -72,7 +72,7 @@ const Component = () => {
test('should parse project and environment from token input', async () => {
render(<Component />);
const tokenInput = await screen.findByLabelText('Api token');
const tokenInput = await screen.findByLabelText('API token');
fireEvent.change(tokenInput, {
target: {
value: 'default:development.964a287e1b728cb5f4f3e0120df92cb5',
@ -100,7 +100,7 @@ test('should parse project and environment from token input', async () => {
test('should load projects from token definition if project is []', async () => {
render(<Component />);
const tokenInput = await screen.findByLabelText('Api token');
const tokenInput = await screen.findByLabelText('API token');
fireEvent.change(tokenInput, {
target: { value: '[]:development.964a287e1b728cb5f4f3e0120df92cb5' },
});
@ -127,7 +127,7 @@ test('should load projects from token definition if project is []', async () =>
test('should show an error when admin token', async () => {
render(<Component />);
const tokenInput = await screen.findByLabelText('Api token');
const tokenInput = await screen.findByLabelText('API token');
fireEvent.change(tokenInput, {
target: { value: '*:*.964a287e1b728cb5f4f3e0120df92cb5' },
});
@ -148,3 +148,20 @@ test('should show an error when admin token', async () => {
expect(environmentInput).toBeDisabled();
await screen.findByText('Admin tokens are not supported in the playground');
});
test('should have a working clear button when token is filled', async () => {
render(<Component />);
const tokenInput = await screen.findByLabelText('API token');
fireEvent.change(tokenInput, {
target: {
value: 'default:development.964a287e1b728cb5f4f3e0120df92cb5',
},
});
const clear = await screen.findByTestId('TOKEN_INPUT_CLEAR_BTN');
const button = within(clear).getByRole('button');
fireEvent.click(button);
expect(tokenInput).toHaveValue('');
});

34
frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundConnectionFieldset/PlaygroundConnectionFieldset.tsx
View File

@ -2,6 +2,9 @@ import React, { ComponentProps, useState, VFC } from 'react';
import {
Autocomplete,
Box,
IconButton,
InputAdornment,
styled,
TextField,
Tooltip,
Typography,
@ -20,6 +23,7 @@ import {
extractProjectEnvironmentFromToken,
validateTokenFormat,
} from '../../playground.utils';
import { Clear } from '@mui/icons-material';
interface IPlaygroundConnectionFieldsetProps {
environments: string[];
@ -38,6 +42,10 @@ interface IOption {
const allOption: IOption = { label: 'ALL', id: '*' };
const SmallClear = styled(Clear)({
fontSize: '1.25rem',
});
export const PlaygroundConnectionFieldset: VFC<
IPlaygroundConnectionFieldsetProps
> = ({
@ -201,6 +209,23 @@ export const PlaygroundConnectionFieldset: VFC<
setTokenError(undefined);
};
const clearToken = () => {
setToken?.('');
resetTokenState();
};
const renderClearButton = () => (
<InputAdornment position='end' data-testid='TOKEN_INPUT_CLEAR_BTN'>
<IconButton
aria-label='toggle password visibility'
onClick={clearToken}
edge='end'
>
<SmallClear />
</IconButton>
</InputAdornment>
);
return (
<Box sx={{ pb: 2 }}>
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
@ -214,6 +239,7 @@ export const PlaygroundConnectionFieldset: VFC<
</Box>
<Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
<Tooltip
arrow
title={
token
? 'Environment is automatically selected because you are using a token'
@ -241,6 +267,7 @@ export const PlaygroundConnectionFieldset: VFC<
/>
</Tooltip>
<Tooltip
arrow
title={
token
? 'Project is automatically selected because you are using a token'
@ -279,14 +306,17 @@ export const PlaygroundConnectionFieldset: VFC<
show={
<Input
sx={{ mt: 2, width: '50%', pr: 1 }}
label='Api token'
label='API token'
value={token || ''}
onChange={onSetToken}
type={'text'}
error={Boolean(tokenError)}
errorText={tokenError}
placeholder={'Enter your api token'}
placeholder={'Enter your API token'}
data-testid={'PLAYGROUND_TOKEN_INPUT'}
InputProps={{
endAdornment: token ? renderClearButton() : null,
}}
/>
}
/>