fix: make TagSelector always visible for accessibility and mobile support (#23515)

web/app/(commonLayout)/datasets/container.tsx

@@ -9,10 +9,10 @@ import { useQuery } from '@tanstack/react-query'
 
 // Components
 import ExternalAPIPanel from '../../components/datasets/external-api/external-api-panel'
-import Datasets from './Datasets'
+import Datasets from './datasets'
-import DatasetFooter from './DatasetFooter'
+import DatasetFooter from './dataset-footer'
 import ApiServer from '../../components/develop/ApiServer'
-import Doc from './Doc'
+import Doc from './doc'
 import TabSliderNew from '@/app/components/base/tab-slider-new'
 import TagManagementModal from '@/app/components/base/tag-management'
 import TagFilter from '@/app/components/base/tag-management/filter'

web/app/(commonLayout)/datasets/dataset-card.tsx

@@ -162,24 +162,19 @@ const DatasetCard = ({
         </div>
         <div
           className={cn(
-            'mb-2 max-h-[72px] grow px-[14px] text-xs leading-normal text-text-tertiary group-hover:line-clamp-2 group-hover:max-h-[36px]',
+            'mb-2 line-clamp-2 max-h-[36px] grow px-[14px] text-xs leading-normal text-text-tertiary',
-            tags.length ? 'line-clamp-2' : 'line-clamp-4',
             !dataset.embedding_available && 'opacity-50 hover:opacity-100',
           )}
           title={dataset.description}>
           {dataset.description}
         </div>
-        <div className={cn(
+        <div className='mt-4 flex h-[42px] shrink-0 items-center pb-[6px] pl-[14px] pr-[6px] pt-1'>
-          'mt-4 h-[42px] shrink-0 items-center pb-[6px] pl-[14px] pr-[6px] pt-1',
-          tags.length ? 'flex' : '!hidden group-hover:!flex',
-        )}>
           <div className={cn('flex w-0 grow items-center gap-1', !dataset.embedding_available && 'opacity-50 hover:opacity-100')} onClick={(e) => {
             e.stopPropagation()
             e.preventDefault()
           }}>
             <div className={cn(
-              'mr-[41px] w-full grow group-hover:!mr-0 group-hover:!block',
+              'mr-[41px] w-full grow group-hover:!mr-0',
-              tags.length ? '!block' : '!hidden',
             )}>
               <TagSelector
                 position='bl'

web/app/(commonLayout)/datasets/datasets.tsx

@@ -3,8 +3,8 @@
 import { useCallback, useEffect, useRef } from 'react'
 import useSWRInfinite from 'swr/infinite'
 import { debounce } from 'lodash-es'
-import NewDatasetCard from './NewDatasetCard'
+import NewDatasetCard from './new-dataset-card'
-import DatasetCard from './DatasetCard'
+import DatasetCard from './dataset-card'
 import type { DataSetListResponse, FetchDatasetsParams } from '@/models/datasets'
 import { fetchDatasets } from '@/service/datasets'
 import { useAppContext } from '@/context/app-context'

web/app/(commonLayout)/datasets/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 import { useTranslation } from 'react-i18next'
-import Container from './Container'
+import Container from './container'
 import useDocumentTitle from '@/hooks/use-document-title'
 
 const AppList = () => {

web/app/components/apps/app-card.tsx

@@ -370,20 +370,14 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
             {app.description}
           </div>
         </div>
-        <div className={cn(
+        <div className='absolute bottom-1 left-0 right-0 flex h-[42px] shrink-0 items-center pb-[6px] pl-[14px] pr-[6px] pt-1'>
-          'absolute bottom-1 left-0 right-0 h-[42px] shrink-0 items-center pb-[6px] pl-[14px] pr-[6px] pt-1',
-          tags.length ? 'flex' : '!hidden group-hover:!flex',
-        )}>
           {isCurrentWorkspaceEditor && (
             <>
               <div className={cn('flex w-0 grow items-center gap-1')} onClick={(e) => {
                 e.stopPropagation()
                 e.preventDefault()
               }}>
-                <div className={cn(
+                <div className='mr-[41px] w-full grow group-hover:!mr-0'>
-                  'mr-[41px] w-full grow group-hover:!mr-0 group-hover:!block',
-                  tags.length ? '!block' : '!hidden',
-                )}>
                   <TagSelector
                     position='bl'
                     type='app'
@@ -395,7 +389,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
                   />
                 </div>
               </div>
-              <div className='mx-1 !hidden h-[14px] w-[1px] shrink-0 group-hover:!flex' />
+              <div className='mx-1 !hidden h-[14px] w-[1px] shrink-0 bg-divider-regular group-hover:!flex' />
               <div className='!hidden shrink-0 group-hover:!flex'>
                 <CustomPopover
                   htmlContent={<Operations />}

web/app/components/base/tag-management/selector.tsx

@@ -238,12 +238,16 @@ const TagSelector: FC<TagSelectorProps> = ({
   }, [selectedTags, tagList])
 
   const Trigger = () => {
+    const hasNoTags = !triggerContent
     return (
       <div className={cn(
         'group/tip relative flex w-full cursor-pointer items-center gap-1 rounded-md px-2 py-[7px] hover:bg-state-base-hover',
       )}>
         <Tag01 className='h-3 w-3 shrink-0 text-components-input-text-placeholder' />
-        <div className='system-sm-regular grow truncate  text-start text-components-input-text-placeholder'>
+        <div className={cn(
+          'system-sm-regular grow truncate text-start',
+          hasNoTags ? 'italic text-components-input-text-placeholder' : 'font-medium text-components-input-text-placeholder',
+        )}>
           {!triggerContent ? t('common.tag.addTag') : triggerContent}
         </div>
       </div>

web/service/access-control.ts

@@ -70,7 +70,7 @@ export const useUpdateAccessMode = () => {
   })
 }
 
-export const useGetUserCanAccessApp = ({ appId, isInstalledApp = true }: { appId?: string; isInstalledApp?: boolean; }) => {
+export const useGetUserCanAccessApp = ({ appId, isInstalledApp = true, enabled }: { appId?: string; isInstalledApp?: boolean; enabled?: boolean }) => {
   const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
   return useQuery({
     queryKey: [NAME_SPACE, 'user-can-access-app', appId],
@@ -80,7 +80,7 @@ export const useGetUserCanAccessApp = ({ appId, isInstalledApp = true }: { appId
       else
         return { result: true }
     },
-    enabled: !!appId,
+    enabled: enabled !== undefined ? enabled : !!appId,
     staleTime: 0,
     gcTime: 0,
   })