feat: update tags label

bucketeer-io · Jan 22, 2025 · 2b6eb24 · 2b6eb24
1 parent 9212ae9
commit 2b6eb24
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 9 deletions.
diff --git a/ui/dashboard/public/locales/en/form.json b/ui/dashboard/public/locales/en/form.json
@@ -55,5 +55,6 @@
   "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}}",
-  "member-tags-tooltip": "Tags can be used to group members making it easier when listing them on the list page"
+  "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"
 }
diff --git a/ui/dashboard/public/locales/ja/form.json b/ui/dashboard/public/locales/ja/form.json
@@ -55,5 +55,6 @@
   "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}}",
-  "member-tags-tooltip": "Tags can be used to group members making it easier when listing them on the list page"
+  "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"
 }
diff --git a/ui/dashboard/src/@types/tag.ts b/ui/dashboard/src/@types/tag.ts
@@ -1,4 +1,4 @@
-export type EntityType = 'UNKNOWN' | 'FEATURE_FLAG';
+export type EntityType = 'UNKNOWN' | 'FEATURE_FLAG' | 'ACCOUNT';
 
 export interface Tag {
   id: string;

diff --git a/ui/dashboard/src/pages/members/member-modal/add-member-modal/index.tsx b/ui/dashboard/src/pages/members/member-modal/add-member-modal/index.tsx
@@ -105,7 +105,9 @@ const AddMemberModal = ({ isOpen, onClose }: AddMemberModalProps) => {
       environmentId: currentEnvironment.id
     }
   });
-  const tagOptions = tagCollection?.tags || [];
+  const tagOptions = (tagCollection?.tags || []).filter(
+    i => i.entityType === 'ACCOUNT'
+  );
 
   const form = useForm({
     resolver: yupResolver(formSchema),
@@ -236,7 +238,7 @@ const AddMemberModal = ({ isOpen, onClose }: AddMemberModalProps) => {
                     {t('tags')}
                     <Tooltip
                       align="start"
-                      alignOffset={-44}
+                      alignOffset={-130}
                       trigger={
                         <div className="flex-center absolute top-0 -right-6">
                           <Icon icon={IconInfo} size={'sm'} color="gray-600" />
@@ -251,7 +253,7 @@ const AddMemberModal = ({ isOpen, onClose }: AddMemberModalProps) => {
                       disabled={isLoadingTags}
                       placeholder={t(`form:placeholder-tags`)}
                       options={tagOptions?.map(tag => ({
-                        label: tag.id,
+                        label: tag.name,
                         value: tag.id
                       }))}
                       onChange={value =>

diff --git a/ui/dashboard/src/pages/members/member-modal/edit-member-modal/index.tsx b/ui/dashboard/src/pages/members/member-modal/edit-member-modal/index.tsx
@@ -78,7 +78,9 @@ const EditMemberModal = ({ isOpen, onClose, member }: EditMemberModalProps) => {
       environmentId: currentEnvironment.id
     }
   });
-  const tagOptions = tagCollection?.tags || [];
+  const tagOptions = (tagCollection?.tags || []).filter(
+    i => i.entityType === 'ACCOUNT'
+  );
 
   const form = useForm({
     resolver: yupResolver(formSchema),
@@ -283,7 +285,7 @@ const EditMemberModal = ({ isOpen, onClose, member }: EditMemberModalProps) => {
                     {t('tags')}
                     <Tooltip
                       align="start"
-                      alignOffset={-44}
+                      alignOffset={-130}
                       trigger={
                         <div className="flex-center absolute top-0 -right-6">
                           <Icon icon={IconInfo} size={'sm'} color="gray-600" />
@@ -302,7 +304,7 @@ const EditMemberModal = ({ isOpen, onClose, member }: EditMemberModalProps) => {
                       disabled={isLoadingTags}
                       placeholder={t(`form:placeholder-tags`)}
                       options={tagOptions?.map(tag => ({
-                        label: tag.id,
+                        label: tag.name,
                         value: tag.id
                       }))}
                       onChange={value =>

diff --git a/ui/dashboard/src/pages/organization-details/members/collection-layout/data-collection.tsx b/ui/dashboard/src/pages/organization-details/members/collection-layout/data-collection.tsx
@@ -7,6 +7,7 @@ import { useFormatDateTime } from 'utils/date-time';
 import { joinName } from 'utils/name';
 import { AvatarImage } from 'components/avatar';
 import Icon from 'components/icon';
+import ExpandableTag from 'elements/expandable-tag';
 
 export const useColumns = ({
   onActions
@@ -67,6 +68,21 @@ export const useColumns = ({
         );
       }
     },
+    {
+      accessorKey: 'tags',
+      header: `${t('tags')}`,
+      size: 300,
+      cell: ({ row }) => {
+        const account = row.original;
+        return (
+          <ExpandableTag
+            tags={account.tags}
+            rowId={account.email}
+            className="!max-w-[250px] truncate"
+          />
+        );
+      }
+    },
     {
       accessorKey: 'environmentCount',
       header: `${t('environments')}`,