feat: add UserIdentifier component

Author: RohitRaj011

src/Shared/Components/UserIdentifier/UserIdentifier.tsx

@@ -0,0 +1,72 @@
+import { getAlphabetIcon } from '@Common/Helper'
+import { Tooltip } from '@Common/Tooltip'
+import { API_TOKEN_PREFIX } from '@Shared/constants'
+import { useUserEmail } from '@Shared/Providers'
+
+import { Icon } from '../Icon'
+import { UserIdentifierProps } from './types'
+
+const UserIdentifierTooltip = ({
+    children,
+    tooltipContent,
+}: Pick<UserIdentifierProps, 'children' | 'tooltipContent'>) => (
+    <Tooltip alwaysShowTippyOnHover={!!tooltipContent} content={tooltipContent}>
+        <div className="flexbox dc__gap-8 dc__align-items-center">{children}</div>
+    </Tooltip>
+)
+
+export const UserIdentifier = ({
+    email,
+    children,
+    rootClassName,
+    tooltipContent,
+    isUserGroup = false,
+}: UserIdentifierProps) => {
+    // HOOKS
+    const { email: currentUserEmail } = useUserEmail()
+
+    // CONSTANTS
+    const isCurrentUser = email === currentUserEmail
+
+    return (
+        <div className={`flexbox dc__gap-8 ${rootClassName || ''}`}>
+            {email.startsWith(API_TOKEN_PREFIX) ? (
+                <UserIdentifierTooltip tooltipContent={tooltipContent}>
+                    <Icon name="ic-key" color="N700" size={20} />
+                    <div className="flexbox dc__gap-2">
+                        <Tooltip
+                            {...(tooltipContent
+                                ? { content: email, alwaysShowTippyOnHover: false }
+                                : { content: email })}
+                        >
+                            <span className="cn-9 fs-13 fw-4 lh-20 dc__truncate">
+                                {isCurrentUser ? 'You' : email.split(':')?.[1] || '-'}
+                            </span>
+                        </Tooltip>
+                        {children}
+                    </div>
+                </UserIdentifierTooltip>
+            ) : (
+                <UserIdentifierTooltip tooltipContent={tooltipContent}>
+                    {isUserGroup ? (
+                        <span className="flex p-1">
+                            <Icon name="ic-users" color="N700" size={18} />
+                        </span>
+                    ) : (
+                        getAlphabetIcon(email, 'dc__no-shrink m-0-imp')
+                    )}
+                    <div className="flexbox dc__gap-2">
+                        <Tooltip
+                            {...(tooltipContent
+                                ? { content: email, alwaysShowTippyOnHover: false }
+                                : { content: email })}
+                        >
+                            <span className="cn-9 fs-13 fw-4 lh-20 dc__truncate">{isCurrentUser ? 'You' : email}</span>
+                        </Tooltip>
+                        {children}
+                    </div>
+                </UserIdentifierTooltip>
+            )}
+        </div>
+    )
+}

src/Shared/Components/UserIdentifier/index.ts

@@ -0,0 +1,2 @@
+export * from './types'
+export * from './UserIdentifier'

src/Shared/Components/UserIdentifier/types.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react'
+
+export interface UserIdentifierProps {
+    email: string
+    children?: ReactNode
+    isUserGroup?: boolean
+    rootClassName?: string
+    /**
+     * @description - If given, would show tooltip on div containing avatar, email and children
+     */
+    tooltipContent?: string
+}

src/Shared/Components/index.ts

@@ -94,5 +94,6 @@ export * from './ThemeSwitcher'
 export * from './ToggleResolveScopedVariables'
 export * from './UnsavedChanges'
 export * from './UnsavedChangesDialog'
+export * from './UserIdentifier'
 export * from './VirtualizedList'
 export * from './WorkflowOptionsModal'