[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
diff --git a/ambari-web/app/mappers/configs/themes_mapper.js b/ambari-web/app/mappers/configs/themes_mapper.js
index aa6e004..3eb72ce 100644
--- a/ambari-web/app/mappers/configs/themes_mapper.js
+++ b/ambari-web/app/mappers/configs/themes_mapper.js
@@ -142,6 +142,7 @@
         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 @@
       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);
         }
diff --git a/ambari-web/app/mixins/common/configs/enhanced_configs.js b/ambari-web/app/mixins/common/configs/enhanced_configs.js
index 78e65a9..cec9744 100644
--- a/ambari-web/app/mixins/common/configs/enhanced_configs.js
+++ b/ambari-web/app/mixins/common/configs/enhanced_configs.js
@@ -826,9 +826,13 @@
       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);
diff --git a/ambari-web/app/models/configs/theme/sub_section.js b/ambari-web/app/models/configs/theme/sub_section.js
index 591a3e9..f32854b 100644
--- a/ambari-web/app/models/configs/theme/sub_section.js
+++ b/ambari-web/app/models/configs/theme/sub_section.js
@@ -28,6 +28,11 @@
   name: DS.attr('string'),
 
   /**
+   * theme from which this is coming from , eg: default, database, credentials, etc.
+   */
+  themeName: DS.attr('string'),
+
+  /**
    * @type {string}
    */
   displayName: DS.attr('string'),
diff --git a/ambari-web/app/models/configs/theme/sub_section_tab.js b/ambari-web/app/models/configs/theme/sub_section_tab.js
index 9062457..79cea52 100644
--- a/ambari-web/app/models/configs/theme/sub_section_tab.js
+++ b/ambari-web/app/models/configs/theme/sub_section_tab.js
@@ -28,6 +28,11 @@
   name: DS.attr('string'),
 
   /**
+   * theme from which this is coming from , eg: default, database, credentials, etc.
+   */
+  themeName: DS.attr('string'),
+
+  /**
    * @type {string}
    */
   displayName: DS.attr('string'),
diff --git a/ambari-web/test/mappers/configs/themes_mapper_test.js b/ambari-web/test/mappers/configs/themes_mapper_test.js
index 3b078c2..a2983f1 100644
--- a/ambari-web/test/mappers/configs/themes_mapper_test.js
+++ b/ambari-web/test/mappers/configs/themes_mapper_test.js
@@ -219,7 +219,8 @@
           "name": "SSEC1",
           "row_index": 2,
           "row_span": 5,
-          "section_id": 1
+          "section_id": 1,
+          "theme_name": "t1",
         }
       ]);
     });
@@ -239,7 +240,8 @@
           "name": "SSEC1",
           "row_index": 2,
           "row_span": 5,
-          "section_id": 1
+          "section_id": 1,
+          "theme_name": "t1"
         }],
         'subsection'
       ]);
@@ -260,7 +262,8 @@
           "name": "SSEC1",
           "row_index": 2,
           "row_span": 5,
-          "section_id": 1
+          "section_id": 1,
+          "theme_name": "t1"
         }
       ]);
     });
@@ -293,7 +296,7 @@
     });
 
     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 @@
           "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 @@
           "id": "SEC1",
           "is_active": true,
           "name": "SEC1",
-          "sub_section_id": 2
+          "sub_section_id": 2,
+          "theme_name": "t1"
         }
       ]);
     });