fix(web): disable quota-reached create actions (#2389)

* fix(web): disable quota-reached create actions

* fix(web): close quota review gaps

---------

Co-authored-by: dadachann <185672915+dadachann@users.noreply.github.com>
This commit is contained in:
Hyu
2026-08-03 19:08:47 +08:00
committed by GitHub
parent 3101c9be6a
commit f0b2c103c1
21 changed files with 1037 additions and 293 deletions
@@ -7,6 +7,8 @@ import { httpClient } from '@/app/infra/http/HttpClient';
import { extractI18nObject } from '@/i18n/I18nProvider';
import { usePluginInstallTasks } from '@/app/home/plugins/components/plugin-install-task';
import PluginComponentList from '@/app/home/plugins/components/plugin-installed/PluginComponentList';
import { WorkspaceQuotaTooltip } from '@/app/home/components/workspace-quota/WorkspaceQuotaTooltip';
import type { WorkspaceQuotaItem } from '@/app/home/components/workspace-quota/useWorkspaceQuotaStatus';
type PluginLocalPreview = Awaited<
ReturnType<typeof httpClient.previewPluginInstallFromLocal>
@@ -16,6 +18,8 @@ interface PluginLocalPreviewPanelProps {
file: File;
onInstallStarted?: () => void;
onCancel?: () => void;
quota?: WorkspaceQuotaItem;
quotaResource?: string;
}
function formatFileSize(bytes: number): string {
@@ -30,6 +34,8 @@ export default function PluginLocalPreviewPanel({
file,
onInstallStarted,
onCancel,
quota,
quotaResource = '',
}: PluginLocalPreviewPanelProps) {
const { t } = useTranslation();
const { addTask, setSelectedTaskId } = usePluginInstallTasks();
@@ -63,6 +69,7 @@ export default function PluginLocalPreviewPanel({
}, [loadPreview]);
async function handleInstall() {
if (quota?.disabled) return;
setInstalling(true);
setErrorMessage(null);
try {
@@ -190,13 +197,27 @@ export default function PluginLocalPreviewPanel({
{t('common.cancel')}
</Button>
)}
<Button
type="button"
onClick={handleInstall}
disabled={!preview || previewing || installing}
>
{installing ? t('plugins.installing') : t('plugins.confirmInstall')}
</Button>
{quota ? (
<WorkspaceQuotaTooltip quota={quota} resource={quotaResource}>
<Button
type="button"
onClick={handleInstall}
disabled={quota.disabled || !preview || previewing || installing}
>
{installing
? t('plugins.installing')
: t('plugins.confirmInstall')}
</Button>
</WorkspaceQuotaTooltip>
) : (
<Button
type="button"
onClick={handleInstall}
disabled={!preview || previewing || installing}
>
{installing ? t('plugins.installing') : t('plugins.confirmInstall')}
</Button>
)}
</div>
</div>
);
@@ -80,9 +80,13 @@ function loadMarketFilters(): MarketFilters {
function MarketPageContent({
installPlugin,
headerActions,
installDisabled,
installDisabledTooltip,
}: {
installPlugin: (plugin: PluginV4) => void;
headerActions?: React.ReactNode;
installDisabled?: boolean;
installDisabledTooltip?: string;
}) {
const { t } = useTranslation();
const [searchParams] = useSearchParams();
@@ -847,6 +851,8 @@ function MarketPageContent({
lists={recommendationLists}
tagNames={tagNames}
onInstall={handleInstallPlugin}
installDisabled={installDisabled}
installDisabledTooltip={installDisabledTooltip}
/>
)}
@@ -876,6 +882,8 @@ function MarketPageContent({
cardVO={plugin}
onInstall={handleInstallPlugin}
tagNames={tagNames}
installDisabled={installDisabled}
installDisabledTooltip={installDisabledTooltip}
/>
))}
</div>
@@ -915,9 +923,13 @@ function MarketPageContent({
export default function MarketPage({
installPlugin,
headerActions,
installDisabled,
installDisabledTooltip,
}: {
installPlugin: (plugin: PluginV4) => void;
headerActions?: React.ReactNode;
installDisabled?: boolean;
installDisabledTooltip?: string;
}) {
return (
<Suspense
@@ -932,6 +944,8 @@ export default function MarketPage({
<MarketPageContent
installPlugin={installPlugin}
headerActions={headerActions}
installDisabled={installDisabled}
installDisabledTooltip={installDisabledTooltip}
/>
</Suspense>
);
@@ -54,11 +54,15 @@ function RecommendationListRow({
list,
tagNames,
onInstall,
installDisabled,
installDisabledTooltip,
isLast,
}: {
list: RecommendationList;
tagNames: Record<string, string>;
onInstall: (cardVO: PluginMarketCardVO) => void;
installDisabled?: boolean;
installDisabledTooltip?: string;
isLast: boolean;
}) {
const { t } = useTranslation();
@@ -263,6 +267,8 @@ function RecommendationListRow({
cardVO={pluginToVO(plugin, t)}
tagNames={tagNames}
onInstall={onInstall}
installDisabled={installDisabled}
installDisabledTooltip={installDisabledTooltip}
/>
))}
</div>
@@ -277,10 +283,14 @@ export function RecommendationLists({
lists,
tagNames,
onInstall,
installDisabled,
installDisabledTooltip,
}: {
lists: RecommendationList[];
tagNames: Record<string, string>;
onInstall: (cardVO: PluginMarketCardVO) => void;
installDisabled?: boolean;
installDisabledTooltip?: string;
}) {
if (!lists || lists.length === 0) return null;
@@ -292,6 +302,8 @@ export function RecommendationLists({
list={list}
tagNames={tagNames}
onInstall={onInstall}
installDisabled={installDisabled}
installDisabledTooltip={installDisabledTooltip}
isLast={index === lists.length - 1}
/>
))}
@@ -23,10 +23,14 @@ export default function PluginMarketCardComponent({
cardVO,
onInstall,
tagNames = {},
installDisabled = false,
installDisabledTooltip,
}: {
cardVO: PluginMarketCardVO;
onInstall?: (cardVO: PluginMarketCardVO) => void;
tagNames?: Record<string, string>;
installDisabled?: boolean;
installDisabledTooltip?: string;
}) {
const { t } = useTranslation();
const bottomRef = useRef<HTMLDivElement>(null);
@@ -127,6 +131,7 @@ export default function PluginMarketCardComponent({
const remainingTags = cardVO.tags ? cardVO.tags.length - visibleTags : 0;
const handleInstallClick = () => {
if (installDisabled) return;
onInstall?.(cardVO);
};
@@ -153,12 +158,17 @@ export default function PluginMarketCardComponent({
}
};
return (
const cardContent = (
<div
role="button"
role={installDisabled ? 'group' : 'button'}
tabIndex={0}
aria-disabled={installDisabled}
aria-label={t('market.installCard', { name: cardVO.label })}
className="w-[100%] h-[10rem] cursor-pointer bg-white rounded-[10px] border border-border shadow-[0px_1px_2px_0_rgba(0,0,0,0.06)] p-3 sm:p-[1rem] hover:shadow-[0px_2px_5px_0_rgba(0,0,0,0.08)] transition-shadow duration-200 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 dark:bg-[#1f1f22] dark:shadow-[0px_1px_2px_0_rgba(255,255,255,0.04)] dark:hover:shadow-[0px_2px_5px_0_rgba(255,255,255,0.07)] relative"
className={`w-[100%] h-[10rem] bg-white rounded-[10px] border border-border shadow-[0px_1px_2px_0_rgba(0,0,0,0.06)] p-3 sm:p-[1rem] transition-shadow duration-200 outline-none dark:bg-[#1f1f22] dark:shadow-[0px_1px_2px_0_rgba(255,255,255,0.04)] relative ${
installDisabled
? 'cursor-not-allowed opacity-60'
: 'cursor-pointer hover:shadow-[0px_2px_5px_0_rgba(0,0,0,0.08)] focus-visible:ring-[3px] focus-visible:ring-ring/50 dark:hover:shadow-[0px_2px_5px_0_rgba(255,255,255,0.07)]'
}`}
onClick={handleInstallClick}
onKeyDown={(event) => {
if (
@@ -382,4 +392,17 @@ export default function PluginMarketCardComponent({
</div>
</div>
);
if (!installDisabled || !installDisabledTooltip) return cardContent;
return (
<TooltipProvider delayDuration={200}>
<Tooltip>
<TooltipTrigger asChild>{cardContent}</TooltipTrigger>
<TooltipContent side="top" className="max-w-72 text-center">
{installDisabledTooltip}
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}