Web UI: Integrations Enroll redesign by alexhemard · Pull Request #58421 · gravitational/teleport

alexhemard · 2025-08-27T22:25:15Z

Description

Resolves: #57612
e PR: https://github.com/gravitational/teleport.e/pull/7144

Implements new Integration Enrollment design

New tile design
Adds Sorting, Filtering by search string, tags
'Add New Bot' redirects to Integration page with Bots filter applied
New AWS Icons

Demo

enroll.mp4

Notes

Will need a followup PR to clean up 'old design' Components after e update is merged

Changelog: Updated Enroll Integration page design

kimlisa · 2025-08-28T22:01:38Z

haven't looked at the code yet, i just did some QA testing:

In community edition the filter types for device trust, notification, and scim gives me empty result. These are enterprise features. Do we want to render these tiles and have requires upgrading to enterprise CTA like others? Or should we not render these types in the dropdown? I'd lean towards rendering with CTA to stay consistent... but i'd double check with UX folks
When i click on filters, my URL includes pinnedOnly=false which doesn't make sense since we don't support pinning
A guided plugin tile once enrolled converts to self-hosted tile. We have like 4 different types of tiles: disabled requires upgrade or RBAC, self-hosted (click out to guide), guided + once enrolled prevent clicking tile to see guide (eg: slack), guided + once enroll retain click behavior (eg: okta)
Stories inside teleport > integrations > enroll > picker and teleporte > integrations > picker are broken
If you enter a invalid kind in the URL, it is silently ignored with no results (at least in the unified resources page it errors out saying what's wrong b/c there is a validation in the backend). in session recording page, invalid types are just removed from the URL since it's client filtering (i'd lean towards this behavior)
if you hover over a disabled tile, it loses its border:

gzdunek

First pass.

gzdunek · 2025-08-29T12:59:05Z

+      }}
+    >
+      <Icons.Magnifier size={16} color="text.slightlyMuted" />
+      <StyledInput


The input is showing previously submitted values, I'd set autoComplete="off" on it.

What about this comment? :)

alexhemard · 2025-08-29T13:38:48Z

When i click on filters, my URL includes pinnedOnly=false which doesn't make sense since we don't support pinning

@kimlisa This is leveraging the useUrlFiltering hook and it's appending the isPinned param. There's a check to add the URL param if it's defined, but there's a default parameter of false, so always gets added.

This also pops up in Access Lists search

Seems like removing the default false option would prevent this behavior or should I roll my own url query filtering if useUrlFiltering is not appropriate here 🤔

public-teleport-github-review-bot · 2025-09-02T16:13:06Z

@alexhemard - this PR will require admin approval to merge due to its size. Consider breaking it up into a series smaller changes.

alexhemard · 2025-09-02T16:18:45Z

Pushed changes:

Replaced DebouncedSearchInput with DataTable.Input
Replaced useUrlFiltering with invalid tag filtering
Enrolled plugin no longer displays as self-hosted
misc feedback, cleanup

alexhemard · 2025-09-02T17:51:42Z

+  );
+}
+
+export function useIntegrationPickerState(): [


Callout: This is mostly repurposed from https://github.com/gravitational/teleport/blob/master/web/packages/teleport/src/SessionRecordings/list/state.ts but this hook feels like it could be generic 🤔

It might be a good idea to try this if it’s not too much work. But I'd do this outside this PR, since it's already quite large.

gzdunek · 2025-09-03T12:38:52Z

+      hasAccess={true}
+      icon={integration.icon}
+      link={{ url: integration.link, onClick: onBotClick }}
+      renderBadge={renderBadge}


I think this could a regular component, not a function returning component, since we don't pass any arguments to it.

gzdunek · 2025-09-03T13:37:46Z

+  );
+}
+
+export function useIntegrationPickerState(): [


It might be a good idea to try this if it’s not too much work. But I'd do this outside this PR, since it's already quite large.

kimlisa

we're almost there

This is leveraging the useUrlFiltering hook and it's appending the isPinned param.

we make mistakes, this is one of those that got overlooked both by dev and code reviewers. i wouldn't rely on existing code and patterns to be always the best or accurate, i would always question it.

in fact, that access list isPinned got noticed by another dev who is working on something related and is in the process of fixing it. similarly if you notice anything odd (or notice any bug), ask in #dev-frontend or create an issue for it tagged with ui

kimlisa · 2025-09-03T17:08:50Z

+        <Redirect
+          path={cfg.getBotsNewRoute()}
+          to={`${cfg.getIntegrationEnrollRoute()}?tags=bot`}
+        />


with this change, the bot nav section on click doesn't get highlighted like in the bottom image

before your changes:

@kimlisa Should this have a link out icon since it redirects to the Integrations page?

Existing shortcut

Proposed

kimlisa · 2025-09-03T17:08:55Z

i think there are unused components and or functions in this file, can you double check?

i would put a // TODO(alexhemard): delete in a follow up PR to mark things for deletion later

kimlisa · 2025-09-03T17:21:09Z

gzdunek · 2025-09-05T10:05:21Z

+          placeholder="Search for integrations..."
+        />
+      </Box>
+      <Flex justifyContent="space-between" minWidth="419px">


This is rather a low level component, it probably shouldn't set the min width for the page.

gzdunek · 2025-09-05T10:15:33Z

+          <BadgeSelfHosted>
+            Self-Hosted
+            <NewTab size={14} ml={1} color="text.slightlyMuted" />
+          </BadgeSelfHosted>


The text and the icon should be aligned.

gzdunek · 2025-09-05T10:18:47Z

+      }}
+    >
+      <Icons.Magnifier size={16} color="text.slightlyMuted" />
+      <StyledInput


What about this comment? :)

alexhemard · 2025-09-05T20:57:05Z

Added filtering tags for enterprise features if they don't have a matching integration

OSS

Enterprise

backport-bot-workflows · 2025-09-10T18:02:16Z

@alexhemard See the table below for backport results.

Branch	Result
branch/v18	Create PR

github-actions bot requested review from gzdunek and kimlisa August 27, 2025 22:25

github-actions bot added size/lg ui labels Aug 27, 2025

alexhemard force-pushed the alexhemard/integration-redesign branch from 8f18f4a to 9862b13 Compare August 28, 2025 19:29

gzdunek reviewed Aug 29, 2025

View reviewed changes

alexhemard force-pushed the alexhemard/integration-redesign branch from 6b3d816 to c90f1b2 Compare September 2, 2025 16:14

alexhemard requested a review from gzdunek September 2, 2025 16:28

alexhemard commented Sep 2, 2025

View reviewed changes

gzdunek reviewed Sep 3, 2025

View reviewed changes

kimlisa reviewed Sep 3, 2025

View reviewed changes

alexhemard force-pushed the alexhemard/integration-redesign branch from 1d22628 to a6bee7a Compare September 4, 2025 20:13

alexhemard requested review from gzdunek and kimlisa September 4, 2025 20:29

gzdunek approved these changes Sep 5, 2025

View reviewed changes

alexhemard force-pushed the alexhemard/integration-redesign branch from 9de9468 to 0aab927 Compare September 5, 2025 20:54

kimlisa approved these changes Sep 5, 2025

View reviewed changes

alexhemard force-pushed the alexhemard/integration-redesign branch from 0aab927 to bb6186e Compare September 8, 2025 16:34

alexhemard added 7 commits September 9, 2025 10:13

feat(Integrations): init redesign

552d37d

mv to Integrations/Enroll/Shared

4e4f2c4

add missing license

f056484

feedback, search tile descriptions

ef9baf7

fix storybook

57d2fcf

fix missing border for disabled tile hover

32eb75a

replace useUrlFiltering, feedback

fd4a2d8

alexhemard added 9 commits September 9, 2025 10:13

remove bot name filter hack

f199bea

simplify useIntegrationPickerState hook

2860255

remove unused fns, tests

d5bab33

renderBadge -> Badge

62d4c7b

feedback

36fc5eb

update RolesAnywhere

130b713

feedback

b82a52c

filter tags if no matching integrations

991935a

update comments

d5a557d

alexhemard force-pushed the alexhemard/integration-redesign branch from bb6186e to d5a557d Compare September 9, 2025 19:31

alexhemard requested a review from r0mant September 10, 2025 14:10

r0mant approved these changes Sep 10, 2025

View reviewed changes

alexhemard added this pull request to the merge queue Sep 10, 2025

alexhemard added the backport/branch/v18 label Sep 10, 2025

Merged via the queue into master with commit 44fbb00 Sep 10, 2025
43 checks passed

alexhemard deleted the alexhemard/integration-redesign branch September 10, 2025 18:00

alexhemard mentioned this pull request Sep 10, 2025

[v18] Web UI: Integrations Enroll redesign #58985

Merged

ravicious mentioned this pull request Sep 12, 2025

Device Trust empty state UI: Link to integrations list #59081

Merged

strideynet mentioned this pull request Jan 9, 2026

Remove unused MachineIDIntegrationSection component #62724

Merged

Conversation

alexhemard commented Aug 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Demo

Notes

Uh oh!

kimlisa commented Aug 28, 2025

Uh oh!

gzdunek left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

alexhemard commented Aug 29, 2025

Uh oh!

public-teleport-github-review-bot bot commented Sep 2, 2025

Uh oh!

alexhemard commented Sep 2, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kimlisa left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexhemard Sep 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexhemard commented Sep 5, 2025

Uh oh!

Uh oh!

backport-bot-workflows bot commented Sep 10, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

alexhemard commented Aug 27, 2025 •

edited

Loading

kimlisa left a comment •

edited

Loading

alexhemard Sep 4, 2025 •

edited

Loading