From ddf479cfcc539d5a3cf71a14f00c5b34a10dd575 Mon Sep 17 00:00:00 2001
From: Tom Richards <tom.richards@guardian.co.uk>
Date: Tue, 1 Oct 2024 23:35:41 +0100
Subject: [PATCH] add a `shouldShowCropGuttersIfApplicable` query param and
 only show crop gutters if `true` (and other conditions for showing the
 gutters)

---
 kahuna/public/js/crop/controller.js |  7 ++++---
 kahuna/public/js/crop/index.js      |  2 +-
 kahuna/public/js/image/index.js     |  2 +-
 kahuna/public/js/search/index.js    |  2 +-
 kahuna/public/js/util/crop.js       | 21 +++++++++++++++++++--
 5 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/kahuna/public/js/crop/controller.js b/kahuna/public/js/crop/controller.js
index dbdde377a8..6015b3914d 100644
--- a/kahuna/public/js/crop/controller.js
+++ b/kahuna/public/js/crop/controller.js
@@ -2,7 +2,7 @@ import angular from 'angular';
 
 import '../components/gr-keyboard-shortcut/gr-keyboard-shortcut';
 import {radioList} from '../components/gr-radio-list/gr-radio-list';
-import {cropUtil} from "../util/crop";
+import {cropUtil } from "../util/crop";
 import {cropOptions} from "../util/constants/cropOptions";
 import {getFeatureSwitchActive} from "../components/gr-feature-switch-panel/gr-feature-switch-panel";
 
@@ -182,8 +182,9 @@ crop.controller('ImageCropCtrl', [
 
         const maybeCropRatioIfStandard = cropOptions.find(_ => _.key === ctrl.cropType)?.ratioString;
         ctrl.shouldShowVerticalWarningGutters =
-          getFeatureSwitchActive("show-cropping-gutters-switch")
-          && window._clientConfig.staffPhotographerOrganisation === "GNM"
+          window._clientConfig.staffPhotographerOrganisation === "GNM"
+          && cropSettings.shouldShowCropGuttersIfApplicable()
+          && getFeatureSwitchActive("show-cropping-gutters-switch")
           && maybeCropRatioIfStandard === "5:3";
 
         if (isCropTypeDisabled) {
diff --git a/kahuna/public/js/crop/index.js b/kahuna/public/js/crop/index.js
index eaec0b92ca..f3006619a4 100644
--- a/kahuna/public/js/crop/index.js
+++ b/kahuna/public/js/crop/index.js
@@ -18,7 +18,7 @@ crop.config(['$stateProvider',
              function($stateProvider) {
 
     $stateProvider.state('crop', {
-        url: '/images/:imageId/crop?cropType&customRatio',
+        url: '/images/:imageId/crop?cropType&customRatio&shouldShowCropGuttersIfApplicable',
         template: cropTemplate,
         controller: 'ImageCropCtrl',
         controllerAs: 'ctrl',
diff --git a/kahuna/public/js/image/index.js b/kahuna/public/js/image/index.js
index 6449a36061..99606aa931 100644
--- a/kahuna/public/js/image/index.js
+++ b/kahuna/public/js/image/index.js
@@ -23,7 +23,7 @@ image.config(['$stateProvider',
               function($stateProvider) {
 
     $stateProvider.state('image', {
-        url: '/images/:imageId?crop?cropType&customRatio',
+        url: '/images/:imageId?crop?cropType&customRatio&shouldShowCropGuttersIfApplicable',
         template: imageTemplate,
         controller: 'ImageCtrl',
         controllerAs: 'ctrl',
diff --git a/kahuna/public/js/search/index.js b/kahuna/public/js/search/index.js
index eecda04a8f..a42b87f082 100644
--- a/kahuna/public/js/search/index.js
+++ b/kahuna/public/js/search/index.js
@@ -73,7 +73,7 @@ search.config(['$stateProvider', '$urlMatcherFactoryProvider',
     $stateProvider.state('search', {
         // FIXME [1]: This state should be abstract, but then we can't navigate to
         // it, which we need to do to access it's deeper / remembered chile state
-        url: '/?cropType&customRatio',
+        url: '/?cropType&customRatio&shouldShowCropGuttersIfApplicable',
         template: searchTemplate,
         deepStateRedirect: {
             // Inject a transient $stateParams for the results state
diff --git a/kahuna/public/js/util/crop.js b/kahuna/public/js/util/crop.js
index 9e8932ccd4..a622909cc6 100644
--- a/kahuna/public/js/util/crop.js
+++ b/kahuna/public/js/util/crop.js
@@ -4,6 +4,7 @@ import { landscape, portrait, video, square, freeform, cropOptions } from './con
 
 const CROP_TYPE_STORAGE_KEY = 'cropType';
 const CUSTOM_CROP_STORAGE_KEY = 'customCrop';
+const SHOULD_SHOW_CROP_GUTTERS_IF_APPLICABLE_STORAGE_KEY = 'shouldShowCropGuttersIfApplicable';
 
 const customCrop = (label, xRatio, yRatio) => {
   return { key:label, ratio: xRatio / yRatio, ratioString: `${xRatio}:${yRatio}`};
@@ -61,7 +62,15 @@ cropUtil.factory('cropSettings', ['storage', function(storage) {
     }
   };
 
-  function set({cropType, customRatio}) {
+  const setShouldShowCropGuttersIfApplicable = shouldShowCropGuttersIfApplicableStr => {
+    storage.setJs(
+      SHOULD_SHOW_CROP_GUTTERS_IF_APPLICABLE_STORAGE_KEY,
+      shouldShowCropGuttersIfApplicableStr === "true",
+      true
+    );
+  };
+
+  function set({cropType, customRatio, shouldShowCropGuttersIfApplicable}) {
     // set customRatio first in case cropType relies on a custom crop
     if (customRatio) {
       setCustomCrop(customRatio);
@@ -71,6 +80,10 @@ cropUtil.factory('cropSettings', ['storage', function(storage) {
       setCropType(cropType);
     }
 
+    if (shouldShowCropGuttersIfApplicable) {
+      setShouldShowCropGuttersIfApplicable(shouldShowCropGuttersIfApplicable);
+    }
+
   }
 
   function getCropType() {
@@ -81,7 +94,11 @@ cropUtil.factory('cropSettings', ['storage', function(storage) {
     }
   }
 
-  return { set, getCropType, getCropOptions };
+  function shouldShowCropGuttersIfApplicable() {
+    return storage.getJs(SHOULD_SHOW_CROP_GUTTERS_IF_APPLICABLE_STORAGE_KEY, true) === "true";
+  }
+
+  return { set, getCropType, getCropOptions, shouldShowCropGuttersIfApplicable };
 }]);
 
 cropUtil.filter('asCropType', function() {