mirror of
https://github.com/langbot-app/LangBot.git
synced 2026-09-17 23:37:15 +00:00
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:
@@ -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}
|
||||
/>
|
||||
))}
|
||||
|
||||
+26
-3
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user