chore: Use the relative time component in more places

frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.html

@@ -5,11 +5,9 @@
 <div class="dialog">
   <h2 class="mb-5 text-xl font-medium">View diagrams</h2>
   <div class="mb-2">
-    Last update:
-    {{
-      (diagramMetadata?.last_updated | date: "EE, dd MMM y HH:mm:ss") ||
-        "loading..."
-    }}
+    @if (diagramMetadata?.last_updated) {
+      Last updated <app-relative-time [date]="diagramMetadata!.last_updated" />
+    }
   </div>
 
   <app-model-diagram-code-block

frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.ts

@@ -2,7 +2,6 @@
  * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-import { DatePipe } from '@angular/common';
 import {
   Component,
   Inject,
@@ -43,6 +42,7 @@ import {
   MatDialogPreviewData,
   ModelDiagramPreviewDialogComponent,
 } from 'src/app/projects/models/diagrams/model-diagram-preview-dialog/model-diagram-preview-dialog.component';
+import { RelativeTimeComponent } from '../../../../general/relative-time/relative-time.component';
 import { ModelDiagramCodeBlockComponent } from './model-diagram-code-block/model-diagram-code-block.component';
 
 @Component({
@@ -61,7 +61,7 @@ import { ModelDiagramCodeBlockComponent } from './model-diagram-code-block/model
     MatButton,
     MatDivider,
     MatDialogClose,
-    DatePipe,
+    RelativeTimeComponent,
   ],
 })
 export class ModelDiagramDialogComponent implements OnInit {

frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.stories.ts

@@ -4,6 +4,7 @@
  */
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
+import MockDate from 'mockdate';
 import { DiagramCacheMetadata } from 'src/app/openapi';
 import { dialogWrapper } from 'src/storybook/decorators';
 import { base64ModelDiagram } from 'src/storybook/diagram';
@@ -28,6 +29,9 @@ const meta: Meta<ModelDiagramDialogComponent> = {
     }),
     dialogWrapper,
   ],
+  beforeEach: () => {
+    MockDate.set(new Date('2024-05-01'));
+  },
 };
 
 export default meta;

frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-provisioned-session/create-provisioned-session.component.html

@@ -52,9 +52,11 @@ <h2 class="flex items-center text-xl font-medium">
                     <div>
                       {{ model.name }}
                       @if (model.provisioning; as provisioning) {
-                        was provisioned at
-                        {{ provisioning.provisioned_at | date }} with the
-                        revision {{ provisioning.revision }} ({{
+                        was provisioned
+                        <app-relative-time
+                          [date]="provisioning.provisioned_at"
+                        />
+                        with the revision {{ provisioning.revision }} ({{
                           provisioning.commit_hash
                         }}).
                       } @else {

frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-provisioned-session/create-provisioned-session.component.stories.ts

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import MockDate from 'mockdate';
 import { mockSimpleToolModelWithoutProject } from 'src/storybook/model';
 import {
   mockProject,
@@ -14,6 +15,9 @@ import { CreateProvisionedSessionComponent } from './create-provisioned-session.
 const meta: Meta<CreateProvisionedSessionComponent> = {
   title: 'Session Components/Create Provisioned Session',
   component: CreateProvisionedSessionComponent,
+  beforeEach: () => {
+    MockDate.set(new Date('2024-05-01'));
+  },
 };
 
 export default meta;

frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-provisioned-session/create-provisioned-session.component.ts

@@ -28,6 +28,7 @@ import { getPrimaryGitModel } from 'src/app/projects/models/service/model.servic
 import { ProjectToolsWrapperService } from 'src/app/projects/project-detail/project-tools/project-tools-wrapper.service';
 import { ProjectWrapperService } from 'src/app/projects/service/project.service';
 import { SessionService } from 'src/app/sessions/service/session.service';
+import { RelativeTimeComponent } from '../../../../general/relative-time/relative-time.component';
 
 @UntilDestroy()
 @Component({
@@ -38,6 +39,7 @@ import { SessionService } from 'src/app/sessions/service/session.service';
     MatButtonModule,
     NgxSkeletonLoaderModule,
     MatIconComponent,
+    RelativeTimeComponent,
   ],
   templateUrl: './create-provisioned-session.component.html',
   styles: `

frontend/src/app/users/users-profile/user-information/user-information.component.html

@@ -10,10 +10,7 @@ <h2 class="text-xl font-medium">User information</h2>
       <mat-divider></mat-divider>
     </div>
     @if (user.last_login) {
-      <div>
-        Last login:
-        {{ user.last_login | date: "EE, dd MMM y HH:mm:ss" }}
-      </div>
+      <div>Last login <app-relative-time [date]="user.last_login" /></div>
     }
     <div>Identity provider identifier: {{ user.idp_identifier }}</div>
     @if (user.email) {

frontend/src/app/users/users-profile/user-information/user-information.component.ts

@@ -18,6 +18,7 @@ import { of, switchMap } from 'rxjs';
 import { HistoryEvent, UsersService } from 'src/app/openapi';
 import { OwnUserWrapperService } from 'src/app/services/user/user.service';
 import { UserWrapperService } from 'src/app/users/user-wrapper/user-wrapper.service';
+import { RelativeTimeComponent } from '../../../general/relative-time/relative-time.component';
 
 @Component({
   selector: 'app-user-information',
@@ -27,6 +28,7 @@ import { UserWrapperService } from 'src/app/users/user-wrapper/user-wrapper.serv
     NgxSkeletonLoaderModule,
     MatPaginator,
     MatDividerModule,
+    RelativeTimeComponent,
   ],
   styles: `
     .mat-cell,

frontend/src/app/users/users-profile/user-information/user-information.stories.ts

@@ -4,6 +4,7 @@
  */
 import { MatTableDataSource } from '@angular/material/table';
 import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import MockDate from 'mockdate';
 import { EventType, HistoryEvent } from 'src/app/openapi';
 import { mockProject } from 'src/storybook/project';
 import {
@@ -27,6 +28,9 @@ const meta: Meta<UserInformationComponent> = {
       ],
     }),
   ],
+  beforeEach: () => {
+    MockDate.set(new Date('2024-05-01'));
+  },
 };
 
 export default meta;