feat(FR-1355): improve BAIPropertyFilter display with value labels for better UX (#4114)

Resolves #4113 ([FR-1355](https://lablup.atlassian.net/browse/FR-1355))

## Summary
- Enhanced BAIPropertyFilter component to display user-friendly labels instead of raw values in filter tags
- Added valueLabel support to FilterInput interface for better UX
- Updated tag display logic to prioritize readable labels over raw values
- Added permission filter options to VFolderNodeListPage
- Maintains full backward compatibility

## Changes Made
- **BAIPropertyFilter.tsx**: Added valueLabel field and logic to display user-friendly labels
- **VFolderNodeListPage.tsx**: Added permission filter options with proper labels

## Example Improvement
- **Before**: "Type: group" (confusing raw value)
- **After**: "Type: Project" (user-friendly label)

## Test Plan
- [ ] Verify filter tags show readable labels when available
- [ ] Verify fallback to raw values when no label is provided
- [ ] Test both new and existing filter functionality
- [ ] Confirm backward compatibility with existing implementations

[FR-1355]: https://lablup.atlassian.net/browse/FR-1355?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: agatha197

packages/backend.ai-ui/src/components/BAIPropertyFilter.tsx

@@ -54,6 +54,7 @@ interface FilterInput {
   operator: string;
   value: string;
   label?: ReactNode;
+  valueLabel?: string;
   type: FilterProperty['type'];
   propertyLabel: string;
 }
@@ -215,21 +216,36 @@ const BAIPropertyFilter: React.FC<BAIPropertyFilterProps> = ({
     onChange: propOnChange,
   });
 
+  const generateValueLabel = (label: ReactNode) => {
+    // Generate a label for the filter value,
+    // if the label is a string or number, return its string representation.
+    // Otherwise, return undefined.
+    return _.isString(label) || _.isNumber(label)
+      ? _.toString(label)
+      : undefined;
+  };
+
   const filtersFromValue = useMemo(() => {
     if (value === undefined || value === '') return [];
     const filters = value.split('&').map((filter) => filter.trim());
     return filters.map((filter, index) => {
       const { property, operator, value } = parseFilterValue(filter);
+      const filterProperty = _.find(
+        filterProperties,
+        (f) => f.key === property,
+      );
+      const option = _.find(
+        filterProperty?.options,
+        (o) => o.value === trimFilterValue(value),
+      );
       return {
         key: index + value,
         property,
         operator,
         value,
-        propertyLabel:
-          _.find(filterProperties, (f) => f.key === property)?.propertyLabel ||
-          property,
-        type:
-          _.find(filterProperties, (f) => f.key === property)?.type || 'string',
+        valueLabel: generateValueLabel(option?.label),
+        propertyLabel: filterProperty?.propertyLabel || property,
+        type: filterProperty?.type || 'string',
       };
     });
   }, [value, filterProperties]);
@@ -297,12 +313,14 @@ const BAIPropertyFilter: React.FC<BAIPropertyFilterProps> = ({
       DEFAULT_OPERATOR_OF_TYPES[selectedProperty.type];
     const filterValue =
       operator === 'ilike' || operator === 'like' ? `%${value}%` : `${value}`;
+    const option = _.find(selectedProperty.options, (o) => o.value === value);
     push({
       property: selectedProperty.key,
       propertyLabel: selectedProperty.propertyLabel,
       operator,
       value: filterValue,
-      label: selectedProperty.options?.find((o) => o.value === value)?.label,
+      label: option?.label,
+      valueLabel: generateValueLabel(option?.label),
       type: selectedProperty.type,
     });
   };
@@ -383,7 +401,8 @@ const BAIPropertyFilter: React.FC<BAIPropertyFilterProps> = ({
               onClose={() => remove(item.key)}
               style={{ margin: 0 }}
             >
-              {item.propertyLabel}: {trimFilterValue(item.value)}
+              {item.propertyLabel}:{' '}
+              {item.valueLabel ?? trimFilterValue(item.value)}
             </Tag>
           ))}
           {filtersFromValue.length > 1 && (

react/src/pages/VFolderNodeListPage.tsx

@@ -565,6 +565,18 @@ const VFolderNodeListPage: React.FC<VFolderNodeListPageProps> = ({
                     key: 'permission',
                     propertyLabel: t('data.Permission'),
                     type: 'string',
+                    strictSelection: true,
+                    defaultOperator: '==',
+                    options: [
+                      {
+                        label: t('data.ReadOnly'),
+                        value: 'ro',
+                      },
+                      {
+                        label: t('data.ReadWrite'),
+                        value: 'rw',
+                      },
+                    ],
                   },
                 ]}
                 value={queryParams.filter || undefined}