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/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>
   );