From 1750adb03f7e3784e2cd1050a78c8032d8665ec2 Mon Sep 17 00:00:00 2001
From: monicawoj <monica.wojciechowski@polarsignals.com>
Date: Wed, 15 Mar 2023 14:53:37 +0100
Subject: [PATCH] fix panel and vis type selectors

---
 .../shared/components/src/Select/index.tsx    | 177 +++++++++---------
 1 file changed, 84 insertions(+), 93 deletions(-)

diff --git a/ui/packages/shared/components/src/Select/index.tsx b/ui/packages/shared/components/src/Select/index.tsx
index 7730e99d7b9..e8e771a4c13 100644
--- a/ui/packages/shared/components/src/Select/index.tsx
+++ b/ui/packages/shared/components/src/Select/index.tsx
@@ -69,101 +69,92 @@ const Select = ({
     'relative text-gray-100 dark-gray-900 justify-center bg-indigo-600 border border-indigo-500 font-medium py-2 px-4 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm text-sm';
 
   return (
-    <>
-      <Listbox value={selectedKey} onChange={onSelection}>
-        {({open}) => (
-          <>
-            <div className="min-w-fit">
-              <Listbox.Button
-                className={cx(
-                  width !== undefined ? `w-${width}` : '',
-                  disabled ? 'opacity-50 cursor-not-allowed' : '',
-                  primary ? primaryStyles : defaultStyles,
-                  {[className]: className.length > 0}
-                )}
-              >
-                <span className="flex items-center">
-                  {/* SLOT */}
-                  <span className="ml-3 block overflow-x-hidden text-ellipsis">
-                    {selection?.key !== '' ? selection.element.active : placeholder}
-                  </span>
-                </span>
-                <span className="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none text-gray-400">
-                  <Icon icon="heroicons:chevron-up-down-20-solid" aria-hidden="true" />
-                </span>
-              </Listbox.Button>
-
-              <Transition
-                show={open}
-                as={Fragment}
-                leave="transition ease-in duration-100"
-                leaveFrom="opacity-100"
-                leaveTo="opacity-0"
-              >
-                <Listbox.Options>
-                  {loading === true ? (
-                    <div className="absolute z-10 mt-1 bg-gray-50 dark:bg-gray-900 dark:border-gray-600 shadow-lg rounded-md py-1 text-base ring-1 ring-black dark:ring-white ring-opacity-5 dark:ring-opacity-20 overflow-auto focus:outline-none sm:text-sm">
-                      <div className="w-[270px]">{loader}</div>
-                    </div>
-                  ) : (
-                    <>
-                      {items.length > 0 && (
-                        <div
-                          className={cx(
-                            width !== undefined ? `w-${width}` : '',
-                            'absolute z-10 mt-1 bg-gray-50 dark:bg-gray-900 dark:border-gray-600 shadow-lg rounded-md py-1 text-base ring-1 ring-black dark:ring-white ring-opacity-5 dark:ring-opacity-20 overflow-auto focus:outline-none sm:text-sm'
-                          )}
-                        >
-                          {items.map(option => (
-                            <Listbox.Option
-                              key={option.key}
-                              disabled={option.disabled ?? false}
-                              className={({active, disabled}) =>
-                                cx(
-                                  active && 'text-white bg-indigo-600',
-                                  'cursor-default select-none relative py-2 pl-3 pr-9',
-                                  disabled && 'opacity-50'
-                                )
-                              }
-                              value={option.key}
-                            >
-                              {({selected, active}) => (
-                                <>
-                                  <div className="flex items-center">
-                                    <span
-                                      className={cx(
-                                        selected ? 'font-semibold' : 'font-normal',
-                                        'ml-3'
-                                      )}
-                                    >
-                                      {option.element.expanded}
-                                    </span>
-                                  </div>
-                                  {selected ? (
-                                    <span
-                                      className={cx(
-                                        active ? 'text-white' : 'text-indigo-600',
-                                        'absolute inset-y-0 right-0 flex items-center pr-4'
-                                      )}
-                                    >
-                                      <Icon icon="heroicons:check-20-solid" aria-hidden="true" />
-                                    </span>
-                                  ) : null}
-                                </>
-                              )}
-                            </Listbox.Option>
-                          ))}
-                        </div>
+    <Listbox value={selectedKey} onChange={onSelection}>
+      {({open}) => (
+        <div className="min-w-fit relative">
+          <Listbox.Button
+            className={cx(
+              width !== undefined ? `w-${width}` : '',
+              disabled ? 'opacity-50 cursor-not-allowed' : '',
+              primary ? primaryStyles : defaultStyles,
+              {[className]: className.length > 0}
+            )}
+          >
+            <span className="flex items-center">
+              <span className="ml-3 block overflow-x-hidden text-ellipsis">
+                {selection?.key !== '' ? selection.element.active : placeholder}
+              </span>
+            </span>
+            <span className="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none text-gray-400">
+              <Icon icon="heroicons:chevron-up-down-20-solid" aria-hidden="true" />
+            </span>
+          </Listbox.Button>
+          <Transition
+            show={open}
+            as={Fragment}
+            leave="transition ease-in duration-100"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Listbox.Options>
+              {loading === true ? (
+                <div className="absolute z-10 mt-1 bg-gray-50 dark:bg-gray-900 dark:border-gray-600 shadow-lg rounded-md py-1 text-base ring-1 ring-black dark:ring-white ring-opacity-5 dark:ring-opacity-20 overflow-auto focus:outline-none sm:text-sm">
+                  <div className="w-[270px]">{loader}</div>
+                </div>
+              ) : (
+                <>
+                  {items.length > 0 && (
+                    <div
+                      className={cx(
+                        width !== undefined ? `w-${width}` : '',
+                        'absolute z-10 mt-1 bg-gray-50 dark:bg-gray-900 dark:border-gray-600 shadow-lg rounded-md py-1 text-base ring-1 ring-black dark:ring-white ring-opacity-5 dark:ring-opacity-20 overflow-auto focus:outline-none sm:text-sm'
                       )}
-                    </>
+                    >
+                      {items.map(option => (
+                        <Listbox.Option
+                          key={option.key}
+                          disabled={option.disabled ?? false}
+                          className={({active, disabled}) =>
+                            cx(
+                              active && 'text-white bg-indigo-600',
+                              'cursor-default select-none relative py-2 pl-3 pr-9',
+                              disabled && 'opacity-50'
+                            )
+                          }
+                          value={option.key}
+                        >
+                          {({selected, active}) => (
+                            <>
+                              <div className="flex items-center">
+                                <span
+                                  className={cx(selected ? 'font-semibold' : 'font-normal', 'ml-3')}
+                                >
+                                  {option.element.expanded}
+                                </span>
+                              </div>
+                              {selected ? (
+                                <span
+                                  className={cx(
+                                    active ? 'text-white' : 'text-indigo-600',
+                                    'absolute inset-y-0 right-0 flex items-center pr-4'
+                                  )}
+                                >
+                                  <Icon icon="heroicons:check-20-solid" aria-hidden="true" />
+                                </span>
+                              ) : null}
+                            </>
+                          )}
+                        </Listbox.Option>
+                      ))}
+                    </div>
                   )}
-                </Listbox.Options>
-              </Transition>
-            </div>
-          </>
-        )}
-      </Listbox>
-    </>
+                </>
+              )}
+            </Listbox.Options>
+          </Transition>
+        </div>
+      )}
+    </Listbox>
   );
 };