[AMBARI-24142] Show/Hide config-section not working for Ranger and Ra… (#1577)

* [AMBARI-24142] Show/Hide config-section not working for Ranger and Ranger KMS theme.

* fixed a typo

* Replaced contains with includes

ambari-web/app/mappers/configs/themes_mapper.js

@@ -142,6 +142,7 @@ App.themesMapper = App.QuickDataMapper.create({
         var parsedSubSection = this.parseIt(subSection, this.get("subSectionConfig"));
         parsedSubSection.section_id = parsedSection.id;
         parsedSubSection.id = parsedSubSection.name + '_' + serviceName + '_' + themeName;
+        parsedSubSection.theme_name = themeName;
 
         this.loadSubSectionTabs(subSection, parsedSubSection);
         if (parsedSubSection['depends_on']) {
@@ -167,6 +168,7 @@ App.themesMapper = App.QuickDataMapper.create({
       subSection['subsection-tabs'].forEach(function (subSectionTab) {
         var parsedSubSectionTab = this.parseIt(subSectionTab, this.get("subSectionTabConfig"));
         parsedSubSectionTab.sub_section_id = parsedSubSection.id;
+        parsedSubSectionTab.theme_name = parsedSubSection.theme_name;
         if (parsedSubSectionTab['depends_on']) {
           subSectionTabConditions.push(parsedSubSectionTab);
         }

ambari-web/app/mixins/common/configs/enhanced_configs.js

@@ -826,9 +826,13 @@ App.EnhancedConfigsMixin = Em.Mixin.create(App.ConfigWithOverrideRecommendationP
       if (valueAttributes && !Em.none(valueAttributes.visible)) {
         let themeResource;
         if (subsectionCondition.get('type') === 'subsection') {
-          themeResource = App.SubSection.find().findProperty('name', subsectionConditionName);
+          themeResource = App.SubSection.find().find(function (subsection) {
+            return subsection.get('name') === subsectionConditionName && subsectionCondition.get('id').toLowerCase().includes(subsection.get('themeName').toLowerCase());
+          });
         } else if (subsectionCondition.get('type') === 'subsectionTab') {
-          themeResource = App.SubSectionTab.find().findProperty('name', subsectionConditionName);
+          themeResource = App.SubSectionTab.find().find(function (subsectionTab) {
+            return subsectionTab.get('name') === subsectionConditionName && subsectionCondition.get('id').toLowerCase().includes(subsectionTab.get('themeName').toLowerCase());
+          });
         }
         themeResource.set('isHiddenByConfig', !valueAttributes.visible);
         themeResource.get('configs').setEach('hiddenBySection', !valueAttributes.visible);

ambari-web/app/models/configs/theme/sub_section.js

@@ -27,6 +27,11 @@ App.SubSection = DS.Model.extend({
    */
   name: DS.attr('string'),
 
+  /**
+   * theme from which this is coming from , eg: default, database, credentials, etc.
+   */
+  themeName: DS.attr('string'),
+
   /**
    * @type {string}
    */

ambari-web/app/models/configs/theme/sub_section_tab.js

@@ -27,6 +27,11 @@ App.SubSectionTab = DS.Model.extend({
    */
   name: DS.attr('string'),
 
+  /**
+   * theme from which this is coming from , eg: default, database, credentials, etc.
+   */
+  themeName: DS.attr('string'),
+
   /**
    * @type {string}
    */

ambari-web/test/mappers/configs/themes_mapper_test.js

@@ -219,7 +219,8 @@ describe('App.themeMapper', function () {
           "name": "SSEC1",
           "row_index": 2,
           "row_span": 5,
-          "section_id": 1
+          "section_id": 1,
+          "theme_name": "t1",
         }
       ]);
     });
@@ -239,7 +240,8 @@ describe('App.themeMapper', function () {
           "name": "SSEC1",
           "row_index": 2,
           "row_span": 5,
-          "section_id": 1
+          "section_id": 1,
+          "theme_name": "t1"
         }],
         'subsection'
       ]);
@@ -260,7 +262,8 @@ describe('App.themeMapper', function () {
           "name": "SSEC1",
           "row_index": 2,
           "row_span": 5,
-          "section_id": 1
+          "section_id": 1,
+          "theme_name": "t1"
         }
       ]);
     });
@@ -293,7 +296,7 @@ describe('App.themeMapper', function () {
     });
 
     it('mapThemeConditions should be called', function() {
-      App.themesMapper.loadSubSectionTabs(subSection, {id: 2});
+      App.themesMapper.loadSubSectionTabs(subSection, {id: 2, theme_name: "t1"});
       expect(App.themesMapper.mapThemeConditions.getCall(0).args).to.be.eql([
         [{
           "depends_on": [],
@@ -301,14 +304,15 @@ describe('App.themeMapper', function () {
           "id": "SEC1",
           "is_active": true,
           "name": "SEC1",
-          "sub_section_id": 2
+          "sub_section_id": 2,
+          "theme_name": "t1"
         }],
         'subsectionTab'
       ]);
     });
 
     it('App.store.safeLoadMany should be called', function() {
-      App.themesMapper.loadSubSectionTabs(subSection, {id: 2});
+      App.themesMapper.loadSubSectionTabs(subSection, {id: 2, theme_name: "t1"});
       expect(App.store.safeLoadMany.getCall(0).args[1]).to.be.eql([
         {
           "depends_on": [],
@@ -316,7 +320,8 @@ describe('App.themeMapper', function () {
           "id": "SEC1",
           "is_active": true,
           "name": "SEC1",
-          "sub_section_id": 2
+          "sub_section_id": 2,
+          "theme_name": "t1"
         }
       ]);
     });