Add hide filters option to settings.yml

The disable_filters config under big_picture and main in settings.yml can be optionally set as a list of filter names. The listed filters will not be displayed on the left hand side of the main page. Signed-off-by: Milan Lakhani <[email protected]>
cncf · Aug 8, 2022 · 17c3b92 · 17c3b92
1 parent 645e77e
commit 17c3b92
Showing 1 changed file with 25 additions and 24 deletions.
diff --git a/src/components/HomePageRenderer.js b/src/components/HomePageRenderer.js
@@ -16,9 +16,9 @@ const renderSingleSelect = ({name, options, title}) => (
     </div>
   `
 )
-const renderMultiSelect = ({name, options, title}) => (
+const renderMultiSelect = ({name, options, title, disabled}) => (
   `
-    <div class="select" data-type="multi" data-name="${name}" data-options="${h(JSON.stringify(options))}">
+    <div class="select" data-type="multi" data-name="${name}" data-options="${h(JSON.stringify(options))}" ${disabled ? "style='display:none;'":""}>
       <select class="select-text" required>
         <option value="1" selected>Value</option>
       </select>
@@ -45,32 +45,32 @@ const renderSortBySelect = function() {
   return renderSingleSelect({name: "sort",  options, title: "Sort By" });
 }
 
-const renderFilterCategory = function() {
-  return renderMultiSelect({name:"category", options: options('landscape'), title: 'Category'});
+const renderFilterCategory = function(disabled) {
+  return renderMultiSelect({name:"category", options: options('landscape'), title: 'Category', disabled: disabled});
 }
 
-const renderFilterProject = function() {
-  return renderMultiSelect({name:"project", options: options('relation'), title: 'Project'});
+const renderFilterProject = function(disabled) {
+  return renderMultiSelect({name:"project", options: options('relation'), title: 'Project', disabled: disabled});
 }
 
-const renderFilterLicense = function() {
-  return renderMultiSelect({name:"license",  options: options('license'), title: "License"});
+const renderFilterLicense = function(disabled) {
+  return renderMultiSelect({name:"license",  options: options('license'), title: "License", disabled: disabled});
 }
 
-const renderFilterOrganization = function() {
-  return renderMultiSelect({name: "organization", options: options('organization'), title: "Organization"});
+const renderFilterOrganization = function(disabled) {
+  return renderMultiSelect({name: "organization", options: options('organization'), title: "Organization", disabled: disabled});
 }
 
-const renderFilterHeadquarters = function() {
-  return renderMultiSelect({name: "headquarters", options: options('headquarters'), title: "Headquarters"});
+const renderFilterHeadquarters = function(disabled) {
+  return renderMultiSelect({name: "headquarters", options: options('headquarters'), title: "Headquarters", disabled: disabled});
 }
 
-const renderFilterCompanyType = function() {
-  return renderMultiSelect({name: "company-type", options: options('companyType'),  title: "Company Type"});
+const renderFilterCompanyType = function(disabled) {
+  return renderMultiSelect({name: "company-type", options: options('companyType'),  title: "Company Type", disabled: disabled});
 }
 
-const renderFilterIndustries = function() {
-  return renderMultiSelect({name: "industries", options: options('industries'), title: "Industry"});
+const renderFilterIndustries = function(disabled) {
+  return renderMultiSelect({name: "industries", options: options('industries'), title: "Industry", disabled: disabled});
 }
 
 module.exports.render = function({settings, guidePayload, hasGuide, bigPictureKey}) {
@@ -85,7 +85,8 @@ module.exports.render = function({settings, guidePayload, hasGuide, bigPictureKe
     }
   })
   const tabs = _.orderBy(mainCard.concat(landscapes), 'tabIndex').map( item => _.pick(item, ['title', 'mode', 'shortTitle', 'url']))
-
+  const unformattedDisabledFilters = settings.big_picture.main.disabled_filters || [];
+  const disabledFilters = unformattedDisabledFilters.map(filter => filter.toLowerCase());
 
   return `
     <div class="select-popup" style="display: none;">
@@ -155,13 +156,13 @@ module.exports.render = function({settings, guidePayload, hasGuide, bigPictureKe
             </a>
             ${renderGroupingSelect()}
             ${renderSortBySelect()}
-            ${renderFilterCategory()}
-            ${renderFilterProject()}
-            ${renderFilterLicense()}
-            ${renderFilterOrganization()}
-            ${renderFilterHeadquarters()}
-            ${renderFilterCompanyType()}
-            ${renderFilterIndustries()}
+            ${renderFilterCategory(disabledFilters.includes("category"))}
+            ${renderFilterProject(disabledFilters.includes("project"))}
+            ${renderFilterLicense(disabledFilters.includes("license"))}
+            ${renderFilterOrganization(disabledFilters.includes("organization"))}
+            ${renderFilterHeadquarters(disabledFilters.includes("headquarters"))}
+            ${renderFilterCompanyType(disabledFilters.includes("company type"))}
+            ${renderFilterIndustries(disabledFilters.includes("industry"))}
 
             <a class="filters-action export">
               ${icons.export}