Added Cell for emails with sso provider (#45)

* Added Cell for emails with sso provider

* PR comments

* PR comments

Author: lumburovskalina

components/kern-button/ButtonAsText.tsx

@@ -6,8 +6,8 @@ export type ButtonAsTextProps = {
     color?: string;
     onClick?: () => void;
     disabled?: boolean;
-    iconLeft?: (props: any) => React.ReactNode;
-    iconRight?: (props: any) => React.ReactNode;
+    iconLeft?: (props: any) => any;
+    iconRight?: (props: any) => any;
     iconColor?: string;
     size?: 'small' | 'medium' | 'large';
     className?: string;

components/kern-button/IconButton.tsx

@@ -4,7 +4,7 @@ import { IconCheck } from "@tabler/icons-react";
 import { useState } from "react";
 
 interface IconButtonProps {
-    icon: (props: any) => React.ReactNode;
+    icon: (props: any) => any;
     iconColor?: string;
     onClick?: (e?: any) => void;
     buttonColor?: string;

components/kern-button/KernButton.tsx

@@ -7,7 +7,7 @@ import { IconCheck } from "@tabler/icons-react";
 interface KernButtonProps {
     text?: string;
     type?: 'button' | 'submit' | 'reset';
-    icon?: (props: any) => React.ReactNode;
+    icon?: (props: any) => any;
     iconColor?: string;
     onClick?: (event?) => void;
     buttonColor?: string;

components/kern-table/CellComponents.tsx

@@ -298,4 +298,14 @@ function EtlApiTokenCell({ organization }) {
     )
 }
 
-export { OrganizationAndUsersCell, MaxRowsColsCharsCell, CommentsCell, ExportConsumptionAndDeleteCell, BadgeCell, OrganizationUserCell, DeleteUserCell, LevelCell, ArchiveReasonCell, ProjectNameTaskCell, CancelTaskCell, IconCell, ConfigCell, EditDeleteOrgButtonCell, ViewStackCell, AbortSessionButtonCell, FeedbackMessageCell, FeedbackMessageTextCell, JumpToConversationCell, RemoteVersionCell, ExternalLinkCell, ModelDateCell, FileSizeCell, StatusModelCell, DeleteModelCell, LabelCell, ViewCell, EvaluationRunStateCell, EvaluationRunDetailsCell, EtlApiTokenCell }
+function EmailCell({ user }) {
+    return (
+        <div className="flex flex-row items-center">
+            {user.sso_provider ? <Tooltip content={"SSO User via " + user.sso_provider} color="invert">
+                <span className="text-blue-700">{user.email}*</span></Tooltip> : <span>{user.email}</span>
+            }
+        </div>
+    )
+}
+
+export { OrganizationAndUsersCell, MaxRowsColsCharsCell, CommentsCell, ExportConsumptionAndDeleteCell, BadgeCell, OrganizationUserCell, DeleteUserCell, LevelCell, ArchiveReasonCell, ProjectNameTaskCell, CancelTaskCell, IconCell, ConfigCell, EditDeleteOrgButtonCell, ViewStackCell, AbortSessionButtonCell, FeedbackMessageCell, FeedbackMessageTextCell, JumpToConversationCell, RemoteVersionCell, ExternalLinkCell, ModelDateCell, FileSizeCell, StatusModelCell, DeleteModelCell, LabelCell, ViewCell, EvaluationRunStateCell, EvaluationRunDetailsCell, EtlApiTokenCell, EmailCell }

components/kern-table/KernTable.tsx

@@ -1,6 +1,6 @@
 import SortArrows from "@/submodules/react-components/components/kern-table/SortArrows";
 import { KernTableProps } from "../../types/kern-table";
-import { AbortSessionButtonCell, ArchiveReasonCell, BadgeCell, CancelTaskCell, CommentsCell, ConfigCell, DeleteModelCell, DeleteUserCell, EditDeleteOrgButtonCell, EtlApiTokenCell, EvaluationRunDetailsCell, EvaluationRunStateCell, ExportConsumptionAndDeleteCell, ExternalLinkCell, FeedbackMessageCell, FeedbackMessageTextCell, FileSizeCell, IconCell, JumpToConversationCell, LabelCell, LevelCell, MaxRowsColsCharsCell, ModelDateCell, OrganizationAndUsersCell, OrganizationUserCell, ProjectNameTaskCell, RemoteVersionCell, StatusModelCell, ViewCell, ViewStackCell } from "./CellComponents";
+import { AbortSessionButtonCell, ArchiveReasonCell, BadgeCell, CancelTaskCell, CommentsCell, ConfigCell, DeleteModelCell, DeleteUserCell, EditDeleteOrgButtonCell, EmailCell, EtlApiTokenCell, EvaluationRunDetailsCell, EvaluationRunStateCell, ExportConsumptionAndDeleteCell, ExternalLinkCell, FeedbackMessageCell, FeedbackMessageTextCell, FileSizeCell, IconCell, JumpToConversationCell, LabelCell, LevelCell, MaxRowsColsCharsCell, ModelDateCell, OrganizationAndUsersCell, OrganizationUserCell, ProjectNameTaskCell, RemoteVersionCell, StatusModelCell, ViewCell, ViewStackCell } from "./CellComponents";
 import { Fragment, useMemo } from "react";
 import { IconEdit } from "@tabler/icons-react";
 import KernDropdown from "../KernDropdown";
@@ -125,6 +125,8 @@ function ComponentMapper(cell: any) {
                     return <EvaluationRunDetailsCell {...cell} />;
                 case 'EtlApiTokenCell':
                     return <EtlApiTokenCell {...cell} />;
+                case 'EmailCell':
+                    return <EmailCell {...cell} />;
             }
         case 'text':
             return <span>{cell.value ?? <NotApplicableBadge />}</span>