feat(ui/dashboard): improvement tags and table cell view with tooltip

ui/dashboard/public/locales/en/common.json

@@ -55,7 +55,7 @@
   "organization-subtitle": "You can see all your clients data",
   "setting-subtitle": "Manage settings about the current organization",
   "project-subtitle": "Manage all projects for this environment.",
-  "member-subtitle": "Manage all members for this environment.",
+  "member-subtitle": "Manage all members in your organization. Select a member to manage the role settings and tags, or invite a new one.",
   "organization-settings": "Organization settings",
   "navigation": {
     "my-projects": "My projects",

ui/dashboard/public/locales/en/form.json

@@ -54,5 +54,7 @@
   "update-user-segment": "Updating this field will replace the current list with the new one.",
   "update-user-segment-warning": "<p>The user ID list can't be updated because {{count}} flag is using it. Remove the segment from the flag before updating it.</p>",
   "placeholder-enter-user-ids": "Enter IDs separated by commas (E.g., userId1, userId2, userId3,...)",
-  "accept-file-types": "{{type}}"
+  "accept-file-types": "{{type}}",
+  "member-tags-tooltip": "Tags can be used to group members making it easier when listing them on the list page",
+  "feature-flag-tags": "Feature Flag Tags"
 }

ui/dashboard/public/locales/ja/common.json

@@ -55,7 +55,7 @@
   "organization-subtitle": "You can see all your clients data",
   "setting-subtitle": "Manage settings about the current organization",
   "project-subtitle": "Manage all projects for this environment.",
-  "member-subtitle": "Manage all members for this environment.",
+  "member-subtitle": "Manage all members in your organization. Select a member to manage the role settings and tags, or invite a new one.",
   "organization-settings": "Organization settings",
   "navigation": {
     "my-projects": "My projects",

ui/dashboard/public/locales/ja/form.json

@@ -54,5 +54,7 @@
   "update-user-segment": "Updating this field will replace the current list with the new one.",
   "update-user-segment-warning": "<p>The user ID list can't be updated because {{count}} flag is using it. Remove the segment from the flag before updating it.</p>",
   "placeholder-enter-user-ids": "Enter IDs separated by commas (E.g., userId1, userId2, userId3,...)",
-  "accept-file-types": "{{type}}"
+  "accept-file-types": "{{type}}",
+  "member-tags-tooltip": "Tags can be used to group members making it easier when listing them on the list page",
+  "feature-flag-tags": "Feature Flag Tags"
 }

ui/dashboard/src/@api/account/account-creator.ts

@@ -10,6 +10,7 @@ export interface AccountCreatorCommand {
   email: string;
   organizationRole: OrganizationRole;
   environmentRoles: EnvironmentRoleItem[];
+  tags: string[];
 }
 
 export interface AccountCreatorParams {

ui/dashboard/src/@api/account/account-updater.ts

@@ -39,6 +39,9 @@ export interface AccountUpdaterParams {
     avatarImage: string;
     avatarFileType: string;
   };
+  changeTagsCommand?: {
+    tags: string[];
+  };
 }
 
 export const accountUpdater = async (params?: AccountUpdaterParams) => {

ui/dashboard/src/@icons/index.tsx

@@ -1,5 +1,7 @@
+import IconAngleDown from './customized-icons/angle-down.svg?react';
 import IconBackspace from './customized-icons/backspace.svg?react';
 import IconChecked from './customized-icons/checked.svg?react';
+import IconChevronDown from './customized-icons/chevron-down.svg?react';
 import IconChevronRight from './customized-icons/chevron-right.svg?react';
 import IconClose from './customized-icons/close.svg?react';
 import IconCopy from './customized-icons/copy.svg?react';
@@ -77,6 +79,8 @@ export {
   IconDisable,
   IconCopy,
   IconUpload,
+  IconChevronDown,
+  IconAngleDown,
   // Special icons
   IconGoal,
   IconGoogle,

ui/dashboard/src/@types/account.ts

@@ -31,6 +31,7 @@ export interface Account {
       defaultFilter: boolean;
     }
   ];
+  tags: string[];
 }
 
 export interface AccountCollection {

ui/dashboard/src/@types/collection.ts

@@ -21,7 +21,8 @@ export type OrderBy =
   | 'CREATOR_EMAIL'
   | 'ENVIRONMENT'
   | 'CONNECTIONS'
-  | 'USERS';
+  | 'USERS'
+  | 'TAGS';
 
 export type OrderDirection = 'ASC' | 'DESC';
 

ui/dashboard/src/components/tooltip/index.tsx

@@ -3,9 +3,13 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { cn } from 'utils/style';
 
 export type TooltipProps = {
+  align?: 'start' | 'center' | 'end';
+  delayDuration?: number;
+  hidden?: boolean;
   content?: string;
   trigger: ReactNode;
   className?: string;
+  alignOffset?: number;
 };
 
 const TooltipProvider = TooltipPrimitive.Provider;
@@ -25,7 +29,7 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        'data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade select-none rounded-md px-3 py-1.5 text-para-medium will-change-[transform,opacity] bg-additional-gray-150 text-white',
+        'data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade select-none rounded px-3 py-1.5 text-para-medium will-change-[transform,opacity] bg-gray-700 text-white',
         className
       )}
       {...props}
@@ -35,17 +39,35 @@ const TooltipContent = React.forwardRef<
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 const Tooltip = forwardRef(
-  ({ content, trigger, className }: TooltipProps, ref: Ref<HTMLDivElement>) => {
+  (
+    {
+      delayDuration = 700,
+      align = 'center',
+      hidden,
+      content,
+      trigger,
+      className,
+      alignOffset = 0
+    }: TooltipProps,
+    ref: Ref<HTMLDivElement>
+  ) => {
     return (
-      <TooltipProvider>
+      <TooltipProvider delayDuration={delayDuration}>
         <TooltipRoot>
           <TooltipTrigger type="button" asChild>
             {trigger}
           </TooltipTrigger>
           {content && (
-            <TooltipContent ref={ref} className={className} sideOffset={5}>
+            <TooltipContent
+              hidden={hidden}
+              ref={ref}
+              className={className}
+              sideOffset={5}
+              alignOffset={alignOffset}
+              align={align}
+            >
               {content}
-              <TooltipArrow className="fill-additional-gray-150" />
+              <TooltipArrow className="fill-gray-700" />
             </TooltipContent>
           )}
         </TooltipRoot>

ui/dashboard/src/constants/collection.ts

@@ -23,5 +23,6 @@ export const sortingListFields: SortingListFields = {
   lastSeen: 'LAST_SEEN',
   environment: 'ENVIRONMENT',
   connections: 'CONNECTIONS',
-  users: 'USERS'
+  users: 'USERS',
+  tags: 'TAGS'
 };

ui/dashboard/src/elements/data-table/index.tsx

@@ -109,7 +109,10 @@ export const DataTable = <TData, TValue>({
               {row.getVisibleCells().map(cell => (
                 <Table.Cell
                   key={cell.id}
-                  style={{ width: cell.column.columnDef.size }}
+                  style={{
+                    width: cell.column.columnDef.size,
+                    maxWidth: cell.column.columnDef.maxSize
+                  }}
                 >
                   {flexRender(cell.column.columnDef.cell, cell.getContext())}
                 </Table.Cell>

ui/dashboard/src/elements/expandable-tag/index.tsx

@@ -0,0 +1,94 @@
+import { useCallback, useMemo, useState } from 'react';
+import { cn } from 'utils/style';
+import { IconChevronDown } from '@icons';
+import Icon from 'components/icon';
+import TruncationWithTooltip from 'elements/truncation-with-tooltip';
+
+export const Tag = ({
+  tagId,
+  value,
+  className
+}: {
+  tagId?: string;
+  value: string;
+  className?: string;
+}) => (
+  <TruncationWithTooltip
+    elementId={tagId || ''}
+    content={value}
+    maxSize={250}
+    className="!w-fit"
+  >
+    <div
+      id={tagId}
+      className={cn(
+        'px-2 py-1.5 bg-primary-100/70 text-primary-500 typo-para-small !w-fit leading-[14px] rounded whitespace-nowrap',
+        className
+      )}
+    >
+      {value}
+    </div>
+  </TruncationWithTooltip>
+);
+
+const ExpandableTag = ({
+  rowId,
+  tags,
+  className
+}: {
+  rowId: string;
+  tags: string[];
+  className?: string;
+}) => {
+  const [expandedTags, setExpandedTags] = useState<string[]>([]);
+
+  const isExpanded = useMemo(
+    () => expandedTags.includes(rowId),
+    [expandedTags, rowId]
+  );
+
+  const handleExpandTag = useCallback(() => {
+    setExpandedTags(
+      isExpanded
+        ? expandedTags.filter(item => item !== rowId)
+        : [...expandedTags, rowId]
+    );
+  }, [expandedTags, rowId, isExpanded]);
+
+  return (
+    <div
+      className={cn('flex items-center w-full gap-x-2', {
+        'items-start': isExpanded
+      })}
+    >
+      <div className="flex w-fit items-center flex-wrap gap-2">
+        {(isExpanded ? tags : tags.slice(0, 3))?.map((tag, index) => (
+          <Tag
+            tagId={`${tag}-${index}`}
+            key={index}
+            value={tag}
+            className={className}
+          />
+        ))}
+        {tags.length > 3 && !isExpanded && (
+          <Tag value={`+${tags.length - 3}`} />
+        )}
+      </div>
+      {tags.length > 3 && (
+        <div
+          className={cn('flex-center cursor-pointer hover:bg-gray-200 rounded')}
+          onClick={handleExpandTag}
+        >
+          <Icon
+            icon={IconChevronDown}
+            size={'sm'}
+            className={cn('flex-center rotate-0', {
+              'rotate-180': isExpanded
+            })}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+export default ExpandableTag;

ui/dashboard/src/elements/tag/index.tsx

@@ -0,0 +1,79 @@
+import { cn } from 'utils/style';
+import { IconChevronDown } from '@icons';
+import Icon from 'components/icon';
+import TruncationWithTooltip from 'elements/truncation-with-tooltip';
+
+export const Tag = ({
+  tagId,
+  value,
+  className
+}: {
+  tagId?: string;
+  value: string;
+  className?: string;
+}) => (
+  <TruncationWithTooltip
+    elementId={tagId || ''}
+    content={value}
+    maxSize={250}
+    className="!w-fit"
+  >
+    <div
+      id={tagId}
+      className={cn(
+        'px-2 py-1.5 bg-primary-100/70 text-primary-500 typo-para-small !w-fit leading-[14px] rounded whitespace-nowrap',
+        className
+      )}
+    >
+      {value}
+    </div>
+  </TruncationWithTooltip>
+);
+
+export const renderTag = ({
+  tags,
+  isExpanded,
+  className,
+  onExpand
+}: {
+  tags: string[];
+  isExpanded: boolean;
+  className?: string;
+  onExpand: () => void;
+}) => {
+  return (
+    <div
+      className={cn('flex items-center w-full gap-x-2', {
+        'items-start': isExpanded
+      })}
+    >
+      <div className="flex w-fit items-center flex-wrap gap-2">
+        {(isExpanded ? tags : tags.slice(0, 3))?.map((tag, index) => (
+          <Tag
+            tagId={`${tag}-${index}`}
+            key={index}
+            value={tag}
+            className={className}
+          />
+        ))}
+        {tags.length > 3 && !isExpanded && (
+          <Tag value={`+${tags.length - 3}`} />
+        )}
+      </div>
+      {tags.length > 3 && (
+        <div
+          className={cn('flex-center cursor-pointer hover:bg-gray-200 rounded')}
+          onClick={onExpand}
+        >
+          <Icon
+            icon={IconChevronDown}
+            size={'sm'}
+            className={cn('flex-center rotate-0', {
+              'rotate-180': isExpanded
+            })}
+          />
+        </div>
+      )}
+    </div>
+  );
+};