2060 create a new api key (#2206)

* Add folder for api settings

* Init create api key page

* Update create api key page

* Implement api call to create apiKey

* Add create api key mutation

* Get id when creating apiKey

* Display created Api Key

* Add delete api key button

* Remove button from InputText

* Update stuff

* Add test for ApiDetail

* Fix type

* Use recoil instead of router state

* Remane route paths

* Remove online return

* Move and test date util

* Remove useless Component

* Rename ApiKeys paths

* Rename ApiKeys files

* Add input text info testing

* Rename hooks to webhooks

* Remove console error

* Add tests to reach minimum coverage

front/src/modules/ui/input/components/Select.tsx

@@ -11,7 +11,7 @@ import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
 import { SelectHotkeyScope } from '../types/SelectHotkeyScope';
 
-export type SelectProps<Value extends string> = {
+export type SelectProps<Value extends string | number> = {
   dropdownScopeId: string;
   onChange: (value: Value) => void;
   options: { value: Value; label: string; Icon?: IconComponent }[];
@@ -38,7 +38,7 @@ const StyledLabel = styled.div`
   gap: ${({ theme }) => theme.spacing(1)};
 `;
 
-export const Select = <Value extends string>({
+export const Select = <Value extends string | number>({
   dropdownScopeId,
   onChange,
   options,

front/src/modules/ui/input/components/TextInput.tsx

@@ -25,6 +25,7 @@ export type TextInputComponentProps = Omit<
 > & {
   className?: string;
   label?: string;
+  info?: string;
   onChange?: (text: string) => void;
   fullWidth?: boolean;
   disableHotkeys?: boolean;
@@ -45,10 +46,16 @@ const StyledLabel = styled.span`
   text-transform: uppercase;
 `;
 
+const StyledInfo = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  margin-top: ${({ theme }) => theme.spacing(1)};
+`;
+
 const StyledInputContainer = styled.div`
   display: flex;
   flex-direction: row;
-
   width: 100%;
 `;
 
@@ -113,6 +120,7 @@ const TextInputComponent = (
   {
     className,
     label,
+    info,
     value,
     onChange,
     onFocus,
@@ -204,6 +212,7 @@ const TextInputComponent = (
           )}
         </StyledTrailingIconContainer>
       </StyledInputContainer>
+      {info && <StyledInfo>{info}</StyledInfo>}
       {error && <StyledErrorHelper>{error}</StyledErrorHelper>}
     </StyledContainer>
   );

front/src/modules/ui/input/components/__stories__/Select.stories.tsx

@@ -6,11 +6,11 @@ import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { Select, SelectProps } from '../Select';
 
-type RenderProps = SelectProps<string>;
+type RenderProps = SelectProps<string | number>;
 
 const Render = (args: RenderProps) => {
   const [value, setValue] = useState(args.value);
-  const handleChange = (value: string) => {
+  const handleChange = (value: string | number) => {
     args.onChange?.(value);
     setValue(value);
   };

front/src/modules/ui/input/components/__stories__/TextInput.stories.tsx

@@ -38,3 +38,7 @@ export const Filled: Story = {
 export const Disabled: Story = {
   args: { disabled: true, value: 'Tim' },
 };
+
+export const WithInfo: Story = {
+  args: { info: 'Some info displayed below the input', value: 'Tim' },
+};