Table add ons and remove ellipsis and re-order

- Allow on row click handler - Allow custom row styler (func to conditionally apply styles)
gravitational · Aug 2, 2024 · ab982eb · ab982eb
1 parent 1dd8cf2
commit ab982eb
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 5 deletions.
diff --git a/web/packages/design/src/DataTable/Table.tsx b/web/packages/design/src/DataTable/Table.tsx
@@ -56,6 +56,7 @@ export function Table<T>({
   style,
   serversideProps,
   customSort,
+  row,
 }: State<T>) {
   const renderHeaders = () => {
     const headers = columns.flatMap(column => {
@@ -126,7 +127,15 @@ export function Table<T>({
           </React.Fragment>
         );
       });
-      rows.push(<tr key={rowIdx}>{cells}</tr>);
+      rows.push(
+        <tr
+          key={rowIdx}
+          onClick={row?.onClick ? () => row.onClick(item) : undefined}
+          style={row?.onStyle ? row.onStyle(item) : undefined}
+        >
+          {cells}
+        </tr>
+      );
     });
 
     if (rows.length) {

diff --git a/web/packages/design/src/DataTable/types.ts b/web/packages/design/src/DataTable/types.ts
@@ -54,6 +54,16 @@ export type TableProps<T> = {
   // any client table filtering supplied by default.
   // Use case: filtering is done on the caller side e.g. server side.
   disableFilter?: boolean;
+  /**
+   * row configuration
+   */
+  row: {
+    onClick?(row: T): void;
+    /**
+     * conditionally style a row (eg: cursor: pointer, disabled)
+     */
+    onStyle?(row: T): React.CSSProperties;
+  };
 };
 
 type TableColumnBase<T> = {

diff --git a/web/packages/teleport/src/Integrations/IntegrationList.tsx b/web/packages/teleport/src/Integrations/IntegrationList.tsx
@@ -18,6 +18,7 @@
 
 import React from 'react';
 import styled from 'styled-components';
+import { useHistory } from 'react-router';
 import { Link as InternalRouteLink } from 'react-router-dom';
 
 import { Box, Flex, Image } from 'design';
@@ -65,11 +66,27 @@ type Props<IntegrationLike> = {
 type IntegrationLike = Integration | Plugin | ExternalAuditStorageIntegration;
 
 export function IntegrationList(props: Props<IntegrationLike>) {
+  const history = useHistory();
+
+  function handleOnRowClick(row: IntegrationLike) {
+    if (row.kind !== 'okta') return;
+    history.push(cfg.getIntegrationStatusRoute(row.kind, row.name));
+  }
+
+  function handleOnRowStyle(row: IntegrationLike): React.CSSProperties {
+    if (row.kind !== 'okta') return;
+    return { cursor: 'pointer' };
+  }
+
   return (
     <Table
       pagination={{ pageSize: 20 }}
       isSearchable
       data={props.list}
+      row={{
+        onClick: handleOnRowClick,
+        onStyle: handleOnRowStyle,
+      }}
       columns={[
         {
           key: 'resourceType',
@@ -98,18 +115,18 @@ export function IntegrationList(props: Props<IntegrationLike>) {
               return (
                 <Cell align="right">
                   <MenuButton>
-                    <MenuItem onClick={() => props.onDeletePlugin(item)}>
-                      Delete...
-                    </MenuItem>
                     {/* Currently, only okta supports status pages */}
                     {item.kind === 'okta' && (
                       <MenuItem
                         as={InternalRouteLink}
                         to={cfg.getIntegrationStatusRoute(item.kind, item.name)}
                       >
-                        View Status...
+                        View Status
                       </MenuItem>
                     )}
+                    <MenuItem onClick={() => props.onDeletePlugin(item)}>
+                      Delete...
+                    </MenuItem>
                   </MenuButton>
                 </Cell>
               );