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/data/field/contexts/FieldContext.ts

@@ -5,7 +5,7 @@ import { FieldMetadata } from '../types/FieldMetadata';
 
 export type GenericFieldContextType = {
   fieldDefinition: FieldDefinition<FieldMetadata>;
-  // TODO: add better typing for mutation hook
+  // TODO: add better typing for mutation web-hook
   useUpdateEntityMutation: () => [(params: any) => void, any];
   entityId: string;
   recoilScopeId: string;

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' },
+};

front/src/modules/ui/layout/board/states/selectors/boardColumnTotalsFamilySelector.ts

@@ -4,7 +4,7 @@ import { companyProgressesFamilyState } from '@/companies/states/companyProgress
 
 import { boardCardIdsByColumnIdFamilyState } from '../boardCardIdsByColumnIdFamilyState';
 
-// TODO: this state should be computed during the synchronization hook and put in a generic
+// TODO: this state should be computed during the synchronization web-hook and put in a generic
 // boardColumnTotalsFamilyState indexed by columnId.
 export const boardColumnTotalsFamilySelector = selectorFamily({
   key: 'boardColumnTotalsFamilySelector',

front/src/modules/ui/utilities/pointer-event/hooks/__tests__/useListenClickOutsideArrayOfRef.test.tsx

@@ -22,7 +22,7 @@ const TestComponentDomMode = () => {
   );
 };
 
-test('useListenClickOutside hook works in dom mode', async () => {
+test('useListenClickOutside web-hook works in dom mode', async () => {
   const { getByText } = render(<TestComponentDomMode />);
   const inside = getByText('Inside');
   const inside2 = getByText('Inside 2');