mgr/dashboard: file/smb: Create SMB share dialog is missing a share name input

Fixes: https://tracker.ceph.com/issues/73472
Signed-off-by: Dnyaneshwari Talwekar <dtalweka@redhat.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-share-form/smb-share-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-share-form/smb-share-form.component.html
index fb0ffee86072a8edac2df24f2ef404f81b3b9b7e..311609a371ec18c037d3ada49977d0230f4b8cdd 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-share-form/smb-share-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-share-form/smb-share-form.component.html
@@ -11,32 +11,53 @@
       </div>
 
       <!-- Share Id -->
-      <div class="form-item">
-        <cds-text-label
-          labelInputID="share_id"
-          i18n
-          helperText="Unique share identifier"
-          i18n-helperText
-          cdRequiredField="Share Name"
-          [invalid]="smbShareForm.controls.share_id.invalid && smbShareForm.controls.share_id.dirty"
-          [invalidText]="shareError"
-          >Share Name
-          <input
-            cdsText
-            type="text"
-            id="share_id"
-            formControlName="share_id"
-            [invalid]="smbShareForm.controls.share_id.invalid && smbShareForm.controls.share_id.dirty"
-          />
-        </cds-text-label>
-        <ng-template #shareError>
-          <span
-            class="invalid-feedback"
-            *ngIf="smbShareForm.showError('share_id', formDir, 'required')"
+      <div class="form-item form-item-append"
+           cdsRow>
+        <div cdsCol>
+          <cds-text-label
+            labelInputID="share_id"
             i18n
-            >This field is required.</span
-          >
-        </ng-template>
+            helperText="A unique identifier for share"
+            i18n-helperText
+            cdRequiredField="Share ID"
+            [invalid]="
+              smbShareForm.controls.share_id.invalid && smbShareForm.controls.share_id.dirty
+            "
+            [invalidText]="shareError"
+            >Share ID
+            <input
+              cdsText
+              type="text"
+              id="share_id"
+              formControlName="share_id"
+              [invalid]="
+                smbShareForm.controls.share_id.invalid && smbShareForm.controls.share_id.dirty
+              "
+              [invalidText]="shareError"
+            />
+          </cds-text-label>
+          <ng-template #shareError>
+            <span
+              class="invalid-feedback"
+              *ngIf="smbShareForm.showError('share_id', formDir, 'required')"
+              i18n
+              >This field is required.</span
+            >
+          </ng-template>
+        </div>
+
+        <!-- Share Name -->
+        <div cdsCol>
+          <cds-text-label labelInputID="name"
+                          i18n
+                          helperText="Name of the Share"
+                          i18n-helperText>Share Name
+            <input cdsText
+                   type="text"
+                   id="name"
+                   formControlName="name" />
+          </cds-text-label>
+        </div>
       </div>
 
       <!-- Volume -->
@@ -49,7 +70,8 @@
           (change)="volumeChangeHandler()"
           [invalid]="smbShareForm.controls.volume.invalid && smbShareForm.controls.volume.dirty"
           [invalidText]="volumeError"
-          i18n-label>
+          i18n-label
+        >
           <option *ngIf="allFsNames?.length === 0"
                   value=""
                   i18n>
@@ -84,7 +106,8 @@
           id="subvolume_group"
           (change)="getSubVol()"
           [skeleton]="allsubvolgrps === null"
-          i18n-label>
+          i18n-label
+        >
           <option *ngIf="allsubvolgrps === null"
                   value=""
                   i18n>Loading...</option>
@@ -137,50 +160,50 @@
         </cds-select>
       </div>
 
-    <!-- Path -->
-    <div class="form-item form-item-append"
-         cdsRow>
-      <div cdsCol>
-        <cds-text-label labelInputID="prefixedPath"
-                        i18n
-                        helperText="A path is a relative path.">Prefixed Path
-          <input cdsText
-                 type="text"
-                 id="prefixedPath"
-                 formControlName="prefixedPath" />
-        </cds-text-label>
-      </div>
-      <div cdsCol>
-        <cds-text-label
-          labelInputID="inputPath"
-          i18n
-          [invalid]="
-            smbShareForm.controls.inputPath.invalid && smbShareForm.controls.inputPath.dirty
-          "
-          [invalidText]="pathError"
-          helperText="A relative path in a cephFS file system."
-          cdRequiredField="Path"
-          >Input Path
-          <input
-            cdsText
-            type="text"
-            id="inputPath"
-            formControlName="inputPath"
+      <!-- Path -->
+      <div class="form-item form-item-append"
+           cdsRow>
+        <div cdsCol>
+          <cds-text-label labelInputID="prefixedPath"
+                          i18n
+                          helperText="A path is a relative path.">Prefixed Path
+            <input cdsText
+                   type="text"
+                   id="prefixedPath"
+                   formControlName="prefixedPath" />
+          </cds-text-label>
+        </div>
+        <div cdsCol>
+          <cds-text-label
+            labelInputID="inputPath"
+            i18n
             [invalid]="
               smbShareForm.controls.inputPath.invalid && smbShareForm.controls.inputPath.dirty
             "
-          />
-        </cds-text-label>
-        <ng-template #pathError>
-          <span
-            class="invalid-feedback"
-            *ngIf="smbShareForm.showError('inputPath', formDir, 'required')"
-            i18n
-            >This field is required.</span
-          >
-        </ng-template>
+            [invalidText]="pathError"
+            helperText="A relative path in a cephFS file system."
+            cdRequiredField="Path"
+            >Input Path
+            <input
+              cdsText
+              type="text"
+              id="inputPath"
+              formControlName="inputPath"
+              [invalid]="
+                smbShareForm.controls.inputPath.invalid && smbShareForm.controls.inputPath.dirty
+              "
+            />
+          </cds-text-label>
+          <ng-template #pathError>
+            <span
+              class="invalid-feedback"
+              *ngIf="smbShareForm.showError('inputPath', formDir, 'required')"
+              i18n
+              >This field is required.</span
+            >
+          </ng-template>
+        </div>
       </div>
-    </div>
 
       <!-- Browseable -->
       <div class="form-item">

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-share-form/smb-share-form.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-share-form/smb-share-form.component.spec.ts
index 1d4f3c104c5c8f7d08b143a00f8122a9f02d6cf9..2c3ae8037b58378f593302675873a145488d8b77 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-share-form/smb-share-form.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-share-form/smb-share-form.component.spec.ts
@@ -83,6 +83,7 @@ describe('SmbShareFormComponent', () => {
     component.smbShareForm.setValue({
       share_id: 'share1',
       volume: 'fs1',
+      name: 'My Share',
       subvolume_group: 'group1',
       subvolume: 'subvol1',
       prefixedPath: '/volumes/fs1/group1/subvol1',

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-share-form/smb-share-form.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-share-form/smb-share-form.component.ts
index b8824cb879a887ff02162a700b267a9c9e21c9a3..9adcf2aaeaa8fe38ccbd124b83cf9d6e1b9122fa 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-share-form/smb-share-form.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-share-form/smb-share-form.component.ts
@@ -70,10 +70,14 @@ export class SmbShareFormComponent extends CdForm implements OnInit {
         this.shareResponse = resp;
         this.smbShareForm.get('share_id').setValue(this.shareResponse.share_id);
         this.smbShareForm.get('share_id').disable();
-        this.smbShareForm.get('volume').setValue(this.shareResponse.cephfs.volume);
-        this.smbShareForm.get('subvolume_group').setValue(this.shareResponse.cephfs.subvolumegroup);
-        this.smbShareForm.get('subvolume').setValue(this.shareResponse.cephfs.subvolume);
-        this.smbShareForm.get('inputPath').setValue(this.shareResponse.cephfs.path);
+        this.smbShareForm.get('name').setValue(this.shareResponse.name);
+        this.smbShareForm.get('name').disable();
+        this.smbShareForm.get('volume').setValue(this.shareResponse?.cephfs?.volume);
+        this.smbShareForm
+          .get('subvolume_group')
+          .setValue(this.shareResponse?.cephfs?.subvolumegroup);
+        this.smbShareForm.get('subvolume').setValue(this.shareResponse?.cephfs?.subvolume);
+        this.smbShareForm.get('inputPath').setValue(this.shareResponse?.cephfs?.path);
         if (this.shareResponse.readonly) {
           this.smbShareForm.get('readonly').setValue(this.shareResponse.readonly);
         }
@@ -81,9 +85,15 @@ export class SmbShareFormComponent extends CdForm implements OnInit {
           this.smbShareForm.get('browseable').setValue(this.shareResponse.browseable);
         }
 
-        this.getSubVolGrp(this.shareResponse.cephfs.volume);
+        this.getSubVolGrp(this.shareResponse?.cephfs?.volume);
       });
     }
+    this.smbShareForm.get('share_id')?.valueChanges.subscribe((value) => {
+      const shareName = this.smbShareForm.get('name');
+      if (shareName && !shareName.dirty) {
+        shareName.setValue(value, { emitEvent: false });
+      }
+    });
     this.loadingReady();
   }
 
@@ -92,6 +102,7 @@ export class SmbShareFormComponent extends CdForm implements OnInit {
       share_id: new FormControl('', {
         validators: [Validators.required]
       }),
+      name: new FormControl(''),
       volume: new FormControl('', {
         validators: [Validators.required]
       }),
@@ -195,11 +206,13 @@ export class SmbShareFormComponent extends CdForm implements OnInit {
     const rawFormValue = _.cloneDeep(this.smbShareForm.value);
     const correctedPath = rawFormValue.inputPath;
     const shareId = this.smbShareForm.get('share_id')?.value;
+    const shareName = this.smbShareForm.get('name').value;
     const requestModel: ShareRequestModel = {
       share_resource: {
         resource_type: SHARE_RESOURCE,
         cluster_id: this.clusterId,
         share_id: shareId,
+        name: shareName,
         cephfs: {
           volume: rawFormValue.volume,
           path: correctedPath,
@@ -211,7 +224,6 @@ export class SmbShareFormComponent extends CdForm implements OnInit {
         readonly: rawFormValue.readonly
       }
     };
-
     return requestModel;
   }