Merge branch 'master' into strideynet/fix-tbot-reliance-on-dns-resolu…

…tion-in-tests
gravitational · Jun 24, 2024 · 3d9e366 · 3d9e366
2 parents 4fd1330 + 0bc20f0
commit 3d9e366
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 77 deletions.
diff --git a/web/packages/design/src/Checkbox/Checkbox.story.tsx b/web/packages/design/src/Checkbox/Checkbox.story.tsx
@@ -22,7 +22,7 @@ import styled from 'styled-components';
 
 import { Flex } from '..';
 
-import { StyledCheckbox } from './Checkbox';
+import { CheckboxInput } from './Checkbox';
 
 export default {
   title: 'Design/Checkbox',
@@ -46,88 +46,88 @@ export const Checkbox = () => (
         <th rowSpan={4}>Enabled</th>
         <th>Default</th>
         <td>
-          <StyledCheckbox type="checkbox" />
-          <StyledCheckbox checked />
+          <CheckboxInput type="checkbox" />
+          <CheckboxInput checked />
         </td>
         <td>
-          <StyledCheckbox size="small" />
-          <StyledCheckbox size="small" checked />
+          <CheckboxInput size="small" />
+          <CheckboxInput size="small" checked />
         </td>
       </tr>
       <tr className="teleport-checkbox__force-hover">
         <th>Hover</th>
         <td>
-          <StyledCheckbox type="checkbox" />
-          <StyledCheckbox checked />
+          <CheckboxInput type="checkbox" />
+          <CheckboxInput checked />
         </td>
         <td>
-          <StyledCheckbox size="small" />
-          <StyledCheckbox size="small" checked />
+          <CheckboxInput size="small" />
+          <CheckboxInput size="small" checked />
         </td>
       </tr>
       <tr className="teleport-checkbox__force-active">
         <th>Active</th>
         <td>
-          <StyledCheckbox type="checkbox" />
-          <StyledCheckbox checked />
+          <CheckboxInput type="checkbox" />
+          <CheckboxInput checked />
         </td>
         <td>
-          <StyledCheckbox size="small" />
-          <StyledCheckbox size="small" checked />
+          <CheckboxInput size="small" />
+          <CheckboxInput size="small" checked />
         </td>
       </tr>
       <tr className="teleport-checkbox__force-focus-visible">
         <th>Focus</th>
         <td>
-          <StyledCheckbox type="checkbox" />
-          <StyledCheckbox checked />
+          <CheckboxInput type="checkbox" />
+          <CheckboxInput checked />
         </td>
         <td>
-          <StyledCheckbox size="small" />
-          <StyledCheckbox size="small" checked />
+          <CheckboxInput size="small" />
+          <CheckboxInput size="small" checked />
         </td>
       </tr>
       <tr>
         <th rowSpan={4}>Disabled</th>
         <th>Default</th>
         <td>
-          <StyledCheckbox disabled />
-          <StyledCheckbox disabled checked />
+          <CheckboxInput disabled />
+          <CheckboxInput disabled checked />
         </td>
         <td>
-          <StyledCheckbox size="small" disabled />
-          <StyledCheckbox size="small" disabled checked />
+          <CheckboxInput size="small" disabled />
+          <CheckboxInput size="small" disabled checked />
         </td>
       </tr>
       <tr className="teleport-checkbox__force-hover">
         <th>Hover</th>
         <td>
-          <StyledCheckbox disabled />
-          <StyledCheckbox disabled checked />
+          <CheckboxInput disabled />
+          <CheckboxInput disabled checked />
         </td>
         <td>
-          <StyledCheckbox size="small" disabled />
-          <StyledCheckbox size="small" disabled checked />
+          <CheckboxInput size="small" disabled />
+          <CheckboxInput size="small" disabled checked />
         </td>
       </tr>
       <tr className="teleport-checkbox__force-active">
         <th>Active</th>
         <td>
-          <StyledCheckbox disabled />
-          <StyledCheckbox disabled checked />
+          <CheckboxInput disabled />
+          <CheckboxInput disabled checked />
         </td>
         <td>
-          <StyledCheckbox size="small" disabled />
-          <StyledCheckbox size="small" disabled checked />
+          <CheckboxInput size="small" disabled />
+          <CheckboxInput size="small" disabled checked />
         </td>
       </tr>
     </Table>
     <label>
-      <StyledCheckbox size="small" defaultChecked={false} /> Uncontrolled
+      <CheckboxInput size="small" defaultChecked={false} /> Uncontrolled
       checkbox, unchecked
     </label>
     <label>
-      <StyledCheckbox size="small" defaultChecked={true} /> Uncontrolled
+      <CheckboxInput size="small" defaultChecked={true} /> Uncontrolled
       checkbox, checked
     </label>
   </Flex>

diff --git a/web/packages/design/src/Checkbox/Checkbox.tsx b/web/packages/design/src/Checkbox/Checkbox.tsx
@@ -20,41 +20,11 @@ import styled from 'styled-components';
 
 import React, { forwardRef } from 'react';
 
-import { Flex } from 'design';
-import { space } from 'design/system';
 import * as Icon from 'design/Icon';
 
-export const CheckboxWrapper = styled(Flex)`
-  padding: 8px;
-  margin-bottom: 4px;
-  width: 300px;
-  align-items: center;
-  border: 1px solid ${props => props.theme.colors.spotBackground[1]};
-  border-radius: 8px;
-
-  &.disabled {
-    pointer-events: none;
-    opacity: 0.5;
-  }
-`;
-
-export const CheckboxInput = styled.input`
-  margin-right: 10px;
-  accent-color: ${props => props.theme.colors.brand};
-
-  // The "force" class is required for Storybook, where we want to show all the
-  // states, even though we can't enforce them.
-  &:hover,
-  .teleport-checkbox__force-hover & {
-    cursor: pointer;
-  }
-
-  ${space}
-`;
-
 export type CheckboxSize = 'large' | 'small';
 
-interface StyledCheckboxProps {
+interface CheckboxInputProps {
   size?: CheckboxSize;
 
   // Input properties
@@ -79,7 +49,7 @@ interface StyledCheckboxProps {
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-export const StyledCheckbox = forwardRef<HTMLInputElement, StyledCheckboxProps>(
+export const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(
   (props, ref) => {
     const { style, className, size, ...inputProps } = props;
     return (

diff --git a/web/packages/design/src/Checkbox/index.ts b/web/packages/design/src/Checkbox/index.ts
@@ -18,7 +18,6 @@
 
 export {
   CheckboxInput,
-  CheckboxWrapper,
-  StyledCheckbox,
+  CheckboxInput as StyledCheckbox, // Temporary alias for compatibility with Enterprise
   type CheckboxSize,
 } from './Checkbox';
diff --git a/web/packages/shared/components/FieldCheckbox/FieldCheckbox.tsx b/web/packages/shared/components/FieldCheckbox/FieldCheckbox.tsx
@@ -17,7 +17,7 @@
  */
 
 import Box from 'design/Box';
-import { CheckboxSize, StyledCheckbox } from 'design/Checkbox';
+import { CheckboxSize, CheckboxInput } from 'design/Checkbox';
 import Flex from 'design/Flex';
 import LabelInput from 'design/LabelInput';
 import Text from 'design/Text';
@@ -60,7 +60,7 @@ export const FieldCheckbox = forwardRef<HTMLInputElement, FieldCheckboxProps>(
       <Box mb={3} {...styles}>
         <StyledLabel disabled={disabled}>
           <Flex flexDirection="row" gap={2}>
-            <StyledCheckbox
+            <CheckboxInput
               size={size}
               ref={ref}
               checked={checked}

diff --git a/web/packages/shared/components/UnifiedResources/CardsView/ResourceCard.tsx b/web/packages/shared/components/UnifiedResources/CardsView/ResourceCard.tsx
@@ -20,7 +20,7 @@ import React, { useState, useEffect, useLayoutEffect, useRef } from 'react';
 import styled, { css } from 'styled-components';
 
 import { Box, ButtonLink, Flex, Label, Text } from 'design';
-import { StyledCheckbox } from 'design/Checkbox';
+import { CheckboxInput } from 'design/Checkbox';
 
 import { ResourceIcon } from 'design/ResourceIcon';
 
@@ -176,7 +176,7 @@ export function ResourceCard({
           selected={selected}
         >
           <HoverTooltip tipContent={selected ? 'Deselect' : 'Select'}>
-            <StyledCheckbox
+            <CheckboxInput
               css={`
                 position: absolute;
                 top: 16px;

diff --git a/web/packages/shared/components/UnifiedResources/FilterPanel.tsx b/web/packages/shared/components/UnifiedResources/FilterPanel.tsx
@@ -22,7 +22,7 @@ import { ButtonBorder, ButtonPrimary, ButtonSecondary } from 'design/Button';
 import { SortDir } from 'design/DataTable/types';
 import { Text, Flex } from 'design';
 import Menu, { MenuItem } from 'design/Menu';
-import { StyledCheckbox } from 'design/Checkbox';
+import { CheckboxInput } from 'design/Checkbox';
 import {
   ArrowUp,
   ArrowDown,
@@ -123,7 +123,7 @@ export function FilterPanel({
     >
       <Flex gap={2}>
         <HoverTooltip tipContent={selected ? 'Deselect all' : 'Select all'}>
-          <StyledCheckbox
+          <CheckboxInput
             css={`
               // add extra margin so it aligns with the checkboxes of the resources
               margin-left: 19px;
@@ -323,7 +323,7 @@ const FilterTypesMenu = ({
         {kindOptions.map(kind => {
           const $checkbox = (
             <>
-              <StyledCheckbox
+              <CheckboxInput
                 type="checkbox"
                 name={kind.label}
                 disabled={kind.disabled}
@@ -603,7 +603,7 @@ const IncludedResourcesSelector = ({
         <form onSubmit={applyFilter}>
           {options.map(option => (
             <MenuItem as="label" key={option.value} px={2}>
-              <StyledCheckbox
+              <CheckboxInput
                 type={availabilityFilter.canRequestAll ? 'checkbox' : 'radio'}
                 name="availabilityOptions"
                 value={option.value}

diff --git a/web/packages/shared/components/UnifiedResources/ListView/ResourceListItem.tsx b/web/packages/shared/components/UnifiedResources/ListView/ResourceListItem.tsx
@@ -20,7 +20,7 @@ import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 
 import { Box, ButtonIcon, Flex, Label, Text } from 'design';
-import { StyledCheckbox } from 'design/Checkbox';
+import { CheckboxInput } from 'design/Checkbox';
 import { Tags } from 'design/Icon';
 import { ResourceIcon } from 'design/ResourceIcon';
 
@@ -96,7 +96,7 @@ export function ResourceListItem({
           `}
           tipContent={selected ? 'Deselect' : 'Select'}
         >
-          <StyledCheckbox checked={selected} onChange={selectResource} />
+          <CheckboxInput checked={selected} onChange={selectResource} />
         </HoverTooltip>
 
         {/* pin button */}

diff --git a/web/packages/teleport/src/Discover/Shared/SecurityGroupPicker/SecurityGroupPicker.tsx b/web/packages/teleport/src/Discover/Shared/SecurityGroupPicker/SecurityGroupPicker.tsx
@@ -21,7 +21,7 @@ import React, { useState } from 'react';
 import { Flex, Link } from 'design';
 import Table, { Cell } from 'design/DataTable';
 import { Danger } from 'design/Alert';
-import { StyledCheckbox } from 'design/Checkbox';
+import { CheckboxInput } from 'design/Checkbox';
 import { FetchStatus } from 'design/DataTable/types';
 
 import { Attempt } from 'shared/hooks/useAttemptNext';
@@ -165,7 +165,7 @@ function CheckboxCell({
   return (
     <Cell width="20px">
       <Flex alignItems="center" my={2} justifyContent="center">
-        <StyledCheckbox
+        <CheckboxInput
           id={item.id}
           onChange={e => {
             onChange(item, e);