feat: add tooltip when user has no access permission

web/app/components/app/app-publisher/index.tsx

@@ -12,6 +12,7 @@ import type { ModelAndParameter } from '../configuration/debug/types'
 import Divider from '../../base/divider'
 import AccessControl from '../app-access-control'
 import Loading from '../../base/loading'
+import Tooltip from '../../base/tooltip'
 import SuggestedAction from './suggested-action'
 import PublishWithMultipleModel from './publish-with-multiple-model'
 import Button from '@/app/components/base/button'
@@ -251,10 +252,12 @@ const AppPublisher = ({
                   </div>
                 </div>
               </div>
-              <div className='p-4 pt-3 border-t-[0.5px] border-t-black/5'>
+              <div className='p-4 pt-3 border-t-[0.5px] border-t-black/5 flex flex-col gap-y-1'>
-                <SuggestedAction disabled={!publishedAt || !useCanAccessApp?.result} link={appURL} icon={<PlayCircle />}>{t('workflow.common.runApp')}</SuggestedAction>
+                <Tooltip triggerClassName='flex' disabled={useCanAccessApp?.result} popupContent={t('app.noAccessPermission')} asChild={false}>
+                  <SuggestedAction disabled={!publishedAt || !useCanAccessApp?.result} link={appURL} icon={<PlayCircle />}>{t('workflow.common.runApp')}</SuggestedAction>
+                </Tooltip>
                 {appDetail?.mode === 'workflow'
-                  ? (
+                  ? (<Tooltip triggerClassName='flex' disabled={useCanAccessApp?.result} popupContent={t('app.noAccessPermission')} asChild={false}>
                     <SuggestedAction
                       disabled={!publishedAt || !useCanAccessApp?.result}
                       link={`${appURL}${appURL.includes('?') ? '&' : '?'}mode=batch`}
@@ -262,8 +265,9 @@ const AppPublisher = ({
                     >
                       {t('workflow.common.batchRunApp')}
                     </SuggestedAction>
+                  </Tooltip>
                   )
-                  : (
+                  : (<Tooltip triggerClassName='flex' disabled={useCanAccessApp?.result} popupContent={t('app.noAccessPermission')} asChild={false}>
                     <SuggestedAction
                       onClick={() => {
                         setEmbeddingModalOpen(true)
@@ -274,33 +278,41 @@ const AppPublisher = ({
                     >
                       {t('workflow.common.embedIntoSite')}
                     </SuggestedAction>
+                  </Tooltip>
                   )}
-                <SuggestedAction
+                <Tooltip triggerClassName='flex' disabled={useCanAccessApp?.result} popupContent={t('app.noAccessPermission')} asChild={false}>
-                  onClick={() => {
+                  <SuggestedAction
-                    handleOpenInExplore()
+                    onClick={() => {
-                  }}
+                      handleOpenInExplore()
-                  disabled={!publishedAt || !useCanAccessApp?.result}
-                  icon={<RiPlanetLine className='w-4 h-4' />}
-                >
-                  {t('workflow.common.openInExplore')}
-                </SuggestedAction>
-                <SuggestedAction disabled={!publishedAt || !useCanAccessApp?.result} link='./develop' icon={<FileText className='w-4 h-4' />}>{t('workflow.common.accessAPIReference')}</SuggestedAction>
-                {appDetail?.mode === 'workflow' && (
-                  <WorkflowToolConfigureButton
-                    disabled={!publishedAt || !useCanAccessApp?.result}
-                    published={!!toolPublished}
-                    detailNeedUpdate={!!toolPublished && published}
-                    workflowAppId={appDetail?.id}
-                    icon={{
-                      content: (appDetail.icon_type === 'image' ? '🤖' : appDetail?.icon) || '🤖',
-                      background: (appDetail.icon_type === 'image' ? appDefaultIconBackground : appDetail?.icon_background) || appDefaultIconBackground,
                     }}
-                    name={appDetail?.name}
+                    disabled={!publishedAt || !useCanAccessApp?.result}
-                    description={appDetail?.description}
+                    icon={<RiPlanetLine className='w-4 h-4' />}
-                    inputs={inputs}
+                  >
-                    handlePublish={handlePublish}
+                    {t('workflow.common.openInExplore')}
-                    onRefreshData={onRefreshData}
+                  </SuggestedAction>
-                  />
+                </Tooltip>
+                <Tooltip triggerClassName='flex' disabled={useCanAccessApp?.result} popupContent={t('app.noAccessPermission')} asChild={false}>
+                  <SuggestedAction disabled={!publishedAt || !useCanAccessApp?.result} link='./develop' icon={<FileText className='w-4 h-4' />}>{t('workflow.common.accessAPIReference')}</SuggestedAction>
+                </Tooltip>
+
+                {appDetail?.mode === 'workflow' && (
+                  <Tooltip triggerClassName='flex' disabled={useCanAccessApp?.result} popupContent={t('app.noAccessPermission')} asChild={false}>
+                    <WorkflowToolConfigureButton
+                      disabled={!publishedAt || !useCanAccessApp?.result}
+                      published={!!toolPublished}
+                      detailNeedUpdate={!!toolPublished && published}
+                      workflowAppId={appDetail?.id}
+                      icon={{
+                        content: (appDetail.icon_type === 'image' ? '🤖' : appDetail?.icon) || '🤖',
+                        background: (appDetail.icon_type === 'image' ? appDefaultIconBackground : appDetail?.icon_background) || appDefaultIconBackground,
+                      }}
+                      name={appDetail?.name}
+                      description={appDetail?.description}
+                      inputs={inputs}
+                      handlePublish={handlePublish}
+                      onRefreshData={onRefreshData}
+                    />
+                  </Tooltip>
                 )}
               </div>
             </>}

web/app/components/app/app-publisher/suggested-action.tsx

@@ -14,7 +14,7 @@ const SuggestedAction = ({ icon, link, disabled, children, className, ...props }
     target='_blank'
     rel='noreferrer'
     className={classNames(
-      'flex justify-start items-center gap-2 h-[34px] px-2.5 bg-gray-100 rounded-lg transition-colors [&:not(:first-child)]:mt-1',
+      'flex-1 flex justify-start items-center gap-2 h-[34px] px-2.5 bg-gray-100 rounded-lg transition-colors [&:not(:first-child)]:mt-1',
       disabled ? 'shadow-xs opacity-30 cursor-not-allowed' : 'hover:bg-primary-50 hover:text-primary-600 cursor-pointer',
       className,
     )}

web/app/components/base/tooltip/index.tsx

@@ -90,6 +90,7 @@ const Tooltip: FC<TooltipProps> = ({
         }}
         onMouseLeave={() => triggerMethod === 'hover' && handleLeave(true)}
         asChild={asChild}
+        className={!asChild ? triggerClassName : ''}
       >
         {children || <div className={triggerClassName || 'p-[1px] w-3.5 h-3.5 shrink-0'}><RiQuestionLine className='text-text-quaternary hover:text-text-tertiary w-full h-full' /></div>}
       </PortalToFollowElemTrigger>

web/i18n/en-US/app-overview.ts

@@ -65,7 +65,7 @@ const translation = {
         more: {
           entry: 'Show more settings',
           copyright: 'Copyright',
-          copyrightTip: 'Display copyright information in the webapp',
+          copyrightTip: 'Display copyright information in the web app',
           copyrightTooltip: 'Please upgrade to Professional plan or above',
           copyRightPlaceholder: 'Enter the name of the author or organization',
           privacyPolicy: 'Privacy Policy',

web/i18n/en-US/app.ts

@@ -174,10 +174,10 @@ const translation = {
     },
   },
   showMyCreatedAppsOnly: 'Created by me',
-  accessControl: 'Webapp Access Control',
+  accessControl: 'web app Access Control',
   accessControlDialog: {
     title: 'Access Control',
-    description: 'Set webapp access permissions',
+    description: 'Set web app access permissions',
     accessLabel: 'Who has access',
     accessItems: {
       anyone: 'Anyone with the link',
@@ -202,6 +202,7 @@ const translation = {
     title: 'Who can access web app',
     notSet: 'Not set',
   },
+  noAccessPermission: 'No access permission',
 }
 
 export default translation

web/i18n/en-US/login.ts

@@ -105,7 +105,7 @@ const translation = {
   licenseInactive: 'License Inactive',
   licenseInactiveTip: 'The Dify Enterprise license for your workspace is inactive. Please contact your administrator to continue using Dify.',
   webapp: {
-    noLoginMethod: 'Authentication method not configured for webapp',
+    noLoginMethod: 'Authentication method not configured for web app',
     noLoginMethodTip: 'Please contact the system admin to add an authentication method.',
     disabled: 'Webapp authentication is disabled. Please contact the system admin to enable it. You can try to use the app directly.',
   },

web/i18n/it-IT/app-overview.ts

@@ -73,7 +73,7 @@ const translation = {
             'Inserisci il testo del disclaimer personalizzato',
           customDisclaimerTip:
             'Il testo del disclaimer personalizzato verrà visualizzato sul lato client, fornendo informazioni aggiuntive sull\'applicazione',
-          copyrightTip: 'Visualizzare le informazioni sul copyright nella webapp',
+          copyrightTip: 'Visualizzare le informazioni sul copyright nella web app',
           copyrightTooltip: 'Si prega di eseguire l\'upgrade al piano Professional o superiore',
         },
         sso: {

web/i18n/pt-BR/app-overview.ts

@@ -65,7 +65,7 @@ const translation = {
           customDisclaimer: 'Aviso Legal Personalizado',
           customDisclaimerPlaceholder: 'Insira o texto do aviso legal',
           customDisclaimerTip: 'O texto do aviso legal personalizado será exibido no lado do cliente, fornecendo informações adicionais sobre o aplicativo',
-          copyrightTip: 'Exibir informações de direitos autorais no webapp',
+          copyrightTip: 'Exibir informações de direitos autorais no web app',
           copyrightTooltip: 'Por favor, atualize para o plano Professional ou superior',
         },
         sso: {

web/i18n/zh-Hans/app-debug.ts

@@ -214,7 +214,7 @@ const translation = {
       modalTitle: '图片上传设置',
     },
     bar: {
-      empty: '开启功能增强 webapp 用户体验',
+      empty: '开启功能增强 web app 用户体验',
       enableText: '功能已开启',
       manage: '管理',
     },