NAS-135360 / 25.10 / Use new editable fields in user form

src/app/modules/details-table/details-item/details-item.component.ts

@@ -5,8 +5,6 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
   templateUrl: './details-item.component.html',
   styleUrl: './details-item.component.scss',
   standalone: true,
-  imports: [
-  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DetailsItemComponent {

src/app/pages/credentials/new-users/all-users/user-details/user-detail-header/user-detail-header.component.spec.ts

@@ -82,7 +82,7 @@ describe('UserDetailHeaderComponent', () => {
 
     expect(spectator.inject(SlideIn).open).toHaveBeenCalledWith(
       UserFormComponent,
-      { wide: true, data: dummyUser },
+      { data: dummyUser },
     );
   });
 

src/app/pages/credentials/new-users/all-users/user-details/user-detail-header/user-detail-header.component.ts

@@ -42,19 +42,17 @@ export class UserDetailHeaderComponent {
   ) {}
 
   doEdit(): void {
-    this.slideIn.open(UserFormComponent, { wide: true, data: this.user() }).pipe(
-      untilDestroyed(this),
-    ).subscribe();
+    this.slideIn
+      .open(UserFormComponent, { data: this.user() })
+      .pipe(untilDestroyed(this))
+      .subscribe();
   }
 
   doDelete(): void {
-    this.matDialog.open(DeleteUserDialog, {
-      data: this.user(),
-    })
+    this.matDialog
+      .open(DeleteUserDialog, { data: this.user() })
       .afterClosed()
-      .pipe(
-        untilDestroyed(this),
-      )
+      .pipe(untilDestroyed(this))
       .subscribe();
   }
 }

src/app/pages/credentials/new-users/user-form/additional-details-section/additional-details-section.component.html

@@ -1,78 +1,61 @@
-<form
-  [formGroup]="form"
-  (click)="onCloseInlineEdits($event)"
->
-  <ix-fieldset
-    [title]="'Additional Details' | translate"
-    (dblclick)="isUsingAlternativeColors = !isUsingAlternativeColors;"
-  >
-  <div class="extra-details" [class.alternative-colors]="isUsingAlternativeColors">
-    <div class="item">
-      <div class="name">
-        {{ 'Full Name' | translate }}:
-      </div>
-      <div class="value">
-        @if (!isEditingFullName) {
-          <div
-            class="value-prompt"
-            [class.empty-value]="!form.value.full_name"
-            (click)="onEditFullName(); $event.stopPropagation()"
-          >
-            {{ form.value.full_name || ('Not Set' | translate) }}
-            <ix-icon name="mdi-pencil" class="edit-icon"></ix-icon>
+<form [formGroup]="form">
+  <ix-fieldset [title]="'Additional Details' | translate">
+    <ix-details-table>
+      <ix-details-item [label]="'Full Name' | translate">
+        <ix-editable>
+          <div view>
+            {{ form.value.full_name }}
           </div>
-        } @else {
-          <div class="extra-controls-container">
+
+          <div edit>
             <ix-input
               formControlName="full_name"
-              class="inlined-control"
+              [attr.aria-label]="'Full Name' | translate"
             ></ix-input>
           </div>
-        }
-      </div>
-    </div>
+        </ix-editable>
+      </ix-details-item>
 
-    <div class="item">
-      <div class="name">
-        {{ 'Email' | translate }}:
-      </div>
-      <div class="value">
-        <div class="value-prompt empty-value">
-          {{ 'Not Set' | translate }}
-          <ix-icon name="mdi-pencil" class="edit-icon"></ix-icon>
-        </div>
-      </div>
-    </div>
+      <ix-details-item [label]="'Email' | translate">
+        <ix-editable>
+          <div view>
+            {{ form.value.email }}
+          </div>
 
-    <div class="item">
-      <div class="name with-spacer">
-        {{ 'Groups' | translate }}:
-      </div>
-      <div class="value with-spacer">
-        @if (!isEditingGroups) {
-          <div class="value-prompt" (click)="onEditGroups(); $event.stopPropagation()">
-            <div>
-              <div class="selected-group">
-                @if (hasSharingRole()) {
-                  &bull;
-                }
-                {{ 'New bob group' | translate }}
-              </div>
+          <div edit>
+            <ix-input
+              formControlName="email"
+              [attr.aria-label]="'Email' | translate"
+            ></ix-input>
+          </div>
+        </ix-editable>
+      </ix-details-item>
 
-              @if (hasSharingRole()) {
-                <div class="sharing-admins-group selected-group">
-                  &bull; truenas_sharing_administrators<br>
-                  <span class="admin-role-text">&nbsp;&nbsp;({{ 'for Sharing Admin role' | translate }})</span>
-                </div>
+      <ix-details-item [label]="'Groups' | translate">
+        <ix-editable>
+          <div view>
+            <div class="selected-group">
+              @if (form.value.group) {
+                {{ form.value.group }}
+              } @else if (hasSharingRole()) {
+                <ix-icon name="mdi-circle"></ix-icon>
+                {{ 'New group' | translate }}
               }
             </div>
 
-            <ix-icon name="mdi-pencil" class="edit-icon"></ix-icon>
+            @if (hasSharingRole()) {
+              <div class="sharing-admins-group selected-group">
+                <ix-icon name="mdi-circle"></ix-icon>
+                truenas_sharing_administrators
+                <br>
+                <span class="admin-role-text">&nbsp;&nbsp;({{ 'for Sharing Admin role' | translate }})</span>
+              </div>
+            }
           </div>
-        } @else {
-          <div class="extra-controls-container">
+
+          <div edit>
             <ix-checkbox
-              formControlName="create_group"
+              formControlName="group_create"
               [label]="'Create New Primary Group' | translate"
             ></ix-checkbox>
 
@@ -85,34 +68,31 @@
               [autocompleteProvider]="groupsProvider"
             ></ix-chips>
           </div>
-        }
-      </div>
-    </div>
+        </ix-editable>
+      </ix-details-item>
+
+      <ix-details-item [label]="'UID' | translate">
+        <ix-editable [emptyValue]="'Next Available' | translate">
+          <div view>
+            {{ form.value.uid }}
+          </div>
 
-    <div class="item">
-      <div class="name">
-        {{ 'UID' | translate }}:
-      </div>
-      <div class="value">
-        <div class="value-prompt">
-          {{ 'Next Available' | translate }}
-          <ix-icon name="mdi-pencil" class="edit-icon"></ix-icon>
-        </div>
-      </div>
-    </div>
+          <div edit>
+            <ix-input
+              formControlName="uid"
+              [attr.aria-label]="'UID' | translate"
+            ></ix-input>
+          </div>
+        </ix-editable>
+      </ix-details-item>
 
-    <div class="item">
-      <div class="name">
-        {{ 'Home Directory' | translate }}:
-      </div>
-      <div class="value">
-        @if (!isEditingHomeDirectory) {
-          <div class="value-prompt empty-value" (click)="onEditHomeDirectory(); $event.stopPropagation()">
-            {{ 'None' | translate }}
-            <ix-icon name="mdi-pencil" class="edit-icon"></ix-icon>
+      <ix-details-item [label]="'Home Directory' | translate">
+        <ix-editable>
+          <div view>
+            {{ form.value.home }}
           </div>
-        } @else {
-          <div class="extra-controls-container">
+
+          <div edit>
             <ix-checkbox
               formControlName="create_home_directory"
               [label]="'Create New Home Directory' | translate"
@@ -132,44 +112,29 @@
               >
                 <span class="default-permissions">
                   {{ 'Default Permissions' | translate }}
-                  <div>{{ '700 or owner – all, others – none' | translate }}</div>
+                  <div>{{ '700 or owner - all, others - none' | translate }}</div>
                 </span>
               </mat-checkbox>
             }
           </div>
-        }
-      </div>
-    </div>
+        </ix-editable>
+      </ix-details-item>
 
-    @if (shellAccessEnabled()) {
-      <div class="item">
-        <div class="name with-spacer">
-        {{ 'Shell' | translate }}:
-        </div>
-        <div class="value with-spacer">
-          <div class="value-prompt empty-value">
-            zsh
-            <!-- TODO: Repalce with real value -->
-            <ix-icon name="mdi-pencil" class="edit-icon"></ix-icon>
+      <ix-details-item [label]="'Shell' | translate">
+        <ix-editable>
+          <div view>
+            {{ form?.value?.shell || 'zsh' }}
           </div>
-        </div>
-      </div>
-    }
 
-    @if (shellAccessEnabled()) {
-      <div class="item">
-        <div class="name">
-          {{ 'Allowed Sudo Commands' | translate }}:
-        </div>
-        <div class="value">
-          <div class="value-prompt empty-value">
-            {{ 'None' | translate }}
-            <ix-icon name="mdi-pencil" class="edit-icon"></ix-icon>
+          <div edit>
+            <ix-select
+              formControlName="shell"
+              [attr.aria-label]="'Shell' | translate"
+              [options]="shellOptions$"
+            ></ix-select>
           </div>
-        </div>
-      </div>
-    }
-    </div>
+        </ix-editable>
+      </ix-details-item>
+    </ix-details-table>
   </ix-fieldset>
-
 </form>

src/app/pages/credentials/new-users/user-form/additional-details-section/additional-details-section.component.spec.ts

@@ -0,0 +1,58 @@
+import { ReactiveFormsModule } from '@angular/forms';
+import { createComponentFactory, mockProvider, Spectator } from '@ngneat/spectator/jest';
+import { mockApi, mockCall } from 'app/core/testing/utils/mock-api.utils';
+import { Choices } from 'app/interfaces/choices.interface';
+import { AdditionalDetailsSectionComponent } from 'app/pages/credentials/new-users/user-form/additional-details-section/additional-details-section.component';
+import { UserFormStore } from 'app/pages/credentials/new-users/user-form/user.store';
+import { FilesystemService } from 'app/services/filesystem.service';
+
+describe('AdditionalDetailsSectionComponent', () => {
+  let spectator: Spectator<AdditionalDetailsSectionComponent>;
+
+  const createComponent = createComponentFactory({
+    component: AdditionalDetailsSectionComponent,
+    imports: [
+      ReactiveFormsModule,
+    ],
+    providers: [
+      mockProvider(FilesystemService),
+      mockProvider(UserFormStore, {
+        isStigMode: jest.fn(() => false),
+        nextUid: jest.fn(() => 1001),
+        updateUserConfig: jest.fn(),
+        updateSetupDetails: jest.fn(),
+        role: jest.fn(() => 'prompt'),
+        isNewUser: jest.fn(() => true),
+        shellAccess: jest.fn(() => false),
+      }),
+      mockApi([
+        mockCall('user.shell_choices', {
+          '/usr/bin/bash': 'bash',
+          '/usr/bin/zsh': 'zsh',
+        } as Choices),
+        mockCall('group.query', []),
+      ]),
+    ],
+  });
+
+  beforeEach(() => {
+    spectator = createComponent();
+  });
+
+  it('checks initial value when creating a new user', () => {
+    expect(spectator.inject(UserFormStore).updateUserConfig).toHaveBeenCalledWith({
+      full_name: '',
+      email: null,
+      group_create: true,
+      groups: [],
+      home: '',
+      home_create: false,
+      uid: null,
+    });
+    expect(spectator.inject(UserFormStore).updateSetupDetails).toHaveBeenCalledWith({
+      defaultPermissions: true,
+    });
+  });
+
+  // TODO: Add more tests
+});