Chore: frontend infrastructure upgrade (#16420)
Co-authored-by: NFish <douxc512@gmail.com> Co-authored-by: zxhlyh <jasonapring2015@outlook.com> Co-authored-by: twwu <twwu@dify.ai> Co-authored-by: jZonG <jzongcode@gmail.com>
This commit is contained in:
Joel
@@ -29,10 +29,10 @@ const DebugInfo: FC = () => {
|
||||
popupContent={
|
||||
<>
|
||||
<div className='flex items-center gap-1 self-stretch'>
|
||||
<span className='flex flex-col justify-center items-start grow shrink-0 basis-0 text-text-secondary system-sm-semibold'>{t(`${i18nPrefix}.title`)}</span>
|
||||
<a href='https://docs.dify.ai/plugins/quick-start/develop-plugins/debug-plugin' target='_blank' className='flex items-center gap-0.5 text-text-accent-light-mode-only cursor-pointer'>
|
||||
<span className='system-sm-semibold flex shrink-0 grow basis-0 flex-col items-start justify-center text-text-secondary'>{t(`${i18nPrefix}.title`)}</span>
|
||||
<a href='https://docs.dify.ai/plugins/quick-start/develop-plugins/debug-plugin' target='_blank' className='flex cursor-pointer items-center gap-0.5 text-text-accent-light-mode-only'>
|
||||
<span className='system-xs-medium'>{t(`${i18nPrefix}.viewDocs`)}</span>
|
||||
<RiArrowRightUpLine className='w-3 h-3' />
|
||||
<RiArrowRightUpLine className='h-3 w-3' />
|
||||
</a>
|
||||
</div>
|
||||
<div className='space-y-0.5'>
|
||||
@@ -53,8 +53,8 @@ const DebugInfo: FC = () => {
|
||||
asChild={false}
|
||||
position='bottom'
|
||||
>
|
||||
<Button className='w-full h-full p-2 text-components-button-secondary-text'>
|
||||
<RiBugLine className='w-4 h-4' />
|
||||
<Button className='h-full w-full p-2 text-components-button-secondary-text'>
|
||||
<RiBugLine className='h-4 w-4' />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)
|
||||
|
||||
@@ -38,29 +38,29 @@ const Empty = () => {
|
||||
}, [pluginList?.plugins.length, t, filters.categories.length, filters.tags.length, filters.searchQuery])
|
||||
|
||||
return (
|
||||
<div className='grow w-full relative z-0'>
|
||||
<div className='relative z-0 w-full grow'>
|
||||
{/* skeleton */}
|
||||
<div className='h-full w-full px-12 absolute top-0 grid grid-cols-2 gap-2 overflow-hidden z-10'>
|
||||
<div className='absolute top-0 z-10 grid h-full w-full grid-cols-2 gap-2 overflow-hidden px-12'>
|
||||
{Array.from({ length: 20 }).fill(0).map((_, i) => (
|
||||
<div key={i} className='h-[100px] bg-components-card-bg rounded-xl' />
|
||||
<div key={i} className='h-[100px] rounded-xl bg-components-card-bg' />
|
||||
))}
|
||||
</div>
|
||||
{/* mask */}
|
||||
<div className='h-full w-full absolute z-20 bg-gradient-to-b from-background-gradient-mask-transparent to-white' />
|
||||
<div className='flex items-center justify-center h-full relative z-30'>
|
||||
<div className='absolute z-20 h-full w-full bg-gradient-to-b from-background-gradient-mask-transparent to-white' />
|
||||
<div className='relative z-30 flex h-full items-center justify-center'>
|
||||
<div className='flex flex-col items-center gap-y-3'>
|
||||
<div className='relative -z-10 flex items-center justify-center w-[52px] h-[52px] rounded-xl
|
||||
bg-components-card-bg border-[1px] border-dashed border-divider-deep shadow-xl shadow-shadow-shadow-5'>
|
||||
<Group className='text-text-tertiary w-5 h-5' />
|
||||
<div className='relative -z-10 flex h-[52px] w-[52px] items-center justify-center rounded-xl
|
||||
border-[1px] border-dashed border-divider-deep bg-components-card-bg shadow-xl shadow-shadow-shadow-5'>
|
||||
<Group className='h-5 w-5 text-text-tertiary' />
|
||||
<Line className='absolute -right-[1px] top-1/2 -translate-y-1/2' />
|
||||
<Line className='absolute -left-[1px] top-1/2 -translate-y-1/2' />
|
||||
<Line className='absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90' />
|
||||
<Line className='absolute top-full left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90' />
|
||||
<Line className='absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 rotate-90' />
|
||||
<Line className='absolute left-1/2 top-full -translate-x-1/2 -translate-y-1/2 rotate-90' />
|
||||
</div>
|
||||
<div className='text-text-tertiary text-sm font-normal'>
|
||||
<div className='text-sm font-normal text-text-tertiary'>
|
||||
{text}
|
||||
</div>
|
||||
<div className='flex flex-col w-[240px]'>
|
||||
<div className='flex w-[240px] flex-col'>
|
||||
<input
|
||||
type='file'
|
||||
ref={fileInputRef}
|
||||
@@ -68,7 +68,7 @@ const Empty = () => {
|
||||
onChange={handleFileChange}
|
||||
accept={SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS}
|
||||
/>
|
||||
<div className='w-full flex flex-col gap-y-1'>
|
||||
<div className='flex w-full flex-col gap-y-1'>
|
||||
{[
|
||||
...(
|
||||
(enable_marketplace && true)
|
||||
@@ -80,8 +80,8 @@ const Empty = () => {
|
||||
].map(({ icon: Icon, text, action }) => (
|
||||
<div
|
||||
key={action}
|
||||
className='flex items-center px-3 py-2 gap-x-1 rounded-lg bg-components-button-secondary-bg
|
||||
hover:bg-state-base-hover cursor-pointer border-[0.5px] shadow-shadow-shadow-3 shadow-xs'
|
||||
className='flex cursor-pointer items-center gap-x-1 rounded-lg border-[0.5px] bg-components-button-secondary-bg
|
||||
px-3 py-2 shadow-xs shadow-shadow-shadow-3 hover:bg-state-base-hover'
|
||||
onClick={() => {
|
||||
if (action === 'local')
|
||||
fileInputRef.current?.click()
|
||||
@@ -91,8 +91,8 @@ const Empty = () => {
|
||||
setSelectedAction(action)
|
||||
}}
|
||||
>
|
||||
<Icon className="w-4 h-4 text-text-tertiary" />
|
||||
<span className='text-text-secondary system-md-regular'>{text}</span>
|
||||
<Icon className="h-4 w-4 text-text-tertiary" />
|
||||
<span className='system-md-regular text-text-secondary'>{text}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -48,12 +48,12 @@ const CategoriesFilter = ({
|
||||
>
|
||||
<PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
|
||||
<div className={cn(
|
||||
'flex items-center px-2 py-1 h-8 text-text-tertiary rounded-lg bg-components-input-bg-normal hover:bg-state-base-hover-alt cursor-pointer',
|
||||
'flex h-8 cursor-pointer items-center rounded-lg bg-components-input-bg-normal px-2 py-1 text-text-tertiary hover:bg-state-base-hover-alt',
|
||||
selectedTagsLength && 'text-text-secondary',
|
||||
open && 'bg-state-base-hover',
|
||||
)}>
|
||||
<div className={cn(
|
||||
'flex items-center p-1 system-sm-medium',
|
||||
'system-sm-medium flex items-center p-1',
|
||||
)}>
|
||||
{
|
||||
!selectedTagsLength && t('plugin.allCategories')
|
||||
@@ -63,7 +63,7 @@ const CategoriesFilter = ({
|
||||
}
|
||||
{
|
||||
selectedTagsLength > 2 && (
|
||||
<div className='ml-1 system-xs-medium text-text-tertiary'>
|
||||
<div className='system-xs-medium ml-1 text-text-tertiary'>
|
||||
+{selectedTagsLength - 2}
|
||||
</div>
|
||||
)
|
||||
@@ -72,7 +72,7 @@ const CategoriesFilter = ({
|
||||
{
|
||||
!!selectedTagsLength && (
|
||||
<RiCloseCircleFill
|
||||
className='w-4 h-4 text-text-quaternary cursor-pointer'
|
||||
className='h-4 w-4 cursor-pointer text-text-quaternary'
|
||||
onClick={
|
||||
(e) => {
|
||||
e.stopPropagation()
|
||||
@@ -84,13 +84,13 @@ const CategoriesFilter = ({
|
||||
}
|
||||
{
|
||||
!selectedTagsLength && (
|
||||
<RiArrowDownSLine className='w-4 h-4' />
|
||||
<RiArrowDownSLine className='h-4 w-4' />
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-10'>
|
||||
<div className='w-[240px] border-[0.5px] border-components-panel-border bg-components-panel-bg-blur rounded-xl shadow-lg'>
|
||||
<div className='w-[240px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg'>
|
||||
<div className='p-2 pb-1'>
|
||||
<Input
|
||||
showLeftIcon
|
||||
@@ -99,19 +99,19 @@ const CategoriesFilter = ({
|
||||
placeholder={t('plugin.searchCategories')}
|
||||
/>
|
||||
</div>
|
||||
<div className='p-1 max-h-[448px] overflow-y-auto'>
|
||||
<div className='max-h-[448px] overflow-y-auto p-1'>
|
||||
{
|
||||
filteredOptions.map(option => (
|
||||
<div
|
||||
key={option.name}
|
||||
className='flex items-center px-2 py-1.5 h-7 rounded-lg cursor-pointer hover:bg-state-base-hover'
|
||||
className='flex h-7 cursor-pointer items-center rounded-lg px-2 py-1.5 hover:bg-state-base-hover'
|
||||
onClick={() => handleCheck(option.name)}
|
||||
>
|
||||
<Checkbox
|
||||
className='mr-1'
|
||||
checked={value.includes(option.name)}
|
||||
/>
|
||||
<div className='px-1 system-sm-medium text-text-secondary'>
|
||||
<div className='system-sm-medium px-1 text-text-secondary'>
|
||||
{option.label}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -48,12 +48,12 @@ const TagsFilter = ({
|
||||
>
|
||||
<PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
|
||||
<div className={cn(
|
||||
'flex items-center px-2 py-1 h-8 text-text-tertiary rounded-lg bg-components-input-bg-normal hover:bg-state-base-hover-alt cursor-pointer',
|
||||
'flex h-8 cursor-pointer items-center rounded-lg bg-components-input-bg-normal px-2 py-1 text-text-tertiary hover:bg-state-base-hover-alt',
|
||||
selectedTagsLength && 'text-text-secondary',
|
||||
open && 'bg-state-base-hover',
|
||||
)}>
|
||||
<div className={cn(
|
||||
'flex items-center p-1 system-sm-medium',
|
||||
'system-sm-medium flex items-center p-1',
|
||||
)}>
|
||||
{
|
||||
!selectedTagsLength && t('pluginTags.allTags')
|
||||
@@ -63,7 +63,7 @@ const TagsFilter = ({
|
||||
}
|
||||
{
|
||||
selectedTagsLength > 2 && (
|
||||
<div className='ml-1 system-xs-medium text-text-tertiary'>
|
||||
<div className='system-xs-medium ml-1 text-text-tertiary'>
|
||||
+{selectedTagsLength - 2}
|
||||
</div>
|
||||
)
|
||||
@@ -72,20 +72,20 @@ const TagsFilter = ({
|
||||
{
|
||||
!!selectedTagsLength && (
|
||||
<RiCloseCircleFill
|
||||
className='w-4 h-4 text-text-quaternary cursor-pointer'
|
||||
className='h-4 w-4 cursor-pointer text-text-quaternary'
|
||||
onClick={() => onChange([])}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
!selectedTagsLength && (
|
||||
<RiArrowDownSLine className='w-4 h-4' />
|
||||
<RiArrowDownSLine className='h-4 w-4' />
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-10'>
|
||||
<div className='w-[240px] border-[0.5px] border-components-panel-border bg-components-panel-bg-blur rounded-xl shadow-lg'>
|
||||
<div className='w-[240px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg'>
|
||||
<div className='p-2 pb-1'>
|
||||
<Input
|
||||
showLeftIcon
|
||||
@@ -94,19 +94,19 @@ const TagsFilter = ({
|
||||
placeholder={t('pluginTags.searchTags')}
|
||||
/>
|
||||
</div>
|
||||
<div className='p-1 max-h-[448px] overflow-y-auto'>
|
||||
<div className='max-h-[448px] overflow-y-auto p-1'>
|
||||
{
|
||||
filteredOptions.map(option => (
|
||||
<div
|
||||
key={option.name}
|
||||
className='flex items-center px-2 py-1.5 h-7 rounded-lg cursor-pointer hover:bg-state-base-hover'
|
||||
className='flex h-7 cursor-pointer items-center rounded-lg px-2 py-1.5 hover:bg-state-base-hover'
|
||||
onClick={() => handleCheck(option.name)}
|
||||
>
|
||||
<Checkbox
|
||||
className='mr-1'
|
||||
checked={value.includes(option.name)}
|
||||
/>
|
||||
<div className='px-1 system-sm-medium text-text-secondary'>
|
||||
<div className='system-sm-medium px-1 text-text-secondary'>
|
||||
{option.label}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -146,17 +146,17 @@ const PluginPage = ({
|
||||
id='marketplace-container'
|
||||
ref={containerRef}
|
||||
style={{ scrollbarGutter: 'stable' }}
|
||||
className={cn('grow relative flex flex-col overflow-y-auto border-t border-divider-subtle', activeTab === 'plugins'
|
||||
className={cn('relative flex grow flex-col overflow-y-auto border-t border-divider-subtle', activeTab === 'plugins'
|
||||
? 'rounded-t-xl bg-components-panel-bg'
|
||||
: 'bg-background-body',
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'sticky top-0 flex min-h-[60px] px-12 pt-4 pb-2 items-center self-stretch gap-1 z-10 bg-components-panel-bg', activeTab === 'discover' && 'bg-background-body',
|
||||
'sticky top-0 z-10 flex min-h-[60px] items-center gap-1 self-stretch bg-components-panel-bg px-12 pb-2 pt-4', activeTab === 'discover' && 'bg-background-body',
|
||||
)}
|
||||
>
|
||||
<div className='flex justify-between items-center w-full'>
|
||||
<div className='flex w-full items-center justify-between'>
|
||||
<div className='flex-1'>
|
||||
<TabSlider
|
||||
value={activeTab}
|
||||
@@ -176,11 +176,11 @@ const PluginPage = ({
|
||||
className='px-3'
|
||||
variant='secondary-accent'
|
||||
>
|
||||
<RiBookOpenLine className='mr-1 w-4 h-4' />
|
||||
<RiBookOpenLine className='mr-1 h-4 w-4' />
|
||||
{t('plugin.submitPlugin')}
|
||||
</Button>
|
||||
</Link>
|
||||
<div className='mx-2 w-[1px] h-3.5 bg-divider-regular'></div>
|
||||
<div className='mx-2 h-3.5 w-[1px] bg-divider-regular'></div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -201,10 +201,10 @@ const PluginPage = ({
|
||||
popupContent={t('plugin.privilege.title')}
|
||||
>
|
||||
<Button
|
||||
className='w-full h-full p-2 text-components-button-secondary-text group'
|
||||
className='group h-full w-full p-2 text-components-button-secondary-text'
|
||||
onClick={setShowPluginSettingModal}
|
||||
>
|
||||
<RiEqualizer2Line className='w-4 h-4' />
|
||||
<RiEqualizer2Line className='h-4 w-4' />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)
|
||||
@@ -217,12 +217,12 @@ const PluginPage = ({
|
||||
{plugins}
|
||||
{dragging && (
|
||||
<div
|
||||
className="absolute inset-0 m-0.5 p-2 rounded-2xl bg-[rgba(21,90,239,0.14)] border-2
|
||||
border-dashed border-components-dropzone-border-accent">
|
||||
className="absolute inset-0 m-0.5 rounded-2xl border-2 border-dashed border-components-dropzone-border-accent
|
||||
bg-[rgba(21,90,239,0.14)] p-2">
|
||||
</div>
|
||||
)}
|
||||
<div className={`flex py-4 justify-center items-center gap-2 ${dragging ? 'text-text-accent' : 'text-text-quaternary'}`}>
|
||||
<RiDragDropLine className="w-4 h-4" />
|
||||
<div className={`flex items-center justify-center gap-2 py-4 ${dragging ? 'text-text-accent' : 'text-text-quaternary'}`}>
|
||||
<RiDragDropLine className="h-4 w-4" />
|
||||
<span className="system-xs-regular">{t('plugin.installModal.dropPluginToInstall')}</span>
|
||||
</div>
|
||||
{currentFile && (
|
||||
|
||||
@@ -63,16 +63,16 @@ const InstallPluginDropdown = ({
|
||||
<div className="relative">
|
||||
<PortalToFollowElemTrigger onClick={() => setIsMenuOpen(v => !v)}>
|
||||
<Button
|
||||
className={cn('w-full h-full p-2 text-components-button-secondary-text', isMenuOpen && 'bg-state-base-hover')}
|
||||
className={cn('h-full w-full p-2 text-components-button-secondary-text', isMenuOpen && 'bg-state-base-hover')}
|
||||
>
|
||||
<RiAddLine className='w-4 h-4' />
|
||||
<RiAddLine className='h-4 w-4' />
|
||||
<span className='pl-1'>{t('plugin.installPlugin')}</span>
|
||||
<RiArrowDownSLine className='w-4 h-4 ml-1' />
|
||||
<RiArrowDownSLine className='ml-1 h-4 w-4' />
|
||||
</Button>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-[1002]'>
|
||||
<div className='flex flex-col p-1 pb-2 items-start w-[200px] bg-components-panel-bg-blur border border-components-panel-border rounded-xl shadows-shadow-lg'>
|
||||
<span className='flex pt-1 pb-0.5 pl-2 pr-3 items-start self-stretch text-text-tertiary system-xs-medium-uppercase'>
|
||||
<div className='shadows-shadow-lg flex w-[200px] flex-col items-start rounded-xl border border-components-panel-border bg-components-panel-bg-blur p-1 pb-2'>
|
||||
<span className='system-xs-medium-uppercase flex items-start self-stretch pb-0.5 pl-2 pr-3 pt-1 text-text-tertiary'>
|
||||
{t('plugin.installFrom')}
|
||||
</span>
|
||||
<input
|
||||
@@ -94,7 +94,7 @@ const InstallPluginDropdown = ({
|
||||
].map(({ icon: Icon, text, action }) => (
|
||||
<div
|
||||
key={action}
|
||||
className='flex items-center w-full px-2 py-1.5 gap-1 rounded-lg hover:bg-state-base-hover !cursor-pointer'
|
||||
className='flex w-full !cursor-pointer items-center gap-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover'
|
||||
onClick={() => {
|
||||
if (action === 'local') {
|
||||
fileInputRef.current?.click()
|
||||
@@ -109,8 +109,8 @@ const InstallPluginDropdown = ({
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Icon className="w-4 h-4 text-text-tertiary" />
|
||||
<span className='px-1 text-text-secondary system-md-regular'>{text}</span>
|
||||
<Icon className="h-4 w-4 text-text-tertiary" />
|
||||
<span className='system-md-regular px-1 text-text-secondary'>{text}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -84,8 +84,8 @@ const PluginTasks = () => {
|
||||
<Tooltip popupContent={tip}>
|
||||
<div
|
||||
className={cn(
|
||||
'relative flex items-center justify-center w-8 h-8 rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs hover:bg-components-button-secondary-bg-hover',
|
||||
(isInstallingWithError || isFailed) && 'border-components-button-destructive-secondary-border-hover bg-state-destructive-hover hover:bg-state-destructive-hover-alt cursor-pointer',
|
||||
'relative flex h-8 w-8 items-center justify-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs hover:bg-components-button-secondary-bg-hover',
|
||||
(isInstallingWithError || isFailed) && 'cursor-pointer border-components-button-destructive-secondary-border-hover bg-state-destructive-hover hover:bg-state-destructive-hover-alt',
|
||||
)}
|
||||
id="plugin-task-trigger"
|
||||
>
|
||||
@@ -98,7 +98,7 @@ const PluginTasks = () => {
|
||||
!(isInstalling || isInstallingWithError) && (
|
||||
<RiInstallLine
|
||||
className={cn(
|
||||
'w-4 h-4 text-components-button-secondary-text',
|
||||
'h-4 w-4 text-components-button-secondary-text',
|
||||
(isInstallingWithError || isFailed) && 'text-components-button-destructive-secondary-text',
|
||||
)}
|
||||
/>
|
||||
@@ -125,12 +125,12 @@ const PluginTasks = () => {
|
||||
}
|
||||
{
|
||||
isSuccess && (
|
||||
<RiCheckboxCircleFill className='w-3.5 h-3.5 text-text-success' />
|
||||
<RiCheckboxCircleFill className='h-3.5 w-3.5 text-text-success' />
|
||||
)
|
||||
}
|
||||
{
|
||||
isFailed && (
|
||||
<RiErrorWarningFill className='w-3.5 h-3.5 text-text-destructive' />
|
||||
<RiErrorWarningFill className='h-3.5 w-3.5 text-text-destructive' />
|
||||
)
|
||||
}
|
||||
</div>
|
||||
@@ -138,8 +138,8 @@ const PluginTasks = () => {
|
||||
</Tooltip>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-[11]'>
|
||||
<div className='p-1 pb-2 w-[320px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg'>
|
||||
<div className='sticky top-0 flex items-center justify-between px-2 pt-1 h-7 system-sm-semibold-uppercase'>
|
||||
<div className='w-[320px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 pb-2 shadow-lg'>
|
||||
<div className='system-sm-semibold-uppercase sticky top-0 flex h-7 items-center justify-between px-2 pt-1'>
|
||||
{t('plugin.task.installedError', { errorLength: errorPluginsLength })}
|
||||
<Button
|
||||
className='shrink-0'
|
||||
@@ -155,20 +155,20 @@ const PluginTasks = () => {
|
||||
errorPlugins.map(errorPlugin => (
|
||||
<div
|
||||
key={errorPlugin.plugin_unique_identifier}
|
||||
className='flex p-2 rounded-lg hover:bg-state-base-hover'
|
||||
className='flex rounded-lg p-2 hover:bg-state-base-hover'
|
||||
>
|
||||
<div className='relative flex items-center justify-center mr-2 w-6 h-6 rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge'>
|
||||
<RiErrorWarningFill className='absolute -right-0.5 -bottom-0.5 z-10 w-3 h-3 text-text-destructive' />
|
||||
<div className='relative mr-2 flex h-6 w-6 items-center justify-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge'>
|
||||
<RiErrorWarningFill className='absolute -bottom-0.5 -right-0.5 z-10 h-3 w-3 text-text-destructive' />
|
||||
<CardIcon
|
||||
size='tiny'
|
||||
src={getIconUrl(errorPlugin.icon)}
|
||||
/>
|
||||
</div>
|
||||
<div className='grow'>
|
||||
<div className='system-md-regular text-text-secondary truncate'>
|
||||
<div className='system-md-regular truncate text-text-secondary'>
|
||||
{errorPlugin.labels[language]}
|
||||
</div>
|
||||
<div className='system-xs-regular text-text-destructive break-all'>
|
||||
<div className='system-xs-regular break-all text-text-destructive'>
|
||||
{errorPlugin.message}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -43,14 +43,14 @@ const PluginsPanel = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='flex flex-col pt-1 pb-3 px-12 justify-center items-start gap-3 self-stretch'>
|
||||
<div className='flex flex-col items-start justify-center gap-3 self-stretch px-12 pb-3 pt-1'>
|
||||
<div className='h-px self-stretch bg-divider-subtle'></div>
|
||||
<FilterManagement
|
||||
onFilterChange={handleFilterChange}
|
||||
/>
|
||||
</div>
|
||||
{isPluginListLoading ? <Loading type='app' /> : (filteredList?.length ?? 0) > 0 ? (
|
||||
<div className='flex px-12 items-start content-start gap-2 grow self-stretch flex-wrap'>
|
||||
<div className='flex grow flex-wrap content-start items-start gap-2 self-stretch px-12'>
|
||||
<div className='w-full'>
|
||||
<List pluginList={filteredList || []} />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user