From 25b59e538dd0db4695330c9497fd9f0c498e7cce Mon Sep 17 00:00:00 2001
From: Max Hauser <moritz.heusinger@gmail.com>
Date: Mon, 29 Jan 2024 13:07:27 +0100
Subject: [PATCH] do not crash when using visibility 'only for groups' (#343)

* do not crash when using visibility 'only for groups'

- closes #341

* fix logic for applying visiblity

* rm logs
---
 README.md                                 |  1 +
 src/src/Attributes/Widget/WidgetField.jsx |  4 +--
 src/src/Vis/visRxWidget.tsx               | 34 ++++++++++++++++++++++-
 3 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 4971b7a7..706e1aab 100644
--- a/README.md
+++ b/README.md
@@ -263,6 +263,7 @@ E.g., if it was used in a menu and the menu is red, the circle would be red.
 ## Changelog
 ### **WORK IN PROGRESS**
 * (foxriver76) fixed resizing issue for relative widgets
+* (foxriver76) do not crash when using visibility "only for groups"
 
 ### 2.9.24 (2024-01-24)
 * (foxriver76) Image 8 widget ported to react
diff --git a/src/src/Attributes/Widget/WidgetField.jsx b/src/src/Attributes/Widget/WidgetField.jsx
index bcc7e0cc..bb9ad424 100644
--- a/src/src/Attributes/Widget/WidgetField.jsx
+++ b/src/src/Attributes/Widget/WidgetField.jsx
@@ -296,9 +296,9 @@ const WidgetField = props => {
     let onChangeTimeout;
 
     const applyValue = newValues => {
-        const project = JSON.parse(JSON.stringify(store.getState().visProject));
+        const project = deepClone(store.getState().visProject);
         props.selectedWidgets.forEach((selectedWidget, i) => {
-            const value = Array.isArray(newValues) ? newValues[i] : newValues;
+            const value = Array.isArray(newValues) && field.type !== 'groups' ? newValues[i] : newValues;
 
             const data = props.isStyle
                 ? project[props.selectedView].widgets[selectedWidget].style
diff --git a/src/src/Vis/visRxWidget.tsx b/src/src/Vis/visRxWidget.tsx
index c5f7e59a..49c3ecab 100644
--- a/src/src/Vis/visRxWidget.tsx
+++ b/src/src/Vis/visRxWidget.tsx
@@ -70,6 +70,10 @@ interface VisRxWidgetProps extends VisBaseWidgetProps {
 interface RxData {
     _originalData: any;
     filterkey: any;
+    /** If value is hide widget should be hidden if user not in group, else disabled */
+    'visibility-groups-action': 'hide' | 'disabled';
+    /** If entry in array but user not in array, apply visibility-groups-action logic */
+    'visibility-groups': string[];
 }
 
 /** TODO move to VisBaseWidget when ported */
@@ -319,7 +323,7 @@ class VisRxWidget<TRxData extends Record<string, any>> extends VisBaseWidget {
             this.newState.rxData.filterkey = this.newState.rxData.filterkey.split(/[;,]+/).map(f => f.trim()).filter(f => f);
         }
 
-        if (userGroups && userGroups.length && !this.isUserMemberOfGroup(this.props.context.user, userGroups)) {
+        if (userGroups?.length && !this.isUserMemberOfGroup(this.props.context.user, userGroups)) {
             // @ts-expect-error fix later
             if (this.newState.rxData['visibility-groups-action'] === 'disabled') {
                 this.newState.disabled = true;
@@ -410,8 +414,36 @@ class VisRxWidget<TRxData extends Record<string, any>> extends VisBaseWidget {
         super.componentWillUnmount();
     }
 
+    /**
+     * Check if the logged-in user's group has visibility permissions for this widget
+     */
+    isWidgetVisibleForGroup(newState: typeof this.newState): boolean {
+        // @ts-expect-error fix later
+        const userGroups = newState.rxData['visibility-groups'];
+
+        // @ts-expect-error fix later
+        if (newState.rxData['visibility-groups-action'] === 'hide') {
+            if (userGroups?.length && !this.isUserMemberOfGroup(this.props.context.user, userGroups)) {
+                return false;
+            }
+        }
+
+        return true;
+    }
+
+    /**
+     * Checks if widget is visible according to the state id
+     *
+     * @param stateId state id to check visibility for
+     * @param newState the new state
+     */
     checkVisibility(stateId?: string | null, newState?: typeof this.newState) {
         newState = newState || this.state;
+
+        if (!this.isWidgetVisibleForGroup(newState)) {
+            return false;
+        }
+
         if (!this.state.editMode) {
             if (!this.isWidgetFilteredOut(newState.rxData)) {
                 if (stateId) {