T1629 - interim filters

dev/script/generate-config/service-config.js

@@ -94,6 +94,11 @@ function getKahunaConfig(config){
         |  }
         |]`;
 
+    const permissionsConfig = stripMargin`
+      |usePermissionsFilter=true
+      |permissionsDefault="allPermissions"
+      `;
+
     return stripMargin`${getCommonConfig(config)}
         |aws.region="${config.AWS_DEFAULT_REGION}"
         |origin.full="images.media.${config.DOMAIN}"
@@ -110,6 +115,7 @@ function getKahunaConfig(config){
         |security.imageSources=["https://*.newslabs.co/"]
         |metrics.request.enabled=false
         |usageRightsSummary=true
+        |${permissionsConfig}
         |${pinboardConfig}
         |`;
 }

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,

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")
+        )
+      }))
+  }
+
+}

kahuna/app/lib/KahunaConfig.scala

@@ -3,6 +3,7 @@ package lib
 import com.gu.mediaservice.lib.auth.Permissions.Pinboard
 import com.gu.mediaservice.lib.auth.SimplePermission
 import com.gu.mediaservice.lib.config.{CommonConfig, GridConfigResources}
+import play.api.libs.json._
 
 case class ScriptToLoad(
   host: String,
@@ -39,7 +40,11 @@ class KahunaConfig(resources: GridConfigResources) extends CommonConfig(resource
   val restrictDownload: Option[Boolean] = booleanOpt("restrictDownload")
   val useReaper: Option[Boolean] = booleanOpt("useReaper")
 
+  // interim permissions filter configuration settings
+  val usePermissionsFilter: Option[Boolean] = booleanOpt("usePermissionsFilter")
   val usageRightsSummary: Option[Boolean] = booleanOpt("usageRightsSummary")
+  val permissionsDefault: Option[String] = stringOpt("permissionsDefault").filterNot(_.isEmpty)
+  val interimFilterOptions: Seq[InterimFilterOption] = configuration.getOptional[Seq[InterimFilterOption]]("interimFilterOptions").getOrElse(Seq.empty)
 
   val showDenySyndicationWarning: Option[Boolean] = booleanOpt("showDenySyndicationWarning")
 

kahuna/app/views/main.scala.html

@@ -8,6 +8,7 @@
   domainMetadataSpecs: String,
   metadataTemplates: String,
   announcements: String,
+  interimFilterOptions: String,
   additionalNavigationLinks: String,
   costFilterLabel: String,
   costFilterChargeable: Boolean,
@@ -76,7 +77,10 @@
           useReaper: @kahunaConfig.useReaper.getOrElse(false),
           featureSwitches: @Html(featureSwitches),
           telemetryUri: '@kahunaConfig.telemetryUri.getOrElse("")',
+          usePermissionsFilter: @kahunaConfig.usePermissionsFilter.getOrElse(false),
           usageRightsSummary: @kahunaConfig.usageRightsSummary.getOrElse(false),
+          interimFilterOptions: @Html(interimFilterOptions),
+          permissionsDefault: "@kahunaConfig.permissionsDefault",
           defaultShouldBlurGraphicImages: @kahunaConfig.defaultShouldBlurGraphicImages,
           shouldUploadStraightToBucket: @kahunaConfig.shouldUploadStraightToBucket,
           announcements: @Html(announcements),

kahuna/public/js/components/gr-my-uploads/gr-my-uploads.css

@@ -0,0 +1,60 @@
+.my-uploads-container {
+  display: flex;
+  align-items: center;
+  height: 50px;
+  padding-left: 12px;
+  padding-right: 12px;
+  fill: #ccc;
+}
+
+.my-uploads-container:hover {
+  color: white;
+}
+
+.custom-checkbox {
+  cursor: pointer;
+}
+
+.label-wrapper {
+  display: flex;
+  align-items: center;
+  padding-bottom: 22px;
+}
+
+.custom-checkbox input {
+  visibility: hidden;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.custom-checkbox .label-wrapper .custom-span {
+  height: 14px;
+  width: 14px;
+  border: 1px solid grey;
+  display: inline-block;
+  background: white;
+  margin-right: 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;
+  }
+}
+
+

kahuna/public/js/components/gr-my-uploads/gr-my-uploads.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import * as angular from "angular";
+import { react2angular } from "react2angular";
+import { useState, KeyboardEvent } from "react";
+
+import "./gr-my-uploads.css";
+
+const MY_UPLOADS = "My uploads";
+const MY_UPLOADS_SHORT = "My uploads";
+
+export interface MyUploadsProps {
+  onChange: (selected: boolean) => void;
+}
+
+export interface MyUploadsWrapperProps {
+  props: MyUploadsProps;
+}
+
+const MyUploads: React.FC<MyUploadsWrapperProps> = ({ props }) => {
+
+  const [myUploads, setMyUploads] = useState(false);
+
+  const handleCheckboxClick = () => {
+    setMyUploads(prevChkd => {
+      props.onChange(!prevChkd);
+      return !prevChkd;
+      });
+  };
+
+  const handleKeyboard = (event:KeyboardEvent<HTMLDivElement>) => {
+    if (event.code === 'Space') {
+      event.preventDefault();
+      event.stopPropagation();
+      handleCheckboxClick();
+    }
+  };
+
+  return (
+    <div className="my-uploads-container" tabIndex={0} aria-label={MY_UPLOADS} onKeyDown={handleKeyboard}>
+      <label className="custom-checkbox">
+        <input type="checkbox" checked={myUploads} onChange={handleCheckboxClick}/>
+        <div className="label-wrapper" >
+          <span className="custom-span"></span>
+          <span className="custom-label no-select">{MY_UPLOADS}</span>
+          <span className="custom-label-short no-select">{MY_UPLOADS_SHORT}</span>
+        </div>
+      </label>
+    </div>
+  );
+};
+
+export const myUploads = angular.module('gr.myUploads', [])
+  .component('myUploads', react2angular(MyUploads, ["props"]));

kahuna/public/js/components/gr-permissions-filter/gr-permissions-filter-config.ts

@@ -0,0 +1,101 @@
+//***permissions constants***
+
+//-chip query content-
+const CHARGEABLE_QUERY = " category:chargeable";
+
+//-permissions options-
+const CHARGEABLE_OPT = "chargeable";
+const ALL_PERMISSIONS_OPT = "allPermissions";
+
+//-permissions labels-
+const CHARGEABLE_LABEL = "Chargeable";
+const ALL_PERMISSIONS_LABEL = "All Permissions";
+
+export type PermissionOption = {
+  id: string,
+  label: string,
+  mapping: string,
+  payable: string
+}
+
+function getPermissionsOptions():Array<PermissionOption> {
+  try {
+    if (window._clientConfig.interimFilterOptions) {
+      return window._clientConfig.interimFilterOptions;
+    } else {
+      return [];
+    }
+  } catch (e) {
+    console.log("Error Parsing Permissions Options");
+    console.log("Options String: " + JSON.stringify(window._clientConfig.interimFilterOptions));
+    console.log("Error: " + e);
+    return [];
+  }
+}
+
+const pOpts = getPermissionsOptions();
+
+export function permissionsDefaultOpt():string{
+  if (window._clientConfig.permissionsDefault && pOpts.length > 0) {
+    return window._clientConfig.permissionsDefault;
+  } else {
+    return ALL_PERMISSIONS_OPT;
+  }
+}
+
+export function permissionsQueries():string[]  {
+  if (pOpts.length > 0) {
+    return pOpts.map(c => c.mapping.split(',')).flatMap(c => c);
+  } else {
+      return [
+          CHARGEABLE_QUERY
+      ];
+  }
+}
+
+export function permissionsPayable():{opt:string, payable:string}[] {
+  if (pOpts.length > 0) {
+    return pOpts.map(c => { return {opt: c.id, payable: c.payable};});
+  } else {
+    const pPayable: { opt: string, payable: string }[] = [
+      {opt: CHARGEABLE_OPT, payable: 'none'},
+      {opt: ALL_PERMISSIONS_OPT, payable: 'none'}
+    ];
+    return pPayable;
+  }
+}
+
+//-options and labels-
+export function permissionsOptions():{label:string, value:string}[] {
+   if (pOpts.length > 0) {
+     return pOpts.map(c => {
+       return {
+         label: c.label,
+         value: c.id
+       };
+     });
+   } else {
+     const permOpts: { label: string, value: string }[] = [
+       {label: ALL_PERMISSIONS_LABEL, value: ALL_PERMISSIONS_OPT},
+       {label: CHARGEABLE_LABEL, value: CHARGEABLE_OPT}
+     ];
+     return permOpts;
+   }
+}
+
+export function permissionsMappings():{opt:string, query:string[]}[] {
+  if (pOpts.length > 0) {
+    return pOpts.map(c => {
+      return  {
+        opt: c.id,
+        query: c.mapping.split(",").map(q => " " + q).filter(q => q.trim() != "")
+      };
+    });
+  } else {
+    const permMappings: { opt: string, query: string[] }[] = [
+      {opt: CHARGEABLE_OPT, query: [CHARGEABLE_QUERY]},
+      {opt: ALL_PERMISSIONS_OPT, query: []}
+    ];
+    return permMappings;
+  }
+}

kahuna/public/js/components/gr-permissions-filter/gr-permissions-filter-util.ts

@@ -0,0 +1,16 @@
+import * as PermissionsConf from "./gr-permissions-filter-config";
+import {PermissionsDropdownOption} from "./gr-permissions-filter";
+
+//-update chips based on permissions filter-
+export function updateFilterChips(permissionsSel: PermissionsDropdownOption, query: string) : string {
+  let workingQuery = ' ' + (query ? query : '');
+  PermissionsConf.permissionsQueries().forEach((pfQ) => {
+    workingQuery = workingQuery.replace(pfQ, '');
+  });
+  const permMappings = PermissionsConf.permissionsMappings().filter((opt) => permissionsSel.value == opt.opt)[0];
+  permMappings.query.forEach((q) => {
+    workingQuery = workingQuery + q;
+  });
+  if (workingQuery[0] == ' ') { workingQuery = workingQuery.trimStart(); }
+  return workingQuery;
+}