[SALAD-23962] Add machine table dropdown menu

packages/web-app/src/components/Dropdown/Dropdown.tsx

@@ -1,4 +1,4 @@
-import type { FC } from 'react'
+import { type FC } from 'react'
 import type { WithStyles } from 'react-jss'
 import withStyles from 'react-jss'
 import type { CSSObjectWithLabel, GroupBase, StylesConfig } from 'react-select'
@@ -16,28 +16,52 @@ export interface DropdownOption {
   value: string
 }
 
-export type DropdownStylesConfig = StylesConfig<DropdownOption | '', false, GroupBase<DropdownOption | ''>>
+export type DropdownStylesConfig = StylesConfig<DropdownOption, false, GroupBase<DropdownOption>>
 
 export interface Props extends WithStyles<typeof styles> {
+  control?: JSX.Element
   customStyles?: DropdownStylesConfig
   options?: DropdownOption[]
   value?: string
+  allowUnselectedClick?: boolean
+
   onChange?: (value?: any) => void
 }
 
-const _Dropdown: FC<Props> = ({ classes, customStyles, options, value, onChange }) => {
-  const selectedValue = value && options?.find((option) => option.value === value)
+const _Dropdown: FC<Props> = ({
+  classes,
+  control,
+  customStyles,
+  allowUnselectedClick = false,
+  options,
+  value,
+  onChange,
+}) => {
+  const selectedValue = value ? options?.find((option) => option.value === value) : undefined
 
   const defaultStyles: DropdownStylesConfig = {
     control: (baseStyles: CSSObjectWithLabel) => ({
       ...baseStyles,
-      backgroundColor: DefaultTheme.darkBlue,
+      backgroundColor: control ? 'transparent' : DefaultTheme.darkBlue,
       borderRadius: 0,
+      ...(control && {
+        cursor: 'pointer',
+        border: 'none',
+        outline: 'none',
+        boxShadow: 'none',
+        '& input': {
+          position: 'absolute',
+        },
+        '&:hover svg': {
+          color: DefaultTheme.green,
+        },
+      }),
     }),
     menu: (baseStyles: CSSObjectWithLabel) => ({
       ...baseStyles,
       color: DefaultTheme.lightGreen,
       backgroundColor: DefaultTheme.darkBlue,
+      ...(control && { width: '150px' }),
     }),
     option: (baseStyles: CSSObjectWithLabel, state: { isSelected: boolean; isFocused: boolean }) => {
       let backgroundColor = DefaultTheme.darkBlue
@@ -60,16 +84,36 @@ const _Dropdown: FC<Props> = ({ classes, customStyles, options, value, onChange
       transition: 'opacity 300ms',
       color: DefaultTheme.lightGreen,
     }),
+    placeholder: (baseStyles: CSSObjectWithLabel) => ({
+      ...baseStyles,
+      ...(control && { color: DefaultTheme.lightGreen }),
+    }),
+    menuList: (baseStyles: CSSObjectWithLabel) => ({
+      ...baseStyles,
+      ...(control && { textAlign: 'left' }),
+    }),
+    input: (baseStyles: CSSObjectWithLabel) => ({
+      ...baseStyles,
+      ...(control && { '& > input': { cursor: 'pointer' } }),
+    }),
   }
 
   return (
     <Select
       className={classes.container}
-      value={selectedValue}
+      value={allowUnselectedClick ? null : selectedValue}
       options={options}
       onChange={onChange}
-      defaultValue={options && options[0]}
+      defaultValue={control ? undefined : options && options[0]}
       styles={customStyles ?? defaultStyles}
+      {...(control && {
+        components: {
+          IndicatorSeparator: () => null,
+          DropdownIndicator: () => null,
+          SingleValue: () => control,
+        },
+      })}
+      placeholder={control}
     />
   )
 }

packages/web-app/src/components/Dropdown/DropdownLight/DropdownLight.tsx

@@ -38,6 +38,6 @@ const dropdownLightStyles: DropdownStylesConfig = {
   }),
 }
 
-export const DropdownLight: FC<Omit<Props, 'customStyles' | 'classes'>> = ({ options, value, onChange }) => {
-  return <Dropdown customStyles={dropdownLightStyles} options={options} value={value} onChange={onChange} />
+export const DropdownLight: FC<Omit<Props, 'customStyles' | 'classes'>> = (props) => {
+  return <Dropdown {...props} customStyles={dropdownLightStyles}  />
 }

packages/web-app/src/modules/earn-views/components/AllMachines/AllMachines.tsx

@@ -7,13 +7,17 @@ import { DateTime } from 'luxon'
 import { useState } from 'react'
 import type { WithStyles } from 'react-jss'
 import withStyles from 'react-jss'
+import type { DropdownOption } from '../../../../components/Dropdown'
+import { Dropdown } from '../../../../components/Dropdown'
 import { Pagination } from '../../../../components/Pagination'
 import { usePagination } from '../../../../components/Pagination/usePagination'
 import { Table } from '../../../../components/Table'
 import type { TableRow } from '../../../../components/Table/types'
 import { DefaultTheme, type SaladTheme } from '../../../../SaladTheme'
 import { EarnSectionHeader } from '../EarnSectionHeader'
+import { machinesTableDropdownOptions, MachinesTableDropdownOptionValue } from './constants'
 import type { MachineState } from './mocks'
+import { generatedMockedMachines } from './mocks'
 
 const styles: (theme: SaladTheme) => Record<string, CSS.Properties> = (theme: SaladTheme) => ({
   allMachinesWrapper: {
@@ -51,6 +55,9 @@ const styles: (theme: SaladTheme) => Record<string, CSS.Properties> = (theme: Sa
     alignItems: 'center',
     flexDirection: 'row',
   },
+  tableDropdownHeader: {
+    cursor: 'pointer',
+  },
   warningPillWrapper: {
     display: 'flex',
     justifyContent: 'center',
@@ -116,6 +123,48 @@ const _AllMachines = ({ classes, machines, onMachineIdClick }: Props) => {
     window.location.href = 'https://support.salad.com/article/414-how-to-find-your-salad-machine-id'
   }
 
+  const handleDropdownChange = ({ value }: DropdownOption) => {
+    switch (value) {
+      case MachinesTableDropdownOptionValue.SelectAll: {
+        setSelectedMachineIds(generatedMockedMachines.reduce((acc, machine) => ({ ...acc, [machine.id]: true }), {}))
+        break
+      }
+      case MachinesTableDropdownOptionValue.SelectAllInPage: {
+        const machinesToSelect = generatedMockedMachines
+          .slice(lowestItemNumberOnPage - 1, highestItemNumberOnPage)
+          .reduce((acc, machine) => ({ ...acc, [machine.id]: true }), {})
+
+        setSelectedMachineIds((previousSelectedMachineIds) => ({
+          ...previousSelectedMachineIds,
+          ...machinesToSelect,
+        }))
+
+        break
+      }
+
+      case MachinesTableDropdownOptionValue.DeselectAll: {
+        setSelectedMachineIds({})
+        break
+      }
+
+      case MachinesTableDropdownOptionValue.DeselectAllInPage: {
+        const machinesToDeselect = generatedMockedMachines
+          .slice(lowestItemNumberOnPage - 1, highestItemNumberOnPage)
+          .reduce((acc, machine) => ({ ...acc, [machine.id]: false }), {})
+
+        setSelectedMachineIds((previousSelectedMachineIds) => ({
+          ...previousSelectedMachineIds,
+          ...machinesToDeselect,
+        }))
+
+        break
+      }
+
+      default:
+        break
+    }
+  }
+
   const {
     lowestItemNumberOnPage,
     highestItemNumberOnPage,
@@ -126,8 +175,13 @@ const _AllMachines = ({ classes, machines, onMachineIdClick }: Props) => {
 
   const getTitles = () => {
     return [
-      <div className={(classes.tableHeaderCell, classes.tableCellCentered)}>
-        <FontAwesomeIcon icon={faList} />
+      <div className={(classes.tableHeaderCell, classes.tableCellCentered, classes.tableDropdownHeader)}>
+        <Dropdown
+          control={<FontAwesomeIcon size="xl" icon={faList} />}
+          options={machinesTableDropdownOptions}
+          onChange={handleDropdownChange}
+          allowUnselectedClick
+        />
       </div>,
       <div className={classes.tableHeaderCell}>
         <Text variant="baseXS">Machine ID</Text>

packages/web-app/src/modules/earn-views/components/AllMachines/constants.ts

@@ -0,0 +1,25 @@
+export enum MachinesTableDropdownOptionValue {
+  SelectAll = 'Select All',
+  SelectAllInPage = 'Select All In Page',
+  DeselectAll = 'Deselect All',
+  DeselectAllInPage = 'Deselect All In Page',
+}
+
+export const machinesTableDropdownOptions = [
+  {
+    value: MachinesTableDropdownOptionValue.SelectAll,
+    label: 'Select All',
+  },
+  {
+    value: MachinesTableDropdownOptionValue.SelectAllInPage,
+    label: 'Select All In Page',
+  },
+  {
+    value: MachinesTableDropdownOptionValue.DeselectAll,
+    label: 'Deselect All',
+  },
+  {
+    value: MachinesTableDropdownOptionValue.DeselectAllInPage,
+    label: 'Deselect All In Page',
+  },
+]