From 030142f5c97edc1ab3f4b47f988409dc24937c76 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Fri, 19 Aug 2022 11:07:04 +0200
Subject: [PATCH] change(ui) - xray - checkbox message on disable

---
 .../FeatureSelection/FeatureSelection.tsx     | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/frontend/app/components/Session_/OverviewPanel/components/FeatureSelection/FeatureSelection.tsx b/frontend/app/components/Session_/OverviewPanel/components/FeatureSelection/FeatureSelection.tsx
index 1f74d20ab..c9bea00fd 100644
--- a/frontend/app/components/Session_/OverviewPanel/components/FeatureSelection/FeatureSelection.tsx
+++ b/frontend/app/components/Session_/OverviewPanel/components/FeatureSelection/FeatureSelection.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Checkbox } from 'UI';
+import { Checkbox, Popup } from 'UI';
 
 const NETWORK = 'NETWORK';
 const ERRORS = 'ERRORS';
@@ -22,20 +22,22 @@ function FeatureSelection(props: Props) {
                 const checked = list.includes(feature);
                 const _disabled = disabled && !checked;
                 return (
-                    <Checkbox
-                        key={index}
-                        label={feature}
-                        checked={checked}
-                        className="mx-4"
-                        disabled={_disabled}
-                        onClick={() => {
-                            if (checked) {
-                                props.updateList(list.filter((item: any) => item !== feature));
-                            } else {
-                                props.updateList([...list, feature]);
-                            }
+                    <Popup content="X-RAY supports up to 3 views" disabled={!_disabled} delay={0}>
+                        <Checkbox
+                            key={index}
+                            label={feature}
+                            checked={checked}
+                            className="mx-4"
+                            disabled={_disabled}
+                            onClick={() => {
+                                if (checked) {
+                                    props.updateList(list.filter((item: any) => item !== feature));
+                                } else {
+                                    props.updateList([...list, feature]);
+                                }
                         }}
                     />
+                    </Popup>
                 );
             })}
         </React.Fragment>