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/testing/decorators/PageDecorator.tsx

@@ -8,23 +8,41 @@ import { UserProvider } from '~/modules/users/components/UserProvider';
 
 import { FullHeightStorybookLayout } from '../FullHeightStorybookLayout';
 
-export type PageDecoratorArgs = { routePath: string; routeParams: RouteParams };
+export type PageDecoratorArgs = {
+  routePath: string;
+  routeParams: RouteParams;
+  state?: string;
+};
 
 type RouteParams = {
   [param: string]: string;
 };
 
-const computeLocation = (routePath: string, routeParams: RouteParams) =>
-  routePath.replace(/:(\w+)/g, (paramName) => routeParams[paramName] ?? '');
+const computeLocation = (
+  routePath: string,
+  routeParams: RouteParams,
+  state?: string,
+) => {
+  return {
+    pathname: routePath.replace(
+      /:(\w+)/g,
+      (paramName) => routeParams[paramName] ?? '',
+    ),
+    state,
+  };
+};
 
 export const PageDecorator: Decorator<{
   routePath: string;
   routeParams: RouteParams;
+  state?: string;
 }> = (Story, { args }) => (
   <UserProvider>
     <ClientConfigProvider>
       <MemoryRouter
-        initialEntries={[computeLocation(args.routePath, args.routeParams)]}
+        initialEntries={[
+          computeLocation(args.routePath, args.routeParams, args.state),
+        ]}
       >
         <FullHeightStorybookLayout>
           <HelmetProvider>

front/src/testing/graphqlMocks.ts

@@ -17,6 +17,7 @@ import { SEARCH_ACTIVITY_QUERY } from '@/search/graphql/queries/searchActivityQu
 import { SEARCH_COMPANY_QUERY } from '@/search/graphql/queries/searchCompanyQuery';
 import { SEARCH_PEOPLE_QUERY } from '@/search/graphql/queries/searchPeopleQuery';
 import { SEARCH_USER_QUERY } from '@/search/graphql/queries/searchUserQuery';
+import { GET_API_KEY } from '@/settings/developers/graphql/queries/getApiKey';
 import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
 import { GET_VIEW_FIELDS } from '@/views/graphql/queries/getViewFields';
 import { GET_VIEWS } from '@/views/graphql/queries/getViews';
@@ -30,6 +31,7 @@ import {
   SearchUserQuery,
   ViewType,
 } from '~/generated/graphql';
+import { mockedApiKeys } from '~/testing/mock-data/api-keys';
 
 import { mockedActivities, mockedTasks } from './mock-data/activities';
 import {
@@ -278,6 +280,13 @@ export const graphqlMocks = [
       }),
     );
   }),
+  graphql.query(getOperationName(GET_API_KEY) ?? '', (req, res, ctx) => {
+    return res(
+      ctx.data({
+        findManyApiKey: mockedApiKeys[0],
+      }),
+    );
+  }),
   graphql.mutation(
     getOperationName(CREATE_ACTIVITY_WITH_COMMENT) ?? '',
     (req, res, ctx) => {

front/src/testing/mock-data/api-keys.ts

@@ -0,0 +1,18 @@
+import { ApiKey } from '~/generated/graphql';
+
+type MockedApiKey = Pick<
+  ApiKey,
+  'id' | 'name' | 'createdAt' | 'updatedAt' | 'expiresAt' | '__typename'
+>;
+export const mockedApiKeyToken =
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ0d2VudHktN2VkOWQyMTItMWMyNS00ZDAyLWJmMjUtNmFlY2NmN2VhNDE5IiwiaWF0IjoxNjk4MDkzMDU0LCJleHAiOjE2OTkzMTUxOTksImp0aSI6IjY0Njg3ZWNmLWFhYzktNDNmYi1hY2I4LTE1M2QzNzgwYmIzMSJ9.JkQ3u7aRiqOFQkgHcC-mgCU37096HRSo40A_9X8gEng';
+export const mockedApiKeys: Array<MockedApiKey> = [
+  {
+    id: 'f7c6d736-8fcd-4e9c-ab99-28f6a9031570',
+    name: 'Zapier Integration',
+    createdAt: '2023-04-26T10:12:42.33625+00:00',
+    updatedAt: '2023-04-26T10:23:42.33625+00:00',
+    expiresAt: '2100-11-06T23:59:59.825Z',
+    __typename: 'ApiKey',
+  },
+];