feat: token input improvements (#5155)

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>

frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundConnectionFieldset/PlaygroundConnectionFieldset.test.tsx

@@ -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('');
+});

frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundConnectionFieldset/PlaygroundConnectionFieldset.tsx

@@ -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,
+                        }}
                     />
                 }
             />