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/modules/settings/developers/components/ApiKeyInput.tsx

@@ -5,7 +5,6 @@ import { IconCopy } from '@/ui/display/icon';
 import { useSnackBar } from '@/ui/feedback/snack-bar/hooks/useSnackBar';
 import { Button } from '@/ui/input/button/components/Button';
 import { TextInput } from '@/ui/input/components/TextInput';
-import { beautifyDateDiff } from '~/utils/date-utils';
 
 const StyledContainer = styled.div`
   display: flex;
@@ -17,22 +16,16 @@ const StyledLinkContainer = styled.div`
   margin-right: ${({ theme }) => theme.spacing(2)};
 `;
 
-type ApiKeyInputProps = { expiresAt?: string | null; apiKey: string };
+type ApiKeyInputProps = { apiKey: string };
 
-export const ApiKeyInput = ({ expiresAt, apiKey }: ApiKeyInputProps) => {
+export const ApiKeyInput = ({ apiKey }: ApiKeyInputProps) => {
   const theme = useTheme();
-  const computeInfo = () => {
-    if (!expiresAt) {
-      return '';
-    }
-    return `This key will expire in ${beautifyDateDiff(expiresAt)}`;
-  };
 
   const { enqueueSnackBar } = useSnackBar();
   return (
     <StyledContainer>
       <StyledLinkContainer>
-        <TextInput info={computeInfo()} value={apiKey} fullWidth />
+        <TextInput value={apiKey} fullWidth />
       </StyledLinkContainer>
       <Button
         Icon={IconCopy}

front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx

@@ -1,12 +1,11 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
+import { ApiFieldItem } from '@/settings/developers/types/ApiFieldItem';
 import { IconChevronRight } from '@/ui/display/icon';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 
-import { ApisFiedlItem } from '../types/ApisFieldItem';
-
 export const StyledApisFieldTableRow = styled(TableRow)`
   grid-template-columns: 180px 148px 148px 36px;
 `;
@@ -27,13 +26,15 @@ const StyledIconChevronRight = styled(IconChevronRight)`
 
 export const SettingsApiKeysFieldItemTableRow = ({
   fieldItem,
+  onClick,
 }: {
-  fieldItem: ApisFiedlItem;
+  fieldItem: ApiFieldItem;
+  onClick: () => void;
 }) => {
   const theme = useTheme();
 
   return (
-    <StyledApisFieldTableRow onClick={() => {}}>
+    <StyledApisFieldTableRow onClick={() => onClick()}>
       <StyledNameTableCell>{fieldItem.name}</StyledNameTableCell>
       <TableCell color={theme.font.color.tertiary}>Internal</TableCell>{' '}
       <TableCell

front/src/modules/settings/developers/components/__stories__/ApiKeyInput.stories.tsx

@@ -8,7 +8,6 @@ const meta: Meta<typeof ApiKeyInput> = {
   component: ApiKeyInput,
   decorators: [ComponentDecorator],
   args: {
-    expiresAt: '2123-11-06T23:59:59.825Z',
     apiKey:
       'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ0d2VudHktN2VkOWQyMTItMWMyNS00ZDAyLWJmMjUtNmFlY2NmN2VhNDE5IiwiaWF0IjoxNjk4MTQyODgyLCJleHAiOjE2OTk0MDE1OTksImp0aSI6ImMyMmFiNjQxLTVhOGYtNGQwMC1iMDkzLTk3MzUwYTM2YzZkOSJ9.JIe2TX5IXrdNl3n-kRFp3jyfNUE7unzXZLAzm2Gxl98',
   },