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/utils/__tests__/date-utils.test.ts

@@ -14,6 +14,7 @@ import {
 import { logError } from '../logError';
 
 jest.mock('~/utils/logError');
+jest.useFakeTimers().setSystemTime(new Date('2024-01-01T00:00:00.000Z'));
 
 describe('beautifyExactDateTime', () => {
   it('should return the date in the correct format with time', () => {
@@ -277,8 +278,20 @@ describe('beautifyDateDiff', () => {
     expect(result).toEqual('1 year and 2 days');
   });
   it('should compare to now', () => {
-    const date = '2200-11-01T00:00:00.000Z';
+    const date = '2027-01-10T00:00:00.000Z';
     const result = beautifyDateDiff(date);
-    expect(result).toContain('years');
+    expect(result).toEqual('3 years and 9 days');
+  });
+  it('should return short version', () => {
+    const date = '2033-11-05T00:00:00.000Z';
+    const dateToCompareWith = '2023-11-01T00:00:00.000Z';
+    const result = beautifyDateDiff(date, dateToCompareWith, true);
+    expect(result).toEqual('10 years');
+  });
+  it('should return short version for short differences', () => {
+    const date = '2023-11-05T00:00:00.000Z';
+    const dateToCompareWith = '2023-11-01T00:00:00.000Z';
+    const result = beautifyDateDiff(date, dateToCompareWith, true);
+    expect(result).toEqual('4 days');
   });
 });

front/src/utils/date-utils.ts

@@ -109,7 +109,11 @@ export const hasDatePassed = (date: Date | string | number) => {
   }
 };
 
-export const beautifyDateDiff = (date: string, dateToCompareWith?: string) => {
+export const beautifyDateDiff = (
+  date: string,
+  dateToCompareWith?: string,
+  short: boolean = false,
+) => {
   const dateDiff = DateTime.fromISO(date).diff(
     dateToCompareWith ? DateTime.fromISO(dateToCompareWith) : DateTime.now(),
     ['years', 'days'],
@@ -117,6 +121,7 @@ export const beautifyDateDiff = (date: string, dateToCompareWith?: string) => {
   let result = '';
   if (dateDiff.years) result = result + `${dateDiff.years} year`;
   if (![0, 1].includes(dateDiff.years)) result = result + 's';
+  if (short && dateDiff.years) return result;
   if (dateDiff.years && dateDiff.days) result = result + ' and ';
   if (dateDiff.days) result = result + `${Math.floor(dateDiff.days)} day`;
   if (![0, 1].includes(dateDiff.days)) result = result + 's';