2062 view edit an api key (#2231)

* Add query to get api keys

* Add a link to apiKey detail page

* Reset generatedApiKey when leaving page

* Simplify stuff

* Regenerate key when clicking on button

* Simplify

* Fix test

* Refetch apiKeys when delete or create one

* Add test for utils

* Create utils function

* Enable null expiration dates

* Update formatExpiration

* Fix display

* Fix noteCard

* Fix errors

* Fix reset

* Fix display

* Fix renaming

* Fix tests

* Fix ci

* Fix mocked data

* Fix test

* Update coverage requiremeents

* Rename folder

* Code review returns

* Symplify sht code

front/src/testing/decorators/PageDecorator.tsx

@@ -11,38 +11,29 @@ import { FullHeightStorybookLayout } from '../FullHeightStorybookLayout';
 export type PageDecoratorArgs = {
   routePath: string;
   routeParams: RouteParams;
-  state?: string;
 };
 
 type RouteParams = {
   [param: string]: string;
 };
 
-const computeLocation = (
-  routePath: string,
-  routeParams: RouteParams,
-  state?: string,
-) => {
+const computeLocation = (routePath: string, routeParams: RouteParams) => {
   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, args.state),
-        ]}
+        initialEntries={[computeLocation(args.routePath, args.routeParams)]}
       >
         <FullHeightStorybookLayout>
           <HelmetProvider>

front/src/testing/graphqlMocks.ts

@@ -18,6 +18,7 @@ import { SEARCH_COMPANY_QUERY } from '@/search/graphql/queries/searchCompanyQuer
 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_API_KEYS } from '@/settings/developers/graphql/queries/getApiKeys';
 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';
@@ -283,7 +284,14 @@ export const graphqlMocks = [
   graphql.query(getOperationName(GET_API_KEY) ?? '', (req, res, ctx) => {
     return res(
       ctx.data({
-        findManyApiKey: mockedApiKeys[0],
+        findManyApiKey: [mockedApiKeys[0]],
+      }),
+    );
+  }),
+  graphql.query(getOperationName(GET_API_KEYS) ?? '', (req, res, ctx) => {
+    return res(
+      ctx.data({
+        findManyApiKey: mockedApiKeys,
       }),
     );
   }),

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

@@ -4,8 +4,6 @@ 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',
@@ -15,4 +13,20 @@ export const mockedApiKeys: Array<MockedApiKey> = [
     expiresAt: '2100-11-06T23:59:59.825Z',
     __typename: 'ApiKey',
   },
+  {
+    id: 'f7c6d736-8fcd-4e9c-ab99-28f6a9031571',
+    name: 'Gmail Integration',
+    createdAt: '2023-04-26T10:12:42.33625+00:00',
+    updatedAt: '2023-04-26T10:23:42.33625+00:00',
+    expiresAt: null,
+    __typename: 'ApiKey',
+  },
+  {
+    id: 'f7c6d736-8fcd-4e9c-ab99-28f6a9031572',
+    name: 'Github Integration',
+    createdAt: '2023-04-26T10:12:42.33625+00:00',
+    updatedAt: '2023-04-26T10:23:42.33625+00:00',
+    expiresAt: '2022-11-06T23:59:59.825Z',
+    __typename: 'ApiKey',
+  },
 ];