v1.21.0 (#54)

* Adds disabled flag for switch with label

* Long emails table fix

---------

Co-authored-by: Lina <[email protected]>

Author: JWittmeyer

components/SwitchWithLabel.tsx

@@ -2,7 +2,7 @@ import { combineClassNames } from "@/submodules/javascript-functions/general";
 import { Switch } from "@headlessui/react";
 import { Tooltip } from "@nextui-org/react";
 import { useMemo } from "react";
-import { MemoIconAlertCircle, MemoIconAlertTriangle } from "./kern-icons/icons";
+import { MemoIconAlertTriangle } from "./kern-icons/icons";
 
 
 type Props = {
@@ -14,17 +14,17 @@ type Props = {
     colorInactive?: string;
     addClassesGroup?: string;
     tooltip?: string;
+    disabled?: boolean;
 }
 
 export default function SwitchWithLabel(props: Props) {
-
     const finalColorActive = props.colorActive || 'bg-green-600';
     const finalColorInactive = props.colorInactive || 'bg-gray-200';
     const finalColorLabel = props.colorLabel || 'text-gray-700';
 
     const tooltip = useMemo(() => props.tooltip ? <Tooltip content={props.tooltip} color="invert" placement="top"><MemoIconAlertTriangle className="w-6 h-6" /></Tooltip> : null, [props.tooltip])
 
-    return <Switch.Group as="div" className={combineClassNames("flex items-center justify-between", props.addClassesGroup)}>
+    return <Switch.Group as="div" className={combineClassNames("flex items-center justify-between disabled-within:opacity-50 disabled-within:cursor-not-allowed", props.addClassesGroup)}>
         <Switch.Description as="span" className={`font-medium ${finalColorLabel}`}>
             {props.label}
         </Switch.Description>
@@ -34,8 +34,9 @@ export default function SwitchWithLabel(props: Props) {
                 onChange={props.onChange}
                 className={combineClassNames(
                     props.checked ? finalColorActive : finalColorInactive,
-                    'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2'
+                    'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer disabled:cursor-not-allowed rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2'
                 )}
+                disabled={props.disabled}
             >
                 <span
                     aria-hidden="true"

components/kern-table/CellComponents.tsx

@@ -302,7 +302,9 @@ 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>
+                <span className="text-blue-700 truncate max-w-xs">{user.email}*</span></Tooltip> : <Tooltip content={user.email} color="invert" className="cursor-auto">
+                <span className="truncate max-w-xs">{user.email}</span>
+            </Tooltip>
             }
         </div>
     )