Merge pull request #69692 from rhcs-dashboard/feature/new-create-role-design

mgr/dashboard: Align RGW Account Role forms with updated UX design

Reviewed-by: Afreen Misbah <afreen@ibm.com>

diff --cc src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-accounts-form/rgw-user-accounts-form.component.html
index f06875488485380ed97104da61efb2e9e0aa7937,9a29716ad9e99d5060fb7f6fac0b1876932f0056..581a4ad3bf602e65190fb80881447ccf4e4e5ab4
--- 1/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-accounts-form/rgw-user-accounts-form.component.html
--- 2/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-accounts-form/rgw-user-accounts-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-accounts-form/rgw-user-accounts-form.component.html
@@@ -7,25 -7,25 +7,28 @@@
            novalidate>
  
        <div i18n="form title"
-            class="form-header">{{ action | titlecase }} {{ resource | upperFirst }}
+            class="form-header cds--type-heading-04 cds-mb-5">{{ action | titlecase }} {{ resource | lowercase }}
        </div>
  
+       <h4 class="cds--type-heading-03 cds-mb-4" i18n>Account details</h4>
+ 
        <!-- Account Name -->
        <div class="form-item">
-         <cds-text-label label="Account Name"
+         <cds-text-label label="Account name"
                          for="acc_name"
-                         cdRequiredField="Account Name"
                          [invalid]="!accountForm.controls.name.valid && accountForm.controls.name.dirty"
                          [invalidText]="accountIdError"
-                         i18n>Account Name
+                         helperText="Name must start and end in alphanumeric characters (3 to 63). Characters allowed: lowercase, numbers and nonconsecutive dots and hyphens."
+                         i18n-helperText
+                         i18n>Account name
            <input cdsText
                   type="text"
-                  placeholder="Enter account name"
+                  placeholder="for example, team-storage-01"
                   id="acc_name"
                   name="acc_name"
 +                 cdValidate
 +                 #accName="cdValidate"
 +                 [invalid]="accName.isInvalid"
                   formControlName="name"/>
          </cds-text-label>
          <ng-template #accountIdError>

diff --cc src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-accounts-form/rgw-user-accounts-form.component.ts
index da78beb5d69e0964bfb8dac791a020a0b60efb9b,d90ab47aeda207c867d90b239a9560a3feb9abba..7f08a6fa95a4bdd488e7923c627ce9be32ff6129
--- 1/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-accounts-form/rgw-user-accounts-form.component.ts
--- 2/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-accounts-form/rgw-user-accounts-form.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-accounts-form/rgw-user-accounts-form.component.ts
@@@ -25,8 -25,8 +25,9 @@@ export class RgwUserAccountsFormCompone
    action: string;
    resource: string;
    editing: boolean = false;
+   showAdvanced: boolean = false;
    submitObservables: Observable<Object>[] = [];
 +  originalAccountName: string = '';
  
    constructor(
      private router: Router,