Improvement/rework health selector to use selectv2

.storybook/preview-head.html

@@ -5,7 +5,7 @@
   crossorigin="anonymous"
 />
 <link
-  href="http://fonts.googleapis.com/css?family=Lato:400,700"
+  href="https://fonts.googleapis.com/css?family=Lato:400,700"
   rel="stylesheet"
   type="text/css"
 />

src/lib/components/healthselectorv2/HealthSelector.component.test.tsx

@@ -1,43 +1,44 @@
 import {
-  Healthselector,
+  HealthSelector,
   optionsDefaultConfiguration,
 } from './HealthSelector.component';
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { QueryClient, QueryClientProvider } from 'react-query';
 describe('HealthSelector', () => {
   it('should display correctly without any props and select first option', () => {
-    const { getByTestId, getByText } = render(
+    const { getByText } = render(
       <QueryClientProvider client={new QueryClient()}>
-        <Healthselector />
+        <HealthSelector id="health" onChange={() => {}} />
       </QueryClientProvider>,
     );
-    expect(getByTestId('singleValueLabel')).toHaveTextContent(/Health/i);
-    expect(getByTestId('singleValueShortLabel')).toHaveTextContent(/All/i);
+    const input = screen.getByRole('textbox');
+
     // open the menu
-    const mainMenu = getByTestId('singleValueShortLabel');
-    userEvent.click(mainMenu);
-    const healthyOption = getByText(/healthy only/i);
+    userEvent.click(input);
+    const healthyOption = getByText(/healthy/i);
     expect(healthyOption).toBeInTheDocument();
   });
   it('should call the onChange function when it change', () => {
     const onChange = jest.fn();
-    const { getByTestId, getByText } = render(
+    const { getByText } = render(
       <QueryClientProvider client={new QueryClient()}>
-        <Healthselector onChange={onChange} />
+        <HealthSelector id="health" onChange={onChange} />
       </QueryClientProvider>,
     );
-    const mainMenu = getByTestId('singleValueShortLabel');
-    userEvent.click(mainMenu);
+    const input = screen.getByRole('textbox');
+    userEvent.click(input);
     const warningOption = getByText(/warning/i);
     userEvent.click(warningOption);
     expect(onChange).toHaveBeenCalledWith('warning');
   });
   it('should not display hidden options', () => {
-    const { getByTestId, queryByText } = render(
+    const { queryByText } = render(
       <QueryClientProvider client={new QueryClient()}>
-        <Healthselector
+        <HealthSelector
+          id="health"
+          onChange={() => {}}
           options={[
             optionsDefaultConfiguration.all,
             optionsDefaultConfiguration.warning,
@@ -47,10 +48,11 @@ describe('HealthSelector', () => {
         />
       </QueryClientProvider>,
     );
+
     // open the menu
-    const mainMenu = getByTestId('singleValueShortLabel');
-    userEvent.click(mainMenu);
-    const healthyOption = queryByText(/healthy only/i);
+    const input = screen.getByRole('textbox');
+    userEvent.click(input);
+    const healthyOption = queryByText(/healthy/i);
     expect(healthyOption).not.toBeInTheDocument();
   });
 });

src/lib/components/healthselectorv2/HealthSelector.component.tsx

@@ -1,27 +1,18 @@
-// @ts-nocheck
-import { components } from 'react-select';
 import styled from 'styled-components';
+import * as defaultTheme from '../../style/theme';
 import { getThemePropSelector } from '../../utils';
-import { OptionProps } from '../selectv2/Selectv2.component';
-import { Select } from '../selectv2/Selectv2.component';
-import { SelectProps } from '../selectv2/Selectv2.component';
+import { Icon } from '../icon/Icon.component';
 import {
-  SingleValueWrapper,
-  ValueIcon,
-  OptionIcon,
-  OptionWrapper,
-  OptionLabel,
-  ShortLabel,
-  icons,
-} from './HealthSelector.style';
-type OptionType = 'all' | 'healthy' | 'warning' | 'critical' | 'unknown';
+  OptionProps,
+  Select,
+  SelectProps,
+} from '../selectv2/Selectv2.component';
+
 type OptionValue = {
-  shortLabel?: string;
+  label?: string;
 } & OptionProps;
-type OptionsConfiguration = Record<OptionType, OptionValue>;
 type Props = {
   options?: OptionValue[];
-  label?: string;
 } & SelectProps;
 
 const SelectStyle = styled(Select)`
@@ -43,90 +34,84 @@ const SelectStyle = styled(Select)`
   }
 `;
 
-export const optionsDefaultConfiguration: OptionsConfiguration = {
-  all: {
-    icon: icons.all,
-    label: 'All healthy statuses',
-    shortLabel: 'All',
+export const defaultOptions = [
+  {
+    icon: (
+      <svg
+        viewBox="0 0 150 100"
+        xmlns="http://www.w3.org/2000/svg"
+        height="16px"
+      >
+        <circle
+          cx="50"
+          cy="50"
+          r="50"
+          fill={defaultTheme.brand.statusHealthy}
+        />
+        <circle
+          cx="75"
+          cy="50"
+          r="50"
+          fill={defaultTheme.brand.statusWarning}
+        />
+        <circle
+          cx="100"
+          cy="50"
+          r="50"
+          fill={defaultTheme.brand.statusCritical}
+        />
+      </svg>
+    ),
+    label: 'All Status',
     value: 'all',
   },
-  healthy: {
-    icon: icons.healthy,
-    label: 'Healthy only',
-    shortLabel: 'Healthy',
+  {
+    icon: <Icon name="Check-circle" color="statusHealthy" size="lg" />,
+    label: 'Healthy',
     value: 'healthy',
   },
-  critical: {
-    icon: icons.critical,
-    label: 'Critical only',
-    shortLabel: 'Critical',
-    value: 'critical',
-  },
-  warning: {
-    icon: icons.warning,
-    label: 'Warning only',
-    shortLabel: 'Warning',
+  {
+    icon: <Icon name="Exclamation-circle" color="statusWarning" size="lg" />,
+    label: 'Warning',
     value: 'warning',
   },
-  unknown: {
-    icon: icons.unknown,
-    label: 'Unknown only',
-    shortLabel: 'Unknown',
+  {
+    icon: <Icon name="Times-circle" color="statusCritical" size="lg" />,
+    label: 'Critical',
+    value: 'critical',
+  },
+  {
+    icon: <Icon name="Info" color="infoPrimary" size="lg" />,
+    label: 'Unknown',
     value: 'unknown',
   },
+] as const;
+
+export const optionsDefaultConfiguration = {
+  all: defaultOptions[0],
+  healthy: defaultOptions[1],
+  warning: defaultOptions[2],
+  critical: defaultOptions[3],
+  unknown: defaultOptions[4],
 };
-export const defaultOptions: OptionValue[] = Object.keys(
-  optionsDefaultConfiguration,
-).map((key) => {
-  return optionsDefaultConfiguration[key];
-});
 
 function HealthSelectorv2(props: Props) {
-  const {
-    options = defaultOptions,
-    label = 'Health',
-    onChange,
-    ...rest
-  } = props;
+  const { options = defaultOptions, value, ...selectRest } = props;
 
-  const SingleValue = (props) => {
-    return (
-      <SingleValueWrapper>
-        <p data-testid="singleValueLabel">{label}</p>{' '}
-        <ValueIcon>{props.data.icon}</ValueIcon>
-        <ShortLabel data-testid="singleValueShortLabel">
-          {props.data.shortLabel}
-        </ShortLabel>
-      </SingleValueWrapper>
-    );
-  };
-
-  const CustomOption = (props) => {
-    return (
-      <components.Option
-        {...props}
-        isFocused={props.isFocused && props.selectProps.keyboardFocusEnabled}
-      >
-        <OptionWrapper>
-          <OptionIcon>{props.data.icon}</OptionIcon>
-          <OptionLabel>{props.data.label}</OptionLabel>
-        </OptionWrapper>
-      </components.Option>
-    );
-  };
+  let selectValue = value ?? options[0].value;
 
   return (
-    <SelectStyle
-      components={{
-        SingleValue,
-        Option: CustomOption,
-      }}
-      onChange={onChange}
-      defaultValue={options[0]}
-      options={options}
-      {...rest}
-    />
+    <SelectStyle {...selectRest} value={selectValue}>
+      {options.map((option, index) => {
+        const { ...optionRest } = option;
+        return (
+          <Select.Option key={index} {...optionRest}>
+            {option.label}
+          </Select.Option>
+        );
+      })}
+    </SelectStyle>
   );
 }
 
-export const Healthselector = HealthSelectorv2;
+export const HealthSelector = HealthSelectorv2;

src/lib/next.ts

@@ -11,7 +11,7 @@ export {
 } from './components/linetemporalchart/MetricTimespanProvider';
 export { SyncedCursorCharts } from './components/vegachartv2/SyncedCursorCharts';
 export { Select } from './components/selectv2/Selectv2.component';
-export { Healthselector } from './components/healthselectorv2/HealthSelector.component';
+export { HealthSelector } from './components/healthselectorv2/HealthSelector.component';
 export { CoreUiThemeProvider } from './components/coreuithemeprovider/CoreUiThemeProvider';
 export { Box } from './components/box/Box';
 export { Input } from './components/inputv2/inputv2';