From cf7cefe20389e20754718cd07dab4ff13eba974c Mon Sep 17 00:00:00 2001
From: Ankit keshari <86347578+Ankit-Keshari-Vituity@users.noreply.github.com>
Date: Fri, 11 Mar 2022 06:59:45 +0530
Subject: [PATCH] =?UTF-8?q?Fixed=20Bug:=20Alpha=20slider=20doesn=E2=80=99t?=
 =?UTF-8?q?=20move,=20only=20the=20color=20slider=20is=20movable=20in=20ta?=
 =?UTF-8?q?g=20color=20picker=20(#4359)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 datahub-web-react/package.json                      |  1 +
 datahub-web-react/src/app/shared/TagStyleEntity.tsx | 11 ++++++-----
 datahub-web-react/yarn.lock                         |  5 +++++
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/datahub-web-react/package.json b/datahub-web-react/package.json
index fa71d609a3..5fabf47393 100644
--- a/datahub-web-react/package.json
+++ b/datahub-web-react/package.json
@@ -78,6 +78,7 @@
         "react-syntax-highlighter": "^15.4.4",
         "react-timezone-select": "^1.1.15",
         "react-visibility-sensor": "^5.1.1",
+        "rgb-hex": "^4.0.0",
         "sinon": "^11.1.1",
         "start-server-and-test": "1.12.2",
         "styled-components": "^5.2.1",
diff --git a/datahub-web-react/src/app/shared/TagStyleEntity.tsx b/datahub-web-react/src/app/shared/TagStyleEntity.tsx
index 1389a5a440..824080ce7b 100644
--- a/datahub-web-react/src/app/shared/TagStyleEntity.tsx
+++ b/datahub-web-react/src/app/shared/TagStyleEntity.tsx
@@ -6,6 +6,8 @@ import { ApolloError } from '@apollo/client';
 import styled from 'styled-components';
 import { ChromePicker } from 'react-color';
 import ColorHash from 'color-hash';
+import rgbHex from 'rgb-hex';
+
 import { PlusOutlined } from '@ant-design/icons';
 import { useGetTagQuery } from '../../graphql/tag.generated';
 import { EntityType, FacetMetadata, Maybe, Scalars } from '../../types.generated';
@@ -256,10 +258,6 @@ export default function TagStyleEntity({ urn, useGetSearchResults = useWrappedSe
         saveColor();
     };
 
-    const handleColorChange = (color: any) => {
-        setColorValue(color?.hex);
-    };
-
     // Update Description
     const updateDescriptionValue = (desc: string) => {
         setUpdatedDescription(desc);
@@ -314,7 +312,10 @@ export default function TagStyleEntity({ urn, useGetSearchResults = useWrappedSe
                 </TagName>
                 {displayColorPicker && (
                     <ColorPickerPopOver ref={colorPickerRef}>
-                        <ChromePicker color={colorValue} onChange={handleColorChange} />
+                        <ChromePicker
+                            color={colorValue}
+                            onChange={(c) => setColorValue(`#${rgbHex(c.rgb.r, c.rgb.g, c.rgb.b, c.rgb.a)}`)}
+                        />
                     </ColorPickerPopOver>
                 )}
             </div>
diff --git a/datahub-web-react/yarn.lock b/datahub-web-react/yarn.lock
index 61b537ceb4..8a3066b999 100644
--- a/datahub-web-react/yarn.lock
+++ b/datahub-web-react/yarn.lock
@@ -14722,6 +14722,11 @@ rework@1.0.1:
     convert-source-map "^0.3.3"
     css "^2.0.0"
 
+rgb-hex@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/rgb-hex/-/rgb-hex-4.0.0.tgz#02fb1e215e3fe5d070501579a3d2e4fa3c0acec8"
+  integrity sha512-Eg2ev5CiMBnQ9Gpflmqbwbso0CCdISqtVIow7OpYSLN1ULUv2jTB9YieS1DSSn/17AD7KkPWDPzSFzI4GSuu/Q==
+
 rgb-regex@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1"