[v16] Web UI tweaks

web/packages/teleport/src/Discover/Database/EnrollRdsDatabase/EnrollRdsDatabase.tsx

@@ -379,7 +379,6 @@ export function EnrollRdsDatabase() {
             <ToggleSection
               wantAutoDiscover={wantAutoDiscover}
               toggleWantAutoDiscover={() => setWantAutoDiscover(b => !b)}
-              isDisabled={tableData.items.length === 0}
               discoveryGroupName={discoveryGroupName}
               setDiscoveryGroupName={setDiscoveryGroupName}
               clusterPublicUrl={ctx.storeUser.state.cluster.publicURL}
@@ -443,25 +442,19 @@ function getRdsEngineIdentifier(engine: DatabaseEngine): RdsEngineIdentifier {
 function ToggleSection({
   wantAutoDiscover,
   toggleWantAutoDiscover,
-  isDisabled,
   discoveryGroupName,
   setDiscoveryGroupName,
   clusterPublicUrl,
 }: {
   wantAutoDiscover: boolean;
-  isDisabled: boolean;
   toggleWantAutoDiscover(): void;
   discoveryGroupName: string;
   setDiscoveryGroupName(n: string): void;
   clusterPublicUrl: string;
 }) {
   return (
     <Box mb={2}>
-      <Toggle
-        isToggled={wantAutoDiscover}
-        onToggle={toggleWantAutoDiscover}
-        disabled={isDisabled}
-      >
+      <Toggle isToggled={wantAutoDiscover} onToggle={toggleWantAutoDiscover}>
         <Box ml={2} mr={1}>
           Auto-enroll all databases for selected region
         </Box>

web/packages/teleport/src/Integrations/Enroll/common.tsx

@@ -34,7 +34,7 @@ export const IntegrationTile = styled(Flex)`
   cursor: pointer;
 
   ${props => {
-    const pointerEvents = props.disabled || props.$exists ? 'none' : null;
+    const pointerEvents = props.disabled || props.$exists ? 'none' : 'auto';
     if (props.$exists) {
       return { pointerEvents };
     }

web/packages/teleport/src/LocksV2/NewLock/ResourceList/ServerSideSupportedList/ServerSideSupportedList.tsx

@@ -106,6 +106,9 @@ export function ServerSideSupportedList(props: CommonListProps) {
   }
 
   const table = useMemo(() => {
+    // If there is a fetchStatus, a fetching is going on.
+    // Show the loading indicator instead of trying to process previous data.
+    const resources = fetchStatus === 'loading' ? [] : fetchedData.agents;
     const listProps: ServerSideListProps = {
       fetchStatus,
       customSort: {
@@ -120,21 +123,17 @@ export function ServerSideSupportedList(props: CommonListProps) {
 
     switch (props.selectedResourceKind) {
       case 'role':
-        return (
-          <Roles roles={fetchedData.agents as RoleResource[]} {...listProps} />
-        );
+        return <Roles roles={resources as RoleResource[]} {...listProps} />;
       case 'node':
-        return <Nodes nodes={fetchedData.agents as Node[]} {...listProps} />;
+        return <Nodes nodes={resources as Node[]} {...listProps} />;
       case 'windows_desktop':
-        return (
-          <Desktops desktops={fetchedData.agents as Desktop[]} {...listProps} />
-        );
+        return <Desktops desktops={resources as Desktop[]} {...listProps} />;
       default:
         console.error(
           `[ServerSideSupportedList.tsx] table not defined for resource kind ${props.selectedResourceKind}`
         );
     }
-  }, [props.attempt, fetchedData, fetchStatus, props.selectedResources]);
+  }, [fetchedData, fetchStatus, props.selectedResources]);
 
   return (
     <TableWrapper