mgr/dashboard: fix host form issues

Addressing the review comments in ceph#60355 (review)

Issues fixing
 - cluster expansion host form not closing form when submitting it
 - cluster expansion host form changing the location when closing it
 - put the helper text inside helper component since its longer
 - maintenance field should be hidden in cluster expansion form since
   its not a valid option while expanding a cluster. We already add host
   in _no_schedule

Fixes: https://tracker.ceph.com/issues/69020
Signed-off-by: Nizamudeen A <[email protected]>

Author: nizamial09

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts

@@ -12,7 +12,8 @@ import {
   ProgressIndicatorModule,
   InputModule,
   ModalModule,
-  TreeviewModule
+  TreeviewModule,
+  ListModule
 } from 'carbon-components-angular';
 
 import {
@@ -106,7 +107,8 @@ import { MultiClusterDetailsComponent } from './multi-cluster/multi-cluster-deta
     ProgressIndicatorModule,
     ButtonModule,
     InputModule,
-    ModalModule
+    ModalModule,
+    ListModule
   ],
   declarations: [
     HostsComponent,

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.html

@@ -1,7 +1,6 @@
 <cds-modal size="md"
            [open]="open"
-           [hasScrollingContent]="true"
-           (overlaySelected)="closeModal()">
+           [hasScrollingContent]="true">
   <cds-modal-header (closeSelect)="closeModal()">
     <h3 cdsModalHeaderHeading
         i18n>{{ action | titlecase }} {{ resource | upperFirst }}</h3>
@@ -14,19 +13,18 @@
     <div cdsModalContent>
       <!-- Hostname -->
       <div class="form-item">
-        <cds-text-label label="Hostname"
-                        for="hostname"
-                        cdRequiredField="Hostname"
+        <cds-text-label for="hostname"
                         [invalid]="!hostForm.controls.hostname.valid && hostForm.controls.hostname.dirty"
-                        [invalidText]="hostnameError"
-                        i18n>Hostname
+                        [invalidText]="hostnameError">
+          <ng-container i18n>Hostname (required)</ng-container>
           <input cdsText
                  type="text"
                  placeholder="mon-123"
                  id="hostname"
                  name="hostname"
                  formControlName="hostname"
                  autofocus
+                 [invalid]="!hostForm.controls.hostname.valid && hostForm.controls.hostname.dirty"
                  (keyup)="checkHostNameValue()">
         </cds-text-label>
         <ng-template #hostnameError>
@@ -41,10 +39,13 @@
         </ng-template>
         <cd-help-text>
           To add multiple hosts at once, you can enter:
-          <ul>
-            <li>a comma-separated list of hostnames <samp>(e.g.: example-01,example-02,example-03)</samp>,</li>
-            <li>a range expression <samp>(e.g.: example-[01-03].ceph)</samp>,</li>
-            <li>a comma separated range expression <samp>(e.g.: example-[01-05].lab.com,example2-[1-4].lab.com,example3-[001-006].lab.com)</samp></li>
+          <ul cdsList>
+            <li cdsListItem
+                i18n>a comma-separated list of hostnames <b>(e.g.: example-01,example-02,example-03)</b>,</li>
+            <li cdsListItem
+                i18n>a range expression <b>(e.g.: example-[01-03].ceph)</b>,</li>
+            <li cdsListItem
+                i18n>a comma separated range expression <b>(e.g.: example-[01-05].lab.com,example2-[1-4].lab.com,example3-[001-006].lab.com)</b></li>
           </ul>
         </cd-help-text>
       </div>

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Inject, OnInit, Optional } from '@angular/core';
 import { UntypedFormControl, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import expand from 'brace-expansion';
@@ -13,8 +13,8 @@ import { CdValidators } from '~/app/shared/forms/cd-validators';
 import { CdTableFetchDataContext } from '~/app/shared/models/cd-table-fetch-data-context';
 import { FinishedTask } from '~/app/shared/models/finished-task';
 import { TaskWrapperService } from '~/app/shared/services/task-wrapper.service';
-import { Location } from '@angular/common';
 
+const HOSTS = 'hosts';
 @Component({
   selector: 'cd-host-form',
   templateUrl: './host-form.component.html',
@@ -33,7 +33,6 @@ export class HostFormComponent extends CdForm implements OnInit {
   pageURL: string;
   hostPattern = false;
   labelsOption: Array<SelectOption> = [];
-  hideMaintenance: boolean;
 
   messages = new SelectMessages({
     empty: $localize`There are no labels.`,
@@ -47,14 +46,18 @@ export class HostFormComponent extends CdForm implements OnInit {
     private hostService: HostService,
     private taskWrapper: TaskWrapperService,
     private route: ActivatedRoute,
-    private location: Location
+
+    @Inject('hideMaintenance') @Optional() public hideMaintenance?: boolean
   ) {
     super();
     this.resource = $localize`host`;
     this.action = this.actionLabels.ADD;
   }
 
   ngOnInit() {
+    if (this.router.url.includes(HOSTS)) {
+      this.pageURL = HOSTS;
+    }
     this.open = this.route.outlet === 'modal';
     this.createForm();
     const hostContext = new CdTableFetchDataContext(() => undefined);
@@ -147,7 +150,7 @@ export class HostFormComponent extends CdForm implements OnInit {
     this.addr = this.hostForm.get('addr').value;
     this.status = this.hostForm.get('maintenance').value ? 'maintenance' : '';
     this.allLabels = this.hostForm.get('labels').value;
-    if (this.pageURL !== 'hosts' && !this.allLabels.includes('_no_schedule')) {
+    if (this.pageURL !== HOSTS && !this.allLabels.includes('_no_schedule')) {
       this.allLabels.push('_no_schedule');
     }
     this.hostnameArray.forEach((hostName: string) => {
@@ -163,15 +166,15 @@ export class HostFormComponent extends CdForm implements OnInit {
             this.hostForm.setErrors({ cdSubmitButton: true });
           },
           complete: () => {
-            this.pageURL === 'hosts'
-              ? this.router.navigate([this.pageURL, { outlets: { modal: null } }])
-              : this.location.back();
+            this.closeModal();
           }
         });
     });
   }
 
   closeModal(): void {
-    this.location.back();
+    this.pageURL === HOSTS
+      ? this.router.navigate([this.pageURL, { outlets: { modal: null } }])
+      : (this.open = false);
   }
 }