refactor of interim filters to move config into app.config and improv…

…e css
guardian · Apr 30, 2024 · af161b4 · af161b4
1 parent 175c0ef
commit af161b4
Show file tree

Hide file tree

Showing 16 changed files with 204 additions and 19 deletions.
diff --git a/common-lib/src/main/resources/application.conf b/common-lib/src/main/resources/application.conf
@@ -128,6 +128,39 @@ domainMetadata.specifications = []
 
 metadata.templates = []
 
+interimFilterOptions = [
+ {
+   id:"allPermissions",
+   label:"All permissions",
+   mapping:"",
+   payable:"none"
+ },
+ {
+   id:"usableForAll",
+   label:"Usable for all",
+   mapping:"is:BBC-owned,-has:restrictions",
+   payable:"false"
+ },
+ {
+   id:"usableForNews",
+   label:"Agency (Usable for News)",
+   mapping:"category:agency",
+   payable:"false"
+ },
+ {
+   id:"bbcOwned",
+   label:"BBC owned programmes",
+   mapping:"category:programmes-organisation-owned",
+   payable:"none"
+ },
+ {
+   id:"independent",
+   label:"Independent programmes",
+   mapping:"category:programmes-independents",
+   payable:"none"
+ }
+]
+
 # costFilter {
 #  label: "chargeable",
 #  chargeable: true

diff --git a/dev/script/generate-config/service-config.js b/dev/script/generate-config/service-config.js
@@ -94,13 +94,10 @@ function getKahunaConfig(config){
         |  }
         |]`;
 
-    const permissionsOptions = `[{\\"id\\":\\"allPermissions\\",\\"label\\":\\"All permissions\\",\\"mapping\\":\\"\\",\\"payable\\":\\"none\\"},{\\"id\\":\\"usableForNews\\",\\"label\\":\\"Usable for News\\",\\"mapping\\":\\"category:agency\\",\\"payable\\":\\"false\\"}]`;
-
     const permissionsConfig = stripMargin`
       |usageRightsSummary=true
       |usePermissionsFilter=true
       |permissionsDefault="allPermissions"
-      |permissionsOptions="${permissionsOptions}"
       `;
 
     return stripMargin`${getCommonConfig(config)}

diff --git a/kahuna/app/controllers/KahunaController.scala b/kahuna/app/controllers/KahunaController.scala
@@ -54,6 +54,7 @@ class KahunaController(
     val fieldAliases: String = Json.toJson(config.fieldAliasConfigs).toString()
     val metadataTemplates: String = Json.toJson(config.metadataTemplates).toString()
     val announcements: String = Json.toJson(config.announcements).toString()
+    val interimFilterOptions: String = Json.toJson(config.interimFilterOptions).toString()
     val returnUri = config.rootUri + okPath
     val costFilterLabel = config.costFilterLabel.getOrElse("Free to use only")
     val costFilterChargeable = config.costFilterChargeable.getOrElse(false)
@@ -70,6 +71,7 @@ class KahunaController(
       domainMetadataSpecs,
       metadataTemplates,
       announcements,
+      interimFilterOptions,
       additionalNavigationLinks,
       costFilterLabel,
       costFilterChargeable,

diff --git a/kahuna/app/lib/InterimFilterOptionsConfig.scala b/kahuna/app/lib/InterimFilterOptionsConfig.scala
@@ -0,0 +1,30 @@
+package lib
+
+import play.api.ConfigLoader
+import play.api.libs.json._
+import scala.collection.JavaConverters._
+
+case class InterimFilterOption(
+        id: String,
+        label: String,
+        mapping: String,
+        payable: String
+)
+
+object InterimFilterOption {
+
+  implicit val writes: Writes[InterimFilterOption] = Json.writes[InterimFilterOption]
+
+  implicit val configLoader: ConfigLoader[Seq[InterimFilterOption]] = {
+    ConfigLoader(_.getConfigList).map(
+      _.asScala.map(config => {
+        InterimFilterOption(
+          id = config.getString("id"),
+          label = config.getString("label"),
+          mapping = config.getString("mapping"),
+          payable = config.getString("payable")
+        )
+      }))
+  }
+
+}
diff --git a/kahuna/app/lib/KahunaConfig.scala b/kahuna/app/lib/KahunaConfig.scala
@@ -44,7 +44,7 @@ class KahunaConfig(resources: GridConfigResources) extends CommonConfig(resource
   val usePermissionsFilter: Option[Boolean] = booleanOpt("usePermissionsFilter")
   val usageRightsSummary: Option[Boolean] = booleanOpt("usageRightsSummary")
   val permissionsDefault: Option[String] = stringOpt("permissionsDefault").filterNot(_.isEmpty)
-  val permissionsOptions: Option[String] = stringOpt("permissionsOptions").filterNot(_.isEmpty)
+  val interimFilterOptions: Seq[InterimFilterOption] = configuration.getOptional[Seq[InterimFilterOption]]("interimFilterOptions").getOrElse(Seq.empty)
 
   val showDenySyndicationWarning: Option[Boolean] = booleanOpt("showDenySyndicationWarning")
 

diff --git a/kahuna/app/views/main.scala.html b/kahuna/app/views/main.scala.html
@@ -8,6 +8,7 @@
   domainMetadataSpecs: String,
   metadataTemplates: String,
   announcements: String,
+  interimFilterOptions: String,
   additionalNavigationLinks: String,
   costFilterLabel: String,
   costFilterChargeable: Boolean,
@@ -78,7 +79,7 @@
           telemetryUri: '@kahunaConfig.telemetryUri.getOrElse("")',
           usePermissionsFilter: @kahunaConfig.usePermissionsFilter.getOrElse(false),
           usageRightsSummary: @kahunaConfig.usageRightsSummary.getOrElse(false),
-          permissionsOptions: '@Html(kahunaConfig.permissionsOptions)',
+          interimFilterOptions: @Html(interimFilterOptions),
           permissionsDefault: "@kahunaConfig.permissionsDefault",
           defaultShouldBlurGraphicImages: @kahunaConfig.defaultShouldBlurGraphicImages,
           shouldUploadStraightToBucket: @kahunaConfig.shouldUploadStraightToBucket,

diff --git a/kahuna/public/js/components/gr-my-uploads/gr-my-uploads.css b/kahuna/public/js/components/gr-my-uploads/gr-my-uploads.css
@@ -31,10 +31,26 @@
   border: 1px solid grey;
   display: inline-block;
   background: white;
-  margin-right: 4px;
+  margin-left: 7px;
+}
+
+.custom-label-short {
+  display: none;
 }
 
 [type=checkbox]:checked + .label-wrapper .custom-span {
   background: #4eaae8;
   content: url('data:image/svg+xml,<svg width="18px" height="18px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="white" stroke-width="3"/></svg>');
 }
+
+@media screen and (max-width: 880px) {
+  .custom-label {
+    display: none;
+  }
+
+  .custom-label-short {
+    display: inline;
+  }
+}
+
+
diff --git a/kahuna/public/js/components/gr-my-uploads/gr-my-uploads.tsx b/kahuna/public/js/components/gr-my-uploads/gr-my-uploads.tsx
@@ -6,6 +6,7 @@ import { useState, KeyboardEvent } from "react";
 import "./gr-my-uploads.css";
 
 const MY_UPLOADS = "My uploads";
+const MY_UPLOADS_SHORT = "Mine";
 
 export interface MyUploadsProps {
   onChange: (selected: boolean) => void;
@@ -39,8 +40,9 @@ const MyUploads: React.FC<MyUploadsWrapperProps> = ({ props }) => {
       <label className="custom-checkbox">
         <input type="checkbox" checked={myUploads} onChange={handleCheckboxClick}/>
         <div className="label-wrapper" >
+          <span className="custom-label no-select">{MY_UPLOADS}</span>
+          <span className="custom-label-short no-select">{MY_UPLOADS_SHORT}</span>
           <span className="custom-span"></span>
-          <span className="custom-label">{MY_UPLOADS}</span>
         </div>
       </label>
     </div>

diff --git a/kahuna/public/js/components/gr-permissions-filter/gr-permissions-filter-config.ts b/kahuna/public/js/components/gr-permissions-filter/gr-permissions-filter-config.ts
@@ -20,14 +20,14 @@ export type PermissionOption = {
 
 function getPermissionsOptions():Array<PermissionOption> {
   try {
-    if (window._clientConfig.permissionsOptions) {
-      return JSON.parse(window._clientConfig.permissionsOptions);
+    if (window._clientConfig.interimFilterOptions) {
+      return window._clientConfig.interimFilterOptions;
     } else {
       return [];
     }
   } catch (e) {
     console.log("Error Parsing Permissions Options");
-    console.log("Options String: " + window._clientConfig.permissionsOptions);
+    console.log("Options String: " + JSON.stringify(window._clientConfig.interimFilterOptions));
     console.log("Error: " + e);
     return [];
   }

diff --git a/kahuna/public/js/components/gr-permissions-filter/gr-permissions-filter.css b/kahuna/public/js/components/gr-permissions-filter/gr-permissions-filter.css
@@ -1,7 +1,6 @@
 .outer-permissions-filters {
   display: flex;
   align-items: center;
-  height: 50px;
   fill: #ccc;
 }
 
@@ -13,15 +12,13 @@
 }
 
 .permissions-dropdown {
-  height: 50px;
   padding-right: 0px;
   cursor: pointer;
 }
 
 .permissions-selection {
   display: flex;
   align-items: center;
-  height: 50px;
   fill: #ccc;
 }
 
@@ -34,6 +31,10 @@
   font-size: larger;
 }
 
+.permissions-selection-label-short {
+  display: none;
+}
+
 .permissions-selection-icon {
   padding-top: 3px;
   transition: fill 0.3s;
@@ -78,3 +79,19 @@
 .permissions-dropdown-cell-tick:hover {
   stroke: #fff;
 }
+
+@media screen and (max-width: 1380px) {
+  .permissions-selection-label {
+    display: none;
+  }
+
+  .permissions-selection-label-short {
+    display: inline;
+  }
+}
+
+@media screen and (max-width: 880px) {
+  .permissions-selection-label-short {
+    display: none;
+  }
+}
diff --git a/kahuna/public/js/components/gr-permissions-filter/gr-permissions-filter.tsx b/kahuna/public/js/components/gr-permissions-filter/gr-permissions-filter.tsx
@@ -8,8 +8,12 @@ import "./gr-permissions-filter.css";
 import "./gr-toggle-switch.css";
 
 const SHOW_CHARGEABLE = "Show payable images";
+const SHOW_CHARGEABLE_SHORT = "Payable";
 const SELECT_OPTION = "Select an option";
 const CONTROL_TITLE = "Permissions Selector";
+const SELECTED = "Selected";
+const NOT_SELECTED = " Not Selected";
+const PERMISSIONS = "Permissions";
 
 const chevronIcon = () =>
   <svg fill="inherit" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
@@ -184,6 +188,7 @@ const PermissionsFilter: React.FC<PermissionsWrapperProps> = ({ props }) => {
           <div className="dropdown-toggle" onClick={() => setIsOpen(!isOpen)}>
             <div className="permissions-selection">
               <div className="permissions-selection-label no-select">{(selectedOption ? selectedOption.label : SELECT_OPTION)}</div>
+              <div className="permissions-selection-label-short no-select">{PERMISSIONS}</div>
               <div className="permissions-selection-icon">{chevronIcon()}</div>
             </div>
           </div>
@@ -207,13 +212,22 @@ const PermissionsFilter: React.FC<PermissionsWrapperProps> = ({ props }) => {
              </table>
           )}
         </div>
-        <div className="ts-toggle-container" tabIndex={0} onKeyDown={handleKeyToggle} onClick={handleToggle}>
+        <div className="ts-toggle-container" tabIndex={0} aria-label={SHOW_CHARGEABLE + " " + (isChargeable ? SELECTED : NOT_SELECTED)} onKeyDown={handleKeyToggle} onClick={handleToggle}>
           <div className="ts-toggle-label no-select">{SHOW_CHARGEABLE}</div>
           <label className="ts-toggle-switch">
             <input type="checkbox" checked={isChargeable} onChange={handleToggle}/>
             <span className="ts-slider"></span>
           </label>
         </div>
+        <div className="ts-toggle-container-short" tabIndex={0} aria-label={SHOW_CHARGEABLE + " " + (isChargeable ? SELECTED : NOT_SELECTED)} onKeyDown={handleToggle}>
+          <label className="chargeable-checkbox">
+            <input type="checkbox" checked={isChargeable} onChange={handleToggle}/>
+            <div className="chargeable-label-wrapper" >
+              <span className="chargeable-label no-select">{SHOW_CHARGEABLE_SHORT}</span>
+              <span className="chargeable-span"></span>
+            </div>
+          </label>
+        </div>
       </div>
   );
 };

diff --git a/kahuna/public/js/components/gr-permissions-filter/gr-toggle-switch.css b/kahuna/public/js/components/gr-permissions-filter/gr-toggle-switch.css
@@ -1,8 +1,8 @@
 .ts-toggle-container {
   display: flex;
   align-items: center;
-  height: 50px;
   fill: #666;
+  height:50px;
   cursor: pointer;
 }
 
@@ -52,3 +52,54 @@ input:checked + .ts-slider:before {
   transform: translateX(14px);
   content: url('data:image/svg+xml,<svg width="18px" height="18px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="%23000" stroke-width="2"/></svg>');
 }
+
+.ts-toggle-container-short {
+  display: none;
+}
+
+.chargeable-checkbox {
+  cursor: pointer;
+}
+
+.chargeable-label-wrapper {
+  display: flex;
+  align-items: center;
+  padding-bottom: 22px;
+}
+
+.chargeable-checkbox input {
+  visibility: hidden;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.chargeable-checkbox .chargeable-label-wrapper .chargeable-span {
+  height: 14px;
+  width: 14px;
+  border: 1px solid grey;
+  display: inline-block;
+  background: white;
+  margin-left: 4px;
+}
+
+[type=checkbox]:checked + .chargeable-label-wrapper .chargeable-span {
+  background: #4eaae8;
+  content: url('data:image/svg+xml,<svg width="18px" height="18px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="white" stroke-width="3"/></svg>');
+}
+
+@media screen and (max-width: 1380px) {
+  .ts-toggle-container {
+    display: none;
+  }
+
+  .ts-toggle-container-short {
+    display: flex;
+    align-items: center;
+    height: 50px;
+    padding-left: 12px;
+    padding-right: 12px;
+    fill: #ccc;
+  }
+}
diff --git a/kahuna/public/js/components/gr-search-wrapper/gr-search-wrapper.html b/kahuna/public/js/components/gr-search-wrapper/gr-search-wrapper.html
@@ -3,6 +3,12 @@
     <permissions-filter class="permissions-filter" props="searchQuery.permissionsProps"></permissions-filter>
 
     <div class="search__modifier-container">
+        <button class="search__modifier-toggle"
+                type="button"
+                ng-click="filtersShown = !filtersShown ">
+            <gr-icon class="search__modifier-toggle__icon">filter_list</gr-icon>
+            <span class="search__modifier-toggle__text">Search filters</span>
+        </button>
         <ul class="search__modifier search__filter" ng-class="filtersShown ? 'search__filter--show' : 'search__filter--hide'">
             <li class="search__modifier-item">
                 <gu-date-range class="search__date"