Web: Add filters and pinning support for Enroll Resources page

web/packages/design/src/DataTable/InputSearch/InputSearch.tsx

@@ -35,6 +35,8 @@ export default function InputSearch({
   setSearchValue,
   children,
   bigInputSize = false,
+  autoFocus = false,
+  placeholder = 'Search...',
 }: Props) {
   function submitSearch(e: FormEvent<HTMLFormElement>) {
     e.preventDefault(); // prevent form default
@@ -50,10 +52,11 @@ export default function InputSearch({
       <Form onSubmit={submitSearch}>
         <StyledInput
           bigInputSize={bigInputSize}
-          placeholder="Search..."
+          placeholder={placeholder}
           px={3}
           defaultValue={searchValue}
           name={searchInputName}
+          autoFocus={autoFocus}
         />
         <ChildWrapperBackground>
           <ChildWrapper>{children}</ChildWrapper>
@@ -68,6 +71,8 @@ type Props = {
   setSearchValue: (searchValue: string) => void;
   children?: JSX.Element;
   bigInputSize?: boolean;
+  autoFocus?: boolean;
+  placeholder?: string;
 };
 
 const ChildWrapper = styled.div`

web/packages/shared/components/UnifiedResources/UnifiedResources.tsx

@@ -473,7 +473,7 @@ export function UnifiedResources(props: UnifiedResourcesProps) {
             bg="levels.sunken"
             details={updatePinnedResourcesAttempt.statusText}
           >
-            Could not update pinned resources:
+            Could not update pinned resources
           </Danger>
         )}
         {unifiedResourcePreferencesAttempt?.status === 'error' && (

web/packages/shared/components/UnifiedResources/shared/PinButton.tsx

@@ -23,8 +23,10 @@ import { PushPin, PushPinFilled } from 'design/Icon';
 import { HoverTooltip } from 'design/Tooltip';
 
 import { PinningSupport } from '../types';
-import { PINNING_NOT_SUPPORTED_MESSAGE } from '../UnifiedResources';
 
+// TODO(kimlisa): move this out of the UnifiedResources directory,
+// since it is also used outside of UnifiedResources
+// (eg: Discover/SelectResource.tsx)
 export function PinButton({
   pinned,
   pinningSupport,
@@ -55,10 +57,18 @@ export function PinButton({
 
   return (
     <ButtonIcon
+      data-testid="pin-button"
       disabled={shouldDisableButton}
       setRef={copyAnchorEl}
       size={0}
-      onClick={setPinned}
+      onClick={e => {
+        // This ButtonIcon can be used within another element that also has a
+        // onClick handler (stops propagating click event) or within an
+        // anchor element (prevents browser default to go the link).
+        e.stopPropagation();
+        e.preventDefault();
+        setPinned();
+      }}
       className={className}
       css={`
         visibility: ${shouldShowButton ? 'visible' : 'hidden'};
@@ -83,7 +93,7 @@ function getTipContent(
 ): string {
   switch (pinningSupport) {
     case PinningSupport.NotSupported:
-      return PINNING_NOT_SUPPORTED_MESSAGE;
+      return 'To enable pinning support, upgrade to 17.3 or newer.';
     case PinningSupport.Supported:
       return pinned ? 'Unpin' : 'Pin';
     default:

web/packages/teleport/src/Discover/ConnectMyComputer/SetupConnect/SetupConnect.story.tsx

@@ -144,6 +144,7 @@ const Provider = ({ children }) => {
   const updatePreferences = () => Promise.resolve();
   const getClusterPinnedResources = () => Promise.resolve([]);
   const updateClusterPinnedResources = () => Promise.resolve();
+  const updateDiscoverResourcePreferences = () => Promise.resolve();
 
   return (
     <MemoryRouter>
@@ -153,6 +154,7 @@ const Provider = ({ children }) => {
           updatePreferences,
           getClusterPinnedResources,
           updateClusterPinnedResources,
+          updateDiscoverResourcePreferences,
         }}
       >
         <ContextProvider ctx={ctx}>{children}</ContextProvider>

web/packages/teleport/src/Discover/Discover.test.tsx

@@ -42,6 +42,7 @@ import { makeTestUserContext } from 'teleport/User/testHelpers/makeTestUserConte
 import { mockUserContextProviderWith } from 'teleport/User/testHelpers/mockUserContextWith';
 
 import { ResourceKind } from './Shared';
+import { getGuideTileId } from './testUtils';
 import { DiscoverUpdateProps, useDiscover } from './useDiscover';
 
 beforeEach(() => {
@@ -88,18 +89,24 @@ test('displays all resources by default', () => {
 
   expect(
     screen
-      .getAllByTestId(ResourceKind.Server)
-      .concat(screen.getAllByTestId(ResourceKind.ConnectMyComputer))
+      .getAllByTestId(getGuideTileId({ kind: ResourceKind.Server }))
+      .concat(
+        screen.getAllByTestId(
+          getGuideTileId({ kind: ResourceKind.ConnectMyComputer })
+        )
+      )
   ).toHaveLength(SERVERS.length);
-  expect(screen.getAllByTestId(ResourceKind.Database)).toHaveLength(
+  expect(
+    screen.getAllByTestId(getGuideTileId({ kind: ResourceKind.Database }))
+  ).toHaveLength(
     DATABASES.length + DATABASES_UNGUIDED.length + DATABASES_UNGUIDED_DOC.length
   );
-  expect(screen.getAllByTestId(ResourceKind.Application)).toHaveLength(
-    APPLICATIONS.length
-  );
-  expect(screen.getAllByTestId(ResourceKind.Kubernetes)).toHaveLength(
-    KUBERNETES.length
-  );
+  expect(
+    screen.getAllByTestId(getGuideTileId({ kind: ResourceKind.Application }))
+  ).toHaveLength(APPLICATIONS.length);
+  expect(
+    screen.getAllByTestId(getGuideTileId({ kind: ResourceKind.Kubernetes }))
+  ).toHaveLength(KUBERNETES.length);
 });
 
 test('location state applies filter/search', () => {
@@ -109,11 +116,17 @@ test('location state applies filter/search', () => {
   });
 
   expect(
-    screen.queryByTestId(ResourceKind.Application)
+    screen.queryByTestId(getGuideTileId({ kind: ResourceKind.Application }))
+  ).not.toBeInTheDocument();
+  expect(
+    screen.queryByTestId(getGuideTileId({ kind: ResourceKind.Server }))
+  ).not.toBeInTheDocument();
+  expect(
+    screen.queryByTestId(getGuideTileId({ kind: ResourceKind.Database }))
+  ).not.toBeInTheDocument();
+  expect(
+    screen.queryByTestId(getGuideTileId({ kind: ResourceKind.Kubernetes }))
   ).not.toBeInTheDocument();
-  expect(screen.queryByTestId(ResourceKind.Server)).not.toBeInTheDocument();
-  expect(screen.queryByTestId(ResourceKind.Database)).not.toBeInTheDocument();
-  expect(screen.queryByTestId(ResourceKind.Kubernetes)).not.toBeInTheDocument();
 });
 
 describe('location state', () => {
@@ -122,79 +135,109 @@ describe('location state', () => {
 
     expect(
       screen
-        .getAllByTestId(ResourceKind.Server)
-        .concat(screen.getAllByTestId(ResourceKind.ConnectMyComputer))
+        .getAllByTestId(getGuideTileId({ kind: ResourceKind.Server }))
+        .concat(
+          screen.getAllByTestId(
+            getGuideTileId({ kind: ResourceKind.ConnectMyComputer })
+          )
+        )
     ).toHaveLength(SERVERS.length);
 
     // we assert three databases for servers because the naming convention includes "server"
-    expect(screen.queryAllByTestId(ResourceKind.Database)).toHaveLength(4);
+    expect(
+      screen.queryAllByTestId(getGuideTileId({ kind: ResourceKind.Database }))
+    ).toHaveLength(4);
 
-    expect(screen.queryByTestId(ResourceKind.Desktop)).not.toBeInTheDocument();
     expect(
-      screen.queryByTestId(ResourceKind.Application)
+      screen.queryByTestId(getGuideTileId({ kind: ResourceKind.Desktop }))
     ).not.toBeInTheDocument();
     expect(
-      screen.queryByTestId(ResourceKind.Kubernetes)
+      screen.queryByTestId(getGuideTileId({ kind: ResourceKind.Application }))
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId(getGuideTileId({ kind: ResourceKind.Kubernetes }))
     ).not.toBeInTheDocument();
   });
 
   test('displays desktops when the location state is desktop', () => {
     create({ initialEntry: 'desktop' });
 
-    expect(screen.queryByTestId(ResourceKind.Server)).not.toBeInTheDocument();
-    expect(screen.queryByTestId(ResourceKind.Database)).not.toBeInTheDocument();
     expect(
-      screen.queryByTestId(ResourceKind.Application)
+      screen.queryByTestId(getGuideTileId({ kind: ResourceKind.Server }))
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId(getGuideTileId({ kind: ResourceKind.Database }))
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId(getGuideTileId({ kind: ResourceKind.Application }))
     ).not.toBeInTheDocument();
     expect(
-      screen.queryByTestId(ResourceKind.Kubernetes)
+      screen.queryByTestId(getGuideTileId({ kind: ResourceKind.Kubernetes }))
     ).not.toBeInTheDocument();
   });
 
   test('displays apps when the location state is application', () => {
     create({ initialEntry: 'application' });
 
-    expect(screen.getAllByTestId(ResourceKind.Application)).toHaveLength(
-      APPLICATIONS.length
-    );
+    expect(
+      screen.getAllByTestId(getGuideTileId({ kind: ResourceKind.Application }))
+    ).toHaveLength(APPLICATIONS.length);
 
-    expect(screen.queryByTestId(ResourceKind.Server)).not.toBeInTheDocument();
-    expect(screen.queryByTestId(ResourceKind.Desktop)).not.toBeInTheDocument();
-    expect(screen.queryByTestId(ResourceKind.Database)).not.toBeInTheDocument();
     expect(
-      screen.queryByTestId(ResourceKind.Kubernetes)
+      screen.queryByTestId(getGuideTileId({ kind: ResourceKind.Server }))
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId(getGuideTileId({ kind: ResourceKind.Desktop }))
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId(getGuideTileId({ kind: ResourceKind.Database }))
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId(getGuideTileId({ kind: ResourceKind.Kubernetes }))
     ).not.toBeInTheDocument();
   });
 
   test('displays databases when the location state is database', () => {
     create({ initialEntry: 'database' });
 
-    expect(screen.getAllByTestId(ResourceKind.Database)).toHaveLength(
+    expect(
+      screen.getAllByTestId(getGuideTileId({ kind: ResourceKind.Database }))
+    ).toHaveLength(
       DATABASES.length +
         DATABASES_UNGUIDED.length +
         DATABASES_UNGUIDED_DOC.length
     );
 
-    expect(screen.queryByTestId(ResourceKind.Server)).not.toBeInTheDocument();
-    expect(screen.queryByTestId(ResourceKind.Desktop)).not.toBeInTheDocument();
     expect(
-      screen.queryByTestId(ResourceKind.Application)
+      screen.queryByTestId(getGuideTileId({ kind: ResourceKind.Server }))
     ).not.toBeInTheDocument();
     expect(
-      screen.queryByTestId(ResourceKind.Kubernetes)
+      screen.queryByTestId(getGuideTileId({ kind: ResourceKind.Desktop }))
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId(getGuideTileId({ kind: ResourceKind.Application }))
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId(getGuideTileId({ kind: ResourceKind.Kubernetes }))
     ).not.toBeInTheDocument();
   });
 
   test('displays kube resources when the location state is kubernetes', () => {
     create({ initialEntry: 'kubernetes' });
 
-    expect(screen.getAllByTestId(ResourceKind.Kubernetes)).toHaveLength(
-      KUBERNETES.length
-    );
+    expect(
+      screen.getAllByTestId(getGuideTileId({ kind: ResourceKind.Kubernetes }))
+    ).toHaveLength(KUBERNETES.length);
 
-    expect(screen.queryByTestId(ResourceKind.Server)).not.toBeInTheDocument();
-    expect(screen.queryByTestId(ResourceKind.Desktop)).not.toBeInTheDocument();
-    expect(screen.queryByTestId(ResourceKind.Database)).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId(getGuideTileId({ kind: ResourceKind.Server }))
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId(getGuideTileId({ kind: ResourceKind.Desktop }))
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId(getGuideTileId({ kind: ResourceKind.Database }))
+    ).not.toBeInTheDocument();
     expect(
       screen.queryByTestId(ResourceKind.Application)
     ).not.toBeInTheDocument();

web/packages/teleport/src/Discover/SelectResource/SelectResource.story.tsx

@@ -96,6 +96,7 @@ const Provider = ({
   const updatePreferences = () => Promise.resolve();
   const getClusterPinnedResources = () => Promise.resolve([]);
   const updateClusterPinnedResources = () => Promise.resolve();
+  const updateDiscoverResourcePreferences = () => Promise.resolve();
   const preferences: UserPreferences = makeDefaultUserPreferences();
   preferences.onboard.preferredResources = resources;
 
@@ -109,6 +110,7 @@ const Provider = ({
           updatePreferences,
           getClusterPinnedResources,
           updateClusterPinnedResources,
+          updateDiscoverResourcePreferences,
         }}
       >
         <ContextProvider ctx={ctx}>{children}</ContextProvider>