From 76eb9ab406fa6adb45a5783c4235b313e91d21b6 Mon Sep 17 00:00:00 2001
From: Marco Vettorello <marco.vettorello@elastic.co>
Date: Fri, 9 Feb 2024 15:26:30 +0100
Subject: [PATCH] [Lens][color mapping] hide single color picker in loop mode
 (#176564)

## Summary

This PR hides the single color picker when the color palette is selected
in the button group as agreed with @MichaelMarcialis and @stratoula
(initial conversation here https://github.com/elastic/kibana/pull/175144
followed by an offline one)

From this:
<img width="362" alt="Screenshot 2024-02-09 at 09 20 37"
src="https://github.com/elastic/kibana/assets/1421091/5f68fc57-627b-45b7-90e8-1aa78ee4b5b2">

To this:
<img width="376" alt="Screenshot 2024-02-09 at 09 19 51"
src="https://github.com/elastic/kibana/assets/1421091/fbefee5b-74e2-48e0-937b-c9e8e4699dce">
<img width="371" alt="Screenshot 2024-02-09 at 09 19 48"
src="https://github.com/elastic/kibana/assets/1421091/677c1f7f-c02f-4d77-a18f-ea2ffd22f874">
---
 .../container/unassigned_terms_config.tsx     | 52 +++++++------------
 1 file changed, 18 insertions(+), 34 deletions(-)

diff --git a/packages/kbn-coloring/src/shared_components/color_mapping/components/container/unassigned_terms_config.tsx b/packages/kbn-coloring/src/shared_components/color_mapping/components/container/unassigned_terms_config.tsx
index 8e90bcc38d119..405437a34e35b 100644
--- a/packages/kbn-coloring/src/shared_components/color_mapping/components/container/unassigned_terms_config.tsx
+++ b/packages/kbn-coloring/src/shared_components/color_mapping/components/container/unassigned_terms_config.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 import {
   EuiButtonGroup,
   EuiButtonGroupOptionProps,
-  EuiColorPickerSwatch,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFormRow,
@@ -110,39 +109,24 @@ export function UnassignedTermsConfig({
         </EuiFlexItem>
 
         <EuiFlexItem grow={0}>
-          {data.type === 'categories' && otherAssignment.color.type !== 'loop' ? (
-            <SpecialAssignment
-              index={0}
-              palette={palette}
-              isDarkMode={isDarkMode}
-              getPaletteFn={getPaletteFn}
-              assignmentColor={otherAssignment.color}
-              total={specialAssignments.length}
-            />
-          ) : (
-            <EuiColorPickerSwatch
-              color={'gray'}
-              disabled
-              style={{
-                // the color swatch can't pickup colors written in rgb/css standard
-                backgroundColor: '#EFF2F6',
-                cursor: 'not-allowed',
-                width: 32,
-                height: 32,
-              }}
-              css={css`
-                &::after {
-                  content: '';
-                  width: 43px;
-                  height: 43px;
-                  border-bottom: 1px solid #d9ddea;
-                  transform: rotate(-45deg) translateY(-51.5px) translateX(0px);
-                  margin: 0;
-                  position: absolute;
-                }
-              `}
-            />
-          )}
+          <div
+            css={css`
+              visibility: ${otherAssignment.color.type === 'loop' ? 'hidden' : 'visible'};
+              width: 32px;
+              height: 32px;
+            `}
+          >
+            {data.type === 'categories' && otherAssignment.color.type !== 'loop' && (
+              <SpecialAssignment
+                index={0}
+                palette={palette}
+                isDarkMode={isDarkMode}
+                getPaletteFn={getPaletteFn}
+                assignmentColor={otherAssignment.color}
+                total={specialAssignments.length}
+              />
+            )}
+          </div>
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiFormRow>