Cellcomponents for integratios (#47)

* Cellcomponents for integratios

* Memoized icons

* More memoized icons

* Recycle icon memoized

* perf: add IconCircleCheck

* perf: add IconClock

---------

Co-authored-by: andhreljaKern <[email protected]>
Co-authored-by: LennartSchmidtKern <[email protected]>

Author: 3 people

components/kern-icons/icons.ts

@@ -1,5 +1,5 @@
 import { memo } from 'react';
-import { IconActivity, IconAdjustments, IconAdjustmentsAlt, IconAdjustmentsOff, IconAlertCircle, IconAlertTriangle, IconAlertTriangleFilled, IconAngle, IconApi, IconArchive, IconArrowAutofitDown, IconArrowCurveRight, IconArrowDown, IconArrowLeft, IconArrowNarrowLeft, IconArrowNarrowRight, IconArrowRight, IconArrowsRandom, IconArrowsSort, IconArrowUp, IconArrowUpRight, IconAssembly, IconBallpen, IconBallpenOff, IconBell, IconBolt, IconBottle, IconBox, IconBoxOff, IconBrandOpenai, IconBrandPython, IconBulb, IconBulldozer, IconCamera, IconCategoryPlus, IconCell, IconChartBubble, IconChartCircles, IconChartDots3, IconChartLine, IconChartPie, IconCheck, IconChecks, IconChevronCompactLeft, IconChevronCompactRight, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCircle, IconCircleCheckFilled, IconCircleMinus, IconCirclePlus, IconClick, IconClipboard, IconClipboardCheck, IconClipboardOff, IconCode, IconCodePlus, IconColorPicker, IconColumns, IconColumns1, IconColumns2, IconColumns3, IconCopy, IconCrown, IconCrownOff, IconDatabase, IconDatabasePlus, IconDeviceFloppy, IconDots, IconDotsVertical, IconDownload, IconEdit, IconEngine, IconExclamationCircle, IconExclamationMark, IconExternalLink, IconEye, IconEyeCancel, IconEyeCheck, IconEyeOff, IconFile, IconFileDownload, IconFileImport, IconFileInfo, IconFilePencil, IconFiles, IconFileText, IconFileUpload, IconFilter, IconFilterOff, IconFishHook, IconFolderBolt, IconGripVertical, IconHandClick, IconHeading, IconHelp, IconHexagons, IconHierarchy, IconHierarchy3, IconHistory, IconHome, IconHourglass, IconHourglassEmpty, IconInfoCircle, IconInfoCircleFilled, IconInfoSquare, IconLayoutList, IconLayoutNavbarCollapse, IconLayoutSidebar, IconLetterGSmall, IconLink, IconList, IconLoader, IconLoader2, IconLockAccess, IconMap, IconMaximize, IconMessageCircle, IconMessageCircleSearch, IconMessages, IconMinimize, IconMinus, IconMoustache, IconNews, IconNotes, IconPencil, IconPlayCardStar, IconPlayerPlay, IconPlayerPlayFilled, IconPlus, IconPoint, IconPointerOff, IconPointerSearch, IconPointFilled, IconQuestionMark, IconRefresh, IconResize, IconRobot, IconRotate, IconScissors, IconScreenshot, IconSearch, IconSend, IconSettings, IconShieldCheckFilled, IconShieldFilled, IconSquare, IconSquareCheck, IconStar, IconTag, IconTemplate, IconTerminal, IconThumbDown, IconThumbDownFilled, IconThumbUp, IconThumbUpFilled, IconTrash, IconTrashXFilled, IconTriangleInverted, IconTriangleSquareCircle, IconUpload, IconUser, IconUsersGroup, IconUserX, IconVariable, IconVariablePlus, IconVersions, IconWand, IconWaveSine, IconWebhook, IconWreckingBall, IconX, IconZoomCode } from '@tabler/icons-react';
+import { IconActivity, IconAdjustments, IconAdjustmentsAlt, IconAdjustmentsOff, IconAlertCircle, IconAlertTriangle, IconAlertTriangleFilled, IconAngle, IconApi, IconArchive, IconArrowAutofitDown, IconArrowCurveRight, IconArrowDown, IconArrowLeft, IconArrowNarrowLeft, IconArrowNarrowRight, IconArrowRight, IconArrowsRandom, IconArrowsSort, IconArrowUp, IconArrowUpRight, IconAssembly, IconBallpen, IconBallpenOff, IconBell, IconBolt, IconBottle, IconBox, IconBoxOff, IconBrandGithub, IconBrandOpenai, IconBrandPython, IconBulb, IconBulldozer, IconCamera, IconCategoryPlus, IconCell, IconChartBubble, IconChartCircles, IconChartDots3, IconChartLine, IconChartPie, IconCheck, IconChecks, IconChevronCompactLeft, IconChevronCompactRight, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCircle, IconCircleCheck, IconCircleCheckFilled, IconCircleMinus, IconCirclePlus, IconClick, IconClipboard, IconClipboardCheck, IconClipboardOff, IconClock, IconCode, IconCodePlus, IconColorPicker, IconColumns, IconColumns1, IconColumns2, IconColumns3, IconCopy, IconCrown, IconCrownOff, IconDatabase, IconDatabasePlus, IconDeviceFloppy, IconDots, IconDotsVertical, IconDownload, IconEdit, IconEngine, IconExclamationCircle, IconExclamationMark, IconExternalLink, IconEye, IconEyeCancel, IconEyeCheck, IconEyeOff, IconFile, IconFileDownload, IconFileImport, IconFileInfo, IconFilePencil, IconFiles, IconFileText, IconFileUpload, IconFilter, IconFilterOff, IconFishHook, IconFolderBolt, IconGitCommit, IconGripVertical, IconHandClick, IconHeading, IconHelp, IconHexagons, IconHierarchy, IconHierarchy3, IconHistory, IconHome, IconHourglass, IconHourglassEmpty, IconInfoCircle, IconInfoCircleFilled, IconInfoSquare, IconLayoutList, IconLayoutNavbarCollapse, IconLayoutSidebar, IconLetterGSmall, IconLink, IconList, IconLoader, IconLoader2, IconLockAccess, IconMap, IconMaximize, IconMessageCircle, IconMinus, IconMessageCircleSearch, IconMessages, IconMinimize, IconMoustache, IconNews, IconNotes, IconPencil, IconPlayCardStar, IconPlayerPlay, IconPlayerPlayFilled, IconPlus, IconPoint, IconPointerOff, IconPointerSearch, IconPointFilled, IconQuestionMark, IconRecycle, IconRefresh, IconRefreshAlert, IconResize, IconRobot, IconRotate, IconScissors, IconScreenshot, IconSearch, IconSend, IconSettings, IconShare, IconShieldCheckFilled, IconShieldFilled, IconSquare, IconSquareCheck, IconStar, IconTag, IconTemplate, IconTerminal, IconThumbDown, IconThumbDownFilled, IconThumbUp, IconThumbUpFilled, IconTrash, IconTrashXFilled, IconTriangleInverted, IconTriangleSquareCircle, IconUpload, IconUser, IconUsersGroup, IconUserX, IconVariable, IconVariablePlus, IconVersions, IconWand, IconWaveSine, IconWebhook, IconWreckingBall, IconX, IconZoomCode } from '@tabler/icons-react';
 
 export const MemoIconHome = memo(IconHome);
 export const MemoIconInfoCircle = memo(IconInfoCircle);
@@ -109,6 +109,7 @@ export const MemoIconDeviceFloppy = memo(IconDeviceFloppy);
 export const MemoIconNotes = memo(IconNotes);
 export const MemoIconFileDownload = memo(IconFileDownload);
 export const MemoIconTag = memo(IconTag);
+export const MemoIconCircleCheck = memo(IconCircleCheck);
 export const MemoIconCircleCheckFilled = memo(IconCircleCheckFilled);
 export const MemoIconCell = memo(IconCell);
 export const MemoIconArrowsSort = memo(IconArrowsSort);
@@ -173,6 +174,11 @@ export const MemoIconWreckingBall = memo(IconWreckingBall);
 export const MemoIconCamera = memo(IconCamera);
 export const MemoIconArrowAutofitDown = memo(IconArrowAutofitDown);
 export const MemoIconMessageCircleSearch = memo(IconMessageCircleSearch);
+export const MemoIconGitCommit = memo(IconGitCommit);
+export const MemoIconBrandGithub = memo(IconBrandGithub);
+export const MemoIconShare = memo(IconShare);
+export const MemoIconRecycle = memo(IconRecycle);
+export const MemoIconClock = memo(IconClock);
 export const MemoIconArrowNarrowLeft = memo(IconArrowNarrowLeft);
 export const MemoIconArrowNarrowRight = memo(IconArrowNarrowRight);
-export const MemoIconMinus = memo(IconMinus);
+export const MemoIconMinus = memo(IconMinus);

components/kern-table/CellComponents.tsx

@@ -87,10 +87,10 @@ function OrganizationUserCell({ userToOrganization, organizations, user, onClick
     )}</>
 }
 
-function DeleteUserCell({ user, deleteUser }) {
+function DeleteCell({ deleteEntity }) {
     const clickDelete = useCallback(() => {
-        if (deleteUser) deleteUser(user);
-    }, [deleteUser, user]);
+        if (deleteEntity) deleteEntity();
+    }, [deleteEntity]);
 
     return <KernButton
         text="Delete"
@@ -308,4 +308,12 @@ function EmailCell({ user }) {
     )
 }
 
-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 }
+function EditIntegrationCell({ onClick }) {
+    const clickEdit = useCallback(() => {
+        if (onClick) onClick();
+    }, [onClick]);
+
+    return <KernButton text="Edit" onClick={clickEdit} className="text-gray-700" />
+}
+
+export { OrganizationAndUsersCell, MaxRowsColsCharsCell, CommentsCell, ExportConsumptionAndDeleteCell, BadgeCell, OrganizationUserCell, DeleteCell, LevelCell, ArchiveReasonCell, ProjectNameTaskCell, CancelTaskCell, IconCell, ConfigCell, EditDeleteOrgButtonCell, ViewStackCell, AbortSessionButtonCell, FeedbackMessageCell, FeedbackMessageTextCell, JumpToConversationCell, RemoteVersionCell, ExternalLinkCell, ModelDateCell, FileSizeCell, StatusModelCell, DeleteModelCell, LabelCell, ViewCell, EvaluationRunStateCell, EvaluationRunDetailsCell, EtlApiTokenCell, EmailCell, EditIntegrationCell }

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, 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 { AbortSessionButtonCell, ArchiveReasonCell, BadgeCell, CancelTaskCell, CommentsCell, ConfigCell, DeleteModelCell, DeleteCell, EditDeleteOrgButtonCell, EmailCell, EtlApiTokenCell, EvaluationRunDetailsCell, EvaluationRunStateCell, ExportConsumptionAndDeleteCell, ExternalLinkCell, FeedbackMessageCell, FeedbackMessageTextCell, FileSizeCell, IconCell, JumpToConversationCell, LabelCell, LevelCell, MaxRowsColsCharsCell, ModelDateCell, OrganizationAndUsersCell, OrganizationUserCell, ProjectNameTaskCell, RemoteVersionCell, StatusModelCell, ViewCell, ViewStackCell, EditIntegrationCell } from "./CellComponents";
 import { Fragment, useMemo } from "react";
 import KernDropdown from "../KernDropdown";
 import { NotApplicableBadge } from "@/submodules/react-components/components/Badges";
@@ -104,8 +104,8 @@ function ComponentMapper(cell: any) {
                     return <BadgeCell {...cell} />;
                 case 'OrganizationUserCell':
                     return <OrganizationUserCell {...cell} />;
-                case 'DeleteUserCell':
-                    return <DeleteUserCell {...cell} />;
+                case 'DeleteCell':
+                    return <DeleteCell {...cell} />;
                 case 'LevelCell':
                     return <LevelCell {...cell} />;
                 case 'ArchiveReasonCell':
@@ -154,6 +154,8 @@ function ComponentMapper(cell: any) {
                     return <EtlApiTokenCell {...cell} />;
                 case 'EmailCell':
                     return <EmailCell {...cell} />;
+                case 'EditIntegrationCell':
+                    return <EditIntegrationCell {...cell} />;
             }
         case 'text':
             return <span>{cell.value ?? <NotApplicableBadge />}</span>