mgr/dashboard:Update encryption and tags in bucket form

Fixes https://tracker.ceph.com/issues/65110

- renamed Security to Encryption
- aligned security fieldset with rest of the form using `cd-help-text`
  and aligning it with object locking in UX
- aligned security fieldset top use `cd-help-text`
- changed help text of Tags

Signed-off-by: Afreen <afreen23.git@gmail.com>

diff --git a/src/pybind/mgr/dashboard/frontend/cypress/e2e/rgw/buckets.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/e2e/rgw/buckets.po.ts
index 53756f0a2569a8a0d82f6deff346d52be67c4f70..51fa3de4987f8660d125930ce276b57c5d7d8973 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/cypress/e2e/rgw/buckets.po.ts
+++ b/src/pybind/mgr/dashboard/frontend/cypress/e2e/rgw/buckets.po.ts
@@ -58,7 +58,6 @@ export class BucketsPageHelper extends PageHelper {
 
   @PageHelper.restrictTo(pages.create.url)
   checkForDefaultEncryption() {
-    cy.get("cd-helper[aria-label='toggle encryption helper']").click();
     cy.get("a[aria-label='click here']").click();
     cy.get('cd-modal').within(() => {
       cy.get('input[id=s3Enabled]').should('be.checked');

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html
index 108b1ba6ce56911e1555b512440931efda6ca361..ce3776e726afff701ef9c6366e9f4f771c0a13fc 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html
@@ -308,30 +308,30 @@
           </div>
         </fieldset>
 
-        <!-- Security -->
+        <!-- Encryption -->
         <fieldset>
           <legend class="cd-header"
-                  i18n>Security</legend>
+                  i18n>Encryption</legend>
           <div class="form-group row">
-            <div class="cd-col-form-offset">
-              <div class="custom-control custom-checkbox">
-                <input class="form-check-input"
-                       id="encryption_enabled"
-                       name="encryption_enabled"
-                       formControlName="encryption_enabled"
-                       type="checkbox"
-                       [attr.disabled]="!kmsVaultConfig && !s3VaultConfig ? true : null">
-                <label class="form-check-label"
-                       for="encryption_enabled"
-                       i18n>Encryption</label>
-                <cd-helper aria-label="toggle encryption helper">
-                  <span i18n>Enables encryption for the objects in the bucket.
-                     To enable encryption on a bucket you need to set the configuration values for SSE-S3 or SSE-KMS.
-                     To set the configuration values <a href="#/rgw/bucket/create"
-                                                        (click)="openConfigModal()"
-                                                        aria-label="click here">Click here</a></span>
-                </cd-helper>
-              </div>
+            <label class="cd-col-form-label pt-0"
+                   for="encryption_enabled"
+                   i18n>
+                    Enable
+            </label>
+            <div class="cd-col-form-input">
+              <input class="form-check-input"
+                     id="encryption_enabled"
+                     name="encryption_enabled"
+                     formControlName="encryption_enabled"
+                     type="checkbox"
+                     [attr.disabled]="!kmsVaultConfig && !s3VaultConfig ? true : null"/>
+              <cd-help-text aria-label="encryption helper">
+                <span i18n>Enables encryption for the objects in the bucket.
+                    To enable encryption on a bucket you need to set the configuration values for SSE-S3 or SSE-KMS.
+                    To set the configuration values <a href="#/rgw/bucket/create"
+                                                       (click)="openConfigModal()"
+                                                       aria-label="click here">Click here</a></span>
+              </cd-help-text>
             </div>
           </div>
 
@@ -419,7 +419,7 @@
         <fieldset>
           <legend class="cd-header"
                   i18n>Tags
-            <cd-helper>Tagging gives you a way to categorize storage</cd-helper>
+            <cd-help-text>Tagging provides a way to categorize storage</cd-help-text>
           </legend>
           <span *ngFor="let tag of tags; let i=index;">
             <ng-container *ngTemplateOutlet="tagTpl; context:{index: i, tag: tag}"></ng-container>