Merged in r2-2825-show-webpush-preferences-when-webpush-enabled (pull…

… request #6723) R2-2825 - Instance with push notifications turned off still shows user options for push notifications Approved-by: Joshua Toliver
primeroIMS · Mar 22, 2024 · c380cd7 · c380cd7
2 parents 4cd48d4 + 1290cb2
commit c380cd7
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 10 deletions.
diff --git a/app/javascript/components/pages/account/container.jsx b/app/javascript/components/pages/account/container.jsx
@@ -123,7 +123,10 @@ const Container = ({ mode }) => {
     identityOptions,
     onClickChangePassword,
     true,
-    { userGroups: currentUser.get("userGroups", fromJS([])), webPushConfig }
+    {
+      userGroups: currentUser.get("userGroups", fromJS([])),
+      webPushConfigEnabled: webPushConfig?.get("enabled", false)
+    }
   );
 
   // eslint-disable-next-line react/no-multi-comp

diff --git a/app/javascript/components/pages/account/container.unit.test.js b/app/javascript/components/pages/account/container.unit.test.js
@@ -10,6 +10,9 @@ import Account from "./container";
 describe("<Account />", () => {
   let component;
 
+  const getVisibleFields = allFields =>
+    allFields.filter(field => Object.is(field.visible, null) || field.visible).map(field => field.toJS());
+
   beforeEach(() => {
     const initialState = fromJS({
       user: {
@@ -45,4 +48,62 @@ describe("<Account />", () => {
   it("renders ChangePassword component", () => {
     expect(component.find(ChangePassword)).to.have.length(1);
   });
+
+  describe("when WEBPUSH is enabled", () => {
+    const state = fromJS({
+      user: {
+        loading: false,
+        errors: false,
+        serverErrors: [],
+        locale: "en",
+        id: 1,
+        full_name: "Test user",
+        disabled: false,
+        email: "[email protected]",
+        time_zone: "UTC",
+        user_name: "primero"
+      },
+      application: {
+        agencies: [{ id: 1, unique_id: "agency-unicef", name: "UNICEF" }],
+        webpush: {
+          enabled: true
+        }
+      }
+    });
+
+    const { component: newComponent } = setupMountedComponent(Account, { mode: "'edit'" }, state, ["/account"]);
+
+    it("renders 25 fields", () => {
+      expect(getVisibleFields(newComponent.find("FormSection").props().formSection.fields)).to.have.lengthOf(25);
+    });
+  });
+
+  describe("when WEBPUSH is disabled", () => {
+    const state = fromJS({
+      user: {
+        loading: false,
+        errors: false,
+        serverErrors: [],
+        locale: "en",
+        id: 1,
+        full_name: "Test user",
+        disabled: false,
+        email: "[email protected]",
+        time_zone: "UTC",
+        user_name: "primero"
+      },
+      application: {
+        agencies: [{ id: 1, unique_id: "agency-unicef", name: "UNICEF" }],
+        webpush: {
+          enabled: false
+        }
+      }
+    });
+
+    const { component: newComponent } = setupMountedComponent(Account, { mode: "'edit'" }, state, ["/account"]);
+
+    it("renders 20 fields", () => {
+      expect(getVisibleFields(newComponent.find("FormSection").props().formSection.fields)).to.have.lengthOf(20);
+    });
+  });
 });
diff --git a/app/javascript/components/pages/admin/users-form/container.jsx b/app/javascript/components/pages/admin/users-form/container.jsx
@@ -190,7 +190,7 @@ const Container = ({ mode }) => {
       {
         agencyReadOnUsers,
         currentRoleGroupPermission,
-        webPushConfig
+        webPushConfigEnabled: webPushConfig?.get("enabled", false)
       }
     ).map(formSection => (
       <FormSection

diff --git a/app/javascript/components/pages/admin/users-form/container.unit.test.js b/app/javascript/components/pages/admin/users-form/container.unit.test.js
@@ -243,4 +243,34 @@ describe("<UsersForm />", () => {
       expect(IdpComponent.find("a")).to.be.empty;
     });
   });
+
+  describe("when WEBPUSH is disabled", () => {
+    const state = fromJS({
+      records: {
+        users: {
+          selectedUser: users.jose,
+          data: [Object.values(users)],
+          metadata: { total: 2, per: 20, page: 1 }
+        }
+      },
+      application: {
+        agencies,
+        webpush: {
+          enabled: false
+        }
+      },
+      user: {
+        username: users.carlos.user_name,
+        permissions
+      }
+    });
+
+    const { component: newComponent } = setupMountedComponent(UsersForm, { mode: MODES.edit }, state, [
+      "/admin/users/1"
+    ]);
+
+    it("renders 22 fields", () => {
+      expect(getVisibleFields(newComponent.find("FormSection").props().formSection.fields)).to.have.lengthOf(22);
+    });
+  });
 });
diff --git a/app/javascript/components/pages/admin/users-form/form.js b/app/javascript/components/pages/admin/users-form/form.js
@@ -28,25 +28,28 @@ import css from "./styles.css";
 
 const passwordPlaceholder = formMode => (formMode.get("isEdit") ? "•••••" : "");
 
-const notificationPreferences = (i18n, notifier) =>
-  NOTIFICATIONS_PREFERENCES.map(preferences => ({
+const notificationPreferences = (i18n, notifier, shouldRender = true) => {
+  if (!shouldRender) return [];
+
+  return NOTIFICATIONS_PREFERENCES.map(preferences => ({
     display_name: i18n.t(`user.notification_preferences.${preferences}`),
     name: FIELD_NAMES[`${notifier}_${preferences.toUpperCase()}`],
     type: TICK_FIELD,
     inputClassname: css.settingsChildField,
     watchedInputs: FIELD_NAMES[notifier],
     handleWatchedInputs: value => ({
-      visible: Boolean(value)
+      visible: Boolean(value) === true
     })
   }));
+};
 
 const sharedUserFields = (
   i18n,
   formMode,
   hideOnAccountPage,
   onClickChangePassword,
   useIdentity,
-  { agencyReadOnUsers, currentRoleGroupPermission, userGroups, webPushConfig }
+  { agencyReadOnUsers, currentRoleGroupPermission, userGroups, webPushConfigEnabled }
 ) => [
   {
     display_name: i18n.t("user.full_name"),
@@ -219,9 +222,9 @@ const sharedUserFields = (
     name: FIELD_NAMES.RECEIVE_WEBPUSH,
     type: TICK_FIELD,
     help_text: i18n.t("user.receive_webpush.help_text"),
-    visible: webPushConfig?.get("enabled", false)
+    visible: webPushConfigEnabled
   },
-  ...notificationPreferences(i18n, NOTIFIERS.receive_webpush)
+  ...notificationPreferences(i18n, NOTIFIERS.receive_webpush, webPushConfigEnabled)
 ];
 
 const identityUserFields = (i18n, identityOptions) => [
@@ -251,14 +254,14 @@ export const form = (
   identityOptions,
   onClickChangePassword,
   hideOnAccountPage = false,
-  { agencyReadOnUsers, currentRoleGroupPermission, userGroups, webPushConfig } = {}
+  { agencyReadOnUsers, currentRoleGroupPermission, userGroups, webPushConfigEnabled } = {}
 ) => {
   const useIdentity = useIdentityProviders && providers;
   const sharedFields = sharedUserFields(i18n, formMode, hideOnAccountPage, onClickChangePassword, useIdentity, {
     agencyReadOnUsers,
     currentRoleGroupPermission,
     userGroups,
-    webPushConfig
+    webPushConfigEnabled
   });
 
   const identityFields = identityUserFields(i18n, identityOptions);