fix: Display long usernames correctly in user overview

backend/capellacollab/projects/users/models.py

@@ -19,8 +19,8 @@
 
 
 class ProjectUserRole(enum.Enum):
-    USER = "user"
     MANAGER = "manager"
+    USER = "user"
     ADMIN = "administrator"
 
 

backend/capellacollab/users/models.py

@@ -21,8 +21,8 @@
 
 
 class Role(str, enum.Enum):
-    USER = "user"
     ADMIN = "administrator"
+    USER = "user"
 
 
 class BaseUser(core_pydantic.BaseModel):

docs/docs/development/frontend/responsive-design/mobile-view.md

@@ -37,9 +37,6 @@ uses flexbox on devices larger than `768px`.
     significant effort.
 -   **Leverage Flexboxes**: Ideally, utilize `class="flex flex-wrap"` to ensure
     content adjusts appropriately on various screens.
--   **Set Boundaries**: Implement `max-w-[90vw]` to avoid content spilling out
-    of view. You can change the `class="90vw"` to another value, depending on
-    your needs.
 -   **Centering Content**: When aesthetics and usability align, consider
     vertically centering elements via `class="flex justify-center"` on the
     parent element.

frontend/src/app/app-routing.module.ts

@@ -17,6 +17,7 @@ import { ConfigurationSettingsComponent } from 'src/app/settings/core/configurat
 import { PipelinesOverviewComponent } from 'src/app/settings/core/pipelines-overview/pipelines-overview.component';
 import { CreateToolComponent } from 'src/app/settings/core/tools-settings/create-tool/create-tool.component';
 import { BasicAuthTokenComponent } from 'src/app/users/basic-auth-token/basic-auth-token.component';
+import { UserWrapperComponent } from 'src/app/users/user-wrapper/user-wrapper.component';
 import { UsersProfileComponent } from 'src/app/users/users-profile/users-profile.component';
 import { EventsComponent } from './events/events.component';
 import { AuthRedirectComponent } from './general/auth/auth-redirect/auth-redirect.component';
@@ -39,14 +40,14 @@ import { SessionsComponent } from './sessions/sessions.component';
 import { AlertSettingsComponent } from './settings/core/alert-settings/alert-settings.component';
 import { ToolDetailsComponent } from './settings/core/tools-settings/tool-details/tool-details.component';
 import { ToolsSettingsComponent } from './settings/core/tools-settings/tools-settings.component';
-import { UserSettingsComponent } from './settings/core/user-settings/user-settings.component';
 import { PureVariantsComponent } from './settings/integrations/pure-variants/pure-variants.component';
 import { EditGitSettingsComponent } from './settings/modelsources/git-settings/edit-git-settings/edit-git-settings.component';
 import { GitSettingsComponent } from './settings/modelsources/git-settings/git-settings.component';
 import { EditT4CInstanceComponent } from './settings/modelsources/t4c-settings/edit-t4c-instance/edit-t4c-instance.component';
 import { T4CSettingsWrapperComponent } from './settings/modelsources/t4c-settings/t4c-settings-wrapper/t4c-settings-wrapper.component';
 import { T4CSettingsComponent } from './settings/modelsources/t4c-settings/t4c-settings.component';
 import { SettingsComponent } from './settings/settings.component';
+import { UserSettingsComponent } from './users/user-settings/user-settings.component';
 
 export const routes: Routes = [
   {
@@ -454,19 +455,29 @@ export const routes: Routes = [
         data: { breadcrumb: 'Events' },
         component: EventsComponent,
       },
+      {
+        path: 'users',
+        data: { breadcrumb: 'Users' },
+        component: UserSettingsComponent,
+      },
       {
         path: 'user',
-        data: { breadcrumb: 'User' },
+        data: { breadcrumb: 'Users', redirect: '/users' },
         children: [
           {
-            path: '',
-            data: { breadcrumb: undefined },
-            component: UserSettingsComponent,
-          },
-          {
-            path: ':userId',
-            data: { breadcrumb: (data: Data) => data?.user?.name || 'User' },
-            component: UsersProfileComponent,
+            path: ':user',
+            data: {
+              breadcrumb: (data: Data) => data.user?.name,
+              redirect: (data: Data) => `/user/${data.user?.id}`,
+            },
+            component: UserWrapperComponent,
+            children: [
+              {
+                path: '',
+                data: { breadcrumb: undefined },
+                component: UsersProfileComponent,
+              },
+            ],
           },
         ],
       },

frontend/src/app/general/auth/auth-redirect/auth-redirect.component.ts

@@ -7,7 +7,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { ToastService } from 'src/app/helpers/toast/toast.service';
 import { AuthenticationService } from 'src/app/openapi';
 import { AuthenticationWrapperService } from 'src/app/services/auth/auth.service';
-import { UserWrapperService } from 'src/app/services/user/user.service';
+import { OwnUserWrapperService } from 'src/app/services/user/user.service';
 
 @Component({
   selector: 'app-auth-redirect',
@@ -20,7 +20,7 @@ export class AuthRedirectComponent implements OnInit {
     private toastService: ToastService,
     private authService: AuthenticationWrapperService,
     private authenticationService: AuthenticationService,
-    private userService: UserWrapperService,
+    private userService: OwnUserWrapperService,
     private router: Router,
   ) {}
 

frontend/src/app/general/header/header.component.ts

@@ -10,7 +10,7 @@ import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
 import { RouterLink } from '@angular/router';
 import { NavBarService } from 'src/app/general/nav-bar/nav-bar.service';
 import { AuthenticationWrapperService } from '../../services/auth/auth.service';
-import { UserWrapperService } from '../../services/user/user.service';
+import { OwnUserWrapperService } from '../../services/user/user.service';
 import { BreadcrumbsComponent } from '../breadcrumbs/breadcrumbs.component';
 
 @Component({
@@ -33,7 +33,7 @@ import { BreadcrumbsComponent } from '../breadcrumbs/breadcrumbs.component';
 export class HeaderComponent {
   constructor(
     public authService: AuthenticationWrapperService,
-    public userService: UserWrapperService,
+    public userService: OwnUserWrapperService,
     public navBarService: NavBarService,
   ) {}
 }

frontend/src/app/general/header/header.stories.ts

@@ -4,8 +4,8 @@
  */
 import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { of } from 'rxjs';
-import { UserWrapperService } from 'src/app/services/user/user.service';
-import { mockUser, MockUserService } from 'src/storybook/user';
+import { OwnUserWrapperService } from 'src/app/services/user/user.service';
+import { mockUser, MockOwnUserWrapperService } from 'src/storybook/user';
 import { NavBarItem, NavBarService } from '../nav-bar/nav-bar.service';
 import { HeaderComponent } from './header.component';
 
@@ -62,8 +62,8 @@ export const NormalUser: Story = {
     moduleMetadata({
       providers: [
         {
-          provide: UserWrapperService,
-          useFactory: () => new MockUserService(mockUser),
+          provide: OwnUserWrapperService,
+          useFactory: () => new MockOwnUserWrapperService(mockUser),
         },
         {
           provide: NavBarService,
@@ -83,9 +83,12 @@ export const Administrator: Story = {
     moduleMetadata({
       providers: [
         {
-          provide: UserWrapperService,
+          provide: OwnUserWrapperService,
           useFactory: () =>
-            new MockUserService({ ...mockUser, role: 'administrator' }),
+            new MockOwnUserWrapperService({
+              ...mockUser,
+              role: 'administrator',
+            }),
         },
         {
           provide: NavBarService,

frontend/src/app/general/nav-bar-menu/nav-bar-menu.component.ts

@@ -10,7 +10,7 @@ import { MatList, MatListItem } from '@angular/material/list';
 import { RouterLink } from '@angular/router';
 import { NavBarService } from 'src/app/general/nav-bar/nav-bar.service';
 import { AuthenticationWrapperService } from 'src/app/services/auth/auth.service';
-import { UserWrapperService } from 'src/app/services/user/user.service';
+import { OwnUserWrapperService } from 'src/app/services/user/user.service';
 
 @Component({
   selector: 'app-nav-bar-menu',
@@ -23,6 +23,6 @@ export class NavBarMenuComponent {
   constructor(
     public authService: AuthenticationWrapperService,
     public navBarService: NavBarService,
-    public userService: UserWrapperService,
+    public userService: OwnUserWrapperService,
   ) {}
 }

frontend/src/app/projects/models/backup-settings/pipeline-deletion-dialog/pipeline-deletion-dialog.component.ts

@@ -15,7 +15,7 @@ import { BehaviorSubject } from 'rxjs';
 import { ToastService } from 'src/app/helpers/toast/toast.service';
 import { Backup, ProjectsModelsBackupsService } from 'src/app/openapi';
 import { PipelineWrapperService } from 'src/app/projects/models/backup-settings/service/pipeline.service';
-import { UserWrapperService } from 'src/app/services/user/user.service';
+import { OwnUserWrapperService } from 'src/app/services/user/user.service';
 
 @Component({
   selector: 'app-pipeline-deletion-dialog',
@@ -41,7 +41,7 @@ export class PipelineDeletionDialogComponent {
   loading = new BehaviorSubject(false);
 
   constructor(
-    public userService: UserWrapperService,
+    public userService: OwnUserWrapperService,
     private dialogRef: DialogRef,
     private toastService: ToastService,
     private pipelinesService: ProjectsModelsBackupsService,

frontend/src/app/projects/models/backup-settings/pipeline-deletion-dialog/pipeline-deletion.dialog.stories.ts

@@ -5,10 +5,10 @@
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { BehaviorSubject } from 'rxjs';
-import { UserWrapperService } from 'src/app/services/user/user.service';
+import { OwnUserWrapperService } from 'src/app/services/user/user.service';
 import { mockBackup } from 'src/storybook/backups';
 import { dialogWrapper } from 'src/storybook/decorators';
-import { mockUser, MockUserService } from 'src/storybook/user';
+import { mockUser, MockOwnUserWrapperService } from 'src/storybook/user';
 import { PipelineDeletionDialogComponent } from './pipeline-deletion-dialog.component';
 
 const meta: Meta<PipelineDeletionDialogComponent> = {
@@ -48,9 +48,12 @@ export const AsAdmin: Story = {
     moduleMetadata({
       providers: [
         {
-          provide: UserWrapperService,
+          provide: OwnUserWrapperService,
           useFactory: () =>
-            new MockUserService({ ...mockUser, role: 'administrator' }),
+            new MockOwnUserWrapperService({
+              ...mockUser,
+              role: 'administrator',
+            }),
         },
       ],
     }),

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

@@ -25,7 +25,7 @@ import { MetadataService } from 'src/app/general/metadata/metadata.service';
 import { ToastService } from 'src/app/helpers/toast/toast.service';
 import { Metadata, Project, ToolModel } from 'src/app/openapi';
 import { getPrimaryGitModel } from 'src/app/projects/models/service/model.service';
-import { UserWrapperService } from 'src/app/services/user/user.service';
+import { OwnUserWrapperService } from 'src/app/services/user/user.service';
 import { TokenService } from 'src/app/users/basic-auth-service/basic-auth-token.service';
 
 @Component({
@@ -53,7 +53,7 @@ export class ModelDiagramCodeBlockComponent implements OnInit, AfterViewInit {
 
   constructor(
     private metadataService: MetadataService,
-    private userService: UserWrapperService,
+    private userService: OwnUserWrapperService,
     private tokenService: TokenService,
     private toastService: ToastService,
   ) {}

frontend/src/app/projects/models/model-detail/model-detail.component.html

@@ -5,7 +5,7 @@
 
 <h2 class="mb-2 text-xl font-medium">Git repositories</h2>
 <div class="flex flex-wrap gap-2">
-  <a [routerLink]="['..', 'git-model', 'create']">
+  <a [routerLink]="['..', 'git-model', 'create']" class="w-full sm:w-fit">
     <div matRipple class="mat-card-overview new collab-card">
       <div class="content">
         Use existing repository <br />
@@ -23,7 +23,10 @@ <h2 class="mb-2 text-xl font-medium">Git repositories</h2>
     ></app-mat-card-overview-skeleton-loader>
   } @else {
     @for (gitModel of gitModelService.gitModels$ | async; track gitModel.id) {
-      <a [routerLink]="['..', 'git-model', gitModel.id]">
+      <a
+        [routerLink]="['..', 'git-model', gitModel.id]"
+        class="w-full sm:w-fit"
+      >
         <div matRipple class="mat-card-overview collab-card">
           <div class="header flex items-center justify-between">
             Integration {{ gitModel.id }}
@@ -59,7 +62,10 @@ <h2 class="mb-2 text-xl font-medium">Git repositories</h2>
 ) {
   <h2 class="mb-2 mt-5 text-xl font-medium">TeamForCapella repositories</h2>
   <div class="flex flex-wrap gap-2">
-    <a [routerLink]="['..', 't4c-model', 'create-existing']">
+    <a
+      [routerLink]="['..', 't4c-model', 'create-existing']"
+      class="w-full sm:w-fit"
+    >
       <div matRipple class="mat-card-overview new collab-card">
         <div class="content">
           Use existing repository <br />
@@ -69,7 +75,7 @@ <h2 class="mb-2 mt-5 text-xl font-medium">TeamForCapella repositories</h2>
         </div>
       </div>
     </a>
-    <a [routerLink]="['..', 't4c-model', 'create-new']">
+    <a [routerLink]="['..', 't4c-model', 'create-new']" class="w-full sm:w-fit">
       <div matRipple class="mat-card-overview new collab-card">
         <div class="content">
           Create new repository <br />
@@ -89,6 +95,7 @@ <h2 class="mb-2 mt-5 text-xl font-medium">TeamForCapella repositories</h2>
       <a
         *ngFor="let t4cModel of t4cModelService.t4cModels$ | async"
         [routerLink]="['..', 't4c-model', t4cModel.id]"
+        class="w-full sm:w-fit"
       >
         <div matRipple class="mat-card-overview collab-card">
           <div class="header">Integration {{ t4cModel.id }}</div>

frontend/src/app/projects/models/model-detail/model-detail.component.ts

@@ -12,7 +12,7 @@ import { combineLatest, filter } from 'rxjs';
 import { T4CModelService } from 'src/app/projects/models/model-source/t4c/service/t4c-model.service';
 import { ModelWrapperService } from 'src/app/projects/models/service/model.service';
 import { GitModelService } from 'src/app/projects/project-detail/model-overview/model-detail/git-model.service';
-import { UserWrapperService } from 'src/app/services/user/user.service';
+import { OwnUserWrapperService } from 'src/app/services/user/user.service';
 import { MatIconComponent } from '../../../helpers/mat-icon/mat-icon.component';
 import { MatCardOverviewSkeletonLoaderComponent } from '../../../helpers/skeleton-loaders/mat-card-overview-skeleton-loader/mat-card-overview-skeleton-loader.component';
 import { ProjectWrapperService } from '../../service/project.service';
@@ -39,7 +39,7 @@ export class ModelDetailComponent implements OnInit, OnDestroy {
     public modelService: ModelWrapperService,
     public gitModelService: GitModelService,
     public t4cModelService: T4CModelService,
-    public userService: UserWrapperService,
+    public userService: OwnUserWrapperService,
   ) {}
 
   ngOnInit(): void {

frontend/src/app/projects/models/model-detail/model-detail.stories.ts

@@ -6,11 +6,11 @@ import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { T4CModelService } from 'src/app/projects/models/model-source/t4c/service/t4c-model.service';
 import { ModelWrapperService } from 'src/app/projects/models/service/model.service';
 import { GitModelService } from 'src/app/projects/project-detail/model-overview/model-detail/git-model.service';
-import { UserWrapperService } from 'src/app/services/user/user.service';
+import { OwnUserWrapperService } from 'src/app/services/user/user.service';
 import { MockGitModelService, mockPrimaryGitModel } from 'src/storybook/git';
 import { mockModel, MockModelWrapperService } from 'src/storybook/model';
 import { mockT4CModel, MockT4CModelService } from 'src/storybook/t4c';
-import { mockUser, MockUserService } from 'src/storybook/user';
+import { mockUser, MockOwnUserWrapperService } from 'src/storybook/user';
 import { ModelDetailComponent } from './model-detail.component';
 
 const meta: Meta<ModelDetailComponent> = {
@@ -48,9 +48,12 @@ export const LoadingAsAdmin: Story = {
           useFactory: () => new MockModelWrapperService(mockModel, []),
         },
         {
-          provide: UserWrapperService,
+          provide: OwnUserWrapperService,
           useFactory: () =>
-            new MockUserService({ ...mockUser, role: 'administrator' }),
+            new MockOwnUserWrapperService({
+              ...mockUser,
+              role: 'administrator',
+            }),
         },
       ],
     }),
@@ -67,9 +70,12 @@ export const WithRepositoryAsAdmin: Story = {
           useFactory: () => new MockModelWrapperService(mockModel, []),
         },
         {
-          provide: UserWrapperService,
+          provide: OwnUserWrapperService,
           useFactory: () =>
-            new MockUserService({ ...mockUser, role: 'administrator' }),
+            new MockOwnUserWrapperService({
+              ...mockUser,
+              role: 'administrator',
+            }),
         },
         {
           provide: GitModelService,