chore: refactor tag to show source

Author: kevinkim-ogp

packages/frontend/src/components/AttachmentSuggestions/components/Checkbox.tsx

@@ -18,6 +18,7 @@ export interface CheckboxVariable extends Variable {
   updatedAt?: string | number
   size?: number
   uploaded?: boolean
+  source?: string
 }
 
 interface CheckboxProps {
@@ -31,7 +32,22 @@ interface CheckboxProps {
 
 function Checkbox(props: CheckboxProps) {
   const { variable, isChecked, onClick, allowDelete, onDelete } = props
-  const { displayedValue, size, value, updatedAt = null, uploaded } = variable
+  const {
+    displayedValue,
+    label,
+    size,
+    value,
+    updatedAt = null,
+    uploaded,
+  } = variable
+
+  const getInfoText = (info?: number | string | null) => {
+    return (
+      <Text textStyle="body-2" noOfLines={1} color="base.content.medium">
+        {info ?? ''}
+      </Text>
+    )
+  }
 
   // Note: removes the outline around the checkbox that is last focused
   const handleBlur = (e: ChangeEvent<HTMLInputElement>) => e.target.blur()
@@ -52,20 +68,20 @@ function Checkbox(props: CheckboxProps) {
     >
       <Flex alignItems="center" justify="space-between" maxW="100%">
         <Flex direction="column">
-          <TouchableTooltip label={displayedValue}>
-            <Text noOfLines={1}>{displayedValue}</Text>
+          <TouchableTooltip label={uploaded ? displayedValue : label}>
+            <Text noOfLines={1}>{uploaded ? displayedValue : label}</Text>
           </TouchableTooltip>
-          {uploaded && (
-            <Flex direction="row" alignItems="center">
-              <Text textStyle="body-2" noOfLines={1}>
-                {size ? formatFileSizeToStr(size) : ''}
-              </Text>
-              <Icon as={BsDot} />
-              <Text textStyle="body-2" noOfLines={1}>
-                {toPrettyDateString(updatedAt, 'iso')}
-              </Text>
-            </Flex>
-          )}
+          <Flex direction="row" alignItems="center">
+            {uploaded ? (
+              <Flex direction="row" alignItems="center">
+                {getInfoText(size ? formatFileSizeToStr(size) : '')}
+                <Icon as={BsDot} />
+                {getInfoText(toPrettyDateString(updatedAt, 'iso'))}
+              </Flex>
+            ) : (
+              getInfoText(displayedValue)
+            )}
+          </Flex>
         </Flex>
         {allowDelete && (
           <IconButton

packages/frontend/src/components/AttachmentSuggestions/components/Suggestions.tsx

@@ -92,18 +92,23 @@ export default function Suggestions(props: SuggestionsProps) {
                   />
                 )}
                 <Box data-test="attachment-group" maxH={64} overflowY="auto">
-                  {output?.map((variable) => (
-                    <Checkbox
-                      key={variable.name}
-                      variable={variable}
-                      allowDelete={addNew}
-                      isChecked={selectedNames.includes(variable.name)}
-                      onClick={(variable, checked) => {
-                        onSuggestionClick(variable, checked, onChange, values)
-                      }}
-                      onDelete={onDelete}
-                    />
-                  ))}
+                  {output?.map((variable) => {
+                    return (
+                      <Checkbox
+                        key={variable.name}
+                        variable={{
+                          ...variable,
+                          source: option.name,
+                        }}
+                        allowDelete={addNew}
+                        isChecked={selectedNames.includes(variable.name)}
+                        onClick={(variable, checked) => {
+                          onSuggestionClick(variable, checked, onChange, values)
+                        }}
+                        onDelete={onDelete}
+                      />
+                    )
+                  })}
                 </Box>
               </Collapse>
             )

packages/frontend/src/components/AttachmentSuggestions/components/TagList.tsx

@@ -1,4 +1,4 @@
-import { Tag, TagCloseButton, TagLabel } from '@chakra-ui/react'
+import { Tag, TagCloseButton, TagLabel, Tooltip } from '@chakra-ui/react'
 
 interface TagsProps {
   selectedOptions: any[]
@@ -8,17 +8,27 @@ interface TagsProps {
 function TagList(props: TagsProps) {
   const { onClick, selectedOptions } = props
 
+  const getLabel = (option: any, tooltip?: boolean) => {
+    const { displayedValue, label, source, uploaded } = option
+
+    if (tooltip) {
+      return uploaded ? displayedValue : label
+    }
+
+    return uploaded ? `[Uploaded] ${displayedValue}` : `[${source}] ${label}`
+  }
+
   if (selectedOptions.length === 0) {
     return <></>
   }
 
   return (
     <>
       {selectedOptions?.map((option) => {
-        const { displayedValue, value } = option
+        const { label, value } = option
         return (
           <Tag
-            key={value as string}
+            key={`${label}-${value}`}
             size="md"
             colorScheme="primary"
             borderRadius="md"
@@ -27,14 +37,11 @@ function TagList(props: TagsProps) {
             maxW="200px"
             flex="0 1 auto"
           >
-            <TagLabel
-              isTruncated
-              flex="1 1 auto"
-              minW="0"
-              title={displayedValue}
-            >
-              {displayedValue}
-            </TagLabel>
+            <Tooltip hasArrow label={getLabel(option, true)}>
+              <TagLabel isTruncated flex="1 1 auto" minW="0">
+                {getLabel(option)}
+              </TagLabel>
+            </Tooltip>
             <TagCloseButton onClick={() => onClick(option)} />
           </Tag>
         )

packages/frontend/src/components/AttachmentSuggestions/index.tsx

@@ -100,7 +100,11 @@ function AttachmentSuggestions(props: AttachmentSuggestionsProps) {
         const variableType = variable.type ?? 'text'
         return variableTypes?.includes(variableType) ?? false
       },
-    )
+    ).map((v) => ({
+      ...v,
+      // NOTE: add the source to display in the tag
+      output: v.output.map((o) => ({ ...o, source: v.name })),
+    }))
 
     const selectedFromVars = filteredVars.reduce(
       (acc: CheckboxVariable[], v) => {
@@ -193,7 +197,6 @@ function AttachmentSuggestions(props: AttachmentSuggestionsProps) {
         field: { onChange, value: values },
         fieldState: { error },
       }) => {
-        console.log('error', error)
         return (
           <FormControl isInvalid={!!error} ref={wrapperRef}>
             {label && (